2:صفحتك الأولى في ال XHTML

zak الأربعاء فبراير 22, 2012 4:49 am

صفحتك الأولى في ال XHTML

بسم الله الرحمن الرحيم و الحمد لله و الصلاة و السلام على أشرف المرسلين محمد صلى الله عليه و سلم.
أما بعد،
حان وقت العمل التطبيقي، في هذا الجزء سنقوم بالإبتعاد عن الكلام قليلا و سنقوم بإنشاء أول صفحة XHTML في هذا الدرس، و لكن قبل ذلك سأقوم بتوضيح معنى كلمتين سنراهما كثيرا في هذا الدرس و هما كلمتا و سم (Tag) و خاصية (Attribut) و هما أساس لغة ال XHTML، و في أخر هذا الجزء سنتحدت عن التعاليق في لغة ال XHTML.
نبدء على بركة الله.

الوسم و الخاصية (Tag and Attribut).
تعتمد لغة ال XHTML في الأساس على مفهومين هما الوسم و الخاصية. فمثلا إذا أردت أن تكتب في العنوان "مرحبا بك في موقعي" و تضع صورة بجانبها كيف يمكنك فعل ذلك؟ ببساطة الجواب هو بإستعمال وسم. أما إذا أردت أن تكتب العنوان في الوسط فهنا يأتي دور الخاصية.
الوسم (Tag)
بالإضافة إلى النصوص تحتوي صفحات الويب على رموز تدعى بالوسوم (و تسمى بالإنجليزية Tags) و هي تبتدء بالرمز < و تنتهي بالرمز > مثل <Tag>. لا يمكن للزائر رؤية الوسوم.
إذن الوسم هو الذي يبين للمتصغح أن هذا عنوان و هذه فقرة و هذه صورة إلخ.
و هناك نوعان من الوسوم الزوجية و الفردية.
الوسوم الزوجية : و هي الأكثر إستعمالا حيث نكتب و سم البداية ثم النص ثم وسم النهاية بإضافة الرمز /.
مثال :

<title> Welcome Home </title>

الوسم الأول <title> يدل على بداية العنوان و الوسم الثاني </title>يدل على نهاية العنوان، و المتصفح يعلم أن النص الذي يوجد بين هذين الوسمين هو عنوان الصفحة الشيء الذي يجعله يظهره في أعلى الصفحة.
الوسم الفردي : أقل إستعمالا من الزوجي و لكنه مهم و ضروري في بعض الأحيان مثل وسم الصور. و كما يتبين لنا من النص فهو وسم يكتب وحيدا، يكتب الوسم مع إضافة الرمز / في أخره.
مثال :
<img />
الوسم <img /> يساعدنا على وضع صورة في الصفحة. و سنراه في الأجزاء القادمة في الدرس بشكل مفصل إن شاء الله.
خلاصة :
إذا رأيت الوسم <Tag> يدل على أنه زوجي مما يستوجب وجود الوسم </Tag>.
و إذا رأبت الوسم <Tag /> فأعلم أنه فردي.
من ناحية أخرى تنقسم الوسوم إلى قسمين الأولى من نوع ال blocks و الثانية من نوع ال inlines.
مهلا ما هي هذه ال blocks و ال inlines؟.
وسم block : هو وسم يساعد على تقسيم الصفحة إلى أجزاء من أجل تنظيمها مثال الفقرات و العناوين التي سنراها في الجزء القادم من الدرس إن شاء الله، و هو يضع مسافة بينه و بين الوسم الذي يسبقه و الوسم الذي يليه.
وسم inline : هو وسم يوضع داخل وسم ال block مثال الروابط أو الصور أو غيرها...
الخاصية (Attribut)
الخاصيات هي وسيلة تساعدنا على أن نكون أكثر دقة بالنسبة للوسوم، و هي ضرورية جدا، و هي توجد في الوسم الزوجي و الفردي.
نأخذ مثال الصورة، من الجيد أن نقول أن هنا صورة و لكن أي صورة نريد أن نضعها في ذلك المكان؟.
هنا يأتي دور الخاصية.
مثال :

