Tagi HTML i struktura

Głównym elementem kodu HTML jest TAG ( znacznik). Jest to specjalne słowo kluczowe umieszczone wewnątrz ostrych nawiasów. Budowa tagu wygląda tak:

<tag_name>treść</tag_name>

Nazwa zawarta pomiędzy ostrymi nawiasami określa typ tagu. Tagi to kod HTML, a teksty między nimi to treść. Tagi okalają te teksty, co pozwala określić strukturę dokumentu HTML. Dzięki niemu możesz np. ustalić kolor tła, rodzaj formatowania tekstu, wstawić obrazek itd. Znacznik nie jest widoczny na ekranie. Widoczne są tylko efekty jego działania.

Cechy tagów

Tagi HTML najczęściej występują w parach np. <p> i </p> (tagi paragrafu).
Pierwszy tag w parze to tag otwierający, drugi jest tagiem zamykającym.
Tag zamykający jest zapisany podobnie jak otwierający, ale dodaje się znak / przed jego nazwą.
Są też tagi niewymagające zamykającego taga (a nawet nie należy go wstawiać), takie jak <br> (złamanie linii czyli enter).

Struktura dokumentu HTML i przykładowe tagi

Każdy dokument HTML ma ściśle określoną strukturę podstawową. Struktura, czyli kod początkowy, który w zasadzie powtarza się w każdym pliku HTML. Dopiero w ramach tej struktury dodajemy swoją treść i inne tagi. Struktura wygląda tak:

Deklaracja Doctype – Linijka, która określa z jakim typem dokumentu mamy do czynienia.

Treść pomiędzy <html> i </html> to nasz dokument HTML.

Sekcja Head Treść pomiędzy <head> i </head> dostarcza informacji o stronie, które są ważne dla przeglądarki, ale najczęściej niewidoczne dla internauty.

Treść w tagach <meta> (zawsze zagnieżdżone w <head></head>) zawiera informacje ważne dla przeglądarki. Aby poprawnie wyświetlały się polskie znaki za pomocą tagu meta dodajemy kodowanie UTF-8 – <meta charset=”UTF-8″>.

Tytuł strony, który jest wyświetlany jako największy, niebieski napis w wynikach wyszukiwania Google.

<title> Tytuł strony</title>

Treść title ma też duże znaczenie w SEO naszej strony – warto dopilnować, by zawierał najważniejsze słowa kluczowe danej strony.

Treść pomiędzy <body> i </body> jest tym, co widzisz potem w przeglądarce. Tu wstawiasz teksty i zdjęcia dla swojej witryny.

Elementy liniowe to takie, które zajmują tyle miejsca ile im potrzeba i nic więcej.

Przykładem może być znacznik <span>, w którym umieszczamy krótki tekst, mający zmieścić się w 1 linijce, czy też tag <img> umieszczający obrazek, który dopasowuje się do tekstu i układa się obok niego, ale nie zajmuje całej dostępnej powierzchni.

Element blokowy zajmuje całą dostępną szerokość strony.

Przykładem jest akapit (<p>), blok (<div> często wykorzystywany do budowania szkieletu strony) czy nagłówek (od <h1> do <h6>).

Treść pomiędzy <h1> i </h1> to nagłówek. Istnieje 6 rodzajów nagłówków. Najwyższym nagłówkiem jest h1. Kolejno mamy h2, h3, h4, h5 i h6. Im wyższy nagłówek, tym pisany jest większą czcionką.

Treść pomiędzy <p> i </p> utworzy paragraf tekstu.

Treść pomiędzy <a href=”#”> i </a> definiuje link, który ma prowadzić pod dany w atrybucie href adres. Najczęściej wykorzystuje się go do stworzenia menu lub by stworzyć odsyłacz do innej strony, która nam się spodobała albo którą chcemy polecić dla czytelnika. Odnośnik może być tekstowy (klikamy w tekst), obrazkowy (klikamy w obrazek) lub nawet może prowadzić do adresu e-mail.

Odnośnik obrazkowy

Znacznik <img src=”file.jpg” alt=””> wstawia plik grafiki na stronę z danego źródła src.

Atrybuty tagów

Tagom (znacznikom) HTML możemy dodawać atrybuty, które określą dodatkowe właściwości tagu. Dodajemy je w następujący sposób:

<tag_name attribute1=”valueX” attribute2=”valueY“>content</tag_name>

Atrybuty zawsze należy dodawać do tagu otwierającego. Można też dodać kilka atrybutów do jednego tagu, rozdzielając je spacją. Wartość atrybutu podaje się po znaku równości, zawierając ją w cudzysłowie. Dla różnych tagów da się stosować różne atrybuty, które mogą przyjmować określoną wartość.

Listy

Listę często wykorzystuje się do stworzenia menu na stronie lub po prostu do wypisania elementów w czytelny sposób.

Istnieją 2 typy listy: uporządkowana (numeracja przed każdym elementem) i nieuporządkowana (domyślnie kółeczka przed każdym z elementów). Element <ol> wskazuje jedynie na rodzaj listy. Wszystkie elementy listy muszą się znaleźć pomiędzy znacznikami <li> oraz </li>.

Lista nieuporządkowana

<ol>

<li>Element</li>

</ol>

Lista nieuporządkowana

<ul>

<li>Element</li>

</ul>

Komentarze

Komentarze w HTML są niewidoczne dla przeglądarki, tzn. widoczne są tylko z poziomu kodu i nie zobaczy ich osoba, która przegląda stronę.

Wykorzystuje się je często do skomentowania (opisania) jakiejś części strony w kodzie, by w późniejszym czasie łatwiej było ją modyfikować.

Wtedy nie musisz przeglądać i analizować całego kodu strony.

Komentarz tworzymy następująco:

<!– Treść komentarza –>

Czcionka

Znaczniki fizyczne działają w podobny sposób jak atrybuty czcionek w edytorze tekstów, tworząc warstwę prezentacyjną redagowanego tekstu – wyróżniają one pewne fragmenty z całego przekazu.

Czcionka pogrubiona

<b> </b>