# Projekt Terrarium Część 1: Wprowadzenie do HTML ```mermaid journey title Twoja podróż nauki HTML section Podstawa Create HTML file: 3: Student Add DOCTYPE: 4: Student Structure document: 5: Student section Zawartość Add metadata: 4: Student Include images: 5: Student Organize layout: 5: Student section Semantyka Use proper tags: 4: Student Enhance accessibility: 5: Student Build terrarium: 5: Student ``` ![Wprowadzenie do HTML](../../../../translated_images/pl/webdev101-html.4389c2067af68e98.webp) > Sketchnote autorstwa [Tomomi Imura](https://twitter.com/girlie_mac) HTML, czyli HyperText Markup Language, to fundament każdej odwiedzanej witryny. Pomyśl o HTML jak o szkielecie nadającym strukturę stronom internetowym – definiuje, gdzie trafia zawartość, jak jest zorganizowana i co reprezentuje każdy element. Podczas gdy CSS później "ubrać" Twój HTML kolorami i układami, a JavaScript tchnie w niego życie dzięki interaktywności, HTML zapewnia niezbędną strukturę, która umożliwia wszystko inne. W tej lekcji stworzysz strukturę HTML dla wirtualnego interfejsu terrarium. Ten praktyczny projekt nauczy Cię podstawowych pojęć HTML, jednocześnie budując coś wizualnie angażującego. Nauczysz się organizować zawartość za pomocą semantycznych elementów, pracować z obrazami i stworzyć fundament pod interaktywną aplikację webową. Pod koniec lekcji będziesz mieć działającą stronę HTML wyświetlającą obrazy roślin w uporządkowanych kolumnach, gotową do stylizacji w następnej lekcji. Nie martw się, jeśli na początku będzie wyglądać to prosto – dokładnie tak powinien wyglądać HTML zanim CSS doda wizualny szlif. ```mermaid mindmap root((Podstawy HTML)) Structure Deklaracja DOCTYPE Element HTML Sekcja Head Zawartość Body Elements Tagi i Atrybuty Tagi Samozamykające się Zagnieżdżone Elementy Blok vs Inline Content Elementy Tekstowe Obrazy Kontenery (div) Listy Semantics Znaczące Tagi Dostępność Czytniki Ekranu Korzyści SEO Best Practices Poprawne Zagnieżdżanie Prawidłowy Kod Opisowy Tekst Alt Zorganizowana Struktura ``` ## Quiz przed wykładem [Quiz przed wykładem](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Oglądaj i ucz się**: Sprawdź ten pomocny przegląd wideo > > [![Podstawy HTML](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Konfigurowanie projektu Zanim zanurzymy się w kod HTML, ustawmy odpowiednie miejsce pracy dla Twojego projektu terrarium. Utworzenie zorganizowanej struktury plików od samego początku to kluczowy nawyk, który będzie Ci służył przez całą przygodę z tworzeniem stron. ### Zadanie: Stwórz strukturę projektu Stworzysz dedykowany folder dla projektu terrarium i dodasz pierwszy plik HTML. Oto dwa podejścia, które możesz wykorzystać: **Opcja 1: Korzystanie z Visual Studio Code** 1. Otwórz Visual Studio Code 2. Kliknij „Plik” → „Otwórz folder” lub użyj `Ctrl+K, Ctrl+O` (Windows/Linux) lub `Cmd+K, Cmd+O` (Mac) 3. Utwórz nowy folder o nazwie `terrarium` i wybierz go 4. W panelu Eksploratora kliknij ikonę „Nowy plik” 5. Nazwij swój plik `index.html` ![Eksplorator VS Code pokazujący tworzenie nowego pliku](../../../../translated_images/pl/vs-code-index.e2986cf919471eb9.webp) **Opcja 2: Korzystanie z poleceń terminala** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Co robią te polecenia:** - **Tworzą** nowy katalog o nazwie `terrarium` na Twój projekt - **Przechodzą** do katalogu terrarium - **Tworzą** pusty plik `index.html` - **Otwierają** plik w Visual Studio Code do edycji > 💡 **Wskazówka**: Nazwa pliku `index.html` jest wyjątkowa w tworzeniu stron. Kiedy ktoś odwiedza witrynę, przeglądarki automatycznie szukają `index.html` jako domyślnej strony do wyświetlenia. Oznacza to, że URL taki jak `https://mysite.com/projects/` automatycznie poda plik `index.html` z folderu `projects` bez konieczności podawania nazwy pliku w URL. ## Zrozumienie struktury dokumentu HTML Każdy dokument HTML ma określoną strukturę, którą przeglądarki muszą zrozumieć, aby poprawnie wyświetlać zawartość. Pomyśl o tej strukturze jak o formalnym liście – ma wymagane elementy w ustalonej kolejności, które pomagają odbiorcy (czyli przeglądarce) poprawnie przetworzyć zawartość. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Nagłówek"] G --> I["<div> Kontenery"] G --> J["<img> Obrazy"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Zacznijmy od dodania niezbędnej podstawy, której potrzebuje każdy dokument HTML. ### Deklaracja DOCTYPE i element root Pierwsze dwie linijki każdego pliku HTML to „wprowadzenie” dokumentu dla przeglądarki: ```html <!DOCTYPE html> <html></html> ``` **Co robi ten kod:** - **Deklaruje** typ dokumentu jako HTML5 za pomocą `<!DOCTYPE html>` - **Tworzy** element root `<html>`, który będzie zawierać całą zawartość strony - **Ustanawia** nowoczesne standardy webowe dla poprawnego renderowania w przeglądarkach - **Zapewnia** spójne wyświetlanie we wszystkich przeglądarkach i na różnych urządzeniach > 💡 **Wskazówka VS Code**: Najedź kursorem na dowolny tag HTML w VS Code, aby zobaczyć pomocne informacje z MDN Web Docs, w tym przykłady użycia i zgodność z przeglądarkami. > 📚 **Dowiedz się więcej**: Deklaracja DOCTYPE zapobiega przejściu przeglądarek w „quirks mode”, który był używany do obsługi bardzo starych stron. Nowoczesne tworzenie stron wykorzystuje prostą deklarację `<!DOCTYPE html>`, aby zapewnić [renderowanie zgodne ze standardami](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Sprawdzenie pedagogiczne** **Zatrzymaj się i przemyśl**: Przed kontynuacją upewnij się, że rozumiesz: - ✅ Dlaczego każdy dokument HTML potrzebuje deklaracji DOCTYPE - ✅ Co zawiera element root `<html>` - ✅ Jak ta struktura pomaga przeglądarkom poprawnie renderować strony **Szybki test samodzielny**: Czy potrafisz własnymi słowami wyjaśnić, co oznacza „renderowanie zgodne ze standardami”? ## Dodawanie niezbędnych metadanych dokumentu Sekcja `<head>` dokumentu HTML zawiera kluczowe informacje, których przeglądarki i wyszukiwarki potrzebują, ale których odwiedzający bezpośrednio na stronie nie widzą. Pomyśl o niej jak o „kulisy” informacji, które pomagają Twojej stronie działać poprawnie i wyglądać dobrze na różnych urządzeniach i platformach. Te metadane informują przeglądarki, jak wyświetlać stronę, jakie kodowanie znaków stosować i jak obsługiwać różne rozmiary ekranów – to wszystko niezbędne do tworzenia profesjonalnych, dostępnych stron internetowych. ### Zadanie: Dodaj sekcję head Wstaw tę sekcję `<head>` między otwierającym i zamykającym tagiem `<html>`: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Co robi każdy element:** - **Ustawia** tytuł strony pojawiający się na kartach przeglądarki i w wynikach wyszukiwania - **Określa** kodowanie znaków UTF-8 dla poprawnego wyświetlania tekstu na całym świecie - **Zapewnia** kompatybilność z nowoczesnymi wersjami Internet Explorera - **Konfiguruje** design responsywny przez ustawienie viewport zgodnie z szerokością urządzenia - **Kontroluje** początkowy poziom powiększenia, aby zawartość wyświetlała się w naturalnym rozmiarze > 🤔 **Pomyśl nad tym**: Co by się stało, gdybyś ustawił tag viewport tak: ``? Spowodowałoby to, że strona zawsze miałaby szerokość 600 pikseli, co zepsułoby responsywny design! Dowiedz się więcej o [poprawnej konfiguracji viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Budowa ciała dokumentu Element `` zawiera całą widoczną zawartość strony – wszystko, co użytkownicy zobaczą i z czym będą wchodzić w interakcję. Podczas gdy sekcja `` dostarczała instrukcji dla przeglądarki, sekcja `` zawiera faktyczną zawartość: tekst, obrazy, przyciski i inne elementy tworzące interfejs użytkownika. Dodajmy strukturę ciała i zrozummy, jak tagi HTML współpracują, by tworzyć znaczącą zawartość. ### Zrozumienie struktury tagów HTML HTML używa par tagów do definiowania elementów. Większość tagów ma otwierający `

