Pomyślałem, że dobrze będzie zebrać do kupy podstawowe informacje na temat HTML. W jednym miejscu, jako mini ściągawka, gdyby kiedyś, w razie kompletnego zaćmienia, trzeba było do tego wrócić. Nie mam zamiaru tworzyć tutaj nowego podręcznika “for dummies”, a wszystkie informacje zaczerpnięte są z własnego doświadczenia i innych źródeł. Oczywiście postaram się przedstawić wszystko w formie nieco uproszczonej i raczej nie ma co liczyć, że po przeczytaniu tych krótkich tekstów, staniemy się nagle html-ninja.
Poniższy opis dotyczy HTML5, gdyż jest to w tej chwili najczęściej wykorzystywana i najbardziej kompatybilna z przeglądarkami internetowymi wersja języka. Różnica między piątką, a chociażby XHTML, czyli wcześniejszą edycją, to m.in. mniej rygorystyczna składnia. Mniej wagi przywiązuje np. do wymagań dotyczących zamykania znaczników, ale generalnie można stwierdzić, że nowsze wersje języka różnią się tylko szczegółami. Dlatego według mnie można spokojnie rozpoczynać naukę od HTML5 właśnie.
Różnicę w porównaniu z innymi wersjami widać już na samym początku, gdzie zamiast dość długiego kodu mamy tylko:
<!DOCTYPE html>
Znacznik ten służy właśnie do zadeklarowania typu dokumentu i należy go zawsze umieszczać jako pierwszy element. Dzięki niemu, przeglądarka otrzyma informację dotyczącą wersji HTML, którą używa wczytywana strona. Należy zwrócić uwagę na to, aby “DOCTYPE” pisane było wielkimi literami oraz, że nie ma tutaj znacznika zamykającego…
Czy przypadkiem się nie rozpędziłem i zapomniałem wspomnieć nieco więcej o samych znacznikach (lub tagach, jak kto woli)? Najogólniej można powiedzieć, że są to są to specjalne elementy tekstu umieszczone w nawiasach ostrych, np.: <h1> i pozwalające definiować wygląd strony. Nie będą widoczne na naszej witrynie internetowej, ale wpłynął m.in. na jej kolor, font, rozmieszczenie obrazków i i innych elementów. I tutaj pojawia się kolejna ciekawostka. Edytor wpisów w WordPressie pozwala mi na swobodne pisanie tekstu, jednakże w czystym HTML to <h1> musiałoby być zapisane za pomocą znaków specjalnych < oraz >. Wyglądałoby to dokładnie tak:
<h1>
Niektórym z Was może się nasunąć pytanie, a co jeśli chciał(a)bym użyć &? Tzw. ampersand ma również swój własny zapis:
&
Znaki specjalne to nie tylko to, co widzimy na klawiaturze, są to również różnego rodzaju dodatkowe symbole, np. litery alfabetu greckiego i wiele innych. Oczywiście nie każdy z nas jest Rainmanem i nie ma konieczności zapamiętania wszystkich znaków. Dokładny ich spis dostępny jest np. tutaj: http://dev.w3.org/html5/html-author/charref
Istnieją znaczniki otwierające (np.: <h1>) oraz zamykające (np.: </h1>). Różnica między nimi to tylko ten tzw. “forward slash”, a do poprawnego działania należy zachować ich kolejność. Tekst wpisany pomiędzy znacznikami będzie sformatowany w sposób zależny od tego, co wywołuje dany znacznik. W przypadku <h1> będzie to nagłówek pierwszego poziomu. A teraz wróćmy na chwilę do naszego <!DOCTYPE html>. Między innymi tego typu tag nie musi posiadać znacznika zamykającego. O podstawowych funkcjach znaczników nie omieszkam się wspomnieć następnym razem, gdyż ilość informacji na pierwszą lekcję wydaje mi się wystarczająca.
