[3] دورة تعلم تصميم المواقع من الصفر للمبتدئين – XHTML – احترافية

في هذا الدرس سنتعلم كيفية كتابة الفقرات وكيفية عمل الفواصل LINE BREAKS
أولًا الفقرات:
ربما يُظن أنه من السهل عمل فقرة ، أي بمجرد كتابة مانريد داخل المحتوى BODY ستكون فقرة!
دعونا نتأكد من هذا الكلام في المثال التالي:

<doctype html>
<meta charset="utf-8">
<html>
<head>

<title>
ويكي شير
</title>

</head>

<body>

.هذه الفقرة الأولى

.هذه الفقرة الثانية

</body>
</html>

قم بحفظ ما كتبته واذهب للمتصفح وقم بعمل تحديث REFRESH

ستجد أن الفقرتين في سطر واحد!

 

وذلك لأن المتصفح لا يفهم المسافات ولا النزول إلى سطر جديد ENTER التي كتبتها هناك ولكن يفهمها على أنها سطر واحد.

لذلك فإنه من أجل كتابة فقرة داخل صفحة ويب يجب استخدام وسوم خاصة بالفقرات وهي:

<p>

وهنا تكتب الفقرة

</p>

دعنا نكتب ما مرَّ ولكن داخل هذه الوسوم:

<p>هذه الفقرة الاولى</p>

<p>هذه الفقرة الثانية</p>

الآن قم بحفظ التغيير واذهب للمتصفح وقم بعمل تحديث REFRESH

سنجد أنه كتب ما سبق على هيئة فقرتين.

 

ثانيًا الفواصل LINE BREAKS :

ولنفرض أنك تود الكتابة سطر بعد سطر وليس على هيئة فقرات، فهنا نستخدم الفواصل LINE BREAKS كالآتي:

هذا السطر الأول. <br/> هذا السطر الثاني.

احفظ ما كتبته واذهب للمتصفح وقم بعمل تحديث

سنجد أنه تم كتابة كل جملة في سطر مستقل

وهذا الوسم

<br/>

هو وسم ذاتي الغلق ليس كباقي الوسوم له بداية ونهاية وانما هو وسم واحد SINGLE TAG.

سنقوم بعمل مثال كامل لما سبق:

 

<doctype html>
<meta charset="utf-8">
<html>
<head>

<title>
ويكي شير
</title>

</head>

<body>
<h1>
ويكي شير
</h1>
<p>دورة تصميم المواقع ويكي شير</p> 
<h2>
دورة تصميم المواقع الدرس الثالث
</h2>
<p>.شرح كتابة الفقرات <br/> .شرح عمل الفواصل
</p>

</body>
</html>

قم بحفظ ما كتبته واذهب للمتصفح وقم بعمل تحديث.