[1] دورة تعلم تصميم المواقع من الصفر للمبتدئين – احترافية – XHTML

السلام عليكم .. أهلًا بكم في الدرس الأول من دورة XHTML ، بعدما ذكرنا مقدمة عن لغة XHTML في مقدمة دورة تعلم تصميم المواقع ، وبعد تحميل برنامج ++NOTEPAD الذي سنستخدمه – إن شاء الله – في كتابة الأكواد .

يجب أن تقوم بتنصيب برنامج ++NOTEPAD بغير اللغة العربية حتى تتفادى وقوع الأخطاء عند كتابة الأكواد .

في البداية يجب فتح صفحة جديدة في برنامج ++NOTEPAD ، وذلك عن طريق FILE ثم NEW  :

XHTML-1-

سيفتح لك نافذة جديدة :

XHTML-2

قبل الكتابة يجب أن تعلم: أن أي موقع ويب يتكون من تعليمات أو أكواد أو وسوم “TAGS” ، وأجزاء أي موقع ويب هي عبارة عن وسوم “TAGS” .

– مثلًا ! إذا أردت عمل صورة في موقعك ؛ ستحتاج إلى إضافة وسم الصورة “PICTURE TAG”  .

– وإذا أردت عمل رابط في موقعك ؛ ستحتاج إلى إضافة وسم الرابط “LINK TAG”  .

وهكذا ؛ فإن أي موقع ويب يكون عبارة عن وسوم بسيطة “SIMPLE TAG” التي تجتمع لتكوِّن لنا موقع ويب معقد ! وجميع الوسوم “TAGS” تكون داخل أقواس هكذا :

<img>

أو

<p>

في البداية ؛ يجب كتابة وسم خاص ، وهو ضروري حتى يتعرف المتصفح على أن ما تكتبه هي أكواد HTML وهو :

<!doctype html>

سنبدأ الآن بكتابة بعض الأكواد : أولًا كود البداية ، والذي تبدأ به كل صفحات الانترنت ، وسم :

<html>

أي شيء سنكتبه داخل هذا الوسم هو محتوى الموقع

</html>

فأي وسم لابد أن يكون له بداية :

<...>

ونهاية :

</...>

…. = هي الوسم . ووسم النهاية يبدأ بـ /

أي موقع ويب يتكون من جزئين ؛ الأول يُسمَّى HEAD وهو رأس الصفحة ،  والآخر يُسمَّى  BODY وهو محتوى الصفحة .

HEAD : يكون خاص بمعلومات المتصفح ، أشياء تقنية لا نراها في موقع ويب ، مثل الكلمات الدلالية KeyWords أو بعض المعلومات عن المتصفح .

BODY : هو ما نراه من محتوى الموقع ، من روابط ، صور ، كتابة ..إلخ .

بالنسبة لأوسمة HEAD فوسم البداية :

<head>

ووسم النهاية :

</head>
<head>

أي شيء سنكتبه هنا ، سيكون في رأس الصفحة من موقع ويب

</head>

في البداية سنضع عنوان لموقع الويب بواسطة وسم العنوان TITLE TAG

وسم بداية :

<title>

وسم نهاية :

</title>
<title>

أي شيء سنكتبه هنا سيكون في العنوان

</title>

مثال :

<title>

دورة تصميم المواقع - ويكي شير

</title>

ويمكن أن تضع الوسوم في سطر واحد ؛ هكذا :

<title> دورة تصميم المواقع - ويكي شير </title>

لاحظ هنا : أن كل مجموعة من الوسوم داخل مجموعة أخرى ،[ TITLE داخل HEAD ] و [ TITLE و HEAD  داخل HTML ] ؛ هكذا:

<doctype html>
<html>
<head>

<title>
عنوان الموقع
</title>

</head>

<body>
محتوى الموقع
</body>

</html>

صورة توضيحية :

XHTML-3

– كل الوسوم ستكون داخل وسمي html  ، [ما عدا وسم تعريف المتصفح وهو أول وسم في الوثيقة]

– الوسوم التي بداخل head لن تظهر في الصفحة كما ذكرنا .

– وسم title هو العنوان الذي يظهر أعلى الصفحة :

XHTML-4

– وسم body هو محتوى الصفحة ، وما بداخله فقط هو الذي يظهر في صفحتك للزوار . وسنتكلم عنه في الدرس القادم – إن شاء الله – .

يجب وضع الوسوم بهذا الترتيب ، وإلا لن يعمل معك أي كود

لكن قبل الانتهاء ؛ ولكي نرى ما كتبناه هنا على صفحة المتصفح ، يجب أن نقوم بحفظ ما كتبناه على هيئة html , نذهب إلى FILE ثم SAVE AS :

XHTML-5

بعد اختيار المكان الذي تود حفظ الملف بداخله ، يجب أن تحفظ الملف بصيغة HTML ويمكن ذلك عن طريق :

XHTML-6

ثم نضغط SAVE .

– نذهب لمكان حفظ الملف ، نجد أن الملف حُفظ بصيغة HTML وعليه أيقونة المتصفح الخاص بك :

XHTML-7

نقوم بفتحه ؛ سنجد أن المتصفح لم يتعرف على اللغة العربية :

XHTML-8

لذلك ؛ فإننا سنقوم بتضمين الترميز العالمي UTF-8 داخل الملف الخاص بنا ، حتى يتعرف المتصفح على اللغة العربية ، ويتم بإضافة الكود :

<meta charset="utf-8">

أسفل الكود الخاص بتعريف وثيقة HTML ليصبح الكود كاملًا هكذا :

<doctype html>
<meta charset="utf-8">
<html>
<head>

<title>
عنوان الموقع
</title>

</head>

<body>
محتوى الموقع
</body>

</html>

بعد التعديل على المحتوى الذي قمت بحفظه سابقًا ، سنضغط حفظ SAVE فقط وليس SAVE AS ثم اذهب للمتصفح وقم بتحديث الصفحة ستجد أنه تعرف على اللغة العربية :

XHTML-9

انتهى الدرس الأول ! – تم بحمد الله – .