تعلم تصميم الويب HTML من الصفر بأسلوب بسيط - الدرس الأول
إعداد : رامى الجنزورى
زوار الموقع الكرام فى هذا أول درس فى لغة تصميم الويب (HTML) سوف نتعلم ما هى أساسيات هذة اللغة الممتعة وما هى الأدوات المطلوبة لتعلم هذة اللغة و لتصميم صفحات ويب (بسيطة) مبادئيا و لأن هذة الدروس للمبتدأين فسوف نتبع الأسلوب البسيط فى الشرح البعيد عن التعقيدات .. لذلك دعونا من المصطلحات و هيا معا نتأمل الفكرة ... و لكن أولا أنصح قبل البدأ هيئ نفسك أيها القارئ ... أوقف كل ما يشغل عقلك .. و تنفس بقوة و أجعل المكان جيد التهوية و إذا كنت تشعر بالأرهاق أو بعدم التركيز أنصحك بالقرأة و التعلم فى وقت أخر أنت أفضل فية من الأن
(حضر قهوتك أو شايك وبلاش سجاير طبعا)
(أشرب شوية صغيرين ... يا سلااااام الحياة حلوة ... يلا بينااااا )
كيف يتم إنشاء صفحة ويب وكيف يتم عرضها من خلال المتصفح المثبت على أجهزتنا ؟
بكل بساطة سوف نقوم الأن بإنشاء صفحة ويب واحدة من خلال الخطوات التالية و الأدوات المطلوبة هى :
- برنامج (win32pad حملة من هنا و قم بتثبيتة) و هناك برامج أخرى أفضل لتصميم صفحات الويب و لكن دعنا نبدأ بهذا البرنامج البسيط ثم ننتقل الى البرامج الأخرى فيما بعد
-متصفح مثبت على جهازك مثل (إنترنت إكسبلورر 8 - فاير فوكس - جوجل كروم - أوبرا) أى واحد منهم
لا شئ أخر .. و على ما أعتقد هذة البرامج يتم تثبيتها تلقائيا عند تنصيب الويندوز
و الأن لنبدأ الخطوات:
من قائمة (Start) أختار (Win32Pad) ثم أضغط على ملف تشغيل البرنامج (Win32Pad)
الأن الصفحة بيضاء أمامك يبقى أن تكتب فيها أكواد HTML لتصمم صفحة ويب ... و لكن دعنا نجرب و نكتب أى جملة و إن كانت (لا إله إلا الله) فى هذة الصفحة ثم أضغط من أعلى يسار (File) ثم (..Save As) ثم حد مكان على القرص الصلب مع كتابة عنوان الصفحة و أختيار نوع الملف كما فى الصورة التالية
بهذة الخطوات أنت قمت بإنشاء صفحة ويب ... أذهب الى المكان الذى قمت بإختيارة لحفظ الصفحة فية كما فى الصورة السابقة ستجد ملف الصفحة بالعنوان الذى القمت بكتابتة و إذا كانت إمكانية إظاهر صيغ الملف نشطة فى الويندوز ستجد الملف بعنوان يسبقة html. أى كالتالى (html. عنوان الصفحة)
و الأن قم بفتح هذة الصفحة ... ستلاحظ أن الصفحة يتم عرضها من خلال برنامج المتصفح المثبت على جهازك .. ويعرض أمامك الجملة التى قمت بكتابتها (لا إله الا الله) يسار الصفحة بلا أى تأثيرات لأن لم تضيف لها أكواد HTML لتلوينها و تحديد حجمها الى أخرة .
الى هنا دعنا نتوقف قليلا و نتأمل من الخطوات السابقة
أن صفحة الويب هى عبارة عن ملف (TXT) أى الملف الذى يتم إنشائة من قبل برنامج (Not Pad) و لكن عند تغير صيغة أو نوع هذا الملف الى (HTML) يتم فتحة من خلال متصفح الأنترنت و يقوم بترجمة رموز (HTML) و يحولها الى ما تقصدة أو الى شكل فعلى .... قد يكون الكلام معقد و لكن هيا نجرب تجربة بسيطة لنفهم أكثر!
سوف نقوم بالخطوات السابقة و نفتح صفحة جديدة فارغة و نكتب فيها جملة (لا إله إلا الله ) ولكن سوف نضيف عليها كود (HTML) مهمتة جعل النص فى منتصف الصفحة بدل من اليسار فيكون شكل الكود كالتالى <center>
لا إله إلا الله
</center> و الأن قم بحفظ الصفحة كما عرض فى الصورة و قم بفتح الصفحة ستلاحظ أن النص (لا إله إلا الله) أصبح فى منتصف الصفحة مع إخفاء الكود <center> إذا المتصفح ترجم الكود و نفذة بالفعل دون إظهارة فى الصفحة
حسنا سوف نضيف الأن كود أخر وهو مهمتة جعل النص سميك أو عريض مع كود جعل النص فى منتصف الصفحة
<center><B>
لا إله إلا الله
</B></center> و الأن عند فتحة الصفحة من خلال المتصفح تلاحظ أن نص (لا إله إلا الله) أصبح فى منتصف الصفحة و النص نفسة أصبح سميك أو عريض مع إخفاء الأكواد نفسها
إذا نستنتج أن أكواد (HTML) تظهر فقط فى حالة فتح الصفحة ببرنامج (Not Pad) أو ما شبة و لكن إذا تم العرض من خلال المتصفح يتم ترجمة هذة الأكواد الى أفعال شكلية للنص أو للصفحة مع إخفاء الأكواد نفسها
و هذة الأكواد تسمى فى عالم (HTML) بإسم (وسمات) أى كود التوسيط يسمى (وسم التوسيط) و هذة المعلومة حتى إذا صادفتنا هذة الكلمات (وسمات - وسم - سمة) ندرك الى ما تهدف
شكل الوسمات
من الأمثلة السابقة نلاحظ أن الوسمات هى عبارة عن كلمات لها وظيفة و مهمة معينة فى لغة HTML محصورة بين القوسين <> مثل :
وسم جعل النص فى منتصف الصفحة <center>
وسم جعل النص سميك <B>
وسم إضافة خط أسفل النص <U>
وهناك وسم هام جدا جدا مهمتة بدأ سطر جديد فى الصفحة <BR>
فعند تصميم صفحة ويب و الكتابة ثم بالضغط على زر Enter لتبدأ سطر جديد بالأسفل فيتم فعلا فى صفحة (Not Pad)و لكن عند التحويل أو الحفظ الى صفحة ويب (HTML) ثم عرضها من خلال المتصفح... فلا يقوم مترجم المتصفح بالأخذ فى الأعتبار هذا السطر الجديد و يقوم بدمج السطور كلها بجانب بعضها ... لذلك كان الحل هو وسم <BR> و يستخدم كالتالى
<BR>هذا السطر الأول
<BR> هنا يكتب النص فى السطر الثانى
<BR>هنا يكتب النص فى السطر الثالث
<BR>هنا يكتب النص فى السطر الرابع وكلما أرادنا بدأ سطر جديد نكتب الوسم <BR>
وسمات بخصائص
هناك بعض الوسمات لها خصائص و متغيرات مثل وسم التحكم فى شكل النصوص <Font>
فإذا كتبنا نص يسبقة الوسم <Font> بهذا الشكل نلاحظ أن لا يوجد أى تأثير تم إضافتة و لكن إذا كتبناة بالشكل التالى
<Font Color="red">
لا إله إلا الله
</Font> و الأن هيا نعرض الصفحة فى المتصفح نلاحظ أن جملة (لا إله إلا الله) أصبحت باللون الأحمر
لماذا؟... لأن وسم Font لة خصائص يمكن التحكم فيها مثل خاصية الألوان Color و نلاحظ أن شكل هذا النوع من الوسمات يتم كتابتة كالتالى 
حسنا إذا أردنا تغير لون النص الى اللون الأزرق توقع قبل أن تستكمل القرأة أى عنصر من العناصر السابقة فى الصورة سوف يتم تغيرة؟!
.
.
.
.
.
.
.
.
الحل سهل هو العنصر الذى يكون بين النقطتين بعد يساوى كالتالى
<font color="blue">
لا إله إلا الله
</font> وهكذا تعرض جملة (لا إله إلا الله) باللون الأزرق ، وكأننا نقول لمترجم متصفح الويب
أجعل تأثير وسم Font و غير خاصيتة Color الى اللون Blue أى الأزرق
راااائع جدا جدا ولكن سؤال ... هل وسم Font يحتوى على خاصية Color فقط؟!!
الجواب هو : لا ... يوجد خصائص أخرى لهذا الوسم Font مثل خاصية تغيير حجم الخط Size
توقع كيف يكتب قبل المتابعة
<font size="4">
لا إله إلا الله
</font> حسنا لم يختلف كثيرا عن ما سبق كل ما حدث هو كتبنا خاصة size و كتبنا القيمة المناسبة لها فكأننا نقول لمترجم صفحة الويب
أجعل تأثير وسم Font و غير خاصيتة Size أى الحجم الى رقم 4
و طبعا بالبديهى لا يمكن كتابة قيمة نصية أى لون مثل Red أو Blue أو أى لون مع خاصية Size وكأننا نقول لة أجعل حجم الخط بالأحمر فهذا خطأ طبعا لذلك نكتب قيمة رقمية مع خاصية Size
و الأن هل يمكن دمج أكتر من خاصية فى وسم واحد؟!
الأجابة نعم .... كيف ذلك ؟! ... تأمل المثال التالى
<font color="green" size="7">
لا إله إلا الله
</font> أى نص (لا إله إلا الله) أصبح لونة أخضر و حجمة = 7
من المثال السابق يتبين أنة يمكن دمج أكثر من خاصية للوسم بين القوسين مع العلم أن لكل وسم خصائصة
وهناك العديد من الوسمات سوف يتم شرحها فى دروس قادمة و لكن أخذنا وسم Font كمثال ليوضح ما هى الوسمات و العلاقة بينها و بين خصائصها و كيفية كتابتها
و هناك ملاحظة بسيطة جدا و هى أن الجملة يتم سبقها بكتابة الوسم و يليها كتابة الوسم مرة أخر و لكن مع إضافى / شرطة مائلة بعد القوس الأول كالتالى :
<center>
النص رقم1 - هذا النص المراد توسيطة فى منتصف الصفحة
</center>
النص رقم 2 - أما هذا النص فلا يأخذ التأثير و يظل فى اليسار من المثال السابق يتضح أن عند كتابة وسم يعطى التأثير على مايلية و عند كتابة الوسم مرة أخرى مع إضافة شرطة مائلة فهذا بمثابة إغلاق لتأثير الوسم أى ما يلى (الوسم ذات الشرطة المائلة) لا يأخذ التأثير ...
و بطريقة أخرى تأثير الوسم يكون على ما بين الوسم و نفس الوسم ذات الشرطة المائلة كالمثال التالى
<font color="red">
هذا النص يكن باللون الأحمر لأنة أخذ تأثير الوسم
</font>
هذا النص يكن باللون الطبيعى لأنة بعد إغلاق الوسم و من المثال السابق تتضح الفكرة أكثر مع الملاحظة أن الوسمات ذات الخصائص عند الأغلاق يتم كتابتها يسبقها الشرطة المائلة دون الخصائص
الى هنا نكتفى بهذا القدر فى هذا الدرس و أنصح بتحميل برنامج (إيجى أديتور العربى) حيث يحتوى على العديد من الوسمات بخصائصها و شرح مفصل لها بالعربية من هنا
وفى الدروس القادمة نستكمل ما هو الهيكل البنائى لصفحة الويب و أنصحك إذا واجهت صعوبات فى الفهم لا تيأس فقط هيئ نفسك و أوقف كل ما يشغل عقلك و أبدأ بقرأة الدرس مرة أخرة بتأنى و دون أن توهم نفسك أن هناك شئ صعب فمن تعلم ليس أكثر منك ذكاء و أنت لست أقل منة | 