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