مجلس أوراق ملونة أوراقـ متساقطهـ على شغافـ قلوبكمـ .. [تم تحديث قوانين القسم نسعد بإطلاعكم]


عدد مرات النقر : 25,762
عدد  مرات الظهور : 36,529,924

موضوع مغلق
 
LinkBack أدوات الموضوع انواع عرض الموضوع
قديم 20-04-2005, 04:04 AM   #1

الصورة الرمزية صمت الجمال

 رقم العضوية :  35
 تاريخ التسجيل :  06-09-2004
 المشاركات :  1,120
 العمر :  38
 عدد النقاط :  10
 قوة التقييم :  صمت الجمال is on a distinguished road
 اخر مواضيع » صمت الجمال
 تفاصيل مشاركات » صمت الجمال
 أوسمة و جوائز » صمت الجمال
 معلومات الاتصال بـ صمت الجمال

افتراضي 2- دروس في html


الدرس الرابع: الفقرات والقوائم



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

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

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

فالخاصية ALIGN تحدد محاذاة الفقرة وهي تأخذ القيم Left, Center, Right وأوضحها بالأمثلة التالية:

<P Align="left"> This is a left-aligned paragraph <‎/P>

This is left-aligned paragraph


--------------------------------------------------------------------------------

<P Align="right"> This is right-aligned paragraph</P>

This is a right-aligned paragraph


--------------------------------------------------------------------------------

<P Align="center"> This is a centered paragraph</P>

This is a centered paragraph


--------------------------------------------------------------------------------

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

<CENTER> This is a centered ************ </CENTER>

This is a centered ************



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

LTR إتجاه النص من اليسار إلى اليمين (Left To Right)
RTL إتجاه النص من اليمين إلى اليسار (Right To Left)

(تذكر هذه الخاصية جيداً فهي مهمة عند كتابة صفحات باللغة العربية)


--------------------------------------------------------------------------------


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

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

والحقيقة أنك تستطيع وضع عدة وسوم معاً إذا أردت إدراج هوامش أكبر. كما في المثال التالي:

<BLOCKQUOTE>
<BLOCKQUOTE>


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

<‎/BLOCKQUOTE>
<‎/BLOCKQUOTE>


وتكون النتيجة:

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

وبالطبع ليس شرطاً أن تستخدم هذا الوسوم مع الفقرات المقتبسة فقط. فأنا مثلاً أضعها في بداية ونهاية كل صفحة من صفحات هذا الموقع. وبالتالي يظهر النص بعيداً قليلاً عن حاشية الصفحة فهذا أفضل من أن يكون ملاصقاً لها وأجمل. (مجرد وجهة نظر)


--------------------------------------------------------------------------------


والآن تأمل هذا الشكل وحاول أن تستنتج كيف قمت بإعداده...!؟

A B C D
E F G H
I J K L
M N O P
Q R S T

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

<PRE> ... </PRE>

وهما اختصار لكلمة Preformated أي المنسق مسبقاً. وبالفعل فقد احتفظ هذا الشكل بالتنسيق المسبق الذي تم إعداده به. لكن تم تحويل الخط إلى خط موحد المسافات (راجع الدرس السابق) ولو لم أقم بوضعه ضمن هذه الوسوم لكانت النتيجة كالتالي:

A B C D E F G H I J K L M N O P Q R S T

لاحظ أن هذا الوسم يستخدم مع الفقرات التي لا نحتاج فيها إلى تنسيقات متعددة للخطوط أو الألوان. بل فقط مع الفقرات العادية موحدة الخط والتنسيقات.


--------------------------------------------------------------------------------


القوائم

تحتوي لغة HTML على مجموعة من الوسوم الخاصة بتنظيم البيانات في قوائم وباستخدام عدة خيارات. وهناك نوعين من القوائم:
أولهما المتسلسلة Ordered Lists. واليك المثال التالي عليها

أسماء بعض المدن الفلسطينية


القدس

نابلس

رام الله

الخليل

جنين

طولكرم


وثانيهما القوائم غير المتسلسلة Unordered Lists وهذا مثال عليها

أسماء بعض الجامعات الفلسطينية


جامعة النجاح

جامعة القدس المفتوحة

جامعة بيرزيت

جامعة الخليل


عند التعامل مع القوائم بنوعيهما نحتاج إلى وسوم خاصة بتحديد بداية ونهاية القائمة ووسوم تحدد بنود هذه القائمة.
بالنسبة للقوائم المتسلسلة نستخدم الوسوم

<OL> ... <‎/OL>


أما بالنسبة للقوائم غير المتسلسلة فنستخدم

<UL> ... <‎/UL>


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

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

<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">‎ ‎<OL TYPE="a">‎ ‎<OL TYPE="I">‎ ‎<OL TYPE="i">‎






















والحديث عن هذه الخاصية يقودني إلى الحديث عن مسألة مهمة في لغة HTML وهي مسألة الوسوم والخصائص المحددة بمتصفح معين دون غيره أي التي تعمل مع أحد المتصفحات ولا تعمل مع غيره. (للمزيد عن هذا الموضوع رجاءً انقر هنا)

والسبب في ذلك أن هذه الخاصية تستخدم أيضاً مع القوائم غير المتسلسلة، لكن ليس بصورة مطلقة...كيف؟ أنت ترى أن الرمز الموجود عند كل بند في القائمة هو عبارة عن نقطة سوداء يطلق عليها اسم Disc وهي المعرفة ضمناً في خاصية TYPE. لكن هناك رموز أخرى يمكن إظهارها وهي المربع square, والدائرة المفرغة circle وتعرف بالشكل التالي:

‎<UL TYPE="square">‎
‎<UL TYPE="circle">‎

ولكن للأسف هذه الخاصية لا تعمل ولا يظهر تأثيرها إلا مع متصفح نيتسكيب وليس مع مايكروسوفت إكسبلورر الذي يتعامل فقط مع القيمة الإفتراضية للخاصية. (رجاءً لا يغضب مستخدمو إكسبلورر فهناك الكثير من الوسوم والخصائص التي لا يستطيع نيتسكيب عرضها أيضاً).
ولإتمام الحديث عن القوائم، أذكر لك أن هناك وسوماً أخرى تستخدم لإنشاء القوائم غير المتسلسلة، وبنفس الطريقة المستخدمة مع <UL>...<‎/UL> وهذه الوسوم هي:

<DIR> ... <‎/DIR>
<MENU> ... <‎/MENU>



--------------------------------------------------------------------------------


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


HTML
Hyper ************ Markup ************************
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 ************ Markup ************************‎
‎<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>‎


وصلنا الآن إلى نهاية هذا الدرس، والذي ناقشنا فيه ترتيب الصفحات والفقرات والقوائم. أتمنى لك صفحات مرتبة دائماً.

توقيع :




أنا رحاله صغير أحمل في جيبي بذور ( بذور محبه ) كلما التقيت بإنسان زرعة معه بذوري إن سقاها كبرت وأينعت وإن لم يسقها ماتت واندثرت
وما همني إن سقاها أو ماتت ما يهمني هو عندما أصعد قمت الجبل وأنظر خلفي وأرى بساتين المحبة أشعر حينها بالإنسانيه


صمت الجمال غير متواجد حالياً
رسالة لكل زوار منتديات العبير

عزيزي الزائر أتمنى انك استفدت من الموضوع و لكن من اجل منتدى ارقي و ارقي برجاء عدم نقل الموضوع و يمكنك التسجيل معنا و المشاركة معنا و النقاش في كافه المواضيع الجاده اذا رغبت في ذلك فانا لا ادعوك للتسجيل بل ادعوك للإبداع معنا . للتسجيل اضغظ هنا .

قديم 20-04-2005, 04:07 AM   #2

الصورة الرمزية صمت الجمال

 رقم العضوية :  35
 تاريخ التسجيل :  06-09-2004
 المشاركات :  1,120
 العمر :  38
 عدد النقاط :  10
 قوة التقييم :  صمت الجمال is on a distinguished road
 اخر مواضيع » صمت الجمال
 تفاصيل مشاركات » صمت الجمال
 أوسمة و جوائز » صمت الجمال
 معلومات الاتصال بـ صمت الجمال

افتراضي


الدرس الخامس :الصور والرسومات

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

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

إن الوسم الرئيسي المستخدم لتعريف صورة ما داخل الصفحة هو <IMG> وهو وسم مفرد. لكن هل يكفي هذا لإدراج صورة؟ كلا، بالطبع يجب أن نحدد الصورة التي نريدها. لذلك نضيف الخاصية له SRC لتحديد موقع واسم الصورة.


الصورة التالية إسمها thedome.jpg وعندما قمت بإدراجها. كانت الشيفرة الخاصة بذلك هي

‎<IMG SRC="thedome.jpg">‎



والصيغة هذه تفترض أن الصورة موجودة في نفس الدليل الفرعي أو المجلد حيث يتواجد ملف HTML الذي أعمل عليه، وقمت باستدعاء الصورة من خلاله. لكن ماذا لو كانت الصورة في مجلد فرعي آخر؟ حسنا سوف اناقش معك حالتين لهذه المسألة.

الحالة الأولى أن تكون الصورة موجودة في مجلد متفرع عن المجلد الموجود به ملف HTML حسب الشكل التالي:




نقوم في هذه الحالة بكتابة إسم هذا المجلد تتبعه إشارة / ثم اسم الصورة.



الحالة الثانية: أن يكون ملف HTML موجوداً في مجلد ما وتكون الصورة موجودة في مجلد آخر بنفس المستوى. أي أنهما مجلدين متجاورين وليسا متفرعين أحدهما عن الآخر.



وفي هذه الحالة نكتب .. (نقطتين) لتوجيه المتصفح للخروج من المجلد الفرعي الحالي (حيث يوجد ملف HT‎ML) ومن ثم الدخول إلى المجلد images حيث توجد الصورة.



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


--------------------------------------------------------------------------------


إن الأبعاد الأساسية لهذه الصورة هي 200×145 بيكسل Pixel (تابع القراءة حتى نهاية هذا الدرس وأعدك أن أوضح لك ما هي وحدة البيكسل إذا كانت هذه أول مرة تتعرف فيها على هذه الوحدة) وكما تلاحظ تم إدراج الصورة مع المحافظة على هذه الأبعاد. ومع ذلك فنحن نستطيع التحكم أيضاً بها وإظهار الصورة بالحجم الذي نريده من خلال هذا الوسم. كيف؟ بإضافة الخصائص HEIGHT, WIDTH متبوعة بأرقام تمثل الإرتفاع والعرض المطلوبين.

‎<IMG SRC="thedome.jpg" HEIGHT="70" WIDTH="120">‎

‎<IMG SRC="thedome.jpg" HEIGHT="300" WIDTH="500">‎

وعند تغييره يتغير حجم الصورة

