Tekst - HTML
W tym rozdziale dowiesz się...
Sposoby formatowania tekstu na stronie WWW.
- Wyświetlanie znaczników HTML
Jakie są podstawowe modele wyświetlania znaczników HTML?
- Akapit <p>
W jaki sposób układać tekst na ekranie? Jak dodać nowy akapit? Czym różni się akapit od paragrafu?
- Tytuł nagłówka <h1, h2, h3, h4, h5, h6>
Jak wstawić tytuł (nagłówek) na stronie WWW? W jaki sposób wyświetlić "dymek narzędziowy" po wskazaniu tekstu myszką?
- Blok <div>
Jak zgrupować elementy w blok?
- Koniec linii <br>
W jaki sposób przenieść tekst do następnej linijki w dokumencie HTML?
- Pogrubienie <b>
W jaki sposób pogrubić (wytłuścić) tekst na stronie WWW?
- Pochylenie <i>
W jaki sposób pochylić tekst na stronie WWW (kursywa)?
- Podkreślenie <u>
W jaki sposób podkreślić tekst na stronie WWW?
- Przekreślenie <s>
W jaki sposób przekreślić tekst na stronie WWW?
- Wyróżnienie <em, strong>
Jak wyróżnić tekst na ekranie (emfaza)?
- Indeks górny i dolny <sup, sub>
Jak wstawić indeks górny i dolny przy tekście?
- Czcionka pomniejszona <small>
W jaki sposób pomniejszyć tekst?
- Tekst preformatowany <pre>
Jak wprowadzić tekst preformatowany, czyli taki, który wygląda identycznie jak w edytorze tekstowym?
- Kod komputerowy <code>
Jak oznaczyć kod komputerowy?
- Klawiatura <kbd>
Jak oznaczyć tekst, który użytkownik powinien wprowadzić z klawiatury?
- Przykład <samp>
Jak oznaczyć tekst, będący przykładem działania programu lub skryptu?
- Zmienna <var>
Jak oznaczyć zmienną lub argument programu?
- Źródło <cite>
Jak powinno się wprowadzać odniesienia do źródła?
- Cytat <q>
Jak powinno się oznaczać krótkie cytaty na stronach internetowych?
- Blok cytowany <blockquote>
Jak wprowadzić dłuższy cytat?
- Adres <address>
Jak umieścić na stronie WWW informacje kontatkowe z autorem?
- Zmiany <ins, del>
Jak poinformować użytkownika o wprowadzonych zmianach na stronie WWW: elementy wstawione i usunięte?
- Skrót <abbr>
Jak powinno się oznaczać skróty i akronimy?
- Definicja <dfn>
Jak oznaczyć definicję terminu?
- Słownik <dl, dt, dd>
Jak wprowadzić na stronę WWW słownik (listę definicyjną)?
- Wykaz <ul, ol, li>
Jak wprowadzić na stronę wykaz: wypunktowanie (lista nieuporządkowana) lub numerowanie (lista uporządkowana)?
- Zagnieżdżanie wykazów
W jaki sposób zrobić listę punków i podpunktów (wykaz)?
- Pozioma linia <hr>
Jak umieścić poziomą linię, oddzielającą sąsiednie akapity?
- Komentarz HTML
W jaki sposób ukryć przed użytkownikiem wybrany tekst?
- Blokada indeksowania fragmentów treści <... data-nosnippet>
Jak zablokować wybrane fragmenty treści na stronie przed pojawianiem się w wynikach wyszukiwania Google?
- Kod poprawny semantycznie
Co to znaczy, że kod HTML jest poprawny semantycznie i dlaczego jest to takie ważne?
- Powtórka
HTML
- Ćwiczenia
HTML
Wyświetlanie znaczników HTML
Jakie są podstawowe modele wyświetlania znaczników HTML?
Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników:
- w bloku - podczas wyświetlania bloku w przeglądarce, automatycznie dodawane są znaki końca linii (linijki przerwy) przed oraz po takim bloku tak, że każdy taki element jest wyświetlany w nowej linii. Generalnie element blokowy może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur niż elementy wyświetlane w linii. Wyjątkiem od tej reguły jest akapit, który mimo że stanowi element blokowy, nie może zawierać w sobie dodatkowych bloków - w tym innych akapitów.
- w linii - elementy takie są wyświetlane normalnie, tzn. bez dodawania dodatkowych interlinii przed i po (tak jak zwykły tekst). Dwa takie elementy mogą znajdować się w jednej linii - obok siebie. Nie mogą one zawierać w sobie elementów blokowych, ale mogą inne elementy wyświetlane w linii oraz zwykły tekst.
O tym, w jaki sposób wyświetlany jest dany znacznik HTML 4.01, możesz dowiedzieć się w rozdziale: Wykaz elementów.
Najczęściej można jednak odgadnąć to intuicyjnie, np. wydaje się logiczne, że tekst pogrubiony musi być wyświetlany w linii, ponieważ gdyby tak nie było, nie można by pogrubić za jednym razem dwóch oddzielnych wyrazów, znajdujących się w tym samym wierszu tekstu, gdyż wtedy wiersz zostałby przełamany na dwie osobne linijki.
Przykład:
To jest zwykły tekstTo jest zwykły tekst
To jest akapit (blok z interlinią - podobnie jak tytuł)
To jest zwykły tekstTo jest zwykły tekst To jest element wyświetlany w linii To jest zwykły tekst
Akapit <p>
W jaki sposób układać tekst na ekranie? Jak dodać nowy akapit? Czym różni się akapit od paragrafu?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari 1)
<p>...</p>
wyświetlanie: w bloku *
Akapit jest to część tekstu objęta znacznikami: <p>...</p>
. Następujące bezpośrednio po sobie akapity są oddzielone przerwą w tekście (pustą linią). Dzięki umieszczaniu w kolejnych akapitach treści nieco różniącej się tematycznie, strona stanie się bardziej estetyczna oraz czytelniejsza. Jeżeli przed akapitem lub serią akapitów postawimy znak paragrafu § (w kodzie źródłowym reprezentowany przez znak specjalny §) z ewentualnym numerem porządkowym, to taki fragment tekstu nosi nazwę paragraf. Zwykle odnosi się on do przepisów prawnych.
* Akapit (paragraf) jest znacznikiem specyficznym - jest wyświetlany w bloku, ale nie może zawierać innych elementów blokowych (włączając w to inne paragrafy). Może natomiast zawierać zwykły tekst oraz elementy wyświetlane w linii.
Przykład <p>
To jest pierwszy akapit... To jest pierwszy akapit... To jest pierwszy akapit... To jest pierwszy akapit... To jest pierwszy akapit... To jest pierwszy akapit... To jest pierwszy akapit... To jest pierwszy akapit... To jest pierwszy akapit... To jest pierwszy akapit...
To jest drugi akapit... To jest drugi akapit... To jest drugi akapit... To jest drugi akapit... To jest drugi akapit... To jest drugi akapit... To jest drugi akapit... To jest drugi akapit... To jest drugi akapit... To jest drugi akapit...
Tytuł nagłówka <h1, h2, h3, h4, h5, h6>
Jak wstawić tytuł (nagłówek) na stronie WWW? W jaki sposób wyświetlić "dymek narzędziowy" po wskazaniu tekstu myszką?
Tytuł nagłówka <h1, h2, h3, h4, h5, h6>
- Tytuł pierwszego poziomu (główny)
<h1>...</h1>
- Tytuł drugiego poziomu (sekcji)
<h2>...</h2>
- Tytuł trzeciego poziomu (podsekcji)
<h3>...</h3>
- Tytuł czwartego poziomu
<h4>...</h4>
- Tytuł piątego poziomu
<h5>...</h5>
- Tytuł szóstego poziomu (najniższej podsekcji)
<h6>...</h6>
wyświetlanie: w bloku
Aby nadać tytuł (nagłówek) jakiejś części tekstu (rozdziałowi, sekcji), możesz użyć tej komendy. Istnieje sześć rzędów tytułów. Najwyższym rzędem jest rząd pierwszy: <h1>...</h1>
, a najniższym - szósty: <h6>...</h6>
. Tytuł wyższego rzędu jest pisany większą czcionką.
Znaczniki tytułów (nagłówków) nie mogą zawierać elementów blokowych.
Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy wstawianiu tytułów w nagłówkach sekcji na stronach internetowych, zobacz rozdział HTML5: Podtytuł, Sekcja, Artykuł, Wstawka, Nagłówek, Stopka.
Przykład <h1, h2, h3, h4, h5, h6>
Prawidłowa kolejność tytułów nagłówków
Należy dążyć do tego, aby tytuły na stronie były poukładane w odpowiedniej kolejności, odzwierciadlającej podział na działy, rozdziały, podrozdziały, punkty, podpunkty itd. Oznacza to, że każdy element h2
powinien być poprzedzony przynajmniej przez jeden element h1
, h3
- przez h2
, h4
- przez h3
, h5
- przez h4
, h6
- przez h5
. W innym przypadku mielibyśmy do czynienia z sytuacją podobną do wykazu numerowanego np. od 1.1 zamiast od 1 albo z brakującymi podpunktami, tzn. jak gdyby nastąpiło "przeskoczenie" z punktu nr 1 od razu do 1.1.1 pomijając 1.1.
Przykład <h1, h2, h3>
<h1>1. Dział</h1> (...) <h2>1.1. Rozdział</h2> (...) <h2>1.2. Rozdział</h2> (...) <h3>1.2.1. Podrozdział</h3> (...) <h1>2. Dział</h1> (...)
Dymek narzędziowy <h1 title, h2 title, h3 title, h4 title, h5 title, h6 title>
Stosując polecenie np.: <h1 title="Tu podaj opis">...</h1>
możemy wprowadzić opis, który będzie się pojawiał, gdy przesuniemy wskaźnik myszki na dany tytuł. Atrybut ten (title="..."
) można stosować praktycznie w stosunku do wszystkich znaczników HTML (oprócz: <base>
, <basefont>
, <head>
, <html>
, <meta>
, <param>
, <script>
, <title>
).
UWAGA!
W treści atrybutu title="..."
nie należy używać znaków cudzysłowu. Jeśli musimy to zrobić, należy zamiast nich wpisywać: "
Przykład <h4 title>
Pytania i odpowiedzi <h1, h2, h3, h4, h5, h6>
Jak zrobić tytuł w HTML?
Aby tekst na stronie był czytelniejszy, dobrze jest podzielić go na sekcje tematyczne. W celu dodania głównego tytułu nagłówkowego do sekcji wystarczy wstawić znacznik: <h1>...</h1>
. Natomiast jeżeli chcemy wstawić tytuł podsekcji, używamy znacznika <h2>...</h2>
itd.
Ile jest H w HTML?
W wyrazie "HTML" jest tylko jedna litera "H" ;-) Ale w pytaniu oczywiście chodziło o coś innego. W języku HTML istnieje sześć poziomów tytułów nagłówkowych: od H1 do H6 - przy czym H1 oznacza tytuł główny, a H6 - tytuł podsekcji poziomu szóstego.
Blok <div>
Jak zgrupować elementy w blok?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari 1)
<div>...</div>
wyświetlanie: w bloku
Polecenie to wydziela większy blok tekstu. W odróżnieniu od akapitu, blok może zawierać wewnątrz siebie inne elementy wyświetlane w bloku. Kolejne bloki są oddzielane od siebie znakami nowej linii, ale nie są dodawane linijki przerwy (aby je dodać, należy zastosować znacznik <p>...</p> albo <br>).
Przykład <div>
Pytania i odpowiedzi <div>
Co to jest blok w HTML?
W języku HTML blok tworzy się przy pomocy znacznika: <div>...</div>
.
Co daje DIV HTML?
Znacznik <div>...</div>
powoduje, że tekst i inne elementy przed nim i poniżej niego zostaną przeniesione do nowej linii. Ponadto pozwala on grupować wewnątrz siebie inne elementy np. po to, aby je ustawić na środku ekranu.
Koniec linii <br>
W jaki sposób przenieść tekst do następnej linijki w dokumencie HTML?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari 1)
<br>
Jest to bardzo przydatny znacznik. Używamy go, gdy chcemy natychmiast zakończyć linię i przejść do następnej (wszystkie normalne znaki końca liniii są ignorowane przez przeglądarkę).
Przykład <br>
Tu jest pierwsza linia<br>
Tu jest druga linia...<br><br><br>
...a tu następna.
Pogrubienie <b>
W jaki sposób pogrubić (wytłuścić) tekst na stronie WWW?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari 1)
<b>...</b>
wyświetlanie: w linii
Znacznik ten pozwala pogrubić (wytłuścić) część tekstu (ang. "bold"). Oznacza on treść, na którą należy zwrócić uwagę z powodów czysto użytkowych. Nie nadaje dodatkowej ważności treści ani nie stawia akcentu wypowiedzi. Przydatne przy oznaczaniu słów kluczowych w tekście albo wprowadzenia na początku artykułu.
Przykład <b>
Ten tekst jest pogrubiony (wytłuszczony)Pochylenie <i>
W jaki sposób pochylić tekst na stronie WWW (kursywa)?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari 1)
<i>...</i>
wyświetlanie: w linii
Pozwala napisać tekst pismem pochylonym, czyli kursywą (ang. "italic"). Oznacza np. termin techniczny, idiom z innego języka albo fragment wtrąconego tekstu.
Przykład <i>
Ten tekst jest napisany pismem pochylonym, czyli kursywąPodkreślenie <u>
W jaki sposób podkreślić tekst na stronie WWW?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari 1)
<u>...</u>
wyświetlanie: w linii
Pozwala podkreślić fragment tekstu (ang. "underline"). Oznacza nieartykułowany tekst albo oznaczenie błędu ortograficznego.
Przykład <u>
Ten tekst jest podkreślonyPodkreślenie innym kolorem
Stosując pewną "sztuczkę", można sprawić, aby kolor linii podkreślenia różnił się od koloru tekstu:
<u style="color: red"><span style="color: black">To jest czarne podkreślenie czerwoną linią</span></u>
Przykład <u {color}>
To jest czarne podkreślenie czerwoną liniąPrzekreślenie <s>
W jaki sposób przekreślić tekst na stronie WWW?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari ≤4)
<s>...</s>
wyświetlanie: w linii
Pozwala przekreślić część tekstu. Oznacza treść, która nie jest dłużej trafna lub istotna z punktu widzenia pozostałej zawartości dokumentu.
Przykład <s>
Ten tekst jest przekreślonyPrzekreślenie innym kolorem
Stosując pewną "sztuczkę", można sprawić, aby kolor linii przekreślenia różnił się od koloru tekstu:
<s style="color: red"><span style="color: black">To jest czarne przekreślenie czerwoną linią</span></s>
Przykład <s {color}>
To jest czarne przekreślenie czerwoną liniąPytania i odpowiedzi <s>
Jak zrobić przekreślenie tekstu w HTML?
Aby podkreślić tekst w języku HTML, wystarczy wpisać go wewnątrz znacznika <s>...</s>
.
Jak skreślić tekst HTML?
Domyślnie tekst na stronie internetowej jest napisany zwykłą czcionką. Aby skreślić fragment tekstu, wystarczy umieścić go wewnątrz znacznika <s>...</s>
. W ten sposób często oznacza się treść, która jest już nieaktualna albo przestała być istotna.
Wyróżnienie <em, strong>
Jak wyróżnić tekst na ekranie (emfaza)?
wyświetlanie: w linii
- Emfaza (szczególny nacisk)
<em>...</em>
- Wysoka ważność (powaga lub pilność)
<strong>...</strong>
Pozwala wyróżnić dowolny tekst (tzw. emfaza), aby podkreślić jego znaczenie. Pierwsze polecenie zwykle wyświetla tekst napisany kursywą, natomiast drugie - pogrubiony. Różnią się one jednak od zwykłego wytłuszczenia i kursywy tym, że dodatkowo niosą ze sobą pewne informacje co do ważności tekstu. W sytuacjach kiedy szczególnie zależy nam na zwróceniu uwagi czytelnika na jakieś informacje, a nie jedynie na określonym sformatowaniu czcionki, powinniśmy użyć właśnie przedstawionych powyżej znaczników.
Przykład <em, strong>
<em>To jest tekst wyróżniony</em>
<strong>To jest tekst o wysokiej ważności</strong>
Pytania i odpowiedzi <em, strong>
Jak wyróżnić tekst w HTML?
Aby położyć szczególny nacisk na jakiś tekst, najlepiej umieścić go wewnątrz znacznika <em>...</em>
. Natomiast jeśli zależy nam, aby nadać my wysoką ważność, powagę lub pilność, należy objąć go znacznikiem <strong>...</strong>
.
Czym się różni STRONG od B?
Element STRONG nadaje tekstowi znaczenie w postaci wysokiej ważności, a dodatkowo zwykle wyświetla go w sposób pogrubiony. Natomiast element B również wizualnie wytłuszcza tekst, ale jedynie w celach czysto użytkowych nie nadając mu przy tym żadnego dodatkowego znaczenia - w ten sposób oznacza się często np. krótkie wprowadzenie na początku artykułu.
Indeks górny i dolny <sup, sub>
Jak wstawić indeks górny i dolny przy tekście?
wyświetlanie: w linii
- Indeks górny
<sup>...</sup>
- Indeks dolny
<sub>...</sub>
Umożliwia wprowadzenie indeksów (górnych lub dolnych) przy cyfrach i literach.
Przykład <sup, sub>
indeks<sup>górny</sup>
indeks<sub>dolny</sub>
Pytania i odpowiedzi <sub, sup>
Do czego służy znacznik SUB?
Element ten pozwala wstawić indeks dolny w tekście - tzn. wyświetlić go pomniejszoną czcionką, lekko przesunięty w dół.
Jak się robi indeks dolny?
Aby wstawić indeks dolny w dokumencie HTML, wystarczy umieścić wybrany fragment tekstu wewnątrz znacznika <sub>...</sub>
.
Jak zrobić indeks górny i dolny jednocześnie?
Jeśli wstawimy znaczniki indeksu górnego i dolnego bezpośrednio po sobie, to ten drugi w kolejności wyświetli się przesunięty w prawo. Aby ustawić indeks górny i dolny równo ponad sobą w jednej pionowej linii, można się posłużyć następującym kodem: A<span style="display: inline-block; line-height: 0.5"><sup style="display: block">1</sup><sub>2</sub></span>
.
Czcionka pomniejszona <small>
W jaki sposób pomniejszyć tekst?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari ≤4)
<small>...</small>
wyświetlanie: w linii
Wprowadza tekst napisany pomniejszoną czcionką. Reprezentuje przypisy (wyjaśnienia, zastrzeżenia, ograniczenia prawne, prawa autorskie).
Wpisując powyższe znaczniki (tego samego rodzaju) jeden wewnątrz drugiego (np.: <small><small>...</small></small>
), można zmniejszyć rozmiar tekstu o kilka wielkości.
Przykład <small>
To jest zwykły tekst... a ten tekst jest napisany czcionką pomniejszoną (small)
Tekst preformatowany <pre>
Jak wprowadzić tekst preformatowany, czyli taki, który wygląda identycznie jak w edytorze tekstowym?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari ≤4)
<pre>...</pre>
wyświetlanie: w bloku
Wprowadza tekst preformatowany, czyli napisany czcionką monotypiczną (o stałej szerokości znaku), który uwzględnia dodatkowe spacje, tabulację i znaki końca linii (nie trzeba stosować znaczników <br>) oraz nie jest automatycznie zawijany. Dzięki niemu możesz np. wkleić na stronę WWW tekst, wprost ze zwykłego edytora, bez stosowania dodatkowych znaczników (niestety informacje dotyczące formatowania zostaną pominięte). Należy jednak przy tym pamiętać, aby tekst nie zawierał znaków: "<" oraz ">" (w zamian używaj: < i >).
Znacznik tekstu preformatowanego nie może zawierać elementów blokowych ani: IMG, OBJECT, BIG, SMALL, SUB, SUP.
Tekst preformatowany w długich linijkach ciężko się czyta, ponieważ trzeba często przewijać stronę na boki. Aby tego uniknąć można w odpowiednich miejscach wstawić znaczniki WBR.
Przykład <pre>
Ten tekst jest preformatowny dlatego możemy używać tabulatora, dodatkowych spacji oraz znaków końca linii.
Kod komputerowy <code>
Jak oznaczyć kod komputerowy?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari ≤4)
<code>...</code>
wyświetlanie: w linii
Pozwala wprowadzić fragment kodu komputerowego ("wyciąg" z programu lub źródła dokumentu), który jest napisany czcionką monotypiczną (tak jak w przypadku tekstu preformatowanego). Nie uwzględnia on jednak dodatkowych spacji, tabulacji ani znaków końca linii (trzeba używać <br>) oraz jest automatycznie zawijany.
Ponieważ powyższy znacznik nie uznaje znaków końca linii, dodatkowych spacji, a także nie blokuje zawijania tekstu na ekranie, zamiast niego często używa się tekstu preformatowanego.
Przykład <code>
// Wyświetla bieżącą datę w JavaScript:
var data = new Date();
document.write(data);
Klawiatura <kbd>
Jak oznaczyć tekst, który użytkownik powinien wprowadzić z klawiatury?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari ≤4)
<kbd>...</kbd>
wyświetlanie: w linii
Wprowadza na ekran tekst, wskazując, że użytkownik powinien wprowadzić go z klawiatury. Zwykle formatowanie tego elementu jest identyczne jak w przypadku kodu komputerowego.
Przykład <kbd>
Dla strony głównej serwisu internetowego należy utworzyć plik i nadać mu nazwę: <kbd>index.html</kbd>
Przykład <samp>
Jak oznaczyć tekst, będący przykładem działania programu lub skryptu?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari ≤4)
<samp>...</samp>
wyświetlanie: w linii
Pozwala wprowadzić do dokumentu tekst, będący przykładem wyniku wygenerowanego przez program, skrypt itp. Zwykle działa analogicznie jak <code>.
Przykład <samp>
<samp>To jest przykład użycia znacznika "samp"</samp>Zmienna <var>
Jak oznaczyć zmienną lub argument programu?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari ≤4)
<var>...</var>
wyświetlanie: w linii
Wprowadza na ekran zmienną (matematyczną lub języka programowania), która zostaje wyróżniona, najczęściej poprzez pochylenie tekstu.
Przykład <var>
zmienna = a + 2b + 3Pytania i odpowiedzi <var>
Jak zrobić zmienną w HTML?
W tym celu należy umieścić tekst wewnątrz znacznika <var>...</var>
.
Jak oznaczyć zmienną?
Chociaż możemy w dowolny sposób wyróżnić wizualnie tekst będący zmienną (np. matematyczną, fizyczną, języka programowania albo parametr funkcji), lepiej jest do tego użyć znacznika <var>...</var>
. Oprócz określonego sposobu formatowania nadaje znaczenie semantyczne. Dzięki temu tak oznaczony tekst może być lepiej zrozumiany przez wszelkiego rodzaju czytniki i zautomatyzowane aplikacje przetwarzające treść stron internetowych.
Źródło <cite>
Jak powinno się wprowadzać odniesienia do źródła?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari ≤4)
<cite>...</cite>
wyświetlanie: w linii
Zwykle jest napisany kursywą. Umieszcza się w nim tytuł utworu, do którego się odnosimy, ale nie sam cytat. Może to być np. tytuł książki, opracowania, wiersza, partytury, piosenki, scenariusza, filmu, programu telewizyjnego, gry komputerowej, rzeźby, obrazu, sztuki teatralnej, przedstawienia, opery, musicalu, wystawy, protokołu sprawy czy nazwa programu komputerowego itp.
Element ten nie służy do oznaczania cytatów - do tego nadaje się znacznik <q>...<q> (krótki cytat) lub <blockquote>...</blockquote> (blok cytowany). Ponadto zgodnie z językiem HTML5 elementu <cite>...</cite>
nie można używać do oznaczania autora, a jedynie samego tytułu utworu.
Przykład <cite>
Więcej informacji znajduje się w opracowaniu <cite>HTML 4.01 Specification</cite>
Więcej informacji znajduje się w opracowaniu HTML 4.01 Specification
Cytat <q>
Jak powinno się oznaczać krótkie cytaty na stronach internetowych?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari 3)
<q>...</q>
wyświetlanie: w linii
Przeglądarka powinna automatycznie ująć tekst tego znacznika w znaki cudzysłowu, dlatego nie należy wstawiać dodatkowych cudzysłowów ręcznie. Umieszcza się w nim treść krótkich cytatów, które nie zawierają żadnych akapitów. Jeśli chcemy zacytować dłuższy fragment tekstu z kilkoma paragrafami, powinniśmy wykorzystać znacznik <blockquote>...</blockquote>.
Przykład <q>
Albert Einstein powiedział: <q>Dwie rzeczy nie mają granic: wszechświat i ludzka głupota.</q>
Albert Einstein powiedział:
Dwie rzeczy nie mają granic: wszechświat i ludzka głupota.
Blok cytowany <blockquote>
Jak wprowadzić dłuższy cytat?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari ≤4)
Blok cytowany <blockquote>
<blockquote>...</blockquote>
wyświetlanie: w bloku
Wprowadza blok cytowany, którego możemy użyć np. gdy powołujemy się na jakieś źródła. Każdy wiersz w bloku cytowanym rozpoczyna się zwykle tabulatorem (wcięciem). Można go używać do zacytowania jakiegoś większego fragmentu, który ciągnie się przez wiele linijek (zobacz także: Cytat).
UWAGA!
W Strict DTD tekst zawarty w bloku cytowanym, powinien być objęty również innym znacznikiem blokowym, jak np. paragrafem (<blockquote><p>...</p></blockquote>
).
Przykład <blockquote>
To jest blok cytowany.
Używamy go gdy powołujemy się na jakieś źródła, cytujemy czyjąś wypowiedź...
Wszystkie wiersze w tym bloku rozpoczynają się tabulatorem.
Blok cytowany ze źródłem <blockquote cite>
Korzystając z atrybutu cite="..."
można podać adres źródła, które cytujemy:
<blockquote cite="http://www.w3.org/"> <p>The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding.</p> </blockquote>
Pytania i odpowiedzi <blockquote>
Co to BLOCKQUOTE w HTML?
Jest to element (znacznik) odpowiedzialny za wstawienie bloku z cytatem.
Jak zrobić cytat w HTML?
Aby wstawić dłuższy cytat w postaci osobnego akapitu lub kilku akapitów, należy umieścić go wewnątrz znacznika <blockquote>...</blockquote>
. Natomiast do umieszczenia krótkiego cytatu w postaci jednego lub kilku zdań mieszczących się w tym samym akapicie co reszta tekstu, trzeba użyć znacznika <q>...</q>.
Adres <address>
Jak umieścić na stronie WWW informacje kontatkowe z autorem?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 15, Safari 1)
<address>...</address>
wyświetlanie: w bloku
Wprowadza blok informacji kontaktowych z autorem. Może to być np. adres e-mail lub zwykły adres pocztowy - o ile należy do autora artykułu. Nie należy stosować tego elementu do tworzenia listy adresów w formie książki adresowej.
Blok taki nie uwzględnia tabulatorów, dodatkowych spacji ani znaków końca linii. W przeglądarkach najczęściej jest automatycznie napisany czcionką pochyłą.
Przykład <address>
Autor: Jan Kowalskijan.kowalski@example.com
Zmiany <ins, del>
Jak poinformować użytkownika o wprowadzonych zmianach na stronie WWW: elementy wstawione i usunięte?
- Treść wstawiona
<ins>opis</ins>
- Treść usunięta
<del>opis</del>
Pozwala podać informację o wprowadzonych na stronie zmianach. Jeśli ostatnio dodane zostały jakieś nowe rozdziały, aby o tym zakomunikować, opis tych zmian można wpisać do znacznika <ins>
(taki tekst może zostać automatycznie podkreślony). Natomiast do znacznika <del>
wpisujemy opis usuniętych rozdziałów, które nie są już dostępne (zwykle tekst przekreślony).
Przykład <ins, del>
W tym tygodniu został dodany rozdział, dotyczący obliczania przybliżonych rozwiązań równań różniczkowych metodą Runge-Kutty drugiego rzędu ;-)
Rozdział o trójwymiarowych całkach krzywoliniowych, nie jest już dostępny ;-)
Skrót <abbr>
Jak powinno się oznaczać skróty i akronimy?
(interpretuje: Chrome 2, Firefox 1, Edge 12, Opera 15, Safari 4)
wyświetlanie: w linii
<abbr>...</abbr>
Znacznik ten pozwala oznaczyć wpisaną formę skróconą jak np.: "inż.", "prof.". Obejmuje to również tzw. akronimy (skrótowce), czyli wyraz utworzony z pierwszych liter lub pierwszych zgłosek (najczęściej sylab) kilku wyrazów będących zwykle jakąś nazwą, np.: "WWW" (World Wide Web). Akronim od skrótu najłatwiej można odróżnić po tym, że w języku polskim po skrócie stawiamy kropkę, chyba że kończy się ostatnią literą pełnego wyrazu (jak "nr" - numer). Ponadto skróty raczej nie są tworzone od nazw własnych, a podczas czytania tekstu na głos, zwykle rozwija się je do pełnej formy - inaczej niż akronimy, które najczęściej literujemy (AGD - czyt. a-gie-de), a jeśli zawierają samogłoski pomiędzy spółgłoskami - płynnie odczytujemy, jakby były jednym słowem (OBOP - czyt. obop). Zdarzają się również akronimy grupowe - tzw. sylabowce - składające się zwykle z pierwszych sylab kolejnych słów (Pafawag - czyt. pafawag) oraz mieszane - hybrydowe (PZMot - czyt. pe-zet-mot). Wbrew pojawiającym się czasem opiniom, również HTML jest akronimem.
W obu przypadkach zaleca się podać również pełną formę skrótu przy użyciu atrybutu title="..."
. Dodatkowo, jeżeli jest to nazwa obcojęzyczna, dobrze jest to oznaczyć, za pomocą atrybutu lang="..."
[zobacz: Języki].
Przykład <abbr>
<abbr title="profesor">prof.</abbr> <abbr lang="en" title="World Wide Web">WWW</abbr>
prof. WWW
Definicja <dfn>
Jak oznaczyć definicję terminu?
(interpretuje: Chrome 15, Firefox 1, Edge 12, Opera 15, Safari 6)
<dfn>...</dfn>
wyświetlanie: w linii
Wprowadza definicję jakiegoś terminu, która zwykle jest napisana kursywą. (zobacz także: Słownik). Znacznikiem tym powinien być objęty tylko definiowany termin, a nie cała treść definicji.
Przykład <dfn>
<dfn>Atrybut</dfn> to wartość powiązana z elementem, składająca się z nazwy i związanej wartości (tekstowej).
Słownik <dl, dt, dd>
Jak wprowadzić na stronę WWW słownik (listę definicyjną)?
<dl> <dt>Pierwszy termin</dt><dd>Definicja pierwszego terminu</dd> <dt>Drugi termin</dt><dd>Definicja drugiego terminu</dd> <dt>Trzeci termin</dt><dd>Definicja trzeciego terminu</dd> </dl>
wyświetlanie: w bloku
Polecenie tworzy tzw. listę opisową, która jest przydatna, gdy piszemy słownik, w którym znajdują się pewne wyrazy i ich objaśnienia. Objaśnienia są zwykle przesunięte bardziej w prawo, dzięki czemu lista staje się czytelniejsza. (Zobacz także: Definicja).
Zwracam uwagę, że w obrębie słownika tekst i inne elementy można wstawiać tylko wewnątrz znaczników terminów i definicji, a nie poza nimi! Zatem poniższy kod będzie nieprawidłowy:
<dl> Słownik... <dt>Termin</dt> <br> <dd>Definicja</dd> <br> </dl>
Termin definicji (DT) nie może zawierać elementów blokowych.
Przykład <dl, dt, dd>
- Atrybut
- Wartość powiązana z elementem, składająca się z nazwy i związanej wartości (tekstowej).
- HTML (Hypertext Markup Language)
- Język znacznikowy służący do tworzenia stron WWW.
- Zawartość
- Treść związana z elementem w dokumencie źródłowym.
Możliwe jest również tworzenie słownika, w którym pojedyncze pojęcia mają kilka znaczeń albo kilka pojęć oznacza to samo:
- Zamek
- Urządzenie do zamykania drzwi za pomocą klucza.
- Zapięcie wszywane do odzieży.
- Warowna budowla mieszkalna.
- Auto
- Samochód
- Dwuśladowy pojazd mechaniczny napędzany silnikiem.
<dl> <dt>Zamek</dt> <dd>Urządzenie do zamykania drzwi za pomocą klucza.</dd> <dd>Zapięcie wszywane do odzieży.</dd> <dd>Warowna budowla mieszkalna.</dd> <dt>Auto</dt> <dt>Samochód</dt> <dd>Dwuśladowy pojazd mechaniczny napędzany silnikiem.</dd> </dl>
Pytania i odpowiedzi <dl, dt, dd>
Co oznacza DL w HTML?
Jest to element (znacznik) listy opisowej zawierającej pary elementów w postaci nazwy DT i przyporządkowanej jej wartości DD.
Co to jest DT w HTML?
Jest to element składowy listy opisowej DL reprezentujący termin lub inną nazwę, do której za pomocą elementu DD jest przyporządkowany jej opis, definicja lub wartość.
Wykaz <ul, ol, li>
Jak wprowadzić na stronę wykaz: wypunktowanie (lista nieuporządkowana) lub numerowanie (lista uporządkowana)?
(lista wyliczeniowa)
Przy tworzeniu wykazów HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet najbardziej skomplikowany układ numeracji albo punktów i podpunktów.
Wypunktowanie - lista nieuporządkowana <ul, li>
<ul> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ul>
wyświetlanie: w bloku
Zwracam uwagę, że w obrębie wykazu tekst i inne elementy można wstawiać tylko wewnątrz znaczników punktów wykazu, a nie poza nimi! Zatem poniższy kod będzie nieprawidłowy:
<ul> Wykaz... <li>Punkt pierwszy</li> <br> <li>Punkt drugi</li> <br> </ul>
Przykład <ul, li>
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Wykaz numerowany - lista uporządkowana <ol, li>
<ol> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol>
wyświetlanie: w bloku
Przykład <ol, li>
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Wykaz numerowany - różne typy
<ol type="rodzaj numeracji"> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol>
- "1" (domyślny) - numeracja według liczb arabskich
- "I" - według dużych liczb rzymskich
- "i" - według małych liczb rzymskich
- "a" - według małych liter
- "A" - według dużych liter
Przykład <ol type, li>
<ol type="1"> (domyślny)
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
<ol type="I">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
<ol type="i">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
<ol type="A">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
<ol type="a">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Wykaz numerowany z podaniem początkowego numeru
<ol start="n"> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol>
Wartość atrybutu START zawsze musi być liczbą, nawet jeśli numerowanie następuje według liter!
Przykład <ol start, li>
Zmiana numerowania w trakcie
<ol> <li>Punkt pierwszy</li> <li value="n">Punkt drugi</li> <li>Punkt trzeci</li> </ol>
Wartość atrybutu VALUE zawsze musi być liczbą, nawet jeśli numerowanie następuje według liter!
Przykład <ol, li value>
Wykaz z wypunktowaniem innym kolorem
Stosując pewną "sztuczkę", można uzyskać wykaz, którego wyróżniki (markery) będą miały inny kolor niż reszta tekstu:
<ul style="color: red"> <li><span style="color: black">Punkt pierwszy</span></li> <li><span style="color: black">Punkt drugi</span></li> <li><span style="color: black">Punkt trzeci</span></li> </ul>
Przykład <ul "color", ol "color">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Dotyczy to wszystkich typów wykazu:
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Możliwe jest również określenie innego koloru dla każdego punktu wykazu:
<ul> <li style="color: red"><span style="color: black">Punkt pierwszy</span></li> <li style="color: green"><span style="color: black">Punkt drugi</span></li> <li style="color: blue"><span style="color: black">Punkt trzeci</span></li> </ul>
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Wykaz w akapicie
Na koniec ważna wskazówka. Często może się zdarzyć tak, że chcemy umieścić wykaz wewnątrz akapitu. Efekt będzie prawdopodobnie inny niż oczekiwaliśmy. Akapit nie jest zwykłym elementem blokowym, ponieważ nie może zawierać innych elementów blokowych (m.in. wykazów). Zakończy się on po napotkaniu pierwszego elementu blokowego, nawet przed znacznikiem zamykającym </p>
. W języku HTML nie jest to błąd, natomiast w XHTML już tak.
Przykład <p, ul, li>
Po wpisaniu:
<p style="text-align: center"> Tu rozpoczyna się akapit... <ul> <li>Punkt pierwszy wykazu</li> <li>Punkt drugi wykazu...</li> </ul> ...tu powinien skończyć się akapit. </p>
otrzymamy:
Tu rozpoczyna się akapit...
- Punkt pierwszy wykazu
- Punkt drugi wykazu...
...tu powinien skończyć się akapit.
Jak widać akapit zakończył się przed wykazem, ponieważ ostatnia linijka nie została ustawiona na środku (tak jak pierwsza). Aby to zmienić, należy rozpocząć nowy akapit tuż za wykazem i określić dla niego odpowiednie atrybuty lub ewentualnie zamiast akapitu użyć bloku.
Pytania i odpowiedzi <ul, ol, li>
Czym się różni tag UL od OL?
Element UL tworzy listę nieuporządkowaną (ang. unordered list) w postaci wypunktowania, natomiast UL - listę uporządkowaną (ang. ordered list) w postaci numeracji. Aby rozpoznać, którego elementu należy użyć w danej sytuacji, najlepiej zadać sobie pytanie: czy po przestawieniu elementów listy nadal będzie miała ona sens logiczny? Jeśli tak, lepiej skorzystać z listy nieuporządkowanej. Natomiast w przypadku kiedy opisujemy np. listę kroków, które należy wykonać w określonej kolejności, właściwym znacznikiem będzie lista uporządkowana.
Jak zrobić listę kropkowaną HTML?
W celu wstawienia listy nieuporządkowanej najpierw wstawiamy znacznik <ul>...</ul>
, a następnie wewnątrz niego kolejne punkty listy - każdy w osobnym znaczniku <li>...</li>
.
Co to jest LI w HTML?
Jest to element listy (ang. list item), który umieszcza się wewnątrz znacznika <ul>...</ul>
lub <ol>...</ol>
. Służy on do wstawienia kolejnych punktów listy nieuporządkowanej (wypunktowanie) i uporządkowanej (numeracja).
Zagnieżdżanie wykazów
W jaki sposób zrobić listę punków i podpunktów (wykaz)?
- Wypunktowanie (podstawowy)
<ul> <li>Punkt pierwszy <ul> <li>Punkt 1.1 <ul> <li>Punkt 1.1.1</li> <li>Punkt 1.1.2</li> </ul> </li> <li>Punkt 1.2</li> </ul> </li> <li>Punkt drugi</li> </ul>
- Numerowanie
<ol> <li>Punkt pierwszy <ol> <li>Punkt 1.1 <ol> <li>Punkt 1.1.1</li> <li>Punkt 1.1.2</li> </ol> </li> <li>Punkt 1.2</li> </ol> </li> <li>Punkt drugi</li> </ol>
- Wykaz mieszany - połączenie obu powyższych
Możliwe jest oczywiście dalsze zagnieżdżanie oraz mieszanie typów wykazów(wykaz mieszany).
Dzięki możliwości zagnieżdżania wykazów, można stworzyć listę punktów wraz z podpunktami. Podpunkty będą przesunięte bardziej w prawo w stosunku do punktów nadrzędnych, dzięki czemu wykaz będzie wyglądał bardziej czytelnie i estetycznie.
Zauważ, że w składni powyższych poleceń, wykazy bardziej zagnieżdżone są przesunięte w prawo - im bardziej podrzędny wykaz, tym większe jest wcięcie. Nie jest to konieczne, ale bardzo ułatwia zorientowanie się, na którym stopniu zagnieżdżenia aktualnie jesteśmy. Dlatego polecam używanie takiego sposobu wpisywania. Dobrze jest również na samym początku zamykać wszystkie znaczniki <ul>
, <ol>
oraz <li>
(większość edytorów HTML i tak robi to automatycznie), a dopiero potem wpisywać do nich wykazy podrzędne. Dzięki temu unikniemy błędnego wyświetlania, spowodowanego zapomnieniem zamknięcia znacznika.
Kod wykazów podrzędnych wpisuje się wewnątrz znacznika <li>...</li>
wybranego punku wykazu nadrzędnego. Pomiędzy dwoma punktami wykazu, tzn. między znacznikami </li>
a <li>
nie można się znaleźć żaden kod ani tekst, ponieważ jest to błędem!
Przy tworzeniu wykazów HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet najbardziej skomplikowany układ numeracji albo punktów i podpunktów.
Przykład <ul, ol, li>
Wypunktowanie:
- Punkt pierwszy
- Punkt 1.1
- Punkt 1.1.1
- Punkt 1.1.2
- Punkt 1.2
- Punkt 1.1
- Punkt drugi
Numerowanie:
- Punkt pierwszy
- Punkt 1.1
- Punkt 1.1.1
- Punkt 1.1.2
- Punkt 1.2
- Punkt 1.1
- Punkt drugi
Wykaz mieszany:
- Punkt pierwszy
- Punkt I.1
- Punkt I.1.a
- Punkt I.1.a.(1)
- Punkt I.1.a.(2)
- Punkt I.1.b
- Punkt I.1.a
- Punkt I.2
- Punkt I.1
- Punkt drugi
A oto co należy wpisać, aby otrzymać ostatni wykaz:
<ol type="I">
<li>Punkt pierwszy
<ol type="1">
<li>Punkt I.1
<ol type="a">
<li>Punkt I.1.a
<ul>
<li>Punkt I.1.a.(1)</li>
<li>Punkt I.1.a.(2)</li>
</ul>
</li>
<li>Punkt I.1.b</li>
</ol>
</li>
<li>Punkt I.2</li>
</ol>
</li>
<li>Punkt drugi</li>
</ol>
Pytania i odpowiedzi <ul, ol, li>
Co można uzyskać poprzez zagnieżdżanie wykazów?
Pozwala to stworzyć wykaz wielopoziomowy w postaci listy punktów głównych z podpunktami niższego poziomu. Każdy kolejny poziom wykazu zwykle jest bardziej przesunięty w prawo.
Jak zrobić listę w liście HTML?
Aby stworzyć wielopoziomowe wypunktowanie lub numerację, należy umieścić element wykazu podrzędnego <ul>...</ul>
lub <ol>...</ol>
wewnątrz znacznika <li>...</li>
wykazu nadrzędnego.
Pozioma linia <hr>
Jak umieścić poziomą linię, oddzielającą sąsiednie akapity?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera ≤12.1, Safari 3)
<hr>
Polecenie to pozwala narysować na ekranie poziomą linię. Może ona rozdzielać grupy akapitów, które różnią się od siebie tematycznie - np. zmiana sceny w powieści albo przejście do innego tematu w obrębie tej samej sekcji podręcznika - przez co strona staje się bardziej czytelna i przejrzysta.
Wygląd poziomej linii może się różnić w zależności od przeglądarki.
Przykład <hr>
Pytania i odpowiedzi <hr "border-width">
Co to jest HR w HTML?
Jest to element wstawiający na stronie poziomą linię (ang. horizontal rule). Możemy jej użyć np. aby rozdzielić sąsiednie części rozdziału, które co prawda różnią się od siebie tematycznie, ale nie tak bardzo, aby podzielić je na osobne rozdziały.
Jak pogrubić HR?
W większości przeglądarek pozioma linia domyślnie składa się z dwóch przylegających do siebie kresek o grubości jednego piksela każda. Aby tę wartość podwoić, można posłużyć się następującym kodem: <hr style="border-width: 2px">
.
Komentarz HTML
W jaki sposób ukryć przed użytkownikiem wybrany tekst?
<!-- Treść komentarza -->
Często zdarza się, że autor dla swojej wygody chciałby umieścić na stronie pewien tekst, który nie będzie widoczny dla normalnych użytkowników. Dzięki temu mógłby zaznaczyć ważne elementy strony lub wprowadzić inne informacje, które nie muszą być wyświetlane na ekranie, ponieważ mogłyby spowodować zaciemnienie właściwej treści.
Do wprowadzenia tekstu, który jest niewidoczny na ekranie, ale istnieje w źródle dokumentu, służy właśnie komentarz. Cały tekst który zostanie do niego wpisany będzie zignorowany przez przeglądarkę, ale może przechowywać ważne informacje dla autora strony (np. prawa autorskie). Oczywiście wewnątrz komentarza zwykłe znaczniki nie są interpretowane (chociaż można je tam wpisać). Komentarz może być wieloliniowy tzn., że może ciągnąć się przez wiele linijek, np.:
<!-- Ten tekst zostanie zignorowany przez przeglądarkę -->
<!-- zewnętrzny <!-- komentarz wewnętrzny --> zewnętrzny -->nawet jeśli komentarze znajdują się w wielu linijkach.
Częstym zastosowaniem komentarza jest również objęcie nim bloku kodu (razem ze znacznikami), który zdecydowaliśmy się chwilowo usunąć ze strony, ale zamierzamy go jeszcze kiedyś (niedługo) wykorzystać. Zaletą takiego sposobu, w stosunku do zwyczajnego usunięcia tekstu z kodu źródłowego strony, jest to, że za jakiś czas możemy ponownie wstawić taki fragment, usuwając tylko znaki komentarza - nie musimy wtedy wpisywać całego kodu od początku:
<!--<p> Ten fragment pokazuje przykład, w jaki sposób można używać <b>komentarz HTML</b>... </p>-->
Należy jednak pamiętać, aby nie obejmować w ten sposób przesadnie długich fragmentów strony, ponieważ niezależnie od tego, że nie są one widoczne na ekranie, to nadal figurują w kodzie źródłowym i spowalniają wczytywanie. Nie są natomiast wczytywane obrazki i inne osadzone pliki. Ponadto trzeba uważać, aby wybrany fragment nie zawierał wstawionych wcześniej komentarzy, ponieważ spowodowałoby to zagnieżdżenie, co jest niedozwolone:
<!--<p> Ten fragment pokazuje przykład, w jaki sposób nie można używać <b>komentarza HTML</b>... <!-- Ten komentarz jest niedozwolony --> Ciąg dalszy... </p>-->
Pytania i odpowiedzi
Jak zrobić komentarz?
Komentarze w języku HTML to fragmenty tekstu, które nie wyświetlają się w oknie przeglądarki, ale są widoczne po włączeniu podglądu kodu źródłowego strony (np. po wciśnięciu kombinacji klawiszy Ctrl+U). Na początku komentarza należy umieścić: <!--
, natomiast na jego końcu: -->
. Mogą się one bez przeszkód rozciągać na wiele linijek.
Czy istnieje możliwość umieszczenia znaczników HTML wewnątrz komentarzy?
Tak, znaczniki mogą być umieszczane wewnątrz komentarza HTML. Oczywiście wtedy nie wyświetlą się w oknie przeglądarki. Własność tę czasami wykorzystuje się do tymczasowego ukrycia fragmentów kodu HTML, który w tej chwili nie jest już potrzebny, ale w przyszłości może się jeszcze przydać. Należy jednak pamiętać, że cała zawartość komentarza nadal będzie widoczna w źródle strony, a ponadto może nieco wydłużyć czas wczytywania dokumentu HTML. Trzeba również zadbać, aby wewnątrz komentarza nie znalazł się inny, wewnętrzny komentarz, ponieważ taki zapis jest niedozwolony!
Blokada indeksowania fragmentów treści <... data-nosnippet>
Jak zablokować wybrane fragmenty treści na stronie przed pojawianiem się w wynikach wyszukiwania Google?
<div data-nosnippet>...</div> <span data-nosnippet>...</span> <section data-nosnippet>...</section>
Co zrobić, jeśli w opisie naszej strony w wynikach wyszukiwania Google wyświetlają się nieadekwatne treści? Może to mieć miejsce, m.in. kiedy w treści strony są umieszczone jakieś elementy interfejsu użytkownika. Na przykład jeśli w naszym serwisie znajdują się fragmenty przykładowych tekstów (kody źródłowe, polecenia, wzory itp.), możemy chcieć ułatwić użytkownikowi skorzystanie z nich poprzez dodanie przycisku "Skopiuj do schowka". Niestety roboty wyszukiwarek nie zawsze właściwie zinterpretują takie elementy i w efekcie mogą się one pojawić w wynikach wyszukiwania, mimo iż będą tam zupełnie bezużyteczne, bo przecież użytkownik nie będzie mógł ich tam kliknąć. Takie zachowanie może mieć miejsce, nawet jeśli elementy interaktywne generujemy za pomocą dynamicznych skryptów JavaScript.
Zupełne zablokowanie wyświetlania opisu w wynikach wyszukiwania, a tym bardziej zablokowanie indeksowania całej strony [zobacz rozdział: Roboty], z pewnością nie będzie wtedy dobrym rozwiązaniem. Lepiej zablokować indeksowanie tylko tych fragmentów treści, których nie chcemy widzieć w wynikach wyszukiwania. Aby to zrobić wystarczy objąć taki fragment zawartości strony znacznikiem DIV, SPAN lub SECTION ze specjalnym atrybutem logicznym (bez wartości): data-nosnippet
.
Znaczniki DIV i SPAN różnią się między sobą sposobem wyświetlania. Natomiast SECTION jest nowym elementem wprowadzonym w HTML5.
Zwracam uwagę, że wyszukiwarka Google obsługuje atrybut data-nosnippet
wyłącznie w przypadku wymienionych elementów: DIV, SPAN, SECTION. Przypisanie go do innego znacznika nie przyniesie żadnych rezultatów.
Przykład <... data-nosnippet>
<div data-nosnippet>Cała zawartość tego znacznika nie powinna pojawić się w wynikach wyszukiwania.</div> <p>Ten tekst może pojawić się w wynikach wyszukiwania<span data-nosnippet>, ale ten już nie</span>.</p>
Kod poprawny semantycznie
Co to znaczy, że kod HTML jest poprawny semantycznie i dlaczego jest to takie ważne?
Znaczniki formatujące i semantyczne
Patrząc na liczbę znaczników, służących do formatowania tekstu na ekranie przeglądarki internetowej, można się zastanawiać: po co jest ich aż tyle? Jaki był sens wprowadzania znacznika <strong>...</strong> (mocne wyróżnienie), skoro właściwie zwykle jest on wyświetlany tak samo jak <b>...</b> (pogrubienie)? Czy nie lepiej tworzyć akapity za pomocą podwójnych znaczników <br> zamiast <p>...</p>? Czy to aby nie jest pomyłka organizacji W3C, że wprowadzono znacznik <h1>...</h1> (tytuł rozdziału), skoro ten sam efekt można uzyskać dobierając odpowiedni rozmiar czcionki?
Otóż na pewno nie jest to pomyłka. Z punktu widzenia użytkownika w języku HTML wyróżniamy dwa podstawowe typy elementów określających atrybuty tekstu:
- Znaczniki formatujące - mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez żadnego odniesienia do znaczenia tego tekstu. Są to np.: B (pogrubienie), I (pochylenie), U (podkreślenie), S (przekreślenie), SMALL (czcionka pomniejszona). Użycie tych znaczników gwarantuje, że w każdej sytuacji tekst otrzyma określone formatowanie (wygląd), ale nic nie mówi o charakterze tego tekstu * . Innymi słowy: nie wiemy, czy tekst jest pogrubiony dlatego, że zawiera ważny termin, który powinien się wyróżniać, czy może dlatego, że autor strony chciał w tym miejscu po prostu wprowadzić czcionkę pogrubioną, bo akurat dobrze komponuje się z innymi elementami strony.
* Co prawda język HTML5 opisuje pewne znaczenia nawet dla tzw. elementów formatujących, jednak równocześnie wizualny sposób ich wyświetlania zawsze jest ściśle określony. Raczej trudno się spodziewać, żeby np. znacznik B (z ang. bold - czyli pogrubienie) kiedyś zaczął być wyświetlany przez przeglądarki kursywą ;-)
- Znaczniki semantyczne - określają charakter (znaczenie) tekstu, który obejmują. Zwykle niosą ze sobą również odpowiednie formatowanie, ale nie jest to wymagane. Są to np.: H1-H6 (tytuł), STRONG (mocne wyróżnienie), EM (emfaza), CODE (kod komputerowy), KBD (klawiatura), SAMP (przykład), VAR (zmienna), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ADDRESS (adres), INS i DEL (zmiany), ABBR (skrót), DFN (definicja). Nie ma żadnej pewności, w jaki sposób zostaną wyświetlone na ekranie te elementy. Co prawda zwykle np. znacznik
<strong>...</strong>
jest pogrubiony, ale nic nie stoi na przeszkodzie, aby jakaś specjalna przeglądarka wyświetliła go normalnie, a jedynie ze zmienionym na czerwono kolorem.
W przypadku znaczników semantycznych to nie sposób formatowania jest najważniejszy, ale informacje jakie ze sobą niosą. Element <strong>...</strong>
wskazuje, że objęty nimi tekst jest bardzo ważny. <code>...</code>
daje do zrozumienia, że jest to fragment kodu komputerowego - np. jakiegoś programu. <abbr>...</abbr>
to wspólnie z <q>...</q>
i <cite>...</cite>
jedne z najbardziej "niedocenianych" znaczników. Tymczasem niosą ze sobą niezwykle ważne informacje.
Komu to jest potrzebne?
Z informacji niesionej przez znaczniki semantyczne korzystają zwykłe przeglądarki internetowe, wyróżniając je w specjalny, właściwy sobie sposób.
Znaczniki semantyczne mają ogromne znaczenie dla syntezatorów mowy, czyli specjalnych przeglądarek, które odczytują treść stron WWW na głos. Używane są najczęściej przez osoby niewidome. Taka osoba nie zobaczy koloru czcionki i nie będzie wiedzieć, że gdzieś tekst został wytłuszczony w tradycyjny sposób. Natomiast używany syntezator mowy, kiedy natrafi na znacznik <strong>...</strong>
, może specjalnie podkreślić tonem głosu zawarty w nim tekst. Wprost nieocenioną pomocą dla syntezatorów mowy są znaczniki akronimów i skrótów. Aplikacje takie mają zwykle wbudowaną bazę najpopularniejszych skrótów i akronimów, a więc kiedy na nie natrafią, mogą odczytać ich pełną nazwę, a nie literować. Oczywiście najpierw trzeba poinformować syntezator, że dany wyraz jest skrótem lub akronimem, a nie jakąś specjalną nazwą, z której korzystasz w swoim tekście. Jeżeli używasz skrótów lub akronimów, które są dość mało znane, zalecane jest dodanie atrybutu title="..."
, w którym można umieścić pełne rozwinięcie nazwy. Wyeliminuje to konieczność domyślania się rozwinięcia przez syntezator i ewentualnych pomyłek (jeden akronim może mieć zupełnie różne rozwinięcia w różnych dziedzinach wiedzy).
Jeżeli nie sądzisz, aby Twoja strona mogła być kiedykolwiek odwiedzona przez osobę niewidomą (nigdy tego nie zakładaj, bo możesz się bardzo zdziwić!), na pewno nie możesz zlekceważyć, że właściwe oznaczanie tekstu za pomocą znaczników semantycznych ma niebagatelne znaczenie dla robotów wyszukiwarek sieciowych. Są to aplikacje, które przez cały czas szukają nowych stron w Internecie i sprawdzają, czy stare się nie zmieniły. Za pomocą specjalnego algorytmu informatycznego przetwarzającego treść odwiedzanych stron, zapisują linki do nich w bazie danych przyporządkowując je do odpowiednich słów kluczowych (haseł). Z tej bazy danych korzystają następnie wyszukiwarki sieciowe, takie jak Google, kiedy użytkownicy przeszukują Internet za ich pośrednictwem. Aby serwis WWW mógł być popularny, konieczne jest takie zbudowanie treści, aby była ona przyjazna dla robotów wyszukiwarek, ponieważ inaczej trudno go będzie komukolwiek odszukać. Może to zabrzmi dziwnie, ale można powiedzieć, że roboty wyszukiwarek są "niewidome"! Dlatego na pewno docenią, że chcesz im pomóc w prawidłowym zaindeksowaniu (zapisaniu informacji o stronie w ich bazie danych) swojej strony. Mogą się odwdzięczyć oczywiście wyższą pozycją na liście wyszukiwania, co bezpośrednio wpłynie na popularność Twojego serwisu WWW.
Dla robotów wyszukiwarek sieciowych nie jest obojętne, czy do oznaczania tytułów rozdziałów użyjesz znaczników <h1>...</h1> - <h6>...</h6>
, czy może <font size="7">...</font> - <font size="1">...</font>
. Nikt rozsądny nie wpisuje w znacznikach tytułu tekstu, który nie ma nic wspólnego z zawartością rozdziału, co może mieć miejsce dla elementu FONT. Tak na marginesie: wiele osób próbuje oszukać wyszukiwarki, umieszczając na stronie tytuły w taki sposób: <h1><font size="1">...</font></h1>
. Powoduje to wstawienie tytułu pierwszego rzędu (czyli najważniejszego dla wyszukiwarek) miniaturową czcionką. W tym przypadku efekt jednak może być odwrotny, ponieważ wyszukiwarki już dawno uodporniły się na takie sztuczki. W skrajnym przypadku taka strona może zostać zupełnie usunięta z wyszukiwarki!
Podsumowanie
Zrozumienie istoty poprawności semantycznej kodu HTML jest niezwykle ważne. Niejednokrotnie można w ten sposób odróżnić osobę doświadczoną od nowicjusza. Stosuj znaczniki formatujące tylko wtedy, gdy obejmowany nimi tekst nie niesie ze sobą jakiegoś specjalnego znaczenia, a zależy Ci natomiast na tym, aby w każdych warunkach był wyświetlony tak, jak to przewidziałeś. Znaczniki semantyczne należy używać wszędzie tam, gdzie chcemy wskazać specjalne znaczenie obejmowanego nimi tekstu i jest to dla nas ważniejsze, niż jednoznaczne określenie jego wyglądu. Szczególnie przyswój sobie przeznaczenie następujących znaczników: H1-H6 (tytuł), STRONG (mocne wyróżnienie), EM (emfaza), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ABBR (skrót).
Pytania i odpowiedzi
Co to znaczy, że HTML jest semantyczny?
Kod HTML jest semantyczny, jeśli do oznaczania jego fragmentów używamy elementów, które nadają swojej zawartości określone znaczenie - zgodnie z ich przeznaczeniem opisanym w specyfikacji języka.
Które znaczniki określamy mianem semantycznych?
Najczęściej o semantyce mówimy w kontekście użytkownika serwisu WWW. W takiej sytuacji elementy semantyczne to takie, które nadają swojej zawartości istotne dla użytkownika znaczenie (podane w specyfikacji HTML), a nie tylko określony sposób formatowania tekstu.
Pytania i odpowiedzi
Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu HTML. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.
Jak wstawić tytuł (nagłówek) na stronie WWW? W jaki sposób wyświetlić "dymek narzędziowy" po wskazaniu tekstu myszką?
Jak zrobić tytuł w HTML?
Aby tekst na stronie był czytelniejszy, dobrze jest podzielić go na sekcje tematyczne. W celu dodania głównego tytułu nagłówkowego do sekcji wystarczy wstawić znacznik: <h1>...</h1>
. Natomiast jeżeli chcemy wstawić tytuł podsekcji, używamy znacznika <h2>...</h2>
itd.
Ile jest H w HTML?
W wyrazie "HTML" jest tylko jedna litera "H" ;-) Ale w pytaniu oczywiście chodziło o coś innego. W języku HTML istnieje sześć poziomów tytułów nagłówkowych: od H1 do H6 - przy czym H1 oznacza tytuł główny, a H6 - tytuł podsekcji poziomu szóstego.
Jak zgrupować elementy w blok?
Co to jest blok w HTML?
W języku HTML blok tworzy się przy pomocy znacznika: <div>...</div>
.
Co daje DIV HTML?
Znacznik <div>...</div>
powoduje, że tekst i inne elementy przed nim i poniżej niego zostaną przeniesione do nowej linii. Ponadto pozwala on grupować wewnątrz siebie inne elementy np. po to, aby je ustawić na środku ekranu.
W jaki sposób przekreślić tekst na stronie WWW?
Jak zrobić przekreślenie tekstu w HTML?
Aby podkreślić tekst w języku HTML, wystarczy wpisać go wewnątrz znacznika <s>...</s>
.
Jak skreślić tekst HTML?
Domyślnie tekst na stronie internetowej jest napisany zwykłą czcionką. Aby skreślić fragment tekstu, wystarczy umieścić go wewnątrz znacznika <s>...</s>
. W ten sposób często oznacza się treść, która jest już nieaktualna albo przestała być istotna.
Jak wyróżnić tekst na ekranie (emfaza)?
Jak wyróżnić tekst w HTML?
Aby położyć szczególny nacisk na jakiś tekst, najlepiej umieścić go wewnątrz znacznika <em>...</em>
. Natomiast jeśli zależy nam, aby nadać my wysoką ważność, powagę lub pilność, należy objąć go znacznikiem <strong>...</strong>
.
Czym się różni STRONG od B?
Element STRONG nadaje tekstowi znaczenie w postaci wysokiej ważności, a dodatkowo zwykle wyświetla go w sposób pogrubiony. Natomiast element B również wizualnie wytłuszcza tekst, ale jedynie w celach czysto użytkowych nie nadając mu przy tym żadnego dodatkowego znaczenia - w ten sposób oznacza się często np. krótkie wprowadzenie na początku artykułu.
Jak wstawić indeks górny i dolny przy tekście?
Do czego służy znacznik SUB?
Element ten pozwala wstawić indeks dolny w tekście - tzn. wyświetlić go pomniejszoną czcionką, lekko przesunięty w dół.
Jak się robi indeks dolny?
Aby wstawić indeks dolny w dokumencie HTML, wystarczy umieścić wybrany fragment tekstu wewnątrz znacznika <sub>...</sub>
.
Jak zrobić indeks górny i dolny jednocześnie?
Jeśli wstawimy znaczniki indeksu górnego i dolnego bezpośrednio po sobie, to ten drugi w kolejności wyświetli się przesunięty w prawo. Aby ustawić indeks górny i dolny równo ponad sobą w jednej pionowej linii, można się posłużyć następującym kodem: A<span style="display: inline-block; line-height: 0.5"><sup style="display: block">1</sup><sub>2</sub></span>
.
Jak oznaczyć zmienną lub argument programu?
Jak zrobić zmienną w HTML?
W tym celu należy umieścić tekst wewnątrz znacznika <var>...</var>
.
Jak oznaczyć zmienną?
Chociaż możemy w dowolny sposób wyróżnić wizualnie tekst będący zmienną (np. matematyczną, fizyczną, języka programowania albo parametr funkcji), lepiej jest do tego użyć znacznika <var>...</var>
. Oprócz określonego sposobu formatowania nadaje znaczenie semantyczne. Dzięki temu tak oznaczony tekst może być lepiej zrozumiany przez wszelkiego rodzaju czytniki i zautomatyzowane aplikacje przetwarzające treść stron internetowych.
Jak wprowadzić dłuższy cytat?
Co to BLOCKQUOTE w HTML?
Jest to element (znacznik) odpowiedzialny za wstawienie bloku z cytatem.
Jak zrobić cytat w HTML?
Aby wstawić dłuższy cytat w postaci osobnego akapitu lub kilku akapitów, należy umieścić go wewnątrz znacznika <blockquote>...</blockquote>
. Natomiast do umieszczenia krótkiego cytatu w postaci jednego lub kilku zdań mieszczących się w tym samym akapicie co reszta tekstu, trzeba użyć znacznika <q>...</q>.
Jak wprowadzić na stronę WWW słownik (listę definicyjną)?
Co oznacza DL w HTML?
Jest to element (znacznik) listy opisowej zawierającej pary elementów w postaci nazwy DT i przyporządkowanej jej wartości DD.
Co to jest DT w HTML?
Jest to element składowy listy opisowej DL reprezentujący termin lub inną nazwę, do której za pomocą elementu DD jest przyporządkowany jej opis, definicja lub wartość.
Jak wprowadzić na stronę wykaz: wypunktowanie (lista nieuporządkowana) lub numerowanie (lista uporządkowana)?
Czym się różni tag UL od OL?
Element UL tworzy listę nieuporządkowaną (ang. unordered list) w postaci wypunktowania, natomiast UL - listę uporządkowaną (ang. ordered list) w postaci numeracji. Aby rozpoznać, którego elementu należy użyć w danej sytuacji, najlepiej zadać sobie pytanie: czy po przestawieniu elementów listy nadal będzie miała ona sens logiczny? Jeśli tak, lepiej skorzystać z listy nieuporządkowanej. Natomiast w przypadku kiedy opisujemy np. listę kroków, które należy wykonać w określonej kolejności, właściwym znacznikiem będzie lista uporządkowana.
Jak zrobić listę kropkowaną HTML?
W celu wstawienia listy nieuporządkowanej najpierw wstawiamy znacznik <ul>...</ul>
, a następnie wewnątrz niego kolejne punkty listy - każdy w osobnym znaczniku <li>...</li>
.
Co to jest LI w HTML?
Jest to element listy (ang. list item), który umieszcza się wewnątrz znacznika <ul>...</ul>
lub <ol>...</ol>
. Służy on do wstawienia kolejnych punktów listy nieuporządkowanej (wypunktowanie) i uporządkowanej (numeracja).
W jaki sposób zrobić listę punków i podpunktów (wykaz)?
Co można uzyskać poprzez zagnieżdżanie wykazów?
Pozwala to stworzyć wykaz wielopoziomowy w postaci listy punktów głównych z podpunktami niższego poziomu. Każdy kolejny poziom wykazu zwykle jest bardziej przesunięty w prawo.
Jak zrobić listę w liście HTML?
Aby stworzyć wielopoziomowe wypunktowanie lub numerację, należy umieścić element wykazu podrzędnego <ul>...</ul>
lub <ol>...</ol>
wewnątrz znacznika <li>...</li>
wykazu nadrzędnego.
Jak umieścić poziomą linię, oddzielającą sąsiednie akapity?
Co to jest HR w HTML?
Jest to element wstawiający na stronie poziomą linię (ang. horizontal rule). Możemy jej użyć np. aby rozdzielić sąsiednie części rozdziału, które co prawda różnią się od siebie tematycznie, ale nie tak bardzo, aby podzielić je na osobne rozdziały.
Jak pogrubić HR?
W większości przeglądarek pozioma linia domyślnie składa się z dwóch przylegających do siebie kresek o grubości jednego piksela każda. Aby tę wartość podwoić, można posłużyć się następującym kodem: <hr style="border-width: 2px">
.
W jaki sposób ukryć przed użytkownikiem wybrany tekst?
Jak zrobić komentarz?
Komentarze w języku HTML to fragmenty tekstu, które nie wyświetlają się w oknie przeglądarki, ale są widoczne po włączeniu podglądu kodu źródłowego strony (np. po wciśnięciu kombinacji klawiszy Ctrl+U). Na początku komentarza należy umieścić: <!--
, natomiast na jego końcu: -->
. Mogą się one bez przeszkód rozciągać na wiele linijek.
Czy istnieje możliwość umieszczenia znaczników HTML wewnątrz komentarzy?
Tak, znaczniki mogą być umieszczane wewnątrz komentarza HTML. Oczywiście wtedy nie wyświetlą się w oknie przeglądarki. Własność tę czasami wykorzystuje się do tymczasowego ukrycia fragmentów kodu HTML, który w tej chwili nie jest już potrzebny, ale w przyszłości może się jeszcze przydać. Należy jednak pamiętać, że cała zawartość komentarza nadal będzie widoczna w źródle strony, a ponadto może nieco wydłużyć czas wczytywania dokumentu HTML. Trzeba również zadbać, aby wewnątrz komentarza nie znalazł się inny, wewnętrzny komentarz, ponieważ taki zapis jest niedozwolony!
Co to znaczy, że kod HTML jest poprawny semantycznie i dlaczego jest to takie ważne?
Co to znaczy, że HTML jest semantyczny?
Kod HTML jest semantyczny, jeśli do oznaczania jego fragmentów używamy elementów, które nadają swojej zawartości określone znaczenie - zgodnie z ich przeznaczeniem opisanym w specyfikacji języka.
Które znaczniki określamy mianem semantycznych?
Najczęściej o semantyce mówimy w kontekście użytkownika serwisu WWW. W takiej sytuacji elementy semantyczne to takie, które nadają swojej zawartości istotne dla użytkownika znaczenie (podane w specyfikacji HTML), a nie tylko określony sposób formatowania tekstu.
Powtórka
Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego HTML. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.
W jaki sposób układać tekst na ekranie? Jak dodać nowy akapit? Czym różni się akapit od paragrafu?<p>...</p>
Jak wstawić tytuł (nagłówek) na stronie WWW? W jaki sposób wyświetlić "dymek narzędziowy" po wskazaniu tekstu myszką?<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
Jak zgrupować elementy w blok?<div>...</div>
W jaki sposób przenieść tekst do następnej linijki w dokumencie HTML?<br>
W jaki sposób pogrubić (wytłuścić) tekst na stronie WWW?<b>...</b>
W jaki sposób pochylić tekst na stronie WWW (kursywa)?<i>...</i>
W jaki sposób podkreślić tekst na stronie WWW?<u>...</u>
W jaki sposób przekreślić tekst na stronie WWW?<s>...</s>
Jak wyróżnić tekst na ekranie (emfaza)?<em>...</em>
<strong>...</strong>
Jak wstawić indeks górny i dolny przy tekście?<sup>...</sup>
<sub>...</sub>
W jaki sposób pomniejszyć tekst?<small>...</small>
Jak wprowadzić tekst preformatowany, czyli taki, który wygląda identycznie jak w edytorze tekstowym?<pre>...</pre>
Jak oznaczyć kod komputerowy?<code>...</code>
Jak oznaczyć tekst, który użytkownik powinien wprowadzić z klawiatury?<kbd>...</kbd>
Jak oznaczyć tekst, będący przykładem działania programu lub skryptu?<samp>...</samp>
Jak oznaczyć zmienną lub argument programu?<var>...</var>
Jak powinno się wprowadzać odniesienia do źródła?<cite>...</cite>
Jak powinno się oznaczać krótkie cytaty na stronach internetowych?<q>...</q>
Jak wprowadzić dłuższy cytat?<blockquote>...</blockquote>
Jak umieścić na stronie WWW informacje kontatkowe z autorem?<address>...</address>
Jak poinformować użytkownika o wprowadzonych zmianach na stronie WWW: elementy wstawione i usunięte?<ins>opis</ins>
<del>opis</del>
Jak powinno się oznaczać skróty i akronimy?<abbr>...</abbr>
Jak oznaczyć definicję terminu?<dfn>...</dfn>
Jak wprowadzić na stronę WWW słownik (listę definicyjną)?<dl>
<dt>Pierwszy termin</dt><dd>Definicja pierwszego terminu</dd>
<dt>Drugi termin</dt><dd>Definicja drugiego terminu</dd>
<dt>Trzeci termin</dt><dd>Definicja trzeciego terminu</dd>
</dl>
Jak wprowadzić na stronę wykaz: wypunktowanie (lista nieuporządkowana) lub numerowanie (lista uporządkowana)?<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>
<ol>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>
<ol type="rodzaj numeracji">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>
<ol start="n">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>
<ol>
<li>Punkt pierwszy</li>
<li value="n">Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>
W jaki sposób zrobić listę punków i podpunktów (wykaz)?<ul>
<li>Punkt pierwszy
<ul>
<li>Punkt 1.1
<ul>
<li>Punkt 1.1.1</li>
<li>Punkt 1.1.2</li>
</ul>
</li>
<li>Punkt 1.2</li>
</ul>
</li>
<li>Punkt drugi</li>
</ul>
<ol>
<li>Punkt pierwszy
<ol>
<li>Punkt 1.1
<ol>
<li>Punkt 1.1.1</li>
<li>Punkt 1.1.2</li>
</ol>
</li>
<li>Punkt 1.2</li>
</ol>
</li>
<li>Punkt drugi</li>
</ol>
Jak umieścić poziomą linię, oddzielającą sąsiednie akapity?<hr>
W jaki sposób ukryć przed użytkownikiem wybrany tekst?<!-- Treść komentarza -->
Jak zablokować wybrane fragmenty treści na stronie przed pojawianiem się w wynikach wyszukiwania Google?<div data-nosnippet>...</div>
<span data-nosnippet>...</span>
<section data-nosnippet>...</section>
Quiz i certyfikat ukończenia
Sprawdź swoją wiedzę, nabytą w tym rozdziale i zdobądź imienny certyfikat ukończenia * , rozwiązując testowy QUIZ (online).
* Aby otrzymać certyfikat, wybierz opcję: Wszystkie pytania z rozdziału.
Ćwiczenia
- Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
- Podziel tekst ze strony na sekcje tematyczne, z których każda będzie się rozpoczynać odpowiednim tytułem. Zwróć uwagę, że znacznik tytułu nie umieszcza się wewnątrz akapitu, ale przed nim.
- Odszukaj fragmenty tekstu, które zasługują na szczególne podkreślenie ich znaczenia. Oznacz je w miarę potrzeb znacznikami EM lub STRONG. Sprawdź, czy podczas wcześniejszych ćwiczeń w prawidłowy sposób został przez Ciebie użyty znacznik pogrubienia.
- Dodaj do swojej strony przynajmniej jeden cytat lub blok cytowany. Jeżeli Tworzysz stronę o sobie, może to być np. motto, którym kierujesz się w życiu albo wypowiedź jakiejś ważnej dla Ciebie osoby.
- Jeżeli w treści swojej strony używasz skrótów bądź definicji, zadbaj o ich oznaczenie właściwymi znacznikami.
- Na podstronie linki.html użyj wykazu (wypunktowanie) w taki sposób, aby każdy odnośnik wraz z jego krótkim opisem znajdował się w osobnym punkcie.
- Na podstronie kontakt.html użyj znacznika ADDRESS, aby odpowiednio oznaczyć informacje kontaktowe z autorem strony - czyli z Tobą :-)