Co jest potrzebne, aby napisać stronę w Notatniku?
Do stworzenia prostej strony internetowej nie potrzebujesz specjalnego programu ani serwera. Wystarczy zwykły edytor tekstu, taki jak Notatnik w Windows, oraz przeglądarka internetowa. Plik zapisany na komputerze możesz otworzyć lokalnie i od razu sprawdzić, jak wygląda przygotowana treść.
HTML, czyli HyperText Markup Language, to język znaczników opisujący strukturę strony. Przeglądarka odczytuje jego elementy i wyświetla je jako nagłówki, akapity, odnośniki, obrazy oraz inne części witryny. HTML porządkuje treść, ale sam nie odpowiada za jej zaawansowany wygląd ani interaktywność. Za te zadania służą odpowiednio CSS i JavaScript. Do pierwszej strony możesz jednak użyć samego HTML.
Popularność tego standardu pokazuje, jak ważny jest w internecie. Według zestawienia W3Techs HTML występuje na 97,8% stron, dla których rozpoznano język znaczników, a HTML5 wskazano na 96,1% wszystkich analizowanych witryn. Są to dane monitoringu technologii stron, a nie spis całego internetu. Współczesne witryny opierają się głównie na HTML5 i korzystają z elementów, które jasno opisują rolę poszczególnych części treści.
Jak przygotować podstawowy dokument HTML?
Otwórz Notatnik i wpisz lub wklej poniższy kod. To szkielet dokumentu, który zawiera deklarację typu dokumentu, element główny, sekcję z informacjami o stronie oraz widoczną treść:
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Witaj!</h1>
<p>To moja pierwsza strona internetowa.</p>
</body>
</html>
Deklaracja <!doctype html> informuje przeglądarkę, że dokument korzysta ze współczesnego standardu HTML. Element <html> obejmuje całą stronę. W jego atrybucie lang="pl" określasz język treści, co pomaga między innymi narzędziom wspomagającym prawidłowo ją interpretować.
Sekcja <head> zawiera informacje o dokumencie, w tym kodowanie znaków i tytuł karty. Ustawienie charset="UTF-8" pomaga poprawnie wyświetlać polskie litery. Tytuł z elementu <title> pojawia się zwykle na karcie przeglądarki, a nie w widocznej treści strony. Element <body> obejmuje natomiast to, co użytkownik widzi po otwarciu pliku.
Jak zapisać plik i otworzyć go w przeglądarce?
W Notatniku wybierz opcję „Zapisz jako”. Nadaj plikowi nazwę index.html. Taką nazwę często stosuje się dla strony głównej witryny, ale możesz użyć też innej nazwy, o ile kończy się ona rozszerzeniem .html. Jeśli okno zapisu pozwala wybrać typ pliku, wskaż „Wszystkie pliki”. Dzięki temu Notatnik nie dopisze przypadkowo rozszerzenia .txt, które może sprawić, że dokument nie otworzy się jako strona.
Po zapisaniu znajdź plik w folderze i otwórz go dwukrotnym kliknięciem. System uruchomi przeglądarkę, która odczyta kod i wyświetli nagłówek „Witaj!” oraz akapit. Nie potrzebujesz do tego połączenia z internetem ani uruchomionego serwera. To prosty sposób, by sprawdzić działanie dokumentu przed publikacją w sieci.
Gdy zmienisz tekst w Notatniku, najpierw zapisz plik, a potem odśwież kartę przeglądarki. Przydatny schemat pracy to edytuj, zapisz, odśwież, sprawdź. Pozwala szybko ocenić rezultat i znaleźć pomyłki. Jeśli przeglądarka pokazuje kod zamiast strony, sprawdź, czy plik ma rozszerzenie .html, a nie .txt, oraz czy został zapisany jako zwykły plik tekstowy.
Jak dodawać treść, odnośniki i obrazy?
Znaczniki HTML obejmują różne rodzaje treści. Element <h1> oznacza główny nagłówek strony, a <p> akapit. Odnośnik tworzysz za pomocą <a>, a obraz dodajesz elementem <img>. Większość elementów ma znacznik otwierający i zamykający, a właściwa treść znajduje się pomiędzy nimi, na przykład: <p>Przykładowy tekst</p>.
Odnośnik może prowadzić do innej strony. Zapisz go w takiej formie: <a href="https://example.com">Odwiedź stronę</a>. Atrybut href wskazuje adres, a tekst między znacznikami wyjaśnia użytkownikowi, dokąd prowadzi link. Warto wybierać opisy konkretne i zrozumiałe zamiast ogólnych sformułowań, takich jak „kliknij tutaj”.
Obraz możesz dodać za pomocą kodu <img src="obraz.jpg" alt="Opis zdjęcia">. Atrybut src wskazuje plik graficzny, a alt zawiera jego tekstowy opis. Umieść obraz.jpg w tym samym folderze co dokument albo podaj poprawną ścieżkę do pliku. Tekst alternatywny pomaga osobom korzystającym z czytników ekranu i wyświetla się, gdy obraz nie może zostać załadowany.
W większej treści warto stosować nagłówki zgodnie z ich hierarchią: główny tytuł oznaczyć jako h1, a podległe mu części jako kolejne poziomy. Nie wybieraj nagłówka wyłącznie dlatego, że jego domyślny rozmiar pasuje do projektu. Jego zadaniem jest opisywanie struktury informacji.
Jak uporządkować stronę i rozwijać projekt?
Oprócz nagłówków i akapitów HTML udostępnia elementy semantyczne, które pomagają podzielić stronę według funkcji. <header> może zawierać nagłówek witryny, <nav> menu, <main> główną treść, <section> jej tematyczną część, a <footer> stopkę. Takie nazwy ułatwiają zrozumienie układu dokumentu zarówno osobom czytającym kod, jak i technologiom przetwarzającym stronę.
Notatnik nie podświetla składni ani automatycznie nie wykrywa błędów, ale nadal pozwala napisać poprawny HTML. Jeśli strona nie wyświetla się zgodnie z oczekiwaniami, sprawdź, czy znaczniki mają nawiasy ostrokątne, czy elementy wymagające zamknięcia mają oba znaczniki oraz czy nazwy plików i ścieżki do obrazów są poprawne. Częstym źródłem problemów jest też zapisanie dokumentu jako pliku tekstowego z końcówką .txt.
Na początek wykonaj prosty test: zapisz szkielet jako index.html, otwórz go w przeglądarce, zmień tekst akapitu w Notatniku, zapisz dokument i odśwież widok. Gdy projekt urośnie, możesz przenieść pracę do edytora kodu oferującego podpowiedzi, skorzystać z walidacji HTML i dodać osobne pliki CSS oraz JavaScript. Dzięki temu zachowasz czytelny podział: HTML będzie opisywać strukturę, CSS wygląd, a JavaScript zachowanie elementów.
Materiały źródłowe
- https://w3techs.com/technologies/details/ml-html_any
- https://html.spec.whatwg.org/dev//semantics.html
- https://w3techs.com/technologies/details/ml-html5
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax