دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (مقدمة) #2
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
ما هي لغة HTML ؟
https://dl-web.dropbox.com/get/WebDe...aNPdqsy4xqO9Gg
HTML هي اللغة الأم لمتصفحك ، وهي اختصار لعبارة "HyperText Mark-up Language" .
فعند تصفحك لأي موقع وحين الضغط بزر الماوس الأيمن في أي منطقة فارغة بالصفحة واخترت View page source (في متصفح جوجل كروم كما اتفقنا على استخدامه)
https://dl-web.dropbox.com/get/WebDe...DfZrzp_x_taFEA
أو (Ctrl+U)
ستجد صفحة مكونة من عدة أكواد أو وسوم Tags تبدأ بوسم بداية وهو
ووسم نهاية
وبينهما عدة وسوم أخرى مجموع هذه الوسوم يكون نتيجته ما تراه من صفحة إنترنت منسقة ومرتبة بها صور ونصوص وخانات إدخال واختيار وروابط وغير ذلك.
كل الوسوم لها نفس الشكل وتعمل بنفس الطريقة تقريبًا ، فهي تبدأ بعلامة أصغر من
وتنتهي بعلامة أكبر من
ولكتابة هذين الوسمين يجب أن تضغط على زر Shift من لوحة المفاتيح مع هذين الزرين (مع مراعاة أن تكون لغة الكتابة هي اللغة الإنجليزية)
https://dl-web.dropbox.com/get/WebDe...XtuXZnZOu7BGyQ
ولكن وسم النهاية يجب أن يكون محتويا على علامة الشرطة المائلة
https://dl-web.dropbox.com/get/WebDe...Yzw91iwro-S_RQ
ولكن لأن لكل قاعدة استثناء ، فالاستثناء في HTML هو وجود عناصر تعتبر هي وسم البداية ووسم الإغلاق في نفس الوقت ، وهي تسمى العناصر الفارغة لأنها غير مرتبطة بنص معين لكنها عناصر مستقلة تمامًا ، ومن أمثلة ذلك وسم كسر النص وعمل سطر جديد
فهو وسم واحد ولا يحتاج إلى وسم آخر ليكون بداية أو نهاية.
مثال:
افتح برنامج ++Notepad الذي قمت بتحميله وتنصيبه مسبقا ، واكتب بداخله هذا الكود (اكتبه يدويا بنفسك ولا تنسخه ولاحظ مكان الشرطة المائلة / في وسم السطر الجديد br ومكانها في وسم إغلاق html)
كود:
<html>
This is the first line
<br/>
This is the second line
</html>
ثم اختر من قائمة البرنامج File ثم Save أو (Ctrl+S) واختر أي اسم وليكن test ثم أتبع هذا الاسم بنقطة (.) ومكانها كما هو موضح بالصورة التالية (تأكد دائما أن لغة الكتابة هي اللغة الإنجليزية)
https://dl-web.dropbox.com/get/WebDe...Rkp4Bunw3CIUAg
ثم اكتب html بعد النقطة ليكون اسم الملف بالكامل test.html ثم اختر مكان لحفظ الملف وليكن سطح المكتب ثم اضغط Enter.
افتح الملف الذي سيكون ملف ويب وانظر إلى النتيجة ، ستجد أن هناك سطران وهما :
كود:
This is the first line
This is the second line
ولكن لا توجد أي أكواد ظاهرة من التي تم كتابتها لأن هذه الأكواد أو الوسوم تؤدي وظيفتها في تنسيق النصوص في الخلفية بدون الظهور ولكنك ترى نتيجتها والتي تمثلت في مثالنا السابق في كتابة سطرين مستقلين عن بعضهما بسبب وسم
أما وسمي
و
فهما وسمي البداية والنهاية للملف نفسه.
جرّب الآن أن تحذف وسم
واحفظ الملف (Ctrl+S) ثم قم بعمل تحديث Refresh لصفحة الويب عن طريق زر (F5) بالكيبورد ولاحظ النتيجة ، ستجد أن السطران ملتصقان ببعضهما وذلك لعدم وجود وسم عمل سطر جديد حتى وإن كتبت السطرين كل واحد منهما في سطر مستقل في برنامج Notepad عن طريق زر Enter ، فلغة html لا تعترف إلا بالوسوم.
هل تكتب الوسوم بأحرف كبيرة Capital أم صغيرة Small ؟
معظم المتصفحات لن تهتم إذا كتبت الوسوم بأحرف كبيرة أو صغيرة أو خليط بين الاثنين ، كلها ستعطي نفس النتائج ، مع ذلك فالأسلوب الصحيح والاحترافي والمطابق للمعايير القياسية العالمية هو كتابة الوسوم بالأحرف الصغيرة ، لذلك عليك أن تعتاد على كتابة الوسوم بالأحرف الصغيرة فقط.
الآن بعد أن قمت بإنشاء أول صفحة ويب خاصة بك ، أدعوك الآن إلى أن تجرب الوسوم التالية وتكتشف وظائفها بنفسك !