Pierwsza część artykułu skupia się na omówieniu cytatów, wykazów oraz elementów DIV i SPAN. Druga część zawiera zestawienie różnych typów znaczników HTML oraz ogólne podziały i wskazówki, które powinny ułatwić pracę nad stroną WWW. Przy tej okazji w skrócie przedstawiony też został program NotH.
W języku HTML dostępne są trzy rodzaje wykazów: listy numerowane, listy wypunktowane oraz listy definicji. Na liście numerowanej kolejne elementy są poprzedzone numerami. Listy wypunktowane zawierają zestawiania poprzedzone identycznym symbolem. Natomiast listy definicji służą do przygotowywania skorowidzów i słowników. Każda pozycja listy składa się z wyjaśnianego terminu oraz definicji.
Listy numerowane
Listę numerowaną otaczamy znacznikami {html}
- {/html} oraz {html}
Ćwiczenie 1
Przygotuj stronę, która zawiera listę numerowaną przedstawiającą największe rzeki Polski.
Kod listy, ograniczony do trzech pierwszych pozycji, jest następujący:
- Wisła (1047 km.)
- Odra (854 km.)
- Warta (808 km.)
...
W programie NotH elementy listy uzyskamy stosując skróty Ctrl+L+O (element OL) oraz Ctrl+L+I (element LI).
Do ustalenia rodzaju numeracji listy OL służył atrybut {stala}type{/stala}. Atrybut ten został wycofany z języka HTML. W jego miejsce wprowadzono atrybut CSS o nazwie {stala}list-style-type{/stala}. Jego poprawnymi wartościami są między innymi: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-latin, upper-latin, lower-greek oraz none. Na przykład zmianę numeracji z arabskiej (domyślnej) na rzymską pisaną wielkimi literami osiągniemy stosując styl:
OL {
list-style-type : upper-roman;
}
Listy wypunktowane
Drugim rodzajem wykazów są listy wypunktowane. Listy wypunktowane definiujemy znacznikami {html}
- {/html} oraz {html}
Ćwiczenie 2
Przygotuj wypunktowane zestawienie obrazujące podział administracyjny Polski na szesnaście województw.
Kod listy zawiera jeden element UL oraz serię elementów LI:
- dolnośląskie (stolica: Wrocław)
- kujawsko-pomorskie (stolica: Bydgoszcz)
- lubelskie (stolica: Lublin) ...
Skrót Ctrl+L+U programu NotH wstawia do dokumentu element UL.
Podobnie jak w przypadku listy OL, atrybut {stala}type{/stala} modyfikujący symbol graficzny poprzedzający elementy listy został wycofany z języka HTML. Służy do tego atrybut CSS {stala}list-style-type{/stala}. Poprawnymi wartościami są disc, circle, square oraz none. Zmiana domyślnego znaku wypunktowania z kółka na kwadrat sprowadza się do zastosowania stylu:
UL {
list-style-type : square;
}
Możemy również zmienić znak wiodący na dowolny symbol graficzny. W tym celu należy przygotować plik graficzny mojsymbol.png przedstawiający żądany symbol oraz ustalić wartość atrybutu {stala}list-style-image{/stala}:
UL {
list-style-image : url(\'mojsymbol.png\');
}
W stosunku do list OL oraz UL możemy jeszcze zastosować atrybut {stala}list-style-position{/stala}. Atrybut ten ustala położenie numeracji i symboli wypunktowania względem marginesów wykazu. Poprawnymi wartościami są inside oraz outside.
Jeśli chcemy wyspecyfikować kilka atrybutów listy, to możemy wykorzystać do tego atrybut {stala}list-style{/stala}, na przykład:
UL {
list-style : inside url(\'mojsymbol.png\');
}
W języku HTML istniały jeszcze dwa atrybuty, które czasami mogą być niezbędne przy stosowaniu wykazów numerowanych. Element LI wykorzystywał atrybut {stala}value{/stala} ustalający numer zadanej pozycji listy, natomiast element OL – atrybut {stala}start{/stala} przypisujący numer pierwszemu elementowi listy.
Atrybuty te zostały wycofane, zaś w ich miejsce pojawiły się liczniki w arkuszach stylów (rozdział 12.5 specyfikacji CSS). Niestety liczniki arkuszy stylów nie są poprawnie interpretowane przez większość przeglądarek. Nawet przykłady z dokumentacji CSS, bez żadnych modyfikacji, nie dają efektów, jakie, zdaniem autorów specyfikacji, dawać powinny. Mamy zatem do wyboru albo zrezygnować z modyfikacji liczb pojawiających się na wykazie numerowanym, albo z poprawności kodu HTML (w sensie języka HTML 4.01 strict).
Jeśli zdecydujemy się na stosowanie atrybutów {stala}start{/stala} oraz {stala}value{/stala}, to ich użycie wygląda następująco:
- BLACK
- YELLOW
- BLUE
- GREEN
Listy definicji
Ostatnim rodzajem wykazów są listy definicji.
Ćwiczenie 3
Przygotuj stronę zawierającą słowniczek angielsko-polski.
Listę definicji otaczamy znacznikami DL (ang. definition list). Służy do tego skrót Ctrl+L+D. Każdy element słownika posiada dwa składniki: termin angielski i tłumaczenie. Termin umieszczany na liście otaczamy znacznikami {html}
- cat
- kot
- dog
- pies
- horse
- koń ...
Listy zagnieżdżone
Listy numerowane i wypunktowane możemy zagnieżdżać tworząc bardziej skomplikowane zestawienia. Zagnieżdżaną listę umieszczamy wewnątrz elementu LI. Na przykład lista numerowana:
- Jeden
- Dwa
- Trzy
po dodaniu kolejnego poziomu w punkcie Jeden przyjmie postać:
-
Jeden
- Jeden i ćwierć
- Jeden i pół
- Dwa
- Trzy
Ćwiczenie 4
Przygotuj zagnieżdżoną listę wypunktowaną o dwóch poziomach. Na liście umieść informacje na temat podziału elementów języka HTML na blokowe i tekstowe.
Lista składa się z dwóch poziomów. Najpierw przygotowujemy zestawienie z podziałem na dwie kategorie: elementy blokowe i tekstowe:
- Elementy blokowe
- Elementy tekstowe
Następnie każdą z kategorii wzbogacamy o dodatkową listę wypunktowaną. W kategorii Elementy blokowe dodajemy następujący kod:
- akapit: P
- nagłówki: H1 H2 H3 H4 H5 H6 ...
W identyczny sposób rozbudowujemy kategorię Elementy tekstowe. Skończony przykład zawiera trzy listy UL.
Elementy blokowe i tekstowe
Elementy języka HTML zostały podzielone na dwie kategorie: elementy blokowe i elementy tekstowe. Elementy blokowe mogą zawierać wewnątrz inne elementy blokowe oraz elementy tekstowe. Natomiast poprawną zawartością elementów tekstowych są wyłącznie elementy tekstowe.
Reguły te, choć dość ogólne, ułatwiają naukę języka HTML. Wynika z nich na przykład, że wewnątrz elementu SPAN nie mogą wystąpić ani nagłówki Hx, ani akapity P.
Tabele 1 oraz 2 zawierają elementy HTML 4.01 podzielone na dwie grupy. Zauważmy, że niektóre elementy (na przykład LI, DT, DD, TD, TH oraz TR) nie zaliczają się do żadnej kategorii.
| Tabela 1: Elementy blokowe języka HTML 4.01 | |
|---|---|
| Rodzaje elementów | Elementy |
| Akapit | P |
| Nagłówki | H1, H2, H3, H4, H5, H6 |
| Listy | UL, OL, DL |
| Tekst preformatowany | PRE |
| Inne | DIV, TABLE, BLOCKQUOTE, HR |
| Tabela 2: Elementy tekstowe języka HTML 4.01 | |
|---|---|
| Rodzaje elementów | Elementy |
| Tekst | może zawierać znaki specjalne (np. {html}<{/html}, {html}©{/html} itd.) |
| Elementy frazowe | EM, STRONG |
| Elementy specjalne | A, IMG, BR, Q, SUB, SUP, SPAN |
Jakie elementy języka HTML trzeba pamiętać?
Język HTML w wersji 4.01 strict zawiera 71 elementów. Pierwszą grupa elementów, których znajomość jest konieczna, są elementy definiujące strukturę dokumentu. Należą do niej elementy: DOCTYPE, HTML, HEAD, TITLE, META (konieczny jest co najmniej element ustalający kodowanie polskich znaków), BODY, STYLE oraz LINK.
Tworzenie strony WWW należy usprawnić, eliminując konieczność wypisywania powyższych elementów przy każdym nowym dokumencie. Na przykład w edytorze NotH, skrót klawiszowy Ctrl+S+A tworzy nowy, pusty dokument HTML, który zawiera wszystkie powyższe elementy. Warianty pustej strony uzyskamy stosując skróty Ctrl+S+B, Ctrl+S+C itd. Style możemy dodać do dokumentu za pomocą skrótów Ctrl+S+W (style wewnętrzne) oraz Ctrl+S+Z (style zewnętrzne). Natomiast w razie konieczności zmiany kodowania polskich znaków z kodu ISO na kod stosowany przez firmę Microsoft należy użyć skrótów Ctrl+P+M i Ctrl+P+N.
Druga grupa elementów HTML do zapamiętania przez webmastera zawiera te znaczniki, które pojawiają się w niemal każdym projekcie. Należą do nich: znaki specjalne , <, >, nagłówki (od H1 do H6), elementy dotyczące tekstu (P, BR, EM, STRONG i PRE), hiperłącza i obrazy (A, IMG), tabele ( TABLE, TR, TD), listy (UL, OL, LI), elementy ogólne (DIV i SPAN) oraz pozioma kreska HR.
Elementy te są tak często stosowane, że należy nauczyć się je wprowadzać bardzo szybko. Zastępując ręczne pisanie kodu {html}
{/html}…{html}
{/html} jednym skrótem klawiszowym osiągniemy ogromy wzrost wydajności pracy.Trzecią grupę elementów stanowią znaczniki nieco rzadziej wykorzystywane: znaki specjalne (&, ©, ", „ oraz ”), listy definicji (DL, DT i DD), cytaty (BLOCKQUOTE i Q), indeksy (SUB i SUP) oraz komórki nagłówkowe tabel TH.
Kolejną, czwartą grupę stanowią elementy zbędne. Ich użycie najlepiej wyeliminować i zastąpić stosowaniem elementu SPAN wzbogaconego o klasę: DFN, CODE, SAMP, KBD, VAR, CITE, ABBR i ACRONYM.
Piąta grupa to elementy niezalecane przez specyfikację języka HTML. Nie należy ich stosować! Zamiast nich korzystamy z elementów STRONG, EM oraz SPAN z definicją stylu: TT, I, B, BIG i SMALL.
Szóstą grupę stanowią elementy wycofane z języka. Elementów tych nie należy stosować! Do grupy tej należą: FONT, BASEFONT, CENTER, U, S oraz STRIKE.
Ostatnia grupa elementów to elementy o bardzo specyficznym zastosowaniu: ADDRESS (wskazanie adresu autora strony; element ten zazwyczaj jest zastąpiony przez stopkę strony zawierającą informacje o autorze w postaci tekstu sformatowanego standardowymi znacznikami), INS, DEL (elementy umożliwiające zaznaczanie zmian edytorskich w dokumencie), CAPTION, THEAD, TFOOT, TBODY, COL, COLGROUP (dodatkowe elementy dotyczące tabel), BASE (ustalenie bazowego adresu dla względnych hiperłączy definiowanych elementem A), OBJECT, PARAM (elementy służące do osadzania apletów w dokumencie), MAP, AREA (elementy służące do definiowania map obrazów) oraz SCRIPT i NOSCRIPT (elementy służące do osadzania skryptów interpretowanych przez przeglądarkę, m.in. w języku JavaScript).
Powyższe siedem grup zawiera zestawienie wszystkich elementów języka HTML z pominięciem formularzy oraz ramek.
Dodajmy jeszcze, że bardzo popularne atrybuty {stala}bgcolor{/stala} oraz {stala}align{/stala} również zostały wycofane z języka HTML i w ich miejsce należy stosować style.
| Tabela 3: Podział elementów ułatwiający naukę języka HTML | |
|---|---|
| Grupa | Elementy |
| Elementy definiujące strukturę dokumentu | DOCTYPE, HTML, HEAD, TITLE, META, BODY, STYLE, LINK |
| Najpopularniejsze elementy | {html} {/html}, {html}<{/html}, {html}>{/html}, H1, …, H6, P, BR, PRE, HR, EM, STRONG, A, IMG, TABLE, TR, TD, UL, OL, LI, DIV, SPAN |
| Elementy rzadziej stosowane | {html}&{/html}, {html}©{/html}, {html}"{/html}, {html}„{/html}, {html}”{/html}, DL, DT, DD, BLOCKQUOTE, Q, SUB, SUP, TH |
| Elementy zbędne | DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM |
| Elementy niezalecane | TT, I, B, BIG, SMALL |
| Elementy wycofane z języka | FONT, BASEFONT, CENTER, U, S, STRIKE |
| Elementy specyficzne | ADDRESS, INS, DEL, CAPTION, THEAD, TFOOT, TBODY, COL, COLGROUP, BASE, OBJECT, PARAM, MAP, AREA, SCRIPT, NOSCRIPT |
Spośród siedmiu elementów zawartych w tabeli 3 należy pamiętać jedynie te zawarte w grupach drugiej i trzeciej. Ważną natomiast umiejętnością jest szybkie wprowadzanie do dokumentu zarówno szkieletu pustej strony, jak i elementów z grup 2 oraz 3.
Tworzenie stron WWW w języku HTML w edytorze niezawierającym żadnych ułatwień wstawiania kodu znaczników to katorga. Myślę, że najlepszym sposobem zrażenia przyszłych webmasterów do tworzenia witryn w języku HTML jest próba nauczenia ich tworzenia witryn w standardowym notatniku Windows!
Cechy każdego elementu HTML
Po opanowaniu znaczników zawartych w wierszach 2 i 3 tabeli 3 należy nauczyć się reguł zagnieżdżania poznanych elementów. Każdy element HTML możemy scharakteryzować opisując jego typ (tekstowy, blokowy lub inny), dozwoloną zawartość, elementy, w których może on wystąpić, zastosowania, przykład użycia, style, które go dotyczą, oraz sposób wprowadzania do dokumentu (np. skrót klawiszowy w programie NotH).
Doświadczenie jest najlepszym nauczycielem zarówno reguł zagnieżdżania, jak i zastosowań poszczególnych elementów HTML. Wykonując kolejne ćwiczenia pamiętajmy o sprawdzeniu poprawności zarówno kodu HTML, jak i CSS. Na stronach organizacji W3C znajdziemy serwis walidujący kod HTML (http://validator.w3.org), jak i CSS (http://jigsaw.w3.org/css-validator/). Natomiast pod adresem http://www.htmlvalidator.com/lite/ znajdziemy jeden z ciekawszych programów sprawdzających poprawność kodu witryn WWW, który działa offline.
Podsumowanie
Pierwszym aspektem nauki języka HTML, na który chciałbym zwrócić dodatkową uwagę, jest wygląd dokumentu. Ucząc się języka HTML należy od początku (równolegle) rozpocząć naukę CSS. Dopóki nie potrafimy pewnego efektu osiągnąć stosując style, należy z tego efektu zrezygnować. W przeciwnym razie czeka nas podwójna praca: nauka rozwiązań ciekawych graficznie, lecz niepoprawnych w sensie standardów ustalanych przez W3C, po czym próby \”naprawienia\” błędnego dokumentu bez utraty jego atrakcyjności. Procedura taka jest zwykłą stratą czasu i nie ma żadnego sensu.
Drugą sprawą, sygnalizowaną niejednokrotnie, jest sposób wprowadzania kodu HTML do dokumentu. Jeśli pisząc stronę WWW zechcemy ręcznie wprowadzać kod znaczników, na przykład {html}{/html} …{html}{/html}, to wydajność takiej pracy będzie mizerna. Kod znaczników musi być wstawiany przez edytor.
Ćwiczenie 5
Przygotuj witrynę prezentującą w postaci list wypunktowanych i numerowanych plan przedmiotu \”Sieci komputerowe\”.
Najpierw definiujemy zewnętrzną listę numerowaną zawierającą główne zagadnienia: Pojęcia wstępnie, Technologie sieci komputerowych itd.:
- Pojęcia wstępne
- Technologie sieci komputerowych
...
Następnie każdą z kategorii głównych rozbudowujemy o wypunktowane podkategorie. W przypadku pozycji Pojęcia wstępnie kod przybierze postać:
- komutacja łącza
- komutacja pakietów ...
Punkt zatytułowany komutacja pakietów posiada dalsze podkategorie. Zatem dodajemy kolejną listę wypunktowaną:
- cyfrowy ...
- kontrola ...
W ten sposób zbudowaliśmy trzystopniowe zagnieżdżenie list wypunktowanych i numerowanych.
Ćwiczenie 6
Stosując listy uporządkowane oraz nieuporządkowane przygotuj zestawienie często stosowanych atrybutów CSS podzielone na kategorie.
Cytaty
Elementy Q oraz BLOCKQUOTE służą do umieszczania w tekście cytatów. Element Q jest elementem tekstowym, element BLOCKQUOTE to element blokowy.
Ćwiczenie 7
Przygotuj stronę przedstawiającą cytaty z utworów \”Faraon\” oraz \”Tajemnicza wyspa\”.
Użycie elementu BLOCKQUOTE wygląda następująco:
W trzydziestym trzecim roku ...
Natomiast element Q stosujemy zgodnie z poniższym przykładem:
... powiedział skromnie: Here is nitro-glycerine!
...
Skróty Ctrl+F+Q i Ctrl+F+B ułatwiają wprowadzanie elementów Q i BLOCKQUOTE.
Ważnym elementem cytatu jest cudzysłów. Znak cudzysłowu dostępny na klawiaturze nie jest znakiem, który stosujemy w języku polskim. W języku polskim należy stosować znaki specjalne o kodach „ oraz ”. Dają one następujący efekt: „Witaj!” Znaki te uzyskamy za pomocą skrótów Ctrl+Q+O oraz Ctrl+Q+Z.
Specyfikacja języka CSS zawiera informacje (rozdział 12.4), że cudzysłów może być zdefiniowany za pomocą atrybutu {stala}quotes{/stala}. Wówczas odpowiednie znaki cudzysłowów byłyby wstawiane przez przeglądarkę na podstawie stylu oraz języka dokumentu lub cytatu (definiowanego atrybutem HTML {stala}lang{/stala}). Niestety, atrybuty te nie są interpretowane przez część przeglądarek. Jeśli w dokumencie wymagane są polskie znaki cudzysłowów, musimy je ręcznie umieszczać stosując znaki specjalne {stala}„{/stala} oraz {stala}”{/stala}.
W celu ułatwienia dostosowywania języka HTML do indywidualnych potrzeb użytkowników Internetu, twórcy języka wprowadzili elementy DIV oraz SPAN. Są to elementy ogólne, nie posiadające żadnych konkretnych formatów. Element DIV jest elementem blokowym (skrót Ctrl+P+D), zaś element SPAN (skrót Ctrl+P+S) – tekstowym.
Z elementu DIV korzystamy do zdefiniowania większego fragmentu witryny, np. systemu menu, rozdziału artykułu czy spisu treści. Natomiast element SPAN znajduje zastosowanie do modyfikacji poszczególnych słów i fraz.
Stosując elementy DIV i SPAN w połączeniu z klasami (atrybut {stala}class{/stala}) możemy wzbogacić język HTML o nowe elementy.
Ćwiczenie 8
Przygotuj witrynę przedstawiającą życiorys i najbardziej znane książki Juliusza Verne. Tytuły książek sformatuj stosując element SPAN.
Tytuły utworów występujące w treści życiorysu pisarza umieszczamy wewnątrz elementu SPAN:
\"Dzieci kapitana Granta\" 1868
- tematem książki jest wyprawa ...
Dokument uzupełniamy stylami, które wytłuszczą i pochylą tekst otoczony znacznikami SPAN:
SPAN {
background : rgb(232,211,181);
font-weight : bold;
font-style : italic;
}
Domyślne formatowanie elementu SPAN nie różni się niczym od formatu elementu nadrzędnego (w powyższym przykładzie elementem nadrzędnym jest akapit P). Zatem bez definicji stylu elementu SPAN tytuły książek nie będą odróżniały się od otaczającego je tekstu.
Ćwiczenie 9
Przygotuj witrynę z tekstem opowiadania \”Zew krwi\”. Spis treści zawierający listę hiperłączy umieść w sekcji DIV.
W górnej części dokumentu, tuż poniżej tytułu i autora umieszczamy sekcję DIV. W sekcji tej znajduje się akapit z podpisem spisu treści oraz spis treści. Spis treści tworzymy korzystając z listy numerowanej. Elementami listy są hiperłącza odnoszące się do nagłówków kolejnych rozdziałów:
Contents
Dokument wzbogacamy o style, które, między innymi, nadadzą sekcji DIV obramowanie i odpowiednie wymiary:
DIV {
text-align : center;
font-weight : bold;
width : 50%;
border : solid 1px black;
padding : 20px;
margin : 10px;
}
Na koniec, zgodnie z tekstem utworu, zmieniamy numerację listy na liczby rzymskie. Stosujemy opisany atrybut {stala}list-style-type{/stala}, nadając mu wartość upper-roman (duże liczby rzymskie):
OL {
list-style-type : upper-roman;
}
Ćwiczenie 10
Przygotuj elektroniczną edycję utworu \”20000 mil podmorskiej żeglugi\”. Do wykonania spisu treści wykorzystaj zagnieżdżone listy numerowane oraz element DIV.
Ćwiczenie to wykonujemy łącząc wiadomości omówione w ćwiczeniu poprzednim z zagnieżdżaniem list przedstawionym w ćwiczeniach 4 oraz 5.
