• `
  `: Reprezentuje sekcję wprowadzającą lub grupę elementów nawigacyjnych, zazwyczaj na górze strony.
• ``: Zawiera linki nawigacyjne, np. menu główne.
• `
  `: Reprezentuje główną treść dokumentu. Na stronie powinien być tylko jeden znacznik `
  `.
• `
  `: Ogólna, samodzielna sekcja dokumentu, np. rozdział, grupy treści tematycznych.
• `
  `: Samodzielna, niezależna treść, np. wpis na blogu, artykuł prasowy, komentarz.
• ``: Treść poboczna, która jest pośrednio związana z główną treścią dokumentu, np. pasek boczny, reklamy.
• ``: Reprezentuje stopkę dokumentu lub sekcji, często zawiera informacje o autorze, prawa autorskie, linki kontaktowe.

Gdy masz już szkielet strony, czas na wypełnienie jej treścią. HTML oferuje proste znaczniki do dodawania tekstu, tworzenia nagłówków, wstawiania linków i obrazków. To podstawy, które musisz opanować.

Tekst: Paragrafy tworzymy za pomocą znacznika `

`. Nagłówki, które hierarchizują treść, oznaczamy od `

` (najważniejszy) do `

` (najmniej ważny). Ważne jest, aby używać ich zgodnie z ich przeznaczeniem, a nie tylko do stylizacji stylizacją zajmiemy się w CSS.

Tytuł główny strony
Podtytuł sekcji
To jest przykładowy paragraf tekstu na mojej stronie. Mogę tu umieścić ważne informacje.
Kolejny paragraf, aby pokazać, jak tekst jest dzielony na bloki.

Linki: Aby połączyć swoją stronę z innymi stronami w internecie lub z innymi sekcjami swojej własnej strony, używamy znacznika `` (anchor). Kluczowy jest atrybut `href`, który określa adres docelowy linku.

Odwiedź Google lub przejdź do strony "O nas".

Obrazki: Obrazki dodajemy za pomocą znacznika ``. Jest to znacznik samodomykający się, co oznacza, że nie potrzebuje znacznika zamykającego. Musi mieć dwa kluczowe atrybuty: `src` (source), który wskazuje ścieżkę do pliku obrazka, oraz `alt` (alternative text), który zawiera opis obrazka. Tekst alternatywny jest niezwykle ważny dla dostępności (czytniki ekranowe) i SEO, a także wyświetla się, gdy obrazek się nie załaduje.

Strona HTML bez CSS wyglądałaby bardzo surowo jak czysty tekst na białym tle. Aby nadać jej styl, kolory i układ, potrzebujemy CSS. Aby przeglądarka wiedziała, gdzie szukać stylów dla Twojej strony, musisz połączyć plik `style.css` z plikiem `index.html`. Robi się to za pomocą znacznika ``, który umieszczamy w sekcji `

Teraz, gdy masz już połączone pliki, możesz zacząć stylizować swoją stronę! CSS pozwala kontrolować praktycznie każdy aspekt wizualny. Na początek skupmy się na kilku podstawowych właściwościach, które odmienią wygląd Twojej strony. Możesz zmieniać kolory tekstu za pomocą `color`, kolor tła za pomocą `background-color`, rozmiar czcionki za pomocą `font-size` oraz rodzinę czcionek za pomocą `font-family`. Pamiętaj, że każda reguła CSS składa się z selektora (np. `body`, `p`, `h1`), który wskazuje, który element HTML ma być stylizowany, oraz bloku deklaracji w nawiasach klamrowych, zawierającego właściwości i ich wartości, zakończone średnikami.

/* style.css */
body { font-family: Arial, sans-serif; /* Ustawia rodzinę czcionek dla całej strony */ background-color: #f4f4f4; /* Jasnoszare tło */ color: #333; /* Ciemnoszary kolor tekstu */
} h1 { color: #0056b3; /* Niebieski kolor dla nagłówka h1 */ font-size: 2.5em; /* Rozmiar czcionki, 2.5 razy większy niż domyślny */
} p { font-size: 1em; /* Domyślny rozmiar czcionki */ line-height: 1.6; /* Wysokość linii dla lepszej czytelności */
}

Model pudełkowy (Box Model) to jedna z najważniejszych koncepcji w CSS. Zrozumienie go jest absolutnie kluczowe dla prawidłowego układania elementów na stronie. Wyobraź sobie, że każdy element HTML jest jak pudełko. To pudełko ma swoją zawartość (content), ale otaczają je również inne warstwy: padding, border i margin. To właśnie te warstwy decydują o tym, ile miejsca zajmuje element i jak daleko jest od innych elementów.

• `padding` (margines wewnętrzny): Przestrzeń między zawartością elementu a jego ramką (border). Zwiększa "wielkość" elementu, ale jest częścią jego tła.
• `border` (ramka): Linia otaczająca padding i zawartość. Możesz określić jej grubość, styl i kolor.
• `margin` (margines zewnętrzny): Przestrzeń poza ramką elementu, która oddziela go od innych elementów. Jest przezroczysta.

W dzisiejszych czasach, gdy ludzie przeglądają internet na niezliczonej liczbie urządzeń od małych smartfonów, przez tablety, po szerokie monitory komputerów responsywność strony jest absolutnie kluczowa. Strona musi wyglądać i działać dobrze niezależnie od rozmiaru ekranu. Jeśli Twoja strona nie będzie responsywna, użytkownicy mobilni szybko się zniechęcą i po prostu ją opuszczą. Zapewniam Cię, że warto poświęcić czas na to, aby Twoja strona była przyjazna dla każdego urządzenia.

Pierwszym i najważniejszym krokiem do zapewnienia responsywności jest dodanie specjalnego znacznika `` w sekcji `