الخاصية التالية التي تستخدم مع <IMG> هي ALT وفيها نحدد نصاً بديلاً يظهر مكان الصورة. وهذا النص يلاحظ خصوصاً عندما يكون خيار "إظهار الصور تلقائياً" غير فعال في المتصفح. كما تستطيع ملاحظته في الفترة التي تسبق تحميل الصور وخاصة في المواقع بطيئة التحميل.

‎<IMG SRC="thedome.jpg" ALT="The Dome Of The Rock">‎


--------------------------------------------------------------------------------


عندما نقوم بإدراج صورة ضمن فقرة فإن موقع ظهورها يتحدد بالطبع حسب ترتيب ورودها في الفقرة، مثلها مثل أي كلمة أو عبارة أخرى. ونستخدم الخاصية ALIGN لتحديد محاذاة الصورة مع النص المرافق لها أو لنقل بعبارة أخرى: تحديد موقع النص الذي يليها بالنسبة لها وهي تأخذ القيم: BOTTOM, TOP, MIDDLE, LEFT, RIGHT وأوضح لك تأثير كل قيمة كما يلي:

في الحالة العادية (مثل هذه) وعندما لا نقوم بتحديد أي محاذاة فإن النص الذي يلي الصورة يظهر بمحاذاة الحافة السفلى لها. وهذه هي الحالة الإفتراضية لظهور الصور والتي تمثلها القيمة BOTTOM

‎<IMG SRC="image.jpg" ALIGN="BOTTOM">‎

TOP

وعند تحديد هذه القيمة فإن السطر الأول من النص الذي يلي الصورة يقع بمحاذاة الحافة العليا لها. أما باقي النص فيمتد أسفلها.

‎<IMG SRC="image.jpg" ALIGN="TOP">‎

MIDDLE

أما عند تحديد هذه القيمة فإن السطر الأول من النص يقع بمحاذاة منتصف الصورة. كذلك فإن باقي النص يمتد أسفلها.


‎<IMG SRC="image.jpg" ALIGN="MIDDLE">‎

LEFT

هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص الذي يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة.


‎<IMG SRC="image.jpg" ALIGN="LEFT">‎

RIGHT

أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة.


‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎




--------------------------------------------------------------------------------


والآن بعد أن قمنا بتحديد محاذاة الصورة نحتاج إلى تحديد المسافة الفاصلة بينها وبين النص الذي يجاورها. ونستخدم لذلك الخصائص التالية:
VSPACE: لتحديد المسافة العمودية الفاصلة بين النص والحافتين العليا والسفلى للصورة.
HSPACE: لتحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسرى للصورة.

مثال:


‎<IMG SRC="image.jpg" ALIGN="RIGHT" VSPACE="20" HSPACE="20">‎

النتيجة: هذه الشيفرة ستدرج الصورة المسماه image.jpg مع محاذاتها ليمين الصفحة وإضافة مسافة فارغة مقدارها 20 بيكسل على الجهات الأربعة. (قارن بين هذا الإطار والإطار السابق الذي وضحت فيه خاصية ALIGN مع القيمة RIGHT. ولاحظ المسافة بين الصورة والنص المرافق لها.)




--------------------------------------------------------------------------------


الخاصية الأخيرة والتي تستخدم مع الوسم <IMG> هي BORDER ووظيفتها إضافة إطار حول الصور والتحكم بسُمكِه. وهذه الخاصية تستخدم بشكل خاص عند تعيين صورة ما كوصلة تشعبية. (أنظرالدرس السادس) ويتم التحكم بالسُمك من خلال إسناد رقم يمثل السُمك بالبيكسل. والقيمة الإفتراضية له هي 0 أي لا يوجد إطار حول الصورة.
مثلاٌ لإضافة إطار سُمكه 5 بيكسل نكتب الشيفرة التالية:

‎<IMG SRC="image.jpg" BORDER="5">‎


--------------------------------------------------------------------------------


والآن حان الوقت لكي نناقش معاً بعض الأمور التي تتعلق بالصور والرسومات بشكل عام.

* هل حاولت أن تتعرف على أنواع الملفات الرسومية التي تقوم بتحميلها خلال تصفحك لمواقع الإنترنت؟
يزخر عالم الكمبيوتر بالعشرات من أنواع الملفات الرسومية وتنسيقات الصور. وكل منها يختلف عن غيره من عدة نواح، أذكر لك منها: الدقة، وعدد الألوان التي يستوعبها، والحجم التخزيني للملف. لكن هناك نوعين فقط من هذه الملفات يتم تداولهما حالياً في الإنترنت وهما:


JPG, JPEG
إختصار لـِ Joint Photographic Experts Group. ويدعم هذا التنسيق صوراً بعيار 24 بت (أي 16.7 مليون لون). وميزة هذا التنسيق تتمثل في إمكانية ضغط الصور بنسب مختلفة عند تخزينها وبالتالي الحصول على صور صغيرة الحجم نسبياً.(أعني هنا حجم التخزين بالكيلوبايتات وليس أبعاد الصورة). لكن بالمقابل كلما إزدادت نسبة الضغط وصغر حجم الملف كان ذلك على حساب الجودة والوضوح.

GIF
إختصار لـِ Graphical Interchange Format وأقصى عدد للألوان في هذا التنسيق هو 265 لون. ومع ذلك فإن أحجام الصور المخزنة به كبير نسبياً مقارنة بتنسيق JPG. لكن هناك مزايا رائعة ينفرد بها تنسيق GIF مما يستدعي استخدامه في صفحات الويب، أولها القدرة على تخزين صور بخلفيات شفافة Transparent Images وثانيها الصور المتحركة Animated Gifs
وتجد معلومات وافية ودروساً مفصلة حول هذه المواضيع ضمن دروس Paint Shop Pro.

والآن قد تسأل، أي من هذين التنسيقين أستخدم في صفحاتي؟! لا يوجد جواب قطعي لهذا السؤال لكن إليك هاتين المعادلتين:

JPG= الصور الحقيقية ذات العدد الكبير من الألوان، وذات الأبعاد الكبيرة
GIF= الصور قليلة الألوان وصغيرة الأبعاد مثل الأزرار.


--------------------------------------------------------------------------------


* ما هي درجة إستبانة شاشتك Resolution? إذا كنت لا تعرف الجواب قم بفتح تطبيق لوحة التحكم في ويندوز 95 وإختر أيقونة(العرض) ثم اختر التبويب (إعدادات) وهناك سوف تشاهد "مساحة سطح المكتب" الذي يدل على درجة إستبانة الشاشة، وعلى الأغلب ستكون 640×480 أو 800×600، وهناك درجات أعلى تعتمد على قدرة محول العرض. كذلك سوف تشاهد "لوح الألوان" الذي يدل على عدد الألوان التي يمكن عرضها بالإعدادات الحالية للشاشة.
أما في ويندوز 3.11 أو 3.1 فاختر أيقونة برنامج إعداد Windows من لوحة التحكم فتظهر لك قائمة تجد بضمنها نوع وإستبانة الشاشة.

هذا الحديث يقودني إلى وحدة البيكسل Pixel (ألم أعدك مسبقاً بتوضيحها). وهي اختصار لـِ Picture Element. إذا كانت شاشتك بإستبانة 640×480 فهذا يعني أنها مقسمة(نظرياً) إلى شبكة من 640 عمود و480 سطر. وبمنتهى البساطة، إن كل خلية من هذه الشبكة تمثل بيكسل وبالطبع كلما زادت الإستبانة كلما صغر حجم وحدة البيكسل.


--------------------------------------------------------------------------------


* هل سبق لك وأن سمعت بمصطلح Thumbnail ضمن مصطلحات الإنترنت؟ حسناً، لا تلتفت إلى الترجمة الحرفية لهذه الكلمة، والتي تعني "ظفر الإبهام". فالمقصود حقيقةً بها هي تلك الصورة الصغيرة جداً التي تقوم بالنقر عليها فتؤدي إلى عرض صورة بحجم أكبر. لذلك قد يكون المصطلح الأنسب لوصفها هو "العيّنة".
(وإذا كنت قد زرت أحد المواقع الإخبارية لرأيت كيف يتم عرض عينات وصور مصغرة للقطات الأحداث وعند النقر على العينة تظهر الصورة الأصلية. إذن أنت لست مجبراً على الإنتظار لوقت طويل لحين ظهور صورة ذات حجم كبير للقطة لست معنياً بها).

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

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

وصلنا إلى نهاية هذا الدرس. هل أصبحت الآن تعرف كيف تدرج الصور في صفحتك؟ رائع، إذن إليك هذه المكافأة. أنقر على الصور المصغرة لتشاهد مدينتي... نابلس.

صمت الجمال غير متواجد حالياً
قديم 20-04-2005, 04:08 AM   #3

الصورة الرمزية صمت الجمال

 رقم العضوية :  35
 تاريخ التسجيل :  06-09-2004
 المشاركات :  1,120
 العمر :  38
 عدد النقاط :  10
 قوة التقييم :  صمت الجمال is on a distinguished road
 اخر مواضيع » صمت الجمال
 تفاصيل مشاركات » صمت الجمال
 أوسمة و جوائز » صمت الجمال
 معلومات الاتصال بـ صمت الجمال

افتراضي


الدرس السادس : الارتباطات التشعبية

أهلاً وسهلاً بك إلى الدرس السادس من دروس HTML

كيف وصلت إلى هذه الصفحة؟! ربما تعتبر هذا سؤالاً سخيفاً، وأن الإجابة عليه هي من البديهيات ... وهذا صحيح! من المؤكد أنك قمت بالإنتقال إلى هنا من خلال إحدى صفحات هذا الموقع، أو من خلال أحد محركات التفتيش، أو من خلال أحد المواقع التي قمت بزيارتها مؤخراً ... وفي كل الأحوال قمت بالنقر على وصلة تشعبية ما.

Links... أو الوصلات التشعبية هي روح الإنترنت. وإذا كانت الإنترنت بمجملها هي شبكة العنكبوت فإن هذه الوصلات هي الخيوط التي تشكل هذه الشبكة وتؤلف حلقات الوصل بين الملايين من مواقعها. تنقر على وصلة ما فتنقلك إلى صفحة أخرى في نفس الموقع... وتنقر على وصلة أخرى لتنقلك كلياً إلى أحد المواقع في الجانب الآخر من العالم... وصلة تجعلك تحمّل ملفاً وأخرى تجعلك تشغّل مقطعا موسيقياً وثالثة تعرض لك صورة...
حسناً، من المؤكد أنك استنتجت الآن من هذه المقدمة أنك بصدد تعلم كيفية إدراج الوصلات التشعبية في صفحاتك... لقد صدق استنتاجك لذلك هيا إلى العمل...

