`, `

HTML: Niezmienny fundament każdej strony w internecie

Co to jest HTML i dlaczego nie jest to język programowania?

HTML, czyli HyperText Markup Language, to język znaczników, który służy do tworzenia struktury treści na stronach internetowych. Pomyśl o nim jak o szkielecie, na którym budujesz całą swoją witrynę. Ważne jest, aby zrozumieć, że HTML nie jest językiem programowania. Nie wykonuje on żadnych operacji logicznych, obliczeń ani złożonych instrukcji. Jego jedynym zadaniem jest opisanie, co jest nagłówkiem, co akapitem, gdzie znajduje się obraz, a gdzie link. To po prostu sposób na uporządkowanie informacji dla przeglądarki.

Różnica między strukturą (HTML), wyglądem (CSS) a działaniem (JavaScript)

Kiedy zaczynasz przygodę z web developmentem, często spotkasz się z trzema filarami: HTML, CSS i JavaScript. Wyobraź sobie budynek. HTML to fundamenty i ściany nośne tworzy szkielet, określa, gdzie będą pokoje, okna i drzwi. CSS (Cascading Style Sheets) to cała reszta: elewacja, kolor ścian, rodzaj podłóg, meble czyli nadaje budynkowi wygląd i styl. Z kolei JavaScript to instalacje elektryczne, hydrauliczne, inteligentne systemy dodaje interaktywność, sprawia, że coś się dzieje, gdy naciśniesz przycisk, lub że strona reaguje na Twoje działania. Każdy z tych elementów ma swoje unikalne zadanie i razem tworzą kompletną, funkcjonalną stronę internetową.

HTML5: Dlaczego właśnie tej wersji musisz się nauczyć?

Obecnie standardem w świecie web developmentu jest HTML5. To nie tylko ewolucja poprzednich wersji, ale prawdziwa rewolucja, która wprowadziła wiele nowych, przydatnych funkcji. Najważniejsze dla początkujących są nowe, semantyczne tagi (o których opowiem szerzej później), które pomagają lepiej opisać strukturę strony, a także ulepszenia w obsłudze multimediów, takie jak wbudowane wsparcie dla audio i wideo. Ucząc się HTML5, masz pewność, że Twój kod będzie nowoczesny, zgodny ze standardami i przyjazny dla wyszukiwarek internetowych, co jest kluczowe dla SEO.

Stwórz swoją pierwszą stronę HTML w 15 minut: Praktyczny start

Jakich narzędzi potrzebujesz na start? (Wystarczy notatnik!)

Dobra wiadomość jest taka, że do rozpoczęcia swojej przygody z HTML-em nie potrzebujesz żadnych skomplikowanych programów. Na start wystarczy Ci prosty edytor tekstu, który masz już na swoim komputerze Notatnik w systemie Windows lub TextEdit na macOS. Jednakże, aby znacznie ułatwić sobie pracę i przyspieszyć naukę, gorąco polecam zainwestować czas w poznanie dedykowanych edytorów kodu. Takie narzędzia jak Visual Studio Code (VS Code), Sublime Text czy Atom oferują funkcje takie jak kolorowanie składni (co sprawia, że kod jest czytelniejszy), autouzupełnianie (co oszczędza czas i minimalizuje błędy) oraz podpowiedzi, które są nieocenione, zwłaszcza na początku.

Krok 1: Stworzenie pliku index.html i otwarcie go w przeglądarce

Zacznijmy od absolutnych podstaw:

1. Otwórz swój ulubiony edytor tekstu (np. Notatnik lub VS Code).
2. Wpisz w nim dowolny tekst, na przykład: "Witaj świecie! To moja pierwsza strona HTML!".
3. Zapisz plik. Wybierz opcję "Zapisz jako...", a następnie w polu "Nazwa pliku" wpisz index.html. Upewnij się, że w polu "Typ pliku" (lub "Zapisz jako typ") wybierzesz "Wszystkie pliki" lub "Plain Text" (a nie ".txt"). Zapisz go w łatwo dostępnym miejscu, np. na pulpicie.
4. Teraz znajdź swój nowo utworzony plik index.html. Kliknij na niego dwukrotnie. Powinien otworzyć się w Twojej domyślnej przeglądarce internetowej (np. Chrome, Firefox, Edge), wyświetlając wpisany przez Ciebie tekst. Gratulacje, właśnie stworzyłeś swoją pierwszą stronę HTML!

Krok 2: Podstawowa struktura dokumentu, której nie można pominąć

Każda poprawnie zbudowana strona HTML5 powinna zawierać pewien podstawowy szkielet. To absolutna podstawa, której nie możesz pominąć. Poniżej przedstawiam ten szkielet, a następnie wyjaśnię znaczenie każdego elementu:

