Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Znaczniki

Znacznik jest to specjalny tekst, umieszczony w nawiasach ostrych, na przykład <b>. Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Znacznik nie jest widoczny na ekranie, widoczne są tylko efekty jego działania (np. pogrubienie czcionki). Znaczniki prawie zawsze występują parami - znacznik otwierający posiada swój znacznik zamykający, np. dla znaczników obejmująych akapit kod html będzie wyglądał następująco:
<p>Treść akapitu</p>
Zwróć uwagę, że znacznik zamykający rozpoczyna się ukośnikiem (czyli znakiem: "/") i ma taką samą nazwę jak otwierający. Co prawda w wersji 5 HTML znaczniki zamykające nie są bezwzględnie wymagane, ale każdy doświadczony twórca stron powie Ci aby je obowiązkowo stosować. Z kilku względów:

  • nie wiemy jakie będą wymagania następnej wersji - ewentualna przeróbka byłaby mocno kłopotliwa
  • z punktem poprzednim wiąże się tzw. utrzymanie kodu, czyli jego zdolność do zmian i poprawek
  • stosowanie znaczników w parach umożliwia tworzenie kodu przejrzystego i logicznie spójnego, co również m. in. ma wpływ na jego utrzymanie
  • oprogramowanie (JavaScript, PHP) chaotycznego dukumentu byłoby niezmiernie trudne

Zobacz, który fragment kod jest bardziej przejrzysty, ten poniżej

<div class="fragment_strony">
  <article class="lekcja">
    <h1>Temat lekcji</h1>
    <section>
      <h2>Zagadnienie pierwsze<h2>
      <p>
        Tutaj znajduje się pierwszy akapit omawiający pierwsze zagadnienie
      </p>	
      <p>
        Tutaj znajduje się drugi akapit omawiający pierwsze zagadnienie
      </p>	
    </section>	
    <nav>
      <a href="k_0_1_0.php">Tutaj znajdziesz materiały na temat lekcji</a>		
    </nav>
  </article>
</div>
Pokazanego wyżej kodu, nie ucz się na pamięć, teraz jest on podany jako przykład, zastosujesz go dopiero, gdy Twoja wiedza pozwoli go zrozumieć.

czy może ten?
<div class="fragment_strony"><article class="lekcja"><h1>Temat lekcji</h1><section><h2>Zagadnienie pierwsze<h2><p>Tutaj znajduje się pierwszy akapit omawiający pierwsze zagadnienie</p><p>Tutaj znajduje się drugi akapit omawiający pierwsze zagadnienie</p> </section><nav><a href="k_0_1_0.php">Tutaj znajdziesz materiały na temat lekcji</a></nav></article></div> Nie trzeba być fachowcem żeby stwierdzić, że z drugim kodem "już nic nie da się zrobić".

Przykład pierwszy jest dobrym wzorem pisania znaczników. Zwróć uwagę, że każda para ma odpowiednie, jednakowe wcięcie (przesunięcie linii tekstu w prawo). Dodatkowo widać poziomy - pary znajdujące się wewnątrz, są wcięte względem zewnętrznych. Przy wielopoziomowej strukturze dokumentu, jedynym racjonalnym sposobem uporządkowania kodu, jest stosowanie znaczników zamykających oraz odpowiednich wcięć.

Znacznik otwierający różni się dodatkowo od zamykającego tym, że może zawierać dodatkowe elementy - atrybuty definiujące jego właściwości, np. formatowanie wyglądu za pomocą CSS może wyglądać następująco:
<p class="nazwa_klasy">Treść akapitu</p>
Na przykładzie widzimy ponadto obowiązkową zasadę pisania atrybutów: nazwa atrybutu, znak równości =, a następnie wartość atrybutu pisana w cudzysłowie - w naszym przykładzie mamy class="nazwa_klasy". Często występują sytuacje wymagające wpisania kliku atrybutów, wtedy kolejne oddzielamy od poprzednich spacją.

W pisowni znaczników i atrybutów zaleca się się stosowanie małych liter. Przyczyny są analogiczne do wymogu stosowania znaczników zamykających.

Wspominałem wcześniej, że nie wszystkie znaczniki występują w parach, typowym przykładem jest znacznik <br /> wymuszający złamianie linii i przejście do nowego wiersza. Jak widzimy mamy tu jakby "dwa w jednym", ponieważ po spacji (pisz ją obowiązkowo) występuje ukośnik typowy dla znacznika zamykającego.

Ćwiczenie 0_1_0_1

Wypisz w zeszycie poznane na lekcji pojęcia. Własnymi słowami wytłumacz ich znaczenia.

Praca domowa

Pojęcia poznane na lekcji są podstawowe - naucz się ich na pamięć. Musisz umieć własnymi słowami, wytłumaczyć znaczenia tych pojęć.