Blok dokumentu Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów dokumentu. Na blokach formatowanych za pomocą kaskadowych arkuszy stylów oparte są dziś nowoczesne układy stron (ang. layouty). <div> </div> Polecenie pozwala wydzielić większy blok w dokumencie, np. fragment tekstu, grafikę czy wykaz (nawet kilka różnych elementów jednocześnie), a następnie nadać mu jakiś rodzaj formatowania, np. środkowanie lub dosunięcie do prawego marginesu, nadanie koloru itd. Do elementów blokowych zaliczane są też listy (wykazy). 1
Elementy liniowe Zakres to element liniowy definiowany za pomocą polecenia <span> </span>. Jest elementem wydzielającym jakiś fragment dokumentu, ale w przeciwieństwie do polecenia div pełni tę rolę jako element liniowy, np. pozwala wydzielić fragment akapitu i nadać mu za pomocą stylów specjalne formatowanie, jak pogrubienie tekstu w kolorze niebieskim albo pochylenie tekstu na zielonym tle. Przykład <span> </span> <p>w tym akapicie <span style="font-weight:bold; color:blue">ten fragment jest pogrubiony i w niebieskim kolorze</span>, a dalej już nie.</p> W tym akapicie ten fragment jest pogrubiony i w niebieskim kolorze, a dalej już nie. 2
ZADANIE 26a Otwórz plik zadanie25c.html i zapisz go pod nazwą zadanie26a.html. o Trzy pierwsze listy (wykazy) z zadania 21 obejmij jednym blokiem div i nadaj im wspólne formatowanie: czcionka Arial, rozmiar x-small, kolor zielony, wyrównanie tekstu do środka strony. o Na końcu dokumentu wpisz dowolny tekst. Ujmij jego fragment w znacznik span i nadaj mu formatowanie: kolor czcionki żółty, tło niebieskie, kursywa. 3
Kaskadowe Arkusze Stylów CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych. CSS nie może zatem istnieć samodzielnie, gdyż jest ściśle powiązane z językiem opisu struktury dokumentów takim jak (X)HTML. CSS daje możliwość globalnego zarządzania formą prezentacji całej witryny internetowej. Pomysł ten nie jest wcale nowy. Style formatujące są wbudowane od dawna w praktycznie każdy bardziej zaawansowany edytor tekstu. Posiada je np. MS Word i Open Office. 4
Dlaczego warto używać CSS? Style stały się już praktycznie podstawowym narzędziem formatującym. Jeśli poważnie myślisz o zajęciu się projektowaniem stron WWW, koniecznie musisz je poznać. Przestarzałe atrybuty i znaczniki, znajdujące się bezpośrednio w składni HTML, które dotyczą formatowania będą stopniowo wycofywane przez producentów przeglądarek internetowych, na rzecz rekomendowanych analogicznych deklaracji CSS. Dokumenty pisane z wykorzystaniem arkuszy stylów są zwykle bardziej przejrzyste i krótsze. Style pozwalają w łatwy sposób zarządzać całą serią dokumentów, poprzez stosowanie zewnętrznych arkuszy stylów. Dzięki temu w łatwy i wygodny sposób, można dokonać modyfikacji rodzaju formatowania jednocześnie we wszystkich dokumentach, zmieniając dane tylko w jednym pliku! 5
Style sposoby definiowania Łączenie stylów (Linked styles) informacje o stylach są odczytywane z oddzielnego pliku Osadzanie stylów (Embedded styles) informacje o stylach definiowane są w nagłówku dokumentu etykietami <style> i </style>, Wbudowywanie stylów (Inline styles) informacje o stylach zawarte są wewnątrz etykiety HTML i stosowane do całej zawartości, znajdującej się między daną etykietą a jej etykietą zamykającą. 6
Priorytety stylów Wbudowany styl ma priorytet wyższy niż połączone arkusze stylów i informacje o stylach zachowywane w nagłówku w etykiecie <style>. Style zdefiniowane w nagłówku dokumentu mają wyższy priorytet niż połączone arkusze stylów. Połączone arkusze stylów mają wyższy priorytet niż domyślne style przeglądarki. 7
Style wbudowane (inline styles) Styl wbudowany ma postać: <selektor style="cecha: wartość; cecha2: wartość2...">...</selektor> Selektorem może być praktycznie dowolny znacznik, np. p (akapit), h1 (tytuł), td (komórka tabeli) i inne. Jako cecha, czy inaczej własność bądź właściwość (ang. "property"), należy wpisać o jakie konkretnie atrybuty formatowania nam chodzi, np. kolor tekstu. Jako wyraz wartość (w deklaracji stylu) wpisujemy dokładną wartość atrybutu (np. dla koloru tekstu będzie to: red, blue czy też #31F4A5 itd.). Wartość zależy ściśle od cechy, po której stoi w deklaracji. Tego typu definicji używaliśmy do tej pory na ćwiczeniach. 8
Style wbudowane Styl lokalny pozwala na nadanie formatowania konkretnemu pojedynczemu elementowi strony. Dlatego właśnie styl tego rodzaju nazywa się także stylem inline (ang. "w linii"), ponieważ jest wstawiany w tej samej linii, w której znajduje się element formatowany. O tym, który to będzie element decyduje słowo kluczowe "selektor". Przykład <p style="margin-left: 0.5in"> tekst </p> powoduje półcalowe wcięcie całego akapitu. 9
Style osadzone (embedded styles) Wewnętrzny arkusz stylów <head> <style type="text/css"> <!-- selektor { cecha: wartość; cecha2: wartość2... } selektor2 { cecha: wartość; cecha2: wartość2... } --> </style> </head> Wewnętrzny arkusz stylów wstawia się zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>). Można go zastosować, gdy elementy które pragniemy poddać formatowaniu, występują wielokrotnie na stronie i wszystkim chcemy nadać takie same atrybuty (inne niż domyślne). 10
Style osadzone Struktura informacji o stylach ma taką samą postać jak w przypadku linked styles. Przykład <style type= text/css > <!-- body {color: #0000; background: #FFFF; margin-left: 7%; font-family: verdana} --> </style> Uwaga! Informacje o stylach zawarte w nagłówku dokumentu za pomocą etykiety <style> dotyczą tylko jednego dokumentu. 11
ZADANIE 26b Otwórz plik zadanie26a.html i zapisz go pod nazwą zadanie26b.html. o Formatowania nadane znacznikom div i span w zadaniu 26a przenieś do wewnętrznego arkusza stylów zdefiniowanego w nagłówkowej części dokumentu (czyli między znacznikami <style> i </style>). 12
Tworzenie klas etykiet Można podzielić etykietę na tzw. klasy i dla każdej z klas określić odmienne informacje o stylu. Przykład p.red {color:red} p.yellow {color:yellow} p.fuschia {color:fuschia} Kropka i nazwa koloru definiują klasę etykiety p. Nazw klas używa się w etykiecie <p> do określania, jakim kolorem zostanie sformatowany tekst, np. <p class="red"> To jest czerwony tekst</p> 13
ZADANIE 27 o Na końcu pliku umieść trzy akapity o dowolnej treści. o W nagłówkowej części dokumentu między znacznikami <style> i </style> utwórz 3 klasy dla etykiety p o odmiennym formatowaniu tekstu: o 1. klasa maly i ustawieniach: czcionka Arial, rozmiar x-small, kolor czerwony, wyrównanie tekstu do lewej, 2. klasa sredni i ustawieniach czcionka Times New Roman, rozmiar 20pt, kolor zielony, wyrównanie tekstu do prawej, test pogrubiony, 3. klasa duzy i ustawieniach: czcionka Courier, rozmiar 0.5cm, kolor tekstu żółty, wyrównanie do obu marginesów. Zastosuj zdefiniowane klasy do formatowania akapitów tekstu. 14
Style dołączone (linked styles) Konfigurowanie informacji o stylu Najpierw należy utworzyć plik tekstowy z danymi o stylu. Plik ten umieszcza się na serwerze z rozszerzeniem CSS. Każda pozycja zaczyna się etykietą HTML, za którą występuje lista atrybutów. Przykład Informacje o stylu można przywołać z pliku w nagłówku każdego tworzonego dokumentu HTML używając etykiety <link> w następujący sposób: <head> <link rel="stylesheet" href="nazwa_pliku.css"> </head> 15
Selektory pseudoklas CSS2 wyróżnia specjalne selektory dla odsyłaczy, zależnie od ich bieżącego statusu: o a:link pozwala nadać formatowanie odsyłaczowi na stronie a:link {color:yellow; background: blue} o a:visited nadaje formatowanie odsyłaczowi już odwiedzonemu a:visited {color:green} o a:hover nadaje styl elementowi, gdy urządzenie wskazujące, np. myszka, znajduje się nad elementem, ale nie aktywizuje go a:hover {background:blue; color:red} o a:active formatuje we wskazany sposób aktywny w danym momencie element, np. kliknięty odsyłacz a:active {background:olive; color:black} 16
Selektory pseudoklas Przykładowe definicje klas z użyciem selektorów odsyłaczy o o o o a.ex1:hover, a.ex1:active {color:red;} a.ex2:hover, a.ex2:active {font-size:150%;} a.ex3:hover, a.ex3:active {background:red;} a.ex4:hover, a.ex4:active {font-family:monospace;} Przykłady zastosowania definicji klas dla odsyłaczy o <p><a class="ex1" href="default.asp">ten link zmienia kolor</a></p> o o o <p><a class="ex2" href="default.asp">ten link zmienia rozmiar czcionki</a></p> <p><a class="ex3" href="default.asp">ten link zmienia kolor tła</a></p> <p><a class="ex4" href="default.asp">ten link zmienia czcionkę</a></p> 17
ZADANIE 28 Utwórz nowy plik i zapisz go jako spis.html. o W pliku tym umieść odsyłacze do 4 dowolnych stron w Internecie. Odsyłacze umieść w oddzielnych liniach. o Pobierz z materiałów i otwórz zewnętrzny arkusz stylów style.css. o Uzupełnij definicje stylów dla odsyłaczy według własnego uznania zmień kolor czcionki, jej wielkość i tło napisu. o Umieść w dokumencie spis.html odwołanie do tego arkusza. o Sprawdź wygląd odsyłaczy. 18
Pozycjonowanie Pozycję elementu w stosunku do sąsiadujących elementów, do nadrzędnego pojemnika oraz w stosunku do okna przeglądarki podaje się w definicji stylu w postaci: o position: wartość gdzie jako wartość należy podać static - pozycjonowanie statyczne relative - pozycjonowanie względne absolute - pozycjonowanie bezwzględne fixed - pozycjonowanie ustalone Pozycjonowanie jest szeroko wykorzystywane w nowoczesnych stronach internetowych do tworzenia layoutów (układów) stron opartych na blokach div. 19
Pozycjonowanie Pozycjonowanie statyczne to naturalne pozycjonowanie elementu, wynikające z kolejności wystąpienia w dokumencie HTML, na które nie ma wpływu nawet podanie odległości od innych elementów. <p style="position:static; ">Treść akapitu</p> <p style="position:static; left:30px">treść akapitu z dodatkową odległością</p> Pozycjonowanie względne odnosi się do miejsca wstawienia definicji i wykorzystuje podane odległości. Na przykład akapit mógłby mieć nadane pozycjonowanie: position: relative; left: 50px; top: 30px czyli przesunięcie o 50 pikseli w prawo i 30 pikseli w dół w stosunku do naturalnego położenia elementu w dokumencie, które byłoby użyte, gdyby nie definiowano pozycjonowania względnego. 20
Pozycjonowanie Pozycjonowanie absolutne ustala sztywno pozycję elementu w stosunku do strony lub w stosunku do bloku, w którym znajduje się cała treść. Przykład - kod wstawia zdjęcie w lewym górnym rogu bloku div. <div style="position:absolute; left:0%; top:0%"> <img src="sufi.jpg" width="56" height="51" /> </div> Elementy pozycjonowane w sposób "absolutny" są wlewane do zarezerwowanych obszarów w ramach najbliższego pojemnika wyższego szczebla w hierarchii, czyli rodzica, i zajmują tam miejsce bez względu na pozycję innych elementów. Elementy te mogą się nakładać na inne elementy, które akurat się tutaj znalazły. Element pozycjonowany absolutnie wypada z normalnego przepływu dokumentu - ustawionych kolejno elementów. 21
Pozycjonowanie Pozycjonowanie ustalone (fixed) pozwala utrzymywać element w stałej pozycji w okienku przeglądarki, np. nierzadko stosuje się tę technikę do utrzymywania w stałym położeniu elementów nawigacji. Właściwość obsługiwana przez Firefoksa, Operę i Internet Explorera od wersji 7 (przez starsze wersje nie). <div style="position: fixed; top: 5em; right: 10em; border: dotted 1px red; padding: 5px; background-color: transparent;"> <p>napis o stałej pozycji w oknie przeglądarki</p> </div> 22
ZADANIE 29 o Otwórz plik spis.html i umieść w nim dowolny napis, np. Państwa imię w stałej pozycji (fixed), w prawym górnym narożniku okna przeglądarki (top: 1cm; right: 2cm). o Dodaj wyróżniające formatowanie tekstu czcionka, rozmiar, kolor tekstu. 23
ZADANIE 30 o Na końcu pliku z poprzedniego zadania (spis.html) umieść "na sztywno" akapit tekstu odległy 100px od lewej krawędzi (left: 100px;) i 400px od góry okna przeglądarki (top: 400px;). o Akapit o szerokości 300px (width: 300px;) dla wyróżnienia otocz ciągłą, zieloną ramką (border: 2px solid green;). 24
Ramki Czym są ramki w dokumencie HTML? Opisujemy tu technikę budowania witryny w oparciu o ramki, czyli specjalne okienka, do których wczytywane są strony. Technika ta jest jednak uznana w HTML 4 i XHTML 1.0 za schyłkową (pozostaje w obrębie wersji Doctype Transitional i Frameset), zaś w XHTML 1.1 została zaniechana, podobnie jak pływające ramki. Opis techniki umieszczamy tutaj ze względu na fakt, że jest ciągle jeszcze stosowana przez niektórych webmasterów, odradzając jednak jej stosowanie. Ramki były szczególnie popularne od połowy lat 90., gdy ich obsługa pojawiła się "na dziko" w przeglądarce Netscape Navigator (później też w innych przeglądarkach), a potem zostały uwzględnione w specyfikacji HTML 4. Na przełomie dekad zaczęły być sukcesywnie wypierane przez tzw. portalowe układy stron oparte na tabelach. 25
Ramki Ogólna struktura strony Podstawową rolę w "ramkowym" dokumencie pełni specjalna strona, na której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia łącza hipertekstowego. Pozostałe strony, wchodzące w skład całego, wielostronicowego dokumentu, są stronami podrzędnymi. 26
Ramki Na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek. Dopiero znaczniki noframes pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki nie interpretujące ramek. Znaczniki <body></body> mogą być umieszczane jedynie w obrębie noframes, aczkolwiek ich obecność nie jest konieczna. <noframes> <body> Zawartość strony dla przeglądarek nie obsługujących ramek </body> </noframes> 27
Ramki Kluczowe znaczenie ma para znaczników <frameset> </frameset>. Stanowią one, z dodatkowymi parametrami, ramy dla całej konstrukcji i między nimi są umieszczane bardziej szczegółowe znaczniki, dotyczące liczby ramek, podziału strony i wielkości ramek. 28
Ramki Aby konstrukcja mogła działać, konieczne jest podzielenie strony na ramki w pionie lub w poziomie. Przykład <frameset cols="18%,82%"> Podział w pionie na dwie kolumny. Lewa ramka zajmuje 18% szerokości okna przeglądarki, a prawa ramka - 82%. Powyższy kod zawiera informację o podzieleniu strony na dwie kolumny. Służy do tego parametr cols="x,y", umieszczany w otwierającym znaczniku frameset. 29
Ramki Liczby x i y, parametrze cols="x,y", służą do liczbowego określenia szerokości ramek. Możemy podać obie wartości w pikselach, w procentach szerokości strony, a także określić szerokość jednej kolumny i oznaczyć szerokość drugiej za pomocą wieloznacznika * (ma to sens przy podziale na większą liczbę kolumn lub wierszy). 30
Ramki Gdybyśmy dzielili stronę na trzy wiersze, moglibyśmy, przez analogię, użyć konstrukcji, w której np. górna ramka ma 200 pikseli, dolna 200 pikseli, a środkowa zajmuje pozostały obszar, zależny od wielkości okna przeglądarki: <frameset rows="200,*,200"> 31
Znacznik frame Znacznik <frame> służy do wprowadzenia konkretnej ramki. Znacznik jest uzupełniany dodatkowymi parametrami, mówiącymi o zawartości (zagnieżdżone strony), o tym, czy ramka zawiera suwaki, a także definiującymi nazwę ramki. Źródło dokumentu Aby przypisać ramce dokument, musimy podać źródło src dokumentu. Należy w tym celu użyć konstrukcji: <frame src="nazwa_pliku.htm"...> Przywoływany plik może się znajdować w tym samym katalogu lub jakimkolwiek innym - podajemy wtedy nazwę pliku z pełną ścieżką dostępu - może to nawet być dokument w innej witrynie. 32
Znacznik frame Nazwy ramek Ponieważ stosując ramki używamy jednocześnie często odsyłaczy, powinniśmy jakoś nazwać naszą ramkę. Nazwa będzie służyć jako punkt orientacyjny dla odsyłaczy. <frame name="dowolna_nazwa"> Definicja suwaków <frame scrolling="wartość"...> gdzie jako wartość możemy podać: yes ramka będzie posiadać suwaki, no ramka bez suwaków, auto - suwaki pojawią się wtedy, gdy dokument będzie większy niż ramka. 33
Znacznik frame Skalowanie ramki Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji atrybutu noresize <frame noresize...> zabezpieczymy ramkę przed skalowaniem. Domyślnie, wszystkie ramki są skalowalne. Obramowanie ramki Atrybut frameborder="1" lub frameborder="0" pozwala ustalić, czy obramowanie danej ramki będzie wyświetlane, czy też nie. <frame frameborder="1"...> 34
Ramki przykładowa strona <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <html> <head> <title>ramki</title> </head> <frameset cols="25%,*%"> <frame scrolling="auto" name="lista" src="spisedyt.htm"> <frame scrolling="yes" name="edytory" src="edyt.htm"> <noframes> <body> Zawartość strony dla przeglądarek nie obsługujących ramek </body> </noframes> </frameset> </html> 35
Odsyłacze Odsyłacze Teraz powinniśmy się zastanowić, co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało odpowiednią stronę w innej ramce. Jest to kluczowa sprawa, jeśli chcemy wykorzystać ramki w dokumentach. W tym miejscu wykorzystujemy nazwy, które nadawaliśmy poszczególnym ramkom. <frame scrolling="auto" name="treść"> 36
Odsyłacze W oknie w którym chcemy stworzyć spis treści budujemy odsyłacze do odpowiednich stron. Należy je tak skonstruować, aby kliknięcie na odsyłaczu przywoływało wskazaną stronę, ale zarazem ładowało ją do określonej ramki, np. ramki o nazwie lista. Można to uczynić za pomocą następującej konstrukcji: <a href="nazwa_pliku" target="nazwa_ramki">pozycja spisu treści</a> target="nazwa_ramki" dotyczy docelowego miejsca, do którego ma być załadowana strona. Widzimy tutaj rolę, jaką pełnią nazwy ramek. Przykład <a href="tabele.html" target="treść">tabele</a> 37
ZADANIE 31 Z materiałów pobierz pliki: baner.html, baner_maly.gif, maly_gif.gif, tlo.jpg. Utwórz nowy plik html na bazie kodu podanego na poprzednim slajdzie. Plik zapisz pod nazwą zadanie27a.html. W pliku zdefiniuj stronę WWW o następującej strukturze opartej na ramkach: name="baner", wysokość równa 200 pikseli, bez suwaka, źródło plik baner.html name="spis" szerokość 15%, źródło plik spis.html name="treść", szerokość równa pozostałej części okna, suwaki auto, źródło plik zadanie10.html 38