هناك عدة خيارات للوصلات التشعبية، منها أن تكون الوصلة لموقع آخر، أو أن تكون لصفحة أخرى داخل الموقع نفسه، ومنها أن تكون لمكان آخر في نفس الصفحة (إلى أعلى أو أسفل على سبيل المثال) أو أن تكون وصلة لعنوان بريد إلكتروني E-mail وفي جميع الحالات فإن المبدأ واحد لكن تختلف بعض التفاصيل. وسوف أناقش معك كل حالة على حدة وبالتفصيل.

نستخدم الوسوم

<A> ... <‎/A>


كوسوم أساسية لإدراج الوصلات التشعبية، وهي اختصار لكلمة Anchor. وهي لا تعمل لوحدها بل تتطلب إضافة خصائص معينة أولها وأهمها الخاصية

HREF

التي نحدد من خلالها الموقع الذي نريد الدلالة عليه، ويجب أن يكتب عنوان الموقع كاملاً.

الحالة الأولى: إدراج وصلة تشعبية تشير إلى موقع خارجي.
لنقم بإدراج وصلة تشعبية إلى أحد المواقع العربية الرائدة والرائعة، وهو موقع شركة صخر. وعنوانه http://www.sakhr.com في هذه الحالة يتم كتابة الشيفرة بالشكل التالي:

<A HREF="http://www.sakhr.com"> <‎/A>

لكن بقي شيء واحد وهو العبارة أو الكلمة التي سيتم النقر عليها لتشغيل الوصلة، وهذه يجب أن توضع بين الوسمين <A> ... <‎/A>. أي لكي تكتمل الوصلة السابقة يجب أن نكتب معها أي عبارة نريدها، لكي ينقر عليها الزائر فتنقله إلى العنوان المطلوب. ما رأيك بعبارة: Go To SAKHR والتي تصبح الشيفرة معها بالشكل التالي:

<A HREF="http://www.sakhr.com">Go To SAKHR<‎/A>

وتظهر الوصلة كما يلي:

Go To SAKHR

لم تعجبك؟ ليس ذلك مشكلة فأنت تستطيع كتابة أي شيء تريده كعنوان للوصلة التي تريدها. ما رأيك لو جعلنا كلمة SAKH‎R هي فقط العنوان لهذه الوصلة.

‎Go To <A HREF="http://www.sakhr.com">SAKHR<‎/A>‎

Go To SAKHR
بل إنك تستطيع إدراج صورة أو (زر) كبديل عن الكلمات -كما تشاهد في الكثير من المواقع- وكل ما عليك فعله في هذه الحالة هو كتابة الوسم الخاص بإدراج الصورة بين الوسمين <A> ... <‎/A> بالشكل التالي:

<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif">‎<‎/A>

والذي يؤدي إلى ظهور الصورة التالية كوصلة تشعبية لموقع صخر




وبشكل عام فإن أي شيء يوضع بين الوسمين <A> ... <‎/A> سوف يكون الوسيلة أو العنوان الذي ينقلنا إلى الموقع المشار إليه في الوصلة التشعبية، سواءً كان هذا الشيء نصاً أو صورة أو كلاهما معاً.

والآن هل تلاحظ الإطار الظاهر حول الصورة؟ وهل تذكر متى قمنا بالحديث عن هذا النوع من الإطارات؟ نعم، في الدرس السابق. عند إدراج صورة كوصلة تشعبية يظهر حولها إطار سمكه 2 بيكسل وهذه هي الحالة الإفتراضية. وبالطبع نستطيع إزالته بكتابة الخاصية BORDER="0"‎ ضمن وسم الصورة.

<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="0"><‎/A>


أو حتى تكبيره بكتابة السمك المطلوب مع هذه الخاصية.

<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="6"><‎/A>



--------------------------------------------------------------------------------


ننتقل الآن إلى الحالة الثانية، وهي أن تشير الوصلة التشعبية إلى ملف موجود في نفس الموقع (أي ملف محلي) سواءً كان ملف HTML أو صورة أو غير ذلك. وفي هذه الحالة فإن ما يكتب مع الخاصية HREF هو اسم هذا الملف المطلوب الوصول إليه.

لنقم بإنشاء وصلة تشعبية تقودنا إلى الصفحة الرئيسية لهذا الموقع وبالمناسبة فإن الملف الذي يحتويها اسمه index.html ، والشيفرة الخاصة بذلك هي:

<A HREF="index.html">Main Page<‎/A>

Main Page
وأذكرك بأنك تستطيع إدراج صورة هنا أيضاً كعنوان للوصلة التشعبية وذلك بنفس التفاصيل التي شرحتها في الحالة السابقة.

هيا ندرج صورة مصغرة كعنوان لوصلة تشعبية للصورة الأصلية.

<A HREF="nablus1.jpg"><IMG SRC="nablus_1.jpg" BORDER="0"><‎/A>

في هذا المثال قمت بتحديد الصورة المصغرة المسماه nablus_1.jpg كوصلة تشعبية تصلنا إلى الصورة الأصلية المسماه nablus1.jpg


لكن إنتبه I إذا كان الملف المطلوب والذي تريد الإشارة إليه موجوداً في مجلد مختلف عن المجلد الذي يوجد به الملف الحالي، فيجب عليك تحديد المسار الكامل لهذا الملف وذلك بنفس الطريقة التي ناقشناها في الدرس السابق عندما قمنا يإدراج الصور.


--------------------------------------------------------------------------------


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

والمبدأ هنا هو أن تقوم بتعريف أو تسمية هذا المكان بإسم معين سوف تقوم لاحقا باستخدامه في الوصلة التشعبية. وفي هذه الحالة يتحتم عليك استخدام الخاصية الثانية للوسم <A> وهي NAME

لنقم معاً بإدراج وصلة تشعبية داخل هذه الصفحة تقوم بنقل الزائر من مكان وجود هذه الوصلة إلى الفقرة الثالثة من هذه الصفحة والتي بدأنا فيها الحديث عن الوصلات التشعبية Links

أول ما يجب فعله هو الذهاب إلى هذه الفقرة واختيار أول كلمة فيها ثم وضعها داخل الوسوم <A> ... <‎/A>

<A>LINKS<‎/A>

والآن حان الوقت لاستخدام الخاصية NAME فالخطوة الثانية هي تعريف هذه الكلمة بأي اسم نريده (المهم أن نبقى متذكرين له). سوف أقوم بإعطاء الاسم attrib1

<A NAME="attrib1">LINKS<‎/A>

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

الخطوة الثالثة هي إدراج الوصلة التشعبية لهذه الفقرة.
ويلزمنا هنا معرفة اسم الملف الذي توجد به هذه الفقرة (أي هذا الملف الذي نعمل به) واسمه htutor06.html لأنه سيشكل المدخل الأساسي للوصول إلى الفقرة المحددة. وتكون شيفرة الوصول إلى هذه الفقرة هي كالتالي:

<A HREF="htutor06.html#attrib1">3rd Paragraph<‎/A>

‎3rd Paragraph


لاحظ أننا لم نكتف بذكر اسم الفقرة لوحدها بل يجب أن تقرن باسم الملف الأب الذي يتضمنها من خلال إشارة #


--------------------------------------------------------------------------------


أما الحالة الأخيرة والتي نقوم فيها بإدراج وصلة تشعبية لعنوان بريد إلكتروني، يؤدي النقر عليها إلى إطلاق برنامج البريد الإلكتروني للزائر بشكل تلقائي. فالإختلاف الوحيد الذي يطرأ هنا هو كتابة كلمة MAILTO بعد خاصية HREF لكي تدل على أن العنوان الذي يلي هو عنوان EMAIL وليس أي عنوان آخر

<A HREF="MAILTO:yahya@palnet.com"> Email Me <‎/A>

Email Me

--------------------------------------------------------------------------------




والآن بعد أن انتهيت من سرد أساسيات استخدام الوصلات التشعبية وإدراجها في صفحات الويب بقي هناك بعض التوضيحات والملاحظات التي أجد أن من المهم ذكرها لك.

عندما قمنا بالتوصيل إلى عنوان خارجي، سواء كان لموقع ويب أو عنوان Email لاحظنا أننا استخدمنا كلمات مفتاحية ميزت طبيعة هذا العنوان، وأعطت المتصفح فكرة عن طبيعة التعامل مع هذا العنوان وطريقة الاتصال به. فعندما أردنا التشعب إلى موقع الويب كتبنا كلمة HTTP والتي تدل على نوع البروتوكول المستخدم في الاتصال بهذا الموقع، وهو بروتوكول نقل النصوص المتشعبة Hyper************ Transfer Protocol وعندما كتبنا عنوان Email استخدمنا كلمة MAILTO قبل هذا العنوان. وبالتالي قمنا بالإيعاز للمتصفح بفتح برنامج البريد الإلكتروني الافتراضي وتجهيزه لإرسال رسالة إلى العنوان المدرج. وحتماً لقد صادفت مثل هذه الحالة كثيراً خلال تجولك في مواقع الويب.

لكن هنا مجالات أخرى لاستخدام الإنترنت ولكل منها بروتوكوله الخاص. فمثلاً هناك الآلاف من المزودات المنتشرة عبر الإنترنت والتي تحتوي على أعداد هائلة لا تحصى من الملفات والبرامج الجاهزة للتحميل ويتم الوصول إليها عبر بروتوكول خاص لنقل الملفات يدعى FTP (File Transfer Protocol)‎. ومن هذه المجالات أيضاً والتي لا تقل أهمية عن الويب أو البريد الإلكتروني المجموعات الإخبارية News Groups أو مجموعات النقاش التي تختص كل منها بمناقشة موضوع معين. وهذه تعمل من خلال بروتوكول NNTP (Network News Transfer Protocol)‎.

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



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

ftp://ftp.simtel.net/pub/simtelnet/win95/‎

وكل ما عليك فعله هو كتابة الشيفرة التالية:

<A HREF="ftp://ftp.simtel.net/pub/simtelnet/win95/">Simtel FTP Server<‎/A>

Simtel FTP Server
أما بالنسبة للمجموعات الإخبارية فتكتب الوصلات التشعبية لها باستخدام الكلمة المفتاحية NEWS. فعلى سبيل المثال، لوضع وصلة تشعبية لمجموعة النقاش alt.html الخاصة بمناقشة لغة HTML نكتب الشيفرة التالية:

<A HREF="news:alt.html">Alt.Html<‎/A>

Alt.Html


--------------------------------------------------------------------------------


أتمنى لك قضاء أسعد الأوقات مع مواقع الإنترنت ووصلاتها التشعبية، وأراك في الدرس التالي إن شاء الله.

صمت الجمال غير متواجد حالياً
قديم 20-04-2005, 04:09 AM   #4

