Podstawy HTML-a

Stronę tą wyświetlono już: 588 razy

HTML to akronim od HyperText Markup Language, czyli hipertekstowy język znaczników. Co ciekawe wykorzystuje on w zasadzie format zapisu danych XML, aczkolwiek jest on nieco bardziej elastyczny i mniej podatny na częste błędy, jak np. nie domknięcie znacznika. Co prawda nie jest to język programowania, a jedynie język opisujący, w jaki sposób różne elementy tekstowe czy też może i graficzne są rozmieszczone i sformatowane.

Znaczniki HTML

Każdy znacznik zaczyna się od operatora <, następnie musi być podana jego nazwa, np. b a na końcu operator >. Taki znacznik jest znacznikiem otwierającym, który poskładany do kupy wygląda tak: <b>, po tym znaczniku można umieścić jakiś tekst a następnie zamknąć ten znacznik w następujący sposób: </b>. Znacznik <b>text</b> pogrubia tekst znajdujący się pomiędzy jego początkiem i końcem.

Każdemu znacznikowi otwierającemu można przypisać zestaw atrybutów przyjmujących pewne wartości, w HTML-u najczęściej spotykane z nich to:

  • class - określa klasę, do jakiej dany znacznik został przypisany. Po tejże klasie można się odwoływać do różnych elementów strony i nadawać im różne style czy to w CSS czy lokalnie w nagłówku strony;
  • id - przypisuje identyfikator dla danego znacznika, przy czym ten sam identyfikator nie może być przypisany do dwóch znaczników na tej samej stronie;
  • style - umożliwia wprowadzanie styli dla danego znacznika.

Jest ich oczywiście więcej, ale te są wspólne praktycznie dla każdego znacznika HTML.

Koniec końców następujący kod HTML:

Listing 1
  1. <b style="color:red">Ten tekst jest pogrubiony przez znacznik b i czerwony przez styl color ustawiony na red</b>

niesie za sobą następujący rezultat:

Ten tekst jest pogrubiony przez znacznik b i czerwony przez styl color ustawiony na red

Istnieją znaczniki, które nie mają oddzielnego znacznika zamykającego, do takich znaczników należy np. img służący do wstawiania elementów graficznych:

Listing 2
  1. <img src="lokalizacja_pliku_graficznego.gif"/>

Jak widać w powyższym przypadku znak / przed > oznacza, że ten znacznik nie zawiera żadnej zawartości (a więc jest znacznikiem otwierającym i zamykającym w jednym

Encje - wprowadzanie znaków specjalnych

Pojawia się pewien problem, ponieważ niektóre znaki, jak np. < i > są znakami specjalnymi, używanymi przez HTML-a a więc nie można ich ot tak użyć do wstawienia znaku mniejsze niż czy większe niż. Jak więc to zrobić? Jak wstawić takie znaki na stronę? Od tego są encje.

Istnieją dwie grupy encji:

  • nazwane - czyli takie, którym przypisano nazwy własne;
  • nie nazwane - które można wstawić posługując się ich numerem pod którym dany znak się znajduje w tablicy kodowania utf8.

Aby wstawić znak < trzeba wpisać &lt; - jest to encja nazwana, bo posiada nazwę łatwą do przyswojenia i zapamiętania przez człowieka. Przykładem encji nienazwanej jest Ø czyli &#216;.

Przykłady encji
ZnakEncjaOpis
<&lt;mniejsze niż
>&gt;większe niż
&le;mniejsze równe
&ge;większe równe
&&amp;ampersand
 &nbsp;niezwijana spacja
±&pm;plus minus
&mp;minus plus
&infin;nieskończoność
×&times;mnożenie
÷&infty;dzielenie
&minus;minus
°&deg;stopnie
&cap;iloczyn zbiorów (część wspólna)
&cup;suma zbiorów

Wygląd strony a przeglądarka

Niestety, choć HTML w dość dokładny sposób umożliwia opisywanie wyglądu strony a CSS umożliwia wprowadzanie kolejnym udogodnień z tym związanych, to dużą rolę odgrywa sama przeglądarka. Dzieje się tak dlatego, że to od sposobu w jaki dana przeglądarka interpretuje kod HTML oraz CSS zależy jak Twoja strona będzie wyglądała. Mniej aktualne przeglądarki mogą nie obsługiwać niektórych znaczników HTML lub stylów CSS. Różne style CSS mogą być różnie formatowane a domyślne ustawienia formatowania zawartości strony w różnych przeglądarkach różnią się niekiedy co sprawia, że Twoja strona u kogoś korzystającego z innej przeglądarki niż Ty będzie wyglądała nieco inaczej.

Ten sam problem dotyczy różnych systemów. Linux nie dysponuje domyślnie czcionkami, które znajdują się w systemach Windows i vice versa. A przecież krój czcionki mocno wpływa na sposób odbioru strony przez czytelnika. Dobrze dobrana czcionka sprawia, że tekst czyta się przyjemnie, zaś źle dobrana czcionka zniechęca do czytania.

Mając na uwadze powyższe czynniki należy zawsze sprawdzać wygląd swojej strony na różnych przeglądarkach, albowiem istnieją takie sytuacje, że na jednej przeglądarce wszystko ładnie może się wyświetlać, zaś na drugiej wszystko brzydko się rozjeżdżać.

Strony powiązane
strony powiązane
  1. developer.mozilla.org - otwarta darmowa dokumentacja techniczna dotycząca HTML, HTML5, CSS

Komentarze