نلاحظ أن كل منها يتألف من زوج من الوسوم أحدهما وسم البداية والآخر وسم النهاية ويتميز وسم النهاية بوجود الرمز /
ساقوم باذن الله بشرح كل وسم على حدة
تتكون أكواد لغة HTML من قسم واحد رئيسي وهو : <html></html> ويتكون هذا القسم من فرعين أو وسمين وهما :
1 - الوسم <head> </head> ويكتب بداخله عنوان الصفحه ويكون الوسم الخاص به كالتالي <title>هنا يكتب عنوان الصفحه </title>
2 - الوسم <body> </body> والذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور والجداول وباقي محتويات الصفحة.
دعونا الآن نرا مثالأ على هذه الأوسام
مثال عملى
قم بفتح ملف txt واكتب ما يلى:
الكود:
<html> <head> <title>منتديات سنيبر دوت كوم</title> </head> <body> مرحباً بك عزيزي الزائر .. نتمنى لك قضاء أسعد الأوقات في منتديات سنيبر دوت كوم </body> </html>
والآن قم بحفظ ما كتبته في ملف وبأي اسم تختاره ولا تنسى أن الامتداد المستخدم في أسماء ملفات HTML هو htm. أو html. مثلاً أنا اخترت الاسم file.html
لكي نشاهد نتيجة ما كتبناه قم بتشغيل متصفح الإنترنت الذي تستخدمه. فإذا كان Internet Explorer فاختر الأمر Open… من قائمة File. ثم حدد المسار الذي يوجد به الملف
سنجدة كما موضح بالصورة
وكدة مبروك عليك لقد قمت بانشاء اول صفحة html
والان بعض الوسوم التى ستساعدنا فى التحكم بمقدار النص المكتوب في كل سطر وكيف يمكن تحديد نهاية الفقرة وبداية الفقرة التي تليها:
1. الوسم <BR> لتحديد النهاية للسطر. والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية).
ليصبح الكود بهذا الشكل
الكود:
[color=DarkGreen][color=Black] <html> <head> <title>منتديات سنيبر دوت كوم</title> </head> <body> مرحباً بك <BR>عزيزي الزائر .. <BR>نتمنى لك قضاء أسعد الأوقات في منتديات سنيبر دوت كوم </body> </html>[/color][/color]
2. الوسم <P> يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات.
ليصبح الكود بهذا الشكل
الكود:
<html> <head> <title>منتديات سنيبر دوت كوم</title> </head> <body> مرحباً بك <P>عزيزي الزائر .. <P>نتمنى لك قضاء أسعد الأوقات في منتديات سنيبر دوت كوم </body> </html>
3. الوسم يقوم بعمل الفراغات ومنة نستطيع التحكم فى عددها (والأحرف هي اختصار للعبارة Non Breakable Space). وإذا أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب.
ليصبح الكود بهذا الشكل
الكود:
<html> <head> <title>منتديات سنيبر دوت كوم</title> </head> <body>فى منتديات سنيبر دوت كوم نتمنى لك قضاء أسعد الأوقات
عزيزى الزائر مرحبا بك </body> </html>
والى هنا ينتهى الدرس الاول فى دورة تعليم لغة html - بعنوان اساسيات انشاء صفحة فى دورة تعليم لغة html المقدمة من منتديات سنيبر دوت كوم أملين ان تنتظرو دروس الدورة القادمة التى ستصبحون باذن الله بعدها خبراء فى لغة html
الدرس الاول فى دورة تعليم لغة html - بعنوان اساسيات انشاء صفحة
موضوع: الدرس الاول فى دورة تعليم لغة html - بعنوان اساسيات انشاء صفحة 
الأحد 24 فبراير 2013, 1:34 pm
