`, ``, `

`, ``, które są fundamentem każdej strony.

Zapisz plik z rozszerzeniem `.html`, aby przeglądarka internetowa mogła go poprawnie odczytać.

Otwórz plik bezpośrednio w przeglądarce, aby natychmiast zobaczyć efekt swojej pracy.

Unikaj typowych błędów, takich jak niezamknięte znaczniki, błędne kodowanie znaków czy niewłaściwy format zapisu.

Czym jest HTML i dlaczego nie potrzebujesz drogich programów?

HTML, czyli HyperText Markup Language, to fundament każdej strony internetowej. To język, który służy do strukturyzowania treści mówi przeglądarce, co jest nagłówkiem, co akapitem, gdzie znajduje się obrazek, a gdzie link. Wyobraź sobie HTML jako szkielet budynku bez niego nie ma mowy o ścianach czy dachu. Co najważniejsze, do jego tworzenia nie potrzebujesz żadnych drogich, specjalistycznych programów. Na Macu masz już wszystko, co niezbędne, aby zacząć swoją przygodę z kodowaniem, a jeśli zechcesz czegoś więcej, darmowe alternatywy są na wyciągnięcie ręki.

Dwa kluczowe narzędzia do stworzenia pierwszej strony na Macu

Z mojego doświadczenia wiem, że początki bywają trudne, ale odpowiednie narzędzia mogą znacząco ułatwić naukę. W tym poradniku skupimy się na dwóch głównych edytorach, które pozwolą Ci pisać kod HTML na macOS. Pierwszy to wbudowany TextEdit, idealny na absolutny start. Drugi to Visual Studio Code, darmowe, ale już bardzo zaawansowane narzędzie, które polecam każdemu, kto myśli o kodowaniu na poważnie.

Opcja nr 1: Wykorzystaj to, co już masz wbudowany edytor TextEdit

TextEdit to domyślny edytor tekstu na każdym Macu. Chociaż z założenia służy do pisania dokumentów tekstowych, po odpowiedniej konfiguracji może stać się prostym narzędziem do tworzenia plików HTML. Jest to świetna opcja, aby postawić pierwsze kroki bez instalowania czegokolwiek. Pamiętaj jednak, że jego możliwości są ograniczone i szybko poczujesz potrzebę czegoś więcej.

Opcja nr 2: Zainstaluj darmowe narzędzie dla profesjonalistów Visual Studio Code

Jeśli myślisz o kodowaniu na dłuższą metę, Visual Studio Code (VS Code) to absolutny "must-have". Jest to darmowy, open-source'owy edytor kodu stworzony przez Microsoft, który zyskał ogromną popularność wśród deweloperów na całym świecie. Oferuje on mnóstwo funkcji ułatwiających pracę, takich jak kolorowanie składni (co sprawia, że kod jest czytelniejszy), autouzupełnianie (co przyspiesza pisanie) oraz wbudowany terminal. To narzędzie, które z pewnością przyspieszy Twoją naukę i sprawi, że kodowanie stanie się przyjemniejsze.

Twoja pierwsza strona HTML krok po kroku w TextEdit

Zacznijmy od TextEdit. To świetny sposób, aby poczuć, jak to jest pisać kod, bez konieczności instalowania dodatkowego oprogramowania. Pamiętaj, że kluczem do sukcesu jest odpowiednie przygotowanie tego edytora.

Jak "zmusić" TextEdit do pracy z kodem? Kluczowe ustawienia

TextEdit domyślnie tworzy dokumenty w formacie RTF (Rich Text Format), który dodaje niewidoczne dla nas formatowanie. To jest problem, bo przeglądarka internetowa nie zrozumie HTML-a, jeśli będzie on "zanieczyszczony" dodatkowymi informacjami o czcionkach czy kolorach. Musimy więc przestawić TextEdit na tryb "zwykłego tekstu" (Plain Text).

Krok 1: Przełączanie na tryb zwykłego tekstu (Plain Text)

1. Otwórz TextEdit.
2. W nowym dokumencie przejdź do menu "Format" na górze ekranu.
3. Wybierz opcję "Utwórz zwykły tekst" (Make Plain Text) lub użyj skrótu klawiszowego Shift + Command + T. Zobaczysz, że pasek formatowania zniknie.
4. Aby mieć pewność, że każdy nowy dokument będzie zwykłym tekstem, przejdź do "TextEdit" > "Preferencje..." (Preferences...).
5. W zakładce "Nowy dokument" (New Document) zaznacz opcję "Zwykły tekst" (Plain Text).

Krok 2: Konfiguracja zapisu, aby uniknąć problemów z formatowaniem

1. W "Preferencjach..." TextEdit, w zakładce "Otwieranie i zachowywanie" (Open and Save), upewnij się, że opcja "Ignoruj polecenia tekstu sformatowanego w plikach HTML" (Ignore rich text commands in HTML files) jest zaznaczona. To zapobiegnie dodawaniu niepotrzebnych znaczników do Twojego kodu.
2. Zaznacz również opcję "Wyświetl pliki HTML jako kod HTML zamiast sformatowanego tekstu" (Display HTML files as HTML code instead of formatted text).

Tworzymy pierwszy plik: podstawowa struktura kodu

Teraz, gdy TextEdit jest gotowy, możemy stworzyć nasz pierwszy plik HTML. Każda strona internetowa ma pewien standardowy "szkielet", który musimy zawsze stosować.

Co to jest ``, `` i ``? Anatomia strony

Zacznijmy od podstaw:

• </code>: To deklaracja typu dokumentu. Mówi przeglądarce, że ma do czynienia z dokumentem HTML5. Zawsze umieszczaj ją na samym początku pliku.
• : To główny znacznik, który obejmuje całą zawartość strony. Wszystko, co znajduje się w Twojej stronie, musi być wewnątrz tego znacznika.
• : Ta sekcja zawiera metadane o stronie, czyli informacje niewidoczne bezpośrednio dla użytkownika, ale ważne dla przeglądarki i wyszukiwarek. Tutaj umieszczamy np. (bardzo ważne dla polskich znaków!) oraz , czyli tytuł, który pojawi się na karcie przeglądarki.
• : To serce Twojej strony! Wszystko, co użytkownik widzi na stronie tekst, obrazy, linki znajduje się wewnątrz tego znacznika.

Wpisujemy pierwszy kod: nagłówek i akapit

Otwórz nowy, pusty dokument w TextEdit (upewnij się, że jest w trybie zwykłego tekstu) i wpisz poniższy kod:

  

 
Witaj na mojej stronie!
 
To jest mój pierwszy akapit w HTML. Jestem dumny!

W tym przykładzie

to znacznik nagłówka pierwszego stopnia (najważniejszy), a

to znacznik akapitu. Zwróć uwagę, że każdy znacznik otwierający (np.

) ma swój odpowiadający znacznik zamykający (

). To bardzo ważne dla prawidłowej struktury!

Zapisywanie i podgląd: jak zobaczyć efekt swojej pracy?

Napisanie kodu to jedno, ale zobaczenie go w akcji to zupełnie inna sprawa. Musimy teraz zapisać nasz plik w odpowiednim formacie i otworzyć go w przeglądarce.

Dlaczego rozszerzenie .html jest tak ważne?

Kiedy zapisujesz plik, najważniejsze jest, aby nadać mu odpowiednie rozszerzenie: .html (lub .htm, choć .html jest bardziej powszechne). To rozszerzenie informuje system operacyjny i przeglądarkę, że mają do czynienia z dokumentem HTML, a nie zwykłym plikiem tekstowym. Bez niego przeglądarka nie będzie wiedziała, jak go zinterpretować.

Jak otworzyć stworzoną stronę w przeglądarce Safari lub Chrome?

1. W TextEdit, po wpisaniu kodu, przejdź do "Plik" > "Zachowaj..." (File > Save...).
2. W polu "Nazwa" (Name) wpisz np. index.html. Nazwa index.html jest standardową nazwą dla strony głównej.
3. Wybierz miejsce, gdzie chcesz zapisać plik (np. na Biurku lub w specjalnie utworzonym folderze).
4. Upewnij się, że w opcjach zapisu, jeśli się pojawią, format jest ustawiony na "Zwykły tekst" (Plain Text) i że nie ma żadnych dodatkowych rozszerzeń typu `.txt`.
5. Kliknij "Zachowaj" (Save).
6. Teraz otwórz Finder i przejdź do miejsca, gdzie zapisałeś plik index.html.
7. Kliknij dwukrotnie na plik index.html. Domyślnie otworzy się on w Twojej domyślnej przeglądarce (np. Safari lub Chrome). Możesz też kliknąć prawym przyciskiem myszy, wybrać "Otwórz za pomocą" (Open With) i wybrać preferowaną przeglądarkę.

Gratulacje! Właśnie zobaczyłeś swoją pierwszą stronę HTML w przeglądarce!

Przejdź na wyższy poziom: edytor Visual Studio Code

Skoro już wiesz, jak działa TextEdit, pora na narzędzie, które zmieni Twoje podejście do kodowania. Visual Studio Code to edytor, który polecam każdemu, kto chce rozwijać swoje umiejętności w tworzeniu stron. Różnica w komforcie pracy jest kolosalna.

Dlaczego warto poświęcić 5 minut na instalację VS Code?

Instalacja VS Code to inwestycja, która zwraca się błyskawicznie. Oto dlaczego warto:

• Kolorowanie składni: Różne elementy kodu (znaczniki, atrybuty, tekst) są wyświetlane w różnych kolorach, co znacząco poprawia czytelność i pomaga w szybkim wykrywaniu błędów.
• Autouzupełnianie kodu (IntelliSense): VS Code podpowiada Ci znaczniki i atrybuty w trakcie pisania, co oszczędza czas i minimalizuje literówki.
• Wbudowany terminal: Możesz wykonywać polecenia systemowe bezpośrednio w edytorze, co jest bardzo wygodne przy bardziej zaawansowanych projektach.
• System rozszerzeń: VS Code ma ogromną bibliotekę rozszerzeń, które dodają nowe funkcje, np. podgląd strony na żywo, walidację kodu czy integrację z systemami kontroli wersji.
• Wsparcie dla wielu języków: Oprócz HTML, VS Code świetnie radzi sobie z CSS, JavaScriptem i wieloma innymi językami programowania.

Instalacja i pierwsza konfiguracja VS Code na macOS

Instalacja Visual Studio Code na Macu jest niezwykle prosta:

1. Odwiedź oficjalną stronę internetową code.visualstudio.com.
2. Pobierz wersję dla macOS.
3. Po pobraniu, otwórz plik .zip.
4. Przeciągnij aplikację "Visual Studio Code" do folderu "Aplikacje" (Applications).
5. Możesz uruchomić VS Code z Launchpada lub Findera. Przy pierwszym uruchomieniu system może zapytać, czy na pewno chcesz otworzyć aplikację pobraną z internetu potwierdź.

VS Code jest gotowy do pracy od razu po instalacji. Nie musisz martwić się o żadne specjalne ustawienia trybu tekstu, jak w TextEdit.

Jak stworzyć i zapisać plik HTML w VS Code porównanie

Tworzenie i zapisywanie plików HTML w VS Code jest znacznie bardziej intuicyjne:

1. Otwórz Visual Studio Code.
2. Przejdź do "File" > "New File" (Plik > Nowy plik) lub użyj skrótu Command + N.
3. Zacznij pisać swój kod HTML. VS Code automatycznie rozpozna, że piszesz HTML, gdy zaczniesz używać znaczników.
4. Aby zapisać, przejdź do "File" > "Save As..." (Plik > Zapisz jako...) lub użyj skrótu Shift + Command + S.
5. Wpisz nazwę pliku, np. moja_strona.html. VS Code automatycznie doda odpowiednie rozszerzenie i ustawi typ pliku jako HTML.

To wszystko! VS Code domyślnie traktuje pliki jako kod, więc nie ma obaw o formatowanie RTF czy inne problemy, które napotkaliśmy w TextEdit. Po prostu piszesz, zapisujesz, a potem otwierasz w przeglądarce tak samo, jak plik z TextEdit.

Dodaj kluczowe elementy do prostej strony

Skoro masz już swój edytor i podstawową strukturę, czas rozbudować naszą stronę o kolejne, często używane elementy. To właśnie one sprawiają, że strona staje się użyteczna i informacyjna.

Jak stworzyć strukturę nagłówków od H1 do H6?

Nagłówki HTML (od

do

) są kluczowe dla struktury i czytelności treści.

to najważniejszy nagłówek, zwykle używany tylko raz na stronę, dla głównego tytułu.

to podtytuły,

to podtytuły podtytułów itd. Używaj ich hierarchicznie, tak jak w spisie treści książki.

Główny tytuł strony
Pierwsza sekcja
Podsekcja w pierwszej sekcji
Jakiś tekst w podsekcji.
Druga sekcja
Inny tekst w drugiej sekcji.

Tworzenie akapitów i dodawanie pogrubionego tekstu

Akapity to podstawowy sposób na prezentowanie tekstu. Używamy do tego znacznika

. Jeśli chcesz podkreślić ważny fragment tekstu, użyj znacznika . Ma on znaczenie semantyczne mówi przeglądarce i czytnikom ekranowym, że ten fragment jest istotny. Możesz też użyć znacznika , który po prostu pogrubia tekst bez dodatkowego znaczenia semantycznego.

To jest zwykły akapit na mojej stronie.
Ten fragment tekstu jest bardzo ważny i chcę go wyróżnić.
Tutaj mamy tylko pogrubienie bez dodatkowego znaczenia.

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

Linki, czyli odnośniki, to serce internetu. Pozwalają użytkownikom przechodzić między stronami. Tworzymy je za pomocą znacznika (anchor) i atrybutu href (hypertext reference), który wskazuje adres docelowy.

Odwiedź stronę Google, aby dowiedzieć się więcej.
Możesz też otworzyć link w nowej karcie: Wikipedia.

Atrybut target="_blank" sprawia, że link otworzy się w nowej karcie przeglądarki, co jest często pożądane przy linkach zewnętrznych.

Wstawianie obrazka na stronę o czym musisz pamiętać?

Obrazki dodają stronie życia! Wstawiamy je za pomocą znacznika . Jest to znacznik samodomykający się, co oznacza, że nie ma znacznika zamykającego (). Kluczowe atrybuty to src (source), który wskazuje ścieżkę do pliku obrazka, oraz alt (alternative text), który jest tekstem wyświetlanym, gdy obrazek się nie załaduje lub dla osób korzystających z czytników ekranowych. Atrybut alt jest niezwykle ważny dla dostępności i SEO!

Pamiętaj, aby plik obrazek.jpg znajdował się w tym samym folderze co Twój plik HTML, albo podaj pełną ścieżkę do obrazka (np. "images/obrazek.jpg", jeśli obrazek jest w podfolderze "images").

Najczęstsze pułapki i błędy: jak ich unikać?

W początkach nauki kodowania błędy są nieuniknione. Ważne jest, aby wiedzieć, jak je rozpoznawać i naprawiać. Oto kilka najczęstszych problemów, z którymi się spotkasz.

Problem nr 1: "Krzaczki" zamiast polskich znaków (błędne kodowanie)

Ach, te "krzaczki"! To klasyczny problem, gdy polskie znaki (ą, ć, ę, ł, ń, ó, ś, ź, ż) wyświetlają się jako dziwne symbole. Przyczyną jest zazwyczaj niepoprawne kodowanie znaków. Rozwiązanie jest proste: zawsze dodawaj znacznik w sekcji Twojego dokumentu HTML. UTF-8 to uniwersalne kodowanie, które obsługuje wszystkie znaki, w tym polskie.

Problem nr 2: Strona wyświetla się jako zwykły tekst (błąd zapisu w TextEdit)

Jeśli Twoja strona, zamiast wyświetlać się poprawnie w przeglądarce, pokazuje cały kod HTML jako zwykły tekst, to niemal na pewno oznacza, że plik został zapisany w TextEdit w formacie RTF, a nie jako "zwykły tekst", lub nie ma rozszerzenia `.html`. Wróć do sekcji o konfiguracji TextEdit i upewnij się, że przestawiłeś go na tryb "Zwykły tekst" i zapisałeś plik z rozszerzeniem `.html`.

Przeczytaj również: Jak stworzyć pierwszą stronę HTML w Notatniku? Poradnik krok po kroku

Problem nr 3: Niezamknięte znaczniki i chaos w strukturze

HTML jest językiem znaczników, a każdy znacznik otwierający (np.

) powinien mieć swój odpowiadający znacznik zamykający (

), chyba że jest to znacznik samodomykający się (jak ). Niezamknięte znaczniki mogą prowadzić do nieprzewidywalnych błędów w wyświetlaniu strony. Dodatkowo, staraj się utrzymywać kod w czystej, zagnieżdżonej strukturze (używaj wcięć), co znacząco poprawia jego czytelność i ułatwia debugowanie.

Zła struktura:

To jest akapit ważny tekst

Dobra struktura:

To jest akapit ważny tekst

Co dalej? Rozwijaj swoje umiejętności WWW

Stworzenie pierwszej strony HTML to dopiero początek fantastycznej podróży! Oto kilka kolejnych kroków, które możesz podjąć, aby rozwijać swoje umiejętności:

• Poznaj CSS (Cascading Style Sheets): HTML to szkielet, a CSS to "ubranie" i "makijaż" Twojej strony. Dzięki CSS nadasz jej kolory, czcionki, układy i sprawisz, że będzie wyglądać atrakcyjnie.
• Zacznij uczyć się JavaScriptu: Jeśli chcesz, aby Twoja strona była interaktywna reagowała na kliknięcia, wyświetlała animacje, sprawdzała formularze JavaScript jest językiem, którego potrzebujesz.
• Poznaj więcej znaczników HTML5: Współczesny HTML oferuje wiele nowych, semantycznych znaczników (np.
  , ,
  , ), które pomagają w budowaniu lepszej struktury strony.
• Waliduj swój kod: Istnieją darmowe walidatory online (np. W3C Markup Validation Service), które sprawdzą Twój kod HTML pod kątem błędów i zgodności ze standardami.
• Eksperymentuj i twórz: Najlepszym sposobem na naukę jest praktyka. Twórz małe projekty, baw się kodem i nie bój się popełniać błędów!