صور JPG
GIF صور
صور PNG
مثال
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html> انها محاولة لنفسك » دائما تحديد العرض والارتفاع للصورة. إذا لم يتم تحديد العرض والارتفاع، الصفحة سوف تومض أثناء تحميل الصورة.
HTML الصور بناء الجملة
في HTML، يتم تعريف الصور مع <img> العلامة.
في <img> tag فارغة، فإنه يحتوي على سمات فقط، وليس لديها علامة إغلاق.
و src تحدد السمة URL (web address) للصورة:
<img src=" url " alt=" some_text ">و alt سمة
و alt تحدد السمة نص بديل للصورة، إذا لا يمكن عرض الصورة.
و alt يوفر السمة معلومات بديلة للصورة إذا كان المستخدم لسبب ما لا يمكن مشاهدته (بسبب اتصال بطيء، خطأ في src السمة، أو إذا كان المستخدم يستخدم قارئ الشاشة).
إذا كان المتصفح لا يمكن العثور على صورة، فإنه سيتم عرض نص بديل:
مثال
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> انها محاولة لنفسك » و alt هو مطلوب السمة. وهناك صفحة على شبكة الإنترنت لا صحة بشكل صحيح دون ذلك.
HTML القراء الشاشة
قارئ الشاشة هو أحد البرامج التي يمكن قراءة ما هو معروض على الشاشة.
قارئات الشاشة هي مفيدة للأشخاص المصابين بالعمى، ضعاف البصر، أو تعلم المعوقين.
يمكن للقراء الشاشة قراءة alt السمة.
حجم الصورة - العرض والارتفاع
يمكنك استخدام style السمة لتحديد العرض والارتفاع للصورة.
يتم تحديد القيم بالبكسل (use px after the value) :
بدلا من ذلك، يمكنك استخدام width و height سمات. هنا، يتم تحديد القيم بالبكسل افتراضيا:
العرض والارتفاع أو نمط؟
كل من العرض والطول، وسمات نمط صالحة في أحدث معايير HTML5.
نقترح عليك استخدام style السمة. ويمنع الأنماط ورقة من تغيير الحجم الأصلي للصورة:
مثال
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html> انها محاولة لنفسك » الصور في مجلد آخر
إذا لم يكن محددا، يتوقع متصفح للعثور على صورة في نفس المجلد مثل صفحة ويب.
ومع ذلك، فإنه من الشائع لتخزين الصور في مجلد فرعي. ثم يجب تضمين اسم المجلد في src السمة:
مثال
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> انها محاولة لنفسك » الصور على خادم آخر
بعض المواقع على شبكة الإنترنت تخزين الصور على خوادم الصور.
في الواقع، يمكنك الوصول إلى الصور من أي عنوان الويب في العالم:
الصور المتحركة
يسمح المعيار GIF الصور المتحركة:
مثال
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> انها محاولة لنفسك » لاحظ أن بناء الجملة من إدراج الصور المتحركة لا يختلف عن الصور غير المتحركة.
استخدام صورة كرابط
لاستخدام صورة كرابط، ببساطة عش <img> العلامة داخل <a> هذا الكود:
مثال
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a> انها محاولة لنفسك » إضافة "border:0;" لمنع IE9 (and earlier) من عرض الحدود حول الصورة.
الصورة العائمة
استخدام خاصية CSS تعويم السماح بتعويم الصورة.
الصورة يمكن أن تطفو إلى اليمين أو إلى اليسار من النص:
مثال
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p> انها محاولة لنفسك » خرائط صورة
استخدام <map> العلامة لتحديد صورة خريطة. صورة خريطة هي صورة مع المناطق القابلة للنقر.
و name السمة من <map> ويرتبط هذا الكود مع <img> سمة usemap الصورة ويخلق علاقة بين الصورة والخريطة.
و <map> العلامة يحتوي على عدد من <area> العلامات، والتي تعرف المناطق القابلة للنقر عليها في صورة خريطة:
مثال
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map> انها محاولة لنفسك » ملخص الفصل
- استخدام HTML <img> عنصر لتحديد صورة
- استخدام HTML src السمة لتحديد URL للصورة
- استخدام HTML alt السمة لتحديد نص بديل لصورة، إذا كان لا يمكن عرضها
- استخدام HTML width و height سمات لتحديد حجم الصورة
- استخدام CSS width و height خصائص لتحديد حجم الصورة (alternatively)
- استخدام CSS float الممتلكات السماح بتعويم صورة
- استخدام HTML <map> عنصر لتحديد صورة خريطة
- استخدام HTML <area> عنصر لتحديد المناطق القابلة للنقر عليها في صورة خريطة
- استخدام HTML <img> الصورة عنصر usemap السمة للإشارة إلى صورة خريطة
تحميل الصور يستغرق وقتا طويلا. يمكن الصور الكبيرة تبطئ صفحتك. استخدام الصور بعناية.
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 » التمرين 6»
HTML صورة العلامات
| بطاقة | وصف |
|---|---|
| <img> | يحدد صورة |
| <map> | يحدد صورة خريطة |
| <area> | تعرف منطقة قابلة للنقر داخل صورة خريطة |