`: Dlaczego ta linijka jest tak ważna?

Na samym początku każdego pliku HTML, który tworzysz, powinna znaleźć się jedna, bardzo ważna linijka: ``. Ta deklaracja informuje przeglądarkę internetową, że masz do czynienia z dokumentem napisanym w najnowszej wersji języka HTML, czyli HTML5. Jest to absolutnie kluczowe, ponieważ przeglądarka na tej podstawie wie, jak poprawnie zinterpretować i wyświetlić resztę kodu. Bez niej strona może być renderowana w trybie "kompatybilności wstecznej", co często prowadzi do nieoczekiwanych błędów w wyglądzie.

Głowa i ciało strony: Rola sekcji `` oraz ``

Po deklaracji `DOCTYPE` cały dokument HTML jest zazwyczaj umieszczany wewnątrz głównego znacznika ``. Ten z kolei dzieli się na dwie zasadnicze sekcje: `

` (głowa) i `` (ciało). Sekcja `` zawiera informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika, ale są ważne dla przeglądarki i wyszukiwarek. Tutaj umieszczamy metadane, tytuł strony, linki do arkuszy stylów CSS czy skryptów JavaScript. Z kolei sekcja `` to serce Twojej strony zawiera całą widoczną treść: tekst, obrazy, linki, filmy i wszystko, co użytkownik faktycznie widzi i z czym może wchodzić w interakcję.

Tytuł na karcie przeglądarki i polskie znaki: Pierwsze kluczowe znaczniki w sekcji ``

Wewnątrz sekcji `

` znajdują się dwa bardzo ważne znaczniki, które powinieneś znać od razu. Pierwszym jest `

Zaczynamy kodować! Jak stworzyć i zapisać swój pierwszy plik. html?

Teraz, gdy już znasz podstawową strukturę, czas przejść do praktyki. Stworzenie pliku z kodem HTML jest proste jak budowa z klocków.

Tworzenie pliku w Notatniku lub Visual Studio Code – przewodnik krok po kroku

Oto jak możesz to zrobić:

1. Otwórz swój edytor tekstu: Uruchom Notatnik, TextEdit, Visual Studio Code lub inny wybrany przez Ciebie edytor.
2. Wklej podstawową strukturę: Skopiuj i wklej do edytora kod, który poznałeś w poprzedniej sekcji:

   
   
   
     
   
    
   Witaj na mojej stronie!
    
   To jest mój pierwszy akapit.
   
   
   

3. Dodaj trochę treści: Jak widzisz, dodałem już prosty nagłówek `

   ` i akapit `

   `, abyś od razu zobaczył efekt. Możesz śmiało dodać więcej tekstu lub spróbować innych znaczników, o których zaraz opowiem.

Magia rozszerzenia. html: Jak sprawić, by komputer rozpoznał Twoją stronę?

Kiedy już wpiszesz swój kod, musisz go zapisać. I tu pojawia się kluczowy moment: sposób zapisu pliku. Aby przeglądarka internetowa mogła poprawnie zinterpretować Twój plik jako stronę internetową, musisz nadać mu odpowiednie rozszerzenie. Zapisz plik jako `index.html` lub dowolną inną nazwę zakończoną rozszerzeniem .html (np. moja_strona.html). Rozszerzenie .html (lub .htm) jest sygnałem dla systemu operacyjnego i przeglądarki, że jest to dokument hipertekstowy, który należy przetworzyć i wyświetlić jako stronę WWW. Jeśli zapiszesz plik jako zwykły `.txt`, przeglądarka otworzy go jako plik tekstowy, pokazując Ci surowy kod, a nie jego wizualną reprezentację.

Jak nadać treść Twojej stronie? Niezbędne znaczniki HTML, które musisz poznać

Struktura to jedno, ale to treść sprawia, że strona żyje. HTML oferuje bogactwo znaczników, które pozwalają Ci organizować i prezentować informacje w sposób zrozumiały dla użytkowników i wyszukiwarek. Zacznijmy od absolutnych podstaw.

