• اخر المشاركات

الدرس الثالث في HTML

الدرس الثالث في HTML

مشاركةبواسطة Eng. Raghed Fahoom في الأربعاء إبريل 02, 2008 12:47 am

الوسوم الخاصة بالفقرات بشكل خاص وترتيب الصفحات وتنسيقها بشكل عام:

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

قمنا في الدرس الأول بإيضاح بعض الوسوم الخاصة بالفقرات
فالوسم <P> يقوم بإنهاء الفقرة والوسم <BR> ينهي السطر الحالي وينقل النص إلى سطر جديد والوسم ‎&nbsp;‎ يقوم بإضافة الفراغات، ويجب تكرار كتابته بنفس عدد الفراغات المطلوبة

ونتابع في هذا الدرس مع هذه الوسوم وغيرها.
إن الوسم <P> هو وسم مفرد لكنه يستخدم أيضاً كوسم مزدوج <P> ... <‎/P> وفي هذه الحالة يمكّننا من تحديد إتجاه الفقرة وإتجاه النص فيها حيث يستخدم معه الخصائص ALIGN, DIR.

فالخاصية ALIGN تحدد محاذاة الفقرة وهي تأخذ القيم Left, Center, Right كما في الأمثلة التالية:
<P Align="left"> This is a left-aligned paragraph <‎/P>
<P Align="right"> This is right-aligned paragraph</P>
<P Align="center"> This is a centered paragraph</P>

كذلك لتوسيط الفقرات أو الكائنات بشكل عام في الصفحة نستطيع استخدام الوسوم
<CENTER> ... </CENTER>
<CENTER> This is a centered text </CENTER>

أما الخاصية DIR والتي نستخدمها أيضاً مع <P> فتقوم بتحديد إتجاه قراءة النص وتأخذ القيم
LTR , RTL

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

القوائم

تحتوي لغة HTML على مجموعة من الوسوم الخاصة بتنظيم البيانات في قوائم وباستخدام عدة خيارات وهناك نوعين من القوائم:
أولهما المتسلسلة Ordered Lists وإليك المثال التالي عليها
أسماء بعض المدن السورية :
1.دمشق
2.حلب
3.حمص
4.طرطوس
5.اللاذقية
6.الحسكة

وثانيهما القوائم غير المتسلسلة Unordered Lists وهذا مثال عليها
أسماء بعض الجامعات السورية
• جامعة دمشق
• جامعة تشرين
• جامعة البعث
• جامعة القلمون


عند التعامل مع القوائم بنوعيهما نحتاج إلى وسوم خاصة بتحديد بداية ونهاية القائمة ووسوم تحدد بنود هذه القائمة
بالنسبة للقوائم المتسلسلة نستخدم الوسوم
<OL> ... <‎/OL>
أما بالنسبة للقوائم غير المتسلسلة فنستخدم
<UL> ... <‎/UL>

ولتعيين كل بند من بنود القائمة نستخدم الوسم <LI> وهو وسم مفرد يكتب في بداية السطر الخاص بكل بند

<OL>
<LI>دمشق
<LI>حلب
<LI>حمص
<LI>طرطوس
<LI>اللاذقية
<LI>الحسكة
<‎/OL>

<UL>
<LI>جامعة دمشق
<LI>جامعة تشرين
<LI>جامعة البعث
<LI>جامعة القلمون
<‎/UL>

والخاصية الوحيدة التي تستخدم مع هذه الوسوم هي TYPE ووظيفتها تحديد شكل الرمز الظاهر مع بنود القائمة، وعادة تستخدم مع وسوم بداية القوائم <UL> أو <OL> وبذلك نحدد رمزاً واحداً لكل القائمة.
ولكن نستطيع استخدامها أيضاً مع وسم البنود <LI> لإعطاء تحكم أكبر في مظهر القائمة من خلال تحديد رمز مختلف لكل بند.
فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: A, a, I, i التي تغير رموز الترقيم من الأرقام العادية الإفتراضية (والتي رمزها 1) إلى ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة، أو باستخدام الأرقام الرومانية

<OL TYPE="A">
A
B
C
D
E

<OL TYPE="a">
a
b
c
d
e

<OL TYPE="I">
I
II
III
IV
V

<OL TYPE="i">
i
ii
iii
iv
v

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

HTML
Hyper Text Markup Language

WWW
World Wide Web

FTP
File Transfer Protocol

GIF
Graphical Interchange Format

JPG, JPEG
Joint Photographic Experts Group

ونحتاج لإنشاء هذه القوائم إلى ثلاثة وسوم:
الأول <DL> ... <‎/DL> لتعريف بداية ونهاية القائمة.
والثاني <DT> ويوضع قبل كل مصطلح لتحديده، وهو وسم مفرد.
أما الثالث فهو <DD> وهو وسم الشرح أو التعليق وهو أيضا مفرد

‎<DL>‎
‎<DT>HTML <DD>Hyper Text Markup Language‎
‎<DT>WWW <DD>World Wide Web‎
‎<DT>FTP <DD>File Transport Protocol‎
‎<DT>GIF <DD>Graphical Interchange Format‎
‎<DT>JPG, JPEG <DD>Joint Photographic Experts Group‎
‎<‎/DL>‎
إذا بلغت القمة فوجه نظرك إلى السفح لترى من عاونك في الصعود إليها وانظر إلى السماء ليثبت الله أقدامك عليها...
^^*^^
وإذا أصيب القوم في أخلاقهم ,,, فأقم عليهم مأتماً وعويلا ....
^^*^^
My WebSite
http://www.raghed.com
^^*^^
صورة العضو
Eng. Raghed Fahoom
Webmaster
Webmaster
 
مشاركات: 1034
اشترك في: الأحد ديسمبر 05, 2004 3:07 am

العودة إلى دروس في ال HTML

المتواجدون الآن

المستخدمون المتصفحون لهذا المنتدى: لا يوجد أعضاء مسجلين متصلين و 1 زائر

cron