تعرفنا في الدرس الأول من دروس HTML على الفكرة العامة لهذه اللغة البسيطة والمهمة لكل من يرغب بتعلم تصميم مواقع الإنترنت ، وفي هذا هذا الدرس إن شاء الله سنتعرف على الهيكل الأساسي لأي ملف HTML .
الآن سنعرض شكل ملف HTML ثم نقوم بشرحه بالتفصيل :
[وهنا مثال حي على ناتج هذا الكود]
لابد أن نعرف بأن لغة HTML مكونة من وسوم ( جمع وسم ) Tags ، ولكل وسم Tag بداية و نهاية :
< بداية الوسم >
</ نهاية الوسم >
نلاحظ أن الفرق بين بداية الوسم ونهايته هو وضع العلامة / في نهاية الوسم فقط .
الآن سنبدأ بشرح المثال السابق الموضح بالصورة السابقة بالتفصيل :
<html> </html>
- وسم HTML ، و نستخدم هذا الوسم للإعلان عن بداية ونهاية ملف HTML ، ومابين هذين الوسمين نضع بقية الوسوم الخاصة بصفحتنا كما هو موضح بالمثال السابق .
<head> </head>
- وسم الرأس أو Head ، وهو لوضع معلومات تخص المتصفح ، مثل اللغة و اسم الصفحة و طريقة عرض الصفحة ، وكل ما نضعه بداخله لايظهر في جسم الصفحة للزائر ، وفي مثالنا السابق وضعنا اسم الصفحة فقط .
<title> مدونة وائل </title>
- وسم العنوان أو Title ، ولابد ان نضعه داخل وسم Head كما هو موضح بالمثال السابق ، وبين وسمي البداية والنهاية نضع عنوان الصفحة ، وهو العنوان الذي يظهر في أعلى المتصفح .
<body> محتوى الصفحة </body>
- وسم الجسم أو Body ، وهو لوضع محتويات الصفحة من نصوص وصور وغيرها ، وكل ما يوضع في هذا الجزء يظهر للزائر .
<p> مرحبا بكم </p>
- وسم فقرة جديدة ، وهو من الوسوم التي توضع داخل وسم الجسم Body ، و هو لوضع نص معين يظهر للزائر في الصفحة.
في المثال الحي السابق يمكن إلقاء نظره على بعض الأمور التي يمكن ان ندرجها ضمن القسم الخاص بالهيد ، إضغط هنا ، ثم إضغط بالزر الأيمن للماوس ثم اختر من القائمة ( عرض المصدر أو View Page Source ) ، الآن سوف ترى الكود الخاص بالصفحة بالكامل ، ستلاحظ أن هناك أمور إضافية غير موجودة في مثالنا السابق ، وسنتطرق لها في دروسنا القادمة إن شاء الله .
وبذلك نكون قد أخذنا فكرة عامة حول طريقة بناء مستندات HTML …
ملخص الدرس :
وائل الغامدي
11:58 م في يوليو 17th, 2008
أتشرف أكون أول من يعلق على شرحك الأكثر من رائع ..
كم تمنيت إيجاد هذه اللغة والتعمق فيها ، لكن للأسف المحيط ومجال دراستي هما السببان اللذان ابعداني عنه .. ولم اجد من يمسك بيدي حتى للدخول في بداية هذا العلم …
سعدت بقراءتي لدرسك .. وتشوقت لقراءة ما إذا كان بعده دروس ..
وأتمنى آتيك في يوم وأشكرك جزيل الشكر لأنك أنت من قادني وادخلني باب هذا العالم حتى لو تركتني داخله متجولاً .. لايهمني مادام كنت فعلت الخطوة الأولى وادخلتني مع عتبة هذا الباب هذا شئ كبير بالنسبه لي ،، رغم اني لا أستغني عنك بعد دخولي هذا المجال …
شاكر ومقدر … أخوكـ..::/ الأسـيـر
12:43 ص في يناير 8th, 2009
أنا نفس الحكاية
وأشكرك على جهدك
وعلى جودك بالعلم
8:09 م في سبتمبر 5th, 2009
حقاً شكـراً لك على الشرح الممـيز ..
جاري الاطلاع على الدرس التالي ..
تقبل تحياتي ..
6:48 م في سبتمبر 12th, 2009
…
مميز , أول واحد افهم عليه ها اللغة انت
تشكر , وانا متابع لك اخووي
11:57 ص في يناير 7th, 2010
تسلم يا وائل وبارك الله فيك .. وانا متابع شرحك .
وآصل .