Szkielet dokumentu#

Dobre nawyki#

Zamieszczam kilka cennych i ważnych rad, które warto przestrzegać na samym początku nauki języka HTML. Dzięki nim, w każdej chwili bez problemu przestawisz się na XHTML-a.

Wielkość stosowanych liter#

W języku HTML istnieje dowolność co do wielkości stosowanych liter. Wszystkie elementy, atrybuty i ich wartości możesz pisać zarówno dużymi jak i małymi literami. W XHTML wszystkie znaczniki muszą być pisane obowiązkowo małymi literami. Dlatego zalecam już od początku uczyć się właśnie tej zasady. Pisz więc nie:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<H1 TiTlE="NAGŁÓWEk">Nasza wycieczka na Mazury</H1>

lecz zawsze:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<h1 tittle="nagłówek">Nasza wycieczka na Mazury</h1>

Domykanie znaczników#

Elementy języka (X)HTML składają się z dwóch znaczników: znacznika otwierającego oraz znacznika zamykającego. Znacznik zamykający różni się od otwierającego tym, że zaczyna się nie samym znakiem <, a parą znaków />. Znacznikami zamykającymi są na przykład: </a>, </p>, </img>, </area>.

Wedle najnowszych norm, w kodzie (X)HTML pojawiać się mogą wyłącznie pełne elementy, składające się z dwóch znaczników (otwierającego i zamykającego), między którymi może być zawarty tekst lub inne, zagnieżdżone elementy. Ponieważ pierwsze wersje standardu nie wprowadzały takiego ograniczenia wobec wszystkich znaczników (np. znacznik <img> można było umieszczać bez znacznika zamykającego </img>), twórcy najnowszej odmiany języka musieli zdecydować, w jaki sposób ma być zapisywany kod tych znaczników, których jeszcze niedawno nie trzeba było zamykać. Zdecydowano, że twórcy stron WWW będą mieli dwie możliwości:

Nigdy nie pisz:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p>To nie jest poprawny zapis.

lecz zawsze:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p>To jest poprawny zapis.</p>

Spacja przed znakiem ("/") dla elementów pustych ułatwia rozpoznanie tagu przeglądarkom nie obsługującym XHTML.

Już na wstępie wypadałoby sprostować jedną kwestię. W HTML-u zamykanie elementów pustych jest zabronione! Wstawianie dodatkowych slashy niepotrzebnie generuje błędy, które muszą być skorygowane przez parser przeglądarki dla MIME text/html. Dlatego dla HTML-a nigdy nie pisz:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<img scr="www.crimsteam.site90.net/grafika/avatar.jpg" alt="avatar spirita" />

lecz zawsze:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<br>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<img scr="www.crimsteam.site90.net/grafika/avatar.jpg" alt="avatar spirita">

Znaki zastrzeżone#

Jak łatwo zauważyć, niektóre symbole są zarezerwowane dla samej składni (X)HTML-a, dlatego nie powinny występować w normalnej treści strony. Przykładem mogą być znaki: "<" (znak mniejszości) oraz ">" (znak większości) stosowane w znacznikach. Jeśli musimy ich użyć, należy zastosować odpowiednie prezentacje z kodowania lub encje: &lt; oraz &gt;. Także znak "&" (ampersand), który często występuje w treści jak i samych odsyłaczach należy zastąpić przez: &amp;. To tylko trzy najczęściej wykorzystywane encje, jest ich znacznie więcej.

Zatem nie pisz:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p>Bardzo lubię utwór Black&White.</p>
<a href="http://dobreprogramy.pl/index.php?dz=2&id=302&Zajaczek+4.1">...</a>

lecz zawsze:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p>Bardzo lubię utwór Black&amp;White.</p>
<a href="http://dobreprogramy.pl/index.php?dz=2&amp;id=302&amp;Zajaczek+4.1">...</a>

Więcej informacji na temat niejawnego stosowania znaków umieściłem w dziale "Encje".

Mieszanie znaczników#

Nigdy nie mieszaj znaczników, elementy nie mogą się przeplatać tzn. elementy muszą być zamykane w kolejności odwrotnej do kolejności ich otwierania (gdy zakładasz skarpetkę, a potem but, to potem najpierw musisz zdjąć but, aby móc zdjąć skarpetkę). Chodzi o to, aby poprawnie zagnieżdżać jedne znaczniki w drugich. Nie pisz więc:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<strong><em>To nie jest poprawny zapis</strong></em>

