2.1 Wprowadzenie do tagów
HTML-documents
Znaczniki są oparte na tagach . Co to jest tag ?
Tagi zostały wynalezione w latach 70., aby ludzie mogli dodawać informacje o usługach do dokumentów dla programów przetwarzających te dokumenty.
Tag
- jest to kluczowe (funkcjonalne) słowo, najczęściej w języku angielskim, które zostało ujęte w nawiasy ostre (więcej i mniej znaków), aby programy nie myliły tagów i zwykłych słów w języku angielskim.
Znacznik może również zawierać różne informacje o usługach, które mogą być przydatne dla programu przetwarzającego dokument.
Przykładowy tekst ze znacznikiem:
<a href="http://codegym.cc/about">
Link to something interesting
</a>
W tym przykładzie widzimy tekst, znacznik „a”, a także informacje o usłudze – atrybuty znacznika. Poniżej dowiesz się o nich więcej.
2.2 Rodzaje tagów: otwierający, zamykający, pusty
Tagi są różnego rodzaju. Po pierwsze, są pojedyncze i podwójne. Najczęstsze są sparowane tagi . I jak już pewnie się domyślacie, zawsze chodzą parami. Nazywa się je również otwieraniem i zamykaniem.
Znacznik otwierający to po prostu słowo kluczowe w nawiasach trójkątnych. Przykład:
<h1>
Znacznik zamykający jest podobny do znacznika otwierającego, ale słowo kluczowe jest poprzedzone ukośnikiem. Przykład:
</h1>
Znacznik otwierający może zawierać informacje o usłudze - atrybuty, tag zamykający - nie . Znacznik początkowy jest zawsze pierwszym z pary. Znacznik zamykający NIE może znajdować się najpierw w tekście, a potem znacznik otwierający. To HTML-document
nie będzie ważne.
Pojedyncze znaczniki nie mają znacznika zamykającego. Listę takich tagów definiuje HTML-standard
. Przykłady takich tagów:
<br>
- przerwanie linii;<img>
- zdjęcie.
Nawiasem mówiąc, sparowany tag, jeśli nie zawiera informacji w środku, można zapisać w formie skróconej . Przykład:
<h1/>
To nie jest pojedynczy tag, ale pusty tag w parze. To tak, jakby jednocześnie były zamknięte i otwarte tagi. Różni się od zamkniętego znacznika tym, że ukośnik znajduje się na końcu (przed drugim nawiasem trójkątnym).
2.3 Drzewo znaczników
I jeszcze ważna informacja o sparowanych tagach. W dokumencie może ich być wiele i mogą być zagnieżdżane. Co to znaczy? Oznacza to, że dowolny tekst w obrębie HTML-document
może być otoczony znacznikami, nawet jeśli zawiera inne znaczniki. Przykład:
<html>
plain text
<a href="http://codegym.cc/about">
Link to something interesting
</a>
some other text
</html>
Z grubsza mówiąc, w tekście HTML może wystąpić sekwencja tagów:
<h1> <h2> </h2> </h1>
Ale nie może być:
<h1> <h2> </h1> </h2>
Jeśli znacznik początkowy <h2>
znajduje się w <h1>
parze -znaczników, to odpowiadający mu znacznik końcowy </h2>
również musi znajdować się w <h1>
parze -znaczników.
W ten sposób wszystkie znaczniki dokumentów tworzą rodzaj drzewa znaczników . Najpierw jest znacznik najwyższego poziomu, który opakowuje cały dokument, zwykle nazywany <html>
, zawiera pary znaczników podrzędnych, mają one własne i tak dalej.
W rzeczywistości program, który przetwarza dokument ze znacznikami, widzi go dokładnie w ten sposób — jako drzewo znaczników z tekstem w środku.
2.4 Atrybuty
Informacje o tagach nie byłyby kompletne, gdybyśmy nie mówili o atrybutach. Pojedyncze tagi i tagi początkowe sparowanych tagów mogą mieć . Atrybuty te zawierają przydatne informacje o zawartości znacznika.
Znacznik może zawierać kilka atrybutów, które mają następującą ogólną postać:
<tag name1="value1" name2="value2">
Każdy atrybut jest określony jako para Name
i meaning
. Może istnieć dowolna liczba atrybutów.
Ale doświadczony programista od razu zada pytanie: co zrobić, jeśli jako wartość atrybutu musisz użyć tekstu zawierającego znaki «<»
lub «>»
cudzysłowy ?
Nazwa symbolu | Symbol | Wpis HTML |
---|---|---|
podwójny cudzysłów | " | " |
Ampersand | & | & |
Mniej niż symbol | < | < |
Więcej symbolu | > | > |
Przestrzeń | ||
pojedynczy cytat | ' | ' |
GO TO FULL VERSION