Każdy, kto myśli o rozpoczęciu kariery jako programista front-end, musi dobrze go poznać, a nawet polubić. HTML to podstawowy język, służący do tworzenia stron www. Dziś korzysta się z niego również, by programować appki na smartfony i desktopowe aplikacje. Ucz się HTML!
HTML to skrót od nazwy Hypertext Markup Language – czyli hipertekstowy język znaczników. Język HTML powstał w 1993 roku. Obecnie w użytku jest HTML 5, czyli piąta wersja tego języka programowania.
HTML to język opisujący strukturę strony internetowej. Ponieważ określa tylko strukturę, a nie wygląd strony, to jest swoistym „szkieletem” strony. Co mamy na myśli? Otóż sam HTML nie wystarczy nam, by zbudować funkcjonalną i estetyczną stronę www.
Potrzebujemy użyć:
- HTML – określa, gdzie na stronie znajduje się menu, nagłówek, stopka, galeria itp.,
- CSS – określa ich szerokości, wysokości, kolory strony, fonty, marginesy, efekty graficzne, odpowiada za responsywność strony.
- JavaScript – odpowiada za funkcjonalności strony.
Dowiedz się więcej: artykuł Java Script: co to jest?
Język programowania HTML kiedyś służył tylko do tworzenia stron internetowych. Dziś nie jest to takie oczywiste. Kiedyś osobno pisało się stronę internetową, aplikację desktopową i aplikację na telefon komórkowy. Potrzebne były do tego trzy zespoły programistów – każdy z nich robił de facto tę samą pracę, tyle że w swojej specyfikacji. Ponieważ czas to pieniądz, a trzy teamy to potrójne koszty, trzeba było coś z tym zrobić. Wymyślono, że można napisać stronę HTMLową, a następnie osadzić ją jako program i aplikację na telefon. Jest to możliwe dzięki zastosowaniu Java Script. Zewnętrzne programy emulują kod napisany w HTML w taki sposób, by wyglądał on jak natywna aplikacja, napisana na iPhone lub Androida. Zwykły użytkownik nawet nie zauważy różnicy i nie domyśli się, że była ona tworzona w HTMLu. Pozwala to znacznie obniżyć koszty tworzenia aplikacji mobilnych.
Popularne znaczniki w HTML
Jak już wiecie, HTML jest językiem znaczników. Znacznik (inaczej zwane tagami) to konkretny znak lub słowo kluczowe, otoczony nawiasami ostrymi. W kodzie od razu zauważycie komendy ujęte w ostre nawiasy, podwójne lub pojedyncze. Znaczniki prawie zawsze wystepują parami, mówimy wówczas o znacznikach podwójnych.
Przykład podwójnego znacznika (otwierający i zamykający):
<a href=”> </a><b></b><p> </p><H1></H1>
Przykład pojedynczego znacznika:
<br /><img><hr>
Każdy znacznik może mieć swoje atrybuty(np. href, alt) – są to cechy opisujące każdy taki znacznik.
Jak tworzyć strony w HTML?
Aby móc zacząć tworzyć strony w HTML, możemy skorzystać nawet z notatnika. Najlepiej jednak uczyć się pracy z HTML, korzystając z jednego z dostępnych na rynku edytorów. Który wybrać? To kwestia gustu. Nasi studenci korzystają z edytorów Atom albo Visual Studio Code. Dlaczego najłatwiej pisać kod w edytorze? Otóż dlatego, że każdy dobry edytor HTML zapewni nam:
Kolorowanie składni – oznacza to, że jeśli wpiszemy poprawny znacznik, jego składnia przyjmie określony kolor. Dzięki temu od razu zobaczysz wszystkie błędy – najczęściej proste „literówki”. Jest to chyba najważniejsza zaleta stosowania edytorów HTML. Dlatego właśnie nie poleca się używania notatnika czy zwykłych edytorów tekstu do tworzenia stron www.
Automatyczne zamykanie znaczników – polega na automatycznym dopisaniu przez program odpowiedniego znacznika zamykającego, zaraz po tym jak wpiszemy znacznik otwierający. Bardzo usprawnia to pracę, a dodatkowo nie zapomnimy o zamykaniu znaczników, ponieważ program robi to automatycznie za nas.
Generatory (lub inaczej kreatory – ang. wizards) pomagają przy tworzeniu różnorodnych znaczników (poprzez specjalne okna dialogowe).
Podgląd efektów – kodując w edytorze, możemy co chwilę sprawdzać, jak zmienia się wygląd tworzonej przez nas strony. To kolejne ułatwienie, jakie dają nam edytory.
Najprostsza strona w HTML w edytorze wyglądać będzie tak:
<html> <head> <title>Tytuł strony</title> </head> <body>Treść strony</body> </html>
Jak widać powyżej, każda strona w HTML powinna posiadać dwie części – head i body. Head to nagłówek, znajduje się w nim informacja o tytule strony (czyli to, co zobaczymy na zakładce przeglądarki), kodowaniu strony (w jakim języku została napisana), co ta strona zawiera (metadane, informacje dla botów wyszukujących). Body to miejsce na zawartość strony, czyli informacje, co się na tej stronie znajduje – nagłówki, akapity, menu, listy, odnośniki, zdjęcia.
W edytorze HTML, oprócz samej struktury strony, możemy też umieścić komendy i odnośniki do plików CSS. Kaskadowe arkusze stylów (CSS) opisują wygląd strony.
Zasady składni
Język HTML składa się z kilku kluczowych komponentów:
- znaczników (i ich atrybutów),
- typów danych,
- referencji znakowych,
- odwołań w postaci encji,
- deklaracji typu dokumentu.
Znaczniki opisaliśmy już powyżej. Są to inaczej tagi, które umożliwiają nam sterowanie wyglądem strony. Aby zapisać znacznik w HTML, trzeba ująć tag w ostre nawiasy. Niektórym znacznikom możemy nadawać atrybuty. Dzięki atrybutom można określić np. href, id, style, type, value, width, height itp. Do składni HTML wchodzi także ponad 250 referencji znakowych i odwołań w postaci encji. To oczywiście sporo, ale pełna dokumentacja i ich spis dostępne są w każdym momencie w Internecie. Każdy dokument powinien rozpoczynać się deklaracją typu dokumentu (DOCTYPE), co służy poprawnej walidacji utworzonej strony a także pozwoli nam uniknąć działania przeglądarek w trybie quirks.
Podsumowanie
Język programowania HTML to opisowy język znaczników, wykorzystywany przy tworzeniu stron Internetowych. Dla wielu osób jest to pierwszy język, z jakim zetknęli się w życiu, próbując stworzyć w Internecie swoją wizytówkę, stronę czy bloga. W sieci dostępnych jest cała masa poradników, samouczków i kursów HTML. Pojawia się także w programie nauczania na naszym kursie programowania, ponieważ jest przydatną umiejętnością dla każdego wszechstronnego programisty.