Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Prosta strona HTML5

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>&copy; 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.
  • &copy; – symbol praw autorskich.
Artykuł: Slackware

Slackware

Artykuł: Virtual Desktop Infrastructure

Virtual Desktop Infrastructure

Artykuł: Wirtualizacja: Overcommitment

Wirtualizacja: Overcommitment

Artykuł: Marc Andreessen

Marc Andreessen

Artykuł: Zakończenie staży

Zakończenie staży

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły