Pierwsze kroki w HTML: jak zbudować prostą stronę tekstową

Wyobraź sobie, że budujesz dom. Zanim pomalujesz ściany na niebiesko i postawisz meble, musisz postawić fundamenty i ściany. W świecie stron internetowych tymi "ścianami" jest język HTML. HTML nie służy do robienia kolorowych i ładnych stron – on służy do mówienia przeglądarce (np. Chrome czy Firefox), co jest tekstem, co nagłówkiem, a co zdjęciem.

W tym poradniku nauczysz się, jak stworzyć najprostszą możliwą strukturę artykułu.

1. Wielka trójka: szkielet każdej strony

Każda strona internetowa, niezależnie od tego, jak jest skomplikowana, musi mieć trzy podstawowe części. Bez nich przeglądarka może nie zrozumieć, co ma zrobić.

  • <html> ... </html> – To jest "opakowanie" dla całej Twojej strony. Wszystko, co napiszesz, musi znajdować się pomiędzy tymi dwoma znacznikami.
  • <head> ... </head> – To jest "głowa" strony. Tutaj wpisujemy informacje, których nie widać bezpośrednio na stronie, np. tytuł, który pojawia się na karcie w przeglądarce.
  • <body> ... </body> – To jest "ciało" strony. Wszystko, co chcesz, aby zobaczył czytelnik (tekst, nagłówki, zdjęcia), musi znaleźć się tutaj.

2. Tekst: nagłówki i akapity

Kiedy już masz swoje "ciało" (<body>), musisz wypełnić je treścią. W HTML tekst nie jest po prostu "wpisany" – musi być zamknięty w odpowiednich znacznikach.

Nagłówki (hierarchia ważności)

Nagłówki służą do oddzielania tematów. W HTML mamy ich sześć poziomów, od najważniejszego do najmniejszego:

  • <h1>Nagłówek główny</h1> – To jest król strony. Powinien być tylko jeden na cały artykuł. To on mówi, o czym jest strona.
  • <h2>Podtytuł</h2> – Używasz go, gdy chcesz podzielić artykuł na większe części.
  • <h3>Mniejszy podtytuł</h3> – Używasz go, jeśli wewnątrz części z <h2> chcesz zrobić jeszcze mniejszy podział.

Zasada: Im mniejsza liczba w nawiasie, tym ważniejszy i większy nagłówek.

Akapity (zwykły tekst)

Cały Twój tekst, opisy, opowieści – to wszystko wrzucamy do znacznika <p> (skrót od paragraph).

  • <p>To jest pierwszy akapit mojego tekstu.</p>
  • <p>To jest drugi akapit. Dzięki znacznikowi p, przeglądarka sama zrobi odstęp między nimi.</p>

3. Obrazki: jak dodać zdjęcie?

Dodawanie zdjęcia różni się od tekstu. Tekst "otwierasz" i "zamykasz" (np. <p> i </p>), ale zdjęcie to pojedynczy element, który po prostu "wstawiasz".

Do wstawienia zdjęcia używamy znacznika <img>. Musimy mu jednak podać dwie bardzo ważne informacje:

  1. src="..." (source) – tutaj wpisujesz nazwę pliku ze zdjęciem (np. zdjecie.jpg). To mówi przeglądarce, skąd ma wziąć obrazek.
  2. alt="..." (alternative text) – to krótki opis zdjęcia. Jest on bardzo ważny, bo jeśli zdjęcie się nie załaduje, użytkownik przeczyta ten tekst i będzie wiedział, co tam powinno być.

Przykład:
<img alt="Mały brązowy piesek biegnący po trawie">

4. Pierwszy projekt (gotowiec do skopiowania)

Oto jak wygląda gotowy, prosty artykuł. Skopiuj ten kod do swojego edytora, aby zobaczyć, jak to działa. To jest Twój "szablon".

<html>
  <head>
    <title>Mój pierwszy artykuł</title>
  </head>
  <body>

    <h1>Dlaczego warto jeść jabłka?</h1>

    <p>Jabłka to jedne z najzdrowszych owoców, jakie możemy znaleźć w naturze.</p>

    <h2>Właściwości zdrowotne</h2>
    <p>Są bogate w błonnik oraz witaminy, które pomagają nam czuć się dobrze każdego dnia.</p>

    <img src="/apple.jpg" alt="Czerwone, świeże jabłko na stole">

    <h2>Podsumowanie</h2>
    <p>Pamiętaj, aby jeść przynajmniej jedno jabłko dziennie!</p>

  </body>
</html>

 

Lista kontrolna:

  1. Czy  na początku i na końcu kodu jest jeden znacznik <html> ?
  2.  Czy cała treść znajduje się między <body> a </body>?
  3.  Czy każdy nagłówek ma swój własny znacznik (<h1>, <h2> itd.)?
  4.  Czy każdy tekst jest zamknięty w <p>?
  5.  Czy w obrazku <img> wpisano zarówno src, jak i alt?