` i zamykający `

`, a pomiędzy nim zawartość: `

Witaj, świecie!

`. Tworzy to element akapitu zawierający tekst „Witaj, świecie!”. ### Zadanie: Dodaj element body Uaktualnij plik HTML, aby zawierał element ``: ```html Welcome to my Virtual Terrarium ``` **Co oferuje ta kompletna struktura:** - **Tworzy** podstawowy szkielet dokumentu HTML5 - **Zawiera** niezbędne metadane do właściwego renderowania w przeglądarce - **Tworzy** pusty body gotowy na widoczną zawartość - **Zgodna** z najlepszymi praktykami nowoczesnego tworzenia stron Teraz możesz dodać widoczne elementy swojego terrarium. Użyjemy elementów `
` jako pojemników do organizacji różnych sekcji zawartości oraz elementów `` do wyświetlania obrazów roślin. ### Praca z obrazami i kontenerami układu Obrazy w HTML są szczególne, ponieważ używają tagów samodomykających się. W odróżnieniu od elementów takich jak `

`, które otaczają zawartość, tag `` zawiera wszystkie informacje bezpośrednio wewnątrz tagu za pomocą atrybutów takich jak `src` dla ścieżki pliku i `alt` dla dostępności. Zanim dodasz obrazy do HTML, musisz właściwie zorganizować pliki projektu, tworząc folder images i dodając w nim grafiki roślin. **Najpierw przygotuj obrazy:** 1. Utwórz folder `images` wewnątrz folderu projektu terrarium 2. Pobierz obrazy roślin z [folderu rozwiązania](../../../../3-terrarium/solution/images) (łącznie 14 obrazów) 3. Skopiuj wszystkie obrazy roślin do nowego folderu `images` ### Zadanie: Stwórz układ wyświetlania roślin Dodaj teraz obrazy roślin zorganizowane w dwóch kolumnach między tagami ``: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Co krok po kroku robi ten kod:** - **Tworzy** główny pojemnik strony z `id="page"` na całą zawartość - **Ustanawia** dwa pojemniki kolumn: `left-container` i `right-container` - **Organizuje** 7 roślin w lewej i 7 w prawej kolumnie - **Opakowuje** każdy obraz rośliny w div `plant-holder` dla indywidualnego pozycjonowania - **Stosuje** spójne nazwy klas do stylizacji CSS w następnej lekcji - **Przypisuje** unikalne ID każdemu obrazowi rośliny do późniejszej interakcji w JavaScript - **Zawiera** właściwe ścieżki do folderu images > 🤔 **Zastanów się**: Zauważ, że wszystkie obrazy mają ten sam tekst alt "plant". To nie jest idealne dla dostępności. Użytkownicy czytników ekranu usłyszą „plant” powtarzane 14 razy, nie wiedząc, która roślina jest którą. Czy potrafisz wymyślić lepsze, bardziej opisowe teksty alt dla każdego obrazu? > 📝 **Rodzaje elementów HTML**: Elementy `
` są „blokowe” i zajmują całą szerokość, natomiast `` są „inline” i zajmują tylko potrzebną szerokość. Co myślisz, co by się stało, gdybyś zamienił wszystkie `
` na ``? ### 🔄 **Sprawdzenie pedagogiczne** **Zrozumienie struktury**: Poświęć chwilę na przegląd swojej struktury HTML: - ✅ Czy potrafisz wskazać główne pojemniki w układzie? - ✅ Czy rozumiesz, dlaczego każdy obraz ma unikalne ID? - ✅ Jak opisałbyś cel divów `plant-holder`? **Sprawdzenie wizualne**: Otwórz plik HTML w przeglądarce. Powinieneś zobaczyć: - Podstawową listę obrazów roślin - Obrazy zorganizowane w dwóch kolumnach - Prosty, niestylizowany układ **Pamiętaj**: Ta uproszczona forma to dokładnie to, jak HTML powinien wyglądać przed stylizacją CSS! Dzięki temu oznaczeniu rośliny pojawią się na ekranie, choć nie będą jeszcze dopracowane wizualnie – do tego służy CSS w następnej lekcji! Na teraz masz solidną bazę HTML, która dobrze organizuje zawartość i stosuje najlepsze praktyki dostępności. ## Używanie semantycznego HTML dla dostępności Semantyczny HTML oznacza dobór elementów HTML na podstawie ich znaczenia i roli, a nie tylko wyglądu. Kiedy stosujesz semantyczny znacznik, przekazujesz strukturę i znaczenie treści przeglądarkom, wyszukiwarkom i technologiom wspomagającym, takim jak czytniki ekranu. ```mermaid flowchart TD A[Czy trzeba dodać treść?] --> B{Jaki typ?} B -->|Nagłówek główny| C["

"] B -->|Nagłówek podrzędny| D["

,

, itd."] B -->|Akapit| E["

"] B -->|Lista| F["

    ,
      "] B -->|Nawigacja| G["