تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: تلخيص لعلامات HTML


الصفحة السابقة

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

يمكنك استخدام هذا الملحق كتذكير عند تطوير موقع الويب الخاص بك.

الانتباه ، أنا أصر: هذا الملحق غير كامل وهو طوعي . الأفضل وضع علامات أقل والاحتفاظ فقط بالعلامات التي تبدو مفيدة للغاية في الممارسة العملية.

يتم توفير مرجع شامل لعناصر HTML على موقع شبكة مطوري Mozilla: https://developer.mozilla.org/en/docs/Web/HTML/Element

تذكير

علامات المستوى الأول


علامات المستوى الأعلى هي العلامات الرئيسية التي تبني صفحة HTML . وهي ضرورية لتحقيق "الحد الأدنى من الكود" لصفحة الويب.

علامة وصف
<html> العلامة الرئيسية
<head> رأس الصفحة
<body> نص الصفحة

الحد الأدنى لرمز صفحة HTML:


    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>
    
    </body>
</html>

علامات الرأس


توجد جميع هذه العلامات في رأس صفحة الويب ، أي بين <head>و </head>:
علامة وصف
<link /> ربط مع ورقة النمط
<meta /> البيانات الوصفية لصفحة الويب (مجموعة الأحرف والكلمات الرئيسية وغيرها)
<script> كود جافا سكريبت
<style> كود CSS
<title> عنوان الصفحة

علامات هيكلة النص

علامة وصف
<abbr> الاختصار
<blockquote> اقتباس (طويل)
<cite> اقتباس من عنوان العمل أو الحدث
<q> اقتباس (قصير)
<sup> علامة القوة
<sub> مؤشر
<strong> تعزيز قوي
<em> تعزيز طبيعي
<mark> تعزيز البصرية
<h1> عنوان المستوى 1
<h2> عنوان المستوى 2
<h3> عنوان المستوى 3
<h4> عنوان المستوى 4
<h5> عنوان المستوى 5
<h6> عنوان المستوى 6
<img /> صورة
<figure> الشكل (الصورة ، الكود ، إلخ)
<figcaption> وصف الشكل
<audio> صوت
<video> فيديو
<source> تنسيق المصدر للعلامات
<a> الرابط التشعبي
<br /> سطر جديد
<p> فقرة
<hr /> خط الفصل الأفقي
<address> عنوان الاتصال
<del> النص المحذوف
<ins> النص المدرج
<dfn> تعريف
<kbd> إدخال لوحة المفاتيح
<pre> عرض منسق (للرموز المصدر)
<progress> شريط التقدم
<time> التاريخ أو الوقت

قائمة العلامات


يسرد هذا القسم جميع علامات HTML المستخدمة لإنشاء قوائم (قوائم نقطية ، قوائم مرقمة ، قوائم تعريف ...)

علامة وصف
<ul> قائمة نقطية ، غير مرقمة
<ol> قائمة مرقمة
<li> عنصر في القائمة النقطية
<dl> قائمة التعاريف
<dt> مصطلح للتحدد
<dd> تعريف المصطلح

علامات الجداول


علامة وصف
<table> جدول
<caption> عنوان الجدول
<tr> صف الجدول
<th> خلية رأس
<td> خلية
<thead> قسم رأس الجدول
<tbody> قسم جسم الجدول
<tfoot> مقطع من سفح اللوحة

علامات الاستمارة


علامة وصف
<form> استمارة
<fieldset> مجموعة من الحقول
<legend> عنوان مجموعة من الحقول
<label> تسمية الحقل
<input /> حقل الاستمارة (نص ، كلمة مرور ، خانة اختيار ، زر ، إلخ.)
<textarea> حقل الإدخال متعدد الخطوط
<select> قائمة منسدلة
<option> عنصر القائمة المنسدلة
<optgroup> مجموعة من العناصر من القائمة المنسدلة

العلامات المختارة


تساعد هذه العلامات في بناء الهيكل لموقعنا.

علامة وصف
<header> في الراس
<nav> روابط التنقل الرئيسية
<footer> أسفل الصفحة
<section> قسم الصفحة
<article> مقال (محتوى مستقل)
<aside> معلومات اضافية

العلامات الشاملة


العلامات الشاملة هي علامات ليس لها معنى دلالي.

في الواقع ، جميع علامات HTML الأخرى لها معنى : <p>يعني " Paragraph الفقرة" ، <h2>يعني "Header" ، إلخ. نحتاج في بعض الأحيان إلى استخدام العلامات الشاملة لأن أي من العلامات الأخرى غير مناسبة. غالبًا ما نستخدم العلامات الشاملة لبناء التصميم الخاص بك.

هناك علامتان شاملتان: إحداها مضمّنة ، والاخرى كتلة.

علامة وصف
<span> مضمنة العلامة العامة النوع
<div> علامة نوع كتلة عامة

تكون هذه العلامات ذات صلة فقط إذا قمت بربطها بسمة class، idأو style :

  • Class : يحدد اسم فئة CSS للاستخدام.
  • Id : إعطاء اسم للعلامة. يجب أن يكون هذا الاسم فريدًا عبر الصفحة لأنه يحدد العلامة. يمكنك استخدام المعرف لكثير من الأشياء ، على سبيل المثال لإنشاء رابط ، لنمط معرّف CSS ، ومعالجات JavaScript ، وما إلى ذلك.
  • Style : هذه السمة تسمح لك بالإشارة مباشرة إلى كود CSS للتطبيق. لذلك ليس عليك فصل ورقة أنماط ، يمكنك وضع سمات CSS مباشرة. لاحظ أنه من الأفضل عدم استخدام هذه السمة واستخدام ملف CSS خارجي بدلاً من ذلك ، لأن هذا يجعل موقعك أسهل في التحديث لاحقًا.

هذه السمات الثلاث ليست محفوظة للعلامات الشاملة: يمكنك أيضًا استخدامها دون أي مشكلة في معظم العلامات الأخرى.