Test Footer 2

عنوان التميز

This is default featured post 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

الثلاثاء، 14 فبراير 2012

الدرس السابع : الصور Html



في هذا الدرس سنشرح طريقة وضع الصور في الموقع عن طريق  Html.
مع امكانية اضافة التأثيرات المختلفة على الصور , كالروابط , والتأطيرات.






كود Html تضمين صورة داخل الصفحة
<img src="رابط الصورة هنا">
النتيجة:







كود Html وضع وصف وكلمات دلالية Tag للصورة.
كود مهم جدا يساعد على أرشفة الصورة على محركات البحث بطريقة أسرع عن طريق وصع وص للصورة مثال
الوصف:مدونة المنصورة نت Html
كلمات دلالية Tag : مدونة,المنصورة,نت,Html,كود,وصف,الصورة,tag
 <img alt="مدونة,المنصورة,نت,Html,كود,وصف,الصورة,tag" src="http://2.bp.blogspot.com/-fIlum68GErY/TzmIHvTn1eI/AAAAAAAACa8/i2BzoHRzcuE/s1600/%D8%AF%D9%88%D8%B1%D8%A9+Html+,+%D8%AF%D8%B1%D9%88%D8%B3+Html.bmp" title="مدونة المنصورة نت Html">
النتيجة:
مدونة,المنصورة,نت,Html,كود,وصف,الصورة,tag








كود Html تضمين الصورة داخل الصفحة بأبعاد معينة.
<img src="logo.gif" width="250" height="300" />
النتيجة:







كود Html تحديد أبعاد معينة للصور داخل الصفحة مع وضع الوصف , والكلمات الدلالية.
<img alt="Html , image , أكواد , الصور" src="http://2.bp.blogspot.com/-fIlum68GErY/TzmIHvTn1eI/AAAAAAAACa8/i2BzoHRzcuE/s1600/%D8%AF%D9%88%D8%B1%D8%A9+Html+,+%D8%AF%D8%B1%D9%88%D8%B3+Html.bmp" title="الدرس السابع الصور Html" width="400" height="300">
النتيجة:
Html , image , أكواد , الصور




مع مراعاة تغيير مايلزم تغييره في جميع الامثلة السابقة!




كود Html رابط على الصورة.
<a href="رابط التوجيه"><img src="رابط الصورة">
النتيجة:






كود Html تضمين رابط داخل الصورة يفتح في نافذة جديدة.

 <a href="رابط الصفحة" target="_blank"><img src="رابط الصوره" border="0">
النتيجة:







كود Html وضع الصورة داخل ايطار.
<img style="border:6px solid Purple;" src="http://2.bp.blogspot.com/-fIlum68GErY/TzmIHvTn1eI/AAAAAAAACa8/i2BzoHRzcuE/s1600/%D8%AF%D9%88%D8%B1%D8%A9+Html+,+%D8%AF%D8%B1%D9%88%D8%B3+Html.bmp" />
النتيجة:




تنبيه!
العلامة solid Purple لون الايطار بتغيير اللون عن طريق تغيير Purple لاسم لون مختلف.
مثال:Blue  أزرق - Red أحمر - Red بني - Yellow أصفر - Black اسود - Green أخضر Purple بنفسجي.
القيمة:border:6px solid Purple تساوي حجم الايطار.




كود Html تضمين الصورة داخل ايطار منقط.
<img style="border:3px dotted #545565;" src="http://2.bp.blogspot.com/-fIlum68GErY/TzmIHvTn1eI/AAAAAAAACa8/i2BzoHRzcuE/s1600/%D8%AF%D9%88%D8%B1%D8%A9+Html+,+%D8%AF%D8%B1%D9%88%D8%B3+Html.bmp" width="225" height="151" />
النتيجة:




ايضا القيمة : border:3px dotted #545565 تعني حجم ولن والايطار.




كود Html وضع الصورة داخل ايطارات مجوفة,اخدودية.

<img style="border:6px groove #545565;" src="http://2.bp.blogspot.com/-fIlum68GErY/TzmIHvTn1eI/AAAAAAAACa8/i2BzoHRzcuE/s1600/%D8%AF%D9%88%D8%B1%D8%A9+Html+,+%D8%AF%D8%B1%D9%88%D8%B3+Html.bmp" width="225" height="151" alt="Html Image Borders" />
النتيجة:
Html Image Borders







كود Html وضع الصورة داخل ايطارت,حدود مزدوجة.
<img style="border:6px double #545565;" src="http://2.bp.blogspot.com/-fIlum68GErY/TzmIHvTn1eI/AAAAAAAACa8/i2BzoHRzcuE/s1600/%D8%AF%D9%88%D8%B1%D8%A9+Html+,+%D8%AF%D8%B1%D9%88%D8%B3+Html.bmp" width="225" height="151" alt="Html Image Borders" />
النتيجة:
Html Image Borders




كود Html وضع الصورة داخل ايطار سميك.
<img style="border:60px solid #545565;" src="http://2.bp.blogspot.com/-fIlum68GErY/TzmIHvTn1eI/AAAAAAAACa8/i2BzoHRzcuE/s1600/%D8%AF%D9%88%D8%B1%D8%A9+Html+,+%D8%AF%D8%B1%D9%88%D8%B3+Html.bmp" width="225" height="151" alt="Html Image Borders" />
النتيجة:
Html Image Borders






كود Html وضع الصورة داخل ايطارات جانبية.
<img style="border:8px outset #545565;" src="http://2.bp.blogspot.com/-fIlum68GErY/TzmIHvTn1eI/AAAAAAAACa8/i2BzoHRzcuE/s1600/%D8%AF%D9%88%D8%B1%D8%A9+Html+,+%D8%AF%D8%B1%D9%88%D8%B3+Html.bmp" width="225" height="151" alt="Html image Outset Border" />

النتيجة:
Html image Outset Border






كود Html وضع الصورة داخل حدود أخدودية بارزة.
<img style="border:8px ridge #545565;" src="http://2.bp.blogspot.com/-fIlum68GErY/TzmIHvTn1eI/AAAAAAAACa8/i2BzoHRzcuE/s1600/%D8%AF%D9%88%D8%B1%D8%A9+Html+,+%D8%AF%D8%B1%D9%88%D8%B3+Html.bmp" width="225" height="151" alt="Html image  Ridged Border" />
النتيجة:
Html image  Ridged Border




كود Html وضع الصورة داخل حدود متقطعة.
<img style="border:6px dashed #545565;" src="http://2.bp.blogspot.com/-fIlum68GErY/TzmIHvTn1eI/AAAAAAAACa8/i2BzoHRzcuE/s1600/%D8%AF%D9%88%D8%B1%D8%A9+Html+,+%D8%AF%D8%B1%D9%88%D8%B3+Html.bmp" width="225" height="151" alt="Html image Dashed Border" />
النتيجة:
Html image Dashed Border





كود Html وضع الصورة داخل حدود مختلطة.
<img style="border-width:10px;border-color:#545565;border-style:dotted dashed solid double;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Html image Mixed Border" />
النتيجة:
Html image Mixed Border







يمكنك أيضا اضافة التأثيرات المختلفة والرائعة على الصور كعمل معرض صور احترافي على شبكة الانترنت من خلال لغة Html.
ويمكنك اضافة تأثيرات مدهشة عن طريق تقنيات اخري كاضافة الاكواد الانسيابية Css , وأكواد java Script.




في الدرس القادم سنشرح كيفية اضافة الجداول والقوائم الى موقعك لاضافة لمسة جمالية للموقع.

شارك

Twitter Delicious Facebook Digg Stumbleupon Favorites More