| |||||||
| المدوّنات | البحث | مشاركات اليوم | اجعل كافة المشاركات مقروءة |
 |
| | LinkBack | أدوات الموضوع |
| |||||
| سلسلة دروس ال HTML, [الدرس الثاني - كتابة أول كود] ---------------------- إستكمالاً لسلسلة الدروس التعليمية سنبدأ الأن في الدرس رقم 2 كتابة أول كود قبل أن نبدأ في التعرف على الرموز الأساسية.. في اللغة يجب ان نعرف و نفهم هذه النقاط الأساسية: [*]تتكون اللغة من مجموعة من الرموز و كل رمز Tag محاط بالعلامتين < > مثال: <html> --------------- [*]بعض الرموز Tags أو قل معظمها تحتاج الى رموز لإيقافها عن العمل... فمثلا: لو أنك تريد أن تكتب كلمة معينه بوسط الصفحة فأنك تستخدم الكود ... كود: <center>بسم الله الرحمن الرحيم</center> أستخدمناها لإيقاف الكود <center> عن عمله و إلا ستجد أي كتابة بعد البسملة موجودة في الوسط أيضا. ------------------------ [*]بعض الرموز تحتاج الى وصفات تفصيلية عن الرمز هذا الوصفات التفصيلية أسميها أنا مقابض Arguments او يسميها البعض السمات.. تعالوا نأخذ مثال: لو أنك أردت أن تدرج رابط Hyperlink الى صفحتك... فأنك ستستخدم الكود .. كود: <a href=http://www.hemanet.net target=_blank>هيما نت</a> ان الرمز <a> -- وحده لا يكفي لصنع الرابط و لكننا نحتاج لأن نصف الصفحة الهدف و هي التي سيذهب لها الزائر عند الضغط على الرابط و كذلك نحتاج لأن نصف هل الصفحة الهدف ستفتح في نفس النافذة أم أنها ستفتح في نافذه جديدة للمتصفح و كان هذا سبب أننا وضعنا المقبض أو السمة target=_blank و التي ستجعل الصفحة الهدف تفتح في نافذة جديدة للمتصفح ------------------ [*]تنقسم أي صفحة ويب من خلال كود ال HTML الخاص بها الى منطقتين هامتين جدا .... و هما منطقة الرأس head و الجسم body ..... و بأختصار منطقة الرأس : مخصصه لغرض وضع أكواد الميتا و أكواد الجافا سكريبت و كود عنوان الصفحة و سوف نتعرف على كل هذه الأكواد في طريقنا بأذن الله اما منطقة الجسم : فهي مخصصة لكتابة محتويات الصفحة. من نصوص و صور و جداول....إلخ التفاصيل ستعرفونها لاحقاً ----------------------------------------------------------------------- و الأن سنبدأ في التعرف على أول مجموعة رموز... .:: الرمز <html> ::. كود: <html> و كما وصفه أحد المؤلفين - بمثابة الصوت الذي ينادي على المتصفح و يقول له "مرحبا...انا ملف html فتفضل بترجمتي" و هذا الرمز يحتاج الى الرمز المقابل له لإغلاقه و هو كما عرفنا بإضافة / الى الرمز فيصبح <html/> و يكتب بنهاية الملف كأخر كود في الصفحة ... --هذا الكود يضاف له السمة أو المقبض الشهير dir=rtl و هو المسئول عن تغيير إتجاه الكتابة بالصفحة فيجعلها من اليمين لليسار بدلا من الكتابة من اليسار لليمين .. *هيما [glow=red]لاحظ[/glow] هذا المقبض لا يدعمه سوى الإنترنت إكسبلورر أي أنك إذا أستعرضت صفحة إنترنت في أي متصفح أخر (مثل:النيتسكيب او أوبرا) ستجد أن إتجاه الصفحة من اليسار لليمين حتى ولو كانت السمة مكتوبة مع الرمز <html> ----------------------------------------------------------------------- .:: الرمز <head>::. كود: <head> و هو بداية منطقة الرأس.... و كما أوضحت سابقا أن كود الHTML يقسم الى قسمين هما الرأس head و الجسم body و عليه فأن الكود <head> هوالمخصص لفتح الرأس  و الكود <head/> مخصص لغلق منطقة الرأس و سنتعرف على الأكواد التي توضع بمنطقة الرأس تفصيليا في الدروس القادمة بأذن الله ... و لكن دعونا الأن نتعرف على واحد من أهم هذه الأكواد و هو الكود <title> و هو الكود المخصص لتحديد عنوان الصفحة و هذا العنوان سيظهر في شريط العنوان في الأعلى فمثلا عنوان هذه الصفحة (منتديات هيما نت -> سلسلة دروس ال html) و أهمية هذا العنوان في أنه يسهل على الزائر معرفة أين هو لأنه يحتوي على - أو من المفترض أن يحتوي على - إسم الموقع و إسم الصفحة التي بها الزائر و هذا الكود يغلق بالكود <title/> كما تعودنا ----------------------------------------------------------------------- .:: الرمز <body> ::. كود: <body bgcolor="#F5DA7A" text="#000080" link="#00FFFF" vlink="#000000"> و هذا الكود هو بداية لمنطقة الجسم و منطقة الجسم هي المنطقى التي تضم بداخلها جميع الأكواد الخاصة بالنصوص و الصور و الجداول......أي بأختصار المحتوي الذي يراه الزائر بالصفحة.. و كالعادة يغلق هذا الكود بالرمز <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' تدريب سريع ----------------- أنشىء صفحة بعنوان "صفحتي الأولى" و ذات خلفية سوداء و أكتب بوسطها "سبحان الله و بحمده..سبحان الله العظيم" باللون الأبيض انتهى الدرس و بأنتظار الأسئلة والف شكر للأستاذ ابراهيم عبد الغني ( هيما ) على هذا الشرح وياليت اننا نتساعد ونفيد ونستفيد تحياتي للجميع اخوكم الوافي
__________________ شبكة الوافي التطويرية في خدمتكم دائماً لتطوير منتدياتكم ومواقعكم .. http://www.vbulletin4arab.com | |||||
|
| |||||
|
الكمبيو نت تسلم يالغالي بس وين التطبيق مع تحيات اخوك الوافي
__________________ شبكة الوافي التطويرية في خدمتكم دائماً لتطوير منتدياتكم ومواقعكم .. http://www.vbulletin4arab.com | |||||
|
| |||||
| بسم الله الرحمن الرحيم
اشكرك أخى alwafi على نقل الموضوع و اشكرك أكثر على امانتك في ذكر المصدر و بأذن الله سأصدر الدرس الثالث و الرابع قريبا و اسف جدا لأنى اخرتها عليكم و على أخوانى بمنتدى زاجل و منتدى هيما نت و اى اسئلة يا اخوانى انا حاضر لها بأذن الله و تقبلوا تحياتى | |||||
|
| |||||
|
اخى  tba جرب هذا الكود <table bporder="5"> <tr> <td colspan=2">test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> <td colspan="2"> </tr> </table>
__________________ مدونتى: مواطن مصرى | |||||
|
| |||||
| اقتباس:
مرحبا بك مليون يالغالي وولف شكر لك وتحياتي لك اخوك الوافي
__________________ شبكة الوافي التطويرية في خدمتكم دائماً لتطوير منتدياتكم ومواقعكم .. http://www.vbulletin4arab.com | |||||
|
| |||||
|
fawwaz msu يا هلا وغلا فيكم يا اخوواني والف شكر لكم للزياره والشكر موصول للأخ هيما تحياتي لكم جميع الوافي
__________________ شبكة الوافي التطويرية في خدمتكم دائماً لتطوير منتدياتكم ومواقعكم .. http://www.vbulletin4arab.com | |||||
|
| |||||
|
اخوي هيما الف شكر لك حظورك وان شاء الله انك انت الاستاذ ونحن الطلبه في هذا المجال وانا شاكر لك وان شاء الله ان الوافي يبقى دئماً وابداً وافي للجميع
__________________ شبكة الوافي التطويرية في خدمتكم دائماً لتطوير منتدياتكم ومواقعكم .. http://www.vbulletin4arab.com | |||||
|
|
| أدوات الموضوع | |
| |
![سلسلة دروس ال HTML, [الدرس الثاني - كتابة أول كود]](http://www.swalif.net/softs/iconimages/swalif54/html_rtl.gif)
