الصور HTML
Images
الصور هي مهمة
جدا للتجميل وكذلك لتصوير العديد من المفاهيم المعقدة بطريقة بسيطة على صفحة
الويب.
إدراج صورة Insert Image
يمكنك إدراج أي صورة في صفحة الويب الخاصة بك باستخدام تاج
<img>. فيما يلي أبسط جملة لاستخدام هذه
العلامة.
<img src="Image URL" ... attributes-list />
تاج <img> هو تاج فارغ اي
انه لا يوجد تاج إغلاق له ولكنه يمكن أن يحتوي هذا االتاج على قائمة من الصفات فقط
attributes.
مثال
إدراج صورة سوف نقوم بإنشاء ملف HTML وليكن
بالاسم Test.html ثم احضار اي صورة ونعيد تسميتها بالاسم
MyImage.png ونلاحظ
الامتداد png. ثم نضعها في نفس مكان ملف Test.html.
<!DOCTYPE html>
<html>
<head>
<title>Image Test Example</title>
</head>
<body>
<h3>Insert Image</h3>
<img src="MyImage.png">
</body>
</html>
النتيجة
يمكن استخدام PNG، JPEG أو ملف صورة GIF كما تريد ولكن تأكد من تحديد الاسم بشكل صحيح اسم
سمة src. اسم الصورة حساس لحالة الأحرف دائما case sensitive.
السمة alt هي سمة مهمة هي بديل للصورة إذا كانت الصورة لا يمكن عرضها أو غير موجودة.
النتيجة
تحديد مكان الصورة Set Image Location
عادة نقوم نحن وضع جميع الصور في دليل
منفصل.
لنقم الأن بوضع ملف Test.html داخل مجلد Home , ونضع
الصور داخل مجلد images.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Set Image Location Example</title>
</head>
<body>
<h3>Set Image Location</h3>
<img src="images/test.png">
</body>
</html>
النتيجة
تحديد ارتفاع / عرض الصورة Set Image Width/Height
يمكنك وضع عرض وارتفاع للصورة على
أساس الاحتياجات الخاصة بك باستخدام سمات/خصائص العرض والارتفاع. يمكنك تحديد عرض وارتفاع الصورة بالبكسل pixels أو النسبة المئوية percentage.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Image Width and Height Example </title>
</head>
<body>
<p>width and height</p>
<img src="test.jpg" alt="Test Image" width="150" height="100" />
</body>
</html>
النتيجة
إضافة إطار للصورة Set Image Border
افتراضيا يكون للصورة إطار حولها،
يمكنك تحديد سماكة هذا الإطار بحجم البكسل باستخدام السمة/الصفة border.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Image Width and Height Example </title>
</head>
<body>
<p>width and height</p>
<img src="test.jpg" alt="Test Image" width="150" height="100" border="3" />
</body>
</html>
النتيجة
محاذاه الصورة Set Image Alignment
محاذاة صورة افتراضيا الصورة سوف تنسق
في الجانب الأيسر من الصفحة، ولكن يمكنك استخدام السمة محاذاة align لمحاذاه الصورة في الوسط center أو اليمين right.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment Example </title>
</head>
<body>
<p>align right</p>
<img src="test.jpg" alt="Test Image" width="150" height="100" border="3" align="right" />
</body>
</html>
النتيجة
ليست هناك تعليقات:
إرسال تعليق
يسعدني إرسال تعليقاتكم وأسئلتكم واقتراحاتكم