`, ``, `

` i ``.

Zacznijmy od podstaw. HTML to skrót od HyperText Markup Language, co w wolnym tłumaczeniu oznacza "hipertekstowy język znaczników". Kluczowe jest tutaj słowo "znaczników". HTML nie jest językiem programowania, takim jak Python czy JavaScript, który pozwala na tworzenie skomplikowanej logiki czy algorytmów. Zamiast tego, HTML służy do opisu struktury dokumentu. Wyobraź sobie, że piszesz książkę HTML to sposób na powiedzenie przeglądarce, co jest tytułem, co akapitem, co listą, a co obrazkiem. Ta cecha sprawia, że HTML jest niezwykle przystępny dla osób bez żadnego doświadczenia w programowaniu. To idealny punkt startowy do nauki tworzenia stron internetowych.

Kiedy mówimy o tworzeniu stron WWW, często pojawiają się trzy kluczowe technologie: HTML, CSS i JavaScript. Można je porównać do budowy domu. HTML to szkielet i fundament definiuje strukturę, ściany, pokoje. Bez niego nie ma domu. CSS (Cascading Style Sheets) to wystrój wnętrz i elewacja odpowiada za wygląd, kolory, czcionki, układ i styl. To dzięki niemu strona wygląda estetycznie. Natomiast JavaScript to cała interaktywność światło, które się zapala, drzwi, które się otwierają, czy inteligentne systemy. Dodaje dynamiki i reakcji na działania użytkownika. Zawsze powtarzam moim studentom, że HTML jest absolutnym fundamentem. Bez solidnej struktury, ani stylizacja, ani interaktywność nie będą miały sensu. Dlatego to od niego zaczynamy naszą naukę.

Niezbędne narzędzia do pracy z HTML

Edytor kodu

Aby pisać kod HTML, potrzebujesz edytora tekstu. Technicznie rzecz biorąc, możesz użyć nawet zwykłego Notatnika w systemie Windows, ale jest to rozwiązanie bardzo podstawowe i szybko stanie się niewygodne. Zdecydowanie polecam korzystanie z dedykowanych edytorów kodu. Oferują one funkcje, które znacznie ułatwiają pracę, takie jak kolorowanie składni (różne części kodu mają różne kolory, co poprawia czytelność), autouzupełnianie (podpowiada znaczniki i atrybuty), czy wbudowane terminale. To narzędzia, które oszczędzają mnóstwo czasu i pomagają unikać błędów.

• Visual Studio Code (VS Code): Darmowy, niezwykle popularny i rozbudowany edytor od Microsoftu, z ogromną społecznością i mnóstwem rozszerzeń. To mój osobisty faworyt.
• Atom: Darmowy i otwarty edytor rozwijany przez GitHub, znany z dużej konfigurowalności.
• Sublime Text: Płatny (z darmową wersją próbną), bardzo szybki i lekki edytor, ceniony za wydajność.

Przeglądarka internetowa

Po napisaniu kodu HTML musisz go zobaczyć! Do tego służy przeglądarka internetowa, taka jak Google Chrome, Mozilla Firefox, Microsoft Edge czy Safari. Przeglądarka interpretuje Twój kod HTML i renderuje go, czyli wyświetla stronę internetową w sposób, w jaki ją zaprojektowałeś. Jest to kluczowe narzędzie do podglądania efektów Twojej pracy w czasie rzeczywistym. Po prostu otwierasz plik HTML w przeglądarce, a ona pokazuje Ci gotową stronę.

Podstawowa struktura dokumentu HTML5

Każda strona HTML, niezależnie od jej złożoności, opiera się na podstawowej strukturze. To jak fundament, na którym budujemy resztę treści. Zapamiętaj te cztery kluczowe elementy:

1. </code>: To deklaracja typu dokumentu. Informuje przeglądarkę, że ma do czynienia z dokumentem HTML5. Zawsze umieszczamy ją na samym początku pliku.
2. : Ten znacznik jest głównym kontenerem dla całej zawartości strony. Wszystko, co znajduje się na Twojej stronie, musi być zagnieżdżone wewnątrz znacznika .
3. : Sekcja z metadanymi. Zawiera informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika, ale są ważne dla przeglądarki i wyszukiwarek.
4. : To tutaj znajduje się cała widoczna zawartość Twojej strony internetowej tekst, obrazy, linki, przyciski i wszystko inne, co użytkownik zobaczy na ekranie.

Sekcja jest niezwykle ważna, choć jej zawartość nie jest bezpośrednio wyświetlana na stronie. To tutaj umieszczamy metadane, czyli informacje o stronie. Na przykład, znacznik definiuje tytuł strony, który pojawia się w zakładce przeglądarki. Możemy tu również określić kodowanie znaków (np. , co jest standardem i zapewnia poprawne wyświetlanie polskich znaków), a także linkować do zewnętrznych arkuszy stylów CSS, które nadają stronie wygląd. Oto przykład:

Natomiast sekcja to serce Twojej strony, jeśli chodzi o widoczną zawartość. Wszystko, co chcesz, aby użytkownik zobaczył i z czym mógłby wchodzić w interakcje nagłówki, akapity, listy, obrazy, linki, formularze umieszczasz właśnie tutaj. To jest "ciało" Twojej strony, które przeglądarka renderuje i prezentuje użytkownikowi.

Tworzymy pierwszą stronę HTML: "Witaj, świecie!"

Teraz, gdy znasz podstawy, przejdźmy do praktyki. Stworzymy naszą pierwszą prostą stronę HTML. To klasyczne "Witaj, świecie!", które jest pierwszym krokiem w nauce każdego języka.

1. Otwórz edytor kodu: Uruchom Visual Studio Code (lub inny wybrany edytor).
2. Utwórz nowy plik: W edytorze wybierz "Plik" -> "Nowy plik" (lub skrót Ctrl+N / Cmd+N).
3. Wklej podstawowy kod: Wklej poniższy kod do nowego pliku.
4. Zapisz plik: Wybierz "Plik" -> "Zapisz jako..." (lub skrót Ctrl+S / Cmd+S). Nadaj plikowi nazwę, np. index.html. Pamiętaj, aby rozszerzenie było `.html`! Zapisz go w łatwo dostępnym miejscu, np. na pulpicie.

   

 
Witaj, świecie!

W tym kodzie </code> informuje przeglądarkę o wersji HTML. Znacznik oznacza główny kontener strony i deklaruje język polski. W sekcji ustawiliśmy kodowanie znaków na UTF-8 i dodaliśmy tytuł strony "Moja pierwsza strona", który pojawi się w zakładce przeglądarki. Najważniejsze jest jednak to, co w : prosty akapit

Aby zobaczyć efekt swojej pracy, wykonaj następujące kroki:

1. Znajdź plik: Otwórz folder, w którym zapisałeś plik index.html.
2. Otwórz w przeglądarce: Kliknij dwukrotnie na plik index.html. Domyślnie powinien otworzyć się w Twojej przeglądarce internetowej. Alternatywnie, możesz kliknąć prawym przyciskiem myszy na plik i wybrać "Otwórz za pomocą" -> "Twoja przeglądarka".
3. Podziwiaj: Powinieneś zobaczyć pustą stronę z napisem "Witaj, świecie!" i tytułem "Moja pierwsza strona" w zakładce przeglądarki. Gratulacje, właśnie stworzyłeś swoją pierwszą stronę internetową!

Najważniejsze, podstawowe znaczniki HTML, które musisz znać

Kiedy już masz podstawową strukturę, czas na wypełnienie jej treścią. HTML oferuje wiele znaczników do organizacji tekstu i innych elementów. Nagłówki, od

Główny tytuł strony
Podtytuł sekcji
Nagłówek wewnątrz podsekcji

Akapity tworzymy za pomocą znacznika

To jest zwykły akapit tekstu.
Ten fragment jest bardzo ważny!
A to jest akcentowany tekst.

Linki, czyli hiperłącza, są tym, co sprawia, że internet jest "siecią". Tworzymy je za pomocą znacznika (od "anchor") i atrybutu href, który określa adres docelowy linku. Możesz linkować do innych stron internetowych, do plików do pobrania, a nawet do innych sekcji w ramach tej samej strony, używając identyfikatorów (id). To podstawa nawigacji po każdej stronie WWW.

Odwiedź Google.
Zobacz sekcję drugą na tej stronie.

Obrazy to nieodłączny element większości stron. Wstawiamy je za pomocą znacznika . Jest to znacznik samo zamykający się, co oznacza, że nie potrzebuje osobnego znacznika zamykającego (np. ). Kluczowe są dwa atrybuty: src (source), który wskazuje ścieżkę do pliku obrazu, oraz alt (alternative text), który zawiera tekst alternatywny. Tekst alternatywny jest wyświetlany, gdy obraz się nie załaduje, ale przede wszystkim jest czytany przez czytniki ekranowe dla osób niewidomych i niedowidzących, a także pomaga wyszukiwarkom zrozumieć zawartość obrazka, co jest ważne dla dostępności i SEO.

Listy są świetnym sposobem na uporządkowanie informacji. HTML oferuje dwa główne typy list: nieuporządkowane (

Moja lista zakupów:
 
Chleb
 
Mleko
 
Jajka
 
Kroki do sukcesu:
 
Ucz się HTML
 
Ucz się CSS
 
Ucz się JavaScript

To jest ważny fragment tekstu.
 
To jest ważny fragment tekstu.