تعلم HTML بالعربي | الفقرات والقوائم وتنسيقاتها HTML Paragraph & Lists Formatted

 

HTML – 4

 

HTML Paragraph & Lists Formatted

** الوسم <P> هو وسم مفرد لكنه يستخدم أيضاً كوسم مزدوج  <p> …</p>  وفي هذه الحالة يمكننا من تحديد إتجاه الفقرة وإتجاه النص فيها حيث يستخدم معه الخاصية Align  وهي تأخذ القيم (Right – Left - Center)

** الوسم <Center> … </Center>  تستخدم لتوسيط الفقرات أو الكائنات بشكل عام في الصفحة .

** <P> تستخدم الخاصية Dir معها لتحديد إتجاه قراءة نص الفقرة وتأخذ القيم (LTR – RTL ) وتعني من اليمين من اليسار والعكس من اليسار إلى اليمين .

** تأتي الخاصية Dir  مع الوسم <Body> وذلك لتغيير إتجاه الصفحة ككل بشكل عام يعني سواء صور أو نصوص أو غيرة ، وتأخذ نفس القيم السابقة وهي (LTR – RTL ) .

** الوسم <BlockQuote> … </BlockQuote>  هو وسم الفقرة المقتبسة ، ووظيفتها تمييز الفقرة من خلال إدراج مسافة إضافية على الهامشين الأيمن والأيسر لها .

** ملحوظة ** يمكن إدراج عدة وسوم <BlockQuote> معاً إذا أردت إدراج هوامش أكبر .

**  الوسم <pre> … </pre>  وهو إختصار لكلمة PreFormated  أي النص المنسق مسبقاً ، بمعني أنه يحتفظ بنفس التنسيق المكتوب به في برنامج محرر النصوص Notepad مثل هذا الشكل ::

A   B   C    D    E

F   G   H    I     J

K   L   M   N   O

<<< أي أنه إعتمد المسافات بدون كتابة الأمر &nbsp; وإعتمد نهاية السطر بدون كتابة وسم <br>

** القوائم ** هناك نوعين من القوائم هما ( المتسلسلة – غير متسلسلة ) ويوجد نوع آخر سوف يتم شرحه هنا وهو قوائم الشرح أو التعريفات .

** النوع الأول ** القوائم المتسلسة Order Lists  **  ويتم إنشاء هذه القوائم بإستخدام

الوسم <OL> … </OL>   وهي تعني  التسلسل مثل 1 – 2 – 3 – 4 -  5 - ........ إلخ

** النوع الثاني ** القوائم الغير متسلسلة UnOrdered Lists  ** ويتم إنشاء هذه القوائم بإستخدام

الوسم <UL> … </UL>   وهي تعني الترتيب بالأشكال  سواء مربعات أو علامات معينة خاصة .

** ملحوظة ** لتعيين كل بند من بنود القائمة نستخدم الوسم <LI> وتعني ListItems

لمشاهدة الفيديو من هنا

 


** مثال **

                                                        قائمة غير متسلسلة                              قائمة متسلسلة

<OL>                                             <UL>

            <LI>  القاهرة                               <LI>  القاهرة

            <LI>  الإسكندرية                         <LI>  الإسكندرية  

            <LI> شرم الشيخ                          <LI> شرم الشيخ

</OL>                                           </UL>

** ملحوظة ** الخاصية الوحيدة التي تستخدم مع وسوم القوائم هي Type ووظيفتها تحديد شكل الرموز الظاهر مع بنود القائمة <UL Type=”Square”><OL Type=”A”> هنا في القائمة غير المتسلسلة سيتم تغيير شكل الترتيب إلى مربع ، وفي القائمة المتسلسلة سيتم تغيير شكل ترتيب القائمة المتسلسلة إلى الحروف الإنجليزية الكبيرة A ,B , C, D ,E ,F ……..

*** النوع الثالث والأخير ** قوائم الشرح أو التعريفات Definition Lists  ** وهي نوع خاص من القوائم وتعني إدراج قائمة مصطلحات يتبع كل واحد منها شرح أو تعليق

** الوسم  <DL>  </DL> تستخدم لتعريف بداية ونهاية القائمة

** الوسم <DT> وسم مفرد ، يوضع قبل كل مصطلح لتحديدة .

** الوسم <DD> وسم مفرد ، وهو وسم الشرح أو التعليق .

** مثال **

<DL>

            <DT> HTML

                        <DD> hypertext markup language

            <DT> FTP

                        <DD> file transfer protocol

</DL>

وفي النهاية يوجد بعض إختصارات سيتم كتابة لعلك تستخدمها في إنشاء هذا النوع من القوائم :

JPEG : joint photographic experts group

WWW : world wide web

PDF : portable document format

GIF : graphics interchange format


***********************


***********************

إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد. هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة, ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميلً