الاثنين، 25 مايو 2015

الصور HTML Images

الصور 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>

النتيجة





ليست هناك تعليقات:

إرسال تعليق

يسعدني إرسال تعليقاتكم وأسئلتكم واقتراحاتكم