Tworzenie stron internetowych

Slides:



Advertisements
Podobne prezentacje
Tworzenie stron internetowych
Advertisements

Style CSS.
Kurs WWW – wykład 3 Paweł Rajba
Narzędzia internetowe Paweł Rajba
Tworzenie stron internetowych www World Wide Web
Kurs języka HTML Mariusz Tomczyk.
Wstawianie stylów CSS.
Specjalizacja "Dziennikarstwo On-line„ Arkusze stylów – CSS Część 5 Prowadzący: Dariusz Jaruga
Cascading Style Sheets
Czcionki, tekst, odnośniki
Wprowadzenie do CSS Okiełznać style.
Temat 3: Właściwości CSS
Aplikacje internetowe
Aplikacje internetowe CSS - style fontów, tekstu Ciąg dalszy.
Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Wprowadzenie do kaskadowych arkuszy stylów Informatyka.
Temat 4: Klasy i identyfikatory
CSS - Selektory. Selektory Selektorem można nazwoć dowolny element języka HTML, dla którego chcemy zdefiniować parametry formatowania. Wyróżniamy następujące.
C S S 1 Cascading Style Sheets HTML pozwala zarządzać strukturą dokumentu, STYLE mają nam służyć do jego upiększania Kaskadowe Arkusze Stylów.
HTML HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) – język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie.
Temat 2: Składnia kaskadowych arkuszy stylów. Za zmianę wyglądu witryny w kaskadowych arkuszach stylów odpowiadają reguły stylów. Każda z reguł powiązana.
Technologie internetowe
Kaskadowe arkusze stylów CSS. Reguła CSS – definiuje sposób formatowania elementów na stronie WWW Części składowe reguły CSS selektor{ właściwość: wartość;
Wykład 4 Informatyka MPDI sem.3 HTML cd. Arkusze stylów - CSS.
Proces doboru próby. Badana populacja – (zbiorowość generalna, populacja generalna) ogół rzeczywistych jednostek, o których chcemy uzyskać informacje.
Blok I: PODSTAWY TECHNIKI Lekcja 7: Charakterystyka pojęć: energia, praca, moc, sprawność, wydajność maszyn (1 godz.) 1. Energia mechaniczna 2. Praca 3.
Równowaga chemiczna - odwracalność reakcji chemicznych
„Jak pomóc uczniom się uczyć i czerpać z tego radość?” opracowała: Krystyna Turska.
Jak złożyć wniosek ? (GWA) Regionalny Program Operacyjny Województwa Pomorskiego na lata
Tworzenie odwołania zewnętrznego (łącza) do zakresu komórek w innym skoroszycie Możliwości efektywnego stosowania odwołań zewnętrznych Odwołania zewnętrzne.
HTML Witamy w wirtualnym języku HTML ostatni następny.
PRACA Z APLIKACJAMI SYSTEM PRZEMIESZCZANIA oraz NADZORU WYROBÓW AKCYZOWYCH EMCS PL 1.
Wyszukiwanie informacji w Internecie. Czym jest wyszukiwarka? INTERNET ZASOBY ZAINDEKSOWANE PRZEZ WYSZUKIWARKI Wyszukiwarka to mechanizm, który za pomocą.
Zasady tworzenia prezentacji multimedialnych Autor: Switek Marian.
Zasady tworzenia prezentacji multimedialnych I. Główne zasady: prezentacja multimedialna powinna być ilustracją (uzupełnieniem) treści prezentowanych.
Excel 2007 dla średniozaawansowanych zajęcia z dnia
 Czasem pracy jest czas, w którym pracownik pozostaje w dyspozycji pracodawcy w zakładzie pracy lub w innym miejscu wyznaczonym do wykonywania pracy.
Poczta elektroniczna – e- mail Gmail zakładanie konta. Wysyłanie wiadomości.
Literary Reference Center Przewodnik
Porównywarki cen leków w Polsce i na świecie. Porównywarki w Polsce.
Algorytmy Informatyka Zakres rozszerzony
Standardy de facto zapisu georeferencji map o postaci rastrowej definicja georeferencji standard „World File” standard GeoTIFF.
Wyższa Szkoła Informatyki i Zarządzania w Bielsku-Białej Wydział Informatyki Kierunek: Informatyka Specjalność: Systemy Informatyczne PRACA DYPLOMOWA INŻYNIERSKA.
Microsoft PowerPoint. Metodyka „dobrej” prezentacji.
Python. Języki Programistyczne Microcode Machine code Assembly Language (symboliczna reprezentacja machine code) Low-level Programming Language (FORTRAN,
Kaskadowe arkusze stylów CSS - Cascading Style Sheets.
Metody sztucznej inteligencji - Technologie rozmyte i neuronowe 2015/2016 Perceptrony proste nieliniowe i wielowarstwowe © Kazimierz Duzinkiewicz, dr hab.
Definiowanie i planowanie zadań typu P 1.  Planowanie zadań typu P  Zadania typu P to zadania unikalne służące zwykle dokonaniu jednorazowej, konkretnej.
Magdalena Garlińska Generator wniosków o dofinansowanie Program INNOCHEM.
MS WORD 2010.
CSS 3 Technologie Informacyjne Literatura:
Dział ds. Osób Niepełnosprawnych
Schematy blokowe.
DEFINICJA I ZASTOSOWANIE W JĘZYKU HASKELL
Full Text Finder Przegląd Publication Finder
Programowanie obiektowe
Przewodnik Udoskonalanie listy wyników w wyszukiwarce naukowej
Technologie internetowe Zofia Kruczkiewicz
PROGRAMY DO KONTROLI RODZICIELSKIEJ
Git - system kontroli wersji
Arkusz stylów CSS Cascading Style Sheet.
PODSTAWY TWORZENIA STRON WWW W HTML’u
Podstawy języka HTML.
Jak dostosować witrynę internetową usługi Microsoft SharePoint Online
Damian Urbańczyk xHTML Tworzenie stylów CSS.
Podstawy informatyki Zygfryd Głowacz.
temat stwierdzenie Grafika SmartArt z obrazami na czerwonym tle
Dodatek – Technologie internetowe
Proste obliczenia w arkuszu kalkulacyjnym
Style definiujące tekst
Tworzenie dokumentu HTML
Zapis prezentacji:

Tworzenie stron internetowych CSS – Kaskadowe Arkusze Stylów „Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro” Św. Izydor z Sewilli

Kaskadowe Arkusze Stylów (ang. Cascading Style Sheets) mechanizm pozwalający przypisywać style elementom definiowanym przy pomocy języków opisu dokumentu (przede wszystkim (X)HTML lub XML), opisuje sposób prezentacji dokumentu przez przeglądarkę, zwiększenie przejrzystości kodu HTML poprzez oddzielenie struktury i treści dokumentu od opisów formatowania poszczególnych elementów, style pozwalają kontrolować takie atrybuty jak: rodzaj, rozmiar i kolor czcionki, wyrównywanie, wielkość marginesów, głębokość wcięcia akapitu, kolor i grafikę tła, odstępy między elementami, wzajemne położenie elementu i otaczającego go tekstu.

Krótka historia pierwotnie HTML jako języki wyłącznie do opisu struktury dokumentu, potrzeba ożywienia wyglądu dokumentów HTML, dodanie nowych znaczników pozwalających kontrolować kolory, typografię, dodawać nowe media (np. obrazki), powstanie znaczników działających tylko w konkretniej grupie przeglądarek, konieczność wysyłania do klienta różnych wersji tej samej witryny w zależności od użytej przeglądarki, 1994 - powstanie CHSS (Cascading HTML Style Sheets) - Håkon Wium Lie, możliwość stosowania stylów do innych języków podobnych do HTML, stąd nowa nazwa – CSS, 1996 – wydanie oficjalnej dokumentacji: „CSS, Kaskadowe arkusze stylów, poziom 1” przez organizację World Wide Web Consortium, która przejęła prace nad CSS, aktualnie dostępne są następujące wersje: - CSS1, CSS2, CSS2.1, CSS3.

Wstawianie CSS do HTML sposoby umieszczania styli CSS w dokumencie HTML: styl lokalny, styl zagnieżdżony, wydzielanie bloków, CSS z pliku zewnętrznego, importowanie arkusza z innej strony. oznaczenia przyjęte w prezentacji: <p style="text-align: center;"> tekst </p> tekst zwykły, znaczniki HTML, elementy CSS.

Styl lokalny bezpośrednie wstawienie stylu w obrębie danego znacznika, formatowany jest jedynie znacznik, w którym styl został umieszczony, pozostałe znaczniki (nawet tego samego typu) pozostają bez zmian, Przykład: <p style="text-align: center;"> tekst </p>

Styl osadzony definicję stylu umieszcza się w nagłówku dokumentu HTML (<head>), w otwierającym tagu <style> należy dodać jego typ, czyli type="text/css" - niektóre przeglądarki mogą niepoprawnie wyświetlić stronę jeżeli nie dodamy tego elementu, samą definicję stylu (pomiędzy <style> a </style>) umieszczamy jako komentarz (<!-- -->), aby ukryć definicję stylu przed przeglądarkami, które nie obsługują CSS.

Styl osadzony – przykład <head> <style type="text/css"> <!-- body {scrollbar-face-color: black;} p {text-align: center; font-family: "Tahoma";} h1 {color: red;} --> </style> </head>

Wydzielanie bloków wydzielanie formatowanych bloków za pomocą znaczników: <div> </div> i <span> </span>, następny krok można wykonać na dwa sposoby: definicja stylu umieszczona bezpośrednio w wydzielonym bloku (styl lokalny), definicja stylu umieszczona w nagłówku dokumentu (styl zagnieżdżony), w przypadku pierwszym zasada taka jak przy stylu lokalnym, z tą różnicą, że w typowym stylu lokalnym formatowany był konkretny znacznik, a tutaj formatowany jest cały blok (może w nim być więcej znaczników), w przypadku drugim, definiując styl, należy wskazać który blok definiujemy, a następnie zdefiniować dla niego styl (przykład na następnym slajdzie), różnica pomiędzy <div> i <span>: <div> może zawierać w sobie więcej elementów niż <span>, mogą w nim być umieszczone nawet następne bloki.

Wydzielanie bloków – przykład definicja stylu „blok1” w nagłówku dokumentu: #blok1 {font-family: verdana; font-size: 14px;} #blok1 - niepowtarzalna nazwa (id) konkretnego bloku w dokumencie,   wydzielenie bloku: <div id="blok1"> tekst, grafika itp. </div> tym sposobem przypisujemy temu blokowi parametr id, dla którego styl został zdefiniowany w nagłówku dokumentu. Wszystkie elementy, które znajdą się w tym bloku (tekst, grafika itp.), zostaną sformatowane zgodnie ze stylem określonym w #blok1.

CSS z pliku zewnętrznego dołączenie do strony zewnętrznego arkusza stylów (plik z rozszerzeniem .css), w którym definiujemy poszczególne style, przykład takiego pliku na następnym slajdzie, powiązanie każdej ze stron naszej witryny z powyższym arkuszem stylów poprzez dopisanie w ich nagłówkach znacznika: <link rel=”stylesheet” href="nazwa_pliku.css" type="text/css">

CSS z pliku zewnętrznego – przykład Przykład zewnętrznego arkusza stylów (np. plik styl.css): <html> <style type="text/css"> <!-- hr {color: darkgoldenrod; width: 80%;} h1 {font-family: "Tahoma"; font-size: 20pt;} p {text-align: justify; font-size: 10pt;} .maly_tekst {font-size: 5pt;} li {text-align: justify; font-size: 10pt;} a {color: goldenrod;} .img_oplyw {float: left} --> </style> </html>

Kaskadowość stylów hierarchia źródeł stylów, od lokalizacji stylu zależy zasięg jego oddziaływania, rodzaje arkuszy stylów zaczynając od najbardziej ogólnych: → styl importowany z zewnątrz (z innej witryny), → styl z pliku zewnętrznego, → styl osadzony, → styl lokalny, kaskadowość stylów objawia się w przypadku korzystania z przynajmniej dwóch z wymienionych wcześniej rodzajów arkuszy, gdy jakiś element znajduje się w zasięgu więcej niż jednego stylu, obowiązuje zasada, że styl znajdujący się "bliżej" formatowanego elementu znosi działanie stylu "odległego".

Budowanie stylu ogólna postać arkusza stylu: selektor {cecha: wartość; cecha: wartość;} dowolność zapisu: selektor { cecha: wartość; cecha: wartość; cecha: wartość; } selektor – element, dla którego chcemy zdefiniować styl, cecha – to, co chcemy określić dla danego elementu (np. kolor), wartość – np. 12px, blue, small, bold.

Budowanie stylu – przykłady chcemy ustalić kolor czcionki dla zwykłego akapitu (<p>), p {color: green;} lub P {COLOR: #00FF00;} chcemy ustalić szerokość i kolor linii poziomej (<hr>), hr {width: 100px; color: silver;} chcemy wyjustować listy wypunktowane (<li>), li {text-align: justify;}

Selektor – class Przykład - class jako selektor: <HTML> <HEAD> <TITLE>Tytuł strony</TITLE> <STYLE TYPE="text/css"> H1.naglowek1 {color: #00FF00;} </STYLE> </HEAD> <BODY> <H1 CLASS=naglowek1>Rozdział 1</H1> </BODY> </HTML>

Selektor – class c.d. H1.naglowek1 {color: #00FF00;} można użyć tylko dla znaczników <H1> prawidłowo: <H1 CLASS=naglowek1>Rozdział 1</H1> nieprawidłowo: <P CLASS=naglowek1>Tekst</P> .naglowek1 {color: #00FF00;} można użyć dla dowolnych znaczników prawidłowo: <P CLASS=naglowek1>Tekst</P> H1 {color: #00FF00;} domyślnie stosowany dla każdego znaczników <H1> prawidłowo: <H1>Rozdział 1</H1> prawidłowo: <H1 CLASS=naglowek1>Tekst</H1> tutaj zostanie zasłonięty przez styl naglowek1 (bardziej szczegółowy)

Przykład … body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm} .lewa {text-align: left} .prawa {text-align: right} <h2>Czerwony nagłówek na białym tle</h2> <p class=lewa> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. </p> <p class=prawa> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. <h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p class=left>

Selektor – id definicje stylu: #tytul_3 {font-size: 16;} H1#tytul_3 {font-size: 16;} formatowany element (w <body>): <P ID=tytul3>Jakiś tytuł</P> analogia do selektora class: przy definicji pierwszej takie formatowanie jest poprawne, przy definicji drugiej jest niepoprawne, ponieważ ten styl można zastosować tylko do znacznika <H1>.

Rozciąganie stylu Rozciąganie stylu polega na objęciu stylem pewnej sekcji dokumentu HTML. Służy do tego para znaczników <span> </span> Element span jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku znaków w obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać, aby zastosować styl do większej sekcji dokumentu <span style=”definicja_stylu”> </span> .kolorowa {font-size: 24pt; color: #FFFFFF} <span class="kolorowa"> Przykład: <h2>Ala <span style="font-variant: small-caps; color:blue; text-decoration: underline">ma</span> kota</h2>

Cechy – tekst font-family – krój czcionki nazwa czcionki np. verdana, Arial jeżeli jest wielowyrazowa, to musi zostać ujęta w cudzysłów np. ‘Arial CE‘ font-size – wielkość czcionki w jednostkach np. 11px w procentach nazwa: xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller font-weight – grubość czcionki nazwa: normal, bold, bolder, lighter liczba: 100-900 font-style – określa czy czcionka jest pisana kursywą czy nie nazwa: normal, italic, oblique font-variant – kapitaliki nazwa: normal, small-caps

test-decoration – dekoracja tekstu color – kolor tekstu nazwa angielska np. white wartość szesnastkowa np. #FFFFFF test-decoration – dekoracja tekstu nazwa: none, underline, overline, line-through, blink text-transform – transformacja tekstu nazwa: none, capitalize, uppercase, lowercase text-align – wyrównanie tekstu nazwa: left, center, right, justify text-indent – wcięcie tekstu dowolna wartość procentowa wartość wyrażona w jednostkach np. 10pt line-height, letter-spacing, word-spacing – odstępy między: wierszami, literami, wyrazami nazwa: normal vertical-align – pionowe wyrównanie tekstu nazwa: baseline, sub, super, top, text-top, middle, bottom, text-bottom

Cechy – tło background-color – kolor tła transparent (przezroczystość), nazwa angielska, wartość szesnastkowa background-image – rysunek w tle none lub url (nazwa_pliku) background-attachment – przewijanie tła wraz z tekstem scroll, fixed background-repeat – powtarzanie się tła repeat, no-repeat, repeat-x, repeat-y background-position – pozycja tła left, right, center, bottom, top

Pozostałe cechy Oprócz wyżej wymienionych elementów można formatować jeszcze wiele innych (wykazy, marginesy, tabele, opływanie rysunku tekstem, warstwy, pozycjonowanie itp.). Działanie jest analogiczne, a wszystkich możliwości jest bardzo dużo. Pełny opis możliwości CSS znajduje się w oficjalnej specyfikacji na stronie World Wibe Web Consortium, pod adresem: http://www.w3.org/Style/CSS/

Przykład – zmiana wyglądu tabeli w HTML przykładowa prosta strona stworzona za pomocą HTML; index.html: <HTML> <HEAD><TITLE>CSS</TITLE></HEAD> <BODY> <CENTER><H2>obramowanie i paski przewijania</H2><CENTER> <TABLE BORDER=1 BGCOLOR=yellow ALIGN=center> <TR ALIGN=center> <TD WIDTH=200><FONT FACE=Arial COLOR=green SIZE=3> ELEMENT</FONT></TD> <TD WIDTH=150><FONT FACE=Arial COLOR=green SIZE=3> OPIS</FONT></TD> <TD WIDTH=250><FONT FACE=Arial COLOR=green SIZE=3> MOŻLIWE WARTOSCI</FONT></TD> </TR>

<TR ALIGN=center> <TD WIDTH=200><FONT FACE=Arial COLOR=green SIZE=3> border-width</FONT></TD> <TD WIDTH=150><FONT FACE=Arial COLOR=green SIZE=3> grubosc obramowania</FONT></TD> <TD WIDTH=250><FONT FACE=Arial COLOR=green SIZE=3> w punktach (pt), procentach lub pikselach</FONT></TD> </TR> [...] scrollbar-darkshadow-color</FONT></TD> wszystkie dostępne kolory HTML</FONT></TD> </TABLE> </BODY> </HTML>

w przeglądarce powyższa strona wygląda następująco (Firefox 2.0.0.7): modyfikacja wyglądu tabeli – np. zmiana czcionki w komórkach – wymaga zmiany w każdej komórce z osobna; biorąc pod uwagę, że jest 26 komórek zawierających tekst – należy 26 razy wpisać/skopiować to samo, np. w miejsce: <FONT FACE=Arial COLOR=green SIZE=3> wkleić: <FONT FACE=Arial COLOR=darkgreen SIZE=3> problem się potęguje, gdy dopiero szukamy pasującego układu kolorów i w tym celu sprawdzamy różne możliwości

Przykład c. d. – teraz w HTML + CSS tym razem stosujemy CSS; index.html: <HTML> <HEAD><TITLE>CSS</TITLE> <LINK REL=stylesheet TYPE="text/css" HREF="style.css"> </HEAD> <BODY> <H2>obramowanie i paski przewijania</H2> <TABLE BORDER=1 BGCOLOR=yellow ALIGN=center> <TR ALIGN=center> <TD WIDTH=200>ELEMENT</TD> <TD WIDTH=150>OPIS</TD> <TD WIDTH=250>MOŻLIWE WART.</TD> </TR> [...] </TABLE> </BODY> </HTML>

<STYLE TYPE="text/css"> <!-- H2 { FONT-FAMILY: Arial; style.css: <HTML> <STYLE TYPE="text/css"> <!-- H2 { FONT-FAMILY: Arial; FONT-SIZE: 20; COLOR: darkgreen; TEXT-ALIGN: center; LETTER-SPACING: 0; } td { BORDER WIDTH: 1pt; BORDER-STYLE: dashed; BORDER-COLOR: darkgreen; table { BORDER-WIDTH: thick; BORDER-STYLE: groove; FONT-FAMILY: Arial; FONT-SIZE: 14; FONT-WEIGHT: 200; COLOR: #333300; TEXT-ALIGN: center; LETTER-SPACING: 1; } --> </STYLE> </HTML>

nowa strona wygląda następująco: zmiana czcionki w komórkach wymaga zmiany jedynie w pliku style.css, w opisie formatowania tabeli, np. zamiast: FONT-SIZE: 14; piszemy: FONT-SIZE: 12; i wszystkie komórki tabeli zostaną zaktualizowane dodając do tego więcej możliwości formatowania w CSS niż w HTML, użycie CSS jest tutaj bardzo korzystne

Podsumowanie zalety stosowania CSS w HTML: przydatne linki: o wiele krótsze wprowadzanie zmian w formatowaniu dokumentu HTML, a co za tym również idzie – mniej możliwości popełnienia błędu, więcej możliwości formatowania, oddzielenie struktury dokumentu (HTML) od opisów formatowania (CSS). przydatne linki: specyfikacja na oficjalnej stronie W3C: http://www.w3.org/Style/CSS/ kursy, artykuły: http://www.kurshtml.boo.pl/ http://www.webinside.pl/ http://www.webhelp.pl/

Dziękuję za uwagę