~: Zac :~
21-08-2010, 08:15 AM
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
نستكمل دروس دورات 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: