W tej lekcji przedstawię jak wygląda podstawowa struktura dokumentu HTML oraz wyjaśnię funkcje poszczególnych elementów. Przede wszystkim oprócz teorii znajdziesz tutaj praktyczne przykłady, które pomogą Ci zrozumieć, jak zorganizować i stworzyć swój pierwszy dokument HTML.
Nowe znaczniki struktury dokumentu HTML5
Dodatkowo wraz z nową wersją – HTML5 wprowadzono nowe elementy, które porządkują strukturę dokumentu HTML. Poprawiono także różnice w interpretacji błędów przez przeglądarki internetowe czego efektem było odmienne wyświetlanie zawartości strony.
Podstawowa struktura dokumentu HTML
Przede wszystkim każdy dokument HTML składa się z zestawu elementów, które tworzą strukturę strony internetowej. Aby to zilustrować poniżej przedstawiam podstawowy szablon dokumentu HTML:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<<!DOCTYPE html>
<html>
<head>
<title>Tytuł Strony</title>
</head>
<body>
<h1>Witaj, Świecie!</h1>
<p>To jest mój pierwszy dokument HTML.</p>
</body>
</html>Przeanalizujmy teraz poszczególne części tego dokumentu:
Deklaracja doctype: <!DOCTYPE html>
- Jest to deklaracja typu dokumentu, która informuje przeglądarkę, że dokument jest w formacie HTML5. Co więcej element ten musi być umieszczony na samym początku dokumentu.
<html>
- Jest to główny element, który otacza całą zawartość dokumentu HTML. Wszystko, co znajduje się w dokumencie HTML, musi być zawarte wewnątrz tego elementu.
<head>
- Sekcja
<head>zawiera metadane o dokumencie, takie jak tytuł strony, linki do arkuszy stylów CSS, skrypty JavaScript, a także inne informacje, które nie są bezpośrednio wyświetlane na stronie.
<body>
- Sekcja
<body>zawiera główną zawartość dokumentu HTML, która jest widoczna dla użytkowników w przeglądarce.
Przykład sekcji <head> z metadanymi i stylami
<head>
<meta charset="UTF-8">
<title>Moja Strona</title>
<meta name="description" content="Opis mojej strony">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Twoje Imię">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>Opis wybranych elementów:
<meta charset="UTF-8">– ustawia kodowanie znaków dokumentu na UTF-8, co jest standardem dla większości stron internetowych<title>– ustawia tytuł strony, który jest wyświetlany na karcie przeglądarki<meta name="description" content="Opis mojej strony">– dodaje opis strony, co jest ważne dla wyszukiwarek internetowych<meta name="keywords" content="HTML, CSS, JavaScript">– dodaje słowa kluczowe związane ze stroną<meta name="author" content="Twoje Imię">– określa autora dokumentu<link rel="stylesheet" href="style.css">– łączy zewnętrzny arkusz stylów CSS<script src="script.js"></script>– łączy zewnętrzny plik JavaScript
Sekcja <body> zawiera główną zawartość strony
<body>
<header>
<h1>Moja Strona</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Strona Główna</h2>
<p>Witaj na mojej stronie głównej!</p>
</section>
<section id="about">
<h2>O mnie</h2>
<p>Informacje o mnie.</p>
</section>
</main>
<footer>
<p>© 2024 Moja Strona</p>
</footer>
</body>Opis wybranych elementów:
<header>– sekcja nagłówkowa, zazwyczaj zawiera logo, nazwę strony, nawigację itp.<nav>– sekcja nawigacyjna, zawierająca linki do różnych części strony.<main>– główna sekcja treści strony<section>– używana do podziału treści na sekcje tematyczne<footer>– sekcja stopki, zazwyczaj zawiera informacje takie jak prawa autorskie, linki do polityki prywatności itp.
Struktura dokumentu HTML – rozbudowany przykład
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Przykładowa strona HTML">
<meta name="keywords" content="HTML, struktura, tutorial">
<meta name="author" content="Twoje Imię">
<link rel="stylesheet" href="style.css">
<title>Przykładowa Strona HTML</title>
</head>
<body>
<header>
<h1>Przykładowa Strona HTML</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Strona Główna</h2>
<p>Witaj na mojej przykładowej stronie głównej!</p>
<img src="example.jpg" alt="Przykładowy obrazek">
</section>
<section id="about">
<h2>O mnie</h2>
<p>Informacje o mnie. Jestem web developerem z wieloletnim doświadczeniem.</p>
</section>
<section id="services">
<h2>Usługi</h2>
<ul>
<li>Tworzenie stron internetowych</li>
<li>Optymalizacja SEO</li>
<li>Wsparcie techniczne</li>
</ul>
</section>
<section id="contact">
<h2>Kontakt</h2>
<form action="/submit-form" method="post">
<label for="name">Imię:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Wiadomość:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Wyślij</button>
</form>
</section>
</main>
<footer>
<p>© 2024 Przykładowa Strona HTML</p>
</footer>
</body>
</html>Struktura dokumentu HTML – podsumowanie
Bez wątpienia zrozumienie struktury dokumentu HTML jest kluczowe dla każdego początkującego web developera. Co więcej podstawowy szablon HTML, sekcje <head> i <body>, a także semantyczne elementy HTML5 i atrybuty HTML, stanowią fundament każdej strony internetowej. Dlatego jak już opanujecie podstawy tworzenia stron internetowych, to pozwoli Wam na przygotowanie bardziej złożonych, funkcjonalnych, dobrze zorganizowanych i estetycznych realizacji. Dodatkowo w kursie CSS nauczysz się jak zdefiniować wygląd poszczególnych elementów. Podsumowując, teraz gdy masz solidne podstawy, możesz rozpocząć eksperymentowanie i tworzenie swoich własnych projektów HTML.