الاثنين، 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>

النتيجة





السبت، 23 مايو، 2015

التعليقات HTML Comments

HTML Commentsالتعليقات 

التعليق Comment هو جزء من الأكواد البرمجية التي يتم تجاهلها من قبل أي متصفح ويب. ومن الجيد إضافة تعليقات إلى كود HTML الخاص بك، خصوصا في الصفحة المعقدة، إشارة إلى أجزاء من الصفحة أو اية  ملاحظات أخرى قد تساعد أي شخص اخر يعمل معك ضمن الكود .التعليقات تساعدك أنت والأخرين على فهم الكود البرمجي وتزيد من سهولة قرأة الكود البرمجي.
يتم وضع التعليقات HTML Comments بين تاج <!--…--> اي محتوى يتم وضعة بين العلمتين يتم تجاهلة من قبل المتصفحات.

مثال

<!DOCTYPE html>
<html>
<head>
    <!-- Document Header Starts -->
    <title>This is document title</title>
</head> <!-- Document Header Ends -->
<!-- body Start-->
<body>
    <p>Document content goes here.....</p>
</body>
<!-- body End-->
</html>

النتيجة

لن يتم عرض المحتوى دون عرض التعليقات .



مقارنة تعليقات صالحة و غير صالحة  Valid vs Invalid Comments

لا يمكن وضع تعليق داخل تعليق آخر. التعليق الثاني  يحتوي علي العلمتين "--" والتي تعد اغلاق للتعليق الأول ->.

  كما يجب التأكد من عدم وجود فراغات في بداية تاج التعليق comment.

مثال

<!DOCTYPE html>
<html>
<head>
    <title>Valid Comment Example</title>
</head>
<body>
    <!--   This is valid comment -->
    <p>Welcome to me Site</p>
</body>
</html>

مثال اخر علي تعليق غير صحيح, يوجد مسافة فارغة بعد فتح قوس التعليق.

<!DOCTYPE html>
<html>
<head>
    <title>Invalid Comment Example</title>
</head>
<body>
    < !--   This is not a valid comment -->
    <p>Main Page</p>
</body>
</html>

النتيجة



تعليق علي اكثر من سطر Multiline Comments


لقد رأينا تعليقات على خط واحد، ولكن يدعم HTML تعليق متعدد الآسطر multi-line. يمكنك إضافة تعليق متعددة الاسطر من خلال البدء بتاج التعليق <!-- وتنتهي بغلق التاج --> كما هو موضح بالمثال التالي.

<!DOCTYPE html>
<html>
<head>
    <title>Multiline Comments</title>
</head>
<body>
    <!--
        This
        is
        a multiline
        comment
    -->
    <p>Document content...</p>
</body>
</html>