بواسطة الخاصية src تمكنا من تحديد الصورة التي نريد أن نضعها في الصفحة.
بالنسبة للوسوم الزوجية توضع الخاصيات في وسم البداية فقط.
مثال :

<text name="zak" date="12/10/2009">
This text was writing by zak in 12/10/2009.
</text>

هنا حددنا للمتصفح أن هذا النص كتبه حسن يتاريخ 12/10/2009.
ملاحضة : بعض الوسوم و الخاصيات المذكورة أعلاه لا أساس لها من الصحة و سنتعرف على الوسوم و الخاصيات الحقيقية في الأجزاء القادمة من الدرس إن شاء الله.
ما يجب تذكره :
• يوجد نوعان من الوسوم الأولى زوجية و الأخرى فردية.
• أسماء الوسوم و الخاصيات تكتب دائما بحروف صغيرة.
• قيم الخاصيات يمكن كتابتها بحروف كبيرة و صغيرة.
• الخاصيات تكتب دائما في وسم البداية بالنسبة للوسوم الزوجية.
بعد هذه المقدمة الطلالية نبدء التطبيقي لأنني صراحة مللت من الكلام.

الصفحة الأولى
هذا وقت فتح محرر النصوص الخاص بكم و أتمنى أن يكو ن Notepad++.
هذا كود أول صفحة سوف نقوم بإنشائها.
كود:XHTML

<!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" xml:lang="en" >
<head>
<title>Welcome Into My Website !</title>
</head>
<body>

</body>
</html>

شاهد المثال
قم بنسخ الكود أعلاه في محرر النصوص الخاص بك تم سجله بامتداد .html أو .htm
مثال كيفية تسجيل صفحة XHTML في ال Notepad++ :
1 – اختر من القائمة Langauge كلمة HTML لكي يقوم المحرر بتلوين الكود بشكل جيد.
2 – اختر من القائمة File عبارة Save as أو Enregistrer sous.
ستضهر أمامك الصورة التالية :

2:صفحتك الأولى في ال XHTML 49613702

صورة لعملية تسجيل صفحة بواسصة Notepad++

3 – ضع إسم لصفحتك كما هو مبين في الصورة (في حالتي سميت الصفحة first_page.html).
4 – ثم إضغط Save أو Enregistrer حسب لغة البرنامج.
ملاحظة : قم بوضع الملفات التي ستقوم بإنشائها في مجلد واحد لتسهل عليك عملية إيجادها في المستقبل.
إذهب إلى المجلد الذي قمت بتسجيل الصفحة عليه ستجد الملف على هذا الشكل.