الصورة الرمزية صمت الجمال

 رقم العضوية :  35
 تاريخ التسجيل :  06-09-2004
 المشاركات :  1,120
 العمر :  38
 عدد النقاط :  10
 قوة التقييم :  صمت الجمال is on a distinguished road
 اخر مواضيع » صمت الجمال
 تفاصيل مشاركات » صمت الجمال
 أوسمة و جوائز » صمت الجمال
 معلومات الاتصال بـ صمت الجمال

افتراضي


الدرس السابع : الجداول




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

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

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

هل أنت مستعد؟ إذن هيّا بنا…



--------------------------------------------------------------------------------


بداية، إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول

<TABLE>...<‎/TABLE> وسوم تعريف الجدول
<TR>...<‎/TR> Table Row وسوم تعريف الصف في الجدول

<TD> Cell Data <‎/TD> Table Data وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية



والآن لنتكلم بصورة أكثر دقة وتفصيلاً:

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

<TABLE> ... <‎/TABLE>

والآن بعد إدراج هذين الوسمين، هناك سؤالين ينبغي الإجابة عليهما. الأول: كم عدد الصفوف التي نريدها في الجدول؟ ثلاثة، أربعة، مائة؟ لا بأس، قم بإضافة الوسوم

<TR> ... <‎/TR>

بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلاثة.

<TABLE>

<TR>
<‎/TR>

<TR>
<‎/TR>

<TR>
<‎/TR>



<‎/TABLE>

والسؤال الثاني هو، كم عدد الخلايا (أو الأعمدة) التي نريدها في كل صف؟
وهنا نضيف الوسوم

<TD> ... <‎/TD>

بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين الوسوم <TR> ... <‎/TR> طالما أن الخلايا هي جزء من الصفوف. وهنا سأفترض أننا نريد خليتين في كل صف، وبذلك يجب تكرار كتابتها مرتين لكل صف.
وأذكرك أن النص الذي نريد إدراجه في الخلية يكتب ضمن هذين الوسمين.

<TABLE>

<TR>

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<‎/TABLE>

هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصلنا عليها.

Data Data
Data Data
Data Data

هناك شيء ما ينقص. بالطبع ... الحدود. انتظر قليلاً وستعرف الخاصية التي تقوم بإضافة الحدود للجدول وغيرها من الخصائص الأخرى. لأنني قبل أن أستمر أود أن ألفت نظرك لمسألة معينة في الجداول. وهي أن طريقة التعامل معها تتم على ثلاثة مستويات:


مستوى الجدول ككل

مستوى الصفوف ككل أو كل واحد على حده

مستوى الخلايا ككل أو كل واحدة على حده.


ولكل من هذه المستويات خصائصه التي ينفرد بها كما أن هناك خصائص مشتركة تستخدم مع كل الوسوم.


--------------------------------------------------------------------------------


نبدأ بمناقشة الخصائص التي تستخدم مع الوسوم <TABLE> ... <‎/TABLE> وسأقوم أولاً بسردها لك، ومن ثم إدراج بعض الأمثلة التي توضحها.



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

‎<TABLE BORDER="5">‎
‎<TABLE BORDER="0">‎

WIDTH نستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك أسلوبين لتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورة مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح. (أي أن عرض الجدول سيختلف باختلاف عرض نافذة المتصفح).

‎<TABLE WIDTH="600">‎
‎<TABLE WIDTH="80%">‎

HEIGHT لتحديد ارتفاع الجدول، ويكون تحديد هذا الإرتفاع من خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح

‎<TABLE HEIGHT="500">‎
‎<TABLE HEIGHT="100%">‎

CELLSPACING لتحديد المسافة بين كل خلية من خلايا الجدول

‎<TABLE CELLSPACING="10">‎

CELLPADDING لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول.

‎<TABLE CELLPADDING="10">‎


ALIGN لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left

‎<TABLE ALIGN="Left">‎
‎<TABLE ALIGN="Right">‎

BGCOLOR ويستخدم لتحديد لون الخلفية للجدول

‎<TABLE BGCOLOR="#00FFFF">‎




هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها على المثال الوارد في بداية هذا الدرس وسأكتفي بكتابة وسم البداية أما باقي الوسوم فهي نفسها:

‎<TABLE BORDER="5">‎


Data Data
Data Data
Data Data


--------------------------------------------------------------------------------


‎<TABLE BORDER="5" CELLPADDING="5">‎

Data Data
Data Data
Data Data


--------------------------------------------------------------------------------


‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10">‎

Data Data
Data Data
Data Data


--------------------------------------------------------------------------------


‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00">‎

Data Data
Data Data
Data Data


--------------------------------------------------------------------------------


‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00" HEIGHT="300">‎

Data Data
Data Data
Data Data


--------------------------------------------------------------------------------


‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00" HEIGHT="300" WIDTH="75%">‎

Data Data
Data Data
Data Data




--------------------------------------------------------------------------------




ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف <TR> ... <‎/TR> ولا بأس من تذكيرك أن عدد الصفوف في الجدول يتحدد بعدد هذه الوسوم. أما أهم الخصائص التي تضاف لهذا الوسم فهي:

ALIGN لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف، والقيم المحتملة لها هي Right, Left, Center والقيمة الإفتراضية هي Center

VALIGN لتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إما للأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على التوالي هي: Top, Bottom, Middle, ************line

BGCOLOR لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم <TABLE> ويتم تطبيق اللون المحدد هنا.


ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص من خلال الأمثلة التالية:

‎<TABLE BORDER="5" HEIGHT="300">‎
‎<TR ALIGN="Left">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR ALIGN="Right">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR ALIGN="Center">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>

Data Data
Data Data
Data Data


--------------------------------------------------------------------------------


‎<TABLE BORDER="5" HEIGHT="300">‎
‎<TR VALIGN="Top">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR VALIGN="Bottom">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR VALIGN="************line">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>

Data Data
Data Data
Data Data


--------------------------------------------------------------------------------


‎<TABLE BORDER="5" HEIGHT="300" BGCOLOR="#FFFFFF">‎
‎<TR BGCOLOR="#808080">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#C0C0C0">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR>‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>

Data Data
Data Data
Data Data


--------------------------------------------------------------------------------


‎<TABLE BORDER="0" HEIGHT="100%" WIDTH="100%">‎
‎<TR BGCOLOR="#808080">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#C0C0C0">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#FFFFFF">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>

Data Data
Data Data
Data Data


--------------------------------------------------------------------------------




والآن ماذا بقي لدينا؟ بالطبع بقيت الوسوم الخاصة بالخلايا. وسوف أتابع الحديث عنها في الدرس القادم إن شاء الله. أراك في الدرس التالي لنتابع الحديث عن موضوع الجداول.

صمت الجمال غير متواجد حالياً
قديم 20-04-2005, 04:12 AM   #5

الصورة الرمزية صمت الجمال

 رقم العضوية :  35
 تاريخ التسجيل :  06-09-2004
 المشاركات :  1,120
 العمر :  38
 عدد النقاط :  10
 قوة التقييم :  صمت الجمال is on a distinguished road
 اخر مواضيع » صمت الجمال
 تفاصيل مشاركات » صمت الجمال
 أوسمة و جوائز » صمت الجمال
 معلومات الاتصال بـ صمت الجمال

افتراضي


الدرس التاسع : الاطارات1



أهلاً وسهلاً بك إلى الدرس التاسع من دروس HTML. في هذا الدرس والدرسين التاليين سوف نقوم بالتعرف على الإطارات Frames وطريقة عرض صفحات الويب باستخدامها…

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

كما شاهدت، فإن الصفحة مكونة من ثلاثة أقسام: علوي وأيسر وأيمن… والحقيقة أن كل قسم منها هو عبارة عن ملف Html كامل ومستقل بحد ذاته. وهي مجرد صفحات عادية لا تختلف أبداً عن تلك التي تعلمت إنشاءها في الدروس السابقة، ولا علاقة لكل منها بالصفحات الأخرى من حيث التركيب والتعريف.
أما كيف تم جمعها معا لتظهر بالشكل الذي شاهدته؟ فهنا بيت القصيد. فبالإضافة إلى الصفحات والملفات الإعتيادية يوجد دائماً ملف أساسي يتم إنشاؤه خصيصا لتعريف صفحة الإطارات وتجميعها وتحديد خصائصها. أي أن المعادلة تتلخص بـِ:

مكونات صفحة الإطارات = عدد ملفات الصفحة نفسها + صفحة الملف الأساسي الذي يجمعها.

أي أنني في المثال السابق إحتجت فعلياً إلى أربعة ملفات لتكوين الصفحة.

وقبل أن نبدأ… لنقم بالتحضير للأمثلة التي سترد في هذا الدرس. لذلك قم بإنشاء ثلاثة أو أربعة ملفات بسيطة لكي تستخدمها في تطبيق الأمثلة أو استخدم ملفاتك القديمة التي قمت بالتدرب عليها في الدروس السابقة. أنا قمت بإنشاء ملفات على النمط التالي (وهي التي استخدمتها في المثال) وأسميتها frame1.html, frame2.html, frame3.html

<HTML>
<HEAD>
<TITLE>Frame1<‎/TITLE>
<‎/HEAD>
<BODY>
Frame 1
<‎/BODY>
<‎/HTML>


ونبدأ الآن بتعريف الملف الرئيسي الذي سيضم كافة الإطارات والملفات. وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم

<FRAMESET> ... <‎/FRAMESET>

بدلاً من الوسوم <BODY> ... <‎/BODY>

((إذن الملف الرئيسي للإطارات لا يتضمن تعريفا باستخدام BODY ))

<HTML>
<HEAD>
<TITLE>Master File<‎/TITLE>
<‎/HEAD>

<FRAMESET>
<‎/FRAMESET>

<‎/HTML>


نأتي الآن إلى الخصائص: والخاصية الأولى التي تستخدم مع هذه الوسوم هي COLS وهي تعرّف عدد وأحجام الإطارات العمودية للصفحة. وتُحدد الأحجام بطريقتين (هل عرفتهما؟) نعم… إنهما الطريقة المباشرة والطريقة النسبية...أو كلاهما معا.

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

‎<FRAMESET COLS="50%,50%">‎
<‎/FRAMESET>
*
يحدد إطارين عموديين حجم كل منهما 50% من حجم الشاشة

‎<FRAMESET COLS="20%,50%,30%">‎
<‎/FRAMESET>
*
يحدد ثلاثة إطارات أحجامها 20% و 50% و 30% على التوالي من حجم الشاشة

‎<FRAMESET COLS="200,300,*">‎
<‎/FRAMESET>
*
يحدد ثلاثة إطارات عمودية الأول حجمه 200 بيكسل، والثاني 300 بيكسل،
أما الثالث * أي انه غير محدد بحجم معين ولكنه سيكون بالحجم المتبقي من الشاشة (طالما أننا لا نعرف استبانة الشاشة التي يستخدمها زائر الموقع)

