التصنيفات: صحة مترجم

كيف تنشئ موقع ويب – 2 – أول صفحة ويب لك بالHTML

هل أنهيتم تثبيت جميع البرمجيّات؟ ينبغي الأن أن تحصلوا على محرّر نصوص من أجل إنشاء موقعكم (مثل Notepad++) و عدّة متصفّحات لتجربته (Mozilla Firefox, Google Chrome, Internet Explorer…).

سنبدأ التّطبيق في هذا المحور! سوف نكتشف قواعد لغة HTML و نسجلّ أوّل صفحة لنا على موقع الويب!

نعم بالطّبع، لا تنتظروا أكثر لإنجاز صفحة استثنائيّة على موقع الويب بمجرّد قراءتكم لهذا المحور الثاني، و لكن صبرا…فهذا الأمر سيتحقّق حتما!

فـــــــــهرس المحــــــــــور :

–         إنشاء صفحة الويب باستعمال المحرّر

–         الوسوم (balises/tags) و خصائصها.

–         البنية الأساسيّة لصفحة HTML5 .

–         التّعليقات.

إنشــــــــاء صفحــــــــــة ويب باستعمــــــــال المـــــــــحرّر.

دعونا نضع أنفسنا في هذا الوضع! كما قلت آنفا، نحن بصدد إنشاء موقعنا باستعمال محرّر نصّ إذ كان يجب عليكم تثبيت واحد تبعا للنّصائح التّي قدّمتها لكم في المحور الأوّل: لا يهمّ ما إذا كان يُدعي Notepad++، PSpad، jEdit، vim، TextWrangler. فلكلّ هذه البرمجيّات هدف بسيط ألا و هو: السماح لكم بكتابة نصّ!

سأستخدم Notepad++ في بقيّة هذا الدّرس لذلك سأقوم بفتحه (الشّكل التّالي).

فتح Notepad++

حسنا، ماذا سنفعل الآن؟ ماذا سنكتب على هذه الورقة البيضاء؟

سنقوم بتجربة صغيرة لأجل ذلك أدعوكم لكتابة ما يخطر ببالكم مثلما سأقوم بذلك في الشّكل التّالي.

نص على Notepad++

يمكنكم كتابة نفس الجمل التّي كتبتها أو كتابة ما تشاؤون : الهدف هو كتابة شيئ ما.

الآن احفظوا هذا الملّف، الأمر بسيط جدّا للقيام بذلك: مثلما هو الأمر في جميع البرامج: لديكم قائمة، ملّف< حفظ. علبة حوار تسألكم أين تحفظونه و كيف تسمّونه، احفظوا الملفّ حيثما شئتم و اعطوه الاسم الذي تودّون، يجب انهاء الاسم بكلمة  HTML مثال: اختبار.html (test.html)كما يُوضّح ذلك الشّكل التّالي.

حفظ ملف في Notepad++

أُوصيكم بإنشاء ملفّ جديد في مستنداتكم ليضمّ ملفّات موقعكم. بالنّسبة لي، فقد قُمت بإنشاء ملف اختبار(test) وضعت ملّفي به test.html .

افتحوا الآن مُتصفّح الملفّات داخل الملفّ الذي حفظتم به صفحتكم، سوف ترون هناك الملفّ الذي أنشأتموه للتّوّ( الشّكل التّالي).

       

الملفّ داخل المتصفّح

إنّ الأيقونة التّي تُمثل الملفّ تتعلّق بمتصفّح الويب الإفتراضي الذي تستعمله. الأيقونة هنا تتمثّل في Google Chrome المتصفّح الإفتراضي الذي أستخدمه و يُمكن أن يكون للملفّ أيقونة أخرى عندكم. إليكم مثلا الأيقونات التّي قد تظهر إذا كان متصفّحكم الرئيسيّ هو Firefox أو  Internet Explorer.

أيقونة ملفّ Firefox

أيقونة ملفّ Internet Explorer

قُوموا فقط بالنّقر مرتين على هذا الملفّ و…سيُفتح متصفّحكم و يُعرض النّص الذي كتبتموه كما يُوضّح ذلك الشّكل التّالي.

