Co to jest HTML?

W prostych słowach, HTML to technologia, służąca do tworzenia stron internetowych. Nazwa to skrót od HyperText Markup Language, co po polsku oznacza hipertekstowy język znaczników. Gdyby rozbić tę nazwę na czynniki pierwsze, to składające się na nią słowa oznaczają po kolei:

• HyperText (hipertekst) – zwany jest też hiperłączem. To tekst zawierający odniesienia do innego tekstu lub strony, co pozwala za jednym kliknięciem myszy przejść do dowolnego miejsca w sieci.
• Markup (znacznik) – określany jest także jako tag. Używa się go do sterowania wyglądem strony i jej funkcjonalnościami. Za pomocą znaczników można np. zmienić kolor tła, wyboldować tekst czy wstawić grafikę.
• Language (język) – to najprostsza do zrozumienia część akronimu. Jak każdy język, HTML składa się z unikalnej składni i alfabetu.

Warto zauważyć, że HTML nie jest typowym językiem programowania, jak np. JavaScript czy Python. Nie zawiera on w porównaniu do nich logiki programowania. Nie ma typowych instrukcji warunkowych. Nie może oceniać wyrażeń ani wykonywać żadnych obliczeń. Nie obsługuje zdarzeń ani nie wykonuje zadań. Nie można nim deklarować zmiennych i pisać funkcji. W żaden sposób nie modyfikuje też ani nie manipuluje danymi. HTML nie może pobierać danych wejściowych i generować danych wyjściowych.

Zamiast tego, jak sama nazwa wskazuje, HTML jest językiem znaczników. Jego najważniejszą funkcją jest ustalenie (oznaczanie) struktury, układu i prezentacji zawartości strony internetowej (np. jej treści, nagłówków, obrazów). W połączeniu z innymi językami, takimi jak kaskadowe arkusze stylów (CSS) i JavaScript może tworzyć atrakcyjne wizualnie i interaktywne witryny.

Uniwersalność i wszechstronność HTML sprawiają, że jest to najpopularniejszy język znaczników na świecie. Większość front-endowych programistów internetowych zaczyna od nauki kodowania właśnie w HTML.

Jak to się zaczęło? Krótka historia języka HTML

Pierwsza wersja HTML została napisana w 1991 roku, ale jego historia sięga znacznie wcześniej – aż 11 lat wstecz.

Ojcem tego „wynalazku” jest Tim Berners-Lee – fizyk, informatyk i pracownik CERN (Europejskiej Organizacji Badań Jądrowych). To on w pewnym momencie swojej kariery odczuł potrzebę stworzenia czegoś, co ułatwiłoby mu codzienną pracę. Denerwowało go bowiem to, że wszystkie informacje, z których korzystał były przechowywane w różnych bazach danych i nie był w stanie zapisać ich w taki sposób, w jaki normalnie pracuje ludzki mózg – przez przypadkowe skojarzenia między różnymi koncepcjami.

Z tego powodu, w 1980 roku stworzył prototyp hipertekstowego systemu informacyjnego o nazwie „Enquire”. Był on używany głównie przez samego Tima Bernersa-Lee do pracy nad jego projektami. I chociaż nigdy nie został opublikowany, stanowił podstawę do późniejszego rozwoju koncepcji przepływu informacji za pomocą odnośników – hiperłączy.

9 lat później Berners-Lee poszedł ze swoim pomysłem nieco dalej. Dostrzegając, że problem z samodzielnymi i niepołączonymi bazami danych wpływa na produktywność wszystkich pracowników, przedłożył menedżerom swój projekt. Zaproponował w nim stworzenie rozbudowanego i bardziej zaawansowanego systemu, który wykorzystywałby hipertekst do łączenia plików na oddzielnych komputerach podłączonych do Internetu. Tym samym umożliwiłoby to fizykom dzielenie się informacjami badawczymi z dowolnego miejsca na świecie.

Wówczas nie zdobył on jednak aprobaty przełożonych. Dopiero rok później, kiedy wrócił z nową i ulepszoną propozycją, otrzymał pozwolenie na pracę nad projektem. I tak, w 1990 roku Tim Berners-Lee współpracując z kolegą po fachu – Robertem Cailliau, opracował pierwszą na świecie przeglądarkę (WorldWideWeb), zaprojektował HTML, napisał pierwszy serwer sieciowy i powiązał to wszystko z internetowym protokołem HTTP. A dokonał tego, pracując na komputerze NeXT, zaprojektowanym przez Steve’a Jobsa. W efekcie tych prac powstała pierwsza strona internetowa pod adresem: info.cern.ch.

