إنشاء أول صفحة ويب

الوُسوم

آخر تحيين: 04-01-2015

الصفات الصّفحة الأولى


وسوم html5

الوسوم عبارة عن سمات ، نقوم بواسطتها تحديد مقاطع معيّنة من محتوى صفحتنا ، حتّى نضفي عليها طابعا خاصا . مثلا : (نريد أن نضيف صورة للمحتوى ، أو كتابة مقطع من المحتوى بخط أو لون مغاير ...إلخ.) هي لغة موجّهة للمتصفح ، يقوم بقراءتها ، و تنفيذ أوامرها . لهذا لا تظهر للقاريء .
أسماء الوسوم كلها باللغة الإنجليزية . لا تقلقوا ، فهذه الأسماء سهلة الإستيعاب و التذكّر ، كما أنني سأعطيكم مرادف كل منها بالعربية

يوجد نوعان من الوُسوم :
وُسوم ثنائية . مثلا :<title>...</title> . و هذا النوع سوف تجدونه أينما رحلتم و ارتحلتم
و وُسوم أحادية ، مثلا : <meta />


الوُسوم الثنائية

- و هو النوع الشائع من الوُسوم ، و ستصادفونه كثيراً . نبدأ أوّلاً بكتابة الوسم الأول : <وَسم> ثم نكتب النّص الذي نريد تمييزه و تعديله ، و بعدها نغلقه : </وسم> .
نأخذ على سبيل المثال : <title>...</title>
هذا الوَسم يُمكننا من كتابة عنوان الصفحة ، ولفعل ذلك ، نبدأ بفتح الوَسم ب : <title> ثمّ نضيف هنا العنوان الذي نريده ... ،( بعدها نغلق الوَسم) عند نهاية العنوان <title/>
لنجعل هذا أكثر وضوحاً ، سنأخذ عنواننا السابق على سبيل المثال :

<title> مرحى يا عالم ، هذه أول صفحة ويب أنجزُها </title>

بفتح الوَسم : <title> نكون قد أخبرنا المتصفّح بأن عنواننا سيبدأ هنا .
و بإغلاقه <title/> نخبره أننا اكتفينا من كتابة العنوان .
الفرق بين الفتح <title> و الإغلاق <title/> . هي إشارة " / " . و نضعها قبل كلمة : " title "

الوُسوم الأحادية

هي وُسوم قليلة جدّاً مقارنة مع الوُسوم الثنائية ، نأخذ على سبيل المثال الوسم الذي يعطي المتصفح معلومات عامة عن الصفحة : <meta />
لاحظوا أن الإشارة " / " وضعت هنا بعد كلمة " meta" .مع إصدار HTML5 لم تعد لهذه الإشارة أية أهمية . إذ يمكننا الإستغناء عنها بصفة نهائية .


استعراض لوسوم صفحتنا

بما أنكم تشرّفتم بمعرفة معنى الوسم ، لنستعرض مرّة أخرى وسوم شيفرتنا .

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> أول صفحة على موقعي </title>
  </head>
  <body>
    <p> مرحى يا عالم ، هذه أول صفحة ويب أنجزُها </p>
  </body>
</html>

جميع وسوم الشيفرة ، وسوم ثنائية إلاّ وسم meta فهو أحادي . و و ماذا عن الوسم الأوّل أليس أحاديا ؟ .
الشيفرة <!DOCTYPE html> لا تنتمي لوسوم HTML و دورها إبلاغ المتصفّح بنوع اللغة المستعملة و طريقة قراءته لها .
... نبدأ بالوسم الأول <html> </html> : يخبر المتصفّح عن بداية و نهاية صفحة HTML . و يضم دائما جميع الوسوم
... وسم رأس الصفحة <head> </head> ، يضم جميع المعلومات التي تتعلق بالصفحة كالعنوان و طريقة ترميز النص إلى آخره.
... وسم meta :<meta> وسم أحادي ، يُحّدد كيفية ترميز النّص
... وسم العنوان <title> </title> ، يوجد داخل وسم رأس الصفحة و يدلّنا على عنوان الصفحة
... وسم جسد الصفحة <body> </body> ، لهذا الوسم أهمية خاصّة لأنه بكل بساطة سيضم كل محتوى صفحتنا . فأي شيء نريد إضافته إلى صفحتنا ، يجب أن يكون داخل هذا الوسم.
... ثم أخيرا نجد وسم الفقرة <p> </p> و هو اختزال للكلمة paragraph أي الفقرة.

عندما نفتح وسما داخل وسم آخر . يجب إغلاقه أيضا داخل هذا الوسم ، مثال :
<body><p> ... </p></body> : صحيح
<body><p> ... </body></p> : خطأ


عندما قمتم بتجربة الشيفرة السابقة على متصفحّكم ، لاحظتم بكل تأكيد أن المحتوى(مرحى يا عالم ، هذه أول صفحة ويب أنجزُها)يظهر يسار الصفحة ، ماذا لو أردناه يمين الصفحة ؟
بما أن المحتوى باللغة العربية فمن الطبيعي أن يكون محتوى صفحتنا مرصّف إلى اليمين و لهذا سنضيف شيفرة صغيرة للوسم html و هي
dir="rtl"
<html dir="rtl">

جربوا الآن الشيفرة بعد هذه الإضافة على متصفّحكم


<!DOCTYPE html>
<html dir="rtl">
  <head>
    <meta charset="utf-8">
    <title> أول صفحة على موقعي </title>
  </head>
  <body>
    <p> مرحى يا عالم ، هذه أول صفحة ويب أنجزُها </p>
  </body>
</html>
مشاهدة النتيجة

لقد تم ترصيف المحتوى إلى اليمين بواسطة dir.
- dir : اختزال للكلمة direction و تعني الإتجاه ، أي اتجاه ترصيف المحتوى .من اليمين إلى اليسار أو العكس ، إذاً لدينا اتجاهين وهما rtl و ltr

  1. rtl : و هي اختصار right to left و تعني من اليمين إلى اليسار .نخبر بها المتصفّح بأن اللغة المستعملة تبدأ حروفها يمين الصفحة (كالعربية و الفارسية ...) و لهذا وجب عليه أن يرصف النص بدءاً من اليمين
  2. ltr : و هي اختصار left to right و هي عكس الأولى . نستعمل هذه القيمة إذا كانت لغتنا تُكتب من اليسار إلى اليمين كالإنجليزية و جميع اللغات اللاتينية . و بما أن المتصفحين مبرمجون باللغة اللاتينية فمبدئيا يظهر المتصفح النص بدءا من اليسار و لستم محتاجين لإضافة هذه الشيفرة" dir="ltr إلى وسم html إذا كنتم تنوون تطوير موقعكم باللغة اللاتينسية

لهذه الشيفرة dir التي أضفناها للوسم ، إسم ، وهو : صِفة .
الصفة dir واحدة من عدد لا بأس به من الصفات التي توفرّها لغة HTML كصفة أخرى رأيناها سابقا و هي charset
. و هذا يحيلنا إلى الدّرس الموالي الذي سنتحدّث فيه عن الصفات.