مقدمة في بنية 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 كاملة تحتوي على العناصر الرئيسية مثل html العلامة head والعلامة والعلامة body. في قسم الرأس ، نحدد عنوان الصفحة وملفات CSS و JavaScript لاستخدامها. يحتوي قسم النص الأساسي على عناصر مثل الرأس والرئيسية والتذييل لعرض محتوى صفحة الويب.

باستخدام بنية HTML الصحيحة ، يمكنك إنشاء صفحات ويب جيدة التنظيم وقابلة للقراءة وتفاعلية.

المنشور السابق

مقدمة في HTML والنحو الأساسي: دليل المبتدئين

القادم بوست