صفحة ويب معروضة

و كأنّ هذا الأمر لم ينجح! فقد ظهر النّص كلّه في نفس السّطر في حين أنّنا كتبناه في سطرين مختلفين؟!

فعلا، ملاحظة جيّدة!

لقد عُرض النّص كلّه في نفس السّطر في حين أنّنا طلبنا كتابته في سطرين مختلفين، ما الذي يحدث؟

في الواقع، من أجل إنشاء صفحة ويب لا تكفي كتابة النّص فقط كما فعلنا إذ يجب أن نُضيف لهذا النّص ما يُسمّى بالوسوم التّي من شأنها إعطاء تعليمات للحاسوب مثل ” اذهب إلى السّطر”، ” اعرض صورة” و غير ذلك.

الوســـــــــــــوم (balises/tags) و خصـــــــــــــــــــائصها.

حسنا، كلّ هذا كان سهلا جدّا. طبعا فقد كان يجب على هؤلاء المختصّين في المعلوماتيّة التّدخل في ذلك و تعقيد الأمور. إذ لا تكفي “مجرّد” كتابة النّص على المحرّر بل يجب إعطاء تعليمات للحاسوب، و من أجل هذا الغرض نلجأ إلى استعمال الوسوم في HTML .

الوســــــــــــــــوم

إنّ صفحات HTML مليئة بما يسمّى الوسوم  و لا يستطيع الزّائر رؤية هذه الأخيرة  على الشّاشة ، و لكنّها تسمح للحاسوب بفهم ما يجب عليه عرضه .

و من السّهل إيجاد هذه الوسوم لأنّها مُحاطة  ” بإشارات” أو رموز > و< مثل هذه : <balise>.

ما هي فائدة هذه الرّموز ؟ إنّها تحدّد طبيعة النّص الذّي تُؤطّره  فهي تقول مثلا: ” هذا هو عنوان الصّفحة” ، ” هذه صورةّ ” ، ” هذه فقرة من النّص ” و غير ذلك.

يوجد نوعين من الوسوم:  هناك وسوم مزدوجة  و أخرى منفردة.

الوســـــــوم المزدوجـــــــــــة

تُفتح لتحتوي على نصّ  و تُغلق فيما بعد و لتبدو كما يلي:

رمز: HTML

<titre>Ceci est un titre</titre>

نُميّزبين وسم مفتوح (<titre>) و وسم مغلق (</titre>)يشير إلى انتهاء العنوان.  هذا يعني للحاسوب بأنّ  ما يوجد خارج هذين الوسمين…ليس عنوانا.

رمز: HTML .

Ceci n’est pas un titre <titre>Ceci est un titre</titre> Ceci n’est pas un titre

الوســـــــــوم المنـــــــــــفردة

هي وسوم غالبا ما تفيد في إدخال عنصر إلى مكان معيّن (صورة مثلا). و ليس من الضّروريّ تحديد بداية و نهاية الصّورة، علينا فقط أن نقول للحاسوب > أدخل صّورة هنا <

يُكتب الوسم المنفرد على النّحو التّالي:

رمز: HTML .

1 > /image<

تجدر الإشارة أنّ الرّمز ” / ” في الأخير ليس ضروريّا. يمكن أن نكتب فقط  >صورة<. و لكن من أجل تجنّب الخلط بينها و بين النّوع الأوّل من الوسوم يُوصي مسؤولوا مواقع الويب(webmasters) بإضافة هذا الرّمز  ” / ” في نهاية الوسوم المنفردة. لذلك سترونني أضع رمز  ” / ” في الوسوم المنفردة و أُوصيكم أن تفعلوا ذلك أيضا لأنّها ممارسة حسنة.

الخصــــــــــــائص.

الخصائص هي نوع من الخيارات المتعلّقة بالوسوم إذ تأتي لتكملتها بإعطاء معلومات إضافيّة. و تاتي الخاصيّة بعد اسم الوسم المفتوح و هي في الغالب ذات قيمة مثل:

رمز: HTML .

1 ><balise attribut=”valeur”>