‎<FRAMESET COLS="200,*,15%,20%">‎
<‎/FRAMESET>
*
يحدد أربعة إطارات حجم الأول هو 200 بيكسل، والثالث 15% من حجم الشاشة، والرابع 20% من حجم الشاشة أما الثاني فسيكون حجمه بما تبقى من الشاشة.

‎<FRAMESET COLS="150,*,2*">‎
<‎/FRAMESET>

*
يحدد ثلاثة إطارات الأول حجمه 150 بيكسل.... أما المساحة المتبقية فتقسم على أساس أن الإطار الثالث حجمه هو ضعفي (*2) حجم الإطار الثاني (*)


أما الخاصية الثانية فهي ROWS وأعتقد أنك استنجت طبيعة عملها. نعم هي تحدد عدد وحجم الإطارات الأفقية (الصفوف) داخل الصفحة. وذلك بنفس الأسلوب المتبع مع الأعمدة، أي إما باستخدام الطريقة النسبية أو المطلقة. وسأقوم بسرد بعض الأمثلة لتوضيحها (وأذكرك ثانية أن هذه الأمثلة غير مكتملة):

‎<FRAMESET ROWS="50%,50%">‎
<‎/FRAMESET>
*
يحدد إطارين أفقيين ارتفاع كل منهما 50% من ارتفاع الشاشة

‎<FRAMESET ROWS="20%,50%,30%">‎
<‎/FRAMESET>
*
يحدد ثلاثة إطارات أفقية ارتفاعاتها 20% و 50% و 30% على التوالي من ارتفاع الشاشة

‎<FRAMESET ROWS="50,120,*">‎
<‎/FRAMESET>
*
يحدد ثلاثة إطارات أفقية الأول ارتفاعه 50 بيكسل، والثاني 120 بيكسل، والثالث سيكون بالإرتفاع المتبقي من الشاشة

‎<FRAMESET ROWS="50,*,15%,20%">‎
<‎/FRAMESET>
*
يحدد أربعة إطارات أفقية ارتفاع الأول هو 50 بيكسل، والثالث 15% من ارتفاع الشاشة، والرابع 20% من ارتفاع الشاشة أما الثاني فسيكون ارتفاعه بما تبقى من ارتفاع الشاشة.

‎<FRAMESET COLS="*,2*">‎
<‎/FRAMESET>
*
يحدد إطارين الثاني ارتفاعه ضعفي ارتفاع الأول


لم ننته بعد من ذكر كل الخصائص المتعلقة بالوسوم <FRAMESET> فلا زال هناك الكثير. ولكن من الضروري أن نقوم الآن بالإنتقال إلى وسم آخر للإطارات لأنه مرتبط إرتباطاً وثيقاً بالوسوم السابقة وخصائصها المذكورة أعلاه، وهي <FRAME> فما هو عمل هذا الوسم؟

حسنا، كل ما قمنا به حتى الآن هو تعريف مجموعة من الإطارات وخصائصها (فقط تعريف الإطارات) لكن لم نحدد ماهية هذه الإطارات ولا محتوياتها ولا مصادرها. تماما كما نقوم بتعريف صفحات الويب الإعتيادية وخصائصها في الوسم <BODY> دون أن يعني ذلك تحديد محتويات هذه الصفحات. فإذا أردنا فيما بعد إدراج صورة مثلاً نستخدم الوسم الخاص بذلك وهو ‎<IMG SRC="imagname.ext">‎

وفي حالة الإطارات فإننا نستخدم الوسم <FRAME> وهو وسم مفرد أي ليس له وسم نهاية تماماً مثل <IMG>. وفيه نقوم بتحديد مصدر وخصائص كل ملف نريد إظهاره داخل أحد الإطارات. ويتم استخدام هذا الوسم مرات بنفس عدد الإطارات المذكورة داخل <FRAMESET>. وسوف أقوم مباشرة باستخدام الخاصية SRC لتحديد مصدر الملف.

دعنا نقوم الآن بإتمام الشيفرة لبعض الأمثلة المذكورة أعلاه. ونبدأ بالمثال الأول:

‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="frame1.html">‎
‎<FRAME SRC="frame2.html">‎
<‎/FRAMESET>


الآن ... والآن فقط أصبح لديك صفحة إطارات محترمة.

مثال آخر:

‎<FRAMESET COLS="200,400,*">‎
‎<FRAME SRC="frame1.html">‎
‎<FRAME SRC="frame2.html">‎
‎<FRAME SRC="frame3.html">‎
<‎/FRAMESET>


مثال ثالث:

‎<FRAMESET ROWS="50,*,15%,20%">‎
‎<FRAME SRC="frame1.html">‎
‎<FRAME SRC="frame2.html">‎
‎<FRAME SRC="frame3.html">‎
‎<FRAME SRC="frame4.html">‎
<‎/FRAMESET>


ورابع:

‎<FRAMESET COLS="*,2*">‎
‎<FRAME SRC="frame1.html">‎
‎<FRAME SRC="frame2.html">‎
<‎/FRAMESET>



--------------------------------------------------------------------------------

وبالإضافة إلى ما ذكر، نستطيع إدراج صورة مباشرةً داخل الإطار وباستخدام <FRAME SRC> تماماً كما ندرجها باستخدام <IMG SRC> وإليك هذا المثال:

‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="frame1.html">‎
‎<FRAME SRC="thedome.jpg">‎
<‎/FRAMESET>
*


--------------------------------------------------------------------------------


والآن لماذا لا نقم معاً بمراجعة الأفكار الأساسية السابقة الذكر وتلخيصها؟ وهذه هي:-


لإدراج صفحة إطارات نحتاج إلى ملف رئيسي يعتبر بمثابة الوعاء الذي سيضم هذه الإطارات.
الملف الرئيسي هو ملف HTML إعتيادي غير أننا نكتب الوسوم <FRAMESET> ...<‎/FRAMESET> بدلاً من <BODY> ...</BODY>. وبالتالي فهو يحتوي على الخصائص التي نريدها للإطارات وتعريفاتها.
نستخدم الخصائص COLS, ROWS لتحديد عدد الإطارات (صفوفاً كانت أو أعمدة) وأحجامها.
الملفات الفرعية التي تظهر ضمن الإطارات هي ملفات عادية كالتي قمنا بإنشائها في الدروس السابقة أو صوراً. ولا تحتوي على أي تنسيق أو وسوم خاصة.
نستخدم الوسم <FRAME> داخل الملف الرئيسي لمناداة الملفات الفرعية داخل الإطارات، وذلك مع الخاصية SRC. بالإضافة إلى استخدامه لتحديد باقي الخصائص .




كما نستطيع تمثيل هيكلية الإطارات من خلال الشكل التالي:


هل تأكدت من فهمك لهذه النقاط؟ لنتابع إذن ...
حتى الآن قمنا بتقسيم الصفحة إما لإطارات أفقية أو لإطارات عمودية. لكن نحتاج لمعرفة كيفية إدراج كلاهما في الصفحة. كما في الأمثلة التالية:


صفحة مكونة من صفين، الثاني منهما مقسم بدوره إلى عمودين *

صفحة مكونة من عمودين، الثاني منهما مقسم بدوره إلى صفين *


لنبدأ بالمثال الأول:
بما أن الصفحة تحتوي على صفين نقوم بتعريفهما أولاً حسب الإرتفاعات المرغوب بها:

‎<FRAMESET ROWS="100,*">‎
‎<FRAME SRC="frame1.html">‎
‎<FRAME SRC="frame2.html">‎
<‎/FRAMESET>



لكن الصف الثاني مقسم إلى عمودين وهنا يعتبر بمفهوم لغة HTML وكأنه صفحة إطارات جديدة لذلك لا نحتاج لتعريفه كصف وبدلاً من ذلك نعاود استخدام تعريف الصفحات! أي <FRAMESET> مرة أخرى.

‎<FRAMESET ROWS="100,*">‎
‎<FRAME SRC="frame1.html">‎

<FRAMESET>
<‎/FRAMESET>

<‎/FRAMESET>



وبما أن الصف الثاني (أو لنقل الإطار الثاني) مقسم إلى عمودين، إذن بقي علينا إضافة تعريف لهذه الأعمدة. وبذلك تكون الشيفرة النهائية كالتالي:

‎<FRAMESET ROWS="100,*">‎
‎<FRAME SRC="frame1.html">‎

‎<FRAMESET COLS="200,*">‎
‎<FRAME SRC="frame2.html">‎
‎<FRAME SRC="frame3.html">‎
<‎/FRAMESET>

<‎/FRAMESET>



ما رأيك أن تحاول كتابة الشيفرة الخاصة بالمثال الثاني، أما إذا أردت إختصار هذه المهمة فهذه هي


--------------------------------------------------------------------------------

لنقم الآن بإدراج مثال آخر وتحليله: أنقر هنا لمشاهدته ثم عد إلى هنا لنناقشه معاً

يوجد لدينا ثلاثة أعمدة، أليس كذلك؟ إذن لنقم بتعريف صفحة إطارات ذات ثلاثة أعمدة (طبعاً لا يوجد أهمية للأحجام المذكورة، فأنا اخترتها حسب رغبتي وتستطيع أنت اختيار الأحجام التي تريدها).

‎<FRAMESET COLS="100,*,100">‎
‎<FRAME SRC="frame1.html">‎
‎<FRAME SRC="frame2.html">‎
‎<FRAME SRC="frame3.html">‎
<‎/FRAMESET>



العمود الأوسط من هذه الصفحة مقسم إلى صفين، إذن نستبدل تعريفه بتعريف آخر لصفحة إطارات مكونة من صفين (وهذا هو التعريف بصورة مستقلة)

‎<FRAMESET ROWS="80,*">‎
‎<FRAME SRC="frame2.html">‎
‎<FRAME SRC="frame4.html">‎
<‎/FRAMESET>



وبعد دمج الشيفرتين السابقتين معاً نحصل على هذه الشيفرة النهائية:

‎<FRAMESET COLS="100,*,100">‎
‎<FRAME SRC="frame1.html">‎

‎<FRAMESET ROWS="80,*">‎
‎<FRAME SRC="frame2.html">‎
‎<FRAME SRC="frame4.html">‎
<‎/FRAMESET>

‎<FRAME SRC="frame3.html">‎
<‎/FRAMESET>



وصلنا الآن إلى نهاية هذا الدرس. وقد قمنا فيه بمناقشة أساسيات إدراج الإطارات، ولكن بقى هناك الكثير ليقال في هذا المجال. وهو ما سنكمله في الدرسين القادمين! أراك على خير في الدرس التالي.

صمت الجمال غير متواجد حالياً
قديم 20-04-2005, 04:12 AM   #6

