ابحث فى المدونة

جارٍ التحميل...

المواضيع الاكثر مشاهده

أحدث المواضيع

تعلم و احترف HTML فى 14 يوم 
 اليوم الرابع 
 الفقرات و القوائم 

قولنا فى اليوم السابق سنتحدث اليوم عن الفقرات والقوائم .
تتذكر فى اليوم الاول حينما ذكرت ان الوسم <p>  يستخدم لانهاء الفقرة و هذا الوسم له اهمية كبيرة حيث يحدد بداية الفقرات و اتجاه النص فيها .



خواصه: 
تستخدم الخاصيةALIGN لتحديد محاذاة الفقرة و تأخذ القيم Right , Left , Center كالاتى :
<p align="left"> 
This is a left aligned paragraph
</p>
<p align="right">
This is a right aligned paragraph
</p>
<p align="center">
This is a center aligned paragraph
</p>
 و كذلك لتوسيط الفقرات يستخدم الوسم center:
<center>.................</center>
اما الخاصية الثانية وهى DIR و تأخذ القيم :
*LTR (Left To Right) اتجاه النص من اليسار الى اليمين  كالانجليزية
  *RTL(Right To Left)     اتجاه النص من اليمين الى اليسار كالعربية
وهذه الخاصية مهمة عند كتابة الصفحات باللغة العربية .

ولتنسيق الفقرات ايضا يوجد الوسم Blockquote اى الفقرات المقتبسة . 
<blockquote>.................</blockquote>
ووظيفتها تمييز الفقرة وذلك باضافة هوامش على يمين و يسار الفقرة .
و تستطيع ادراج اكثر من هامش للفقرة (جرب بنفسك)
<blockquote>
<blockquote>
........text here.........
</blockquote>
</blockquote>
 و ليس شرطا استخدامها مع الفقرات المقتبسة بل يمكن تستخدم لاضافة تنسيق عام للصفحة لعمل الهوامش .
* الوسم الاخير و هو (PRE (preformated
<pre>............</pre>
لنكتشف ماذا يفعل هذا الوسم فى صفحتك اكتب الوسم السابق و اكتب اى جملة مكان النقط . ماذا وجدت ؟

هل استطعت تفسير ما حدث ؟ نعم الوسم PRE يحول الخطوط الى خطوط موحدة المسافات . 

القوائم 
تحتوى لغة HTML على وسوم خاصة بتنظيم البيانات و وضعها فى قوائم و باستخدام عدة خيارات و هناك نوعين من القوائم :
*القائمة المتسلسلة  Ordered Lists
 كالمثال التالى :
1.احمد
2.محمد 
3. على 
4. ابراهيم
5.مصطفى
*القائمة غير المتسلسلة Unordered Lists
كالمثال التالى:
  • احمد 
  • محمد 
  • على 
  • ابراهيم
  • مصطفى
 و عند التعامل مع القوائم بنوعيها يلزمنا وسوم خاصة بتحديد بداية و نهاية القائمة و وسوم تحدد بنود القائمة .
بالنسبة للقوائم المتسلسلة نستخدم الوسوم 
<OL>.............</OL>
اما القوائم غير المتسلسلة نستخدم
<UL>............</UL>
 و لتعيين كل بند من بنود القائمة نستخدم الوسم <LI> و هو وسم منفرد يكتب فى بداية السطر الخاص بكل بند List Item.
اذا لكى نكتب القوائم السابقة بنفس الشكل والترتيب نكتب الاتى :



<OL>
<LI>احمد 
<LI>محمد
<LI>على
<LI>ابراهيم
<LI>مصطفى
</OL>
 والشكل الثانى 
<UL>
<LI>احمد 
<LI>محمد
<LI>على
<LI>ابراهيم
<LI>مصطفى
</UL>

و الخاصية الوحيدة التى تستخدم مع القوائم هى TYPE و ذلك لتحديد شكل الترقيم او الشكل الظاهر بجانب البنود .
وفى القوائم المتسلسلة تأخذ القيم A,a,I,i 
 اما فى القوائم غير المتسلسلة فتأخذ القيم Square , circle و تكتب كالاتى :
<ul type="square">
<ul type="circle">
و هناك وسوم اخرى تستخدم لانشاء القوائم غير المتسلسلة و هى 
<DIR>...........</DIR>
<MENU>............</MENU>  
 و هناك نوع خاص من القوائم يدعى قوائم الشرح او التعريف Definition List وهى عبارة عن قائمة من المصطلحات يتبع كل واحد منها شرح او تعليق .
HTML
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transfer Protocol
CSS
Cascading Style Sheets 
و نحتاج لانشاء هذه القائمة الى 3 وسوم:
 1-<DL>.........</DL> 
لتعريف بداية و نهاية القائمة . 
 2-<DT>
و هو وسم منفرد و يوضع قبل كل مصطلح لتحديده.
3-<DD> 
ايضا وسم منفرد ويسمى وسم الشرح او التعليق.
لنقم الان بكتابة القائمة السابقة 
<DL>
<DT>HTML
<DD>Hyper Text Markup Language
<DT>WWW
<DD>World Wide Web
<DT>FTP
<DD>File Transfer Protocol
<DT>CSS
<DD>Cascading Style Sheets 
</DL> 
و هكذا نكون انتهينا من الفقرات و القوائم و موعدنا فى اليوم التالى للحديث عن الصور و الرسومات .

0 comments:

data: commentLabel/
Related Posts Plugin for WordPress, Blogger...