Hierarchia jest kluczem: Jak używać nagłówków od `` do ``?

Nagłówki służą do tworzenia hierarchii treści na Twojej stronie. Wyobraź sobie je jako tytuły rozdziałów i podrozdziałów w książce. Znacznik `

` jest najważniejszym nagłówkiem, zarezerwowanym zazwyczaj dla głównego tytułu strony. Następnie mamy `

`, który jest podtytułem dla sekcji, `` dla podsekcji i tak dalej, aż do ``, który jest najmniej ważnym nagłówkiem. Używanie nagłówków w odpowiedniej kolejności jest nie tylko dobre dla czytelności, ale także bardzo ważne dla wyszukiwarek internetowych, które używają ich do zrozumienia struktury i tematyki Twojej strony.

Oto przykład:

Główny tytuł mojej strony internetowej
Sekcja 1: Wprowadzenie
Tutaj znajduje się tekst wprowadzający do sekcji.
Podsekcja 1.1: Co dalej?
Opis dalszych kroków.

Ściana tekstu to przeszłość: Wprowadzenie do akapitów ``

Kiedy masz do przekazania więcej niż jedno zdanie, potrzebujesz sposobu na logiczne podzielenie tekstu. Tutaj z pomocą przychodzi znacznik `

` (od ang. paragraph akapit). Każdy blok tekstu umieszczony wewnątrz znacznika `

` będzie traktowany jako osobny akapit. Przeglądarka automatycznie doda pewien odstęp (margines) między akapitami, co znacznie poprawia czytelność i sprawia, że tekst nie jest jednolitą, przytłaczającą "ścianą".

Przykład:

To jest pierwszy akapit. Zawiera on pewne informacje.
To jest drugi akapit. Jest on oddzielony od poprzedniego i zawiera kolejne treści.

Jak wyróżnić tekst? Praktyczne zastosowanie pogrubienia i pochylenia

Czasami chcesz zwrócić uwagę czytelnika na konkretne słowo lub frazę. HTML oferuje znaczniki, które pomagają to osiągnąć. Najważniejsze z nich to:

• ``: Ten znacznik służy do oznaczania tekstu, który ma szczególne znaczenie. Przeglądarki domyślnie wyświetlają tekst wewnątrz `` jako pogrubiony. Używaj go, gdy chcesz podkreślić ważność słowa lub frazy.
• ``: Ten znacznik służy do oznaczania tekstu, który ma być objęty naciskiem. Przeglądarki domyślnie wyświetlają tekst wewnątrz `` jako pochylony (kursywa). Używaj go, gdy chcesz położyć nacisk na konkretne słowo, zmieniając jego intonację.

Warto pamiętać, że `` i `` mają znaczenie semantyczne (określają wagę i nacisk), a nie tylko wizualne. Dawniej używano znaczników `` (bold) i `` (italic), które służyły tylko do zmiany wyglądu tekstu. Chociaż nadal działają, lepiej stosować `` i `` dla lepszej struktury i dostępności.

Przykład:

To jest normalny tekst, a to jest bardzo ważne słowo.
Ten fragment tekstu jest podkreślony przez nacisk.

Porządkowanie informacji: Tworzenie list wypunktowanych i numerowanych

Listy to doskonały sposób na prezentację danych w uporządkowany i łatwy do przyswojenia sposób. HTML pozwala tworzyć dwa główne typy list:

• Listy nieuporządkowane (`
  `):
  Używane, gdy kolejność elementów nie ma znaczenia. Każdy element listy umieszczamy wewnątrz znacznika `
• ` (list item).
• Listy uporządkowane (`
  `):
  Używane, gdy kolejność elementów jest ważna (np. instrukcje krok po kroku). Również tutaj każdy element to `
• `.

Oto przykłady obu typów list:

Lista nieuporządkowana:

 
Element pierwszy
 
