جميع علامات HTML مع الأمثلة. مرجع علامة HTML

في حياة كل مؤلف إعلانات، تأتي مرحلة للتعرف على علامات html. عادة ما يحدث هذا بشكل عفوي ويبدو وكأنه طلب من العميل "لإعداد النص للنشر". هذا يعني أنه في المقالة تحتاج إلى تسليط الضوء على العناوين والفقرات والأماكن والقوائم المهمة، ولكن ليس باستخدام إمكانيات Word، ولكن باستخدام رمز لغة html خاص. العلامات الخاصة بمؤلف الإعلانات ستساعد في ذلك. عادة ما تكون القائمة المطلوبة للعمل صغيرة، ولكنها كافية لتنسيق النص بالمتطلبات القياسية. ما الذي يتم تضمينه في علامات html اللازمة لمؤلف الإعلانات؟ (إذا كنت كسولًا جدًا في القراءة، فقم بالتمرير لأسفل - يوجد مخطط معلوماتي موضوعي بسيط وواضح حول علامات html!)

يطرح مؤلف الإعلانات أسئلة تقليدية. وتبدأ جميعها بالعبارة "ما هي العلامة المستخدمة لتحديد...":

  • عنوان؛
  • فقرة؛
  • ظفري؛
  • مائل.
  • القائمة ذات تعداد نقطي/غير مسمى/

كل هذا يضيف لمسة من الإثارة إلى المهمة الفنية ويحفز على اكتساب معارف جديدة. يزداد الوضع سوءًا عندما تكون المهمة هي استخدام علامة نصية غامقة لزيادة جاذبية المفتاح في PS. ولكن كل هذا يمكن حله بكل بساطة، وهو ما سنتعامل معه الآن.

العلامات لإنشاء العناوين

يتم تمثيل العلامات الخاصة بإنشاء العناوين بالعناصر h1-h6. لقد حصلوا على رسالتهم من العنوان الإنجليزي (العنوان). لتعيين نوع الرأس المطلوب والتأكيد على أهميته بالنسبة لـ PS، استخدم الكود التالي:

العنوان h1 العنوان h2 العنوان h3 العنوان h4 العنوان h5 العنوان h6

على الموقع سوف تبدو مثل هذا.

العنوان h1 العنوان h2 العنوان h3 العنوان h4 العنوان h5 العنوان h6

يتمتع عنوان h1 بالأهمية الأكبر - والرؤية -. يتم استخدامه كعنوان للنشر ويتم استخدامه مرة واحدة فقط. بالنسبة للعناوين الفرعية في النص، يوصى بـ h2 وh3. إنها تساعد في التأكيد على أهمية المادة قيد النظر وتقسيم المقالة إلى مستويات معلومات.

لا يتم استخدام الرؤوس h4-h6 عمليًا، ولكنها مطلوبة لتسليط الضوء على الكتل المنطقية والأجزاء المهمة.

بالنسبة للمقالات الكبيرة، من الأفضل استخدام العناوين h1-h3، وللمقالات الصغيرة - h1 وh2.

القوائم: نقطية وغير مسماة

