HTML સ્ટ્રક્ચરનો પરિચય: મૂળભૂત તત્વો અને વાક્યરચના

HTML માળખું વેબ પૃષ્ઠો બનાવવામાં નિર્ણાયક ભૂમિકા ભજવે છે. તે વ્યાખ્યાયિત કરે છે કે વેબપેજ પર સામગ્રી કેવી રીતે વ્યવસ્થિત અને પ્રદર્શિત થાય છે. અહીં મૂળભૂત HTML બંધારણનો પરિચય છે:

1. `Doctype`

Doctype(દસ્તાવેજ પ્રકાર ઘોષણા) વેબપેજ જે HTML સંસ્કરણનો ઉપયોગ કરે છે તે વ્યાખ્યાયિત કરે છે. તે HTML ફાઇલની શરૂઆતમાં મૂકવું જોઈએ.

2. html ટેગ

html ટેગ એ દરેક HTML ફાઇલનું મૂળ તત્વ છે. તે વેબપેજની સમગ્ર સામગ્રીને સમાવે છે.

3. `head` ટેગ

હેડ ટેગમાં વેબપેજ વિશેની માહિતી હોય છે જે બ્રાઉઝર પર સીધી રીતે પ્રદર્શિત થતી નથી. આ તે છે જ્યાં પૃષ્ઠનું શીર્ષક, મેટા ટૅગ્સ, CSS અને JavaScript ફાઇલોની લિંક્સ અને અન્ય વિવિધ ઘટકોને વ્યાખ્યાયિત કરવામાં આવે છે.

4. `body` ટેગ

બોડી ટેગમાં વેબપેજ પર પ્રદર્શિત થતી તમામ સામગ્રી હોય છે. આ તે છે જ્યાં ટેક્સ્ટ, છબીઓ, વિડિઓઝ, લિંક્સ અને અન્ય વપરાશકર્તા ઇન્ટરફેસ ઘટકો જેવા તત્વો વ્યાખ્યાયિત કરવામાં આવે છે.

5. નેસ્ટેડ ટૅગ્સ

HTML ઓપનિંગ અને ક્લોઝિંગ ટૅગ્સ સાથે હાયરાર્કિકલ સ્ટ્રક્ચરનો ઉપયોગ કરે છે. બાળ ટૅગ્સ પિતૃ ટૅગ્સની અંદર મૂકવામાં આવે છે. ઉદાહરણ તરીકે, p ટેગ(ફકરો) માં સ્પાન ટૅગ્સ(ઇનલાઇન ટેક્સ્ટ), મજબૂત ટૅગ્સ(બોલ્ડ ટેક્સ્ટ) અને અન્ય ઘણા ટૅગ્સ હોઈ શકે છે.

6. સામાન્ય ટૅગ્સ

HTML સામગ્રીને ફોર્મેટિંગ અને પ્રદર્શિત કરવા માટે ટેગ્સની શ્રેણી પ્રદાન કરે છે. ઉદાહરણ તરીકે, h1-h6 ટૅગ્સ(હેડિંગ), p ટૅગ(ફકરો), img ટૅગ(ઇમેજ), એક ટૅગ(લિંક) અને અન્ય ઘણા.

અહીં સંપૂર્ણ 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>

ઉપરના ઉદાહરણમાં, અમારી પાસે મુખ્ય ઘટકો જેવા કે doctype, html ટેગ, head ટેગ અને body ટેગ સાથેનું સંપૂર્ણ HTML પૃષ્ઠ છે. હેડ વિભાગમાં, અમે પૃષ્ઠ શીર્ષક, ઉપયોગમાં લેવાતી CSS અને JavaScript ફાઇલોને વ્યાખ્યાયિત કરીએ છીએ. વેબપેજની સામગ્રી પ્રદર્શિત કરવા માટે મુખ્ય વિભાગમાં હેડર, મુખ્ય અને ફૂટર જેવા ઘટકો શામેલ છે.

યોગ્ય HTML બંધારણનો ઉપયોગ કરીને, તમે સુવ્યવસ્થિત, વાંચી શકાય તેવા અને ઇન્ટરેક્ટિવ વેબ પૃષ્ઠો બનાવી શકો છો.

અગાઉની પોસ્ટ

HTML અને મૂળભૂત વાક્યરચનાનો પરિચય: એક પ્રારંભિક માર્ગદર્શિકા

આગામી પોસ્ટ