[[IMG
https://2img.net/r/ihimizer/img713/4996/41072641.png[/IMG]
صورة للملف

ملاحظة : رمز MF المتواجد في أيقونة الملف قد يختلق حسب المتصفح الذي تستعمله فمثلا إذا كنت تستعمل IE فستضهر e رزقاء بدلا من رمز الثعلب الناري الخاص ب MF.
قم بفتح الملف لترى النتيجة، لحظة تشويق، ماذا ترى؟؟؟.

2:صفحتك الأولى في ال XHTML 36753020

]
صورة لأول صفحة ستقوم بإنشائها

لكن توقف، الصفحة بيضاء و لا يوجد بها شيء أهذا هو ما تعلمناه لحد الأن؟ لا شيء.
لا تقلقوا فنحن مازلنا في البداية و كذلك الأمر ليس بهذا السوء فالصفحة أظهرت العنوان الذي قمنا بكتابته (أجل، أجل في أعلى الصفحة يسارا).
المهم يمكنك إعادة فتح الصفحة بال Notepad++ في أي وقت تريد تعديل كود الصفحة فيه كما هو مبين في الصورة أسفله :

2:صفحتك الأولى في ال XHTML 30741220

صورة لكيفية إعادة فتح الصفحة ب Notepad++

شرح للصفحة :
أكيد أن كل الأنظار تتجه إلي الآن، تنتظر شرحا لهذه الخزعبلات الموجودة في كود الصفحة. و أنا لن أتهرب و سأقوم بشرحها سطرا بسطر إن شاء الله.
سأقوم بإستعمال الكود مرة ثانية ليبقى ظاهرا أمام أعيننا.
كود:XHTML

<!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" xml:lang="en" >
<head>
<title>Welcome Into My Website !</title>
</head>
<body>

</body>
</html>

شاهد المثال
1 – السطر الأول :

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

السطر الأول يشمل الوسم DOCTYPE و هو وسم خاص يبين للمتصفح أن الصفحة مكتوبة بلغة ال XHTML ذات النسخة 1.0.
بالنسبة لنا لن نهتم بها كثيرا فهي لا تتغير فما عليكم إلا أن تقوموا بنسخها في صفحاتكم كلما إحتجتم إليها.
2 – السطر الثاني :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

يأتي بعد الوسم DOCTYPE الوسم المشهور <html> و هو الوسم الرئيسي الذي يضم بداخله كل محتوى الصفحة (باستثناء DOCTYPE طبعا) و نغلقه كما قلنا سابقا بكتابة نفس الوسم بإضافة الرمز / أي </html>. و يحتوي الوسم <html> على خاصيتين هما :
• xmlns : هذه الخاصية ضرورية، و هي تحدد الرابط الذي سيقوم بمعالجة كود ال XHTML الخاص بالصفحة، و أيضا لا تهتموا بها كثيرا، وإستعملوها كما هي.
• xml:lang : هذه الخاصية تحدد اللغة التي كتبت بها الصفحة فمثلا بالنسبة لي أستعمل الإنجليزية لذا وضعت en و إذا كنت تكتب بالعربية ضع ar و fr بالنسبة للفرنسية و it بالنسبة للإيطالية إلخ...
3 – يأتي بعذ ذلك الوسم <head> و هو يضم بعض المعلومات العامة بالنسبة للصفحة مثل عنوان الصفحة و كاتب الصفحة و غيرها. و كالعادة يتم غلقها بالوسم </head>.
• الوسم <title> يساعدنا على إعطاء عنوان للصفحة و في حالتنا هذه هو "Welcome Into My Website " و يمكنكم وضع العنوان الذي يروق لكم.
4 – أخيرا، بعد إغلاق الوسم <head> نجد الوسم <body>:
بين الوسمين <body> و </body> سنكتب كل محتوى الصفحة من نصوص و صور و قوائم إلخ...بشكل عام سنقضي بين هذين الوسمين 95% من وقتنا.
في الوقت الحالي لم نكتب أي شيء بين هذين الوسمين مما جعل الصفحة لا تظهر شيئا (اللهم عنوان الصفحة).
حسنا بعد الشرح المستفيض لكل الخزعبلات الموجودة أعلاه، أود أن أخبركم أنه ليس من الضروري معرفة معنى كل ما هو مكتوب في الصفحة أعلاه، المهم هو معرفة كيفية استغلال الكود الموجود أعلاه في جميع صفحاتكم المستقبلية.
تنبيه : الصفحة الرئيسة في موقعك يجب أن تحمل إسم index.
التعاليق
قبل إنهاء هذا الجزء أحببت أن أكلمكم قليلا عن وسم خاص جدا يدعى بالتعليق يبدء بالرمز < !—و ينتهي بالرمز -- >.
و التعاليق هي معلومات نكتبها لنا، بحيث تساعدنا على فهم الكود في وقت لاحق إذا مر عليه و قت طويل بالإضافة إلى معلمة الصفحة بتقسيمها إلى أجزاء و التعليق على كل واحد منها و هي لا تظهر لزوار صفحتك.
كود:XHTML

<!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" xml:lang="en" >
<head>
<title>Welcome Into My Website !</title>
</head>
<body>
<!— Remember! In this section we will write all the content of the page -->
</body>
</html>

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