في هذا الدرس سنشرح طريقة وضع الصور في الموقع عن طريق Html.
مع امكانية اضافة التأثيرات المختلفة على الصور , كالروابط , والتأطيرات.
كود Html تضمين صورة داخل الصفحة
<img src="رابط الصورة هنا">النتيجة:
كود Html وضع وصف وكلمات دلالية Tag للصورة.
كود مهم جدا يساعد على أرشفة الصورة على محركات البحث بطريقة أسرع عن طريق وصع وص للصورة مثال
الوصف:مدونة المنصورة نت Html
كلمات دلالية Tag : مدونة,المنصورة,نت,Html,كود,وصف,الصورة,tag
النتيجة:<img alt="مدونة,المنصورة,نت,Html,كود,وصف,الصورة,tag" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuCZBrqYqXFKwkfSWP61MPGqJZ66bZZE8lpG6n-XlHkFMjyWtBCVYewEwNu7zaoSCM5AzGVAf8zN2iOcl0ULZGEBK6tzesY96AgrXOP6vOhFkE77TtAMpSMcIJR2THJeX61YHDoIWaoD0/s1600/%D8%AF%D9%88%D8%B1%D8%A9+Html+,+%D8%AF%D8%B1%D9%88%D8%B3+Html.bmp" title="مدونة المنصورة نت Html">
كود Html تضمين الصورة داخل الصفحة بأبعاد معينة.
النتيجة:<img src="logo.gif" width="250" height="300" />
كود Html تحديد أبعاد معينة للصور داخل الصفحة مع وضع الوصف , والكلمات الدلالية.
<img alt="Html , image , أكواد , الصور" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuCZBrqYqXFKwkfSWP61MPGqJZ66bZZE8lpG6n-XlHkFMjyWtBCVYewEwNu7zaoSCM5AzGVAf8zN2iOcl0ULZGEBK6tzesY96AgrXOP6vOhFkE77TtAMpSMcIJR2THJeX61YHDoIWaoD0/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 رابط على الصورة.
<a href="رابط التوجيه"><img src="رابط الصورة">النتيجة:
كود Html تضمين رابط داخل الصورة يفتح في نافذة جديدة.
<a href="رابط الصفحة" target="_blank"><img src="رابط الصوره" border="0">النتيجة:
كود Html وضع الصورة داخل ايطار.
<img style="border:6px solid Purple;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuCZBrqYqXFKwkfSWP61MPGqJZ66bZZE8lpG6n-XlHkFMjyWtBCVYewEwNu7zaoSCM5AzGVAf8zN2iOcl0ULZGEBK6tzesY96AgrXOP6vOhFkE77TtAMpSMcIJR2THJeX61YHDoIWaoD0/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuCZBrqYqXFKwkfSWP61MPGqJZ66bZZE8lpG6n-XlHkFMjyWtBCVYewEwNu7zaoSCM5AzGVAf8zN2iOcl0ULZGEBK6tzesY96AgrXOP6vOhFkE77TtAMpSMcIJR2THJeX61YHDoIWaoD0/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuCZBrqYqXFKwkfSWP61MPGqJZ66bZZE8lpG6n-XlHkFMjyWtBCVYewEwNu7zaoSCM5AzGVAf8zN2iOcl0ULZGEBK6tzesY96AgrXOP6vOhFkE77TtAMpSMcIJR2THJeX61YHDoIWaoD0/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 وضع الصورة داخل ايطارت,حدود مزدوجة.
<img style="border:6px double #545565;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuCZBrqYqXFKwkfSWP61MPGqJZ66bZZE8lpG6n-XlHkFMjyWtBCVYewEwNu7zaoSCM5AzGVAf8zN2iOcl0ULZGEBK6tzesY96AgrXOP6vOhFkE77TtAMpSMcIJR2THJeX61YHDoIWaoD0/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 وضع الصورة داخل ايطار سميك.
النتيجة:<img style="border:60px solid #545565;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuCZBrqYqXFKwkfSWP61MPGqJZ66bZZE8lpG6n-XlHkFMjyWtBCVYewEwNu7zaoSCM5AzGVAf8zN2iOcl0ULZGEBK6tzesY96AgrXOP6vOhFkE77TtAMpSMcIJR2THJeX61YHDoIWaoD0/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 وضع الصورة داخل ايطارات جانبية.
<img style="border:8px outset #545565;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuCZBrqYqXFKwkfSWP61MPGqJZ66bZZE8lpG6n-XlHkFMjyWtBCVYewEwNu7zaoSCM5AzGVAf8zN2iOcl0ULZGEBK6tzesY96AgrXOP6vOhFkE77TtAMpSMcIJR2THJeX61YHDoIWaoD0/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 وضع الصورة داخل حدود أخدودية بارزة.
النتيجة:<img style="border:8px ridge #545565;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuCZBrqYqXFKwkfSWP61MPGqJZ66bZZE8lpG6n-XlHkFMjyWtBCVYewEwNu7zaoSCM5AzGVAf8zN2iOcl0ULZGEBK6tzesY96AgrXOP6vOhFkE77TtAMpSMcIJR2THJeX61YHDoIWaoD0/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 وضع الصورة داخل حدود متقطعة.
<img style="border:6px dashed #545565;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuCZBrqYqXFKwkfSWP61MPGqJZ66bZZE8lpG6n-XlHkFMjyWtBCVYewEwNu7zaoSCM5AzGVAf8zN2iOcl0ULZGEBK6tzesY96AgrXOP6vOhFkE77TtAMpSMcIJR2THJeX61YHDoIWaoD0/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 وضع الصورة داخل حدود مختلطة.
<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.
ويمكنك اضافة تأثيرات مدهشة عن طريق تقنيات اخري كاضافة الاكواد الانسيابية Css , وأكواد java Script.
في الدرس القادم سنشرح كيفية اضافة الجداول والقوائم الى موقعك لاضافة لمسة جمالية للموقع.
0 التعليقات "الدرس السابع : الصور Html"
إرسال تعليق