Kiedy już masz ustawiony viewport, kolejnym krokiem są Media Queries w CSS. To potężne narzędzie, które pozwala stosować różne zestawy stylów w zależności od cech urządzenia, takich jak szerokość ekranu, wysokość, orientacja czy rozdzielczość. Najczęściej używamy ich do dostosowania układu strony do różnych szerokości ekranu. Możesz na przykład sprawić, że na dużych ekranach elementy będą ułożone obok siebie, a na mniejszych jeden pod drugim. To właśnie Media Queries pozwalają na prawdziwą transformację wyglądu strony na różnych urządzeniach.

/* style.css */ /* Style dla ekranów większych niż 768px (np. desktop) */
.container { display: flex; justify-content: space-between;
} /* Style dla ekranów o maksymalnej szerokości 768px (np. tablet, telefon) */
@media (max-width: 768px) { .container { flex-direction: column; /* Elementy układają się jeden pod drugim */ } h1 { font-size: 2em; /* Zmniejszamy rozmiar nagłówka na mniejszych ekranach */ }
}

Publikacja strony za darmo na GitHub Pages

Zakładanie konta GitHub i tworzenie repozytorium

GitHub to nie tylko miejsce do przechowywania kodu, ale także świetna platforma do darmowego hostowania statycznych stron. Proces jest prosty, a umiejętność korzystania z GitHuba to cenny atut w karierze developera.

1. Wejdź na stronę github.com i załóż darmowe konto, jeśli jeszcze go nie masz.
2. Po zalogowaniu kliknij ikonę "+" w prawym górnym rogu i wybierz "New repository" (Nowe repozytorium).
3. W polu "Repository name" (Nazwa repozytorium) wpisz nazwę w formacie `nazwa-uzytkownika.github.io` (gdzie `nazwa-uzytkownika` to Twoja nazwa użytkownika na GitHubie). To kluczowe, aby GitHub Pages automatycznie aktywowały się dla tego adresu.
4. Upewnij się, że repozytorium jest "Public" (Publiczne).
5. Możesz zaznaczyć opcję "Add a README file" (Dodaj plik README), ale nie jest to obowiązkowe.
6. Kliknij "Create repository" (Stwórz repozytorium).

Wgrywanie plików strony

Teraz musisz przenieść pliki swojej lokalnej strony internetowej do nowo utworzonego repozytorium. Możesz to zrobić na kilka sposobów, ale dla początkujących najprostsze będzie bezpośrednie wgranie przez interfejs GitHub.

1. Na stronie swojego nowo utworzonego repozytorium kliknij "Add file" (Dodaj plik), a następnie "Upload files" (Wgraj pliki).
2. Przeciągnij i upuść wszystkie pliki i foldery swojej strony (index.html, style.css, folder images/) w wyznaczone miejsce.
3. Na dole strony w polu "Commit changes" (Zatwierdź zmiany) możesz dodać krótki opis, np. "Initial commit" (Pierwsze wgranie).
4. Kliknij "Commit changes" (Zatwierdź zmiany).

