close

Utangulizi wa Muundo wa HTML: Vipengele vya Msingi na Sintaksia

Muundo wa HTML una jukumu muhimu katika kuunda kurasa za wavuti. Inafafanua jinsi yaliyomo yanapangwa na kuonyeshwa kwenye ukurasa wa wavuti. Hapa kuna utangulizi wa muundo wa msingi wa HTML:

1. Doctype

Hati(Tamko la Aina ya Hati) inafafanua toleo la HTML ambalo ukurasa wa wavuti unatumia. Inapaswa kuwekwa mwanzoni mwa faili ya HTML.

2. lebo ya html

Lebo ya html ni kipengele cha msingi cha kila faili ya HTML. Inajumuisha maudhui yote ya ukurasa wa tovuti.

3. head tagi

Lebo ya kichwa ina habari kuhusu ukurasa wa wavuti ambao hauonyeshwa moja kwa moja kwenye kivinjari. Hapa ndipo kichwa cha ukurasa, meta tagi, viungo vya faili za CSS na JavaScript, na vipengele vingine mbalimbali hufafanuliwa.

4. body tagi

Lebo ya mwili ina maudhui yote ambayo yanaonyeshwa kwenye ukurasa wa tovuti. Hapa ndipo vipengele kama vile maandishi, picha, video, viungo, na vipengele vingine vya kiolesura cha mtumiaji hufafanuliwa.

5. Lebo zilizowekwa

HTML hutumia muundo wa daraja na vitambulisho vya kufungua na kufunga. Lebo za watoto huwekwa ndani ya lebo za wazazi. Kwa mfano, lebo ya p(aya) inaweza kuwa na vitambulisho vingi(maandishi ya ndani), vitambulisho vikali(maandishi mazito), na vitambulisho vingine vingi.

6. Vitambulisho vya kawaida

HTML hutoa anuwai ya lebo za kuumbiza na kuonyesha maudhui. Kwa mfano, lebo za h1-h6(vichwa), lebo ya p(aya), lebo ya img(picha), lebo(kiungo), na vingine vingi.

 

Hapa kuna mfano wa muundo kamili wa ukurasa wa 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>

Katika mfano ulio hapo juu, tuna ukurasa kamili wa HTML wenye vipengele vikuu kama vile doctype, html tag, head tag na body tag. Katika sehemu ya kichwa, tunafafanua kichwa cha ukurasa, faili za CSS na JavaScript zitatumika. Sehemu ya mwili ina vipengele kama vile kichwa, kikuu, na kijachini ili kuonyesha maudhui ya ukurasa wa tovuti.

 

Kwa kutumia muundo sahihi wa HTML, unaweza kuunda kurasa za wavuti zilizopangwa vizuri, zinazosomeka na shirikishi.