صفحتُك الأولى باستخدام HTML5

عام 0 geek4arab
Spread the love


تحدثتُ فى الدرس الأول عن مقدمة سريعة فى HTML5 , و فى هذا الدرس سأتحدث عن نوع المستند (DOCTYPE) و ترميز الصفحة (CHARSET) و كذلك مقدمة فى الوسوم البنائية الجديدة (Structural tags) فى HTML5 .


استخدام هذا الرمز يعني أن السؤال مطروح للمناقشة فى التعليقات , و كذلك لاحقاً عبر Skype و#IRC .

باختصار ….
“باختصار” تشرح الدرس بصورة سريعة و بدون الدخول فى تعريفات أو تفاصيل إحصائية , يمكنك قراءة هذا الجزء إذا كنت خبير فى كتابة صفحات الويب و لا تملك الوقت لقراءة الدرس كاملاً . “

نوع المستند (DOCTYPE)

فى HTML5 لم تعد تحتاج سوى لهذا السطر البسيط لتعريف المتصفح بنوع المستند DOCTYPE و كذلك نظام عرض الصفحة و التى ستكون Standards

1
<!DOCTYPE html>

و ستلاحظ أنها أبسط مما تعودت عليه فى HTML 4.0 و XHTML 1.0 .

ترميز الصفحة (CHARSET)

و بالنسبة لكود ترميز الصفحة (CHARSET) و الذى كان يُكتب هكذا

1
2
<meta http-equiv="content-type"
  content="text/html;charset=utf-8" />

تم استبداله بالجزء الذى يهم المتصفح فقط و هو أقل عدد من الحروف يحتاجها المتصفح ليقرأ ترميز الصفحة , و صار كما يلي :

1
<meta charset="utf-8">

(SCRIPT && LINK)

و بالإضافة الى DOCTYPE و ترميز الصفحة (CHARSET) , فتم تبسيط الوسوم Script , link أيضاً بحذف الصفة التى تحدد نوع الملف أو المحتوى و هى type

1
2
<script type="text/javascript" src="file.js"></script>
 <link rel="stylesheet" type="text/css" href="file.css">

ب

1
2
<script src="file.js"></script>
 <link rel="stylesheet" href="file.css">

و كما نلاحظ فإن HTML5 تهدف إلى تبسيط الكود بقدر الإمكان على مطور الويب .

~

والآن لنبدأ :

نوع المستند (DOCTYPE)

من لديه خبرة فى HTML يذكر انها لطالما احتاج لنسخ ولصق السطر الاول من الكود و هو نوع المستند (DOCTYPE) , لاستحالة حفظه , و قد كان أحد الأشكال التالية و يختلف على أساس إصدارة HTML المستخدمة فى كتابة الصفحة و كذلك نظام عرض الصفحة فى المتصفح .

فى HTML5 تم حل هذه المشكلة و تبسيط نوع المستند (DOCTYPE) لهذا السطر فقط !! “بدون مسافات قبل !DOCTYPE أو بعد html “

و هذا التغيير يطرح سؤالين :

  1. السؤال الأول و هو لماذا تم حذف إصدار HTML من نوع المستند (DOCTYPE) ؟
  2. و السؤال الثانى أى نظام عرض سيتم تنشيطه بالمتصفح عند استخدام هذا DOCTYPE الجديد ؟

بالنسبة للسؤال الأول فمن وجهة نظرى استخدام إصدار HTML فى DOCTYPE ليس له أى قيمة حيث يتم عرض الصفحة من قبل المتصفح بنفس الطريقة مع كل أنواع DOCTYPE و حتى بدون كتابته , فوظيفة DOCTYPE الوحيدة هى تحديد نظام عرض المتصفح للصفحة لا أكثر و لا أقل , و بالنسبة للسؤال الثانى وقبل الإجابة أوضح أولاً ما هو نظام عرض المستند بالمتصفح , فهناك نوعان من أنظمة عرض المستند بالمتصفح :

نظام Standards : لعرض الصفحات المكتوبة طبقاً للشروط القياسية حتى و لو حدثت مشكلة أثناء عرض الصفحة .
نظام Quirks : لعرض الصفحات المكتوبة بشكل عشوائي و بدون مراعاة للشروط القياسية لكتابة صفحات الويب و معظم المواقع العربية و خصوصاً الحكومية لا تراعى أى قواعد أو شروط قياسية أثناء كتابة صفحات الويب و يعرضها المتصفح بهذا النظام غالباً.

و عند استخدام نوع المستند (DOCTYPE) الجديد سيتم تنشيط وضع Standards فى المتصفح , و لم يعد هناك اختيار بين الانظمة المختلفة كما كان فى DOCTYPE القديم و أعتقد انها خطوة إيجابية للاتجاه نحو مراعاة القواعد و الشروط القياسية أثناء كتابة صفحات الويب , خصوصاً و أن الإحصائيات تشير إلى تجاهل المواقع العربية للشروط القياسية بشكل كبير جداً .

0إحصائية المواقع العربية تمت على حوالى 2800 موقع مختلف من خلال نتائج محرك البحث جوجل لحروف الأبجدية العربية و أشهر كلمات البحث العربية من أول 10 صفحات لكل منهم .
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::1هل تعنى هذه الإحصائية أن 24% من المواقع العربية مكتوبة بمراعاة كاملة للشروط القياسية لكتابة صفحات الويب حيث أن نظام عرضها بالمتصفح هو Standrads ؟
لمعرفة نظام عرض المتصفح لأى صفحة من خلال الفايرفوكس , قم بالضغط على الزر الأيمن للماوس فى أى مكان بالصفحة و اختر View Page Info , الجزء Render mode هو الذى يوضح نظام عرض الصفحة كما هو موضح بالصورة .
ملحوظة : يجب كتابة (DOCTYPE) فى السطر الأول و بدون أى مسافات أو سطور تسبقه و إلا سيتم تنشيط نظام Quirks فى المتصفح كما فى موقع بوابة الحكومة المصرية حيث تمت كتابة DOCTYPE فى السطر الثانى .

