1. شرح لاهم الاوامر و ابرز معالم لغة Html
[align=center]إخواني الأعزاء
السلام عليكم ورحمة الله وبركاته
لغة ال HTML هى الاساس فى بناء صفحات الويب وهى ليست لغة برمجة بالمعنى المعروف وانما يمكن القول بانها اسلوب فى الكتابة فانت عندما تكتب على برنامج معالجة نصوص مثل الوورد Microsoft Word فانك تقوم بتغيير لون وحجم الخط من خلال البرنامج بسهولة شديدة , ولكن ماذا تفعل اذا اردت ان تقوم بفتح ملف تم انتاجه بواسطة البرنامج بالطبع انت تحتاج البرنامج نفسه وهنا قد تصادفك مشكلة او ربما صادفتك بالفعل اعطيت الملف لصديقك ولكن صديقك لا يمتلك برنامج WORD لن يستطيع صديقك مشاهدة الملف , ولان الانترنت موجه للجميع كان لابد من وجود شفرة متعارف عليها يستطيع الجميع فهمها مع اختلاف برامجهم وهى ال HTML فهى ببساطة وسيلة لتنسيق الخطوط واضافة الصور الى صفحة الويب فمثلا اذا اردت لنص ان يكون لونه احمر
<font color="red">هذا النص باللون الاحمرfont>
بتحليل هذا السطر نلاحظ ان لغة ال HTML ماهى الا اسلوب فى الكتابة فانا قد اخبرت المتصفح ان النص لونه احمر color=red ان اللغة تتكون من وسوم tags بين علامتى "< >" الوسم يتم اغلاقه بنفس الوسم مضافا اليه " / " مثلا الوسم <b> يعنى ان النص سميك ولكن ماهى حدود النص السميك يتم تحديد البداية بفتح الوسم <b> وينتهى حدود النص السميك باغلاق الوسم <b/>
<b>هذه هى حدود النص السميكb>
ومن خصائص اللغة يتم كتابتها من اليسار الى اليمين , لا تتأثر بحالة الكتابة capital او small فالوسم <B> لا يفرق عن <b> , لا تتاثر بنظام التشغيل لدى الزائر ولا نوع المتصفح (وهذا من اهم مميزاتها) . يمكن ربط الملفات ببعضها عن طريق الوصلات التشعبية hyper links والجدير بالذكر ان كلمة HTML هى اختصار ل (Hyper **** Markup Language) وهى تعنى لغة الارتباطات التشعبية فانت تتنقل فى مواقع الانترنت عبر هذه الوصلات .
ما الذى احتاجه لتعلم لغة HTML الاجابة لا تحتاج شئ - وان كانت المعرفة البسيطة باللغة الانجليزية ستساعدك على سرعة الاستيعاب- فاللغة يمكن كتابتها فى notebad وهذا موجود فى نظام التشغيل Windows اى انها متوفرة لدى الجميع ايضا يمكنك كتابتها فى برامج مخصصة لذلك ولكنى لا انصحك ان تستخدم البرامج التى تقوم بكتابة الكود آليا مثل FrontPage .
ما الذى سأنجزه بعد تعلم لغة HTML ستكون لك القدرة على انشاء صفحات يمكنك عرضها على الشبكة الدولية "الانترنت" ولكن هذه ليست النهاية فحتى تستطيع الوصول لانشاء موقع عالمى يشهد لك الجميع بروعته لابد لك من تعلم ********** واذا اردت ان يتفاعل موقعك اكثر مع الزوار فعليك تعلم PHP وبتعلم MySql تكون مبرمج (مطور) صفحات محترف.
الاجزاء الاساسية لصفحة HTML:
تتكون الصفحة من جزأين اساسين هما الرأس head والجسم body.
رأس الصفحة هو الجزء الذى يحتوى على اجزاء خاصة بتعريف الصفحة مثل اللغة واسم مصمم الصفحة ووصف للصفحة ومفاتيح الكلمات (تستخدم بواسطة محركات البحث) , ولايظهر فى المتصفح من رأس الصفحة الا عنوان الصفحة.
اما جسم الصفحة فهو الذى يحتوى على جميع الاجزاء التى تراها مثل النصوص والجداول والصور وغيرها.
مثال
<html>
<head>
هنا يوضع مكونات رأس الصفحة
head>
<body>
هنا يوضع مكونات جسم الصفحة
body>
html>
ومكونات جسم الصفحة هى ما سنتناوله اولا فى هذه الدروس والذى كما اشرنا سابقا هو الجزء الذى يحتوى على جميع الاجزاء المرئية فى الصفحة من نصوص وجداول وصور ووصلات....
اولا ان كل جزء فى الصفحة لابد وان يكون ضمن وسم tag فكما تلاحظ الصفحة بالكامل تكتب ما بين وسم <html> و <html/>.
اى ان الوسوم هى المكون الاساسى للصفحة فلكى تقوم بعمل تنسيق معين لنص لابد من استخدام وسم مناسب لذلك او اردت ادراج صورة لابد وان تستخدم الوسم الخاص بذلك.
ثانيا يمكن لوسم واحد ان يعطى نتائج مختلفة باستخدام خصائص الوسم مثلا الوسم <font> يمكن ان يستخدم فى تلوين نص باللون الاحمر او تلوينه باللون الازرق
<font color="red">شبكة تكنولوجي فورسfont>
<font color="blue">شبكة تكنولوجي فورسfont>
فكما تلاحظ الخاصية color هى من خصائص الوسم font وبتغييرها نستطيع تغيير الناتج من استخدام هذا الوسم, ملحوظة عادة ما يكون للوسم اكثر من خاصية.
خاصية تداخل الوسوم فمثلا إذا اردنا عمل نص سميك نستخدم الوسم <b> وإذا اردنا ان نضع خط تحت النص نستخدم الوسم <u>. اما إذا اردنا ان نجعل النص سميك وتحته خط معا نستخدم خاصية تداخل الوسوم. مثال
<b><u>شبكة تكنولوجي فورسu>b>
تلاحظ أن الوسم المفتوح اولا يغلق اخرا وهى من القواعد التى يجب مراعاتها عند تداخل الوسوم.
وهكذا ترى ان لغة HTML لغة بسيطة جدا تتكون من مجموعة محفوظة من الوسوم والخصائص تمكنك من إنشاء الصفحة بسهولة, فهى ليست لغة برمجة بالمعنى المعروف.
مثال صفحتى الاولى
<html dir="rtl">
<head>
<title>صفحتى الاولىtitle>
head>
<body>
غدا سانتهى من اكمال هذه الصفحة ولكن حينها لن يكون العنوان صفحتى الاولى
body>
html>
الخاصية dir الملحقة بالوسم html هى المسئولة عن جعل اتجاه الصفحة من اليمين الى اليسار وسوف نتناولها بالتفصيل فيما بعد.
الوسم title هو المسئول عن عنوان الصفحة وهو من مكونات رأس الصفحة التى لن تكون محل اهتمامنا الان.
والان قم بنقل مكونات صفحتى الاولى وحفظها فى ملف notepad وغير امتداد الملف الى html. مثلا mypage.html وافتحها بالمتصفح لترى الناتج بنفسك.
*************
اولا التعامل مع النصوص
ثانيا التعامل مع الصور
ثالثا التعامل مع الوصلات
رابعا التعامل مع الجداول
خامسا التعامل مع النماذج
سادسا التعامل مع الاطارات
سابعا مكونات رأس الصفحة
أسأل الله ان اكون قد وفقت فى شرح هذا الدرس وارجو منك تقييمه.
تعتبر النصوص من المكونات الاساسية التى تكاد لا تخلو منها صفحة ويب لذلك فالتعرف على كيفية تنسيق النصوص من الاشياء الهامة فلغة HTML توفر لك ماتحتاجه لعمل تنسيق رائع للنصوص.
الوسم font من الوسوم المستخدمة مع النصوص فهو يوفر لك امكانية تغيير (لون وحجم ونوع) الخط باستخدام الخصائص (color و size و face) على الترتيب.
الخاصية color وهى المسئولة عن لون النص يمكن التعامل معها بطريقتين:
اما بكتابة اللون مباشرة "color="red وهى طريقة غير فعالة فالالوان المعروف اسمائها محدودة.
او بكتابة اللون فى شكل رقمى سداسى عشرى "color="#336699.
ملحوظة معظم برامج تحرير الصور تعرض المكافئ لاى لون فى شكل سداسى عشرى.
وكفكرة بسيطة عن هذه الطريقة تلاحظ العدد يتكون من 6 ارقام مقسمة الى ثلاثة ازواج من الارقام كل زوج مسئول عن لون اساسى RGB ومعناها (الاحمر والاخضر والازرق) اى ان 33 تعبر عن اللون الاحمر و 66 تعبر عن اللون الاخضر و 99 تعبر عن اللون الازرق.
فى العد العشرى اكبر رقم هو 9 بينما فى السداسى عشر اكبر رقم 15 لذلك فالعدد 10 فى العد العشارى يعبر عنه فى السداسى عشرى بالحرف a والحادى عشر b وحتى الخامس عشر f (اول ستة حروف فى اللغة الانجليزية) .
لاحظ ان الرقم مسبوق بعلامة # وهى تخبر المتصفح ان اللون مكتوب فى شكل ارقام وإن كان بعض المتصفحات تستنتج ذلك بشكل تلقائى.
فكر ماذا لو اردت ان اعبر عن اللون الاحمر بهذه الطريقة؟
نعم نعطى الجزء (الزوج) الخاص باللون الاحمر قيمة عظمى وبقية الاجزاء اصفار ff0000
الخاصية size وهى المسئولة عن حجم الخط تأخد قيم من 1الى 7 (من الصغير الى الكبير) مثلا "size="4 .
ويمكن كتابة القيمة بشكل اخر وهى اضافة موجب او سالب قبل القيمة + او - مثلا +2 وهى تعنى اضافة 2 الى القيمة الافتراضية وهى 3 فتصبح القيمة النهائية 5 وهكذا.
الخاصية face وهى المسئولة عن نوع الخط وهى تاخذ قيم عديدة تمثل اسماء الخطوط المتاحة ولكن يجب ان تلاحظ عند اختيار الخط انه متوافر عند غالبية الزوار
مثال "face="Tahoma.
ملحوظة يمكن كتابة اكثر من خط وبذلك إذا لم يجد المتصفح الخط الاول يتم اللجوء الى الثانى وهكذا
مثال "face="Arial, Helvetica, sans-serif.
مثال على الوسم font وخصائصه
<font color="#000000" size="4" face="Arial">شبكة تكنولوجي فورسfont>
<font color="blue">شبكة تكنولوجي فورسfont>
ملحوظة ليس بالضرورة اعطاء قيمة لكل خاصية من خصائص الوسم فأى خاصية لا تعطى لها قيمة يستخدم المتصفح القيمة الافتراضية لهذه الخاصية. مثلا اذا لم تحدد قيمة للخاصية size تستخدم القيمة الافتراضية وهى 3.
هناك ايضا بعض الوسوم الخاصة بتنسيق النصوص كجعل النص سميك او مائل او وضع خط تحت النص وغيرها.
ومنها <b> لجعل النص سميك.
<i> لجعل النص مائل
<u> لوضع خط تحت النص
<b>شبكة تكنولوجي فورسb>
<i>شبكة تكنولوجي فورسi>
<u>شبكة تكنولوجي فورسu>
يوجد ايضا وسم هام <p> وهو الخاص بالفقرات فمن الافضل كتابة كل فقرة فى وسم <p> منفصل فهو يقوم بانهاء السطر الحالى ووضع سطر فارغ بين كل فقرة كما ان له خصائص مفيدة
مثل الخاصية align الخاصة بالمحاذاة وتاخذ احدى ثلاثة قيم اما right محاذاه لليمين او left محاذاه لليسار او center محاذاه فى المنتصف
والخاصية dir وهى من الخصائص الهامة جدا للمستخدم العربى لانها هى المسئولة عن جعل اتجاه النص من اليمين الى اليسار (اللغة العربية) او من اليسار الى اليمين (اللغات الاخرى) .
وذلك عن طريق القيمتين rtl اى من اليمين الى اليسار او ltr اى من اليسار الى اليمين.
<"p align="right" dir="rtl>.
ملحوظة هذه الخاصية تستخدم مع العديد من الوسوم الاخرى ولعل اهمها الوسم html فبجعل قيمتها rtl تجعل اتجاه الصفحة بالكامل من اليمين الى اليسار <"html dir="rtl>
بعض المفاهيم العامة عن النصوص فى لغة HTML
اولا اذا قمت باضافة سطر جديد فى النص باستخدام المفتاح ادخال (Enter) مثلا فلن يظهر المتصفح هذا السطر الجديد وانما لاضافة سطر جديد ينبغى عليك استخدام الوسم <br>.
ملحوظة هذا الوسم من الوسوم التى لا تحتاج الى وسم اغلاق فلا معنى ل <br/> وهذا يبدو منطقيا فالوسم يقوم بانهاء السطر وبدء سطر جديد ولذلك لا حاجة لوسم اغلاق.
ثانيا المسافات بين الكلمات: لا يعتمد المتصفح اكثر من مسافة واحدة بين كلمتين متتاليتين واى مسافة بعد ذلك يتم اهمالها لذلك إذا اردنا وضع اكثر من مسافة بين كلمتين متتاليتين
نستخدم nbsp& ويستبدل المتصفح هذه الكلمة بمسافة.
حتى الان نكون قد تعرفنا على الكثير من طرق تنسيق النصوص ولكن يبقى اجزاء بسيطة سنتعرف عليها فى هذا الدرس.
العنواين headings ماهى الا نصوص سميكة تكون كبيرة جدا كما فى الوسم h1 او صغيرة جدا كما فى الوسم h6 وتتدرج من الكبر الى الصغر من الوسم h1 وحتى h6
كما ان المتصفح سيضيف سطر فارغ قبل وبعد اى عنوان
قم بتجربة ذلك بنفسك
<center>
<h1>عنوان 1h1>
<h2>عنوان 2h2>
<h3>عنوان 3h3>
<h4>عنوان 4h4>
<h5>عنوان 5h5>
<h6>عنوان 6h6>
center>
الوسم center ليس له علاقة بالعنواين وانما يستخدم فى التنصيف اى جعل محاذاة النص الى المنتصف
كما تلاحظ العنواين تتدرج فى الحجم من الوسم h1 الاكبر حجما وحتى h6 الاصغر حجما
سؤال هل يمكن استخدام الوسم font مع الوسم b كبديل عن استخدام الوسوم الخاصة بالعنواين
- نعم فالوسم h1 مثلا يمكن استبداله ب "font size="6 مع الوسم b
<font size="6"><b> h1 بديل عن الوسم b>font>
العناوين لا تتميز عن هذه الطريقة بالسرعة فى الكتابة فقط وانما وسم العنوان يقوم بانهاء السطر الحالى فى النص, ووضع سطر فارغ قبله وبعده
الوسم basefont وكلمة base معناها الاساس اى انه يقوم بتحديد القيم الافتراضية لتنسيق النص للصفحة بالكامل فمثلا القيمة الافتراضية للون النص هى الاسود والحجم 3 ولتغيير هذه القيم للصفحة بالكامل نستخدم هذا الوسم
<basefont color="#ffoooo" size="5" face="Tahoma">
الوسم له نفس خصائص الوسم font لكنه يقوم بتطيبقها على الصفحة بالكامل وهذا هو الاختلاف بينه وبين الوسم font الذى يطبقها على جزء محدد من النص
الوسم لا يحتاج الى وسم إغلاق
هل التعامل مع النصوص باستخدام لغة HTML طريقة فعالة ؟!!
لا تتسرع فى الاجابة فقط فكر فى هذا , قمت بعمل صفحة تحتوى على نصوص كثيرة ولتمييز بعض الجمل من النص قمت بتلوينها باللون الاحمر (مثلا) ولكن بعد ان انتهيت من اتمام الصفحة وجدت ان اللون الاحمر غير مناسب وفكرت فى استخدام الاخضر بدلا منه لتلوين الجمل المميزة. سيستغرق منك هذا العمل جهدا ووقتا خاصة إذا كان النص كبير وكانت الجمل المميزة كثيرة وهنا تظهر مشكلة تواجه مطور المواقع المحترف ولان الوقت ثمين ظهرت تقنية جديدة تسمى تنسيق الانماط الانسيابية cascading style sheets واختصارها CSS وهى ليست جزء من لغة HTML لكنها تستخدم معها لعمل التنسيق للصفحة وهى توفر القوة والسرعة وسوف نحاول شرحها فيما بعد.
ولكن كبداية سيكون التنسيق باستخدام HTML كافى خاصة مع الصفحات والمواقع البسيطة.
تهميش جزء من النص, معنى تهميش نص هى منع المتصفح من عرض هذا النص. ويستخدم ذلك لكتابة بعض الجمل التى تذكرك بشئ ما يساعدك إذا اردت تعديل الصفحة بعد ذلك وانت بالطبع لاترغب ان تظهر هذه الجمل للزائر
العلامة --!> تحدد بداية النص المهمش والعلامة <-- تحدد نهايته. كما هو واضح فى المثال
الصور من المحتويات الهامة لصفحة الويب فنادرا جدا ماترى صفحة تحتوى على نصوص فقط. لابد من وجود الصور التى تضيف الشكل الجمالى للصفحة وفى هذا الدرس سنتعرف على كيفية ادراج الصور والتعامل معها.
الوسم المستخدم للتعامل مع الصور هو img ولكن الوسم وحده لايكفى يجب استخدام الخاصية src معه والتى نحدد من خلالها مكان الصورة , ملحوظة الوسم img لايحتاج الى وسم اغلاق
صفحات ال HTML لا تحوى الصور وانما باستخدام الخاصية src مع الوسم img نقوم بالاشارة الى مكان الصورة المراد عرضها
مثال
<img src="pic.gif">
قم بنقل هذا السطر وضعه فى ملف HTML وضع بجوار الملف (فى نفس المجلد الموجود به الملف) صورة بإسم pic وبإامتداد gif.
الخاصية src خاصية ضرورية لادراج الصور والقيمة التى تأخدها هى المسار للصورة المراد ادراجها فإذا كانت الصورة بجوار ملف ال HTML فالمسار الى الصورة هو اسمها فقط, اما اذا كانت الصورة فى مجلد والمجلد بجوار ملف ال HTML فالمسار هو اسم المجلد بالاضافة الى اسم الصورة مثل "folder/pic.gif" وهذا النوع من المسارات يسمى المسارات النسبية لان المسار يكون بالنسبة لملف ال HTML , وهناك نوع اخر يسمى المسار المطلق وسوف نتطرق اليه عند التعامل مع الوصلات.
هناك العديد من الخصائص الملحقة بالوسم img والتى تمكننا من التعامل مع الصور مثل طول وعرض الصورة, محاذاة الصورة وغيرها.
الخاصية width مسئولة عن تحديد عرض الصورة بوحدة البيكسل pixel وإذا لم تحدد قيمة لهذه الخاصية فان المتصفح سيعرض الصورة بعرضها الحقيقى.
الخاصية height مسئولة عن تحديد طول الصورة بوحدة البيكسل pixel وإذا لم تحدد قيمة لهذه الخاصية فان المتصفح سيعرض الصورة بطولها الحقيقى.
وهاتان الخاصيتان تستخدمان اذا اردت تعديل طول وعرض (أبعاد) الصورة بدون استخدام برنامج معالجة صور, وحتى اذا لم ترغب فى تعديل أبعاد الصورة فمن الافضل تحديد الطول والعرض دائما.
<img src="pic.gif" width="50" height="50">
الخاصية align من الخصائص الهامة فى التعامل مع الصور وتأخد قيم كثيرة وهى تستخدم للتحكم فى محاذاة الصورة مع النص, فلك ان تعلم انه يمكنك وضع صورة وسط جملة نصية وستظهر الصورة فى النص مكان ادراجها مباشرة والهدف من هذه الخاصية هو التحكم فى وضعية النص يمين ويسار الصورة, والقيم المتاحة لهذه الخاصية هى top و middle و bottom وهناك قيمتين left و right ولكن عملهم يختلف عن عمل القيم السابقة
هذا جزء من النص قبل ادراج الصورة تكملة النص بعد ادراج الصورة.
كما تلاحظ تم محازاة النص يمين ويسار الصورة الى الحافة السفلية للصورة وهذه هى القيمة الافتراضية للخاصية وهى bottom.
يمكن جعل النص بمحازاة الحافة العلوية للصورة باستخدام القيمة top
<img src="pic.gif" width="50" height="50" align="top">
هذا جزء من النص قبل ادراج الصورة تكملة النص بعد ادراج الصورة.
اما القيمة middle فتجعل محازاة النص يمين ويسار الصورة الى منتصف الصورة
<img src="pic.gif" width="50" height="50" align="middle">
هذا جزء من النص قبل ادراج الصورة تكملة النص بعد ادراج الصورة.
استخدام القيمتين right او left :ذكرنا سابقا ان الصورة تظهر فى النص مكان ادراجها مباشرة ولكن عند استخدام احدى هاتين القيمتين مع الخاصية align فإن الصورة تظهر اما فى يمين الصفحة او يسار الصفحة , وفى هذه الحالة يلتف النص حول الصورة.
<img src="pic.gif" width="50" height="50" align="right">
<img src="pic.gif" width="50" height="50" align="left">
فى هذه الحالة يلتف النص حول الصورة اما الى اليمين او الى اليسار
القيمة المستخدمة هنا right
فى هذه الحالة يلتف النص حول الصورة اما الى اليمين او الى اليسار
القيمة المستخدمة هنا left.
الخاصية alt خاصية مفيدة وهى تقوم بتزويد المتصفح بنص بديل عن الصورة , ويظهر هذا النص فى حالة فشل تحميل الصورة. القيمة الملحقة بهذه الخاصية هى النص البديل.
<img src="pic.gif" alt="نص يظهر فى حالة فشل تحميل الصورة">
الخاصية border تقوم بوضع اطار حول الصورة. القيمة الملحقة بهذة الخاصية هى سمك الاطار بوحدة البيكسل pixel.
<center><img src="pic.gif" width="50" height="50" border="5">center>
لاحظ استخدام الوسم center الخاص بالمحاذاة الى المنتصف.
بقى ان نتعرف على خاصيتان هما hspace و vspace وهما متشابهان فى عملهما فهما يحددان المسافة البينية بين الصورة والنص المحيط بها والفرق ان hspace تحدد المسافة الافقية و vspace تحدد المسافة الرأسية.
<img src="pic.gif" width="50" height="50" hspace="20" vspace="20" title="شبكة تكنولوجي فورس">
النص قبل ادراج الصورةالنص بعد ادراج الصورة
لاحظ استخدام الخاصية title وهى خاصية عامة ولكن مفيدة مع الصور, ثبت السهم فوق الصورة لتعرف فائدتها بنفسك.
عند عدم تحديد قيمة للخاصية align تاخذ القيمة الافتراضية وهى bottomundefined
[align=center]إخواني الأعزاء
السلام عليكم ورحمة الله وبركاته
لغة ال HTML هى الاساس فى بناء صفحات الويب وهى ليست لغة برمجة بالمعنى المعروف وانما يمكن القول بانها اسلوب فى الكتابة فانت عندما تكتب على برنامج معالجة نصوص مثل الوورد Microsoft Word فانك تقوم بتغيير لون وحجم الخط من خلال البرنامج بسهولة شديدة , ولكن ماذا تفعل اذا اردت ان تقوم بفتح ملف تم انتاجه بواسطة البرنامج بالطبع انت تحتاج البرنامج نفسه وهنا قد تصادفك مشكلة او ربما صادفتك بالفعل اعطيت الملف لصديقك ولكن صديقك لا يمتلك برنامج WORD لن يستطيع صديقك مشاهدة الملف , ولان الانترنت موجه للجميع كان لابد من وجود شفرة متعارف عليها يستطيع الجميع فهمها مع اختلاف برامجهم وهى ال HTML فهى ببساطة وسيلة لتنسيق الخطوط واضافة الصور الى صفحة الويب فمثلا اذا اردت لنص ان يكون لونه احمر
<font color="red">هذا النص باللون الاحمرfont>
بتحليل هذا السطر نلاحظ ان لغة ال HTML ماهى الا اسلوب فى الكتابة فانا قد اخبرت المتصفح ان النص لونه احمر color=red ان اللغة تتكون من وسوم tags بين علامتى "< >" الوسم يتم اغلاقه بنفس الوسم مضافا اليه " / " مثلا الوسم <b> يعنى ان النص سميك ولكن ماهى حدود النص السميك يتم تحديد البداية بفتح الوسم <b> وينتهى حدود النص السميك باغلاق الوسم <b/>
<b>هذه هى حدود النص السميكb>
ومن خصائص اللغة يتم كتابتها من اليسار الى اليمين , لا تتأثر بحالة الكتابة capital او small فالوسم <B> لا يفرق عن <b> , لا تتاثر بنظام التشغيل لدى الزائر ولا نوع المتصفح (وهذا من اهم مميزاتها) . يمكن ربط الملفات ببعضها عن طريق الوصلات التشعبية hyper links والجدير بالذكر ان كلمة HTML هى اختصار ل (Hyper **** Markup Language) وهى تعنى لغة الارتباطات التشعبية فانت تتنقل فى مواقع الانترنت عبر هذه الوصلات .
ما الذى احتاجه لتعلم لغة HTML الاجابة لا تحتاج شئ - وان كانت المعرفة البسيطة باللغة الانجليزية ستساعدك على سرعة الاستيعاب- فاللغة يمكن كتابتها فى notebad وهذا موجود فى نظام التشغيل Windows اى انها متوفرة لدى الجميع ايضا يمكنك كتابتها فى برامج مخصصة لذلك ولكنى لا انصحك ان تستخدم البرامج التى تقوم بكتابة الكود آليا مثل FrontPage .
ما الذى سأنجزه بعد تعلم لغة HTML ستكون لك القدرة على انشاء صفحات يمكنك عرضها على الشبكة الدولية "الانترنت" ولكن هذه ليست النهاية فحتى تستطيع الوصول لانشاء موقع عالمى يشهد لك الجميع بروعته لابد لك من تعلم ********** واذا اردت ان يتفاعل موقعك اكثر مع الزوار فعليك تعلم PHP وبتعلم MySql تكون مبرمج (مطور) صفحات محترف.
الاجزاء الاساسية لصفحة HTML:
تتكون الصفحة من جزأين اساسين هما الرأس head والجسم body.
رأس الصفحة هو الجزء الذى يحتوى على اجزاء خاصة بتعريف الصفحة مثل اللغة واسم مصمم الصفحة ووصف للصفحة ومفاتيح الكلمات (تستخدم بواسطة محركات البحث) , ولايظهر فى المتصفح من رأس الصفحة الا عنوان الصفحة.
اما جسم الصفحة فهو الذى يحتوى على جميع الاجزاء التى تراها مثل النصوص والجداول والصور وغيرها.
مثال
<html>
<head>
هنا يوضع مكونات رأس الصفحة
head>
<body>
هنا يوضع مكونات جسم الصفحة
body>
html>
ومكونات جسم الصفحة هى ما سنتناوله اولا فى هذه الدروس والذى كما اشرنا سابقا هو الجزء الذى يحتوى على جميع الاجزاء المرئية فى الصفحة من نصوص وجداول وصور ووصلات....
اولا ان كل جزء فى الصفحة لابد وان يكون ضمن وسم tag فكما تلاحظ الصفحة بالكامل تكتب ما بين وسم <html> و <html/>.
اى ان الوسوم هى المكون الاساسى للصفحة فلكى تقوم بعمل تنسيق معين لنص لابد من استخدام وسم مناسب لذلك او اردت ادراج صورة لابد وان تستخدم الوسم الخاص بذلك.
ثانيا يمكن لوسم واحد ان يعطى نتائج مختلفة باستخدام خصائص الوسم مثلا الوسم <font> يمكن ان يستخدم فى تلوين نص باللون الاحمر او تلوينه باللون الازرق
<font color="red">شبكة تكنولوجي فورسfont>
<font color="blue">شبكة تكنولوجي فورسfont>
فكما تلاحظ الخاصية color هى من خصائص الوسم font وبتغييرها نستطيع تغيير الناتج من استخدام هذا الوسم, ملحوظة عادة ما يكون للوسم اكثر من خاصية.
خاصية تداخل الوسوم فمثلا إذا اردنا عمل نص سميك نستخدم الوسم <b> وإذا اردنا ان نضع خط تحت النص نستخدم الوسم <u>. اما إذا اردنا ان نجعل النص سميك وتحته خط معا نستخدم خاصية تداخل الوسوم. مثال
<b><u>شبكة تكنولوجي فورسu>b>
تلاحظ أن الوسم المفتوح اولا يغلق اخرا وهى من القواعد التى يجب مراعاتها عند تداخل الوسوم.
وهكذا ترى ان لغة HTML لغة بسيطة جدا تتكون من مجموعة محفوظة من الوسوم والخصائص تمكنك من إنشاء الصفحة بسهولة, فهى ليست لغة برمجة بالمعنى المعروف.
مثال صفحتى الاولى
<html dir="rtl">
<head>
<title>صفحتى الاولىtitle>
head>
<body>
غدا سانتهى من اكمال هذه الصفحة ولكن حينها لن يكون العنوان صفحتى الاولى
body>
html>
الخاصية dir الملحقة بالوسم html هى المسئولة عن جعل اتجاه الصفحة من اليمين الى اليسار وسوف نتناولها بالتفصيل فيما بعد.
الوسم title هو المسئول عن عنوان الصفحة وهو من مكونات رأس الصفحة التى لن تكون محل اهتمامنا الان.
والان قم بنقل مكونات صفحتى الاولى وحفظها فى ملف notepad وغير امتداد الملف الى html. مثلا mypage.html وافتحها بالمتصفح لترى الناتج بنفسك.
*************
اولا التعامل مع النصوص
ثانيا التعامل مع الصور
ثالثا التعامل مع الوصلات
رابعا التعامل مع الجداول
خامسا التعامل مع النماذج
سادسا التعامل مع الاطارات
سابعا مكونات رأس الصفحة
أسأل الله ان اكون قد وفقت فى شرح هذا الدرس وارجو منك تقييمه.
تعتبر النصوص من المكونات الاساسية التى تكاد لا تخلو منها صفحة ويب لذلك فالتعرف على كيفية تنسيق النصوص من الاشياء الهامة فلغة HTML توفر لك ماتحتاجه لعمل تنسيق رائع للنصوص.
الوسم font من الوسوم المستخدمة مع النصوص فهو يوفر لك امكانية تغيير (لون وحجم ونوع) الخط باستخدام الخصائص (color و size و face) على الترتيب.
الخاصية color وهى المسئولة عن لون النص يمكن التعامل معها بطريقتين:
اما بكتابة اللون مباشرة "color="red وهى طريقة غير فعالة فالالوان المعروف اسمائها محدودة.
او بكتابة اللون فى شكل رقمى سداسى عشرى "color="#336699.
ملحوظة معظم برامج تحرير الصور تعرض المكافئ لاى لون فى شكل سداسى عشرى.
وكفكرة بسيطة عن هذه الطريقة تلاحظ العدد يتكون من 6 ارقام مقسمة الى ثلاثة ازواج من الارقام كل زوج مسئول عن لون اساسى RGB ومعناها (الاحمر والاخضر والازرق) اى ان 33 تعبر عن اللون الاحمر و 66 تعبر عن اللون الاخضر و 99 تعبر عن اللون الازرق.
فى العد العشرى اكبر رقم هو 9 بينما فى السداسى عشر اكبر رقم 15 لذلك فالعدد 10 فى العد العشارى يعبر عنه فى السداسى عشرى بالحرف a والحادى عشر b وحتى الخامس عشر f (اول ستة حروف فى اللغة الانجليزية) .
لاحظ ان الرقم مسبوق بعلامة # وهى تخبر المتصفح ان اللون مكتوب فى شكل ارقام وإن كان بعض المتصفحات تستنتج ذلك بشكل تلقائى.
فكر ماذا لو اردت ان اعبر عن اللون الاحمر بهذه الطريقة؟
نعم نعطى الجزء (الزوج) الخاص باللون الاحمر قيمة عظمى وبقية الاجزاء اصفار ff0000
الخاصية size وهى المسئولة عن حجم الخط تأخد قيم من 1الى 7 (من الصغير الى الكبير) مثلا "size="4 .
ويمكن كتابة القيمة بشكل اخر وهى اضافة موجب او سالب قبل القيمة + او - مثلا +2 وهى تعنى اضافة 2 الى القيمة الافتراضية وهى 3 فتصبح القيمة النهائية 5 وهكذا.
الخاصية face وهى المسئولة عن نوع الخط وهى تاخذ قيم عديدة تمثل اسماء الخطوط المتاحة ولكن يجب ان تلاحظ عند اختيار الخط انه متوافر عند غالبية الزوار
مثال "face="Tahoma.
ملحوظة يمكن كتابة اكثر من خط وبذلك إذا لم يجد المتصفح الخط الاول يتم اللجوء الى الثانى وهكذا
مثال "face="Arial, Helvetica, sans-serif.
مثال على الوسم font وخصائصه
<font color="#000000" size="4" face="Arial">شبكة تكنولوجي فورسfont>
<font color="blue">شبكة تكنولوجي فورسfont>
ملحوظة ليس بالضرورة اعطاء قيمة لكل خاصية من خصائص الوسم فأى خاصية لا تعطى لها قيمة يستخدم المتصفح القيمة الافتراضية لهذه الخاصية. مثلا اذا لم تحدد قيمة للخاصية size تستخدم القيمة الافتراضية وهى 3.
هناك ايضا بعض الوسوم الخاصة بتنسيق النصوص كجعل النص سميك او مائل او وضع خط تحت النص وغيرها.
ومنها <b> لجعل النص سميك.
<i> لجعل النص مائل
<u> لوضع خط تحت النص
<b>شبكة تكنولوجي فورسb>
<i>شبكة تكنولوجي فورسi>
<u>شبكة تكنولوجي فورسu>
يوجد ايضا وسم هام <p> وهو الخاص بالفقرات فمن الافضل كتابة كل فقرة فى وسم <p> منفصل فهو يقوم بانهاء السطر الحالى ووضع سطر فارغ بين كل فقرة كما ان له خصائص مفيدة
مثل الخاصية align الخاصة بالمحاذاة وتاخذ احدى ثلاثة قيم اما right محاذاه لليمين او left محاذاه لليسار او center محاذاه فى المنتصف
والخاصية dir وهى من الخصائص الهامة جدا للمستخدم العربى لانها هى المسئولة عن جعل اتجاه النص من اليمين الى اليسار (اللغة العربية) او من اليسار الى اليمين (اللغات الاخرى) .
وذلك عن طريق القيمتين rtl اى من اليمين الى اليسار او ltr اى من اليسار الى اليمين.
<"p align="right" dir="rtl>.
ملحوظة هذه الخاصية تستخدم مع العديد من الوسوم الاخرى ولعل اهمها الوسم html فبجعل قيمتها rtl تجعل اتجاه الصفحة بالكامل من اليمين الى اليسار <"html dir="rtl>
بعض المفاهيم العامة عن النصوص فى لغة HTML
اولا اذا قمت باضافة سطر جديد فى النص باستخدام المفتاح ادخال (Enter) مثلا فلن يظهر المتصفح هذا السطر الجديد وانما لاضافة سطر جديد ينبغى عليك استخدام الوسم <br>.
ملحوظة هذا الوسم من الوسوم التى لا تحتاج الى وسم اغلاق فلا معنى ل <br/> وهذا يبدو منطقيا فالوسم يقوم بانهاء السطر وبدء سطر جديد ولذلك لا حاجة لوسم اغلاق.
ثانيا المسافات بين الكلمات: لا يعتمد المتصفح اكثر من مسافة واحدة بين كلمتين متتاليتين واى مسافة بعد ذلك يتم اهمالها لذلك إذا اردنا وضع اكثر من مسافة بين كلمتين متتاليتين
نستخدم nbsp& ويستبدل المتصفح هذه الكلمة بمسافة.
حتى الان نكون قد تعرفنا على الكثير من طرق تنسيق النصوص ولكن يبقى اجزاء بسيطة سنتعرف عليها فى هذا الدرس.
العنواين headings ماهى الا نصوص سميكة تكون كبيرة جدا كما فى الوسم h1 او صغيرة جدا كما فى الوسم h6 وتتدرج من الكبر الى الصغر من الوسم h1 وحتى h6
كما ان المتصفح سيضيف سطر فارغ قبل وبعد اى عنوان
قم بتجربة ذلك بنفسك
<center>
<h1>عنوان 1h1>
<h2>عنوان 2h2>
<h3>عنوان 3h3>
<h4>عنوان 4h4>
<h5>عنوان 5h5>
<h6>عنوان 6h6>
center>
الوسم center ليس له علاقة بالعنواين وانما يستخدم فى التنصيف اى جعل محاذاة النص الى المنتصف
كما تلاحظ العنواين تتدرج فى الحجم من الوسم h1 الاكبر حجما وحتى h6 الاصغر حجما
سؤال هل يمكن استخدام الوسم font مع الوسم b كبديل عن استخدام الوسوم الخاصة بالعنواين
- نعم فالوسم h1 مثلا يمكن استبداله ب "font size="6 مع الوسم b
<font size="6"><b> h1 بديل عن الوسم b>font>
العناوين لا تتميز عن هذه الطريقة بالسرعة فى الكتابة فقط وانما وسم العنوان يقوم بانهاء السطر الحالى فى النص, ووضع سطر فارغ قبله وبعده
الوسم basefont وكلمة base معناها الاساس اى انه يقوم بتحديد القيم الافتراضية لتنسيق النص للصفحة بالكامل فمثلا القيمة الافتراضية للون النص هى الاسود والحجم 3 ولتغيير هذه القيم للصفحة بالكامل نستخدم هذا الوسم
<basefont color="#ffoooo" size="5" face="Tahoma">
الوسم له نفس خصائص الوسم font لكنه يقوم بتطيبقها على الصفحة بالكامل وهذا هو الاختلاف بينه وبين الوسم font الذى يطبقها على جزء محدد من النص
الوسم لا يحتاج الى وسم إغلاق
هل التعامل مع النصوص باستخدام لغة HTML طريقة فعالة ؟!!
لا تتسرع فى الاجابة فقط فكر فى هذا , قمت بعمل صفحة تحتوى على نصوص كثيرة ولتمييز بعض الجمل من النص قمت بتلوينها باللون الاحمر (مثلا) ولكن بعد ان انتهيت من اتمام الصفحة وجدت ان اللون الاحمر غير مناسب وفكرت فى استخدام الاخضر بدلا منه لتلوين الجمل المميزة. سيستغرق منك هذا العمل جهدا ووقتا خاصة إذا كان النص كبير وكانت الجمل المميزة كثيرة وهنا تظهر مشكلة تواجه مطور المواقع المحترف ولان الوقت ثمين ظهرت تقنية جديدة تسمى تنسيق الانماط الانسيابية cascading style sheets واختصارها CSS وهى ليست جزء من لغة HTML لكنها تستخدم معها لعمل التنسيق للصفحة وهى توفر القوة والسرعة وسوف نحاول شرحها فيما بعد.
ولكن كبداية سيكون التنسيق باستخدام HTML كافى خاصة مع الصفحات والمواقع البسيطة.
تهميش جزء من النص, معنى تهميش نص هى منع المتصفح من عرض هذا النص. ويستخدم ذلك لكتابة بعض الجمل التى تذكرك بشئ ما يساعدك إذا اردت تعديل الصفحة بعد ذلك وانت بالطبع لاترغب ان تظهر هذه الجمل للزائر
العلامة --!> تحدد بداية النص المهمش والعلامة <-- تحدد نهايته. كما هو واضح فى المثال
الصور من المحتويات الهامة لصفحة الويب فنادرا جدا ماترى صفحة تحتوى على نصوص فقط. لابد من وجود الصور التى تضيف الشكل الجمالى للصفحة وفى هذا الدرس سنتعرف على كيفية ادراج الصور والتعامل معها.
الوسم المستخدم للتعامل مع الصور هو img ولكن الوسم وحده لايكفى يجب استخدام الخاصية src معه والتى نحدد من خلالها مكان الصورة , ملحوظة الوسم img لايحتاج الى وسم اغلاق
صفحات ال HTML لا تحوى الصور وانما باستخدام الخاصية src مع الوسم img نقوم بالاشارة الى مكان الصورة المراد عرضها
مثال
<img src="pic.gif">
قم بنقل هذا السطر وضعه فى ملف HTML وضع بجوار الملف (فى نفس المجلد الموجود به الملف) صورة بإسم pic وبإامتداد gif.
الخاصية src خاصية ضرورية لادراج الصور والقيمة التى تأخدها هى المسار للصورة المراد ادراجها فإذا كانت الصورة بجوار ملف ال HTML فالمسار الى الصورة هو اسمها فقط, اما اذا كانت الصورة فى مجلد والمجلد بجوار ملف ال HTML فالمسار هو اسم المجلد بالاضافة الى اسم الصورة مثل "folder/pic.gif" وهذا النوع من المسارات يسمى المسارات النسبية لان المسار يكون بالنسبة لملف ال HTML , وهناك نوع اخر يسمى المسار المطلق وسوف نتطرق اليه عند التعامل مع الوصلات.
هناك العديد من الخصائص الملحقة بالوسم img والتى تمكننا من التعامل مع الصور مثل طول وعرض الصورة, محاذاة الصورة وغيرها.
الخاصية width مسئولة عن تحديد عرض الصورة بوحدة البيكسل pixel وإذا لم تحدد قيمة لهذه الخاصية فان المتصفح سيعرض الصورة بعرضها الحقيقى.
الخاصية height مسئولة عن تحديد طول الصورة بوحدة البيكسل pixel وإذا لم تحدد قيمة لهذه الخاصية فان المتصفح سيعرض الصورة بطولها الحقيقى.
وهاتان الخاصيتان تستخدمان اذا اردت تعديل طول وعرض (أبعاد) الصورة بدون استخدام برنامج معالجة صور, وحتى اذا لم ترغب فى تعديل أبعاد الصورة فمن الافضل تحديد الطول والعرض دائما.
<img src="pic.gif" width="50" height="50">
الخاصية align من الخصائص الهامة فى التعامل مع الصور وتأخد قيم كثيرة وهى تستخدم للتحكم فى محاذاة الصورة مع النص, فلك ان تعلم انه يمكنك وضع صورة وسط جملة نصية وستظهر الصورة فى النص مكان ادراجها مباشرة والهدف من هذه الخاصية هو التحكم فى وضعية النص يمين ويسار الصورة, والقيم المتاحة لهذه الخاصية هى top و middle و bottom وهناك قيمتين left و right ولكن عملهم يختلف عن عمل القيم السابقة
هذا جزء من النص قبل ادراج الصورة تكملة النص بعد ادراج الصورة.
كما تلاحظ تم محازاة النص يمين ويسار الصورة الى الحافة السفلية للصورة وهذه هى القيمة الافتراضية للخاصية وهى bottom.
يمكن جعل النص بمحازاة الحافة العلوية للصورة باستخدام القيمة top
<img src="pic.gif" width="50" height="50" align="top">
هذا جزء من النص قبل ادراج الصورة تكملة النص بعد ادراج الصورة.
اما القيمة middle فتجعل محازاة النص يمين ويسار الصورة الى منتصف الصورة
<img src="pic.gif" width="50" height="50" align="middle">
هذا جزء من النص قبل ادراج الصورة تكملة النص بعد ادراج الصورة.
استخدام القيمتين right او left :ذكرنا سابقا ان الصورة تظهر فى النص مكان ادراجها مباشرة ولكن عند استخدام احدى هاتين القيمتين مع الخاصية align فإن الصورة تظهر اما فى يمين الصفحة او يسار الصفحة , وفى هذه الحالة يلتف النص حول الصورة.
<img src="pic.gif" width="50" height="50" align="right">
<img src="pic.gif" width="50" height="50" align="left">
فى هذه الحالة يلتف النص حول الصورة اما الى اليمين او الى اليسار
القيمة المستخدمة هنا right
فى هذه الحالة يلتف النص حول الصورة اما الى اليمين او الى اليسار
القيمة المستخدمة هنا left.
الخاصية alt خاصية مفيدة وهى تقوم بتزويد المتصفح بنص بديل عن الصورة , ويظهر هذا النص فى حالة فشل تحميل الصورة. القيمة الملحقة بهذه الخاصية هى النص البديل.
<img src="pic.gif" alt="نص يظهر فى حالة فشل تحميل الصورة">
الخاصية border تقوم بوضع اطار حول الصورة. القيمة الملحقة بهذة الخاصية هى سمك الاطار بوحدة البيكسل pixel.
<center><img src="pic.gif" width="50" height="50" border="5">center>
لاحظ استخدام الوسم center الخاص بالمحاذاة الى المنتصف.
بقى ان نتعرف على خاصيتان هما hspace و vspace وهما متشابهان فى عملهما فهما يحددان المسافة البينية بين الصورة والنص المحيط بها والفرق ان hspace تحدد المسافة الافقية و vspace تحدد المسافة الرأسية.
<img src="pic.gif" width="50" height="50" hspace="20" vspace="20" title="شبكة تكنولوجي فورس">
النص قبل ادراج الصورةالنص بعد ادراج الصورة
لاحظ استخدام الخاصية title وهى خاصية عامة ولكن مفيدة مع الصور, ثبت السهم فوق الصورة لتعرف فائدتها بنفسك.
عند عدم تحديد قيمة للخاصية align تاخذ القيمة الافتراضية وهى bottomundefined