إنشاء أقسام التصميم على صفحتك
تعد العناوين طريقة مفيدة لتنظيم النص وإنشاء أقسام مفيدة وتحسين صفحة الويب لمحركات البحث. يمكنك بسهولة إنشاء عناوين باستخدام علامات رأس HTML. يمكنك أيضًا تغيير مظهر النص باستخدام العلامات الغامقة والمائلة.
العناوين
تعد علامات العنوان هي أبسط طريقة لتقسيم المستند. إذا كنت تفكر في موقعك كصحيفة ، فإن العناوين هي العناوين الرئيسية في الصحيفة. العنوان الرئيسي هو h1 والعناوين اللاحقة هي h2 خلال h6.
استخدم الرموز التالية لإنشاء HTML.
هذا هو العنوان 1 هذا هو العنوان 2 هذا هو العنوان 3 هذا هو العنوان 4 هذا هو العنوان 5 هذا هو العنوان 6 نصائح لتذكر
- حاول الاحتفاظ بالعناوين الخاصة بك بترتيب منطقي ، حيث تأتي h1 قبل h2 ، والتي تأتي قبل h3 وهكذا.
- لا تقلق كثيراً بشأن كيفية ظهور العناوين - يجب عليك استخدام CSS لعناوين الأنماط بدلاً من استخدام عنوان خارج الترتيب.
- علامات العنوان هي عناصر على مستوى الكتلة ، لذا فهي تضع فواصل خطية لك. لا تضع علامات P داخل علامات العنوان.
جريئة ومائل
هذا هو العنوان 3 هذا هو العنوان 4 هذا هو العنوان 5 هذا هو العنوان 6 نصائح لتذكر
- حاول الاحتفاظ بالعناوين الخاصة بك بترتيب منطقي ، حيث تأتي h1 قبل h2 ، والتي تأتي قبل h3 وهكذا.
- لا تقلق كثيراً بشأن كيفية ظهور العناوين - يجب عليك استخدام CSS لعناوين الأنماط بدلاً من استخدام عنوان خارج الترتيب.
- علامات العنوان هي عناصر على مستوى الكتلة ، لذا فهي تضع فواصل خطية لك. لا تضع علامات P داخل علامات العنوان.
جريئة ومائل
هذا هو العنوان 5 هذا هو العنوان 6 نصائح لتذكر
- حاول الاحتفاظ بالعناوين الخاصة بك بترتيب منطقي ، حيث تأتي h1 قبل h2 ، والتي تأتي قبل h3 وهكذا.
- لا تقلق كثيراً بشأن كيفية ظهور العناوين - يجب عليك استخدام CSS لعناوين الأنماط بدلاً من استخدام عنوان خارج الترتيب.
- علامات العنوان هي عناصر على مستوى الكتلة ، لذا فهي تضع فواصل خطية لك. لا تضع علامات P داخل علامات العنوان.
جريئة ومائل
نصائح لتذكر
- حاول الاحتفاظ بالعناوين الخاصة بك بترتيب منطقي ، حيث تأتي h1 قبل h2 ، والتي تأتي قبل h3 وهكذا.
- لا تقلق كثيراً بشأن كيفية ظهور العناوين - يجب عليك استخدام CSS لعناوين الأنماط بدلاً من استخدام عنوان خارج الترتيب.
- علامات العنوان هي عناصر على مستوى الكتلة ، لذا فهي تضع فواصل خطية لك. لا تضع علامات P داخل علامات العنوان.
جريئة ومائل
هناك أربع علامات يمكنك استخدامها غامق ومائل:
- و بالخط العريض
- و للميال
لا يهم ما تستخدمه. في حين أن البعض يفضلون و ، إلا أن العديد من الأشخاص يجدون لـ "غامق" و مائل يسهل تذكره.
ما عليك سوى إحاطة النص باستخدام علامتي الفتح والإغلاق ، لجعل النص عريضًا أو مائلًا:
غامق مائليمكنك تضمين هذه العلامات (مما يعني أنه يمكنك جعل النص غامقًا ومائلًا) ولا يهم أيهما العلامة الخارجية أو الداخلية.
فمثلا:
هذا النص غامق
هذا النص غامقهذا النص مكتوب بحروف مائلة
هذا النص مائلهذا النص غامق ومائل
هذا النص عريض ومائللماذا هناك مجموعتين من العلامات الغامق ومائل
في HTML4 ، اعتبرت العلامات و علامات نمط تؤثر فقط على مظهر النص ولم تذكر شيئًا عن محتويات العلامة ، واعتبرت نموذجًا سيئًا لاستخدامها. بعد ذلك ، باستخدام HTML5 ، تم إعطاؤهم معنىً دلاليًا خارج مظهر النص.
في HTML5 ، تحتوي هذه العلامات على معاني محددة:
- يشير إلى نص ليس أكثر أهمية من النص المحيط به ، ولكن العرض الطباعي النموذجي هو نص عريض ، مثل الكلمات الرئيسية في ملخص المستند أو أسماء المنتجات في مراجعة.
- تشير إلى نص ليس أكثر أهمية من النص المحيط ، ولكن العرض الطباعي النموذجي هو نص مائل ، مثل عنوان كتاب أو مصطلح تقني أو عبارة بلغة أخرى.
- يشير إلى نص له أهمية كبيرة مقارنة بالنص المحيط.
- تشير إلى نص له إجهاد مؤكد مقارنة بالنص المحيط.