السلام عليكم ورحمة الله وبركاته
قائمة المطلحات الوارد ذكرها هنا :
tag : وسم
element : عنصر
attribute : خاصية
value : قيمة
سأذكر المصطلح بالعربية وتستطيع الرجوع لهذه القائمة لتعلم ما تدل عليه هذه الترجمة
المتصفح لا يرى أكواد PHP ولكنه يرى أكواد
html وأكواد التنسيق CSS وأكواد لغة javaScript -يمكنك البدء في تعلمها بعد إنهاء هذه الدورة-
هذه
اللغة بسيطة التركيب جداً وعند فهمك لكيفية تركيبها إذاً أنت تخطيت أهم جزء في تعلم لغة
html والباقي تستطيع التعرف عليه عند الحاجة إليه .
ماهي مكونات هذه
اللغة ؟
- ببساطة تتكون هذه
اللغة من الثلاث علامات الأساسية التالية < و > و / ومجموعة وسوم
- الصورة العامة لأي وسم تأخذ الصورة التالية :
<tag>
</tag>
ويسمى الوسم <tag> وسم الفتح والوسم </tag> وسم الإغلاق
الآن نريد إنشاء صفحة ويب
ما عليك إلا أن تفتح أي محرر نصوص وتكتب التالي :
<html>
</html>
ويُعرف الوسم السابق
html بوسم تعريف وثيقة
html وعند فتح أي وسم يجب إغلاقه وهذا الوسم يحتوي بداخله جميع وسوم
html الأخرى
ملاحظة : هناك وسوم لا تحتاج لوسم إغلاق لأنها لايمكن تضمين وسوم أخرى داخلها كوسم السطر الجديد <br>
وبعد هذا نحفظ الصفحة بإمتداد
html بهذا أنت أنشأت صفحة ويب فارغة , تستطيع أن تفتحها بإستخدام أي من المتصفحات لديك
ملاحظة: لايهم الكتابة بالأحرف الإنجليزية الكبيرة أو الصغيرة في لغة HTML
كل وسم يمكن أن تكون له بعض الخصائص تختلف من وسم لأخر على سبيل المثال الوسم
html له خاصية الـ dir وهي إتجاه الصفحة وتأخذ قيمتين إما "rtl" أي من اليمين إلى اليسار right to left أو
القيمة "ltr" أي من اليسار إلى اليمين left to right
ملاحظة : توضع القيمة بين علامتي إقتباس زوجية أو فردية
إذا أردنا كتابة صفحة ويب باللغة العربية فالأفضل أن يكون إتجاه الصفحة من اليمين إلى اليسار هكذا :
<html dir="rtl">
</html>
والآن نريد أن نكتب شيئ في الصفحة , وسم جسم الصفحة هو الوسم body فالآمن سنقوم بتضمين وسم الـ body داخل وسم الـ
html وداخل وسم الـ body نكتب ما نريد هكذا :
<html dir="rtl">
<body>
بسم الله الرحمن الرحيم
</body>
</html>
ملاحظة : يتم تجاهل أي عدد من الأسطر أو المسافات الفارغة إلى مسافة فارغة واحدة
ملاحظة : من الأفضل تنسيق الكود الذي تكتبه ويفضل إستخدام ذر الـtab من لوحة المفاتيح لإزاحة محتويات الوسم للداخل لتوضيح أن هذه البيانات ضمن هذا الوسم -يمكنك تظليل النطقة المراد إزاحتها وتضعط على مفتاح الـ tab -
الآن إحفظ الملف وجرب هذا الكود على المتصفح ماذا ترى ؟
إذا كنت من مستخدمي متصفح IE ربما سيظهر النص عادي معك , ولكن مع باقي المتصفحات سيظهر النص بشكل غريب , نسأل ما هذه المشكلة ؟
ونجيبك أن هذه المشكلة من ترميز
اللغة ولكي تظهر
اللغة العربية بشكل جيد يجب عليك إستخدام إستخدام ترميز داعم للغة العربية كـ utf-8
فهناك وسم في لغة
html يسمى وسم الرأس head وهو داخل وسم
html وأعلى وسم الـ body ويتم تضمين محتويات ومعلومات الصفحة داخله
ما نحتاجه من هذا الوسم حالياً هو وسم تعريف ترميز الوثيقة ويدعى meta وهو وسم لا يحتاج وسم إغلاق
وعلى هذا يصبح الكود كالتالي :
<html dir="rtl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
بسم الله الرحمن الرحيم
</body>
</html>
ملاحظة: يجب أيضاً أن يتم حفظ الملف بترميز utf-8 إذا كنت من مستخدمي Linux فالإفتراضي هو الحفظ بهذا الترميز ولكن مستخدمي Windwos يحتاجون لحفظ الملف بترميز utf-8
ملاحظة: لحفظ الملف بهذا الترميز على windows من خلال notepad العادي إختر Save As ثم إختر من تبويب Encoding الترميز UTF-8 ولكن البيانات العربية في هذا الملف ستتلف ويجب عليك إعادة كتابتها من جديد ولتلاشي هذا إن كان لديك ملفات تخشى على ضياع بياناتها يرجى إستخدام برنامج notepad++ لعملية تحويل الترميز .
ولكن هناك تعديلات جديدة ووسوم جديدة تم إضافتها وتحسينات كثيرة تم إضافتها للغة الهيكلة
html في نسختها الجديدة HTML5 فلتعريف وثيقة من نوع HTML5 يجب إضافة الكود التالي في بداية الوثيقة :
<!DOCTYPE HTML>
- وضمن هذه التعديلات تم تعديل وسم الـ meta وأصبح أقصر فقط عليك إعطاء قيمة الترميز التي تريد للخاصية charset وعلى هذا يصبح الكود التالي بهذا الشكل :
<!doctype html>
<html dir="rtl">
<head>
<meta charset="utf-8">
</head>
<body>
بسم الله الرحمن الرحيم
</body>
</html>
وهناك وسم أخر ضمن وسوم الـ head وهو وسم title وهو اسم الصفحة وهو ما تستخدمه للتفريق بين الصفحات إذا كنت تفتح أكثر من تبويب داخل المتصفح , وإن تركت هذا الوسم سيظهر مسار الملف به ويصبح الكود كالتالي :
<!doctype html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<title>
صفحة للتجربة
</title>
</head>
<body>
بسم الله الرحمن الرحيم
</body>
</html>
والآن نريد أن نضيف بعض النصوص والتنسيقات لجسم الصفحة إذاً علينا الإنتقال لداخل وسم الـ body
هناك للعنواين 6 وسوم من h1 إلى h6 يختلفوا عن بعض في حجم الخط
ولدينا وسم الفقرة وهو p ووسم الخط font وكل وسم له خصائصة الخاصة -وهناك خصائص مشتركة طبعاً- ولكل خاصية قيم
بعد تعلمنا لغة التنسيق CSS لن نحتاج لهذه والوسوم
لتطبيق ما سبق من وسوم نفذ وشاهد التغييرات