close

Wprowadzenie do struktury HTML: podstawowe elementy i składnia

Struktura HTML odgrywa kluczową rolę w budowaniu stron internetowych. Określa, w jaki sposób treść jest zorganizowana i wyświetlana na stronie internetowej. Oto wprowadzenie do podstawowej struktury HTML:

1. Doctype

Doctype(Deklaracja typu dokumentu) określa wersję HTML używaną przez stronę internetową. Powinien być umieszczony na początku pliku HTML.

2. znacznik HTML

Znacznik html jest głównym elementem każdego pliku HTML. Hermetyzuje całą zawartość strony internetowej.

3. head znacznik

Tag head zawiera informacje o stronie internetowej, które nie są bezpośrednio wyświetlane w przeglądarce. Tutaj określa się tytuł strony, metatagi, linki do plików CSS i JavaScript oraz różne inne elementy.

4. body znacznik

Tag body zawiera całą treść, która jest wyświetlana na stronie internetowej. Tutaj definiowane są elementy takie jak tekst, obrazy, filmy, linki i inne komponenty interfejsu użytkownika.

5. Zagnieżdżone tagi

HTML wykorzystuje hierarchiczną strukturę ze znacznikami otwierającymi i zamykającymi. Tagi podrzędne są umieszczane wewnątrz tagów nadrzędnych. Na przykład znacznik p(akapit) może zawierać znaczniki zakresu(tekst wbudowany), znaczniki mocne(tekst pogrubiony) i wiele innych znaczników.

6. Wspólne znaczniki

HTML zapewnia szereg znaczników do formatowania i wyświetlania treści. Na przykład znaczniki h1-h6(nagłówki), znacznik p(akapit), znacznik img(obraz), znacznik(link) i wiele innych.

 

Oto przykład kompletnej struktury strony HTML:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

W powyższym przykładzie mamy kompletną stronę HTML z głównymi elementami, takimi jak doctype, html tag, head tag i body tag. W sekcji head określamy tytuł strony, pliki CSS i JavaScript, które mają być użyte. Sekcja body zawiera elementy takie jak header, main i footer, które służą do wyświetlania zawartości strony internetowej.

 

Korzystając z prawidłowej struktury HTML, możesz tworzyć dobrze zorganizowane, czytelne i interaktywne strony internetowe.