السبت، 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>

الخميس، 21 مايو، 2015

البيانات الوصفية HTML Meta Tags

HTML Meta Tags

يتيح HTML تحديد البيانات الوصفية metadata - وهي معلومات هامة حول والصفحة بطرق مختلفة. يمكن استخدام عناصر الـ META لتشمل الاسم / القيمة لوصف خصائص وثيقة الـ HTML، مثل اسم المؤلف، تاريخ انتهاء الصلاحية، قائمة بالكلمات الدالة في البحث keywords.
يتم استخدام <meta>تاج لتقديم هذه المعلومات الإضافية. هذا العنصر يكون فارغة ولا يحتوي علي تاج إغلاق لكنه يحمل هي المعلومات ضمن خصائصه.
يمكن ان تحتوي وثيقة HTML على أكثر من تاج <meta> على أساس ما هي المعلومات التي تريد الاحتفاظ بها في المستند هذا بصفة عامة, تاج <meta> لا يؤثر على المظهر المادي للوثيقة هذا من ناحية شكل الصفحة.

إضافة تاجات Adding Meta Tags
يمكنك إضافة تاج <meta> لصفحات الويب الخاصة بك عن طريق وضع تاج <meta> داخل رأس الصفحة الذي يمثله تاج <head> و </ head>. تاج <meta> يمكن أن يحتوي علي السمات التالية بالإضافة إلى سمات أساسية:

السمة Attribute
الوصف Description
Name
الخاصية Name
يمكن أن يكون أي شيء. ومن الأمثلة على ذلك، كلمات البحث أو الكلمات الدالة keywords, الوصف description, الكاتب أو المؤلف author, المولد generator, التعديل او المراجعة revised وغيرها.
content
خاصية المحتوي content وهي القيمة
Schema
تحدد المخطط لتفسير القيمة
http-equiv
تستخدم بروتوكول http للرد علي رسالة الراس header. علي سبيل المثال يمكن استخدامها لتحديث الصفحة او لوضع ملف cookie. وتشمل علي نوع المحتوي content-type,تاريخ الصلاحية expires.



تعين الكلمات Specifying Keywords

يمكنك استخدام <meta> تاج لتحديد الكلمات الرئيسية الهامة ذات الصلة بالصفحة  وبعد ذلك تستخدم هذه الكلمات من قبل محركات البحث عند فهرسة صفحة الويب الخاصة بك للبحث عن المحتوي المطلوب.


مثال

المثال التالي يوضح اين يم إضافة الـ Meta تاج والكلمات الدالة علي الصفحة. ادناه قمنا بإضافة تاج التـ <meta> واضفنا له خصائصة الخاصية الاول Name قمنا بتعريف الكلمات الدالة keywords ثم عرفنا المحتوى content وبداخله الكلمات الدالة وهي (HTML, Meta Tags, Metadata) علي سبيل المثال ويمكن إضافة اي كلمات او اي عدد من الكلمات عند البحث.

<!DOCTYPE html>
<html>
<head>
    <title>Meta Tags Example</title>
    <meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
    <p>Use the name attribute to define a description, keywords, and the author of an HTML document</p>
</body>
</html>

النتيجة

Use the name attribute to define a description, keywords, and the author of an HTML document

وصف المستند Document Description

يمكن استخدام <meta> تاج لإعطاء وصف قصير عن المستند مرة اخري تستخدم هذه الكلمات من قبل محركات البحث عند فهرسة صفحة الويب الخاصة بك للبحث عن المحتوي المطلوب. في المثال ادناه تم إضافة تاج <Meta> ثاني والخاصية Name تم اسناد الوصف لها description ومحتوى content يصف الصفحة.

مثال

<!DOCTYPE html>
<html>
<head>
    <title>Meta Tags Example</title>
    <meta name="keywords" content="HTML, Meta Tags, Metadata" />
    <meta name="description" content="Learning about Meta Tags." />
</head>
<body>
    <p>Learn how to use meta tags in Search Engine</p>
</body>
</html>

النتيجة

Learn how to use meta tags in Search Engine

تحديث بيانات الصفحة  Document Revision Date

يمكنك استخدام <meta> تاج لإعطاء معلومات حول آخر مرة تم تحديث الصفحة. ويمكن استخدام هذه المعلومات من قبل متصفحات الويب المختلفة أثناء تحديث صفحة الويب الخاصة بك. ادناه تم تعريف تاج <meta> ثالث والخاصية Name بالقيمة revised والمحتوى content

مثال

<!DOCTYPE html>
<html>
<head>
    <title>Meta Tags Example</title>
    <meta name="keywords" content="HTML, Meta Tags, Metadata" />
    <meta name="description" content="Learning about Meta Tags." />
    <meta name="revised" content=" Naderkhaled.blogspot.com, 18/5/2015" />
