[ html] دورة تصميم وتطوير مواقع الإنترنت [html] (مقدمة) م#2

محروم.كوم · #1 04-27-2014, 04:40 AM

ما هي لغة HTML ؟

HTML هي اللغة الأم لمتصفحك ، وهي اختصار لعبارة "HyperText Mark-up Language" .
فعند تصفحك لأي موقع وحين الضغط بزر الماوس الأيمن في أي منطقة فارغة بالصفحة واخترت View page source (في متصفح جوجل كروم كما اتفقنا على استخدامه)

أو (Ctrl+U)
ستجد صفحة مكونة من عدة أكواد أو وسوم Tags تبدأ بوسم بداية وهو
رمز Code:

ووسم نهاية
رمز Code:

وبينهما عدة وسوم أخرى مجموع هذه الوسوم يكون نتيجته ما تراه من صفحة إنترنت منسقة ومرتبة بها صور ونصوص وخانات إدخال واختيار وروابط وغير ذلك.
كل الوسوم لها نفس الشكل وتعمل بنفس الطريقة تقريبًا ، فهي تبدأ بعلامة أصغر من
رمز Code:

ولكتابة هذين الوسمين يجب أن تضغط على زر Shift من لوحة المفاتيح مع هذين الزرين (مع مراعاة أن تكون لغة الكتابة هي اللغة الإنجليزية)

ولكن وسم النهاية يجب أن يكون محتويا على علامة الشرطة المائلة
رمز Code:
/

ولكن لأن لكل قاعدة استثناء ، فالاستثناء في HTML هو وجود عناصر تعتبر هي وسم البداية ووسم الإغلاق في نفس الوقت ، وهي تسمى العناصر الفارغة لأنها غير مرتبطة بنص معين لكنها عناصر مستقلة تمامًا ، ومن أمثلة ذلك وسم كسر النص وعمل سطر جديد
رمز Code:

فهو وسم واحد ولا يحتاج إلى وسم آخر ليكون بداية أو نهاية.
مثال:
افتح برنامج ++Notepad الذي قمت بتحميله وتنصيبه مسبقا ، واكتب بداخله هذا الكود (اكتبه يدويا بنفسك ولا تنسخه ولاحظ مكان الشرطة المائلة / في وسم السطر الجديد br ومكانها في وسم إغلاق html)
رمز Code:

This is the first line

This is the second line

ثم اختر من قائمة البرنامج File ثم Save أو (Ctrl+S) واختر أي اسم وليكن test ثم أتبع هذا الاسم بنقطة ( . ) ومكانها كما هو موضح بالصورة التالية (تأكد دائما أن لغة الكتابة هي اللغة الإنجليزية)

ثم اكتب html بعد النقطة ليكون اسم الملف بالكامل test.html ثم اختر مكان لحفظ الملف وليكن سطح المكتب ثم اضغط Enter.
افتح الملف الذي سيكون ملف ويب وانظر إلى النتيجة ، ستجد أن هناك سطران وهما :

ولكن لا توجد أي أكواد من التي تم كتابتها لأن هذه الأكواد أو الوسوم تؤدي وظيفتها في تنسيق النصوص في الخلفية بدون الظهور ولكنك تشعر بوظيفتها والتي تمثلت في مثالنا السابق في كتابة سطرين مستقلين عن بعضهما بسبب وسم
رمز Code:

أما وسمي
رمز Code:

و
رمز Code:

فهما وسمي البداية والنهاية للملف نفسه.
جرّب الآن أن تحذف وسم

رمز Code:

واحفظ الملف (Ctrl+S) ثم قم بعمل تحديث Refresh لصفحة الويب عن طريق زر (F5) بالكيبورد ولاحظ النتيجة ، ستجد أن السطران ملتصقان ببعضهما وذلك لعدم وجود وسم عمل سطر جديد حتى وإن كتبت السطرين كل واحد منهما في سطر مستقل في برنامج Notepad عن طريق زر Enter ، فلغة html لا تعترف إلا بالوسوم.

هل تكتب الوسوم بأحرف كبيرة Capital أم صغيرة Small ؟

معظم المتصفحات لن تهتم إذا كتبت الوسوم بأحرف كبيرة أو صغيرة أو خليط بين الاثنين ، كلها ستعطي نفس النتائج ، مع ذلك فالأسلوب الصحيح والاحترافي والمطابق للمعايير القياسية العالمية هو كتابة الوسوم بالأحرف الصغيرة ، لذلك عليك أن تعتاد على كتابة الوسوم بالأحرف الصغيرة فقط.
الآن بعد أن قمت بإنشاء أول صفحة ويب خاصة بك ، أدعوك الآن إلى أن تجرب الوسوم التالية وتكتشف وظائفها بنفسك !
رمز Code:
Text

رمز Code:
Text
رمز Code:
Text
رمز Code:
Text
رمز Code:
Text

الدرس السابق
http://www.traidnt.net/vb/traidnt2420849/ __DEFINE_LIKE_SHARE__

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
[ html] دورة تصميم وتطوير مواقع الإنترنت [html] (تمهيد) م#1	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	04-25-2014 12:40 PM
[ html] الحلقة 3 من دورة تعلم لغة HTML : كيفية كتابة الأكواد الأساسية	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	03-30-2014 03:10 AM
[ html] الحلقة الثانية من دورة تعلم لغة HTML : ماذا تعني كلمة 'HTML' و ما دورها	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	03-30-2014 02:10 AM
[ html] الحلقة الثانية من دورة تعلم لغة HTML : ماذا تعني كلمة 'HTML' و ما دورها	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	03-30-2014 02:10 AM
[ html] الحلقة الأولى من دورة تعلم لغة HTML : مقدمة عن دورتنا	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	03-30-2014 02:10 AM