HTML Paragraphs
-
يمكن في HTML تطبيق وتنفيذ الفقرات بسهولة. تستخدم العلامة <p> في HTML للفقرات. هذا يعني ان أي شيء موجود داخل <p> و </p> يتم التعامل معه على أنه فقرة. تقرأ معظم المتصفحات السطر كفقرة حتى لو لم نستخدم علامة الإغلاق </ p> ، ولكن هذا قد يؤدي إلى نتائج غير متوقعة. لذا يجب استخدام علامة الإغلاق دائما.
التركيب :
<p> Content </p>
مثال :
طيق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body>
<h2>Welcome </h2>
<!-- Use of <p> tag -->
<p>My First paragraph in HTML</p>
</body>
</html>
</body>
</html>
شغل الصفحة وشوف النتيجة.
ملاحظات:
في HTML الفقرات تبدأ دائما ب New Line، والمتصفحات تعمل على إضافة بعض الهوامش white space (a margin) قبل وبعد الفقرة
في حال إضافة مسافات او سطور إضافية في كود HTML، سيقوم المتصفح تلقائيًا بإزالة هذه المسافات وألاسطر عند عرض الصفحة
طبق الكود التالي وشوف النتيجة :
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body>
<h2>Welcome </h2>
<!-- Use of <p> tag -->
<p>My First paragraph in HTML</p>
<p>
My First paragraph in HTML, My First paragraph in HTML, My First paragraph in HTML
</p>
<p>
My First paragraph in HTML
My First paragraph in HTML
My First paragraph
in HTML
</p>
</body>
</html>
</body>
</html>
واكيد بتكون نتيجة التنفيذ:
لاحظ ان تم حذف المسافات والاسطر الفارغة من الفقرات.
HTML Horizontal Rules
يحتوي HTML على Tag باسم <hr> والي بيعمل على إضافة فاصل thematic break ويتم عرضه على شكل خط افقي horizontal rule ويستخدم لفصل المحتوي.
طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body>
<h2>Welcome </h2>
<!-- Use of <p> tag -->
<p>My First paragraph in HTML</p>
<p>
<hr>
My First paragraph in HTML, My First paragraph in HTML, My First paragraph in HTML
</p>
<hr>
<p>
My First paragraph in HTML
My First paragraph in HTML
My First paragraph
in HTML
</p>
<hr>
</body>
</html>
</body>
</html>
شغل الصفحة وشوف النتيجة:
تعتبر <hr> علامه فارغه empty tag والي بتعني ان ما الها end tag
HTML Line Breaks
لتعريف سطر جديد في الفقرات او في أي مكان في صفحة HTML يستخدم br> tag>
طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body>
<h2>Welcome </h2>
<!-- Use of <p> tag -->
<p>My First paragraph in HTML</p>
<p>
<hr>
My First paragraph in HTML, My First paragraph in HTML, My First paragraph in HTML
</p>
<hr>
<p>
My First paragraph in HTML<br>
My First paragraph in HTML
My First paragraph
in HTML
</p>
<hr>
</body>
</html>
</body>
</html>
وشوف نتيجة إضافة <br> في الفقرة الأخيرة.
The Poem Problem
مشكلة Poem (القصيدة) وهي عرض المحتوي المكون من مجموعة سطور على شكل قصده. بحيث يكون كل سطر مستقل. وفي حال تم إضافة هذه السطور داخل <p> فسيعمل المتصفح على حذف هذه السطور والمسافات الفارغة.
طبق المثال التالي في صفحة HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body>
<h2>Welcome </h2>
<p>
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
</p>
</body>
</html>
</body>
</html>
النتيجة بتكون عرض هذه السطور في فقره واحده.
وهاذه هي المشكلة لان المطلوب عرض هذه السطور على شكل قصيده
لحل هذه المشكلة نستخدم الامر:
The HTML <pre> Element
في هذا tag يتم إبقاء النص بنفس التنسيق المعرف مسبقا. بحيث يتم عرض النص الموجود داخل <pre> بخط له عرض ثابت عادة ما يكون من النوع (Courier) ويحتفظ أيضا بالمسافات والفواصل المعرفة مسبقا.
نفس الكود السابق بس سنستخدم <pre> بدل <p>
طبق الكود التالي :
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body>
<h2>Welcome </h2>
<pre>
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
</pre>
</body>
</html>
</body>
</html>
شغل الصفحة وشوف النتيجة:
تم الاحتفاظ بنفس التنسيق الأصل
اترك تعليقك