close

Bevezetés a HTML-struktúrába: Alapelemek és szintaxis

A HTML-struktúra döntő szerepet játszik a weboldalak felépítésében. Meghatározza a tartalom rendszerezését és megjelenítését a weboldalon. Az alábbiakban bemutatjuk az alapvető HTML-struktúrát:

1. Doctype

A Doctype(Dokumentumtípus-nyilatkozat) határozza meg a weboldal által használt HTML-verziót. A HTML-fájl elejére kell helyezni.

2. html tag

A html címke minden HTML-fájl gyökéreleme. Ez magában foglalja a weboldal teljes tartalmát.

3. head címke

A head címke olyan információkat tartalmaz a weboldalról, amelyek nem jelennek meg közvetlenül a böngészőben. Itt kerül meghatározásra az oldal címe, a meta tagek, a CSS- és JavaScript-fájlokra mutató hivatkozások és számos egyéb elem.

4. body címke

A body címke tartalmazza a weboldalon megjelenő összes tartalmat. Itt vannak meghatározva az olyan elemek, mint a szöveg, képek, videók, hivatkozások és egyéb felhasználói felület összetevők.

5. Beágyazott címkék

A HTML hierarchikus struktúrát használ nyitó és záró címkékkel. Az alárendelt címkék a szülőcímkék belsejébe kerülnek. Például a p címke(bekezdés) tartalmazhat span címkéket(inline szöveg), erős címkéket(félkövér szöveg) és sok más címkét.

6. Gyakori címkék

A HTML egy sor címkét biztosít a tartalom formázásához és megjelenítéséhez. Például a h1-h6 címkék(címek), p címke(bekezdés), img címke(kép), címke(link) és még sokan mások.

 

Íme egy példa egy teljes HTML-oldalszerkezetre:

<!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>

A fenti példában van egy teljes HTML-oldalunk a főbb elemekkel, például doctype, html tag, head tag és body tag. A fejrészben megadjuk az oldal címét, a használandó CSS ​​és JavaScript fájlokat. A törzsrész olyan elemeket tartalmaz, mint a fejléc, a fő és a lábléc a weboldal tartalmának megjelenítéséhez.

 

A megfelelő HTML-struktúra használatával jól szervezett, olvasható és interaktív weboldalakat készíthet.