Aktywacja GitHub Pages

Ostatni krok to aktywacja usługi GitHub Pages, która sprawi, że Twoja strona stanie się dostępna publicznie.

1. Na stronie repozytorium przejdź do zakładki "Settings" (Ustawienia).
2. W lewym menu znajdź i kliknij "Pages".
3. W sekcji "Branch" (Gałąź) wybierz "main" (lub "master", jeśli taką masz) i kliknij "Save" (Zapisz).
4. Po kilku chwilach (czasem może to potrwać kilka minut) GitHub Pages aktywuje Twoją stronę. Adres Twojej strony będzie widoczny w sekcji "GitHub Pages" i będzie miał format `https://nazwa-uzytkownika.github.io`.

Gratulacje! Właśnie opublikowałeś swoją pierwszą stronę internetową w internecie i to całkowicie za darmo! To naprawdę powód do dumy.

Najczęstsze błędy i jak ich unikać

Problemy ze ścieżkami do plików

Jednym z najczęstszych problemów, z którymi borykają się początkujący, są nieprawidłowe ścieżki do plików CSS, obrazków czy innych zasobów. Jeśli Twoje style się nie wczytują, a obrazki nie wyświetlają, najprawdopodobniej problem leży właśnie tutaj. Pamiętaj, że ścieżki są względne do pliku HTML, w którym je umieszczasz. Sprawdź dokładnie nazwy plików i folderów literówki są Twoim największym wrogiem!

• Poprawna ścieżka do CSS (plik style.css w tym samym folderze co index.html):

• Poprawna ścieżka do CSS (plik style.css w folderze css/):

• Poprawna ścieżka do obrazka (plik obrazek.jpg w folderze images/):

• Błędna ścieżka (literówka w nazwie folderu):

• Błędna ścieżka (brak folderu):

Przeczytaj również: Jak utworzyć plik HTML w Notatniku? Twój pierwszy krok w kodowaniu!

Błędy składniowe i literówki

HTML i CSS są językami, które wymagają precyzji. Nawet najmniejsza literówka, brakujący nawias klamrowy czy średnik może sprawić, że część kodu przestanie działać. To frustrujące, ale z czasem nauczysz się je szybko wyłapywać. Korzystaj z narzędzi deweloperskich przeglądarki (F12) to Twój najlepszy przyjaciel w debugowaniu. Konsola i inspektor elementów pokażą Ci, gdzie dokładnie leży problem.

• Brakujący średnik w CSS (np. `color: red` zamiast `color: red;`).
• Niezamknięte znaczniki HTML (np. `

  ` bez `

  `).
• Literówki w nazwach właściwości CSS (np. `backgrund-color` zamiast `background-color`).
• Błędne nazwy klas lub ID w selektorach CSS (np. `.moj-klasa` w CSS, ale w HTML jest `class="my-class"`).

Co dalej? Rozwijanie umiejętności i strony

Stworzenie i opublikowanie pierwszej strony to dopiero początek Twojej przygody z web developmentem. Gratuluję Ci tego osiągnięcia! Teraz, gdy znasz już podstawy HTML i CSS, świat internetu stoi przed Tobą otworem. Nie przestawaj się uczyć i eksperymentować. Każdy kolejny projekt to nowa lekcja i szansa na rozwój. Pamiętaj, że praktyka czyni mistrza!

• Nauka JavaScriptu: To język, który dodaje interaktywność Twojej stronie. Animacje, formularze, dynamiczne treści wszystko to możliwe jest dzięki JS.
• Zaawansowany CSS: Poznaj Flexbox i Grid do tworzenia skomplikowanych układów, animacje CSS, transformacje i preprocesory takie jak Sass.
• Systemy kontroli wersji (Git): Opanowanie Git to podstawa pracy w zespole i zarządzania kodem. GitHub Pages to świetny wstęp do tego świata.
• Frameworki CSS (np. Bootstrap, Tailwind CSS): Pozwalają szybko tworzyć responsywne i estetyczne strony, korzystając z gotowych komponentów.
• Frameworki JavaScript (np. React, Vue, Angular): Przenieś swoje umiejętności na wyższy poziom, budując złożone aplikacje webowe.