http://files03.arb-up.com/i/00202/3uznqv15hqqm.jpg

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


http://files03.arb-up.com/i/00202/qb9jyjq7tba8.jpg


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

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

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


http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif

بسم الله ..

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

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


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


http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif

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





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





http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif

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


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



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

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

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

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


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


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


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





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





http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


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

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

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

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





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






http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif

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





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






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


http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


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


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



توضيح :

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


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

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


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



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




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


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


http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


توضيح :


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

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


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


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


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


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


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


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


ويكتب هكذا ..





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







http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


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


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

Click here to go down


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

Egypt photos


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



http://files03.arb-up.com/i/00202/qb9jyjq7tba8.jpg



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

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


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

<img>

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

ويكتب هكذا :





<img src=”egypt12.jpg”>







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

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

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

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


.gif - .jpg - .bmp - .png


http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


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

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

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


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


http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


وهناك السمة align

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


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

http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


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



ويكون هكذا :





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






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

http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


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


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


Border=”0”


http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif

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

Width , hight


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




http://files03.arb-up.com/i/00202/qb9jyjq7tba8.jpg



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

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

<embed>


ويكتب هكذا ..





<embed src=”music.mid”>






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


السمة autostart


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


false , true


http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif

السمة loop

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

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

false , true


http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


السمة hidden

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

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

http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


السمتين width , hight


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



http://files03.arb-up.com/i/00202/qb9jyjq7tba8.jpg



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

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

قوائم غير متسلسلة :
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>


http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


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

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

السمة type

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

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

Disc
قرص


Square
مربع


Circle
دائرة مفرغة


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


http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


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

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

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

بالوسم
<ol>


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







قائمة2: <ol>



<li>العنصر الاول</li>
<li>العنصر الثاني</li>
</ol>



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

باحدى القيم :


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


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


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


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


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

http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif

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

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


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

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





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






http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif

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

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


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

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

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


http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif

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


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>



http://files03.arb-up.com/i/00202/qb9jyjq7tba8.jpg



يتبع ...:friendsxs3:

http://files03.arb-up.com/i/00202/qb9jyjq7tba8.jpg


الجداول Tables



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



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



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



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



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




http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


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


<table>….</table>



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



http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif



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




<table border=”1”>


<tr><td>cell 1</td><td>cell2</td></tr>


<tr><td>cell 3</td><td>cell4</td></tr>


</table>




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

http://files03.arb-up.com/i/00203/g9959gwa2dn7.jpg





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


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



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



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



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



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


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



http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif



ملحوظة :



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



1- الجدول ككل


2- الصفوف


3- الخلايا



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




http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif



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



السمة border


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



http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif



السمتين hight , width



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



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



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



http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif


السمة cellspacing



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



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



http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif



السمة cellpadding



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


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


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



http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif



السمة align



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


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



http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif



السمة bgcolor



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



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


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


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


http://files03.arb-up.com/i/00202/qb9jyjq7tba8.jpg




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


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


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


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



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



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




http://files03.arb-up.com/i/00203/ecwrilwlv1z0.gif





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



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




http://files03.arb-up.com/i/00202/qb9jyjq7tba8.jpg

tmaaaaaaaaaaaaaaaam gdann bgd barak gazak allah 5ayran

W8ing for the next one
:078111rg3::078111rg3::078111rg3::078111rg3::07811 1rg3::078111rg3:

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