اساسيات لغة html انواع الوسوم و التعليقات و الرموز الخاصة الدرس الاول من سلسلة تعلم برمجة صفحات الويب
أنواع الوسوم في لغة html
كما تحدثنا في درسنا السابق مقدمة الى برمجة صفحات الويب والانترنت ان أي عنصر يتم استخدامه في صفحة html يسمى وسم tag وبطبيعة الحال يوجد نوعين من الوسوم
1- وسم فردي single tag وهذا الوسم لايوجد له اغلاق مثل <br> ويفضل ان تكتب الوسوم الفردية <br/> وذلك من اجل الدلالة بان هذا الوسم فردي وكلاهما صحيحين
2- الوسوم الزوجية paired tags وهذه الوسوم لها وسم فتح ولها وسم اغلاق مثل وسم الفتح <html> وسم الاغلاق </html> ويمكن ان نضع فيه وسوم أخرى ما بين وسم الفتح ووسم الاغلاق
مع الممارسة والمضي قدما سوف تتعلم كيف تستخدم الوسوم الفردية و الزوجية معا
التعليقات في لغة html
التعليق comment عبارة عن وسم خاص يمكنك وضعه في أي مكان في الصفحة والغرض منه هو كتابة ملاحظات تساعدك في التذكر
او من اجل ان يفهم الاخرون اكوادك خاصة ان كان يعمل اكثر من شخص على نفس المشروع
من اجل ان نكتب تعليق نستخدم الوسم <!--التعليق -->
يكتب التعليق مكان كلمة التعليق كالتالي :
<!-- هنا سوف نقوم بكتابة التعليق الخاص بنا يمكن ان يكون التعليق اكثر من سطر وعند الانتهاء من كتابة التعليق نقوم بالاغلاق -->
وسوم الصفحة الأساسية في لغة html
أي صفحة مكتوبة بلغة ال html تتكون من جزئين أساسيين
- قسم الترويسة او الراس
<head>..</head> هذا القسم نضع بداخله وسوم تخص الصفحة ولا تخص المستخدم أي انها لن تظهر للمستخدم - قسم الجسم
<body>..</body>هذا القسم نضع بداخله كل ما نريد للمستخدم ان يراه مثل النصوص والصور و الفيديوهات .... الخ
عند كتابة كود html5 يجب ذكر المعلومات التالية
<!DOCTYPE html> <html> <head> <title> عنوان الصفحة </title> </head> <body > </body> </html>
1.إذا في لغة html 5 فان اول وسم هو
<!DOCTYPE html >
دائما نضعه في اول الملف وذلك من اجل اخبار المتصفح اننا نستخدم الإصدار الخامس من لغة html وهو اختياري في الصفحات الصغيرة والمبتدئة ولكن كن مثل المحترفين
2.ملف HTML دائما يبدأ بالوسم <html> وينتهي بالوسم </html> لا تنسى ذلك نضع وسم الفتح بعد الوسم<!DOCTYPE html > و وسم الاغلاق اخر الصفحة
3. الوسم <head> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة مثل العنوان الظاهر على
شريط عنوان الصفحة و هذا العنوان يكون بين الوسمين <title> < /title>
والوسم </head> يحدد انتهاء المقطع الخاص بتعريف معلومات الصفحة نضع بين هذين الوسمين معلومات عن الصفحة وكل ما يخص الصفحة كما ذكرنا انفاً
4. بعد ذلك يوجد الوسم <body> والذي يتم كتابة نصوص صفحة الويب ضمنه بالإضافة الى ادراج الصور والوسائط المتعددة والجداول والقوائم وغير ذلك من المحتوى وهذا أيضا يجب ان يحتوي على وسم اغلاق </body> ويكون قبل االوسم </html> و نضع داخل هذين الوسمين كل ما نريد ان نعرضه للمستخدم
هدفنا الان هو كيف تكتب كود الصفحة بشكل صحيح لذلك سوف تتعلم عن كل ما يمكنك اضافته من وسوم بالتفصيل لاحقا
ماهي الوسوم التي يمكنني ان اضعها في الوسم head؟
عند تصفحك للإنترنت لابد انك لاحظت انه يوجد عنوان للصفحة في تبويبة الراس
مثل :
عند كتابتك لصفحة بلغة html دائما ضع عنوان مناسب لصفحتك وذلك من اجل ان يعرف المستخدم ماهي الصفحة المفتوحة
يمكنك وضع عنوان للصفحة او للملف نضعه داخل الوسم title في قسم الراس
أيضا يوجد دائما ايقونة بجانب العنوان عند فتحنا لصفحة على الانترنت مثل ماهو موضح في الصورة فوق عند الرقم 2
يمكنك أيضا وضع هذه الايقونة عن طريق الوسم <link> وان تضعه في القسم head
عند استخدام الوسم <link> نقوم باعطاء قيم للسمات التالية
- خاصية العلاقة Rel
- خاصية الرابط او المسار href
- خاصية نوع الملف إذا كان صوره او ايقونة Type وهي ليست ضرورية يمكن تجاهلها
قمنا بوضع السمة rel ومحتواها هو shortcut ثم مسافة icon وتعني هذه الكلمات انها علاقة طريقة مختصره لرمز او لأيقونة.
استخدمنا href لجلب الصوره او الأيقونه التي ستظهر بجانب عنوان الموقع ويجب ان يكون امتداد الصورة .ico
ثم استخدمنا الخاصية type التي تحتوي على هذا النوع image/x-icon وتحديد هذه الخاصية اختياري وليس اجباري
كتابتك للوسوم بأحرف صغيرة او كبيره لا يسبب أي مشكلة وذلك اننا كما ذكرنا في الدرس السابق ان لغة html غير حساسة لحالة الاحرف
الفراغات او المسافات البيضاء و الاسطر (الرموز الخاصة)
عند عرض نص بواسطة المتصفح يقوم المتصفح بإزالة أي مسافات فارغة ( Extra White Spaces ) يجد أنها بلا داعي على النحو التالي:
- إذا وجد أكثر من مسافة بين الكلمات يبقي مسافة واحدة فقط.
- إذا وجد أسطر فارغة, سيقوم بإزالتها عند عرض المحتوى في الصفحة.
- إذا وجد النص موضوع على أكثر من سطر عمداً, سيقوم بعرض كل المحتوى على نفس السطر و ينزل على السطر عند الحاجة فقط.
ان المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة او إشارات نهاية الفقرات أي عندما تقوم بالضغط على مفتاح Enter
وهذا لا يعني اذا كان عندك فقرة مكونة من عشرة اسطر فان المستعرض سيعرضها بسطر واحد ولكن سيقوم بعمل التفاف للنص بحسب عرض الشاشة مهما كان العرض.
والآن قد تتساءل، إذن كيف يمكن التحكم بمقدار النص المكتوب في كل سطر؟ وكيف يمكن حديد نهاية الفقرة وبداية الفقرة التي تليها؟
سؤال وجيه!!!
والإجابة عليه هي سوف نستخدم الوسم <br> لتحديد النهاية للسطر والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية).
ونعود إلى المثال السابق، قم بتعديل الملف لكي يصبح بالشكل التالي
<!DOCTYPE html> <html> <head> <title> عنوان الصفحة </title> </head> <body > Wow, <BR> I'm writing my <BR> first webpage </body> </html>
أيضا اذا استخدمت اكثر من مسافة باستخدام مسطرة المسافة او باستخدام Tab فان المتصفح لن يأخذ بعين الاعتبار الا مسافة واحدة فقط
اما الفراغات فتعتبر رموز خاصة لذلك لا نستطيع التحكم بها وبعددها إلا استخدام الوسم والرمز هو اختصار للعبارة Non Breakable space
واذا اردت عمل فراغات بين نص و اخر فعليك كتابة هذا الرمز الخاص بعدد الفراغات المطلوبة . كما يجب عليك التقيد بالأحرف الصغيرة هنا .قم بالتجربة
وهناك أيضا الوسم <p> الذي يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات. سوف ناخذه في الدرس القادم
وبمناسبة الحديث عن الرموز فهناك العديد من هذه الرموز والتي يجب ان تكتب بصورة معينة وباستخدام الوسوم وليس مباشرة بصورتها العادية
خذ مثال اشارة اكبر من او اصغر من او علامة التنصيص المزدوجة ، هذه الرموز تستخدم مع الوسوم فهي محجوزة صمن مفردات لغة HTML
ومن الخطاء استخدامها بصورتها الصريحة لئلا يؤدي الى حدوث مشاكل في طريقة عرض الصفحة .
كذلك فإن هناك رموزاً غير موجودة أساساً على لوحة المفاتيح كرمز حقوق الطبع ©
ورمز العلامة المسجلة ® ونحتاج إلى هذه الطريقة (طريقة الوسوم) لكتابتها.
وإليك جدول ببعض هذه الرموز ووسومها المكافئة.
يجب ان تركز إلى أنها تكتب كما هي في الجدول وبدون إشارتي <>
< | < |
> | > |
& | & |
" | " |
­ | |
© | © |
™ | ™ |
¼ | ¼ |
½ | ½ |
¾ | ¾ |
® | ® |
± | ± |
µ | µ |
¶ | ¶ |
· | · |
¢ | ¢ |
£ | £ |
¥ | ¥ |
¿ | ¿ |
° | ° |
¦ | ¦ |
§ | § |
¹ | ¹ |
² | ² |
³ | ³ |
« | « |
» | » |
تعليقات
إرسال تعليق