إنشاء أول صفحة ويب بلغة HTML

إسم الله

أهــلاً ومرحباً بكم  في أول خطوة لبناء موقع على الويب بلغة HTML!

بانر لدروس html

اليوم سنتعلم شيئاً جديداً و شيقاً أيضاً، لكن قبل أن نُـقْـلِع .. عفواً قبل أن نبدأ .. أريد أن أعرف، هل ثبتتم البرامج الضرورية ؟

يجب أن يكون لديك محرر نصوص  كما ذكرنا سابقاً
– Notepad++
ويمكنك استعمال محرر آخر جميل وبمميزات أكثر ، لكن عيبه الوحيد أنه لا يدعم اللغة العربية
– Sublime text

و المتصفحات أيضاً  لاختبار موقعك هل يعمل جيداً على كل المتصفحات مثلاً : Google Chrome و Internet explorer و  Mozilla Firefox ..

متصفحات

إذن على بركة الله سنبدأ بإنشاء أول صفحة ويب، و أول شيئ نقوم به هو فتح صفحة محرر النصوص و اليكن Notepad++

محرر النصوص فارغ

ماذا سنفعل الآن؟ طبعاً سنكتب شيئاً نريده أن يظهر على صفحة الويب! 🙂  ، الصفحة بيضاء و تبدو مألوفة لنا 💡

ما عليك الآن إلا أن تكتب أي شيئٍ، مثلاً نبدأ بهاته الجملة التي حضرتني الآن:

بداية الكتابة في محرر النصوص

الآن وبعد أن كتبنا هاته السطور، علينا أن نسجلها، و أنتم تعرفون كيفية التسجيل، و من لا يعرف: نذهب إلى شريط القوائم ونضغط على Fichier ثم Enregistrer sous .. سيسألك مربع الحوار عن مكان تسجيل الملف، إحفظه أبنما تريد، ولكنني أفضل ان يكون لك مستند خاص بهذا المشروع.  سجله بإسم يكون امتداده html  مثلاً : « ola.html»

  • قلنا ضعه في مستند خاص بهذا المشروع واليكن اسمه مثلاً projet-net ..
  • مستندطريقة إنشاء مستند سهل جداً و لكن لا بأس من التعريج عليه، فلعل أحداً غير ملم بهذا الموضوع
  • – بيمين الفأرة (la souris)  إضغط فوق سطح المكتب واختر من القائمة Nouveau  ثم قم بإعادة التسمية.
  • واجعله خاص بملفات مشروع إنشاء موقع بلغة HTML.
  • -:- عندما تسجل الملف ola.html  ،إذهب إلى المجلد projet-net ، ستجده هناك بأيقونة المتصفح الافتراضي المثبت عندك.
  • إفتحه لترى نتيجة عملك . 😯
  •  

أول صفحة ويب

يا لها من مفاجأة !! 🙄 لم نحصل على شكل جيد للصفحة ، يبدو الشكل غير مرغوب فيه ! 😳 النص كله يظهر على نفس السطر رغم أننا كتبنا ثلاثة سطور في محرر النصوص ! 😯
لا .. لا تقلق فالأمر يحتاج إلى  بعض الصبر ، والكل سيكون على ما يرام!  💡 

-:- ماذا يحدث إذن عندما نكتب على محرر النصوص عدة سطور، و عند التسجيل نحصل على سطر واحد؟

في الواقع ، لإنشاء صفحة ويب لا يكفي   كتابة  النص فقط  كما فعلت آنفاً . بالإضافة إلى هاته الفقرات  ، يجب علينا كتابة ما يسمى بالعلامات أو الأكواد أيضاً أو وسوم ، والتي ستعطي تعليمات للحاسوب الذي يقرأها ثم ينفذ تلك الأوامر 💡   فمثلاً نقول له:  «انتقل إلى السطر الموالي » ، « إعرض صورة»، « لون هاته الكلمة أو الجملة»  و الأوامر كثيرة و ممتعة.

العلامات وصفاتها


إلى هنا كان الأمر جيداً، و الخطوات سهلة، و الحماس في ارتفاع 😉  لكن علماء البرمجة والحاسوب لم يفرحهم فرحتنا بهذا الإنجاز فقرروا أن يُـنكدوا علينا فرحتنا!  🙄 و أن يتعبوا محرر النصوص وضغطوا عليه بالأوامر و التعليمات كي لا يكرر فعلته  المشينة مع صفحة الويب التي أنشأناها سابقاً . لذلك كان لزاماً على المبرمجين أن يبتكروا لغة HTML  ليستخدموها في إصلاح هاته المهزلة  😀


الشفيرات أو العلامات 

إذا تصفحنا صفحات HTML نجدها مليئة بالأكواد و العلامات  و كلها غير مرئية على شاشات الحاسوب والهواتف ، ولكنها لغة يفهمها الكمبيوتر فيعرض علينا مما تمليه عليه الأوامر.
من السهل العثور على العلامات. وهي محاطة بـهاته  “الاشارات” :   

 

 و كذلك  الرموز أو الأكواد ، مثل:

