بسم الله الرحمن الرحيم
----------------------
قبل أن نبدأ في التعرف على الرموز الأساسية في اللغة يجب ان نعرف و نفهم هذه النقاط الأساسية:
مثال: <html>
فمثلا: لو أنك تريد أن تكتب كلمة معينه بوسط الصفحة فأنك تستخدم الكود
<!--c1-->
| شفرة |
|
<!--ec1--><center>بسم الله الرحمن الرحيم</center><!--c2--> |
لاحظ <center/>
أستخدمناها لإيقاف الكود <center> عن عمله و إلا ستجد أي كتابة بعد البسملة موجودة في الوسط أيضا.
لو أنك أردت أن تدرج رابط Hyperlink الى صفحتك...فأنك ستستخدم الكود
<!--c1-->
| شفرة |
|
<!--ec1--><a href=http://www.hemanet.net target=_blank>هيما نت</a><!--c2--> |
هل لا حظت السمة href=http://www.hemanet.net
ان الرمز <a> وحده لا يكفي لصنع الرابط و لكننا نحتاج لأن نصف الصفحة الهدف و هي التي سيذهب لها الزائر عند الضغط على الرابط و كذلك نحتاج لأن نصف هل الصفحة الهدف ستفتح في نفس النافذة أم أنها ستفتح في نافذه جديدة للمتصفح
و كان هذا سبب أننا وضعنا المقبض أو السمة target=_blank و التي ستجعل الصفحة الهدف تفتح في نافذة جديدة للمتصفح
و هما منطقة الرأس head و الجسم body
و بأختصار منطقة الرأس مخصصه لغرض وضع أكواد الميتا و أكواد الجافا سكريبت و كود عنوان الصفحة و سوف نتعرف على كل هذه الأكواد في طريقنا بأذن الله
اما منطقة الجسم فهي مخصصة لكتابة محتويات الصفحة.من نصوص و صور و جداول....إلخ
التفاصيل ستعرفونها لاحقاً
-----------------------------------------------------------------------
و الأن سنبدأ في التعرف على أول مجموعة رموز...
.:: الرمز <html> ::.
<!--c1-->
| شفرة |
|
<!--ec1--><html><!--c2--> |
هذا الرمز هو أول رمز يجب كتابتة بأي ملف html فهو - و كما وصفه أحد المؤلفين - بمثابة الصوت الذي ينادي على المتصفح و يقول له "مرحبا...انا ملف html فتفضل بترجمتي"
و هذا الرمز يحتاج الى الرمز المقابل له لإغلاقه و هو كما عرفنا بإضافة / الى الرمز فيصبح <html/> و يكتب بنهاية الملف كأخر كود في الصفحة
هذا الكود يضاف له السمة أو المقبض الشهير dir=rtl و هو المسئول عن تغيير إتجاه الكتابة بالصفحة فيجعلها من اليمين لليسار بدلا من الكتابة من اليسار لليمين
*هيما لاحظ
هذا المقبض لا يدعمه سوى الإنترنت إكسبلورر أي أنك إذا أستعرضت صفحة إنترنت في أي متصفح أخر (مثل:النيتسكيب او أوبرا) ستجد أن إتجاه الصفحة من اليسار لليمين حتى ولو كانت السمة مكتوبة مع الرمز <html>
-----------------------------------------------------------------------
.:: الرمز <head>::.
<!--c1-->
| شفرة |
|
<!--ec1--><head><!--c2--> |
هو ثاني كود يكتب مباشرة بعد الكود أو الرمز <html>
و هو بداية منطقة الرأس....
و كما أوضحت سابقا أن كود الHTML يقسم الى قسمين هما الرأس head و الجسم body
و عليه فأن الكود <head> هوالمخصص لفتح الرأس <!--emo&:D-->
<!--endemo--> <!--emo&:D--><!--endemo--> و الكود <head/> مخصص لغلق منطقة الرأس
و سنتعرف على الأكواد التي توضع بمنطقة الرأس تفصيليا في الدروس القادمة بأذن الله
و لكن دعونا الأن نتعرف على واحد من أهم هذه الأكواد و هو الكود <title> و هو الكود المخصص لتحديد عنوان الصفحة و هذا العنوان سيظهر في شريط العنوان في الأعلى
فمثلا عنوان هذه الصفحة (منتديات هيما نت -> سلسلة دروس ال html)
و أهمية هذا العنوان في أنه يسهل على الزائر معرفة أين هو لأنه يحتوي على - أو من المفترض أن يحتوي على - إسم الموقع و إسم الصفحة التي بها الزائر
و هذا الكود يغلق بالكود <title/> كما تعودنا
-----------------------------------------------------------------------
.:: الرمز <body> ::.
<!--c1-->
| شفرة |
|
<!--ec1--><body bgcolor="#F5DA7A" text="#000080" link="#00FFFF" vlink="#000000"><!--c2--> |
هذا هو واحد من أهم أكواد اللغة و كما ترى يحمل بداخله العديد من السمات و المقابض و التي سأشرحها بالتفصيل بأذن الله
و هذا الكود هو بداية لمنطقة الجسم و منطقة الجسم هي المنطقى التي تضم بداخلها جميع الأكواد الخاصة بالنصوص و الصور و الجداول......أي بأختصار المحتوي الذي يراه الزائر بالصفحة
و كالعادة يغلق هذا الكود بالرمز <body/>
-
السمة bgcolor : هي السمة التي من الممكن أن تحدد من خلالها لون خلفية الصفحة
-
السمة background : و هي تقوم بنفس مهمة السمة السابقة و لكنها مخصصة لتحديد صورة للخلفية و ليس لون
-
السمة text : و هي مخصصة لتحديد اللون التلقائي للنصوص في الصفحة طالما لم تحدد أنت لون معين لجملة او لنص معين بالصفحة
-
السمة link: و هي مخصصة لتحديد لون الروابط التلقائي في حالته الطبيعية طالما لم تحدد أن لون معين للرابط
-
السمة vlink: و هو اللون التلقائي للروابط التي سبق و أن نقر عليها الزائر و تستخدم لتسهيل عملية تصفح الموقع...حيث أنها تمكن الزائر من معرفة الصفحات التي زارها و ذلك من خلال تغيير لون الروابط التي نقر عليها
و الأن جاء دور شرح السمات التي تلحق بهذا الرمز:
كانت هذه أهم السمات التي من الممكن أن نضعها مع الرمز <body>
-----------------------------------------------------------------------
و الأن لنجمع كل ما سبق في كود واحد
<!--c1-->
| شفرة |
|
<!--ec1--> |
هذا الكود سينتج الصفحة التالية [أنقر هنا]
------------------------------------------------------------------------
س و ج
س: ماذا سيحدث لو لم أغلق الأكواد؟
ج:هذا يعتمد على الكود فهناك أكواد يجب أن تغلق و أكواد أخرى يمكن تركها دون غلق
و من أمثله هذه الأكواد الكود <img> و هو المخصص لإدراج صور للمصفحة
س: ما هي الرموز العجيبة هذه
<!--c1-->
| شفرة |
|
<!--ec1-->#ffffff,#000000,#e2ecf5<!--c2--> |
ج:انها رموز مخصصة للألوان و كل رمز يعبر عن لون معين و هذه الصفحة ستجد بها معظم الألوان و رموزها - أنقر هنا-
بالطبع لن تستطيع حفظ هذه الرموز في ذاكرتك و إلا فأنت شخص عبقري
قم بتخزين الصفحة السابقة و إستخدمها وقت الحاجة
س:هل انا مطالب بوضع كل السمات التي ذكرتها مع الرموز؟
ج:هذا يعتمد أيضا على الكود...فبعض الأكواد يلزمها سمات لا غنى عنها و البعض الأخر لا يهم ان تكتب لها سمات أصلا
و سنتعرف على الرموز التي يلزمها سمات كل في وقته
س:هل يجب وضع وصف السمة بين علامتى التنصيص " "؟
ج: لا ....ضعها بعلامة التنصيص أو بدون...كما يروق لك
فالسمات التالية كلها صحيحة
<!--c1-->
| شفرة |
|
<!--ec1--> |
-----------------------------------------------------------------------------------------------------------
تدريب سريع
-----------------
أنشىء صفحة بعنوان "صفحتي الأولى" و ذات خلفية سوداء و أكتب بوسطها "سبحان الله و بحمده..سبحان الله العظيم" باللون الأبيض
انتهى الدرس و بأنتظار الأسئلة
ساحة النقاش