`, głównego tagu `` oraz sekcji `

` (metadane) i `` (widoczna treść).

Zacznij swoją przygodę z kodowaniem: Co naprawdę potrzebujesz, by stworzyć pierwszą stronę HTML?

Zacznijmy od dobrej wiadomości: aby stworzyć swoją pierwszą stronę HTML, nie potrzebujesz drogiego, skomplikowanego oprogramowania. W rzeczywistości, wszystko, czego potrzebujesz, jest dostępne za darmo, a często już masz to na swoim komputerze. Wierzę, że to sprawia, że próg wejścia w świat tworzenia stron jest naprawdę niski, co jest fantastyczne dla początkujących!

• Visual Studio Code (VS Code): To mój osobisty faworyt i jeden z najpopularniejszych edytorów na świecie. Jest lekki, szybki, oferuje mnóstwo rozszerzeń i jest niezwykle potężny.
• Sublime Text: Szybki i elegancki edytor, ceniony za swoją wydajność i prostotę. Ma darmową wersję z drobnymi ograniczeniami, ale jest w pełni funkcjonalny.
• Atom: Tworzony przez GitHub, jest to edytor "hackowalny", co oznacza, że możesz go dostosować niemal w każdym aspekcie.

Drugim niezbędnym narzędziem jest przeglądarka internetowa. To w niej będziesz otwierać i testować swoją stronę. Po napisaniu kodu HTML, po prostu otworzysz plik w przeglądarce, aby zobaczyć, jak wygląda Twoja praca. Każda nowoczesna przeglądarka świetnie się do tego nadaje. Możesz użyć Google Chrome, Mozilla Firefox, Microsoft Edge czy Safari wybór należy do Ciebie. Ważne, abyś miał świadomość, że to właśnie przeglądarka interpretuje Twój kod i zamienia go w widoczną stronę internetową.

Fundament każdej strony WWW: Poznaj szkielet dokumentu HTML

Zanim zaczniemy pisać cokolwiek, musimy zrozumieć podstawową strukturę każdego dokumentu HTML. Pierwszą rzeczą, jaką zobaczysz na początku każdego pliku HTML5, jest deklaracja </code>. To nie jest tag HTML w ścisłym sensie, ale bardzo ważna informacja dla przeglądarki. Mówi jej: "Hej, ten dokument to strona HTML w wersji 5!". Dzięki temu przeglądarka wie, jak poprawnie interpretować Twój kod i uniknąć trybu zgodności ze starszymi wersjami HTML.

Po deklaracji `` następuje główny tag , który otacza całą zawartość Twojej strony. Wewnątrz tego tagu znajdziemy dwie kluczowe sekcje: i . Sekcja zawiera metadane informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika, ale są kluczowe dla przeglądarek i wyszukiwarek. To tutaj umieścisz na przykład tag , który definiuje tytuł widoczny na karcie przeglądarki, oraz linki do zewnętrznych plików CSS czy JavaScript. Zawsze upewniam się, że w tej sekcji znajduje się również tag , który jest absolutnie niezbędny do poprawnego wyświetlania polskich znaków diakrytycznych.

Natomiast sekcja to serce Twojej strony, ponieważ to właśnie w niej znajduje się cała widoczna treść. Wszystko, co użytkownik zobaczy na stronie tekst, obrazy, linki, przyciski, formularze umieszczamy właśnie tutaj. To jest przestrzeń, w której będziemy pracować najczęściej, dodając elementy, które faktycznie tworzą wizualną stronę internetową.

Oto minimalny szablon dokumentu HTML5, który możesz wykorzystać jako punkt wyjścia:

   

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

Kluczowy moment: Jak poprawnie zapisać plik HTML i uniknąć problemów z polskimi znakami?

Po napisaniu kodu HTML w edytorze, najważniejszym krokiem jest jego poprawne zapisanie. Aby przeglądarka internetowa rozpoznała Twój plik jako dokument HTML, musi on być zapisany z rozszerzeniem `.html` lub `.htm`. Jeśli zapiszesz go jako `.txt` (co jest domyślnym rozszerzeniem dla Notatnika), przeglądarka potraktuje go jako zwykły plik tekstowy i nie wyświetli strony poprawnie. Pamiętaj o tym, to częsty błąd początkujących!

Kolejną bardzo ważną kwestią, szczególnie w Polsce, jest kodowanie znaków. Aby Twoje polskie znaki diakrytyczne (takie jak "ą", "ę", "ć", "ł", "ń", "ó", "ś", "ź", "ż") wyświetlały się poprawnie, musisz upewnić się, że Twój plik jest zapisany w kodowaniu UTF-8. Dodatkowo, w sekcji Twojego dokumentu HTML, zawsze umieść tag . Ten tag informuje przeglądarkę, jakiego kodowania używasz, eliminując problemy z "krzaczkami" i zapewniając, że Twoja strona będzie wyglądać tak, jak tego chcesz.

Oto kroki, jak poprawnie zapisać plik HTML w większości edytorów tekstu (np. w Notatniku lub VS Code):

1. W menu edytora wybierz opcję "Plik" -> "Zapisz jako...".
2. W oknie dialogowym "Zapisz jako" wprowadź nazwę pliku, np. moja-strona.html. Upewnij się, że na końcu nazwy znajduje się `.html`.
3. W polu "Typ pliku" (lub "Zapisz jako typ") wybierz opcję "Wszystkie pliki" (lub "All Files"). To kluczowe, aby edytor nie dodał automatycznie rozszerzenia `.txt`.
4. W polu "Kodowanie" (lub "Encoding") wybierz "UTF-8". To zapewni poprawne wyświetlanie polskich znaków.
5. Wybierz miejsce na dysku, gdzie chcesz zapisać swój plik, a następnie kliknij "Zapisz".

Po zapisaniu pliku możesz go otworzyć w przeglądarce, klikając dwukrotnie na jego ikonę. Twoja pierwsza strona HTML powinna się wyświetlić!

Ożywiamy stronę: Jak dodawać tekst, nagłówki i obrazy za pomocą tagów?

Teraz, gdy masz już podstawowy szkielet i wiesz, jak zapisać plik, możemy zacząć dodawać do niego treść. HTML oferuje szereg tagów, które pozwalają strukturyzować informacje na stronie. Jednymi z najważniejszych są tagi nagłówkowe, od

Tytuł główny strony
Podtytuł sekcji
Nagłówek podsekcji

Do wstawiania bloków tekstu i tworzenia akapitów używamy tagu

To jest pierwszy akapit mojej strony internetowej. Tutaj umieszczam ważne informacje.
A to jest kolejny akapit, który kontynuuje moją opowieść.

Strony internetowe to przede wszystkim sieć powiązań, a te tworzymy za pomocą linków (odnośników). Służy do tego tag (od ang. anchor). Kluczowym atrybutem dla linku jest href, który określa adres URL, do którego link prowadzi. Może to być inna strona w internecie, inna sekcja na tej samej stronie, a nawet plik do pobrania. Warto zawsze pamiętać o dodawaniu czytelnego tekstu wewnątrz tagu , który opisuje cel linku.

Odwiedź stronę Google po więcej informacji.

Aby wstawić obrazy na stronę, używamy tagu . Jest to tak zwany tag samo-zamykający się, co oznacza, że nie ma tagu zamykającego . Posiada on dwa obowiązkowe atrybuty: src i alt. Atrybut src (source) wskazuje ścieżkę do pliku obrazu (np. obrazek.jpg). Atrybut alt (alternative text) jest niezwykle ważny zawiera tekst alternatywny, który wyświetla się, gdy obraz nie może zostać załadowany, a także jest czytany przez czytniki ekranowe dla osób niewidomych. Ma również znaczenie dla SEO.

Do uporządkowania treści w formie list używamy dwóch głównych typów: list punktowanych (nieuporządkowanych) i list numerowanych (uporządkowanych). Listy punktowane tworzymy za pomocą tagu

Moje ulubione owoce:
 
Jabłka
 
Banany
 
Truskawki
 
Przeczytaj również: Jak dodać kalendarz HTML? Wybierz idealny sposób dla siebie
Kroki do sukcesu:
 
Zaplanuj
 
Działaj
 
Analizuj

Tekst 
Tekst