HTML கட்டமைப்பிற்கான அறிமுகம்: அடிப்படை கூறுகள் மற்றும் தொடரியல்

வலைப்பக்கங்களை உருவாக்குவதில் HTML அமைப்பு முக்கிய பங்கு வகிக்கிறது. வலைப்பக்கத்தில் உள்ளடக்கம் எவ்வாறு ஒழுங்கமைக்கப்பட்டு காண்பிக்கப்படுகிறது என்பதை இது வரையறுக்கிறது. அடிப்படை HTML கட்டமைப்பிற்கான அறிமுகம் இங்கே:

1. `Doctype`

டாக்டைப்(ஆவண வகை அறிவிப்பு) வலைப்பக்கம் பயன்படுத்தும் HTML பதிப்பை வரையறுக்கிறது. இது HTML கோப்பின் தொடக்கத்தில் வைக்கப்பட வேண்டும்.

2. html குறிச்சொல்

html குறிச்சொல் ஒவ்வொரு HTML கோப்பின் மூல உறுப்பு ஆகும். இது வலைப்பக்கத்தின் முழு உள்ளடக்கத்தையும் இணைக்கிறது.

3. `head` குறிச்சொல்

உலாவியில் நேரடியாகக் காட்டப்படாத வலைப்பக்கத்தைப் பற்றிய தகவல்களை ஹெட் டேக் கொண்டுள்ளது. இங்குதான் பக்கத்தின் தலைப்பு, மெட்டா குறிச்சொற்கள், CSS மற்றும் JavaScript கோப்புகளுக்கான இணைப்புகள் மற்றும் பல்வேறு கூறுகள் வரையறுக்கப்படுகின்றன.

4. `body` குறிச்சொல்

உடல் குறிச்சொல் இணையப்பக்கத்தில் காட்டப்படும் அனைத்து உள்ளடக்கத்தையும் கொண்டுள்ளது. உரை, படங்கள், வீடியோக்கள், இணைப்புகள் மற்றும் பிற பயனர் இடைமுகக் கூறுகள் போன்ற கூறுகள் இங்குதான் வரையறுக்கப்படுகின்றன.

5. உள்ளமை குறிச்சொற்கள்

HTML தொடக்க மற்றும் மூடும் குறிச்சொற்களுடன் ஒரு படிநிலை கட்டமைப்பைப் பயன்படுத்துகிறது. குழந்தை குறிச்சொற்கள் பெற்றோர் குறிச்சொற்களுக்குள் வைக்கப்படுகின்றன. எடுத்துக்காட்டாக, p குறிச்சொல்(பத்தி) span குறிச்சொற்கள்(இன்லைன் உரை), வலுவான குறிச்சொற்கள்(தடித்த உரை) மற்றும் பல குறிச்சொற்களைக் கொண்டிருக்கலாம்.

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 மற்றும் அடிப்படை தொடரியல் அறிமுகம்: ஒரு தொடக்க வழிகாட்டி

அடுத்த இடுகை