ما هي فائدة هذا؟ لنأخذ الوسم > /صورة< الذي رأيناه منذ قليل، إنّه لا يفيد كثيرا. يمكن إضافة خاصيّة للإشارة إلى اسم الصورة التّي يجب عرضها:

رمز: HTML .

1<image nom=”photo.jpg” />

يفهم الحاسوب عندها أنّه يجب عليه عرض الصّورة المُحتواة في الملف  صورة.jpg .

و في حالة الوسم  “المزدوج” ، لا نضيف الخاصيّات إلاّ مع الوسم المفتوح و ليس المغلق. مثلا: يُشير هذا الرّمز أنّ الحكمة لنيل أمسترونغ و يرجع تاريخها إلى 21 جويلية 1969 .

رمز: HTML .

1 2 3<citation auteur=”Neil Armstrong” date=”21/07/1969″> C’est un petit pas pour l’homme, mais un bond de géant pour l’humanité. </citation>

كلّ هذه الوسوم التّي رأينها هي علامات خياليّة، فللعلامات الحقيقيّة أسماء باللّغة الإنجليزيّة ( أي نعم! ) سوف نكتشفها في تتمّة هذا الدّرس.

البنيــــــــــــة الأساسيّــــــــة لصفحـــــــــــــة HTML5 .

لنأخذ مرّة أخرى محرّر النّص (في حالتي Notepad++). أنا أدعوكم لكتابة أو  نسخ و لصق  الرّمز الأصلي أدناه في Notepad++.  يُوافق هذا الرّمز أساس صفحة من موقع الويب بلغة HTML5 :

رمز: HTML .

<!DOCTYPE html>
<html>
<head>
< / meta charset=“utf-8 >
<title>Titre</title>
</head> <body> </body>
</html>

تركت فراغات في بداية بعض السّطور “لتغير” مكان الوسوم، هذا الأمر ليس ضروريا و ليس له أيّ أثر على عرض الصّفحة و لكنّه يجعل الرّمز الأصليّ أكثر وضوحا و هو ما نسمّيه فراغ أوّل الفقرة. إذ يكفي النّقر في محرّركم على المفتاح Tab لتحصلوا على نفس النّتيجة.

أنسخ على Notepad++ لتحصل على الشّكل التّالي:

الرمز الأدنى HTML على Notepad++

