عرفت سابقاً أن لغة HTML تعتمد على الوسوم "Tags" في تصميم صفحات الانترنت وهنا تكمن سهولة HTML فهي لا تحوي أي تعقيد اطلاقاً .
توجد هناك عدة برامج لتصميم صفحات الويب مثل برنامج دريم ويفر المخصص لهذا الغرض, وكذلك بيئة الفيجوال ستوديو المقدمة من ميكروسوفت وكلاهما يحتوي على محرر نصوص متطور مع مصمم للصفحات وكذلك العديد من المميزات , ولكننا سنستخدم مبدئياً برنامج "المفكرة" المضمن مع نظام التشغيل "ويندوز" , وستقوم الآن بكتابة اول صفحة ويب بلغة HTML فقط قم بفتح برنامج المفكرة واكتب الكود التالي :
مبرووووك لقد قمت الآن بكتابة أول صفحة HTML , وشرح الكود كما يلي :
- الوسم <html> : وهو أهم وسهم في لغة HTML ويقع محتوى الصفحة بأكمله بداخل هذا الوسم , سواء المحتوى الذي يظهر للمستخدم أو الذي لا يظهر للمستخدم .
- الوسم <head> : وهو الذي يحوي معلومات عن الصفحة كالعنوان الذي يظهر في شريط عنوان المتصفح (أو في علامة تبويب المتصفح) , كما يحوي معلومات عن كاتب الصفحة ومحتوى الصفحة , ايضاً قد يحتوي على اكواد CSS أو Javascript , وبداخله ترى الوسم <title> الذي يمثل عنوان الصفحة الذي يظهر في شريط عنوان المتصفح .
- الوسم <body> : وهو الذي يوضع فيه محتوى الصفحة الظاهر للمستخدم كالصور والنصوص والقوائم والجداول وغيرها .
الصورة التالية تشرح محتوى أي صفحة انترنت :
هذه العناصر تكون موجودة في أي صفحة ويب تراها على الوجود , والطريف في الأمر انه يمكنك الاستغناء عن أي من الوسوم السابقة (يمكنك التجربة بنفسك) وستظهر الصفحة بشكل صحيح!! ولكني لا أنصحك أبداً أبداً أبداً بهذا , لأنه في الصفحات التي تحتوي على عناصر كثيرة سيؤدي هذا إلى خلل في الصفحة ولن تظهر بشكل صحيح لهذا أنصحك عند التدرب أن تكتب جميع الوسوم الأساسية لكي تتعود على هذا الأمر وتصبح مصمماً محترفاً بإذن الله .
قد تقول لي ماهذا أين تلك الصور وتلك التأثيرات الجميلة التي نراها في مواقع الانترنت ؟؟
أخي إن رحلة الألف ميل تبدأ بخطوة فلا تستعجل فعملية التعلم تحتاج إلى صبر ومثابرة وكما أخبرتك لغة HTML سهلة جداً وستتعلمها في وقت قياسي باذن الله , وفي الدروس القادمة سنتعرف على كل وسم والخصائص والتأثيرات المرافقة له .
توجد هناك عدة برامج لتصميم صفحات الويب مثل برنامج دريم ويفر المخصص لهذا الغرض, وكذلك بيئة الفيجوال ستوديو المقدمة من ميكروسوفت وكلاهما يحتوي على محرر نصوص متطور مع مصمم للصفحات وكذلك العديد من المميزات , ولكننا سنستخدم مبدئياً برنامج "المفكرة" المضمن مع نظام التشغيل "ويندوز" , وستقوم الآن بكتابة اول صفحة ويب بلغة HTML فقط قم بفتح برنامج المفكرة واكتب الكود التالي :
<html>
<head>
<title>صفحتي الأولى</title>
</head>
<body>
أهلا بكم في صفحتي الاولى
</body>
</html>
الآن قم بحفظ الصفحة باسم mypage.htm أو أي اسم تريده المهم ان تحفظها بالامتداد .htm , قم بفتح الصفحة بواسطة متصفح الانترنت , ستبدو تماماً كالتالي :
مبرووووك لقد قمت الآن بكتابة أول صفحة HTML , وشرح الكود كما يلي :
- الوسم <html> : وهو أهم وسهم في لغة HTML ويقع محتوى الصفحة بأكمله بداخل هذا الوسم , سواء المحتوى الذي يظهر للمستخدم أو الذي لا يظهر للمستخدم .
- الوسم <head> : وهو الذي يحوي معلومات عن الصفحة كالعنوان الذي يظهر في شريط عنوان المتصفح (أو في علامة تبويب المتصفح) , كما يحوي معلومات عن كاتب الصفحة ومحتوى الصفحة , ايضاً قد يحتوي على اكواد CSS أو Javascript , وبداخله ترى الوسم <title> الذي يمثل عنوان الصفحة الذي يظهر في شريط عنوان المتصفح .
- الوسم <body> : وهو الذي يوضع فيه محتوى الصفحة الظاهر للمستخدم كالصور والنصوص والقوائم والجداول وغيرها .
الصورة التالية تشرح محتوى أي صفحة انترنت :
هذه العناصر تكون موجودة في أي صفحة ويب تراها على الوجود , والطريف في الأمر انه يمكنك الاستغناء عن أي من الوسوم السابقة (يمكنك التجربة بنفسك) وستظهر الصفحة بشكل صحيح!! ولكني لا أنصحك أبداً أبداً أبداً بهذا , لأنه في الصفحات التي تحتوي على عناصر كثيرة سيؤدي هذا إلى خلل في الصفحة ولن تظهر بشكل صحيح لهذا أنصحك عند التدرب أن تكتب جميع الوسوم الأساسية لكي تتعود على هذا الأمر وتصبح مصمماً محترفاً بإذن الله .
���� ماهذه الرموز ؟!!
حسناً ,, في متصفحي "موزيلا فايرفوكس" و "أوبرا" لا تظهر الكتابة العربية بالشكل المطلوب لأننا حفظنا صفحتنا عن طريق المفكرة بالترميز "ANSI" , وحل هذه المشكلة بسيط جداً وهو عندما تقوم بحفظ الصفحة باسم عليك أن تغير الترميز من ANSI إلى UNICODE كما في الصورة التالية :
قد تقول لي ماهذا أين تلك الصور وتلك التأثيرات الجميلة التي نراها في مواقع الانترنت ؟؟
أخي إن رحلة الألف ميل تبدأ بخطوة فلا تستعجل فعملية التعلم تحتاج إلى صبر ومثابرة وكما أخبرتك لغة HTML سهلة جداً وستتعلمها في وقت قياسي باذن الله , وفي الدروس القادمة سنتعرف على كل وسم والخصائص والتأثيرات المرافقة له .