Element drugi
 
Element trzeci

Przeglądarka wyświetli to jako listę z kropkami przed każdym elementem.

Lista uporządkowana:

 
Pierwszy krok
 
Drugi krok
 
Trzeci krok

Tutaj przeglądarka doda numerację (1., 2., 3.) przed każdym elementem.

Ożywiamy stronę: Jak dodawać klikalne linki i wyświetlać obrazy?

Sama treść tekstowa to za mało. Aby Twoja strona była interaktywna i atrakcyjna wizualnie, musisz wiedzieć, jak dodawać linki i obrazy.

Anatomia linku: Jak działa znacznik `` i atrybut `href`?

Hiperłącza, czyli linki, to podstawa nawigacji w internecie. Pozwalają one użytkownikom przechodzić między stronami. W HTML tworzymy je za pomocą znacznika `` (od ang. anchor kotwica). Kluczowym elementem znacznika `` jest atrybut href (hypertext reference), który określa adres docelowy linku. To właśnie w href wpisujemy adres URL strony, do której chcemy przekierować użytkownika.

Możemy tworzyć linki do innych stron w internecie, jak i do innych stron w ramach naszej własnej witryny:

Link zewnętrzny:

Odwiedź Google dla więcej informacji.

Link wewnętrzny (do innej strony w naszym projekcie):

Zobacz naszą stronę kontaktową.

Tekst umieszczony między otwierającym a zamykającym znacznikiem `` (np. "Google" lub "stronę kontaktową") to tekst, który będzie widoczny dla użytkownika i na który będzie mógł kliknąć.

Jak poprawnie wstawić obrazek na stronę za pomocą znacznika ``?

Obrazy dodają życia każdej stronie internetowej. W HTML służy do tego znacznik ``. Jest to tzw. znacznik pusty, co oznacza, że nie potrzebuje on znacznika zamykającego (``). Znacznik `` wymaga co najmniej dwóch atrybutów:

• `src` (source): Ten atrybut określa ścieżkę do pliku graficznego, który chcemy wyświetlić. Może to być adres URL obrazka w internecie lub ścieżka do pliku graficznego w naszym folderze z projektem.
• `alt` (alternative text): Ten atrybut jest niezwykle ważny! Zawiera krótki opis obrazka. Jest on wyświetlany, gdy obrazek z jakiegoś powodu nie może się załadować, a także jest odczytywany przez czytniki ekranu dla osób niedowidzących. Jest to również istotne dla wyszukiwarek internetowych.

Przykład wstawienia obrazka:

W tym przykładzie zakładamy, że plik `moj_obrazek.jpg` znajduje się w podfolderze `obrazy` w tym samym katalogu co nasz plik HTML.

Wielki moment: Jak wyświetlić swoją pierwszą stronę w przeglądarce?

Dotarliśmy do kulminacyjnego momentu zobaczenia efektu swojej pracy!

Otwieranie lokalnego pliku HTML – prosta instrukcja

Wyświetlenie Twojej pierwszej strony HTML jest banalnie proste:

1. Znajdź swój plik: Otwórz folder, w którym zapisałeś swój plik z rozszerzeniem `.html` (np. `index.html`).
2. Dwukrotnie kliknij: Po prostu kliknij dwukrotnie na ikonę pliku.
3. Podziwiaj efekt: Twój plik powinien otworzyć się automatycznie w domyślnej przeglądarce internetowej, pokazując Ci dokładnie to, co zakodowałeś.

Jeśli chcesz otworzyć stronę w innej przeglądarce, możesz zazwyczaj przeciągnąć plik `.html` na okno tej przeglądarki lub użyć opcji "Otwórz za pomocą...".

Co zrobić, gdy strona nie wyświetla się poprawnie? Najczęstsze błędy początkujących

Nawet najbardziej doświadczeni programiści popełniają błędy, więc nie zrażaj się, jeśli Twoja pierwsza strona nie wygląda idealnie. Oto kilka najczęstszych problemów, na które możesz natrafić:

