Szablon strony w standardzie html 5

By /

Html

Szablon HTML5 zawiera podstawowe elementy niezbędne do stworzenia struktury strony internetowej. Rozpoczynając od deklaracji typu dokumentu (<!DOCTYPE html>), która informuje przeglądarkę o użyciu standardu HTML5, przez elementy <head> zawierające metadane strony, aż po <body>, który obejmuje całą widoczną zawartość strony.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <!-- Określa zestaw znaków używany na stronie, UTF-8 
         obejmuje większość znaków z wszystkich języków -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Ustawia viewport dla urządzeń mobilnych, zapewniając poprawne 
         skalowanie strony -->
    <title>Tytuł strony</title>
    <!-- Tytuł strony wyświetlany na karcie przeglądarki -->
    <link rel="stylesheet" href="style.css">
    <!-- Link do zewnętrznego arkusza stylów CSS -->
</head>
<body>
    <!-- Sekcja główna dokumentu, zawiera widoczne treści strony -->
    <header>
        <!-- Nagłówek strony, może zawierać logo, nawigację, itp. -->
        <h1>Nagłówek strony</h1>
        <!-- Główny tytuł na stronie -->
    </header>
    <nav>
        <!-- Sekcja nawigacji, zawiera linki do innych stron lub 
             sekcji na stronie -->
        <ul>
            <!-- Lista nieuporządkowana służąca do grupowania 
                  elementów nawigacji -->
            <li><a href="#section1">Sekcja 1</a></li>
            <!-- Element listy zawierający link -->
            <li><a href="#section2">Sekcja 2</a></li>
        </ul>
    </nav>
    <section id="section1">
        <!-- Sekcja zawartości, używana do grupowania powiązanej treści -->
        <h2>Tytuł sekcji 1</h2>
        <!-- Podtytuł sekcji -->
        <p>Paragraf opisujący zawartość sekcji 1.</p>
        <!-- Paragraf z tekstem -->
    </section>
    <section id="section2">
        <h2>Tytuł sekcji 2</h2>
        <p>Paragraf opisujący zawartość sekcji 2.</p>
    </section>
    <footer>
        <!-- Stopka strony, zawiera informacje kontaktowe, 
             prawa autorskie, itp. -->
        <p>&copy; 2023 Moja Strona</p>
    </footer>
    <script src="script.js"></script>
    <!-- Link do zewnętrznego pliku JavaScript -->
</body>
</html>

Omówmy poszczególne elementy szablonu:

  • <!DOCTYPE html>: Deklaracja typu dokumentu, określa standard HTML5.
  • <html lang="pl">: Element główny strony, atrybut lang określa język dokumentu.
  • <head>: Sekcja zawierająca metadane, linki do arkuszy stylów i skryptów.
  • <meta charset="UTF-8">: Określa kodowanie znaków używane na stronie.
  • <meta name="viewport" ...>: Ustawienia viewportu dla urządzeń mobilnych.
  • <title>: Tytuł strony, wyświetlany na karcie przeglądarki.
  • <link rel="stylesheet" href="style.css">: Link do zewnętrznego arkusza stylów CSS.
  • <body>: Zawiera treść strony widoczną dla użytkownika.
  • <header>, <nav>, <section>, <footer>: Elementy semantyczne, ułatwiające strukturyzację i organizację treści strony.
  • <h1>, <h2>, <p>: Elementy tytułów i paragrafów, służące do prezentacji tekstów i podziału treści na logiczne sekcje.
  • <ul>, <li>: Lista nieuporządkowana i jej elementy, często używane do tworzenia nawigacji lub wylistowania punktów.
  • <a href="#...">: Hiperłącze, umożliwia nawigację między sekcjami strony lub do innych stron.
  • <script src="script.js">: Link do zewnętrznego pliku JavaScript, który pozwala na dodanie interaktywności do strony.

Kluczowe punkty dotyczące szablonu HTML5:

  • Elementy semantyczne: Takie jak <header>, <footer>, <nav>, i <section> wprowadzają znaczenie do struktury strony, co jest korzystne zarówno dla użytkowników (poprzez lepszą nawigację), jak i wyszukiwarek internetowych (poprzez lepsze zrozumienie struktury strony).
  • Responsywność: Użycie <meta name="viewport" ...> jest kluczowe dla zapewnienia responsywności strony, umożliwiając poprawne wyświetlanie na urządzeniach mobilnych.
  • Modularność: Elementy takie jak <header>, <nav>, <section>, i <footer> pozwalają na modularne budowanie strony, co ułatwia zarządzanie treścią i stylem.
  • Interaktywność: Załączenie pliku JavaScript (<script src="script.js">) otwiera drzwi do dodawania dynamicznych i interaktywnych elementów do strony, takich jak reakcje na akcje użytkownika, manipulacja DOM czy asynchroniczne zapytania do serwera.

Podsumowanie

Szablon HTML5 jest podstawą dla każdej strony internetowej. Zrozumienie i właściwe wykorzystanie jego elementów pozwala na tworzenie dobrze zorganizowanych, dostępnych i interaktywnych stron i aplikacji webowych. Dzięki temu możemy budować zaawansowane projekty, które są jednocześnie użyteczne dla użytkowników i zoptymalizowane pod kątem wyszukiwarek internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDevelopera w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

Powiązane artykuły

Scroll to Top