ترميز المستند (CHARSET)

و الآن نأتى للخطوة التالية وهى تحديد ترميز الصفحة , و الذى يعني باختصار طريقة عرض و معالجة الحروف داخل الصفحة . و أشهر هذه الترميزات و الذى شهد نمواً كبيرا فى الويب فى الآونة الاخيرة هو الترميز العالمى utf-8 و الذى يدعم معظم اللغات المتداولة على الانترنت تقريباً

و كما نرى فى هذه الإحصائية فإنها تشير إلى اتجاه عالمى نحو الترميز utf-8 , و مع ذلك فإن نسبة كبيرة جداً من المواقع العربية لازالت تستخدم الترميز windows-1256 الذى لا يدعم سوى الحروف العربية و الانجليزية فقط !!

إحصائية ترميز المواقع تمت على حوالى 2800 موقع مختلف من خلال نتائج محرك البحث جوجل لحروف الأبجدية العربية و أشهر كلمات البحث العربية من أول 10 صفحات لكل منهم .
لماذا تتوقع استمرار المواقع العربية فى استخدام الترميز windows-1256 بالرغم من مشاكله المتعددة و قصوره الشديد فى دعم اللغات ؟

ولتعريف المتصفح بترميز الصفحة ليتم عرضها بطريقة صحيحة فى HTML4.0 و XHTML 1.0 كان يتم كتابة هذا السطر و الذى يحوى معلومات كثيرة غير مفيدة للمتصفح حيث أنه حتى لو تمت كتابته بشكل خاطئ سيتعرف المتصفح على الترميز كما أنه يصعب حفظه على مطوري الويب

فى HTML5 تم حذف كل المعلومات التى لا يحتاجها المتصفح و استبداله ب


و كما نلاحظ فإن HTML5 تعتمد منهج البساطة فى كتابة الكود و الاتجاه لعدم الاعتماد على أى محرر WYSIWYG او نسخ و لصق أى اجزاء من الكود لصعوبة حفظها .

و هذا هو كود الصفحة حتى الآن

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

الوسوم البنائية فى HTML5 (Structural Tags)

قبل أن أقوم بتعريف الوسوم البنائية الجديدة فى HTML5 و التى سأتطرق لها فى الدرس القادم بالتفصيل , سأبدأ بشرح أحد هذه الوسوم و هو الوسم header

رأس الصفحة (header)

و لنبدأ الآن بكتابة محتوى الصفحة داخل الوسم <body> و كما نعرف فان أول ما يتم كتابته فى معظم صفحات الويب هو رأس الصفحة (header) و الذى قد يحوى شعار الموقع و نص تعريفي و مربع البحث فى الموقع . و قد اعتاد مطوري الويب على استخدام div ليحوى هذا الجزء من الصفحة و إضافة الرمز التعريفي (id) ا header او top او topper أو اى كلمة تدل على الجزء الأعلى من الصفحة

1
<div id="header"></div>

و لكى أوضح الامر فإن هذا الجزء من مهاويس الموضح بالصورة هو الheader

فى HTML5 تم استبدال div التى تشير لرأس الصفحة بالوسم الوصفى الجديد header

1
<header></header>

بدايةً تعريف هذا الوسم طبقاً لوثائق HTML5 الرسمية

هو رأس أى جزء من الصفحة أو المقال و هو الذى يحتوى على العناوين الرئيسية h1-h6 , ليس هذا فحسب بل يمكن أن يحوى عناصر أخرى كشعار الصفحة أو مقدمة أو بحث فى الموقع .

و كما هو واضح من تعريف header فانه يمكن استخدامه أكثر من مرة فى نفس الصفحة سواء لرأس الصفحة الكامل أو لرأس المقالات او التدوينات او أجزاء الصفحة و بالطبع يشترط ان يحوى هذا الوسم على الوسم h1-h6 . و الآن سنقوم باضافة الوسم header و نكتب بداخله عنوان أول صفحة باستخدام HTML5

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>أول صفحة باستخدام HTML5</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>أول صفحة باستخدام HTML5</h1>
</header>
</body>
</html>

و لإضافة ستايل لهذا الوسم نقوم باستخدام

1
header { display:block;}
و الآن و بعد أن وضحت الوسم header , من وجهة نظرك ما هو تعريف الوسوم البنائية و ما أهميتها فى حين يمكن استخدام div بدلاً منها ؟!!

سوف تتم مناقشة هذا الدرس بالتفصيل عبر #IRC و skype خصوصاً النقاط التالية :

  • اقتراحات لتحسين كود المواقع العربية .
  • جدوى استخدام الوسوم البنائية بدلاً من div
  • المشاكل المتوقعة لاستخدام هذه الوسوم البنائية مع المتصفحات التى لا تدعم HTML5

و إذا كنت تود المشاركة فى هذا النقاش :

  1. يجب أن تكون لديك فكرة عامة عن هذا الدرس , و كذلك النقاط التى سيتم مناقشتها .
  2. إضافة تعليق على هذا المقال مع كتابة #IRC أو skype فى نهاية التعليق على حسب الوسيلة التى تُفضلها .
  3. التأكد من صحة البريد الإلكترونى فى التعليق حيث سيتم إرسال الدعوات عليه .

الكاتب geek4arab

geek4arab

مواضيع متعلقة

التعليقات مغلقة