• Błędy w pisowni znaczników: Upewnij się, że wszystkie nazwy znaczników są poprawnie napisane (np. `

  ` zamiast `

  ` czy ``).

• Brak zamknięcia znaczników: Większość znaczników HTML wymaga pary otwierającej i zamykającej (np. `` i ``). Znaczniki puste, jak ``, nie potrzebują zamykającego, ale inne, jak `p`, `h1`, `a`, `ul`, `ol`, `li`, `strong`, `em` tak.
• Niewłaściwe rozszerzenie pliku: Upewnij się, że plik jest zapisany jako `.html`, a nie `.txt`. Czasami edytory tekstu mogą dodawać ukryte rozszerzenie `.txt`.
• Problemy ze ścieżkami do obrazów/linków: Jeśli obrazy lub linki nie działają, sprawdź dokładnie ścieżki podane w atrybutach `src` i `href`. Czy nazwy folderów i plików są poprawne? Czy nie ma literówek?
• Brak kodowania znaków: Jeśli polskie znaki wyświetlają się niepoprawnie, sprawdź, czy masz poprawnie dodany znacznik `` w sekcji ``.

Najlepszym sposobem na debugowanie jest uważne czytanie kodu i porównywanie go z przykładami. Czasami wystarczy drobna korekta, aby wszystko zaczęło działać.

Zbudowałeś swoją pierwszą stronę! Co dalej po HTML?

Gratulacje! Udało Ci się stworzyć i wyświetlić swoją pierwszą stronę HTML. To ogromny krok naprzód i solidny fundament do dalszego rozwoju.

Krótkie spojrzenie w przyszłość: Rola CSS i JavaScript

HTML jest jak szkielet definiuje strukturę i treść. Ale aby strona wyglądała atrakcyjnie i była interaktywna, potrzebujesz dwóch kolejnych technologii: CSS (Cascading Style Sheets) i JavaScript.

• CSS odpowiada za wygląd Twojej strony kolory, czcionki, układ elementów, responsywność (dostosowanie do różnych rozmiarów ekranów). Bez CSS strony byłyby surowe i nieciekawe.
• JavaScript dodaje interaktywność i dynamikę. Pozwala tworzyć animacje, formularze reagujące na działania użytkownika, dynamiczne aktualizacje treści i wiele, wiele więcej.

HTML, CSS i JavaScript to trójca, która stanowi podstawę nowoczesnego tworzenia stron internetowych. Po opanowaniu HTML, naturalnym kolejnym krokiem jest nauka CSS, a następnie JavaScript.

Gdzie szukać dalszej wiedzy i darmowych materiałów do nauki?

Świat tworzenia stron internetowych stale się rozwija, a dostępnych jest mnóstwo fantastycznych, darmowych zasobów, które pomogą Ci poszerzać wiedzę:

• MDN Web Docs (Mozilla Developer Network): To prawdopodobnie najlepsze i najbardziej kompletne źródło informacji o technologiach webowych. Znajdziesz tam szczegółowe dokumentacje, poradniki i przykłady.
• W3Schools: Świetne miejsce dla początkujących, oferujące proste wyjaśnienia i interaktywne przykłady kodu.
• freeCodeCamp: Ogromna platforma z darmowymi kursami programowania, w tym web developmentu, z naciskiem na praktyczne projekty.
• YouTube: Znajdziesz tam niezliczone kanały oferujące darmowe tutoriale i kursy tworzenia stron internetowych po polsku i angielsku. Wpisz "kurs HTML CSS JavaScript" i wybierz coś dla siebie.
• Codecademy: Oferuje interaktywne kursy, gdzie uczysz się kodować bezpośrednio w przeglądarce.

Pamiętaj, że kluczem do sukcesu jest praktyka. Koduj, eksperymentuj, twórz własne małe projekty, a z czasem poczujesz się pewnie w świecie tworzenia stron internetowych.