Dokumenty HTML składają się z elementów, które są oznaczone za pomocą tzw. tagów. Tagi rozpoznasz po nawiasach ostrych. W zasadzie niemal każdy element HTML jest oznaczony przez tag początkowy i końcowy. To, co znajduje się pomiędzy nimi, nazywane jest treścią zawartości.
Przykład:
<h1>PSD-Tutorials.de – twoje portal graficzny, internetowy i edukacyjny</h1>
Za pomocą tej składni wprowadza się do dokumentu nagłówek pierwszego stopnia. Tag początkowy <h1> informuje przeglądarkę, że mamy do czynienia z takim nagłówkiem. Kończący tag </h1> kończy nagłówek. Tags kończące rozpoznasz po otwierającym się nawiasie ostrym, poprzedzonym ukośnikiem </.
Pojawia się pytanie dotyczące zapisu nazw elementów: jak wygląda sprawa wielkości liter? Jak już wspomniano, w tej serii skupiamy się na HTML5. Tutaj faktycznie możesz wybierać między małymi i wielkimi literami. Osobiście preferuję jednak konsekwentną małą literę i będę postępować w ten sposób także w tej serii. Ogólnie jednak, zgodnie z HTML5, następujące przypadki byłyby poprawne:
<h1>PSD-Tutorials.de – twoje portal graficzny, internetowy i edukacyjny</h1> <H1>PSD-Tutorials.de – twoje portal graficzny, internetowy i edukacyjny</H1> <h1>PSD-Tutorials.de – twoje portal graficzny, internetowy i edukacyjny</H1>
Elementy, które otwierasz, musisz również zamykać. Dlatego jeśli ustawisz <h1>, musisz je zamknąć po zakończeniu definicji nagłówka </h1>. Chociaż w HTML5 istnieją wyjątki, takie jak elementy listy i akapity, o czym jednak będziemy mówić później.
W HTML istnieją również tzw. tagi autonomiczne. Składają się one tylko z jednego tagu, a nie z tagu otwarcia i zamykania. Typowym przykładem jest <br />.
To jest linia.<br /> To jest inna linia.
To <br /> definiuje podział linii.
Takie puste tagi zwykle zamyka się za pomocą ukośnika, chociaż w HTML5 nie jest to konieczne. Tutaj również dałoby się to zrobić w ten sposób:
<br>
W trakcie tej serii poznasz jeszcze inne tego rodzaju tagi autonomiczne.
Zagnieżdżanie elementów
Elementy HTML mogą być również zagnieżdżane. Załóżmy, że chcesz wewnątrz nagłówka pogrubione akcentować fragment. Do kursywizacji służy element i.
<h1>PSD-Tutorials.de – <i>twoje portal graficzny, internetowy i edukacyjny</i></h1>
Przy zagnieżdżaniu zwracaj uwagę na prawidłową kolejność. Ostatnią rzeczą, którą zamykasz, jest element, który był otwarty jako pierwszy. W tym konkretnym przypadku jest to element h1.
Użycie atrybutów
Wewnątrz tagów otwierających lub tagów autonomicznych można definiować tzw. atrybuty. Te atrybuty mogą przypisywać elementom dodatkowe właściwości. W wcześniejszych czasach HTML przypisywano elementom stosunkowo dużo atrybutów. Wynikało to po prostu z mieszania struktury i projektowania. Na przykład, definicje kolorów były bezpośrednio przekazywane do elementu HTML poprzez odpowiadający atrybut. Obecnie, dzięki CSS, jest możliwe jasne oddzielenie projektowania od struktury, co również powinno być przestrzegane. Dlatego obecnie stosuje się jedynie stosunkowo niewiele atrybutów.
Ważnym atrybutem jest id. Za pomocą tego atrybutu można przypisać elementowi HTML unikalne nazwisko, przez które można go później odwoływać się na przykład za pomocą CSS lub JavaScript.
<h1 id="head">PSD-Tutorials.de – twoje portal graficzny, internetowy i edukacyjny</h1>
Aby przypisać atrybut, należy po h1 wstawić spację. Następnie podaj nazwę atrybutu, która zazwyczaj jest zapisana małymi literami. Po nazwie atrybutu następuje znak równości. W cudzysłowiu umieszczona jest wartość atrybutu.
Można również przypisać kilka atrybutów elementowi. Zatem całkowicie normalne jest, że dla elementu definiuje się tzw. klasę i ID. Przykładem tego jest: Za pomocą id nadawane jest unikalne id nagłówka. Natomiast klasa służy do przyporządkowania nagłówka do konkretnej kategorii. Można więc określić, że wszystkie elementy, którym przypisano klasę blue, będą wyświetlane na niebiesko. (Więcej na temat CSS-ów i kwestii kolorów oczywiście później szczegółowo).
<h1 id="head" class="blue">PSD-Tutorials.de – twoj portal grafiki, webu i nauki</h1>
Atrybuty są w tym przypadku oddzielone od siebie spacją.
Walidacja kodu
Kilka podstawowych zasad składni zostało już przez was poznanych. Szczególnie na początku nauki HTML jest ważne przestrzeganie tych zasad. To, do czego raz się przyzwyczailiście w złym nawyku, jest trudne do wyrzucenia z głowy. Dlatego zawsze powinniście sprawdzać lub walidować swój kod HTML pod względem poprawności. Oczywiście nie musicie tego robić sami. Istnieją odpowiednie narzędzia online. Możecie na przykład znaleźć tzw. walidatora pod adresem http://validator.w3.org/.
Najlepiej przejdźcie tam bezpośrednio do zakładki Sprawdź bezpośrednio poprzez wpisanie kodu. Tutaj można wkleić kod HTML do sprawdzenia poprzez kopiowanie i wklejanie. Koniecznie upewnijcie się, że wklejacie cały kod pliku, czyli także oznaczenie DOCTYPE.
Aby przetestować walidator, wstawcie do pola tekstowego poniższą treść, a następnie kliknijcie przycisk Sprawdź.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – twoj portal grafiki, webu i nauki</h1> </body> </html>
Wynik powinien wyglądać następująco:
Wszystko jest w porządku. (W tym przypadku nie musicie przejmować się dwoma ostrzeżeniami). Jeśli pojawia się komunikat This document was successfully checked as HTML5!, oznacza to, że jest naprawdę wszystko w porządku. Ale jak to wygląda w przypadku błędu? Możecie celowo wprowadzić błąd składni.
<h1 id=head">PSD-Tutorials.de – twoj portal grafiki, webu i nauki</h1>
Tu zapomniano o początkowym cudzysłowiu przy head. Kiedy teraz sprawdzicie składnię, błąd zostanie wykryty.
Walidator następnie zwraca odpowiedni komunikat. Dokładnie widać w dolnym obszarze okna, co poszło nie tak.
Tutaj jest również bardzo dobrze opisane, co tak naprawdę jest błędem.
Linia 8, Kolumna 12: " in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.
<h1 id=head" >PSD-Tutorials.de</h1>
Widzicie więc od razu, w którym miejscu nastąpił błąd w składni, i możecie go poprawić. Walidator pomaga więc w tworzeniu czystego kodu HTML. Zawsze powinniście walidować swój kod. Przeglądarki często poprawnie wyświetlają kod HTML, nawet jeśli składnia jest błędna. Natomiast w innych przeglądarkach, w których nie testujecie swoich stron, może to wyglądać zupełnie inaczej.