الصورة الرمزية صمت الجمال

 رقم العضوية :  35
 تاريخ التسجيل :  06-09-2004
 المشاركات :  1,120
 العمر :  38
 عدد النقاط :  10
 قوة التقييم :  صمت الجمال is on a distinguished road
 اخر مواضيع » صمت الجمال
 تفاصيل مشاركات » صمت الجمال
 أوسمة و جوائز » صمت الجمال
 معلومات الاتصال بـ صمت الجمال

افتراضي


الدرس العاشر: الاطارات 2




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

بداية، أجد من الضروري أن أذكرك بالوسمين الأساسيين للإطارات واللذين ندرجهما في الملف الأساسي، وهما <FRAMESET> والذي يوضع بدلاً من <BODY> ويشكّل الوسم الأساسي لتحديد مجموعة الإطارات في الصفحة وخصائص هذه المجموعة ككل. و <FRAME> الذي يوضع داخل نطاق الوسم السابق ويعرّف الملف المصدر لكل إطار ويحدد خصائصه. ومن المهم جداُ أن نميز بين الخصائص المتعلقة بكل وسم وأن لا نخلط بينهما.

وعند الحديث عن الإطارات سوف نواجه تلك المشكلة العتيدة التي تؤرق دائماً مصممي صفحات الويب، ألا وهي مسألة توافق الوسوم والخصائص مع المتصفحات المختلفة (والتي قمت بتوضيحها هنا). فمثلاً لدينا أربع خصائص للوسم <FRAMESET> ، لكن واحدة منها فقط تعمل مع كلا المتصفحين الرئيسيين Netscape, MS Explorer. وكما إعتدنا سوف لن أركز على هذه الخصائص ، لكن على الأقل سأكتفي بذكرها وذكر عملها وأترك لك حرية تجربتها إن أردت.

أولى هذه الخصائص هي FRAMEBORDER وهي تقوم بتحديد ظهور أو عدم ظهور الحدود حول الإطارات وتأخذ القيم 1 للظهور، و0 لعدم الظهور. وهذا مثال عليها:

‎<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">‎
‎<FRAME SRC="frame1.html">‎
‎<FRAME SRC="frame2.html">‎
‎<FRAME SRC="frame3.html">‎
‎<FRAME SRC="frame4.html">‎
<‎/FRAMESET>
*

أما الخصائص الثلاث الأخرى فهي:

BORDER: تحدد سمك الحدود الظاهرة حول الإطارات وهي تأخذ قيماً بالبيكسل. (‎BORDER="n"‎) وتعمل فقط مع Netscape


BORDERCOLOR: لإضافة لون للحدود (‎BORDERCOLOR="rrggbb"‎) وتعمل مع Netscape أيضاً.


FRAMESPACING: لتحديد مسافات فارغة إضافية حول الإطارات وتأخذ قيماً بالبيكسل (FRAMESPACING="n"‎) وهي تعمل مع MS Explorer.



--------------------------------------------------------------------------------


أما الخصائص المستخدمة مع الوسم <FRAME> فهي كالتالي:


MARGINHEIGHT: تحدد مقدار المسافة الفارغة المتروكة للهوامش العلوية والسفلية للإطار (بالبيكسل).

‎MARGINHEIGHT="n"‎

MARGINWIDTH: تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى واليسرى للإطار (بالبيكسل).

‎MARGINWIDTH="n"‎

SCROLLING: تحدد إمكانية ظهور أو عدم ظهور أشرطة التصفح الأفقية والعمودية على جوانب أو أسفل الإطار. وتأخذ القيم yes للظهور. no لعدم الظهور. و auto التي تحدد ظهور الأشرطة أو عدمه تلقائياً بحسب الحاجة إليها. تماماً كما يحدث في معظم تطبيقات Windows

SCROLLING="yes"‎
SCROLLING="no"‎
SCROLLING="auto"‎


NORESIZE عند إضافة هذه الخاصية يتم منع عملية التحكم بحجم الإطار بالتصغير أو التكبير من خلال السحب والإفلات. وهي لا تأخذ أي قيم.


ولتوضيح مبدأ عمل هذه الخصائص إليك هذه الأمثلة، (سأقوم باستخدام الملف الرئيسي الذي أدرجت فيه الصورة في الدرس السابق، فهو أفضل مثال لتوضيحها). ولكي أذكرك به رجاءً أنقر هنا. وقم بتفحصه والتدقيق في تفاصيله لكي تقارنها بما سينتج عن الأمثلة التالية، كذلك حاول القيام بتكبير الإطار أو تصغيره بوضع المؤشر على الحد ثم استخدام السحب والإفلات بالإتجاه المطلوب. وذلك لكي تستطيع تمييز عمل الخاصية NORESIZE


--------------------------------------------------------------------------------


‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40">‎
‎<FRAME SRC="frame2.html">‎
‎</FRAMESET>‎
*


--------------------------------------------------------------------------------


‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30">‎
‎<FRAME SRC="frame2.html">‎
‎</FRAMESET>‎
*


--------------------------------------------------------------------------------


‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes">‎
‎<FRAME SRC="frame2.html">‎
‎</FRAMESET>‎
*


--------------------------------------------------------------------------------


‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes" NORESIZE>‎
‎<FRAME SRC="frame2.html">‎
‎</FRAMESET>‎
*


--------------------------------------------------------------------------------




كذلك هناك الخصائص FRAMEBORDER, FRAMESPACING, BORDER, BORDERCOLOR التي تستخدم مع هذا الوسم وبنفس التفاصيل التي ذكرت مع <FRAMESET>. لكنها بالطبع تحدد خصائص الإطار وحده وليس مجموعة الإطارات ككل في الصفحة. وهي تعمل على متصفحات معينة دون غيرها.

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


--------------------------------------------------------------------------------

هناك وسم ثالث يتعلق بالإطارات، ويتم إدراجه داخل الملف الرئيسي وعادة في النهاية وهو:

<NOFRAMES> ... <‎/NOFRAMES>

يستخدم هذا الوسم لتوفير بديل معين عن صفحة الإطارات في حالة قيام أحد الزوار بدخول الموقع مستخدماً متصفحاً لا يدعم الإطارات. (بالمناسبة فإن هناك متصفحات لا يمكن لها أن تعرض الإطارات مثل الإصدارات القديمة لـِ Netscape, MS Explorer) لكنك حتماً تستطيع مشاهدتها وذلك لأن الإصدارات المعربة من هذه المتصفحات هي إصدارات حديثة نسبياً وتدعم الإطارات.

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

<HTML>
<HEAD>
<TITLE>Main File<‎/TITLE>
<‎/HEAD>
‎<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">‎
‎<FRAME SRC="frame1.html">‎
‎<FRAME SRC="frame2.html">‎
‎<FRAME SRC="frame3.html">‎
‎<FRAME SRC="frame4.html">‎
<‎/FRAMESET>

<NOFRAMES>
<BODY>


أكتب صفحتك
بالصورة
الإعتيادية هنا

<‎/BODY>
<‎/NOFRAMES>

<‎/HTML>


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


--------------------------------------------------------------------------------

وماذا بعد...؟ لم يبق أي شيء ليذكر في هذا الدرس فقد قمنا بمناقشة جميع خصائص الإطارات عدا الخاصية NAME. ما رأيك لو قمنا بالتدرب على إنشاء نسخة من هذا الموقع باستخدام الإطارات في الدرس التالي؟ فكر في هذا الموضوع وتخيّل تصميماً معيناً تحب أن تراه في هذا الموقع (أو بالأحرى تحب أن ترى الموقع فيه). وقم بتجهيز الملفات الخاصة بذلك لتقارنها مع الملفات والأمثلة التي سأوردها. أراك على خير في الدرس التالي

صمت الجمال غير متواجد حالياً
قديم 20-04-2005, 04:16 AM   #7

الصورة الرمزية صمت الجمال

 رقم العضوية :  35
 تاريخ التسجيل :  06-09-2004
 المشاركات :  1,120
 العمر :  38
 عدد النقاط :  10
 قوة التقييم :  صمت الجمال is on a distinguished road
 اخر مواضيع » صمت الجمال
 تفاصيل مشاركات » صمت الجمال
 أوسمة و جوائز » صمت الجمال
 معلومات الاتصال بـ صمت الجمال

افتراضي


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

لقد أنهينا في الدرسين الماضيين شرح كافة الوسوم والخصائص التي تتعلق بالإطارات، عدا واحدة هي NAME ووعدتك أن أقوم بشرحها بصورة وافية في درس مستقل. كما وعدتك أن نقوم بإجمال موضوع الإطارات والتدرب عليها من خلال مثال واقعي يتمثل بإنشاء صفحة إطارات لهذا الموقع وهاأنا ذا أفي بوعدي.

لقد قلت إن هذه الخاصية تعتبر من أهم خصائص الوسم <FRAME> لأنها تحدد طريقة تنسيق العمل بين الإطارات والصفحات وأسلوب عرضها. لنعتبر هذا تعريفاً مبدئياً. ولكي أوضح لك الهدف من هذه الخاصية، قم باستعراض المثال التالي ... الذي قمت فيه بتمثيل بعض الأجزاء من هذا الموقع (لنترك تلك الأمثلة المملة التي كنا نعمل عليها في هذا الدرسين السابقين ولنبدأ بالعمل الجدي). وأنقر على أزرار الوصلات التشعبية الموجودة في الإطار الأيسر ......وبالطبع لا تنسى النقر على زر BACK الموجود في متصفحك للعودة إلى هذه الصفحة. وقد تحتاج إلى نقره عدة مرات بحسب عدد المرات التي تنقلت فيها في صفحات الإطار.

ماذا وجدت؟!؟ إن الصفحات تظهر في نفس الإطار (أعرف أنك كنت تتوقع ظهورها في الإطار الآخر... فهل خيبت ظنّك؟). حسناً، لا زالت هذه الإطارات تحتاج إلى القليل من العمل لكي تعمل كما يجب. وقبل أن نكمل أود أن تتمعن في الشيفرات التالية، وهي في الواقع الشيفرات الخاصة بالملفات المستخدمة في هذا المثال. وأرجو أن تقوم بدراستها جيداً، على الأقل لكي تكون متأكداً من فهمك لكل الأفكار السابقة قبل أن تنتقل إلى النقاط التي ستلي.


--------------------------------------------------------------------------------

شيفرة الملف الرئيسي الذي أسميته mainfile.html

<HTML>
<HEAD>
<TITLE>Main File<‎/TITLE>
<‎/HEAD>
‎<FRAMESET ROWS="60,*">‎
‎<FRAME SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎
‎<FRAMESET COLS="120,*">‎
‎<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎
‎<FRAME SRC="htmintro.html">‎
<‎/FRAMESET>
<‎/FRAMESET>
<‎/HTML>



--------------------------------------------------------------------------------

