Cytaty, wykazy oraz elementy DIV i SPAN

Włodzimierz Gajda

Omówieniem cytatów, wykazów oraz elementów DIV i SPAN zakończymy cykl artykułów poświęconych podstawom języka HTML. Podsumowujące zestawienie zawiera listę wszystkich opisanych elementów HTML.

Wykazy

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 <OL> oraz </OL> (skrót OL pochodzi od angielskiego terminu ordered list - lista uporządkowana). Kolejne pozycje listy definiujemy znacznikami <LI> i </LI> (LI jest skrótem list item - element listy).

Ćwiczenie 1

Przygotuj stronę, która zawiera listę numerowaną przedstawiającą największe rzeki Polski.

Rys. 1. Lista numerowana

Kod listy, ograniczony do trzech pierwszych pozycji, jest następujący:

<OL>
  <LI>Wisła (1047 km.)</LI>
  <LI>Odra (854 km.)</LI>
  <LI>Warta (808 km.)</LI>
  ...
</OL>

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 type. Atrybut ten został wycofany z języka HTML. W jego miejsce wprowadzono atrybut CSS o nazwie list-style-type. 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 <OL> oraz </OL>. Elementy listy, podobnie jak w przypadku list numerowanych, ustalamy stosując znaczniki <LI> oraz </LI>.

Ćwiczenie 2

Przygotuj wypunktowane zestawienie obrazujące podział administracyjny Polski na szesnaście województw.

Rys. 2. Lista wypunktowana

Kod listy zawiera jeden element UL oraz serię elementów LI:

<UL>
  <LI>dolnośląskie (stolica: Wrocław)</LI>
  <LI>kujawsko-pomorskie (stolica: Bydgoszcz)</LI>
  <LI>lubelskie (stolica: Lublin)</LI>
  ...
</UL>

Skrót Ctrl+L+U programu NotH wstawia do dokumentu element UL.

Podobnie jak w przypadku listy OL, atrybut type modyfikujący symbol graficzny poprzedzający elementy listy został wycofany z języka HTML. Służy do tego atrybut CSS list-style-type. 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 list-style-image:

UL {
    list-style-image : url('mojsymbol.png');
}

W stosunku do list OL oraz UL możemy jeszcze zastosować atrybut list-style-position. 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 list-style, 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 posiadał atrybut value ustalający numer zadanej pozycji listy, natomiast element OL posiadał atrybut start 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 zrezygnować z poprawności kodu HTML (w sensie języka HTML 4.01 strict). Jeśli zdecydujemy się na stosowanie atrybutów start oraz value, to ich użycie wygląda następująco:

<OL start="7">
  <LI>BLACK</LI>
  <LI>YELLOW</LI>
  <LI value="20">BLUE</LI>
  <LI>GREEN</LI>
</OL>

Listy definicji

Ostatnim rodzajem wykazów są listy definicji.

Ćwiczenie 3

Przygotuj stronę zawierającą słowniczek angielsko-polski.

Rys. 3. Lista definicji

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 <DT>...</DT> (ang. definition term - pojęcie definiowane; skrót Ctrl+L+T). Natomiast tłumaczenie umieszczamy wewnątrz elementu DD (skrót Ctrl+L+F). Oto trzy pierwsze wpisy słownika:

<DL>
  <DT>cat</DT>   <DD>kot</DD>
  <DT>dog</DT>   <DD>pies</DD>
  <DT>horse</DT> <DD>koń</DD>
  ...
</DL>

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:

<OL>
<LI>Jeden</LI>
<LI>Dwa</LI>
<LI>Trzy</LI>
</OL>

po dodaniu kolejnego poziomu w punkcie Jeden przyjmie postać:

<OL>
<LI>
  Jeden
  <OL>
    <LI>Jeden i ćwierć</LI>
    <LI>Jeden i pół</LI>
  </OL>
</LI>
<LI>Dwa</LI>
<LI>Trzy</LI>
</OL>
Ć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.

Rys. 4. Zagnieżdżona lista wypunktowana

Lista składa się z dwóch poziomów. Najpierw przygotowujemy zestawienie z podziałem na dwie kategorie: elementy blokowe i tekstowe:

<UL>
  <LI>Elementy blokowe</LI>
  <LI>Elementy tekstowe</LI>
</UL>

Następnie każdą z kategorii wzbogacamy o dodatkową listę wypunktowaną. W kategorii Elementy blokowe dodajemy następujący kod:

