عناوين العلامات
يبدأ أي مستند بعنوان. يمكنك استخدام أحجام مختلفة لعناوينك. يحتوي 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