شيفرة الملف العلوي (الترويسة) الذي أسميته header.html

<HTML>
<HEAD>
<TITLE>Header File<‎/TITLE>
<‎/HEAD>
‎<BODY bgcolor="#BCD8EB">‎
<CENTER><IMG SRC="frambnr.jpg"><‎/CENTER>
<‎/BODY>
<‎/HTML>



--------------------------------------------------------------------------------

شيفرة الملف الذي يحتوي على الأزرار والوصلات التشعبية والذي أسميته lftframe.html

<HTML>
<HEAD>
<TITLE>Buttons<‎/TITLE>
<‎/HEAD>
‎<BODY BGCOLOR="#BCD8EB">‎
‎<A HREF="htutor01.html"><IMG SRC="lesson1.jpg"></A><BR>‎
‎<A HREF="htutor02.html"><IMG SRC="lesson2.jpg"></A><BR>‎
‎<A HREF="htutor03.html"><IMG SRC="lesson3.jpg"></A><BR>‎
‎<A HREF="htutor04.html"><IMG SRC="lesson4.jpg"></A><BR>‎
‎<A HREF="htutor05.html"><IMG SRC="lesson5.jpg"></A><BR>‎
<‎/BODY>
<‎/HTML>



--------------------------------------------------------------------------------


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


--------------------------------------------------------------------------------


وهنا يأتي دور الخاصية NAME والتي نقوم من خلالها بتعيين اسم ما للإطار -أي الإطار الذي نرغب أن تظهر به الملفات عندما نقوم بالنقر على الوصلات التشعبية- حيث سيتم فيما بعد استخدام هذا الإسم من أجل استهداف هذا الإطار من قبل الوصلات التشعبية في الإطارات الأخرى أو حتى في الصفحات الأخرى.
وبالمناسبة فقد حان الآن ذكر خاصية جديدة من خصائص الوسم <A> ... <‎/A> ( وهو وسم الوصلات التشعبية كما عرفت في الدرس السادس.) وهذه الخاصية هي TARGET. (انتظر قليلاً وستعرف لماذا)

دعنا نقوم بترتيب الأمور بصورة أكثر وضوحاً وتسلسلاً:
برأيك بأي من الملفات الثلاثة السابقة يجب أن نضع الخاصية NAME? سؤال سخيف! أليس كذلك؟ طالما أنها إحدى خصائص الوسم <FRAME> إذن من البديهي جداً أن ترد معه. وبما أن هذا الوسم يوضع فقط في الملف الرئيسي إذن هي توضع في الملف الرئيسي... هذه أصبحت واضحة***! لكن مع أي وسم من وسوم <FRAME> الموجودة في الملف الرئيسي؟؟ بالطبع ليس مع الوسم الخاص بتعريف ملف الترويسة فهذا لا نريد استهدافه، وكذلك الأمر بالنسبة لتعريف ملف الوصلات التشعبية الذي لا نريد استهدافه أيضاً. إذن لم يبق لدينا إلا الوسم الخاص بتعريف الإطار العام الذي ستظهر به الملفات. وبافتراض أننا نريد تسمية هذا الإطار بالاسم main************************ وهو اسم اختلقته أنا حسب ما أريد وأستطيع إعطاءه أي اسم آخر أريده طالما أنه يبدأ بحرف أبحدي أو رقم وليس برمز خاص مثل /؟#$%^ (عدا الرمز _ الذي يستخدم في حالات خاصة سأذكرها لك لاحقاً في هذا الدرس).

إذن تصبح شيفرة الملف الأساسي هي:

<HTML>
<HEAD>
<TITLE>Main File<‎/TITLE>
<‎/HEAD>
‎<FRAMESET ROWS="60,*">‎
‎<FRAME SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎
‎<FRAMESET COLS="120,*">‎
‎<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎
‎<FRAME SRC="htmintro.html" NAME="mainwindow">‎
<‎/FRAMESET>
<‎/FRAMESET>
<‎/HTML>


وبهذا نكون قد إنتهينا من إعداد الملف الرئيسي ليكون ملف إطارات فعال مائة بالمائة. ونستطيع الآن استهداف ذلك الإطار من أي مكان باستخدام الإسم الذي عرفناه به.

المرحلة الثانية هي تعريف الوصلات التشعبية بطريقة تجعل الملفات المتعلقة بهذه الوصلات تظهر في الإطار المحدد. وهنا يأتي دور الخاصية TARGET سالفة الذكر لكي تقوم على الرحب والسعة بأداء هذه الوظيفة. وسوف نعمل الآن على الملف المسمى lftframe.html. أليس هو الملف الذي يحتوي على الوصلات التشعبية؟! ليصبح بالشكل التالي:

<HTML>
<HEAD>
<TITLE>Buttons<‎/TITLE>
<‎/HEAD>
‎<BODY BGCOLOR="#BCD8EB">‎
‎<A HREF="htutor01.html" TARGET="mainwindow"><IMG SRC="lesson1.jpg"></A><BR>‎
‎<A HREF="htutor02.html" TARGET="mainwindow"><IMG SRC="lesson2.jpg"></A><BR>‎
‎<A HREF="htutor03.html" TARGET="mainwindow"><IMG SRC="lesson3.jpg"></A><BR>‎
‎<A HREF="htutor04.html" TARGET="mainwindow"><IMG SRC="lesson4.jpg"></A><BR>‎
‎<A HREF="htutor05.html" TARGET="mainwindow"><IMG SRC="lesson5.jpg"></A><BR>‎
<‎/BODY>
<‎/HTML>


والآن حان وقت العرض، أنقر هنا لنشاهد صفحة الإطارات بعد التعديل:

لقد نجحنا... أليس كذلك

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

مشكلة جديدة، أليس كذلك؟ ففي الحالة الأولى تم تحميل الصفحة داخل الإطار نفسه، وبذلك أصبحت الصفحات متداخلة في ما بينها، وكذلك الأمر في الحالة الثانية. أي أننا بإختصار لا نستطيع إبقاء الوسم بالشكل:

<A HREF="filename.html" TARGET="mainwindow"> ... </A>

كما لا نستطيع كتابته بالشكل التالي:

<A HREF="filename.html"> ... </A>

وطبعاً أنت تعرف السبب في كلتا الحالتين.

لقد وقعنا في مصيدة الإطارات. إذن فما الحل؟ الحل توفره لغة HTML نفسها من خلال وضع قيمة معينة للخاصية TARGET وهي "‎_top" لتخبر المتصفح أن يقوم بتحميل الصفحة في المستوى الأعلى من الشاشة. أي ان يقوم بإلغاء أي إطارات أو صفحات عادية موجودة أصلاً وأن يحمل الصفحة الجديدة مكانها. وهذه القيمة معرفة بشكل مسبق في لغة HTML وليست من عندي كما في الإسم main************************

والحقيقة أنه يوجد ثلاث قيم أخرى بالإضافة إلى ‎_top معرفة بشكل مسبق في لغة HTML لتحدد موقع ظهور الصفحة المعنية. ويجب أن تتذكر دائماً أنها تكتب بالأحرف الصغيرة lowercase. فإذا كتبت بالأحرف الكبيرة فلن تحصل على النتيجة التي تريدها لأنها ستعتبر في هذه الحالة وكأنها أسماء عادية. وهذه هي القيم الأربعة:
تحمل الصفحة في أعلى مستوى للشاشة أي تلغي الإطارات الموجودة أصلاً



تقوم بفتح شاشة جديدة وفارغة للمتصفح وتعرض الصفحة المحملة فيه





(الحالة الإفتراضية) تقوم بتحميل الصفحة في نفس الإطار الذي توجد به الوصلة التشعبية التي تم النقر عليها، (وبالطبع هذا ما يحدث دائما دون وجود هذه القيمة، أليس كذلك؟)



تقوم بعرض الإطار المحمل مكان الإطار الأب،

وتأمل الشكل التالي الذي يمثل صفحة إطارات مركبة.


أنت تعرف أننا نحتاج إلى ثلاثة أزواج من الوسوم <FRAMESET> ... <‎/FRAMESET> لإخراج مثل هذه الصفحة.

الأول لتحديد الصفحة ككل

الثاني لتحديد الإطارين 2 و 3 المتفرعين من الصفحة الرئيسية

الثالث لتحديد الإطارين 4 و 5 المتفرعين من الإطار 3

وبالتالي نقول أن الصفحة الرئيسية هي الأب (أو الأم إذا أردت) للإطارين 2 و 3 وأن الإطار 3 هو الأب للإطارين 4 و 5. وعلى سبيل المثال إذا احتوى الإطار 5 أو 4 على وصلة تشعبية هدفها القيمة ‎_parent لتم تحميلها مكان الإطار 3... وهكذا الأمر بالنسبة للإطارين 1 و 2 بمقابل الصفحة الرئيسية.
وللتمييز بين هذه القيمة والقيمة ‎_top فإن القيمة ‎_top تقوم بالتحميل في المستوى الأول (الأعلى) دائماً وبغض النظر عن موقع الوصلة التشعبية.



ونعود الآن إلى صفحتنا. فلو أضفنا السطرين التاليين إلى ملف الوصلات التشعبية:

‎<A HREF="mainfile.html" TARGET="_top"><IMG SRC="mainpage.jpg"></A><BR>‎
‎<A HREF="htmintro.html" TARGET="_top"><IMG SRC="noframes.jpg"></A><BR>‎


لحصلنا على النتيجة المرجوة. جرّب ذلك وبذلك تستطيع أن تقول وبكل ثقة

نجحنا بجدارة

صمت الجمال غير متواجد حالياً
قديم 20-04-2005, 04:17 AM   #8

الصورة الرمزية صمت الجمال

 رقم العضوية :  35
 تاريخ التسجيل :  06-09-2004
 المشاركات :  1,120
 العمر :  38
 عدد النقاط :  10
 قوة التقييم :  صمت الجمال is on a distinguished road
 اخر مواضيع » صمت الجمال
 تفاصيل مشاركات » صمت الجمال
 أوسمة و جوائز » صمت الجمال
 معلومات الاتصال بـ صمت الجمال

افتراضي


الدرس الثاني عشر: وسوم ... من هنا وهناك!!!