يحتوي النص الجيد المنظم دائمًا على قائمة واحدة أو حتى عدة قوائم. وبحسب مظهرها فإن القوائم هي:

  • ملحوظ - لديهم ترقيم؛
  • غير مميزة - يتم تمييز العناصر بالرموز.
  • لكن كل تصميمات Word غير مناسبة للمنشورات على الموقع، لذا فإن الأمر يستحق تعلم كيفية تنسيق القوائم بشكل صحيح في علامات HTML.
    تبدو علامة القائمة ذات التعداد النقطي كما يلي:

    ضع علامة على قائمة غير مميزة مثل هذا:

    علاوة على ذلك، كل عنصر في القائمة له إطار HTML خاص به:

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

  • قائمة الاغراض
  • قائمة الاغراض
  • قائمة الاغراض
  • قائمة الاغراض
  • بالنسبة للقائمة غير المميزة فهي مشابهة:

    • قائمة الاغراض
    • قائمة الاغراض
    • قائمة الاغراض
    • قائمة الاغراض

    لقد قمنا بفرز القوائم. يمكننا المضي قدما.

    علامات التركيز على النص: غامق ومائل

    عند معرفة العلامة التي تسمح لك بتنسيق النص بشكل صحيح، ستصادف على الفور تقريبًا خيارين للتعليمات البرمجية لكل حالة. وهذا يسبب ارتباكًا بين غير المبرمجين والسؤال: ما هي العلامة التي يحتاجها العميل بالضبط.

    كل شيء بسيط جدا! توفر العلامات خيارات التنسيق المادية والمنطقية. الأول مطلوب للمستخدمين، والثاني - لمحركات البحث. "محركات البحث"، التي ترى رمز html المناسب لها، تأخذ في الاعتبار المنطقة المحددة وتستخدم المعلومات الواردة عند التصنيف، لذا فإن تمييز النص باستخدام التنسيق المنطقي لن يكون خطأ.

    يتيح استخدام علامات html إرضاء محركات البحث وإبراز النص بصريًا للمستخدم. ما هو الأكثر أولوية، قرر بنفسك:

    تسليط الضوء على عبارة بالخط العريض لـ PS والمستخدمين تسليط الضوء على عبارة بالخط العريض للمستخدمين عبارات مائلة لـ PS والمستخدمين كتابة عبارة بخط مائل للمستخدمين

    لدي مقال كبير ومثير للجدل للغاية حول موضوع العلامات الغامقة، وهو ما يسمى.

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

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

    حسنًا، بعض الرسوم البيانية الموضوعية البسيطة في النهاية:

    وعندما بدأت مناقشة الموضوع في التعليقات، قدم نادي المؤلفين الناجحين تعليقات مثيرة للاهتمام حول الرسوم البيانية والمقالة. فيما يلي لقطة شاشة لرأي أحد المشاركين المعتمدين في المناقشة.

    إقرأ: 3,365

    لقد نظرنا إلى مثال لإنشاء صفحة بسيطة حيث تم تقديم التعليقات على بعض علامات html، حيث يبدو لي أنه من الأفضل أولاً إظهار شيء ما بمثال ثم الانتقال إلى وصف أكثر تفصيلاً. ولهذا السبب تمت مناقشة إنشاء الصفحة في الدرس الثاني، وبمزيد من التفصيل في الدرس الثالث.

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

    قائمة علامات html 1. علامة HTML (للفقرات) - تعرض فقرة نصية (تسمح بسمات النمط والفئة والمعرف). العلامة الأكثر شيوعًا، حيث يتم وضع النص فيها غالبًا (ومع ذلك، هذا هو ما تم إنشاؤه من أجله).

    على سبيل المثال كود HTML:

    نص الفقرة رقم واحد

    وهذه فقرة أخرى

    نص الفقرة رقم واحد

    وهذه فقرة أخرى

    يمكنك أيضًا إضافة معلمة نمط إلى العلامة:

    يمكن استخدام هذه القيم المختلفة لتحرير مظهر الخط. يمكنك أن تقرأ عن هذه المعلمات في درس منفصل: الأنماط في html وخاصية الخط css.

    يمكنك أيضًا تحديد سمات CLASS وID. على سبيل المثال:

    2. علامة HTML و (بالخط العريض)

    و- علامتان تسمحان لك بجعل الخط غامقًا. لا يوجد فرق بين هذه العلامات.

    دعونا نعطي مثالا. كود HTML:

    ظفري

    يتحول إلى ما يلي على الصفحة:

    ظفري

    يمكنك أيضًا تحديد سمات CLASS وID (كما في حالة Note

    هذه العلامات لها تأثير ضئيل على ترتيب المستندات في محركات البحث، لذلك من الأفضل عدم استخدامها بلا هدف.

    3. علامة HTML (إنشاء مائل)

    - الخط المائل (يسمح بمعلمات النمط والفئة والمعرف)

    على سبيل المثال كود HTML:

    نص مائل

    يتحول إلى ما يلي على الصفحة:

    4. علامة HTML (النص الذي تحته خط)

    - خط تحته خط (يسمح بمعلمات النمط والفئة والمعرف)

    على سبيل المثال كود HTML:

    نص تحته خط

    يتحول إلى ما يلي على الصفحة:

    نص تحته خط

    5. علامة HTML (إنشاء ارتباط تشعبي)

    ينشئ رابطًا على الصفحة (يسمح بالنمط والفئة والمعلمات الأخرى).

    على سبيل المثال كود HTML:

    نص الرابط

    يتحول إلى ما يلي على الصفحة:

    جميع معلمات وسمات العلامة سيتم تناولها في درس منفصل: علامة HTML.

    6. علامة HTML (العناوين في المحتوى)

    ،...، - علامات الرأس داخل المحتوى (تسمح بالنمط والفئة ومعلمة المعرف). علاوة على ذلك، كلما كان الرقم أصغر، زاد وزن وحجم النص الموجود في هذه العلامات (افتراضيًا).

    على سبيل المثال كود HTML:

    العنوان ح1

    يتم استخدام العلامة لعنوان الصفحة (بالإضافة إلى العنوان)

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

    7. علامة HTML (المحاذاة)

    - محاذاة المحتوى في المركز.

    على سبيل المثال كود HTML:

    سيكون هذا النص في المركز

    يتحول إلى ما يلي على الصفحة:

    سيكون هذا النص في المركز

    ملحوظة
    • - للنص
    • ... - لكل شيء (على سبيل المثال، صورة)
    8. علامة HTML (نص منخفض)

    - يعرض الخط المنخفض.

    على سبيل المثال كود HTML:

    نص عادي، نص بين السطور

    يتحول إلى ما يلي على الصفحة:

    نص عادي، نص بين السطور

    9. علامة HTML (نص مرتفع)

    - يعرض الخط المرتفع.

    على سبيل المثال كود HTML:

    نص عادي، نص مرتفع

    يتحول إلى ما يلي على الصفحة:

    نص عادي، نص مرتفع

    10. علامة HTML،

    ، - يعرض خطًا أكبر/أصغر بمقدار بكسل واحد من الحجم الحالي (المسموح به بواسطة معلمة النمط والفئة والمعرف).

    على سبيل المثال كود HTML:

    الخط العادي، هذا الخط أكبر بمقدار بكسل واحد

    يتحول إلى ما يلي على الصفحة:

    الخط العادي، هذا الخط أكبر بمقدار بكسل واحد

    11. علامة HTML