قبل البدء فى كتابه كود البرمجه الخاصه بالصفحات
نوضح كيف يتحول فى النهايه الكود الذى سنكتبه الى صفحه موقع انترنت يمكن ان يزورها ويشاهدها الأخرون
- اولا عندما نقوم بكتاب كود البرمجه للصفحه ويتم حفظها فى ملفا بإمتداد يناسب نوع لغه البرمجه الذى كتبنا به الكود . مثلا فى حالتنا هذه سنستخدم لغه الـ html وبالتالى يكون إمتداد الملفات التى كتبنا الكود بداخلها هو html مثال : website.html
- هذه الملفات قما اتفقنا قبل ذلك تكون مخزنه على سيرفر وهذا السيرفر يرسل الملفات الى متصفح الإنترنت الخاص بالزائر
- يقوم برنامج متصفح الإنترنت أى كان نوعه ( firefox - internet explorer - opera ...etc ) بتفسير الكود الذى كتبناه بداخل الملفات ومن ثم ينفذ هذا الكود ويحوله الى صفحات والتى نراها عند زياره اى موقع على الإنترنت
البدء فى كتابه اول صفحه
اى صفحه html يجب ان تحتوى على بعض العناصر التى تساعد برنامج المتصفح على تفسير كود الصفحه .. وبالتالى يجب ان تتوفر هذه العناصر - ويسمى كل منها " تاج " - فى الصفحه التى سنكتبها وهى :
- doctype
- تاج <html>
- تاج <head>
- تاج <title>
- تاج <body>
قم الآن بفتح برنامج نوت باد كما أوضحنا فى : الشرح رقم 1 - اساسيات HTML و CSS
وقم بكتابه الكود التالى فى أول الصفحه :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ليس من الضرورى ان تقوم بتذكر هذا الكود لتكتبه بنفسك فى كل مره ..
تستطيع نسخه ولصقه فى اول الصفحه فى كل صفحه جديده.
ثانيا <html>
بعد ان اخبرنا المتصفح بنوع الملف نبدأ فى كتابه الكود نفسه. وأول ما يتم كتابته هو تاج <html> ووظيفته ان يحتوى على كل الكود الخاصه بالصفحه بما فى ذلك جميع التاجات الأخرى . فهو الذى يحوى كل الصفحه بداخله .
وكما اوضحنا سابقا فى شرح ما هى الـ html
فإن كل تاج له بدايه ونهايه. البدايه هى التاج نفسه والنهايه هى التاج مضافا فى اوله شرطه مائله الى اليمن . مثال :
بدايه تاج html :
<html>
نهايه التاج :
<html/>
وكما اوضحنا سابقا فى شرح ما هى الـ html
فإن كل تاج له بدايه ونهايه. البدايه هى التاج نفسه والنهايه هى التاج مضافا فى اوله شرطه مائله الى اليمن . مثال :
بدايه تاج html :
<html>
نهايه التاج :
<html/>
ويوضع بين النهايه والبدايه الأكواد الخاصه بهذا التاج.
والان قم بكتابه بدايه كود الـ html بعد كود doctype مباشره ليكونوا كالتالى :
والان قم بكتابه بدايه كود الـ html بعد كود doctype مباشره ليكونوا كالتالى :
ثالثا تاج رأس الصفحه <head><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
ويستخدم لكتابه اى معلومات تخص الصفحه بداخله مثل عنوان الصفحه والوصف الخاص بالصفحه والكلمات الدليليه والمكان المخزن فيه ملف الــ css ( والذى سنتكلم عنه فيما بعد ) . حاليا نحن لن نحتاج لكل هذا فقط سوف نكتفى بوضع تاج عنوان الصفحه <tilte> و(الميتا) الذى يحدد اللغه المكتوب بها الصفحه .
- تاج عنوان الصفحه <title>
وهو يخبر المتصفح بالعنوان . هذا العنوان سوف يظهر فى الأماكن التاليه :
- فى الشريط الموجود أعلى المتصفح . مثال لو نظرت الى اعلى الصفحه الان سوف تجد مكتوبا " عالم سمسم " لان هذا هو الذى تم تحديده فى تاج العنوان
- اذا كنت تستخد ويندوزXP فالعنوان يظهر ايضا فى شريط المهام
- فى قائمه المواقع المفضله اذا اضفت الموقعع الى المواقع المفضله لديك
- اذا بحثت عن الموقع فى محرك بحث مثل جوجل او ياهو او بينج فإن عنوان الصفحه يظهر فى نتيجه البحث
مهم جدا لإظهار نص الكتابه بشكل صحيح لزوار الموقع ..
فاذا كانت صفحتك سوف تتضمن نصوص مكتوبه بالعربيه ونصوص مكتوبه بلغه اخرى سوف نستخدم :
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />اما اذا كانت ستحتوى على نصوص مكتوبه باللغه العربيه فقط . فنستخدم التصريح التالى :
<meta http-equiv="content-type" content="text/html;charset=windows-1256" />لاحظ انه فى حاله اللغه العربيه فقط استبدلنا UTF-8 بـ windows-1256
الآن سوف نضيف تاج رأس الصفحه وتاج العنوان وتصريح اللغه ثم نقوم باغلاق تاج رأس الصفحه بإضافه نهايته <head/> الى صفحتنا التى نعمل عليها ليكون الكود كالتالى :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>عنوان الصفحه مثلا عالم سمسم</title>
<meta http-equiv="content-type" content="text/html;charset=windows-1256" />
</head>
رابعا تاج جسم الصفحه <body>
جميع الأكواد التى ستوضع بين بدايه هذا التاج <body>ونهايته <body/> سوف تظهر للزائر على الشاشه . ففى هذا التاج سوف نضع صور ونصوص ولينكات الى مواقع اخرى وكل شئ .
ولان هذه هى اول صفحه فسنضيف فقط كلمات بسيطه ولتكن مثلا : " لا اله الا الله . والحمد لله "
سوف تكون هذه الكلمات بين علامتين يطلق عليها " وسوم " واحد منها للبدايه والآخر للنهايه كما تعلمنا فى فتح التاج واغلاقه وهى : <p></p> وحرف الـ p اختصار لكلمه paragraph وتعنى بالعربيه فقره او مقاله قصيره .
وسوف تكون بالشكل التالى :
<body>
<p>لا اله الا الله . والحمد لله</p>
</body>
آخرشئ قبل انهاء الصفحه
نحن الان انتهينا من كتابه كود هذه الصفحه البسيطه وقد قمنا بإستخدام العناصر التى اتفقنا عليها فى البدايه وقلنا انه يجب ان تتوافر فى كل صفحه نقوم بكتابتها بلغه الـ html وهى كما اسلفنا :
- doctype
- تاج <html>
- تاج <head>
- تاج <title>
- تاج <body>
وكما تلاحظ .. فى كل تاج او وسم فتحناه فى الصفحه قمنا بعد الإنتهاء منه بإغلاقه عن طريق كتابه نهايته مثال : تاج عنوان الصفحه <title> أو تاج جسم الصفحه <body> او وسم الفقره <p>.. ولكن هناك تاج حتى الان لم نقم بكتابه نهايته وهو تاج الـ <html> والذى اتفقنا ان كل كود الصفحه يكتب بداخله .
الآن وبعد اقفال تاج جسم الصفحه <body/> وبما اننا انتهينا من كتابه كود صفحتنا البسيطه هذه بالكامل نقوم بإضافه نهايه تاج الــ <html> وهو <html/>
الان لدينا صفحه انترنت مكتوبه بلغه الـ html قمنا بكتابتها على محرر النصوص notepad وهى كالتالى :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>عنوان الصفحه مثلا عالم سمسم</title>
<meta http-equiv="content-type" content="text/html;charset=windows-1256" />
</head>
<body>
<p>لا اله الا الله . والحمد لله</p>
</body>
</html>
تبقى لنا ان نقوم بحفظ الصفحه ومشاهدتها بإستخدام متصفح الإنترنت ..
فى برنامج الـ notepad قم بالضغط على قائمه file ثم sava as واختار مكان حفظ الصفحه وسوف يكون بداخل مجلد www والذى قمنا بتجهيزه فى الشرح رقم 2 - اساسيات HTML و CSS
وقم بكتابه اسم الملف على ان يكون امتداد الملف html وليكن كالتالى مثلا :
first.html
وتأكد انك تقوم بحفظ الصفحه بنوع التشفير : utf-8 فإذا وجدت الخيار encoding مقابله كلمه ANSI او اى كلمه اخرى قم بتغييرها الى UTF-8 .. واذا لم تجد هذا الخيار فلا تقلق سوف يقوم برنامج النوت باد بحفظ الصفحه بالتشفير المطلوب دون تدخل منك
الآن اغلق برنامج النوت باد وتوجه الى فولدر www بداخل فولدر First_website وقم بالضغط مرتين على ملف first.html وسوف تظهر لك الصفحه التى قمنا بإعدادها على متصفحه الإنترنت الذى تستخدمه عاده .
ملحوظه : اذا قمت بالضغط بالزر الأيسر واخترت open with ثم اخترت فتح ملف first.html بإستخدام برنامج notepad سوف يظهر نفس الكود الذى كتبناه معا فى هذا الشرح مره اخرى ..
ويمكنك التعديل عليه او كتابه كلمات اخرى ما بين وسمي <p> و <p/> ثم اعاده حفظ الملف بنفس الطريقه ونفس الإمتداد . وسوف تشاهد التغييرات التى قمت بها عند مشاهده الصفحه بإستخدام المتصفح .
فى الشرح التالى بإذن الله سوف نركز على محتوى الصفحه وكيفيه اضافه المزيد من النصوص والصور وغيره وذلك عن طريق تاج جسم الصفحه <body> ..
والسلام عليكم ورحمه الله وبركاته .
ليست هناك تعليقات:
إرسال تعليق