فاصل متحرك
هاته العلامات تشير إلى طبيعة و نوع النص الذي يتواجد ضمنه أو يحيط به . فمثلاً نقول:  “هنا نعرض صورة ” ، “هذا عنوان الصفحة” ، “هذه فقرة ” و ” هذا رابط” ، والقائمة طويلة.

و هاته الأكواد يتم فتحها و غلقها و في حالة عدم غلقها قد تخلق تشوهاً في الصفحة 😯 

مــثــال:

 

توجد علامة فتح الشفرة <title> وعلامة إغلاق الشفرة   تشير هاتين الشفرتين  إلى أن عنوان الصفحة  ينتهي بالاغلاق ( </ title> ).

وهذا يعني للكمبيوتر أن أي شيء ليس بين هاتين العلامتين … ليس عنوانًا.

 

-:- هناك علامة تكون منفردة لا يتم فيها اللإغلاق مثل علامة  هاته صورة ، يتم فتحها    فقط  و لا ييجب إغلاقها  لأننا فقط نريد أن نقول للحاسوب أن هاته الصورة يجب أن تدرجها هنا.
فتكون علامة يتيمة ليس لها ما يغلقها فنكتبها هكذا:  <image /> أو في صيغة أخرى  <image> لأنه ليس مطلوباً  وضع علامة النهاية /
ولتجنب الخلط بينها وبين النوع الأول من العلامات ، يوصي مُبرمِجو  المواقع بإضافة هذا / (الشرطة المائلة) في نهاية العلامات اليتيمة.

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

 

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

 

فيفهمها الحاسوب ليقوم بعرض الصورة المضمنة في الملف photo.jpg.

معلومة:
سنكتشف الكثير من العلامات و الأكواد التي هي عبارة عن أوامر HTML  تتحكم في بناء صفحة الويب.  إلى هنا يبدو أن الغشاوة بدأت تتبدد من أعين المتتبعين، و أن صفحة الويب ليست كما يتخيل الكثيرون، و إنما هي عبارة عن برمجة تعتمد على علامات وأكواد لا تظهر على الشاشة و لكنها أوامر داخلية يفهمها الكميوتر و ينفدها ليسهل علينا قراءتها بوضوح  💡 

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


نعود إلى محرر النصوص الذي نشتغل عليه « Notepad++ »  و نبدأ  بكتابة أو نسخ الشفرة   أدناه ونلصقها في محرر النصوص

هذا الرمز يتوافق  مع بناء  صفحة الويب بلغة  HTML5:

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

عندما تنسخ الشفيرة في محرر النصوص « Notepad++ »  يجب ان ترى هذا الشكل:

np++

كود HTML في أعلى محرر Notepad++

ستلاحظ أن العلامات تفتح وتغلق بترتيب معين. على سبيل المثال، علامة <HTML> هو أول واحد يفتح وهذا هو أيضا آخر الذي من  يتم إغلاقه  في نهاية صفحة البرمجة ، ب </ HTML>  يجب إغلاق العلامات في الاتجاه المعاكس لفتحها. مثال :

<html> <body> </ body> </ html>:  الصحيح. لأنها تحترم الترتيب

<html> <body> </ html> </ body>: غير صحيح ، لأنها متشابكة و غير مرتبة.

 آه

لا تقلق:
! مازالت أمامنا  مهمة   التفسيرات لكل العلامات التي نسخناها  سالفاً في المحرر ،

شيئ طبيعي أن تأخذكم الدهشة و الارتباك حين ترون هاته المجموعة من العلامات المبهمة لا تخافوا 😀  سأقوم بتوضيح دور كل واحد من هاته العلامات فقط شيئ من التركيز!


نبدأ على بركة الله 

<! DOCTYPE html>

في السطـر الأول نكتب كلمة  doctype وهي  ضرورية لأنها تشير إلى أن صفحة الويب مصممة  ب HTML.
إنها ليست علامة  مثل الآخرين (هذه تبدأ بعلامة تعجب). قد تعتبر استثناءً بسيطاً يؤكد القاعدة.

كان  فيما مضى هذا الخط  المكوّن من DOCTYPE معقدًا بشكل لا يصدق. كان من المستحيل إزالته  بالنسبة لـ XHTML 1.0 ، بل كان عليك كتابة:

وعند ظهور HTML5 ، تقرر تبسيطه ، فكان  نجاحاً باهراً بالنسبة للمبرمجين ، فأصبح بصيغة  قصيرة  ك: 

 

فهذا يعني أن الصفحة مكتوبة بلغة HTML5.

الوسـم 

 

 

هذه هي العلامة الرئيسية للرمز. يشمل كل محتوى صفحتك. كما ترى ، فإن علامة الإغلاق

</ html> موجودة في نهاية الرمز!

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

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

الرأس  :  يقدم هذا القسم بعض المعلومات العامة عن الصفحة مثل عنوانها ، وتشفيرها (للتعامل مع الحروف الخاصة) ، وما إلى ذلك. هذا القسم هو عادة يكون قصيراًجداً و لا يتم عرض المعلومات الموجودة في الرأس على الصفحة ، بل هي ببساطة معلومات عامة مخصصة للكمبيوتر ( حوار خلف الشاشة 😆 ). ومع ذلك فهي مهمة جداً!

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

