Aby rozpocząć tworzenie strony w HTML, należy zacząć od poznania absolutnych podstaw – od przygotowania środowiska pracy, przez zrozumienie struktury dokumentu HTML, aż po tworzenie pierwszych elementów i rozbudowę funkcjonalności. Poniżej znajdziesz kompletny poradnik, który przeprowadzi Cię przez każdy etap tego procesu – również z przykładami kodu i praktycznymi wskazówkami.
Przygotowanie środowiska i plików
Podstawowym narzędziem do tworzenia stron HTML jest prosty edytor tekstu, taki jak Notatnik na Windows, ale wygodniej użyć edytora dedykowanego programistom, np. Visual Studio Code lub Notepad++.
Aby uporządkować swoją pracę:
- Utwórz nowy folder na dysku komputera, np. o nazwie
moja-strona; - Wewnątrz folderu utwórz plik o nazwie index.html – to będzie Twoja główna strona;
- Dla lepszego rozdzielenia treści i wyglądu strony warto od razu utworzyć plik style.css (odpowiedzialny za wygląd).
Szkielet dokumentu HTML
Każda strona HTML wymaga odpowiedniego szkieletu. To tzw. struktura podstawowa –
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja pierwsza strona</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest mój pierwszy dokument HTML.</p>
</body>
</html>
Wyjaśnienie elementów –
<!DOCTYPE html>– deklaruje, że używasz najnowszego standardu HTML5,<html lang="pl">– otwiera dokument i określa język witryny,<head>– zawiera informacje o stronie (meta informacje, tytuł, odnośnik do stylów),<title>– tytuł wyświetlany na karcie przeglądarki,<body>– widoczna część strony, tu umieszczasz główne treści.
Tworzenie zawartości strony
Nagłówki i akapity
HTML pozwala uporządkować tekst w nagłówki (<h1> do <h6>) oraz akapity (<p>):
<h1>Najważniejszy nagłówek strony</h1>
<h2>Podtytuł sekcji</h2>
<p>To jest zwykły akapit tekstu.</p>
Listy
Możesz tworzyć listy punktowane i numerowane:
<ul>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
</ul>
<ol>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
</ol>
Linki i obrazy
Dodawanie odnośników i grafik do strony:
<a href="https://adres-strony.pl">Kliknij tutaj</a>
<img src="sciezka-do-obrazka.jpg" alt="Opis obrazka">
Dodawanie stylów (CSS)
Aby strona wyglądała bardziej atrakcyjnie, stosuje się arkusz stylów CSS, np. w pliku style.css:
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
color: #222;
}
h1 {
color: #0033cc;
}
Ten plik podłączasz do HTML za pomocą tagu <link> w sekcji <head>.
Wyświetlanie strony w przeglądarce
Aby obejrzeć efekt, zapisz zmiany w pliku index.html, następnie dwukrotnie kliknij plik, aby otworzyć go w przeglądarce internetowej.
Przykłady zastosowań i rozbudowy strony
Strona tworzona w HTML może służyć jako:
- Wizytówka osobista – z danymi kontaktowymi, zdjęciem, opisem;
- Portfolio – z galerią projektów, opisami, linkami do realizacji;
- Blog – z wpisami, listami kategorii i komentarzami;
- Strona informacyjna – z tekstami, grafikami, tabelami.
Przykładowa struktura prostej strony-wizytówki:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Jan Nowak – Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Jan Nowak</h1>
<p>Web developer • Programista • Grafik</p>
</header>
<nav>
<ul>
<li><a href="#o-mnie">O mnie</a></li>
<li><a href="#projekty">Projekty</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
<section id="o-mnie">
<h2>O mnie</h2>
<p>Kilka słów o sobie...</p>
</section>
<section id="projekty">
<h2>Projekty</h2>
<ul>
<li>Strona A – opis projektu</li>
<li>Strona B – opis projektu</li>
</ul>
</section>
<section id="kontakt">
<h2>Kontakt</h2>
<p>[email protected]</p>
</section>
</body>
</html>
Dalsze kroki
Nauka HTML to dopiero początek. Warto stopniowo uczyć się:
- Rozszerzania strony o formularze kontaktowe,
- osadzania multimediów (filmy, mapy),
- wykorzystania szablonów i frameworków (np. Bootstrap) dla szybszego rozwoju,
- nauki języka CSS na wyższym poziomie oraz podstaw JavaScriptu – dla tworzenia interaktywnych elementów.
Przestrzegając powyższych instrukcji, stworzysz swoją pierwszą, w pełni funkcjonalną stronę w HTML i otworzysz sobie drogę do bardziej zaawansowanych projektów. Nauka w praktyce, eksperymentowanie z kodem i sukcesywne dodawanie nowych funkcji to klucz do opanowania sztuki tworzenia stron internetowych.
