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