( الدرس الثاني )..دورات web design التدريبية .. محتويات الصفحة "1"..

[~: Zac :~]

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

نستكمل دروس دورات Web Design التدريبية ..

ومع ثاني درس في لغة الـ HTML ..

وسنتناول فيه ما يتعلق باضافة الصور والملتيميديا والقوائم والجداول الى صفحات الموقع..

بسم الله ..

قبل أن نبدا أود ان أذكركم بأخر جزء تم شرحه في الدرس الاول ...

والذي كان عن طريقة عمل وصلة تشعبية لصفحة أخرى ..

<a href="...........">Click here</a>

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

 
<a href="mailto:name*example.com">send me</a>  

ثانيا لتحميل ملف من مساره ..

<a href=”…..”>download</a>

ومكان النقاط نضع مسار الملف واسمه وامتداده ..
...

ماذا نعني بـ مسار الملف ؟؟

عندما يكون ملف العمل في مجلد اسمه my site

وهذا المجلد موضوع على سطح المكتب ..

والملف المراد استدعاءه وتحميله وليكن (sound.mid) .. موجود في مجلد باسم downloads

وموضوع في القسم ( D:/ ) ..

نقوم بكتابة المسار كالآتي ..

 
<a href=”D:/downloads/sound.mid”>download</a> 

وعند التطبيق عمليا لعمل موقع كامل .. فيجب وضع الملف في نفس المجلد الذي يحتوي على ملف العمل ( الصفحة )

او على الاقل في المجلد الرئيسي الذي يحتوي على جميع ملفات الموقع والذي سيتم رفعه الى مساحة الموقع …

وعند وجود الملف مع الصفحة في مجلد واحد فلا يشترط كتابة المسار ..

فيمكن فقط كتابة الاسم والامتداد..

 
<a href=”sound.mid”>download</a> 

واذا كان في مجلد اخر ولكن ضمن المجلد الرئيسي فلا يشترط ايضا كتابة المسار كاملا ويكتب هكذا :

 
<a href=”../downloads/sound.midf”>download</a> 

فـنجد ان الـنقطتين ترمزان الى المجلد الرئيسي ..

ثالثا واخيرا بالنسبة لهذا الوسم ..

يمكن استخدامه للانتقال الى مكان معين في الصفحة ..

توضيح :

في بعض المواقع تجد بعض القوائم بالاعلى .. وعند الضغط على اختيار ينتقل بك الى مكان معين في نفس الصفحة في الاسفل ..

طريقة التنفيذ :

سنستخدم الوسم <a> مرتين ..:

1- عند الكلمة او الصورة ... الخ .. المراد الوصول اليها عند الضغط على الكلمة ..

<a name=”egy”>Egypt photos</a>

طريقة وضع الوسم طبيعية ولكن الاختلاف فيه الـ attribute

فبدلا من href قمنا بكتابة name

توضيح :

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

هكذا الحال عندما تريم الذهاب الى جزء معين في الصفحة ..

فعليك ان تقوم بعمل Flag .. لمكان معين ..

وهو المكان المراد الانتقال اليه ..

وفي هذا المثال .. المكان المراد الانتقال اليه هو : Egypt photos

او الجزء الذي يحتوي على هذه الكلمة من الصفحة ...

وما فعلناه الان هو اننا قمنا بعمل Flag لهذا الجزء وقمنا بالاشارة اليه باسم egy

2- نقوم باستخدام الوسم عند الكلمة او الصورة .. الخ التي ستنقلنا الى الى الجزء الذي يحتوي على الـ Flag ..

ويكتب هكذا ..

 
<a href=”#egy”>Click here to go down</a>

وعلامة الـ # تستخدم عند التعامل مع Flag او ID ..

الآن عند الضغط على كلمة

Click here to go down

سيذهب لاسفل تلقائيا الى الجزء المكتوب به

Egypt photos

أرجو ان تكون الصورة قد اتضحت لكم ..

والآن نأتي الى جزء أخر وهو مهم جدا ...

وهو اضافة الصور الى صفحات المواقع ..

ويكون من خلال هذا الوسم

<img>

وهذا الوسم لا يحتاج الى وسم نهاية ..

ويكتب هكذا :

 
<img src=”egypt12.jpg”> 

ونجد أنه من الواضح ان img اختصار لكلمة image

وsrc اختصار لـ Source بمعنى المصدر ..

ونكتب مسار الصورة كما قمنا بكتابة مسار الملف فيه الوسم <a>

واسم الصورة وامتدادها والذي يكون مثل :

.gif - .jpg - .bmp - .png

وهذا الوسم له العديد من الـ attributes

فمثلا الـسمة border ..

وهي لعمل اطار حول الصورة ..

وتأخذ قيم رقمية .. 1 ، 2 ... الخ

وهناك السمة align

وهي لتحديد موقع الصورة

وتأخذ القيم left , right ...

ولعمل صورة ذات وصلة تشعبية .. فنستخدم الوسمين
<a> , <img>

ويكون هكذا :

 
<a href=http://thanwya.com/vb”><img src=”photo23.jpg”></a> 

وهكذا فستظهر لنا الصورة وعند الضغط عليها ينتقل الى الصفحة ..

ولكن توجد مشكلة الان وهي ان الصورة اصبح لها اطار ازرق بعد جعلها وصلة تشعبية .. اليس كذلك ؟؟

يمكن حل هذه المشكلة بوضع السمة border بقيمة صفر

Border=”0”

لدينا أيضا السمتين

Width , hight

وهما لتحديد او تعديل عرض وارتفاع الصورة بالبكسل

والان نريد مثلا اضافة ملف فلاش او ملف صوتي او فيديو ..

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

<embed>

ويكتب هكذا ..

 
<embed src=”music.mid”> 

ولهذا الوسم العديد من السمات المهمة ايضا ..

السمة autostart

وهي لتحديد ما اذا كان سيتم تشغيل الملف اوتوماتيكيا ام لا وتأخذ احدى القيمتين :

false , true

السمة loop

وهي لتحديد ما اذا كان سيتم تكرار تشغيل الملف ام لا ..

وتأخذ ايضا احدا القيمتين :

false , true

السمة hidden

وهي لاخفاء الـ plug in واهمية هذه السمة انها تجعل الملف يعمل دون امكانية التحكم به من قبل المستخدم..

ولا يمكن وقف التشغيل الا باغلاق الصفحة ..

السمتين width , hight

وهما كما ذكرنا لتحديد العرض والارتفاع ..

والآن نريد اضافة قوائم للصفحة

والقوائم نوعان :

قوائم غير متسلسلة :
Unordered Lists

قائمة1:
· العنصر الاول
· العنصر الثاني

قوائم متسلسلة :
Orderd Lists

قائمة2:
1. العنصر الاول
2. العنصر الثاني

كيف يمكن عمل هذه القوائم بلغة الـhtml ؟
...

1- بالنسبة للقوائم غير المتسلسلة Unordered Lists :

نستخدم الوسم

<ul>…</ul>

وتكتب هكذا :

قائمة1:
<ul>  
<li>العنصر الاول</li>  
<li>العنصر الثاني</li> 
</ul>

توضيح :

الوسم <ul>

هو لتحديد نوع القائمة اذا كانت ordered او unordered

وقمنا باغلاقه في النهاية..</ul>

الوسم <li>…</li>

هو الوسم المستخدم لعمل تسلسل قائمة سواء كانت متسلسلة ام لا ..

وهكذا لاضافة عنصر جديد في القائمة نضيف الوسم
<li>….</li>

ونكتب اسم العنصر مكان النقاط ونقوم في النهاية باغلاق الوسم الاساسي </ul>

الـ attributes الخاصة بهذا الوسم

من اهم السمات لهذا الوسم :

السمة type

وهي لتحديد نوع او شكل الرمز الظاهر بجوار العناصر

ويأخذ احدى القيم ..

Disc
قرص

Square
مربع

Circle
دائرة مفرغة

ويكون الـ Default هوالقرص...

2- بالنسبة للقوائم المتسلسلة Ordered Lists :

الاختلاف بين هذه القوائم والقوائم الغير متسلسلة هو اننا نستبدل الرموز بجوار العناصر بارقام او حرف متسلسلة

ونستبدل الوسم
<ul>

بالوسم
<ol>

فيكون المثال السابق كالآتي :

 
 
 

قائمة2: 
<ol> 
 
 
<li>العنصر الاول</li> 
<li>العنصر الثاني</li> 
</ol>

ونستبدل قيمة السمة type

باحدى القيم :

1
لعمل تسلسل رقمي

A
لعمل تسلسل حرفي واستخدام حروف كبيرة

a
لعمل تسلسل حرفي واستخدام حروف صغيرة

I
لعمل تسلسل بالارقام اللاتينية بحرف الـI كبير

i
لعمل تسلسل بالارقام اللاتينية بحرف الi الصغير