lecz zawsze:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<strong><em>To jest poprawny zapis</em></strong>

Poprawne zagnieżdżanie elementów#

Zagnieżdżanie elementów oznacza, że jeden element może zawierać się w drugim. Przykładowo:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p>Element, który jest wpisany wewnątrz innego elementu, jest nazywany elementem
w nim <b>zawartym lub elementem zagnieżdżonym.</b></p>

Należy być ostrożnym w umieszczaniu jednych elementów wewnątrz innych. Każdy element (X)HTML ma ściśle zdefiniowaną dopuszczalną zawartość, tak więc nieprawidłowy jest poniższy przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p><title><i>Kurs tworzenia stron internetowych.</i></title></p>

Pomimo, że elementy te są poprawnie pootwierane i pozamykane, zagnieżdżenia takie są niedopuszczalne w składni (X)HTML. Element p nie może zawierać elementu title, natomiast element title nie może zawierać w sobie żadnych innych elementów.

Używanie cudzysłowów#

Zwróć uwagę na używanie cudzysłowów przy podawaniu konkretnych wartości poleceń i atrybutów, co jest wymagane we współczesnych standardach, choć nie było egzekwowane w starszych. Pisz zatem nie:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<img src=fotka.jpg alt=fotka z wakacji>
<a href=http://www.onet.pl>Portal Onet.pl</a>
<p style=color: blue;>Tekst w kolorze niebieskim.</p>

lecz zawsze:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<img src="fotka.jpg" alt="fotka z wakacji">
<a href="http://www.onet.pl">Portal Onet.pl</a>
<p style="color: blue;">Tekst w kolorze niebieskim.</p>

Atrybuty logiczne (puste)#

W języku (X)HTML występują pewne atrybuty logiczne (np. compact, noshade, readonly, selected). Obecność samej nazwy atrybutu określa daną cechę jako true. W HTML-u atrybuty logiczne można minimalizować tzn. umieszczać tylko nazwy. W XHTML-u dodatkowo konieczne jest podanie wartości tożsamej z nazwą. Nie pisz więc:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<hr nonshade>
<option selected>

lecz zawsze:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<hr nonshade="nonshade">
<option selected="selected">

Formatowanie kodu#

Już na samym początku wyrób sobie jeden z podstawowych nawyków - twórz kod tak, żeby był czytelny. Dzięki temu o wiele łatwiej będzie Ci zapanować nad całością. Składnia (X)HTML jest bardzo elastyczna, jeśli chodzi o białe znaki. Można wstawiać spacje, znaki tabulacji, a nawet przejścia do nowej linii w dowolnych miejscach. Możesz napisać tak:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<ul><li><a href="#">Strona główna</a></li><li>Oferta<ul><li>
<a href="#">Surowce</a></li><li><a href="#">
Półprodukty</a></li><li><a href="#">
Produkty</a></li></ul></li><li><a href="#">
Kontakt</a></li></ul>

Powyższy zapis nie jest błędny, po prostu ciężko się go analizuje. O wiele czytelniejsza okazuje się następująca forma:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<ul>
 <li><a href="#">Strona główna</a></li>
 <li>Oferta
  <ul>
   <li><a href="#">Surowce</a></li>
   <li><a href="#">Półprodukty</a></li>
   <li><a href="#">Produkty</a></li>
  </ul>
 </li>
 <li><a href="#">Kontakt</a></li>
</ul>

I tyle, syntaktyka języka (X)HTML nie jest trudna. Trzymając się poprawniej składni mamy większe szanse, że napisana przez nas strona wyświetlona zostanie przez różne przeglądarki w ten sam sposób. Pamiętaj tylko, że żadna nie jest w 100% zgodna ze specyfikacjami webowymi, niewielkie rozbieżności w interpretacji poleceń na pewno się pojawią.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Szkielet dokumentu (H1) Dobre nawyki (H2) Wielkość stosowanych liter (H3) Domykanie znaczników (H3) Znaki zastrzeżone (H3) Mieszanie znaczników (H3) Poprawne zagnieżdżanie elementów (H3) Używanie cudzysłowów (H3) Atrybuty logiczne (puste) (H3) Formatowanie kodu (H3)