<LI>
  Elementy blokowe
  <UL>
    <LI>akapit: P</LI>
    <LI>nagłówki: H1 H2 H3 H4 H5 H6</LI>
    ...
  </UL>
</LI>

W identyczny sposób rozbudowujemy kategorię Elementy tekstowe. Skończony przykład zawiera trzy listy UL.

Ćwiczenie 5

Przygotuj witrynę prezentującą w postaci list wypunktowanych i numerowanych plan przedmiotu „Sieci komputerowe”.

Rys. 5. Dwustopniowe zagnieżdżenie wypunktowania i numerowania

Najpierw definiujemy zewnętrzną listę numerowaną zawierającą główne zagadnienia: Pojęcia wstępnie, Technologie sieci komputerowych, itd.:

<OL>
<LI>Pojęcia wstępne</LI>
<LI>Technologie sieci komputerowych</LI>
...
</OL>

Następnie każdą z kategorii głównych rozbudowujemy o wypunktowane podkategorie. W przypadku pozycji Pojęcia wstępnie, kod przybierze postać:

<LI>
  Pojęcia wstępne
  <UL>
    <LI>komutacja łącza</LI>
    <LI>komutacja pakietów</LI>
    ...
</UL>
</LI>

Punkt zatytułowany komutacja pakietów posiada dalsze podkategorie. Zatem dodajemy kolejną listę wypunktowaną:

<LI>
  komutacja pakietów
  <UL>
    <LI>cyfrowy ...</LI>
    <LI>kontrola ...</LI>
  </UL>
</LI>

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.

Rys. 6. Dwustopniowe zagnieżdżenie wypunktowania i numerowania

Cytaty

Elementy Q oraz BLOCKQUOTE służą do umieszczania w tekście cytatów. Element Q jest elementem tekstowym, zaś 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:

<BLOCKQUOTE>
W trzydziestym trzecim roku ...
</BLOCKQUOTE>

Natomiast element Q stosujemy zgodnie z poniższym przykładem:

<P>
... powiedział skromnie: <Q>Here is nitro-glycerine!</Q> ...
</P>

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, jaki stosujemy w języku polskim. W języku polskim należy stosować znaki specjalne o kodach &bdquo; oraz &rdquo;. 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 quotes. 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 lang). 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 &bdquo; oraz &rdquo;.

Elementy DIV i SPAN

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. Na przykład 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 class) możemy jak gdyby 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.

Rys. 7. Użycie elementu SPAN

Tytuły utworów występujące w treści życiorysu pisarza umieszczamy wewnątrz elementu SPAN:

<P>
<SPAN>"Dzieci kapitana Granta"</SPAN> 1868
- tematem książki jest wyprawa ...
</P>

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óżny 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.

Rys. 8. Element DIV obejmujący listę numerowaną - spis treści

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:

<DIV>
<P>Contents</P>
<OL>
  <LI><A href="#RI">Into the Primitive</A>
  <LI><A href="#RII">The Law of Club and Fang</A>
  ...
</OL>
</DIV>

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 list-style-type, 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.

Rys. 9. Dwupoziomowy spis treści wewnątrz sekcji DIV

Ćwiczenie to wykonujemy łącząc wiadomości omówione w ćwiczeniu poprzednim z zagnieżdżaniem list przedstawionym w ćwiczeniach 4 oraz 5.

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 stanowią 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.

Rodzaje elementówElementy
Rodzaje elementówElementy
Akapit P
Nagłówki H1, H2, H3, H4, H5, H6
Listy UL, OL, DL
Tekst preformatowany PRE
Inne DIV, TABLE, BLOCKQUOTE, HR

Tabela 1. Elementy blokowe języka HTML 4.01

Rodzaje elementówElementy
Rodzaje elementówElementy
Tekst może zawierać znaki specjalne (np. &lt;, &copy;, itd.)
Elementy frazowe EM, STRONG
Elementy specjalne A, IMG, BR, Q, SUB, SUP, SPAN

Tabela 2. Elementy tekstowe języka HTML 4.01

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 zawierający 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, jakie webmaster musi pamiętać zawiera te znaczniki, które pojawiają się w niemal każdym projekcie. Należą do nich: znaki specjalne &nbsp;, &lt;, &gt;, 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 <H1> ... </H1> jednym skrótem klawiszowym osiągniemy ogromy wzrost wydajności pracy.

Trzecią grupę elementów, stanowią znaczniki nieco rzadziej wykorzystywane: znaki specjalne (&amp;, &copy;, &quot;, &bdquo; oraz &rdquo;), 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 najelepiej 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 bgcolor oraz align również zostały wycofane z języka HTML i w ich miejsce należy stosować style.