• </code>: To deklaracja typu dokumentu. Informuje przeglądarkę, że ma do czynienia z dokumentem HTML5. Zawsze umieszczaj ją na samym początku pliku.
• : To główny element, korzeń całego dokumentu HTML. Atrybut lang="pl" informuje przeglądarki i czytniki ekranu, że zawartość strony jest w języku polskim, co jest dobre dla dostępności i SEO.
• : Sekcja zawiera metadane o stronie czyli informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika, ale są ważne dla przeglądarki i wyszukiwarek. Znajdują się tu takie elementy jak tytuł strony, kodowanie znaków, linki do arkuszy stylów CSS czy skryptów JavaScript.
• : Ten znacznik jest niezwykle ważny, zwłaszcza w Polsce! Określa kodowanie znaków jako UTF-8, co gwarantuje poprawne wyświetlanie polskich liter (ą, ę, ć, ł, ń, ó, ś, ź, ż).
• : Ten znacznik jest kluczowy dla responsywności strony. Mówi przeglądarce, aby dostosowała szerokość strony do szerokości urządzenia i ustawiła początkowe powiększenie na 1.0, co jest podstawą dla poprawnego wyświetlania na smartfonach i tabletach.
• : Tekst umieszczony między tymi znacznikami pojawi się jako tytuł zakładki w przeglądarce. Jest to również jeden z ważniejszych elementów dla SEO.
• : To serce Twojej strony! Wszystko, co chcesz, aby było widoczne dla użytkownika teksty, obrazy, linki, przyciski musi znaleźć się wewnątrz znacznika .

Krok 3: Dodajemy pierwszy tekst i nagłówek zobacz, jak to działa!

Teraz, gdy masz już podstawową strukturę, dodajmy do niej coś widocznego. Otwórz swój plik index.html w edytorze kodu i wklej poniższy kod wewnątrz znacznika :

Witaj na mojej pierwszej stronie!
To jest akapit tekstu. Uczę się HTML i jestem z tego dumny!

Zapisz plik (Ctrl+S lub Cmd+S). Następnie wróć do przeglądarki, w której masz otwartą swoją stronę, i odśwież ją (F5 lub Ctrl+R/Cmd+R). Powinieneś zobaczyć duży nagłówek i akapit tekstu. Widzisz? To naprawdę proste! Właśnie dodałeś swoje pierwsze treści do strony internetowej.

Pierwsze kroki z HTML: Niezbędne znaczniki do poznania

Nagłówki, czyli hierarchia treści od `` do ``

Nagłówki są kluczowe dla strukturyzacji treści i mają ogromne znaczenie zarówno dla czytelności strony, jak i dla SEO. HTML oferuje sześć poziomów nagłówków, od

• Główny tytuł strony

• Nagłówek sekcji

• Podnagłówek w sekcji

• ... aż do

Akapity, pogrubienia i kursywa: Jak formatować tekst?

Podstawowym znacznikiem do tworzenia bloków tekstu jest

To jest zwykły akapit tekstu.
Ten fragment jest bardzo ważny.
A to jest lekko podkreślony tekst.

Listy uporządkowane i nieuporządkowane: Kiedy używać ``, a kiedy ` `?

Listy to świetny sposób na prezentowanie informacji w czytelny sposób. Mamy dwa główne typy:

• Listy nieuporządkowane (
  ): Używaj ich, gdy kolejność elementów nie ma znaczenia (np. lista zakupów). Każdy element listy jest oznaczony znacznikiem
• .
• Listy uporządkowane (
  ): Używaj ich, gdy kolejność elementów jest ważna (np. instrukcja krok po kroku, przepis). Elementy są automatycznie numerowane przez przeglądarkę, również za pomocą znacznika
• .

Linki, czyli ``: Jak tworzyć odnośniki do innych stron i sekcji?

Linki (lub hiperłącza) to to, co sprawia, że internet jest "siecią"! Tworzymy je za pomocą znacznika (anchor) i atrybutu href, który określa docelowy adres. Możesz linkować do innych stron internetowych, do plików, a nawet do konkretnych sekcji na tej samej stronie (używając identyfikatorów id).

Odwiedź Google.
Przejdź do sekcji o mnie na tej stronie.

Obrazy, czyli ``: Jak dodać grafikę i dlaczego atrybut `alt` jest tak ważny?

Obrazy ożywiają każdą stronę! Dodajemy je za pomocą znacznika . Jest to znacznik samodomykający się, co oznacza, że nie potrzebuje osobnego znacznika zamykającego (np. ). Kluczowe atrybuty to src (źródło obrazu, czyli ścieżka do pliku) i alt (tekst alternatywny). Atrybut alt jest niezwykle ważny! Opisuje on zawartość obrazu dla osób niewidomych (korzystających z czytników ekranu) oraz dla wyszukiwarek. Jeśli obraz się nie załaduje, zamiast niego wyświetli się tekst alternatywny. To klucz do dostępności i SEO.

Semantyczny HTML5: Twórz kod zrozumiały dla wyszukiwarek

Koniec ery ``: Czym są znaczniki semantyczne (``, ``, ``, ``, ``)? Wcześniejsze wersje HTML często opierały się na uniwersalnym znaczniku

do grupowania elementów. Choć

nadal jest użyteczny, HTML5 wprowadził znaczniki semantyczne, które znacznie lepiej opisują strukturę i przeznaczenie danej sekcji strony. Dzięki nim przeglądarki i roboty wyszukiwarek mogą łatwiej zrozumieć kontekst treści, co jest ogromną zaletą. Oto kilka najważniejszych:

: Reprezentuje nagłówek sekcji lub całej strony, często zawiera logo, tytuł i nawigację.