Pierwszą specyfikację języka HTML, nazwaną „HTML Tags” (Znaczniki HTML), Berners-Lee zamieścił w Internecie w 1991 roku. 2 lata później oficjalnie opublikowana została wersja HTML 1.0. W sumie, od 1993 roku powstało 76 wersji HTML, a najnowsza z nich to HTML 5.

HTML w połączeniu z JavaScript i CSS stał się kamieniem milowym w tworzeniu stron internetowych.

Do czego służy HTML?

HTML to darmowy i open sourcowy język, który jest używany głównie do tworzenia stron internetowych. Służy do definiowania struktury i układu witryny, jej wyglądu oraz wszelkich funkcji specjalnych.

Dzięki HTML można m.in.:

• formatować dokumenty internetowe z nagłówkami, akapitami, listami, tabelami itp.;
• osadzać w nich obrazy, filmy, pliki audio i inne multimedia;
• tworzyć nawigację internetową za pomocą linków do innych stron internetowych w tej samej lub innej domenie.

Bez HTML wszystkie strony internetowe byłyby zwykłymi plikami tekstowymi i wyglądałyby tak:

Wygląd strony bez HTML

Oprócz stron internetowych, za pomocą HTML można tworzyć również formularze do zbierania danych, przetwarzania transakcji, dokonywania rezerwacji lub składania zamówień, a także pisać e-maile.

HTML a CSS i JavaScript

HTML i CSS (kaskadowe arkusze stylów) to podstawowe języki skryptów internetowych, których głównym zastosowaniem jest tworzenie stron i aplikacji internetowych. Zasadnicza różnica między nimi polega na tym, że HTML zapewnia podstawową strukturę stron internetowych, podczas gdy CSS służy do kontrolowania ich stylu i układu.

W HTML najpierw pisze się słowa, a następnie dodaje do nich tagi, dzięki którym przeglądarka rozpoznaje nagłówek strony, początek i koniec akapitu itd. Z kolei CSS określa kolor tekstu na stronie, rodzaj i rozmiar czcionki, kolory tła, obrazy itp. Definiuje on także układ witryny, czyli rozmieszczenie poszczególnych elementów na ekranie oraz mówi o tym, jak strona internetowa powinna reagować na zmianę rozmiaru lub rozciągnięcie.

Do tego duetu dołącza jeszcze jeden język – JavaScript, który odpowiada za podstawowe efekty specjalne i interakcję.

HTML zapewnia szkielet witryny, podczas gdy CSS i JavaScript dodają do niej elementy wizualne i sprawiają, że jest interaktywna.

Jak wygląda struktura HTML?

Jeśli chcesz zobaczyć, jak wygląda kod HTML na tej konkretnej stronie, a jesteś na komputerze stacjonarnym lub laptopie, kliknij prawym przyciskiem myszy w dowolnym miejscu i wybierz opcję „Wyświetl źródło strony”/ “Pokaż kod źródłowy strony”/“Zbadaj” (nazwa może się różnić w zależności od przeglądarki). Powinna ukazać Ci się wtedy gigantyczna ściana kodu. To właśnie HTML.

Jak widzisz, HTML ma postać zwykłego tekstu z odpowiednimi adnotacjami dotyczącymi jego znaczników (tagów), które składają się z atrybutów. Większość kodu HTML jest budowana przy użyciu „bloków elementów”. Są to poszczególne fragmenty całego kodu HTML, które oddzielają między sobą różne elementy na stronie. Np. jednym blokiem elementów jest treść tego artykułu, kolejnym jest menu u góry, a jeszcze innym stopka na samym dole ekranu.

Czym są znaczniki w HTML?

Znaczniki (zwane też tagami) to elementy w kodzie, które informują przeglądarkę, jak powinna wyświetlić dany fragment tekstu. Zwykle znajdują się na początku oraz na końcu każdego elementu HTML. Na przykład tag „paragraph”, pozwalający na utworzenie nowego akapitu, otwiera się używając < p >, a zamyka z < /p >. Całość prezentuje się wtedy tak:

