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

http://www.traidnt.net/vb/images/img...14/04/3045.jpg

ما هي لغة HTML ؟

http://www.traidnt.net/vb/images/img...14/04/3046.jpg

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

http://www.traidnt.net/vb/images/img...14/04/3047.jpg

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

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

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

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

http://www.traidnt.net/vb/images/img...14/04/3048.jpg

ولكن وسم النهاية يجب أن يكون محتويا على علامة الشرطة المائلة
رمز Code:
/
http://www.traidnt.net/vb/images/img...14/04/3049.jpg

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

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

This is the first line

This is the second line

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

http://www.traidnt.net/vb/images/img...14/04/3050.jpg

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

http://www.traidnt.net/vb/images/img...14/04/3051.jpg

ولكن لا توجد أي أكواد من التي تم كتابتها لأن هذه الأكواد أو الوسوم تؤدي وظيفتها في تنسيق النصوص في الخلفية بدون الظهور ولكنك تشعر بوظيفتها والتي تمثلت في مثالنا السابق في كتابة سطرين مستقلين عن بعضهما بسبب وسم
رمز 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/