عناوين العلامات
يبدأ أي مستند بعنوان. يمكنك استخدام أحجام مختلفة لعناوينك. يحتوي HTML أيضًا على ستة مستويات من العناوين ، والتي تستخدم العناصر <h1> و <h2> و <h3> و <h4> و <h5> و <h6>. أثناء عرض أي عنوان ، يضيف المتصفح سطرًا واحدًا قبل ذلك العنوان وسطرًا بعده. ومثال علي ذلك :
<!DOCTYPE html> <html> <head> <title/> أمثلة علي العناوين <title> </head> <body> <h1/> هذا هو العنوان 1 <h1> <h2/> هذا هو العنوان 2 <h2> <h3/> هذا هو العنوان 3 <h3> <h4/> هذا هو العنوان 4 <h4> <h5/> هذا هو العنوان 5 <h5> <h6/> هذا هو العنوان 6 <h6> </body> </html>
سيؤدي هذا إلى النتيجة التالية :
هذا هو العنوان 1
هذا هو العنوان 2
هذا هو العنوان 3
هذا هو العنوان 4
هذا هو العنوان 5
هذا هو العنوان 6
علامة الفقرات
توفر العلامة <p> طريقة لبناء النص في فقرات مختلفة. يجب إدخال كل فقرة من النص بين علامة الافتتاح <p> وعلامة الإغلاق </p> كما هو موضح أدناه في المثال :
<!DOCTYPE html> <html> <head> <title/> أمثلة علي الفقرات <title> </head> <body> <p/> هذه هي الفقرة الأولي من النص <p> <p/> هذه هي الفقرة الثانية من النص <p> <p/> هذه هي الفقرة الثالثة من النص <p> </body> </html>
سيؤدي هذا إلى النتيجة التالية :
هذه هي الفقرة الأولى من النص
هذه هي الفقرة الثانية من النص
هذه هي الفقرة الثالثة من النص
علامة سطر فاصل
عندما تستخدم عنصر <br /> ، فإن أي شيء يتبعه يبدأ من السطر التالي. هذه العلامة هي مثال لعنصر فارغ ، حيث لا تحتاج إلى فتح وإغلاق علامات ، حيث لا يوجد شيء بينهما.
تحتوي العلامة <br /> على مسافة بين الحرفين br والشرطة المائلة للأمام. إذا حذفت هذه المساحة ، فستواجه المتصفحات القديمة مشكلة في عرض فاصل الأسطر ، بينما إذا فاتتك حرف الخط المائل للأمام واستخدمت <br> فقط ، فلن يكون صالحًا في XHTML.
<!DOCTYPE html> <html> <head> <title/> مثال علي السطر الفاصل <title> </head> <body> </ br> مرحبا <p> </ br> قمت بتسليم مهمتك في الوقت المحدد </ br> شكرا <p/> تيتو 4 تك </body> </html>
سيؤدي هذا إلى النتيجة التالية :
مرحبا
قمت بتسليم مهمتك في الوقت المحدد
شكرا
تيتو 4 تك
توسيط المحتوى
يمكنك استخدام علامة <center> لوضع أي محتوى في وسط الصفحة أو أي خلية جدول.
<!DOCTYPE html> <html> <head> <title/> مثال علي توسيط الحتوى <title> </head> <body> <p/> هذا النص ليس في المنتصف <p> <center> <p/> هذا النص في المنتصف <p> </center> </body> </html>
سيؤدي هذا إلى النتيجة التالية :
هذا النص ليس في المنتصف
هذا النص في المنتصف
الخطوط الأفقية
تُستخدم الخطوط الأفقية لتقسيم أقسام المستند بصريًا. تنشئ العلامة <hr> سطرًا من الموضع الحالي في المستند إلى الهامش الأيمن وتكسر السطر وفقًا لذلك.
على سبيل المثال ، قد ترغب في كتابة سطر بين فقرتين كما في المثال التالي :
<!DOCTYPE html> <html> <head> <title/> مثال علي الخط الأفقي <title> </head> <body> <p/> هذه هي الفقرة الاولي ويجب ان تكون بالاعلي <p> </ hr> <p/> هذه هي الفقرة الثانية ويجب ان تكون بالاسفل <p> </body> </html>
سيؤدي هذا إلى النتيجة التالية :
هذه هي الفقرة الاولي ويجب ان تكون بالاعلي
هذه هي الفقرة الثانية ويجب ان تكون بالاسفل
مرة أخرى ، تعد العلامة <hr /> مثالاً للعنصر الفارغ ، حيث لا تحتاج إلى علامات الفتح والإغلاق ، حيث لا يوجد شيء بينهما.
يحتوي العنصر <hr /> على مسافة بين الأحرف hr والشرطة المائلة للأمام. إذا حذفت هذه المساحة ، فستواجه المتصفحات القديمة مشكلة في عرض الخط الأفقي ، بينما إذا فاتتك حرف الخط المائل للأمام واستخدمت فقط <hr> فهو غير صالح في XHTML
الحفاظ على التنسيق
في بعض الأحيان ، تريد أن يتبع النص الخاص بك التنسيق الدقيق لكيفية كتابته في مستند HTML. في هذه الحالات ، يمكنك استخدام العلامة المنسقة مسبقًا <pre>.
سيحتفظ أي نص بين علامة الفتح <pre> وعلامة الإغلاق </pre> بتنسيق المستند المصدر.
<!DOCTYPE html> <html> <head> <title/> مثال علي الحفاظ علي التنسيق <title> </head> <body> <pre> }function testFunction( strText ) alert (strText) { </pre> </body> </html>
سيؤدي هذا إلى النتيجة التالية :
}function testFunction( strText )
alert (strText){
حاول استخدام نفس الكود دون إبقائه داخل علامات <pre> ... </pre>
مساحات غير منقسمة
لنفترض أنك تريد استخدام عبارة "Tito 4 Tech". هنا ، لن ترغب في أن يقوم المتصفح بتقسيم "4 ، Tito " و "Tech" عبر سطرين
في الحالات التي لا تريد فيها أن يقوم متصفح العميل بفصل النص ، يجب عليك استخدام علامة مساحة غير منقسمة ( ) بدلا من مساحة عادية (space). على سبيل المثال ، عند ترميز "Tito 4 Tech" في فقرة ، يجب استخدام شيء مشابه للرمز التالي :
<!DOCTYPE html> <html> <head> <title/> مثال علي مساحات غير منقسمة <title> </head> <body> <p>"Tito 4 Tech"</p> </body> </html>
سيؤدي هذا إلى النتيجة التالية :
Tito 4 Tech