< p > Treść akapitu < /p >

Inny prosty przykład, jak działają tagi HTML:

< b > Ten tekst powinien być pogrubiony. < /b >

W tym przypadku < b > i < /b > to znaczniki HTML, które oznaczają załączony tekst jako „pogrubiony” (wyboldowany). W efekcie, użytkownik widzi ten tekst jako:

Ten tekst powinien być pogrubiony.

Należy zauważyć, że niektóre elementy HTML, takie jak np. < br > (czyli przerwa), mają tylko jeden otwierający tag — są to tak zwane puste znaczniki.

Podstawy języka HTML – najpopularniejsze znaczniki HTML

• < body > – zawiera treść strony, która ma być widoczna dla użytkownika.
• < p > (akapit) – umieszczając znaczniki < p > i < /p > wokół tekstu, sprawisz, że tekst zacznie się w nowym wierszu.



• < img > (obraz) – osadza obraz w dokumencie. Do poprawnego renderowania wymagany jest atrybut src (source) z adresem URL.
• od < h1 > do < h6 > (nagłówki) – to znaczniki, które reprezentują różne poziomy nagłówków, gdzie h1 to najwyższy i najbardziej widoczny poziom sekcji, a h6 to nagłówek najniższego rzędu.



• < div > (kontener) – tag ten definiuje dział lub sekcję w dokumencie HTML i jest używany jako kontener dla elementów HTML. Jest on później stylizowany przy pomocy CSS lub JavaScript.
• < span > – to podstawowy i wbudowany kontener dla frazowania treści w HTML. Sam niczego nie reprezentuje. Zwykle używany jest do grupowania elementów w celu przypisania im określonego stylu.
• < a > (anchor) – inaczej kotwica lub hiperłącze. Musi posiadać atrybut href, który określa miejsce docelowe linku – może nim być inna podstrona tej samej domeny, link zewnętrzny, plik lub adres e-mail.



• < ul > (lista nieuporządkowana) – służy do grupowania elementów, np. w formie punktorów. Poszczególny element listy musi być oznaczony tagami < li > i < /li >.



• < strong > (wyróżnienie) – wskazuje tekst o dużym znaczeniu. Treść oznaczona tym tagiem zwykle w przeglądarce wyświetlana jest jako pogrubiona.



• < title > (tytuł domeny) – tekst zawarty między znacznikami stanowi tytuł strony (meta title), który wyświetla się na karcie przeglądarki i w wynikach wyszukiwania Google.
• < br > (przerwa) – przenosi tekst do kolejnego wiersza. Działa jak “enter”.

Atrybuty HTML

Tagom HTML można też przypisać atrybuty. Są one umieszczane w tagu otwierającym i przekazują więcej informacji o danym elemencie. Ich składnia wygląda następująco: nazwa=”wartość”

Np. element obrazu musi zawsze posiadać atrybut źródłowy, czyli adres URL obrazu lub ścieżkę pliku. W przeciwnym razie przeglądarka nie będzie wiedziała, jaki obraz ma wyrenderować na stronie. Oprócz tego do grafik na stronie zawsze warto dopisywać atrybut alt (tekst alternatywny), który mówi o tym, co znajduje się na obrazie. To na wypadek, gdyby obraz nie ładował się prawidłowo lub użytkownik miał problem ze wzrokiem.

Tak samo jest w przypadku znacznika “anchor”, którego używa się tworzenia hiperlinków — musi on zawierać atrybut “href” , którego wartość określa miejsce docelowe linku. Bez tego przeglądarka nie będzie wiedziała, gdzie ma odesłać użytkownika po kliknięciu.

Podstawy HTML – najpopularniejsze atrybuty HTML

• alt – tekst alternatywny dodawany do obrazu. Tłumaczy, co się na nim znajduje;
• src – source, czyli adres źródłowy dla obrazu lub innego pliku;
• href – adres URL dla hiperłącza, który mówi o tym, gdzie przekierować użytkownika po kliknięciu w link;
• class – określa klasę elementów w CSS;
• style – mówi, o tym, jaki styl CSS jest przypisany dla elementu;
• title – tytuł elementu, np. grafiki.