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

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

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

 

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

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

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

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

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

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

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

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

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

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

لا .. لا تقلق فالأمر يحتاج إلى  بعض الصبر ، والكل سيكون على ما يرام!  💡 

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

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

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

---

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

---

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

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

 

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

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

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

مــثــال:

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

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

 

-:- هناك علامة تكون منفردة لا يتم فيها اللإغلاق مثل علامة  هاته صورة ، يتم فتحها    فقط  و لا ييجب إغلاقها  لأننا فقط نريد أن نقول للحاسوب أن هاته الصورة يجب أن تدرجها هنا.

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

الوسـوم

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

 

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

 

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

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

---

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

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

 

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

كود 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. وهذا نجده تلقائياً في معظم محرري النصوص.

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

<title>

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

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

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

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

التعليقات:

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

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

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

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

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

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

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

 

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

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

الخاتمة:

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

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

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

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

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

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

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

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

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

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

 

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

تنظيم و ترتيب النص في صفحة الويب إنشاء جدول في HTML إدراج الصور في صفحة HTML دروة تدريبية في لغة HTML5 و CSS3 دروس HTML5 دروس CSS3