lp.GrupaElementy
lp.GrupaElementy
1. Elementy definiujące strukturę dokumentu DOCTYPE,
HTML, HEAD, TITLE, META, BODY,
STYLE, LINK
2. Najpopularniejsze elementy. &nbsp;, &lt;, &gt;,
H1, ..., H6,
P, BR, PRE, HR,
EM, STRONG,
A, IMG,
TABLE, TR, TD,
UL, OL, LI,
DIV, SPAN
3. Elementy rzadziej stosowane. &amp;, &copy;, &quot;, &bdquo;, &rdquo;,
DL, DT, DD,
BLOCKQUOTE, Q,
SUB, SUP,
TH
4. Elementy zbędne. DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM
5. Elementy niezalecane. TT, I, B, BIG, SMALL
6. Elementy wycofane z języka. FONT, BASEFONT, CENTER, U, S, STRIKE
7. Elementy specyficzne. ADDRESS,
INS, DEL,
CAPTION, THEAD, TFOOT, TBODY, COL, COLGROUP,
BASE,
OBJECT, PARAM,
MAP, AREA,
SCRIPT, NOSCRIPT

Tabela 3. Podział elementów, ułatwiający naukę języka HTML

Spośród siedmiu zawartych w tabeli 3 pamiętać trzeba jedynie elementy 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 nie zawierają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 elementem HTML możemy scharakteryzować opisując jego:

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 off-line.

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 <STRONG> ... </STRONG> , to wydajność takiej pracy będzie mizerna. Kod znaczników musi być wstawiany przez edytor.

Większość edytorów HTML zawiera różnego rodzaju udogodnienia. Skróty klawiszowe, zastosowane w programie NotH, mają tę przewagę nad rozwiązaniami stosującymi przyciski, że wstawienie, usunięcie lub zmiana kodu znacznika nie wymaga odrywania palców od klawiatury. W ten sposób, pisząc dziesięcioma palcami na klawiaturze, możemy w płynny sposób przeplatać tekst z elementami HTML. Aktywacja skrótu klawiszowego (np. Ctrl+F+S) wstawia do dokumentu kod znacznika (czyli np. napis <STRONG></STRONG>). Jeśli przed wykonaniem skrótu pewien fragment tekstu był zaznaczony, wówczas tekst ten zostanie umieszczony wewnątrz elementu. Natomiast po zaznaczeniu całego elementu HTML klawisze Ctrl+Delete usuną kod znaczników otwierającego i zamykającego, pozostawiając zawartość (po zaznaczeniu tekstu <EM>KOT</EM> i naciśnięciu Ctrl+Delete otrzymamy tekst KOT).

Oczywiście minusem korzystania ze skrótów klawiszowych jest konieczność nauczenia się ich. Jednak sądzę, że wysiłek włożony w opanowanie skrótów do elementów z grup 2 i 3 tabeli 3 (oraz skrótu Ctrl+S+A - kodu pustej strony) jest niewielki w stosunku do korzyści, jakie osiągniemy. Tabela 4 przedstawia skróty klawiszowe najważniejszych elementów HTML.

SkrótOpisKod HTML
SkrótOpisKod HTML
SA pusta strona -
SZ style zewnętrzne <LINK rel="..." ...>
SW style wewnętrzne <STYLE type="text/css">...
PK komentarz HTML <!-- ... -->
P1-P6 nagłówki <H1>...</H1> - <H6>...</H6>
PP akapit <P>...</P>
PR złamanie wiersza <BR>
LH linia pozioma <HR>
FS uwypuklenie tekstu <STRONG>...</STRONG>
FE uwypuklenie tekstu <EM>...</EM>
FP tekst preformatowany <PRE>...</PRE>
QA znak & &amp;
QS znak spacja &nbsp;
QL znak < &lt;
QG znak > &gt;
PA hiperłącze <A href="...">...</A>
PI obraz <IMG src="..." alt="...">
WT tabela <TABLE>...</TABLE>
WR wiersz tabeli <TR>...</TR>
WD komórka tabeli <TD>...</TD>
WH komórka nagłówkowa tabeli <TH>...</TH>
LU lista wypunktowana <UL>...</UL>
LO lista numerowana <OL>...</OL>
LI element listy <LI>...</LI>
PD element DIV <DIV>...</DIV>
PS element SPAN <SPAN>...</SPAN>

Tabela 4. Skróty klawiszowe programu NotH