</head>
<body>
    <p>Meta Tags Example Document Revision Date</p>
</body>
</html>

تحديث/انعاش المستند Document Refreshing

تاج <meta> يمكن استخدامها لتحديد مدة معينة سوف يتم بعدها عمل انعاش لصحفة الويب الخاصة بك تلقائيا.
إذا اردنا جعل الصفحة تتحدث وتنتعش بعد كل 5 ثوان نستخدم الجمل التالية. ادناه تم إضافة اج الـ <meta> متضمن الخاصية http-equiv بالقيمة "refresh" والمحتوى content يحوى القيمة 5 ثواني.

مثال

<!DOCTYPE html>
<html>
<head>
    <title>Meta Tags Example</title>
    <meta name="keywords" content="HTML, Meta Tags, Metadata" />
    <meta name="description" content="Learning about Meta Tags." />
    <meta name="revised" content="Naderkhaled.blogspot.com, 18/5/2015" />
    <meta http-equiv="refresh" content="5" />
</head>
<body>
    <p>Meta Tags Example Document Refreshing </p>
</body>
</html>

توجية الصفحة Page Redirection

يمكنك استخدام <meta> تاج لإعادة توجيه الصفحة الخاصة بك إلى أي صفحة ويب أخرى. كما يمكنك تحديد المدة إذا كنت ترغب في إعادة توجيه الصفحة بعد عدد معين من الثواني.
مثال
فيما يلي مثال على إعادة توجيه الصفحة الحالية إلى صفحة أخرى بعد خمس ثوان. ادناه تم إضافة url.

<!DOCTYPE html>
<html>
<head>
    <title>Meta Tags Example</title>
    <meta name="keywords" content="HTML, Meta Tags, Metadata" />
    <meta name="description" content="Learning about Meta Tags." />
    <meta name="revised" content=" Naderkhaled.blogspot.com, 18/5/2015" />
    <meta http-equiv="refresh" content="5; url=http://naderkhaled.blogspot.com/p/html.html" />
</head>
<body>
    <p>naderkhaled.blogspot.com</p>
</body>
</html>

Setting Cookies

الــ Cookies هو ملف بيانات يتم تعريف هذه البيانات في ملفات نصية صغيرة مخزنة على جهاز الكمبيوتر الخاص بك ويتم تبادلها بين متصفح الإنترنت وخادم الويب web server.
يمكن استخدام تاج <meta> لتخزين ملفات cookies علي جهاز العميل مسجل بها بعض المعلومات, يمكن بعد ذلك استخدام هذه المعلومات من قبل الخادم Web Server.


المؤلف  Setting Author Name

يمكن وضع اسم المؤلف في صفحة الويب باستخدام تاج <Meta>.

مثال

<html>
<head>
    <title>Meta Tags Example</title>
    <meta name="keywords" content="HTML, Meta Tags, Metadata" />
    <meta name="description" content="Learning about Meta Tags." />
    <meta name="revised" content=" Naderkhaled.blogspot.com, 18/5/2015" />
    <meta http-equiv="refresh" content="5; url=http://naderkhaled.blogspot.com/p/html.html" />
    <meta http-equiv="set-cookie" content="TestCookieName= ThisIsContent; expires=Sat, 25-Nov-2023 12:00:00 GMT; domain=example.com;" />
    <meta ame="author" content="Nader" />
</head>
<body>
    <p>naderkhaled.blogspot.com</p>
</body>
</html>



تعين لغة الاحرف Specify Character Set

افتراضيا السيرفرات ومتصفحات الويب تستخدم ISO-8859-1 LATIN1 ترميز encoding لمعالجة صفحات الويب هنا سوف نستخدم UTF-8 ومعناه هو

 U  Universal Coded Character Set + Transformation Format—8-bit

صيغة تحويل نظام الحروف الدولي الموحد بقوة 8 بت, هذا الترميز وضع لتمثيل معيار نظام الحروف الدولي الموحد للحروف الأبجدية لأغلب دول العالم، ويتم تشفير الرموز فيها في حجم يتراوح بين بايت واحد و4 بايت للرمز الواحد.

ISO-8859-8        Latin/Hebrew part 8       The languages that are using the Hebrew alphabet
ISO-8859-6        Latin/Arabic part 6         The languages that are using the Arabic alphabet
ISO-8859-9        Latin 5 part 9     The Turkish language. Same as ISO-8859-1 except Turkish characters replace Icelandic ones
ISO-2022-JP      Latin/Japanese part 1     The Japanese language

مثال

<html>
<head>
    <title>Meta Tags Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p>naderkhaled.blogspot.com</p>
</body>
</html>