أقسام الوصول السريع (مربع البحث)

برمجة8 تطبيقات8 شرح12 html8
📁 آخر الأخبار
0

العناصر الأساسية في HTML الدرس#2

kroom87 kroom87

 HTML (لغة توصيف النص الفائق) هي اللغة الأساسية المستخدمة لإنشاء صفحات الويب. تتكون صفحات الويب من مجموعة من العناصر التي تحدد هيكل ومحتوى الصفحة. يتم استخدام HTML لتحديد العناوين، الفقرات، الصور، الروابط، الجداول، النماذج، وأكثر من ذلك.

في هذا المقال، سنستعرض بعض العناصر الأساسية في HTML وفائدتها واستخدامها. كما سنقدم جدولاً يوضح العناصر القابلة للإغلاق في HTML مع أمثلة عليها.

العناصر الأساسية في HTML

تتكون صفحة HTML من الهيكل الأساسي التالي:

كود الصفحة
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان الصفحة</title>
</head>
<body>
    <h1>مرحبا بك في صفحتنا!</h1>
    <p>هذه فقرة نصية توضح كيفية استخدام HTML لإنشاء محتوى الويب.</p>
</body>
</html>





شكل الصفحة بعد استخدام الكود 

شرح الهيكل الأساسي
    • <!DOCTYPE html>: يحدد نوع المستند كـ HTML5.
    • <html lang="ar">: عنصر الجذر لكل مستند HTML، ويحدد لغة المستند كالعربية.
    • <head>: يحتوي على بيانات تعريفية مثل الترميز، العنوان، والروابط إلى ملفات CSS وJavaScript.
    • <meta charset="UTF-8">: يحدد مجموعة الأحرف المستخدمة في المستند كـ UTF-8.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: يضمن أن عرض الصفحة يتناسب مع عرض الجهاز المستخدم لعرضها.
    • <title>: يحدد عنوان الصفحة الذي يظهر في شريط العنوان للمتصفح.
    • <body>: يحتوي على المحتوى الفعلي للصفحة الذي يظهر للمستخدمين.
    • <h1>: يحدد عنوانًا رئيسيًا.
    • <p>: يحدد فقرة نصية.

    العناصر القابلة للإغلاق في HTML

    فيما يلي جدول يحتوي على العناصر القابلة للإغلاق في HTML مع أمثلة على إغلاقها:

    العنصرالفائدة والاستخداممثال
    <html>عنصر الجذر لكل مستند HTML.<html>...</html>
    <head>يحتوي على بيانات تعريفية (meta)، العناوين، والروابط إلى ملفات CSS وJavaScript.<head>...</head>
    <title>يحدد عنوان الصفحة الذي يظهر في شريط العنوان للمتصفح.<title>Page Title</title>
    <style>يحتوي على أنماط CSS المدمجة لتنسيق المستند.<style>...</style>
    <script>يحتوي على أو يربط إلى كود JavaScript.<script>...</script>
    <body>يحتوي على المحتوى الفعلي للصفحة الذي يظهر للمستخدمين.<body>...</body>
    <h1> إلى <h6>تحدد العناوين من الأكبر (<h1>) إلى الأصغر (<h6>).<h1>Title</h1>
    <p>يحدد فقرة نصية.<p>Paragraph text</p>
    <a>يحدد رابطًا تشعبيًا.<a href="url">Link text</a>
    <div>يحدد قسمًا أو جزءًا من المستند. يستخدم لأغراض التنسيق والتخطيط.<div>Content</div>
    <span>يحدد جزءًا صغيرًا من النص أو محتوى لغاية التنسيق.<span>Text</span>
    <header>يحدد رأس المستند أو القسم.<header>...</header>
    <footer>يحدد تذييل المستند أو القسم.<footer>...</footer>
    <nav>يحدد قسمًا للتنقل في الموقع (روابط التنقل).<nav>...</nav>
    <article>يحدد مقالة مستقلة في المستند.<article>...</article>
    <section>يحدد قسمًا في المستند.<section>...</section>
    <aside>يحدد محتوى جانبي أو تكميلي.<aside>...</aside>
    <main>يحدد المحتوى الرئيسي للمستند.<main>...</main>
    <figure>يحدد محتوى توضيحي مثل الصور أو الرسوم البيانية.<figure>...</figure>
    <figcaption>يحدد تعليقًا توضيحيًا لصورة أو رسم بياني داخل <figure>.<figcaption>Caption text</figcaption>
    <form>يحدد نموذجًا لجمع بيانات المستخدم.<form>...</form>
    <input>يحدد عنصر إدخال (مثل النص، الأزرار، الاختيار).<input type="text"> (لا يحتاج إلى إغلاق)
    <textarea>يحدد منطقة نصية متعددة الأسطر.<textarea>...</textarea>
    <select>يحدد قائمة منسدلة.<select>...</select>
    <option>يحدد خيارًا داخل قائمة منسدلة.<option>Option</option>
    <ul>يحدد قائمة غير مرتبة (نقاط).<ul>...</ul>
    <ol>يحدد قائمة مرتبة (مرقمة).<ol>...</ol>
    <li>يحدد عنصرًا في قائمة (داخل <ul> أو <ol>).<li>Item</li>
    <table>يحدد جدول بيانات.<table>...</table>
    <tr>يحدد صفًا في الجدول.<tr>...</tr>
    <td>يحدد خلية بيانات في الجدول.<td>Data</td>
    <th>يحدد خلية رأسية في الجدول.<th>Header</th>
    <video>يضمّن فيديو في الصفحة.<video>...</video>
    <audio>يضمّن ملف صوتي في الصفحة.<audio>...</audio>
    <source>يحدد مصادر متعددة لمحتوى الوسائط المتعددة مثل الفيديو أو الصوت.<source src="..." type="..."> (لا يحتاج إلى إغلاق)
    <iframe>يضمّن إطارًا داخليًا لعرض صفحة ويب داخل صفحة ويب أخرى.<iframe>...</iframe>

    يعتبر HTML الأساس الذي يتم بناء صفحات الويب عليه. من خلال فهم العناصر الأساسية واستخدامها بشكل صحيح، يمكنك إنشاء صفحات ويب متجاوبة وجذابة. تذكر دائمًا استخدام وسوم الإغلاق بشكل صحيح لضمان عرض الصفحة كما هو متوقع.

    إذا كنت ترغب في تعلم المزيد عن HTML، هناك العديد من الموارد المتاحة على الإنترنت التي يمكن أن تساعدك في تطوير مهاراتك في تطوير الويب

    kroom87
    kroom87

    مقالات قد تهمك

    تعليقات