وهناك سمة أخرى لهذا الوسم وهي السمة start

وتأخذ القيمة المراد البدء منها ...

مثلا اذا اردنا ان تكون القائمة رقمية وتبدأ من الرقم 7

نستخدم الوسم هكذا :

 
<ol type=”1” start=”7”> 

وبالحديث عن القوائم نذكر أيضا قوائم الشرح Definition Lists

ونستخدم الوسم <dl>…</dl>
لاحتواء القائمة وتحديد بدايتها ونهايتها ..

الوسم <dt>
ونضعه قبل العنوان او المصطلح الذي سنكتب له تعريف

وهو لا يحتاج لوسم نهاية ..

الوسم<dd>
ونضعه قبل التعريف .. وهو ايضا لا يحتاج لوسم نهاية ..

فاذا اردنا الحصول على هذا الشكل :

Html
        Is a hyper text markup language
Css
        Cascading style sheets

نستخدم الكود الآتي:

 
<dl> 
 
 
<dt> Html <dd> Is a hyper text markup language
<dt> Css <dd> Cascading style sheets 
</dl>

يتبع ...

[~: Zac :~]

الجداول Tables



لا أبالغ عندما اقول ان الجداول هي من اهم اجزاء الموقع وربما تكون هي الاهم ..



فمعظم الموقع ان لم يكن جميعها تعتمد على الجداول في تقسيم الصفحة وتجزيئها ..



اذا لنتعرف على طريقة عمل الجدول بلغة الـ HTML



ملحوظة : لن أذكر في هذا الدرس كل ما يتعلق بالجداول فسنكتفي بمقدمة عن الجدوال فقط



وفي الدرس القادم باذن الله سنشرح كل ما يتعلق بها باستفاضة ..







الوسم الاساسي للجدول


<table>….</table>



ونضع بداخله محتوى الجدول ..







لنجرب كتابة هذا الكود ولنرى الناتج

<table border=”1”>
 
 
<tr><td>cell 1</td><td>cell2</td></tr>
 
 
<tr><td>cell 3</td><td>cell4</td></tr>
 
 
</table>

سنجد النتيجة مشابهة للآتي :







اذا كما نلاحظ :


الوسم <table>…</table>



هو لتعريف الجدول



الوسم <tr>…</tr>



لتعريف صف من الجدول ..( انشاء صف جديد في الجدول )



الوسم <td>…</td>


وهو لتعريف خلايا الصفوف ومحتواها ( انشاء خلية في الصف و كتابة محتواها )







ملحوظة :



عند انشاءك جدول يجب عليك معرفة انك تتعامل مع ثلاثة اجزاء :



1- الجدول ككل


2- الصفوف


3- الخلايا



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








لنتعرف على بعض السمات الاساسية للجداول :



السمة border


وهي لتحديد سمك الاطار .. ونضع القيمة 0 لازالة الاطار







السمتين hight , width



لتحديد عرض وارتفاع الجدول ..



وتكون القيمة اما بالبكسل



او بالنسبة المئوية ...






السمة cellspacing



لتحديد المسافة الفاصلة بين كل خلية ..



وتأخذ قيمة رقمية .. 0 ، 1، 2 .... الخ







السمة cellpadding



لنحديد حجم الهوامش


( المسافة الفاصلة بين حدود الخلايا والمحتوى ..)


وتأخذ ايضاً قيمة رقمية ..







السمة align



وهي لتحديد موقع الجدول من الصفحة


وتأخذ احدى القيمتين left , right







السمة bgcolor



وهي لتحديد لون خلفية الجدول ..



وتكون القيمة .. اسم اللون


او الكود الخاص به ..


وذكرت لكم موقع به اكواد الالوان في الدرس الاول ...







اذا فسنكتفي بهذا القدر لهذا الدرس ..


وسيكون الدرس القادم يوم الثلاثاء باذن الله ثم سنعاود المواعيد الاسبوعية


الأحد – الأربعاء


منذ الاسبوع القادم باذن الله ..



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



واذكركم باهمية التطبيق الكثير والمختلف فمن دونه لا فائدة للفهم والحفظ ..










ارجو ان اكون قد وُفقت في الشرح بطريقة مبسطة ..



وفي انتظار استفساراتكم ..

[star5000]

tmaaaaaaaaaaaaaaaam gdann bgd barak gazak allah 5ayran

W8ing for the next one
:07811 1rg3:

[hishmet]

شكرا جزيلا لك منتظرين المزيد