في هذه اللحظة ، سنترك الجسم فارغًا  على أن  نعود إليه لاحقًا. ولكن لننظر إلى العلامتين في الرأس …

الترميز  charset

 

تشير هذه العلامة إلى الترميز المستخدم في ملفHTML .

لن نخوض الآن في التفاصيل، لأنه يمكن أن تصبح معقدة بسرعة ، يشير الترميز إلى كيفية حفظ الملف. ويحدد كيف يتم عرض الأحرف الخاصة  مثل ( العربيـة ،  الصينية واليابانية ، إلخ).

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

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

العنوان الرئيسي للصفحة
<title>

هذا هو عنوان صفحتك ، ربما العنصر الأكثر أهمية! يجب أن يكون لكل صفحة عنوان يصف ما يحتويه. من المستحسن الاحتفاظ بالعنوان قصير (أقل من 100 حرف بشكل عام).

لا يظهر العنوان في صفحتك ولكن في الجزء العلوي منه (غالبًا في علامة تبويب المتصفح). احفظ صفحتك على الويب وافتحها في متصفحك. سترى أن العنوان يظهر في علامة التبويب ، كما هو موضح في الشكل التالي.

العنوان في المتصفح

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

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

البحث  في موقع جوجل

لذلك أقول لك أن اختيار العنوان  أمر مهم!

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

التعليق في HTML عبارة عن نص يعمل ببساطة كمذكرة.  لا يتم عرضه ، لا يقرأه الكمبيوتر ، ولا يغير عرض الصفحة.

ولكـن ،  لا يمكن أن نعتبرها غير مجدية !

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

و لن أتطرق للأمثلة اللآن لأن الأيام كفيلة بالكشف عن الدور المهم للتعليقات! 💡 

لكن كيف ندرج التعليق في نصوص البرمجة ؟
التعليق هو عبارة عن علامة HTML ذات شكل خاص جدًا . شاهد واقرأ هذا المثال:

 

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

 

يمكن لأي شخص الاطلاع على تعليقاتك  في شفرة HTML!
لننتهي بملاحظة مهمة:  يمكن للجميع رؤية شفرة HTML لصفحتك بمجرد نشرها على الويب. فقط انقر بزر الماوس الأيمن على الصفحة وحدد “عرض شفرة المصدر للصفحة” « Afficher le code source de la page » (قد يتغير العنوان حسب المتصفح الخاص بك).
يمكنك اختبار هاته العملية على أي موقع ويب فهو يعمل! بضمانة  100 ٪. 

المسألة الأخلاقية ؟  حتماً سيتمكن الجميع من رؤية كود HTML الخاص بك ولا يمكنك منعه.  لذلك ، لا تضع معلومات حساسة مثل كلمات المرور في التعليقات لصفحاتك  … و حاول أن تعتني بشفيرة المصدر الخاص بك ، لأنني أستطيع أن أتحقق ما إذا كنت قد نقلت استراتجيتي في البرمجة!

عندما تنظر إلى رمز بعض مواقع الويب ، لا تخف إذا بدا لك  طويلاً  أو لايحترم القواعد نفسها التي أقدمها لك في هذاالدرس. إعلم أنه لا تتم كتابة جميع المواقع في HTML5  . وأحيانًا يكتب بعض مبرمجي المواقع بشكل سيء جدًا عن رمزهم ، أو تجد المحترفين المنظمين ، فهم ليسوا دائمًا متشابهين في طرق االبرمجة!

الخاتمة:

نستخدم محرر النصوص – Notepad++  , Sublime text،Atom .. لإنشاء ملف بالامتداد. html (على سبيل المثال: ola.html). ستكون هذه صفحة الويب الخاصة بنا.

يمكن فتح هذا الملف في متصفح الويب ، فقط و بكل بساطة أنقر عليه.

داخل الملف ، سنكتب محتوى صفحتنا ، مصحوبًا بعلامات HTML.

يمكن أن تحتوي العلامات على عدة أشكال:

<الوسم> </ الوسم>: فإنها تفتح وتغلق لتحديد المحتوى (بداية ونهاية العنوان ، على سبيل المثال).

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

أحيانًا تكون العلامات مصحوبة بسمات لإعطاء مؤشرات إضافية مثل: <image name = "photo.jpg" />

تتكون صفحة الويب من قسمين رئيسيين: رأس  <head>  وجسم  <body> .

يمكنك عرض شفرة المصدر لأي صفحة ويب عن طريق النقر بزر الماوس الأيمن وتحديد Afficher le code source de la page  .

إلى هنا نكون قد أنهينا درس اليوم !

كانت الحصة طويلة و متعبة فلا ترحلوا دون أن تتركوا تعليقاتكم على الموضوع .

تعليقاتكم تهمنا و تدعمنا

الدرس الموالي:  تنظيم و ترتيب النص في صفحة الويب

اترك تعليقا

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *