jakubszpil
Szukaj

Wprowadzenie do HTML

📆
/
⌛10 minut czytania
HTML

Witaj w świecie tworzenia stron internetowych! 👋 Jeśli kiedykolwiek zastanawiałeś/aś się, jak powstają strony, które codziennie przeglądasz, ten kurs jest dla Ciebie. Nauczysz się podstaw HTML, języka, który jest fundamentem każdej witryny. Nie musisz mieć żadnego wcześniejszego doświadczenia – wszystko wytłumaczymy krok po kroku! Gotowy/a, aby zacząć tworzyć swoje pierwsze strony? Zaczynamy! 🚀

>>Spis treści

  1. Co to jest HTML?
  2. Jak działa HTML? Znaczniki i elementy
  3. Podstawowa struktura dokumentu HTML
  4. Podstawowe elementy HTML – Twój zestaw narzędzi
  5. Formularze: Zbieranie danych od użytkowników
  6. Zadania do wykonania: Sprawdź swoją wiedzę!

>>Co to jest HTML?

HTML to skrót od HyperText Markup Language, czyli Hypertekstowy Język Znaczników. Co to oznacza w praktyce? To język, który służy do tworzenia szkieletu i struktury każdej strony internetowej. Pomyśl o nim jak o planie architektonicznym domu – określa, gdzie będą ściany, okna, drzwi i podłogi, zanim jeszcze zajmiesz się dekoracją. 🏠

HTML nie jest językiem programowania (nie wykonuje skomplikowanych operacji ani obliczeń), ale językiem znaczników. Oznacza to, że używa specjalnych kodów, zwanych znacznikami (ang. tags), aby opisać różne części dokumentu. Dzięki nim przeglądarka internetowa (taka jak Chrome, Firefox czy Safari) wie, co jest nagłówkiem, co akapitem, gdzie znajduje się obrazek, a gdzie link. Bez HTML-a strony internetowe byłyby po prostu blokiem niezrozumiałego tekstu.

>>Jak działa HTML? Znaczniki i elementy

HTML działa na zasadzie elementów, które są tworzone za pomocą znaczników.

Najprościej mówiąc, znacznik to słowo kluczowe ujęte w nawiasy kątowe, np. <p> lub <h1>.

Większość znaczników występuje w parach:

Pomiędzy tymi dwoma znacznikami umieszczamy zawartość, którą chcemy oznaczyć. Całość – znacznik otwierający, zawartość i znacznik zamykający – tworzy element HTML.

Przykład:

<p>To jest mój pierwszy akapit!</p>

Tutaj:

Są też znaczniki, które nie potrzebują znacznika zamykającego, ponieważ nie zawierają żadnej zawartości między znacznikami. Nazywamy je znacznikami pustymi lub samozamykającymi się. Przykładem jest znacznik obrazka <img> lub przejścia do nowej linii <br>.

>>Podstawowa struktura dokumentu HTML

Każdy plik HTML powinien mieć podstawową, określoną strukturę, która informuje przeglądarkę, jak ma interpretować i wyświetlać zawartość. To jak szkielet, na którym zbudujemy całą resztę. 💀

Oto standardowy szablon, który zawsze będzie punktem wyjścia:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tytuł mojej wspaniałej strony</title>
  </head>
  <body>
    <h1>Witaj, świecie HTML!</h1>
    <p>
      To jest moja pierwsza prawdziwa strona internetowa. Jestem
      podekscytowany/a!
    </p>
  </body>
</html>

>>>Wyjaśnienie struktury krok po kroku

Rozbierzmy ten kod na części, aby dokładnie zrozumieć, co oznacza każdy element:

>>Podstawowe elementy HTML – Twój zestaw narzędzi

Teraz, gdy znasz podstawową strukturę, przejdźmy do konkretnych elementów, których będziesz używać najczęściej do tworzenia treści. To jak Twoje klocki LEGO do budowania strony! 🧱

>>>Nagłówki: Od najważniejszych do najmniej ważnych

Nagłówki (<h1> do <h6>) służą do definiowania tytułów i podtytułów na stronie. Są kluczowe dla struktury treści i pomagają użytkownikom (i wyszukiwarkom) zrozumieć hierarchię informacji. <h1> to najważniejszy nagłówek, a <h6> najmniej ważny. Używaj ich logicznie, jak w książce: <h1> dla tytułu rozdziału, <h2> dla podrozdziału itd. 📚

