إبدء صفحتك باستخدام وسم نوع الوثيقة DOCTYPE حتي توضح اي نوع من ال HTML او XHMTL سوف تستخدمه في إنشاء صفحتك، ووسم نوع الوثيقة يجعل المتصفحات تدرك ماذا تتوقع وكذلك يخبر المتحققين من صحة الاكواد كيف يحكمون علي الكود الذي سوف تكتبه حتي يستطيعون اختبار بناء الجملة في الكود. ثم بعد ذلك ابدء بكتابة البداية الفعلية للكود بكتابة وسم البداية لصفحة ال html وهو <html>.
حتي تبدأ صفحة من HTML بالاصدار Transitional HTML 4 يجب عليك اتباع الخطوات التالية:
1. إبدء بكتابة وسم نوع الوثيقة التالي حتي توضح للمتصفح انك سوف تستخدم الاصدار Transitional HTML 4 في صفحتك.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. أكتب وسم البداية <html> حتي تبدء في الجزء الفعلي من مستند ال HTML.
3. إترك مسافة قليلة حتي تكتب فيها بقية الصفحة التي سوف تقوم بكتابتها.
4. أكتب في نهاية الملف وسم النهاية </html>.
حتي تبدأ صفحة من HTML بالاصدار Transitional XHTML يجب عليك اتباع الخطوات التالية:
بعض الاشياء المهمة عن HTML أو XHTML قبل البدء في HTML و كذلك ال CSS
حتي تبدأ صفحة من HTML بالاصدار Transitional HTML 4 يجب عليك اتباع الخطوات التالية:
1. إبدء بكتابة وسم نوع الوثيقة التالي حتي توضح للمتصفح انك سوف تستخدم الاصدار Transitional HTML 4 في صفحتك.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. أكتب وسم البداية <html> حتي تبدء في الجزء الفعلي من مستند ال HTML.
3. إترك مسافة قليلة حتي تكتب فيها بقية الصفحة التي سوف تقوم بكتابتها.
4. أكتب في نهاية الملف وسم النهاية </html>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
</html>
|
حتي تبدأ صفحة من HTML بالاصدار Transitional XHTML يجب عليك اتباع الخطوات التالية:
1. إبدء بكتابة وسم نوع الوثيقة التالي حتي توضح للمتصفح انك سوف تستخدم الاصدار Transitional XHTML في صفحتك.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. ثم ابدء بكتابة وسم البداية <html xmlns="http://www.w3.org/1999/xhtml"> حتي تبدء في الجزء الفعلي من مستند ال XHTML.
3. إترك مسافة قليلة حتي تكتب فيها بقية الصفحة التي سوف تقوم بكتابتها.
4. أكتب في نهاية الملف وسم النهاية </html>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</html>
|
إنشاء الاساسيات:
تنقسم معظم صفحات الويب الي قسمين الرأس والجسم. والرأس هو القسم او المكان الذي يحدد عنوان الصفحة الخاصة بك. حيث يتضمن معلومات حول صفحتك لمحركات البحث مثل جوجل. وتعيين موقع من صفحتك وإضافة وسم الانماط او الاستايل وكتابة النصوص مثل اكواد جافا سكربت. وفيما عدا وسم العنوان <title> كل محتويات الرأس تعتبر غير مرئية لزائر الموقع.
2. اترك مسافة قليلة من اجل المحتويات التي سوف تضعها في قسم الرأس.
3. اكتب وسم النهاية لقسم الرأس </head>
وجسم صفحة ال HTML يحتوي علي محتويات صفحتك وهذا هو الجزء الذي سوف يراه زوار صفحتك بما في ذلك من النصوص او الرسومات.
2. اترك مسافة قليلة من أجل المحتويات التي سوف تضعها في صفحتك.
3. الكتب وسم النهاية لجسم الصفحة </body>.
ثم يجب ان نحفظ هذا الملف النهائي كقالب افتراضي نبدء العمل به عند البدء في إنشاء صفحة HTML سواء باستخدام الاصدار HTML 4.01 أو الاصدار XHTML 1.0.
تنقسم معظم صفحات الويب الي قسمين الرأس والجسم. والرأس هو القسم او المكان الذي يحدد عنوان الصفحة الخاصة بك. حيث يتضمن معلومات حول صفحتك لمحركات البحث مثل جوجل. وتعيين موقع من صفحتك وإضافة وسم الانماط او الاستايل وكتابة النصوص مثل اكواد جافا سكربت. وفيما عدا وسم العنوان <title> كل محتويات الرأس تعتبر غير مرئية لزائر الموقع.
ولإنشاء قسم الرأس:
1. مباشرة بعد فتح وسم <html> اكتب <head>.2. اترك مسافة قليلة من اجل المحتويات التي سوف تضعها في قسم الرأس.
3. اكتب وسم النهاية لقسم الرأس </head>
وجسم صفحة ال HTML يحتوي علي محتويات صفحتك وهذا هو الجزء الذي سوف يراه زوار صفحتك بما في ذلك من النصوص او الرسومات.
ولإنشاء الجسم:
1. مباشرة بعد وسم النهاية للرأس </head> اكتب وسم البداية للجسم <body>.2. اترك مسافة قليلة من أجل المحتويات التي سوف تضعها في صفحتك.
3. الكتب وسم النهاية لجسم الصفحة </body>.
مثال XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
|
مثال HTML:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
|
الاعلان عن الترميز:
كل المستندات النصية بما ذلك صفحات ال HTML تحفظ مع ترميز الحروف. وذلك لإنه يوجد العديد من الترميزات المستخدمة في العالم. وتعتبر فكرة الاعلان عن الترميز فكرة جيدة بأن تعلن عن الترميز الذي تم حفظ الصفحة الخاصة بك بالترميز الصحيح مما يجعل من السهل علي المتصفحات علي الانظمة التي تحتوي علي ترميزات افتراضية مختلفة لعرض الاحرف في صفحتك بشكل صحيح.
ولكي تعلن عن ترميز الاحرف:
في قسم رأس الصفحة اكتب
<meta http-equiv="content-type" content="text/html; charset=encoding" />
حيث ان الترميز هو ترميز الاحرف والتي قمت بحفظ الملف بها.
وترميز صفحة الويب الخاصة بك يعتمد علي طريقة حفظه إذا كنت قد حفظته في نص فقط ولم تختار نظام معين لترميز الحروف فقط يعني هذا الترميز قد تم حفظه علي أساس علي نظام الترميز للحروف الافتراضي علي جهازك او موقعك. علي سبيل المثال نظام الترميز الافتراضي للغة الانجليزية في الويندوز هو windows-1252 و للغة الانجليزية في نظام الماك هو x-mac-roman.
يكفينا في هذا الكورس ان نعرف ان نظام الترميز الخاص باللغة العربية هو UTF-8 .
عندما يري المتصفح وسم الميتا الخاص بترميز الحروف سوف يعرف ان الصفحة كانت قد حفظت علي نظام ترميز الحروف UTF-8 وسوف يظهرها بالطريقة المناسبة. والمهم هو نظام الترميز الذي تصرح به في وسم الميتا يتطابق مع الواقع بنوع الترميز الذي قمت بحفظ الملف به.
إنشاء عنوان صفحة الويب Creating a Page Title:
كل صفحة (X)HTML يجب ان تحتوي علي وسم العنوان <title> ويجب ان يكون هذا الوسم قصيرا وقادر علي وصف محتوي الصفحة، وفي معظم المتصفحات يظهر العنوان في شريط العنوان في نافذة المتصفح. والاهم من ذلك هو أهمية وسم العنوان بالنسبة لمحركات البحث فهو يساعد علي الادراج في محركات البحث مثل ياهو وجوجل وكذلك في قوائم في قائمة الصفحات المفضلة في قائمة المواقع المفضلة والمحفوظة في اي متصفح وكذلك علامات تاريخ التصفح في اي متصفح.
ولإنشاء العنوان:
1. ضع مؤشر الفأرة بين وسمين البداية والنهاية بين وسم ال <head>.
2. اكتب <title>.
3. أكتب عنوان صفحة ال html .
4. اكتب وسم النهاية </title>.
مثال XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="content-type" content="text/html;
charset=UTF-8" />
<title> صفحة القالب
الافتراضي</title>
</head>
<body>
</body>
</html>
|
مثال HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta
http-equiv="content-type" content="text/html;
charset=UTF-8" />
<title> صفحة القالب
الافتراضي</title>
</head>
<body>
</body>
</html>
|
ثم يجب ان نحفظ هذا الملف النهائي كقالب افتراضي نبدء العمل به عند البدء في إنشاء صفحة HTML سواء باستخدام الاصدار HTML 4.01 أو الاصدار XHTML 1.0.
بعض الاشياء المهمة عن HTML أو XHTML قبل البدء في HTML و كذلك ال CSS
لغة ال HTML خصوصا الاصدار الرابع HTML 4.01 والذي صدر في التسعينيات كانت تعتبر لغة متعبة في كتابتها والتي كانت تسمح بأشياء كثيرة مثل الخطوط الكبيرة أو الصغيرة او الكلمات ذات الحروف الصغيرة والكبيرة المختلطة والتي يمكن ان تكتبها في مسميات الوسوم مثل <body> and <BODY> فكلا منهما يعتبر صحيح علي سبيل المثال. وكانت تسمح ايضا بعدم وجود وسم النهاية في بعض الحالات فمثلا يمكنك ان تستخدم فقط وسم البداية دون ان تكتب وسم النهاية مثال ذلك وسم <p> المستخدم لإنشاء فقرة. فبينما كانت هذه المرونة تجعلك تفكر لأول وهلة ان كتابة اللغة سهل ولكنها كانت ايضا تجعل الامر صعب خصوصا بالنسبة للمتصفحات في ذلك الوقت.
ثم أدخل الاصدار XHTML 1.0 بعض التحسينات والتي تعتبر بالطبع أفضل من إصدار HTML 4 واصبحت تستخدم علي نطاق واسع. فإذا كنت تستخدم الاصدار HTML فلا تقلق لأن XHTML ليست بالتطور الكبير في مجال اللغات التي تحتاج إلي سنوات لدراستها. فهي تعتبر أساسا HTML.
وقد تم إصدار هذه النسخه من XHTML اعتمادا علي لغة XML. فكما أن HTML و XML من اللغات التي تعتمد علي استخدام الوسم والذي يمكنك من تنظيم البيانات بطريقة سهلة في أداءها وكذلك في الاستخدام فكذلك هي سهلة في الفهم حتي تتمكن أجهزة الكمبيوتر المختلفة وكذلك انظمة التشغيل المختلفة والبرامج بإستطاعتها تبادل البينات بسهولة. في حين ان ال XML ليست مثل ال HTML فهي ليست محدودة بعدد معين من الوسوم. ولكن في الحقيقة ال XML تزود بعدد من القواعد حتي تتمكن من وصف الوسم الخاص بك.
واذا حاولنا معرفة أيهم أفضل HTML 4.01 أم XHTML 1.0 في الاداء. فمن خلال عدد من النقاشات التي اجريب علي الانترنت قد تظن ان HTML 4.01 وXHTML 1.0 لغتين مختلفتين عن بعض تماما ولكنهما ليسوا كذلك. فبستطاعتك ان تنشيء موقع جميل متعدد الوظائف باستخدام HTML 4.01 الان والذي سيتمكن من ان يظل يعمل لسنوات من الأن.
فإذا أردت ان تستمر في استخدامك ل HTML 4.01 فمن المهم جدا ان تكتب الوسم الخاص بتعريف الاصدار <DOCTYPE> في بداية كل صفحة من صفحات موقعك وإلا فسوف يحدث بعض الاشياء غير المرغوب فيها عند استخدام للغة CSS خصوصا عند استخدام بعض المتصفحات لعرض او تصفح موقعك. كذلك يجب عليك أختبار صفحتك حتي تتأكد من أنها ليست بها اي خطأ في الهجاء مثلا أو أي أخطاء أخري والتي قد تشوه الصورة التي قد تظهر بها صفحتك. فعليك أيضا ان تفعل نفس الشيء مع الإصدار XHTML 1.0 ولكن الاصدار XHTML 1.0 يعتبر إصدار صارم جدا في قواعده والتي معها تعمل صفحة الويب بصورة جيده في معظم المتصفحات. مثال علي جدية هذا الاصدار من تحقق الوسوم الموجوده به ان ال XHTML 1.0 من الضروري جدا وضع وسم ال <DOCTYPE> لكن ال HTML لا تشترط وجود هذا الوسم بمعني انه بالسهو لم يوضع هذا الكود في ال HTML فلن يؤثر ذلك علي الصفحة.
وسم التصريح لنسخة HTML 4.01 هو
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
وسم التصريح لنسخة XHTML 1.0 Transitional هو
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
التحقق من صحة صفحات الويب:
لغة ال HTML تتبع عدد معين من القواعد علي سبيل المثال وسم <html> يحيط بكل الوسوم علي الصفحة. وكذلك لغة XHTML تضع قواعد اكثر صرامة حتي تتبعها ومن السهل جدا ان تنسي بعض هذه القواعد او ان تخطي في هجاء بعض اسماء الوسوم وتكتب اسماء غير صحيحة وغير معترف بها كوسم من وسوم اللغة لذلك فهي تعتبر غير صحيحه (او غير صالحة). فكما تسبب هذه الاخطاء حدوث بعض المشاكل مع ال HTML مثلا ان تظهر صفحتك بشكل مختلف علي المتصفحات المختلفة. والاكثر من ذلك أهمية انك لن تستطيع مع ذلك إنشاء او تكوين لغة CSS بطريقة صحيحة أيضا طالما ان ملف او وثيقة ال HTML تحتوي علي أخطاء.
لحسن الحظ يوجد أداة تستخدم في فحص صفحة الويب التي قمت بتكويدها ومعرفة إذا كانت خالية من الاخطاء أم لا واسهل طريقة لإن تختبر او تتحقق من صحة صفحات الويب الخاصة بك هي توجد علي موقع W3C بتحميل ملف صفحة الويب واختبارها من هذه الصفحة اضغط هنا أو تقوم بتثبيت أداة Web Developer Extension علي متصفح الفاير فوكس من الصفحة والتي توفر طريقة سريعة وسهلة لكي تختبر صفحتك في W3C Validator.
وال W3C أو World Wide Web Consortium هي المنظمة المسئولة عن تحديد القواعد القياسية لعدد من اللغات المستخدمة في الويب بما فيها HTML, XHTML, XML.
وال W3C تجد أي أخطاء في صفحتك وتخبرك بطبيعة هذه الاخطاء واذا استخدمت متصفح الفايرفوكس فبستطاعتك ان تقوم بتحميل أداة HTML Validator والتي يمكنك من خلالها فحص موقعك من خلال متصفحك بدون الحاجة لزيارة موقع W3C. يمكنك تحميل هذه الاداة من موقعها للتحميل اضغط هنا او بتحميل اداة مشابهه لها تماما من للمتصفح Safari من الصفحة الخاصة بها للتحميل اضغط هنا .
ليست هناك تعليقات:
إرسال تعليق