سوف تلاحظون بأنّ العلامات تُفتح و تُغلق في نظام محدّد مثل: الوسم  <html>هي أوّل ما نفتحه و أخر ما نغلقه أيضا ( في نهاية الرّمز مع </html>.يجب غلق الوسوم في الإتجاه المعاكس لفتحها مثال:

●     <html><body></body></html>:صحيح. يجب أن يكون الوسم المفتوح داخل وسم أخر مغلقا في الدّاخل.

●     <html><body></html></body>: غير صحيح. فالوسوم مختلطة.

سيّدي،هل يمكننا الحصول على شرح لجميع الوسوم التّي نسخناها في المحرّر؟

طبعا إذا كان الطّلب على هذا القدر من اللّباقة.

لا تخشوا من مشاهدة كلّ هذه الوسوم فجأة لأنّني سأشرح لكم دورها!

نــــــــوع المســـــــــــــــــتند  Doctype 

رمز: HTML .

1 <DOCTYPE html! >

يُدعى السّطر الأوّل ” نوع المستند“. و هذا السّطرضروريّ لأنّه يُشير إلى أنّ هذه الصّفحة هي صفحة ويب بلغة HTML . و هي في الحقيقة ليست وسما مثل غيره من الوسوم (تبدأ بعلامة تعجّب)، و يمكنكم القول بأنّ الإستثناء يُؤكّد القاعدة.

لقد كان هذا السّطر من نوع المستند معقّدا جدّا في الماضي و كان تذكّره أمرا مستحيلا. إذ كان يجب أن نكتب  XHTML 1.0 كما يلي:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>.

ولحسن حظّ مسؤولي الويب، تمّ تبسيط لغة HTML5.

فإذا شاهدتم وسما قصيرا لنوع المستند (<DOCTYPE html!>) فهذا يعني أنّ الصّفحة مكتوبة بلغة HTML5.

الوســــــــــــم  </html> 

رمز: HTML .

1 <html>

2  </html>

هذا هو الوسم الرئيسيّ للرّمز و هو يحتوي كلّ مضمون صفحتكم. فكما تشاهدون أنّ الوسم المفتوح <html>يوجد في نهاية الرّمز!

الـــــــــــــرّأس  <head>  و الجســـــــــــــــم <body> 

تتكوّن صفحة الويب من جزئين:

● الرّأس <head>   :يعطي هذا القسم بعض المعلومات الهامّة عن الصفحة مثل عنوانها، التّرميز (بالنّسبة للعلامات الخاصّة) وغيرها. عموما، يكون هذا القسم قصيرا جدّا. و لا تعرض المعلومات المحتواة في الرّاس على الصّفحة، هي مجرّد معلومات عامة موجّهة للحاسوب و لكنّها ضروريّة جدّا!

● الجسم <body>: هنا يوجد الجزء الرئيسيّ من الصّفحة، و كلّ ما سنكنتبه فيه سيُعرض على الشاّشة. إذ أنّنا سنكتب داخل الجسم الجزأ الأهمّ من الرّمز.

الجسم فارغ حاليّا ( سنعود إليه لاحقا) و سنهتّم بالوسمين الموجودين داخل الرّأس…

التّرميـــــــــــــــز (charset)

رمز: HTML .

1 </“meta charset=”utf-8>

يدلّ هذا الوسم على التّرميز المستخدم في ملفّك .html

دون الخوض في التّفاصيل التّي ستعقّد الأمر، فإنّ التّرميز يدلّ على كيفيّة حفظ الملف و هو الذّي يحُدّد كيفيّة عرض العلامات الخاصّة (الحركات، الرّموز الخطيّة اليابانيّة و الصينيّة، العلامات العربيّة).

توجد العديد من تقنيات التّرميز المتعلّقة بالأسماء الغريبة و المستخدمة حسب اللّغات: ISO-8859-1, OEM 775,  Windows-1253…و لكنّ الأكثر استعمالا اليوم هي: UTF-8 . تسمح طريقة التّرميز هذه بعرض جميع الرّموز لجميع اللّغات في العالم دون وجود أيّ مشكل بتاتا! لذلك أشرت إلى UTF-8 في هذا الوسم.

كما يجب أن يكون ملفكم محفوظا جيّدا باستعمال  UTF-8و هو الحال غالبا مع برنامج Linux الإفتراضيّ، غير أنّ الأمر مختلف مع Windous الذّي يستدعي استخدام البرمجيات.

في استعمال Notepad++ ، ادهبوا إلى قائمة التّرميز< رمّز باستعمال UTF-8(دون   (BOMحنّى يُحفظ ملفكم من البداية في UTF-8. لا ينطبق هذا الأمر إلاّ على هذا الملف المفتوح الآن.

و حتّى لا نُعيد ذلك في كلّ مرّة نفتح فيها ملفا جديدا، أنصحكم بالذّهاب إلى قائمة الإعداد < خيارات، علامة تبويب فتح سند جديد/ ملف. اخترفي القائمة  UTF-8دون BOM .

إذا واجهتم أيّ مشكل في عرض الحركات لاحقا على صفحتك فهذا يعني وجود مشكل في التّرميز، تأكّدوا أنّ الوسم يُشير بشكل صحيح إلى UTF-8 (يمكن لمحرّر النّص ان يُعلمك بذلك، يقوم Notepad++ بذلك في قائمة التّرميز).

العنـــــــــوان الرّئيســـــــــــي للصّـــــــــــفحة

رمز: HTML .

1 <title>

قد يكون عنوان صفحتكم العنصر الأكثر أهميّة! فلكلّ صفحة عنوان يصف ما يجب أن تحتويه و يُنصح باستعمال عنوان قصير نوعاما ( عموما أقل من 100 علامة).

لا يظهر العنوان على صفحتكم أعلى هذه الصّفحة (غالبا في تبويب المتصفّح). احفظوا صفحة الويب و افتحوها على متصفحكم. سترون أنّ العنوان يظهر في التّبويب كما في الشّكل التالي:

يظهر عنوان الصفحة أعلى المتصفح

مع العلم أنّ العنوان يظهر في نتائج البحث أيضا مثل Google ( الشكل التالي)

يظهر عنوان الصّفحة في بحوث Google

اختيار العنوان بعناية أمر مهّم!

التعليقـــــــــــــــــــــــــات

لقد تعلّمنا في هذا الفصل كيف نُنشئ أولى صفحة حقيقيّة لنا بلغة HTML . و قبل الإنتهاء من ذلك أودّ أن أقدّم لكم مبدأ التّعليقات.

التعليق بلغة HTML هو مجرد نص للتّذكير، لا يظهر و لا يُقرأ على الحاسوب و لا يُغيّر شيئا في عرض الصّفحة.

باختصار، هل ليست له أيّ فائدة؟

بلى، إنّه مفيد!

إنّه  يُفيدكم و يفيد الأشخاص الذين يطّلعون على الرّمز الأصليّ (le code source) لصفحتكم و يمكنكم استخدام التّعليقات للإشارة إلى كيفية عمل صفحتكم.

ما هي الفائدة وراء ذلك؟ سيسمح هذا بتذكيركم بكيفية عمل صفحتكم إذا عُدتم إلى الرّمز الأصليّ للصّفحة بعد غياب طويل، لا تضحكوا من ذلك فهو يحدث لجميع مسؤولي الويب.

إضــــــــــافة تعليــــــــــــــق

التّعليق هو وسم بلغة HTML ذو شكل خاص جدّا:

رمز: HTML .

<!– Ceci est un commentaire –>

يمكنكم وضع التّعليق حيثما شئتم ضمن الرّمز الأصليّ: هذا لايُؤثّر على صفحتكم و لكنّه يساعدكم في تحديد موقعكم من الرّمز الأصليّ (خاصّة إذا كان طويلا).

رمز: HTML .

<!DOCTYPE html>
<html>
<head>
<!– En-tête de la page –>
< / meta charset=“utf-8 >
<title>Titre</title>
</head> <body>
<!– Corps de la page –>
</body>
</html>

يمكن للجميع مشاهدة تعليقاتكم…و كل رمز HTML !

لننهي هذا بملاحظة هامّة: يمكن للجميع مشاهدة رمز HTML على صفحتكم بمجرد و ضع هذه الأخيرة على الويب، إذ يكفي النّقر على يمين الصّفحة و اختيار” عرض الرّمز الأصليّ ” (قد يتغير العنوان بحسب المتصفح الذي تستخدمه) كما يظهر في الصّورة التّاليّة:

القائمة عرض الرمز الأصلي

و بالتّلي يظهر الرمز الأصلي (الشّكل التّالي)

عرض الرمز الأصلي

يمكنك تجريب هذه العملية على أيّ موقع ويب، سينجح هذا! الأمر مضمون 100 % . و يتّضح ذلك ببساطة: يجب على المتصفّح أن يحصل على رمز HTML ليعرف ماذا يجب عرضه. فرمز HTML مواقع الويب مُتاح للجميع في كلّ مواقع الويب .

العبرة من القصّة! بإمكان الجميع الإطلاع على رمز HTML و لا تستطيعون منعهم. و بالتّالي، لا تضعوا معلومات حساسّة في التّعليقات مثل كلمة السّر…و اعتنوا بالرّمز الأصلي لأنّه بإمكاني مراقبة ما إذا طبقتم الدّرس جيّدا!

عندما تشاهدون رمز بعض مواقع الويب فلا تخافوا إذا بدى لكم طويلا أو مخالفا للقواعد التّي قدّمت لكم في هذا الكتاب، فلا نُكتب جميع المواقع بلغة HTML5 و أحيانا لا يكتب مسؤولوا الويب رمزهم بشكل صحيح فهم ليسوا دائما مثالا يُحتدى به!.

……………………………………………………………………….

ترجمة، و إعداد و تقديم : وسيلة شيباني من الجزائر – الموقع المميز –

المصدر : le site du zéro

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

نشر