<h1>To jest główny tytuł strony (najważniejszy)</h1>
<h2>To jest podtytuł drugiego poziomu</h2>
<h3>To jest podtytuł trzeciego poziomu</h3>
<h4>Podtytuł czwartego poziomu</h4>
<h5>Podtytuł piątego poziomu</h5>
<h6>Podtytuł szóstego poziomu (najmniej ważny)</h6>

>>>Akapity: Tworzenie bloków tekstu

Akapity tekstu oznacza się elementem <p>. Służą one do grupowania zwykłego tekstu. Każdy akapit zaczyna się w nowej linii i ma pewne marginesy, które oddzielają go od innych elementów.

<p>
  To jest pierwszy akapit mojej strony. Tutaj mogę pisać o czym tylko zechcę.
</p>
<p>
  A to jest drugi akapit. Widzisz, jak przeglądarka automatycznie dodaje odstęp
  między nimi?
</p>

>>>Linki: Łączenie stron ze sobą

Linki (<a>, od ang. anchor) to serce internetu! Pozwalają użytkownikom nawigować między stronami internetowymi. Aby stworzyć link, użyj znacznika <a> i atrybutu href (Hypertext Reference), który wskazuje adres docelowy.

<a href="https://www.example.com"
  >Kliknij tutaj, aby przejść do strony Example.com</a
>
<p>
  Odwiedź również <a href="https://www.google.com" target="_blank">Google</a>,
  aby szukać informacji (otworzy się w nowej karcie).
</p>

>>>Obrazy: Dodawanie grafiki do strony

Element <img> służy do wstawiania obrazów na stronę. Jest to znacznik pusty, co oznacza, że nie ma znacznika zamykającego, ponieważ obrazek "nie zawiera" tekstu między znacznikami, a jedynie odwołuje się do pliku graficznego.

Wymaga dwóch kluczowych atrybutów:

<img
  src="https://via.placeholder.com/300x200"
  alt="Przykładowy obrazek prostokątny o wymiarach 300x200 pikseli"
/>
<img
  src="moj-pies.jpg"
  alt="Zdjęcie mojego psa rasy golden retriever leżącego na trawie"
/>

>>>Listy: Uporządkowanie informacji

Listy to świetny sposób na uporządkowanie informacji na stronie. HTML oferuje dwa główne typy list:

  1. Listy nieuporządkowane (<ul> - unordered list): Elementy listy są oznaczane punktami (kropkami, kwadratami itp.). Idealne do wyliczania rzeczy, gdzie kolejność nie ma znaczenia.

    <h3>Moje ulubione owoce:</h3>
<ul>
  <li>Jabłka</li>
  <li>Banany</li>
  <li>Pomarańcze</li>
</ul>

  2. Listy uporządkowane (<ol> - ordered list): Elementy listy są numerowane (1, 2, 3...). Idealne do kroków, instrukcji, czy rankingu, gdzie kolejność jest ważna.

    <h3>Kroki do ugotowania kawy:</h3>
<ol>
  <li>Zagotuj wodę.</li>
  <li>Wsyp kawę do kubka.</li>
  <li>Zalej kawę gorącą wodą.</li>
  <li>Dodaj cukier i mleko (opcjonalnie).</li>
</ol>

W obu przypadkach, każdy pojedynczy element listy jest umieszczany w znaczniku <li> (list item).

>>Formularze: Zbieranie danych od użytkowników

Formularze to interaktywne elementy, które pozwalają użytkownikom wprowadzać dane, takie jak imię, adres e-mail, hasło, czy wybierać opcje. Są podstawą każdego interaktywnego serwisu internetowego – od logowania, przez kontakt, po koszyki zakupowe. 🛒

Głównym elementem jest znacznik <form>, który zawiera wszystkie pola formularza.

<form action="/submit-data" method="post">
  <label for="username">Nazwa użytkownika:</label><br />
  <input
    type="text"
    id="username"
    name="username"
    placeholder="Wpisz swoje imię"
  /><br /><br />

  <label for="email">Adres e-mail:</label><br />
  <input type="email" id="email" name="email" required /><br /><br />

  <p>Wybierz swój ulubiony kolor:</p>
  <input type="radio" id="red" name="fav_color" value="red" />
  <label for="red">Czerwony</label><br />
  <input type="radio" id="blue" name="fav_color" value="blue" />
  <label for="blue">Niebieski</label><br /><br />

  <input type="checkbox" id="newsletter" name="newsletter" value="yes" />
  <label for="newsletter">Zapisz się do newslettera</label><br /><br />

  <input type="submit" value="Wyślij formularz" />
