Czym jest HTML (Hypertext Markup Language) ?

Jest to język używany do tworzenia struktury strony i jej zawartości. W głównej mierze składa się ze znaczników z atrybutami.

Po co nam HTML ?

Żeby przeglądarka internetowa (Chrome, FireFox, Safari, Edge…) poprawnie wyświetliła stronę nawet na tej której właśnie jesteś czyli http://programistawkwadrans.pl musi być napisana w języku HTML. Jest to najbardziej popularny język znaczników który jest wspierany przez wszystkie popularne przeglądarki internetowe.

Zaczynamy

Jeśli nie masz zainstalowanego edytora tekstu VS Code zobacz tutaj: Link

Tworzymy nasz plik w którym będziemy pisać naszą pierwszą stronę. W tym celu otwórzmy edytor VS Code i wybierzmy z menu na górze edytora File -> New File

Zapiszmy nasz plik poprzez wybranie w menu górnym File -> Save lub na macbook-u  skrót Command + S  lub na winodowsie CTRL + S. Otworzy nam się nowe okienko z wyborem gdzie nasz plik chcemy zapisać. Można wybrać dowolny katalog w moim wypadku będzie to Biurko i utworzony wcześniej folder „HTML – hello world”. Nazwa pliku może być dowolna ale przyjęło się, że główną stronę nazywa się index z rozszerzeniem html czyli index.html. 

Poniżej zobaczysz kod naszej pierwszej strony. Nie przejmuj się na razie co on oznacza, będziemy linijka po linijce analizować i tłumaczyć co oznacz. Cały kod HTML został wyróżniony niebieskim kolorem.

Wpisz w naszym edytorze:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Hello world
    </body>
</html>

Otwórz plik w Twojej przeglądarce internetowej np (chrome, Firefox, Safari, Edge, opera). Po otwarciu pliku naszym oczą pokaże się nasza pierwsza strona:)

Przeanalizujmy teraz nasz kod:

<!DOCTYPE html>:

Pierwszą linijką kodu jaką napisaliśmy, jest deklaracja dokumentu <!DOCTYPE html>. Deklaracja musi być pierwszą rzeczą w naszym dokumencie HTML. Musi znajdować się przed znacznikiem <html>. Deklaracja nie jest znacznikiem HTML jest to po prostu instrukcja dla przeglądarki internetowej dzięki której wie w jakiej wersji HTML napisana jest nasza strona. Taki zapis oznacza, że używamy HTML-a w wersji 5 (HTML5).

Zawsze dodawaj deklarację <! DOCTYPE> do dokumentów HTML, aby przeglądarka wiedziała, jakiego typu dokumentu oczekiwać.

<html> – znacznik otwarcia  </html> – znacznik zamknięcia: 

Deklarujemy, że pomiędzy tymi znacznikami będziemy używali język html.

W liniach 2 (<html> – znacznik otwarcia)  oraz 8 (</html> – znacznik zamknięcia) deklarujemy, że pomiędzy tymi znacznikami będziemy używali język html.

<head> i </head>:

Następnie w lini 3 (<head> – znacznik otwierający) oraz 4 (</head> – znacznik zamykający) – między tymi znacznikami będziemy dodawali takie elementy jak tytuł, autora, język(kodowane) w jakim strona jest napisana (polski, angielski…), importowane czcionki, skrypty itp. W dalszych częściach kursu będziemy wykorzystywali tą sekcję.

<body> i </body>:

Następnie w lini 5 (<body> – znacznik otwierający) oraz 7 (</body> – znacznik zamykający) – Wszystko pomiędzy tymi znacznikami powinno zostać wyświetlone przez naszą przeglądarkę. Dla tego wpisaliśmy tam nasz tekst „Hello world”, który został pokazany po otwarciu pliku przez naszą przeglądarkę. 

I tak oto stworzyliśmy naszą pierwszą stronę internetową 🙂

W następnej lekcji zaznajomimy się bliżej ze znacznikami: budowa, rodzaje.