Założenie własnej strony HTML jest procesem dostępnym dla każdego, kto zna podstawy obsługi komputera. Poniżej znajdziesz szczegółowy poradnik krok po kroku, przykłady kodu oraz omówienie praktycznych zastosowań prostych stron HTML.
Planowanie i przygotowanie
Każdą pracę nad stroną internetową warto rozpocząć od określenia jej celu:
- prezentacja informacji o sobie lub firmie,
- portfolio z przykładami prac,
- prosta wizytówka kontaktowa,
- strona edukacyjna, blog czy galeria.
Następnie warto zaplanować jej strukturę, czyli jakie sekcje i podstrony będą niezbędne, np. strona główna, o mnie, kontakt, oferta.
Tworzenie plików i folderów
- utwórz nowy folder, np. „Moja_strona”,
- wewnątrz utwórz plik o nazwie index.html – to będzie główna strona Twojej witryny,
- zaleca się także przygotowanie pliku style.css na potrzeby stylizacji strony (o CSS więcej poniżej).
Pisanie pierwszego kodu HTML
Otwórz plik index.html w dowolnym edytorze tekstowym (np. Notatnik, Notepad++, VS Code) i wpisz podstawowy szkielet strony:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja Pierwsza Strona HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest mój pierwszy projekt WWW.</p>
</body>
</html>
Opis kodu
- <!DOCTYPE html> – informuje przeglądarkę, że używamy HTML5;
- <html lang=”pl”> – całą stronę umieszczamy w tym znaczniku i określamy język;
- <head> – sekcja nagłówkowa, z tytułem, kodowaniem znaków i odwołaniem do stylów;
- <body> – tu pojawiają się wszystkie widoczne dla użytkownika treści (nagłówki, teksty, obrazy, linki itp.).
Dodawanie treści i elementów HTML
Możesz wzbogacić stronę o kolejne elementy:
- nagłówki:
<h2>O mnie</h2>- akapity tekstu:
<p>Mam na imię Anna i uczę się programowania stron WWW.</p>- obrazy:
<img src="moje-zdjecie.jpg" alt="Moje zdjęcie">- linki:
<a href="kontakt.html">Kontakt</a>- listy:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Stylizacja strony za pomocą CSS
Zamiast jednolitego wyglądu możesz dodać style w pliku style.css, np.:
body {
background-color: #eef2f5;
color: #222;
font-family: Arial, sans-serif;
}
h1 {
color: #3385ff;
}
Dzięki temu Twoja strona stanie się bardziej atrakcyjna i czytelna.
Zapisz i wyświetl swoją stronę
- zapisz pliki index.html i style.css w tym samym folderze,
- otwórz index.html w przeglądarce internetowej (np. Chrome, Firefox) poprzez dwukrotne kliknięcie pliku lub przeciągnięcie go do okna przeglądarki.
Zastosowania prostych stron HTML
Tak stworzone strony mogą mieć wiele praktycznych zastosowań:
- Strona wizytówkowa – możesz zamieścić dane kontaktowe, krótką prezentację;
- Portfolio – zaprezentujesz swoje projekty lub osiągnięcia;
- Blog lub notatnik – częste dodawanie nowych wpisów oparte o kolejne pliki HTML;
- Strona promocyjna (landing page) – do promocji wydarzenia bądź produktu;
- Projekt edukacyjny – nauka i rozwijanie swoich umiejętności programistycznych.
Kolejne kroki – rozwijanie strony
Z czasem możesz:
- dodawać kolejne podstrony (np. o-mnie.html, kontakt.html) i łączyć je za pomocą linków,
- zintegrować bardziej zaawansowane funkcje używając JavaScript,
- publikować stronę w Internecie za pomocą darmowego hostingu lub płatnego serwera.
Porady na start
- zawsze testuj swoją stronę we własnej przeglądarce,
- regularnie zapisuj pliki podczas pracy,
- eksperymentuj z różnymi znacznikami HTML i stylami CSS, żeby poznawać nowe możliwości.
Tak przygotowana strona HTML jest podstawą do dalszego rozwoju w kierunku tworzenia nowoczesnych, interaktywnych witryn internetowych.