</form>

>>>Elementy formularza: Pola tekstowe, przyciski i inne

>>Zadania do wykonania: Sprawdź swoją wiedzę!

Czas na praktykę! Wykonaj poniższe zadania, aby utrwalić zdobytą wiedzę. Po każdym zadaniu możesz rozwinąć sekcję Pokaż rozwiązanie, aby sprawdzić swój kod. Pamiętaj, że nauka przez działanie jest najskuteczniejsza! 💪

>>>Zadanie 1: Twoja pierwsza strona

Utwórz nowy plik HTML (np. moja_strona.html) i dodaj do niego:

Pokaż rozwiązanie 
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Moja wspaniała strona o HTML</title>
  </head>
  <body>
    <h1>Witaj w świecie HTML!</h1>
    <p>
      Właśnie uczę się podstaw języka HTML, który jest fundamentem każdej strony
      internetowej. Jest to naprawdę fascynujące!
    </p>
    <p>
      Możesz
      <a href="https://www.google.com" target="_blank">odwiedzić Google</a>, aby
      znaleźć więcej informacji.
    </p>
  </body>
</html>

>>>Zadanie 2: Strona z obrazkiem

Stwórz nową stronę HTML o nazwie obrazki.html, która zawiera:

Pokaż rozwiązanie 
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Galeria obrazków</title>
  </head>
  <body>
    <h2>Galeria obrazków</h2>
    <img
      src="https://picsum.photos/400/300"
      alt="Losowy obrazek przedstawiający krajobraz lub architekturę"
    />
    <p>To jest przykładowy obrazek pobrany z serwisu Picsum Photos.</p>
  </body>
</html>

>>>Zadanie 3: Listy smaków i kroków

Utwórz plik listy.html, w którym znajdą się:

Pokaż rozwiązanie 
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Listy w HTML</title>
  </head>
  <body>
    <h1>Moje ulubione rzeczy</h1>
    <h2>Ulubione kolory:</h2>
    <ul>
      <li>Niebieski</li>
      <li>Zielony</li>
      <li>Czerwony</li>
    </ul>
    <h2>Jak zrobić kanapkę:</h2>
    <ol>
      <li>Weź dwie kromki chleba.</li>
      <li>Posmaruj jedną kromkę masłem lub innym smarowidłem.</li>
      <li>Dodaj ulubione składniki (ser, szynka, warzywa).</li>
      <li>Przykryj drugą kromką chleba.</li>
    </ol>
  </body>
</html>

>>>Zadanie 4: Prosty formularz

Stwórz plik formularz.html, w którym umieścisz prosty formularz kontaktowy. Formularz powinien zawierać:

Pamiętaj o użyciu etykiet <label> dla każdego pola i nadaniu odpowiednich id oraz name.

Pokaż rozwiązanie 
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mój formularz</title>
  </head>
  <body>
    <h2>Formularz kontaktowy</h2>
    <form action="/submit-contact" method="post">
      <label for="full_name">Imię i nazwisko:</label><br />
      <input
        type="text"
        id="full_name"
        name="full_name"
        placeholder="Jan Kowalski"
      /><br /><br />

      <label for="email_contact">Adres e-mail:</label><br />
      <input
        type="email"
        id="email_contact"
        name="email_contact"
        required
        placeholder="twoj.email@example.com"
      /><br /><br />

      <input
        type="checkbox"
        id="newsletter_consent"
        name="newsletter_consent"
        value="yes"
      />
      <label for="newsletter_consent"
        >Zgadzam się na otrzymywanie newslettera</label
      ><br /><br />

      <input type="submit" value="Wyślij wiadomość" />
    </form>
  </body>
</html>

To koniec Twojej pierwszej lekcji HTML! 🎉 Masz teraz solidne podstawy, aby zacząć budować swoje własne strony internetowe. Pamiętaj, że praktyka czyni mistrza – im więcej będziesz kodować, tym lepiej zrozumiesz ten język.

Co chciałbyś/chciałabyś poznać dalej? Może stylowanie stron za pomocą CSS, albo interaktywność dzięki JavaScript? Daj znać! 😊

Quiz: Podstawy HTML

Pytanie 1 z 5

Co oznacza skrót HTML?

Widzisz jakiś błąd, bądź literówkę? Chcesz coś poprawić?✏️ Przejdź do edycji tego pliku