Aby utworzyć plik HTML, nie trzeba posiadać zaawansowanej wiedzy programistycznej. Wystarczy postępować według kilku prostych kroków, by zbudować własną stronę internetową — od najprostszej wizytówki po wstęp do profesjonalnych projektów webowych. Oto szczegółowy poradnik dla początkujących z przykładami zastosowań.
Co to jest plik HTML?
Plik HTML to zwykły plik tekstowy, w którym zapisujesz kod określający strukturę i treść strony internetowej. Pliki te mają rozszerzenie .html.
Jak utworzyć nowy plik HTML?
- Otwórz edytor tekstu – skorzystaj z prostego edytora, np. Notatnik (Windows), TextEdit (macOS, w trybie tekstowym) lub bardziej zaawansowanego, jak Visual Studio Code czy Sublime Text;
- Zapisz plik pod odpowiednią nazwą – nadaj plikowi nazwę, np.
index.html, i koniecznie wybierz rozszerzenie.html, np.mojastrona.html. Przy zapisywaniu w Notatniku wybierz typ pliku Wszystkie pliki i dopilnuj, aby kończyć nazwę na.html; - Wklej podstawową strukturę HTML – oto szkielet dokumentu HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Tytuł strony</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest mój pierwszy plik HTML.</p>
</body>
</html>
- Zapisz zmiany i uruchom plik w przeglądarce – kliknij dwukrotnie na plik lub otwórz go przez menu „Otwórz za pomocą” → przeglądarka internetowa.
Rozbudowa pliku HTML – elementarne znaczniki
HTML składa się z tzw. znaczników (ang. tags), które nadają strukturę stronie. Najważniejsze z nich to:
<html>– otacza cały dokument HTML,<head>– zawiera metadane, np. tytuł i kodowanie,<title>– tekst wyświetlany na karcie przeglądarki,<body>– główna część z widoczną zawartością strony,<h1>,<h2>, …<h6>– nagłówki,<p>– akapity tekstu,<a href="">– odsyłacze (linki),<img src="">– obrazy,<ul>,<ol>,<li>– listy (nienumerowane, numerowane).
Przykłady zastosowań
Prosta wizytówka internetowa
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Jan Kowalski - Wizytówka</title>
</head>
<body>
<h1>Jan Kowalski</h1>
<p>Programista, freelancer, bloger.</p>
<a href="mailto:[email protected]">Napisz do mnie</a>
</body>
</html>
Strona z grafiką i linkiem
<body>
<h1>Firma XYZ</h1>
<img src="logo.jpg" alt="Logo firmy XYZ">
<p>Nasza oferta:</p>
<ul>
<li>Strony internetowe</li>
<li>Pozycjonowanie</li>
<li>Wsparcie IT</li>
</ul>
<a href="oferta.html">Zobacz ofertę</a>
</body>
Wstawianie linków i kotwic
Link do innej strony:
<a href="https://przyklad.pl">Odwiedź naszą stronę!</a>
Link do adresu e-mail:
<a href="mailto:[email protected]">Napisz do nas!</a>
Link do sekcji tej samej strony (kotwica):
<a href="#kontakt">Przejdź do kontaktu</a>
<!-- ... inne elementy ... -->
<h2 id="kontakt">Kontakt</h2>
Stylizacja strony
Aby Twoja strona wyglądała atrakcyjnie, możesz dodać CSS (arkusze stylów). Przykładowo:
<head>
<meta charset="UTF-8">
<title>Mój blog</title>
<style>
body { font-family: Arial, sans-serif; background: #eef; }
h1 { color: #336699; }
a { color: #008800; }
</style>
</head>
Możesz też stworzyć osobny plik style.css i załączyć go przez:
<link rel="stylesheet" href="style.css">
Wskazówki praktyczne
- Twórz kopie zapasowe plików na wypadek pomyłek.
- Testuj wygląd strony w różnych przeglądarkach.
- Używaj czytelnych nazw plików i folderów.
Do czego możesz użyć HTML?
- Blogi i portfolio – własne miejsce prezentacji;
- CV online – szybkie udostępnianie pracodawcom;
- Strony firmowe i oferty produktowe.
- Prototypy i makiety przy tworzeniu większych projektów.
- Edukacja – nauka podstaw programowania i struktury internetu.
Tworzenie plików HTML i podstawowych stron WWW to pierwszy krok do rozwijania własnych projektów w sieci. Wraz z nauką CSS i JavaScript, otwierają się przed Tobą coraz bardziej zaawansowane możliwości kreowania treści i interaktywnych aplikacji.