أهلاً وسهلاً بك إلى الدرس الثاني عشر من دروس HTML. كما ترى من العنوان فقد اخترت أن يكون هذا الدرس خارجاً قليلاً عن نطاق الدروس السابقة من حيث المحتوى. فلن تجد هنا وسوماً محددة تستطيع حصرها تحت موضوع معين، بل وسوماً عامة وخصائص إضافية لوسوم ذكرت سابقاً. وإن كان الهدف من معظمها ترتيب الصفحة والتحكم بشكل محتوياتها. ولا أخفي عليك أني قصدت تأجيل بعضها حتى هذا الدرس مع أنه كان من الممكن إدراجها ضمن دروس سابقة، وخاصة الدرس الرابع (الفقرات). لكن حجّتي في عدم إدراجها في حينه أن هذه الوسوم لن يتم استخدامها ولن تُفهم طريقة عملها إلاّ عند استخدام وسوم أخرى تمّ شرحها في وقت لاحق بعد الفقرات مثل الصور والجداول. أما البعض الآخر ففضلت عدم حصرها ضمن أي درس على اعتبار أنها وسوم عامة لا تختص بأي موضوع. على أية حال يكفينا هذه المقدمة وأترك لك حرية تصنيفها كما يحلو لك. والآن لندخل مباشرة في الموضوع.


--------------------------------------------------------------------------------


أترى هذا الخط الذي فصلت به هذه الفقرة عن الفقرة السابقة؟ إنه يسمى بلغة HTML بالمسطرة الأفقية Horizontal Rule وتستطيع إدراجه لتقسيم صفحتك بكتابة الوسم <HR> فقط لا غير. أكتب:

<HR>

ليظهر لديك هذا الخط:


--------------------------------------------------------------------------------

لكن هذا ليس كل شيء. لأنك تستطيع تحديد سُمك هذا الخط إذا أضفت له الخاصية SIZE وأتبعتها برقم يمثل هذا السُمك مثلاً:

‎<HR SIZE="5">‎



--------------------------------------------------------------------------------


‎<HR SIZE="1">‎



--------------------------------------------------------------------------------


‎<HR SIZE="10">‎



--------------------------------------------------------------------------------


كذلك يمكنك تحديد عرض الخط باستخدام الخاصية WIDTH والتي من الممكن أن تأخذ قيمة مطلقة أو نسبية

‎<HR WIDTH="80%">‎



--------------------------------------------------------------------------------


‎<HR WIDTH="400">‎



--------------------------------------------------------------------------------


‎<HR SIZE="5" WIDTH="60%">‎



--------------------------------------------------------------------------------


ومن الخصائص الأخرى لهذا الخط خاصية المحاذاه ALIGN والتي تأخذ القيم center, left, right

‎<HR WIDTH="80%" ALIGN="center">‎


--------------------------------------------------------------------------------

‎<HR WIDTH="400" ALIGN="left">‎


--------------------------------------------------------------------------------

‎<HR SIZE="5" WIDTH="60%" ALIGN="right">‎


--------------------------------------------------------------------------------

وكما تلاحظ فإن هذا الخط يكتسب مظهراً غائراً ثلاثي الأبعاد وإذا أردت خطاً عادياً غير غائر فقم بإضافة الخاصية NOSHADE

<HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE>



--------------------------------------------------------------------------------


أما إذا كان لون هذا الخط لا يعجبك، فما من مشكلة إذ أنك تستطيع اختيار اللون الذي يعحبك من خلال الخاصية COLOR (تعمل فقط مع MS Explorer)

<HR SIZE="5" WIDTH="60%" ALIGN="center" COLOR="#FF0000" NOSHADE>



--------------------------------------------------------------------------------



--------------------------------------------------------------------------------


الوسم التالي في هذه المجموعة هو وسم الملاحظات ‎<!-- ... -->‎ ونستخدمه عند الحاجة لكتابة بعض الملاحظات الخاصة أو العبارات التوضيحية ضمن الملف والتي يقصد أن لا تظهر عند استعراض هذا الملف في المتصفح.

‎This is line one<BR>‎
‎<!-- This is line two --><BR>‎
‎and, this is line three<BR>‎


وهذه هي النتيجة

This is line one

and, this is line three



--------------------------------------------------------------------------------


من المؤكد أنك تعرف الوسم <BR> والذي يقوم بالتحكم في نهايات الأسطر (أي أنه ينهي السطر الحالي بحيث يظهر النص الذي يليه في سطر جديد). فهل تعلم أنه يوجد خاصية لهذا الوسم وهي CLEAR؟

لكي تتوضح لك طبيعة عمل هذه الخاصية، قم بمراجعة ما ذكرناه في الدرس الخامس عن الصور والرسومات، واستخدام الخاصية ALIGN التي تحدد موقع هذه الصور على الصفحة. حسناً، لقد إتفقنا في حينه على أن القيمة right توجه الصورة إلى يمين الصفحة وأن النص الذي يليها يظهر ملتفاً بعدة أسطر على الجهة اليسرى. وكذلك الأمر (بصورة معكوسة) عند استخدام القيمة left. وحتى لو استخدمنا القيمة bottom أو لم نقم بإضافة الخاصية ALIGN أصلاً، فسوف نجد أن النص الذي يليها يظهر بمحاذاة الحافة السفلى للصورة.

يتلخص عمل الخاصية CLEAR في منع النص من الإلتفاف على أي من جانبي الصورة.
وهي تأخذ القيم right التي تمنع ظهور النص إلاّ عند بداية الهامش الأيمن الفارغ بعد الصورة (أي بمنتهى البساطة تمنع ظهور النص والتفافه على الجهة اليسرى للصورة... أليست هذه العبارة أسهل للفهم؟!!) وبالتالي فإن هذه القيمة تستخدم عندما تكون قيمة ALIGN للصورة هي right.

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

منطق معكوس... أليس كذلك؟ على أية حال إذا كنت تكرة هذه التعقيدات وتحب الطرق المختصرة مثلي، فاستخدم القيمة all التي تمنع الإلتفاف من جميع الجوانب.

ما رأيك أن نقتبس بعض الأمثلة من الدرس الخامس لنشاهد كيف تعمل مع إضافة هذه الخاصية؟ وسوف أدرج هذه الأمثلة كما هي نصاً وحرفاً أما الإضافات فهي المميزة باللون الأحمر

RIGHT


أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة.


‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎
‎<BR CLEAR="right">‎
فإذا أضفنا الوسم <BR> مع الخاصية ‎CLEAR="right"‎ لوجدنا أنها منعت النص من الإلتفاف




والآن لنجرب استخدام القيمة left مع هذا المثال نفسه

RIGHT


أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة.


‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎
‎<BR CLEAR="left">‎
نلاحظ أن لا فائدة من استخدام الوسم <BR> مع الخاصية ‎CLEAR="left"‎ فكل ما فعلته هو إضافة سطر فارغ أعلى النص




حسناً لنستخدم القيمة left في مكانها الصحيح، أي مع المحاذاة left

LEFT


هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص الذي يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة.


‎<IMG SRC="image.jpg" ALIGN="LEFT">‎
‎<BR CLEAR="left">‎
الآن تعمل هذه القيمة كما يجب (لا شيء أفضل من وضع الوسم المناسب في المكان المناسب!)





وأترك لك المجال لكي تجرب القيمة all بنفسك


--------------------------------------------------------------------------------


من القواعد الإفتراضية للمتصفحات أن الأسطر في كل فقرة تلتف وتنقسم بصورة تلقائية حسب إستبانة الشاشة وعرض نافذة المتصفح. (هذه نعرفها من الدرس الأول). لكن لنقل أننا نريد من أحد الأسطر أن لا ينقسم مهما كان مقدار الإستبانة وعرض النافذة.
حسناً، كل ما علينا فعله هو وضع هذا السطر ضمن الوسوم

<NOBR> ... <‎/NOBR>

وهي إختصار لـِ NO BReak أي (لا إنقسام). أنقر هنا لتشاهد مثالاً على ذلك


--------------------------------------------------------------------------------


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

صمت الجمال غير متواجد حالياً
قديم 24-04-2005, 02:23 AM   #9

الصورة الرمزية عبد الله الساهر

 رقم العضوية :  1
 تاريخ التسجيل :  22-07-2004
 المشاركات :  70,786
 الدولة :  ムレ3乃乇乇尺
 الجـنـس :  ذكر
 العمر :  38
 عدد النقاط :  243859
 قوة التقييم :  عبد الله الساهر تم تعطيل التقييم
 SMS :

حتى لو اجتهدت و قطعت فؤادك.. ووضعته للناس في طبق فضي ليرضوا عنك لن تفلح وربما لن تصل لمستوى يرضيك أنت عن نفسك فاجتهد ليكون الله وحده راضياً عنك وأغمض عينيك عن ما سواه

 اخر مواضيع » عبد الله الساهر
 تفاصيل مشاركات » عبد الله الساهر
 أوسمة و جوائز » عبد الله الساهر
 معلومات الاتصال بـ عبد الله الساهر

افتراضي


إبداااااع في إبدااااع في إبدااااع



جميل جدا ودروووس لم يفعلها إلا صمت الجميلة


بإنتظار باقي الدروووس يامبدعه

توقيع :





رحمك الله يا أنس
وجعل الفردوس دارك ومستقرك



عبد الله الساهر غير متواجد حالياً
قديم 28-04-2005, 08:46 AM   #10

الصورة الرمزية أمـ جود ـ

 رقم العضوية :  4
 تاريخ التسجيل :  22-07-2004
 المشاركات :  6,182
 العمر :  36
 عدد النقاط :  32
 قوة التقييم :  أمـ جود ـ is on a distinguished road
 اخر مواضيع » أمـ جود ـ
 تفاصيل مشاركات » أمـ جود ـ
 أوسمة و جوائز » أمـ جود ـ
 معلومات الاتصال بـ أمـ جود ـ

افتراضي


أكيد يا عبد الله


صمت الجمال


هيا الانشط ولا يفعله إلا صمت هذا الابداع

توقيع :



مٍَآعُآدُ يًرٍضَيًنٍيً وَفٍآ...و لآيًزٍعُلنٍيً جََفٍآ..
مٍَتِسِآويًهُـ َفٍيً خٍآطَرٍيً ..ظِلمٍَـ آلبُشُرٍ وآنٍصِآَفٍهُمٍَـ..
ولو تِوَقٍَِفٍ آلدُنٍيًآ عُلىٍ شُمٍَعُ آلغٌَرٍآمٍَـ آلليً طََفٍآ..
بُعُضَ آلشُمٍَوعُ..أنٍآ أتِعُمٍَدُ گسِرٍهُآ وآتِلآَفٍهُآ..

أمـ جود ـ غير متواجد حالياً
موضوع مغلق

مواقع النشر (المفضلة)


أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
هدية المنتدي فقط إمتحانات الرخصة الدولية icdl isra girl ღ مجلس الرخصة الدولية لقيادة الحاسب الآلي ICDL ღ 6 07-01-2015 08:47 AM


الساعة الآن 10:04 PM


Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.6.0 TranZ By Almuhajir
Ads Organizer 3.0.3 by Analytics - Distance Education
جميع الحقوق محفوظة لـ : منتديات العبير
المحتوى المنشور فى موقع العبير لايعبر بالضرورة عن وجهة نظر الإدارة وإنما يعبر عن وجهة نظر كاتبها