poniedziałek,
Prosta strona HTML5
Poniżej znajdziesz przykład kodu dla bardzo podstawowej strony internetowej w HTML5, idealnej dla początkujących. Każdy element zostanie omówiony, abyś mógł zrozumieć, jak działają poszczególne części kodu. Ta struktura jest bardzo podstawowa, ale stanowi solidne fundamenty do nauki HTML. Możesz modyfikować i rozbudowywać ją, aby lepiej zrozumieć, jak działają różne tagi i atrybuty w HTML. Jeśli jeszcze nic nie wiesz o tworzeniu stron internetowych, zapoznaj się z materiałem „Pierwsza strona HTML”. Znajdziesz tam szczegółowe informacje na temat przebiegu pracy związanej z kodowaniem oraz jeszcze bardziej uproszczony przykładowy kod.
Przykładowy kod
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja Pierwsza Strona</title>
</head>
<body>
<header>
<h1>Witaj na Mojej Pierwszej Stronie!</h1>
</header>
<nav>
<ul>
<li><a href="#section1">Sekcja 1</a></li>
<li><a href="#section2">Sekcja 2</a></li>
</ul>
</nav>
<section id="section1">
<h2>Sekcja 1</h2>
<p>To jest pierwsza sekcja mojej strony</p>
</section>
<section id="section2">
<h2>Sekcja 2</h2>
<p>To jest druga sekcja mojej strony</p>
</section>
<footer>
<p>© 2024 Moja Strona</p>
</footer>
</body>
Omówienie
- <!DOCTYPE html> – ta deklaracja określa dokument jako HTML5, który jest najnowszą wersją HTML.
- <html lang="pl"> – główny element, który otacza całą zawartość strony. Atrybut lang określa język dokumentu, tutaj "pl" dla polskiego.
- <head> – sekcja zawierająca metadane strony, które nie są wyświetlane bezpośrednio na stronie.
- <meta charset="UTF-8"> – określa kodowanie znaków używane przez dokument; UTF-8 obejmuje większość znaków z różnych języków.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> – ustawia sposób wyświetlania strony na urządzeniach mobilnych.
- <title> – tytuł strony, wyświetlany w pasku tytułu przeglądarki.
- <body> – główna część dokumentu, zawierająca wszystko, co widzi użytkownik.
- <header> – nagłówek strony, często zawiera tytuł lub logo.
- <h1> – główny nagłówek na stronie, najważniejszy w kontekście SEO.
- <nav> – sekcja nawigacji, zazwyczaj zawiera linki do innych stron lub sekcji na stronie.
- <ul>, <li> – nieuporządkowana lista i jej elementy, używane tutaj do stworzenia menu nawigacyjnego.
- <a href="#section1"> – hiperłącze, które prowadzi do sekcji o ID "section1" na tej samej stronie.
- <section> – reprezentuje odrębną sekcję strony.
- <h2> – nagłówek drugiego poziomu, używany tutaj do tytułów poszczególnych sekcji.
- <p> – akapit, podstawowy blok tekstu.
- <footer> – stopka strony, często zawiera prawa autorskie, linki kontaktowe itp.
- © – symbol praw autorskich.
