Mój pierwszy nagłówek

To jest mój pierwszy akapit na stronie internetowej.

Krok 3: Wklejamy i analizujemy podstawowy kod

Teraz, gdy masz już podstawowy kod w Notatniku, przyjrzyjmy się, co oznaczają poszczególne linie. Zrozumienie tego jest kluczowe, abyś wiedział, co robisz, a nie tylko kopiował. To jest ten moment, kiedy zaczynasz naprawdę rozumieć HTML!

• ``: Ta linia to deklaracja typu dokumentu. Informuje przeglądarkę, że dokument jest napisany zgodnie ze standardem HTML5. Zawsze umieszcza się ją na samym początku pliku.
• ``: To główny, nadrzędny tag, który obejmuje całą zawartość strony HTML. Atrybut `lang="pl"` informuje przeglądarkę (i wyszukiwarki), że język treści na stronie to polski.
• ``: Ta sekcja zawiera metadane dokumentu, czyli informacje o stronie, które nie są bezpośrednio wyświetlane użytkownikowi. Znajdują się tu takie elementy jak tytuł strony, kodowanie znaków czy linki do arkuszy stylów CSS.
• ``: To niezwykle ważny metatag, szczególnie w Polsce! Określa on kodowanie znaków dla dokumentu. Ustawienie `UTF-8` jest kluczowe dla poprawnego wyświetlania polskich znaków (ą, ę, ć, ł itd.). Bez tego, zamiast polskich liter, zobaczysz "krzaczki".
• `: Tekst umieszczony między tagami `` staje się tytułem Twojej strony, który pojawia się na karcie przeglądarki. Jest to również ważny element dla SEO.
• ``: To serce Twojej strony! Wszystko, co widzisz na stronie internetowej nagłówki, akapity, obrazy, linki znajduje się właśnie w sekcji ``. To tutaj umieszczamy całą widoczną treść.

  Krok 4: Dodajemy pierwszą treść

  Wklejony wcześniej kod zawiera już prosty nagłówek i akapit, ale możesz swobodnie je modyfikować. Pamiętaj, że cała widoczna treść, którą chcesz, aby użytkownik zobaczył, musi znaleźć się wewnątrz tagów `

  ` i ``. Spróbuj zmienić tekst w nagłówku `

  ` i akapicie `

  `. Na przykład, możesz to zrobić tak:

  Witaj w moim świecie HTML!

  To jest mój pierwszy, samodzielnie stworzony akapit. Jestem dumny z tego osiągnięcia!

  

  Zapisujemy plik: Klucz do Twojej pierwszej strony WWW

  Poprawne zapisanie pliku to jeden z najważniejszych etapów, a jednocześnie najczęstsze źródło problemów dla początkujących. Musimy upewnić się, że system operacyjny rozpozna nasz plik jako stronę internetową, a nie zwykły dokument tekstowy.

  Uniknij najczęstszego błędu: Magia opcji "Zapisz jako typ: Wszystkie pliki"

  To jest moment, w którym wielu początkujących popełnia błąd, zapisując plik jako zwykły tekst (.txt). Aby Twoja strona działała poprawnie, musisz postępować według tych kroków:

  1. W Notatniku wybierz z menu "Plik" opcję "Zapisz jako...".
  2. Otworzy się okno dialogowe "Zapisz jako". W polu "Nazwa pliku" wpisz nazwę dla swojej strony, na przykład `index.html`. To jest kluczowe! Musisz ręcznie dodać rozszerzenie `.html`.
  3. Poniżej pola "Nazwa pliku" znajdziesz pole "Zapisz jako typ:". Domyślnie jest tam "Dokumenty tekstowe (*.txt)". Zmień tę opcję na "Wszystkie pliki (*.*)". To sprawi, że Notatnik nie doda automatycznie rozszerzenia `.txt` do Twojego pliku.
  4. Zanim klikniesz "Zapisz", upewnij się, że wybrałeś odpowiednie kodowanie znaków (o tym za chwilę).
  5. Wybierz miejsce na dysku, gdzie chcesz zapisać swój plik (np. pulpit lub specjalny folder na projekty).
  6. Kliknij przycisk "Zapisz".

  Jeśli wszystko poszło zgodnie z planem, zobaczysz plik z ikoną Twojej domyślnej przeglądarki internetowej.

  Nazwa ma znaczenie: Dlaczego `index.html` to dobry wybór?

  Nazwa `index.html` jest bardzo często używana i stała się pewnym standardem w świecie tworzenia stron internetowych. To dlatego, że większość serwerów WWW jest skonfigurowana tak, aby automatycznie szukać pliku o nazwie `index.html` (lub `index.htm`, `default.html`) jako głównej strony, gdy ktoś odwiedza adres domeny. Dla Twojego pierwszego pliku to doskonały wybór, bo od razu uczysz się dobrej praktyki, która przyda się w przyszłości.

  Polski problem rozwiązany: Jak zapewnić poprawne wyświetlanie znaków (ą, ę, ć)?

  Kwestia kodowania znaków jest niezwykle ważna, zwłaszcza w języku polskim. Jeśli nie zadbasz o to, aby przeglądarka wiedziała, jak interpretować Twoje polskie znaki, zamiast "ą", "ę" czy "ć" zobaczysz nieestetyczne "krzaczki". Na szczęście rozwiązanie jest proste i wymaga dwóch kroków.

  Rola kodowania UTF-8 w oknie zapisu

  W oknie "Zapisz jako" Notatnika, obok przycisku "Zapisz", znajduje się rozwijana lista z opcją "Kodowanie". Domyślnie może być ustawione "ANSI". Koniecznie zmień tę opcję na "UTF-8". Dzięki temu Notatnik zapisze Twój plik w formacie, który poprawnie obsługuje wszystkie znaki Unicode, w tym polskie litery. To gwarantuje, że plik będzie zawierał prawidłowe dane dla przeglądarki.

  Znaczenie metatagu `` w Twoim kodzie

  Dodatkowo, linia ``, którą umieściłeś w sekcji `

  ` swojego dokumentu HTML, jest równie kluczowa. Współpracuje ona z ustawieniami kodowania podczas zapisu. Nawet jeśli plik jest zapisany jako UTF-8, ten metatag jawnie informuje przeglądarkę, jakiego kodowania ma użyć do interpretacji treści. To podwójne zabezpieczenie sprawia, że Twoje polskie znaki zawsze będą wyświetlane prawidłowo, niezależnie od domyślnych ustawień systemu operacyjnego czy przeglądarki użytkownika.

  Twoja pierwsza strona: Jak ją otworzyć i co zrobić, gdy coś pójdzie nie tak?

  Po całym procesie tworzenia i zapisywania, nadszedł ten ekscytujący moment zobaczenie efektów swojej pracy! Otworzenie pliku HTML w przeglądarce jest prostsze, niż myślisz.

  Z Notatnika do przeglądarki: Prosta sztuczka z podwójnym kliknięciem

  Aby otworzyć swój świeżo utworzony plik HTML w przeglądarce internetowej (takiej jak Chrome, Firefox, Edge czy Opera), wystarczy, że znajdziesz go w folderze, w którym go zapisałeś, i dwukrotnie na niego klikniesz. System operacyjny rozpozna rozszerzenie `.html` i automatycznie otworzy plik w Twojej domyślnej przeglądarce. I voilà! Powinieneś zobaczyć swoją pierwszą stronę internetową, z nagłówkiem i akapitem, które napisałeś.

  Coś poszło nie tak? Najczęstsze problemy i ich rozwiązania

  Nie martw się, jeśli coś nie zadziałało od razu. To normalne, a nauka rozwiązywania problemów to ważna część drogi każdego developera. Oto najczęstsze pułapki i sposoby na ich obejście:

  • Problem: Moja strona wciąż wygląda jak zwykły tekst, co robię źle?
    • Rozwiązanie: Prawdopodobnie plik został zapisany z domyślnym rozszerzeniem `.txt` (np. `index.html.txt`). Należy go ponownie zapisać, upewniając się, że w oknie "Zapisz jako" wybrano "Wszystkie pliki (*.*)" i wpisano `.html` na końcu nazwy pliku (np. `index.html`). Sprawdź, czy w nazwie pliku nie ma podwójnego rozszerzenia.
  • Problem: Zamiast strony widzę kod w przeglądarce, jak to naprawić?
    • Rozwiązanie: Sprawdź, czy plik na pewno ma rozszerzenie `.html` i czy przeglądarka nie otworzyła go jako pliku tekstowego. Upewnij się, że nie ma podwójnego rozszerzenia (np. `nazwa.html.txt`), co może wprowadzać system w błąd. Czasem pomaga też kliknięcie prawym przyciskiem myszy na plik i wybranie "Otwórz za pomocą" > "Twoja przeglądarka".
  • Problem: Polskie znaki to "krzaczki", szybka diagnoza problemu.
    • Rozwiązanie: To klasyczny problem z kodowaniem. Sprawdź dwie rzeczy: po pierwsze, czy w kodzie HTML, w sekcji ``, znajduje się linia ``. Po drugie, czy podczas zapisu pliku w Notatniku, w oknie "Zapisz jako", w polu "Kodowanie" wybrano opcję "UTF-8". Oba te kroki są niezbędne dla poprawnego wyświetlania polskich znaków.

  Co dalej? Rozbudowujemy podstawy HTML

  Skoro masz już za sobą pierwsze kroki, pewnie zastanawiasz się, co dalej. HTML to fundament, a możliwości są ogromne! Poniżej przedstawiam kilka kolejnych, podstawowych tagów, które pozwolą Ci rozbudować swoją stronę.

  Jak dodać klikalny link (odnośnik) do innej strony?

  Linki to esencja internetu, pozwalają łączyć strony ze sobą. Tworzy się je za pomocą tagu `` (anchor). Kluczowym atrybutem jest `href`, który określa adres docelowy linku.

  Odwiedź Google, aby wyszukać więcej informacji.

  Wstawiamy pierwszy obrazek tag `` w praktyce

  Obrazki ożywiają każdą stronę. Do ich wstawiania służy tag ``. Jest to tag samodomykający się (nie ma tagu zamykającego ``). Wymaga dwóch ważnych atrybutów: `src` (źródło obrazka, czyli ścieżka do pliku) i `alt` (tekst alternatywny, który wyświetla się, gdy obrazek się nie załaduje, ważny dla dostępności i SEO).

  Pamiętaj, że plik obrazka (`nazwa_obrazka.jpg`) powinien znajdować się w tym samym folderze co Twój plik HTML, lub musisz podać pełną ścieżkę do niego.

  Porządkujemy treść: Jak tworzyć listy wypunktowane i numerowane?

  Listy to świetny sposób na uporządkowanie informacji i uczynienie ich bardziej czytelnymi. HTML oferuje dwa główne typy list:

  • Listy wypunktowane (nieuporządkowane): Używamy tagu `
    `
    (unordered list), a każdy element listy to tag `
  • `
  (list item).
  • Listy numerowane (uporządkowane): Używamy tagu `
    `
    (ordered list), a każdy element listy to również tag `
  • `
  .

  Oto przykłady:

  Moje ulubione owoce:

  • Jabłka
  • Banany
  • Pomarańcze

  Kroki do sukcesu:

  1. Naucz się podstaw
  2. Ćwicz regularnie
  3. Twórz własne projekty

  Gratulacje! Twoja nowa umiejętność i dalsze kroki

  Gratulacje, jesteś twórcą stron WWW! Twoje pierwsze kroki w świecie kodu

  Właśnie stworzyłeś swoją pierwszą stronę internetową! To naprawdę ogromne osiągnięcie i powód do dumy. Zrobiłeś pierwszy, ale jakże ważny krok w fascynujący świat tworzenia stron WWW. Zrozumiałeś podstawową strukturę, nauczyłeś się pisać kod i co najważniejsze wiesz, jak prawidłowo zapisać plik, aby działał. Ta umiejętność otworzy przed Tobą drzwi do dalszej nauki i pozwoli Ci realizować własne pomysły w internecie. Pamiętaj, że każdy ekspert kiedyś zaczynał od Notatnika!

  Przeczytaj również: Zapis pliku HTML: Sekrety, by strona działała bez "krzaczków"!

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

  Świat web developmentu jest ogromny i ciągle się rozwija. Na szczęście, dostęp do wiedzy jest łatwiejszy niż kiedykolwiek. Oto kilka miejsc, gdzie możesz szukać dalszych materiałów do nauki HTML i nie tylko:

  • MDN Web Docs (Mozilla Developer Network): To złoty standard dokumentacji technicznej. Znajdziesz tam szczegółowe opisy wszystkich tagów HTML, atrybutów i wiele więcej, w przystępnej formie.
  • W3Schools.com: Popularna strona oferująca proste tutoriale i przykłady kodu dla początkujących i średniozaawansowanych.
  • Darmowe kursy online: Platformy takie jak freeCodeCamp, Codecademy czy The Odin Project oferują interaktywne kursy, które prowadzą Cię przez kolejne etapy nauki HTML, CSS i JavaScript.
  • Kanały YouTube: Wiele kanałów poświęconych programowaniu oferuje darmowe tutoriale wideo, które mogą być bardzo pomocne w wizualnym przyswajaniu wiedzy.
  • Książki i e-booki: Jeśli preferujesz tradycyjną formę nauki, na rynku jest wiele świetnych pozycji dla początkujących.