كيف تبني موقعا (للمبتدئين)
في هذا الموضوع الذي طلبه مني بعض الزملاء ، سنقوم معا خطوة بخطو ببناء موقع شخصي مجاني ..
لا يستغرق إنشاء الموقع نصف ساعة ، ولكني سأقسم الخطوات على عدة مرات حتى نتأكد من أن الجميع قد قام بالخطوة السابقة قبل الإنتقال للخطوة الجديدة ، وأيضا لمناقشة البدائل المختلفة لكل خطوة ..
لا أعتبر نفسي محترفا في تصميم المواقع ، لكني سأقدم لكم معلوماتي المتواضعة ، ومن كانت لديه اضافة من الاعضاء فلا يتردد في إفادتنا بها..
------------------------------------------------
الدرس الأول : ما هو الموقع ؟ ماذا نحتاج للحصول على موقع ؟ ما هي مواقع الاستضافة المجانية ؟
الموقع website هو مساحة فارغة على قرص صلب موجود في مكان ما لديه اتصال بشبكة الإنترنت ، ويمكن لأي مستخدم للإنترنت (أو لمستخدمين محددين) أن يدخلوا على محتوياته لقراءتها وتحميل الملفات منها وما إلى ذلك.
لتحصل على موقع تحتاج إلى ثلاثة أشياء : أولا أن يكون لديك جهاز كمبيوتر متصل بالشبكة طوال الوقت ، إذا لم يكن جهازك الشخصي صالحا لهذا - وهو الغالب - فإنك بحاجة إلى "مستضيف" تضع عنده ملفاتك وهو يقدمها للناس. وهذا قد يكون مجانيا مقابل إعلانات أو بدون اعلانات ولكن بمقابل مادي.
ثانيا يجب أن تكون هناك وسيلة يعرف بها الناس موقعك ، فمثلا هناك موقع اسمه aklaam.net ولكن نحن بحاجة إلى من يخبرنا أين يقع المستضيف الذي توجد عليه ملفات هذا الموقع. هذا ما يقوم به ال DNS. ويجب أن يقوم كل موقع بتسجيل نفسه في مكان مخصص لذلك وهذا يتم بمقابل مادي دائما، فيما عدا بعض الحالات التي يقوم فيها المستضيف باعطاء المستخدم اسما مجانيا ولكنه يحمل نفس النطاق الخاص بالمستضيف ، فمثلا لو سجلت YourName على ياهوو GeoCities فإنها ستعطينا اسما مثل
www.geocities.com/YourName
ثالثا وهو الأهم ، يجب أن يكون لديك موقع ! بمعنى أن تجهز ملفاتك التي تريد عرضها على الموقع وتقوم بتصميم صفحاته وشكلها وهذه الأشياء. عادة تكون هذه أصعب خطوة ، فهناك من لديه قصائد مثلا ويريد أن ينشرها في موقع شخصي ويضع بجانب كل قصيدة صورة يختارها وقد يرغب في اضافة خلفية موسيقية للصفحة .. الخ . كل هذا يحتاج إلى شخص كي يقوم به ، هو مصمم صفحات الإنترنت وهي مهنة قائمة بذاتها ولها كتب وشهادات وتفاصيل قد يعجز الفرد العادي عن أن يلم بها.
لكن الأمر ليس بهذا الصعوبة ، فكما سنرى معا أنه يمكن انشاء موقع بسيط وجميل وبدون أي تعقيد يمكن أيضا صيانته وتحديث محتوياته..
- مدونة أم موقع ؟
هناك نقطة أريد أن أوضحها لمن يريد أن يكون له صفحة على الإنترنت ، وهي أنه عليه أن يدرس خيار "المدونات" فهي تقدم الكثير وتوفر عليك الخطوات الثلاثة مرة واحدة ، تعطيك مساحة - غالبا غير محدودة - وتعطيك نطاق فرعي مجاني ، وهناك تصميمات كثيرة جاهزة يمكنك أن تختار منها أو تبدع واحدا بنفسك.
وقد حققت المدونات انتشارا واسعا هذه الأيام لسهولتها ومن أشهرها مدونات جوجل www.blogger.com .
وهناك مدونات أخرى كثيرة جدا ، يمكن البحث عنها على الإنترنت وبناءها ببساطة شديدة ..
- صفحات جوجل
حيث يمكننا أن نحجز مساحة واسم ونختار تصميما جاهزا لبناء صفحتنا في دقائق معدودة وكل هذا مجاني .
الآن لديكم الأختيار ، هل نكمل الدرس على أنه
1. كيف تعمل مدونة لك ؟
2. كيف تعمل صفحة على google pages ?
3. كيف تنشأ موقعا باستعمال HTML على Yahoo GeoCities ؟
ومن يريد أن يشارك معنا في الدرس ، يسجل اسمه وهدفه من انشاء الموقع المطلوب واختياره من الثلاثة السابقة.
أو من لديه اقتراح آخر فليتفضل به ..
لنبدأ إذن بالإختيار الثالث وهو بناء موقع على GeoCities ..
أول خطوة هي الذهاب للوصلة التالية :
اضغط على Sign Up now
ثم تسجيل الدخول على ياهوو ، تحتاج أن يكون لك حساب على ياهوو أولا ، ولكل حساب يكون هناك موقع واحد على GeoCities. إذا لم يكن لديك حساب على ياهوو ، سجل من هنا :
لاحظ أنه يمكن أن تحصل على إيميل من ياهو مع هذا الحساب إذا اخترت "Create my free Yahoo! email address." أو تكتفي بأن تجعل إيميل أخر هو المستخدم مع الموقع ، الأمر يرجع لك .
بعد هذا سيسألك عن نوع الموقع ، هل هو شخصي ، عائلي ، تعليمي ، تجاري .. الخ . اختر ما تشاء وادخل الكلمة المطلوبة في المربع المخصص ثم اضغط next .
ألف مبروك ، لقد أصبح لك موقع الآن !
حسنا ، مطلوب من الجميع تنفيذ هذه الخطوات التي لا تستغرق دقيقة واحدة ، ثم من ينتهي منها يخبرنا ومن واجهته مشكلة فليسأل ..
الخطوة الثانية بعد أن حجزنا الإسم هي بناء الموقع .. لن نبني موقعا معقدا ، بل سنعمل صفحة واحدة فقط.
مواقع الويب لها لغة واحدة اسمها HTML وهي لغة لوصف طريقة عرض البيانات. كيف سيعطي موقعك شفرة ال HTML للمستخدم ؟ هناك طرق كثيرة ، منها مثلا أن تكون هناك قاعدة بيانات - مثل قاعدة بيانات منتدى أقلام - وبرنامج يقوم بقراءة المشاركات من هذه القاعدة وينظمها في شكل هذه الصفحة التي تقرأها الآن. وبهذا تكون هذه الصفحات ديناميكية بمعنى أنها تتغير بتغير البيانات الموجودة في قاعدة البيانات ، فعندما يضيف عضو مشاركة ما وتقوم بعمل Refresh للصفحة ستظهر لك الصفحة الجديدة وبها المشاركة الجديدة تلقائيا بدون أي تدخل من صاحب الموقع . ويستطيع صاحب الموقع أن يعدل هذه البيانات (كأن يحذف مشاركة مثلا أو يدمج موضوعين ) أو يعدل البرنامج الذي يقرأها ويحولها إلى HTML ( كأن يعمل شكلا جديدا للمنتدى مثلا أو يضيف فيه خواصا جديدة).
الطريقة الثانية هي أن تعطي للمستخدم شفرة HTML مباشرة بنفسك . أي أن تقوم أنت بكتابة البيانات في الصفحة وتصميم شكلها بنفسك. ومن هنا فإن ذلك يترتب عليه أن البيانات ستظل كما هي إلى أن تغيرها أنت ، وسيظل شكل الموقع كما هو أيضا إلى أن تغيره بنفسك. هذه الطريقة تسمى استاتيكية static بخلاف الطرق الديناميكية المختلفة التي ذكرنا مثالا لها سابقا .
سنتبع هنا الطريقة الثانية وسننشأ صفحة استاتيكية ساكنة لا تحتوي إلا على عنوان وكلمة ترحيب .. هذه الصفحة ببساطة شديدة هي هذا الكود :
<title> Welcome to My Page </tilte>
<body> This page is done in Aklaam lesson. </body>
الخطوات : أفتح ملفا جديدا في ال notepad والصق فيه السطرين الموجودين أعلاه ، احفظ الملف واعطه هذا الأسم index.html ، انتبه لحالة الحروف عند ادخالك هذا الأسم.
افتح الملف في متصفحك للتأكد من أنه يعمل ، إذا كنت تستخدم انترنت اكسبلورر اختار open من قائمة file وافتح هذا الملف .. أو ببساطة انقر عليه مرتين بالماوس.
ستظهر لك صفحة خالية عنوانها Welcome to My Page وفيها سطر واحد This page is done in Aklaam lesson.
إذا لم ترق لك هاتين الجملتين ، قم بتغييرهما .
الآن معنا اسم الموقع ، ومعنا الموقع نفسه (صحيح أنه سطرين فقط ، لكنه بداية للتعلم وسنعرف كيف نضيف المزيد بعد قليل إن شاء الله) . الخطوة الثالثة والأخيرة هي رفع الموقع .
الخطوة الثالثة والأخيرة كما قلت لكم هي رفع الموقع .. أدخل على لوحة التحكم الخاصة بموقعك بعد أن تسجل دخولك على ياهو بكتابة اسمك وكلمة السر :
اختر browse ثم اختر الملف الذي صنعناه في الخطوة السابقة واسمه index.html اضغط موافق ثم upload .. انتظر لحظات وسيخبرك بأن الرفع قد تم بنجاح ..
الآن سترى الصفحة التي قمنا بعملها والتي تحتوي على عنوان وسطر واحد فقط..
إلى هنا انتهت خطوات بناء الموقع ، الخطوات الثلاثة لا تستغرق خمسة دقائق على الأكثر..
الآن إذا أردت أن تعدل صفحتك الصغيرة كل ما عليك هو اعادة الخطوتين الأخيرتين .. عدل الملف index.html بكتابة جملة أخرى مكان العنوان فيها أسم الموقع الذي تريده ثم ارفعه بواسطة easy upload .
أعتقد أن الموضوع بسيط جدا ..
أرجو أن يضع الأصدقاء الذين نجحوا في هذه الخطوات الثلاثة وصلات مواقعهم هنا ، حتى نعرف كم شخص استفاد من هذا الدرس ..
ومن كان لديه سؤال فليتفضل به ..
p نبذة تاريخية حول لغة HTML
الـ HTML هي اختصار Hyper Text Markup Language أي لغة ترابط النصوص التشعبية , وهي التقنية الجوهر التي تتحكم بما سوف يعرضه المستعرض على الشاشة.
تم تصميم HTML في البدء لكي يتمكن العلماء من إنشاء مستندات نصية تحتوي على أوامر تنسيق أساسية تسمى (ترميز) وارتباطات إلى معلومات أخرى (تسمى نصوص تشعبية أو ارتباطات تشعبية) على سبيل المثال يمكن أن يحتوي مستند عن الهزات الأرضية على ارتباط إلى مستندات أخرى تتحدث عن الهزات الأرضية كتبها علماء آخرون.
لم يخطر على بال مخترعي HTML أن هذه التقنية ستبرهن عن فعالية وفائدة لدرجة أنها ستصبح السبب الرئيسي لنمو الوب.
أساسيات الوسوم (الأوامر) :
هي عبارة عن مجرد ملف نصي عادي يكتب في أي برنامج نصي (على سيبل المثال NotePad) ويحفظ بصيغة HTML أو HTM , ويحتوي هذا المستند على شفرات خاصة تسمى وسوم "أوامر" (Tags) توضع عادة حول كتل من النصوص , تلك الكتل والوسوم تسمى عناصر (Elements) ويفسر مستعرض الوب كإنترنت إكسبلورر او نيتسكيب تلك العناصر ليحدد كيفية عرضه على الشاشة. في معظم الأحيان, يملك كل عنصر في HTML وسم فتح ووسم أغلاق ويتألف وسم الفتح من إسم الوسم مع أشارتي أصغر من وأكبر من < و > . على سبيل المثال:
وسم فتح الخط العريض هو <B> ويكون وسم إغلاقه محصوراً بين الإشارات أيضاً ولكن في هذه الحالة توجد شرطة أمامية قبل إسم الوسم <B/>, ويوضع النص الذي سيتأثر بالوسم بين وسمي الفتح والإغلاق ... وعند قيام المستعرض بالتفسير سيظهر النص المكتوب بين الوسمين.
على سبيل المثال :
لكتابة الإنترنت للجميع بالخط العريض نجعلها بين وسمَيْ الفتح والاغلاق
<B/>الإنترنت للجميع<B>
** قبل كل شيء إفتح أي برنامج كتابة لديك على سبيل المثال برنامج المفكرة Notepad في ويندوز. واكتب الآتي :-
<HTML dir=rtl>
<HEAD>
<TITLE>صفحة إختبار</TITLE>
</HEAD>
<BODY>
مرحباً بكم في عالم الإنترنت
</BODY>
</HTML>
إحفظ الملف بأي إسم ولكن بصيغة html. مثلاً : index.htm أو index.html
وسوم HTML الحيوية :
الوسم الأول <HTML dir=rtl> يشير للمستعرض أنَّ المواد التي تليه يجب معالجتها باستعمال قواعد التركيب النحوي ..والبنيوي الذي تفرضه لغة HTML ، و dir=rtl تخبر المستعرض أن الكتابة ستكون من اليمين إلى اليسار.(كلغتنا الحبيبة).ويظهر وسم الإغلاق المناسب له كالتالي <HTML/> في نهاية الملف.
وسوم الترويسة :
يشير الوسمان .. <HEAD> و <HEAD/> إلى حدود منطقة الترويسة في الملف .. التي تحتوي على بنود لا تظهر على الصفحة بشكل مباشر ، وهي اختيارية .. رغم أن بعض العناصر تعمل فقط عند وضعها ضمنها .. TITLE هو أحد العناصر . يعرف الوسمان <TITLE> و <TITLE/> ما سيظهر في شريط عنوان المستعرض (الشريط الأزرق الموجود فوق شريط القوائم) ...انظر الى المستعرض الذي أمامك ترى شريط فوق في الاعلى يظهر عليه اسم البرنامج.إذاً سيكون إسم صفحتنا هو (صفحة إختبار).
وسوم الجسم :
المنطقة التالية المبينة في السرد محصورة بالوسمين <BODY> و <BODY/>. كما تتوقع هذه المنطقة تسمى جسم المستند وتحتوي على محتويات المستند - المواد المرئية على الصفحة. لذا فإن مثالنا يعرض النص (مرحباً بكم في عالم الإنترنت).
سيكون الناتج في المستعرض كالتالي:-
مرحباً بكم في عالم الإنترنت
وسوم تنسيق الأحرف :
إذا بين المثال السابق حدود اللغة HTML فإن الويب مضجرة جداً. لكن يمكنك أن تكون إبداعياً أكثر وتغيّر مظهر النص بواسطة وسوم الأحرف ، كما هو مبين في السرد التالي:-
<HTML dir="rtl">
<HEAD>
<TITLE>صفحة إختبار</TITLE>
</HEAD>
<BODY>
هذا يريك <B>نصاً عريضاً</B>
هذا يريك <I>نصاً مائلاً</I>
هذا يريك <U>خطاً تحت النص</U>
<FONT COLOR="blue">هذا يريك كيفية تغيير لون الخط</FONT>
<FONT SIZE="5">هذا يريك كيفية تغيير حجم الخط</FONT>
<FONT FACE="Tahoma">هذا يريك كيفية تغيير نوع الخط</FONT>
السطران الأولان في الجسم يحتويان على وسمي تنسيق أحرف أساسيين ، لجعل النص أسود عريضاً ومائلاً. في السطر الأول ، يحيط الوسمان <B> و <B/> بالكلمتين نصاً عريضاً وهاتين الكلمتين ستظهران سوداوان عريضتان في المستعرض. وفي السطر التالي يؤدي الوسمان <I> و <I/> إلى جعل الكلمتين نصاً مائلاً مائلة. هناك أيضاً عدة وسوم تنسيق أحرف أخرى ، كـ <U> للتسطير و <STRIKE> للشطب و <SUP> لرفع الأحرف.
يمكنك استعمال الوسم <FONT> لإعداد تنسيق نصي أكثر تعقيداً. يدعم هذا الوسم عدة سمات (attributes) متنوعة ، منها السمة COLOR و SIZE و FACE ، تحدد بالتفصيل كيفية عمله. هناك عدة وسوم أخرى تدعم السمات، وتسمى أحياناً بارامترات.
يبيّن الوسم <FONT> الأول كيفية استعمال السمة COLOR التي تتيح لك تغيير لون النص. تدعم السمة COLOR نطاقاً كبيراً من الألوان ، من AliceBlue إلى Khaki إلى YellowGreen. تدعم السمة COLOR أيضاً استعمال قيم RGB ثلاثية ستعشرية ، أي ما معناه أنه يمكنك تحديد الألوان بواسطة أرقام ستعشرية (0000FF# مثلاً ) لا تقلق إذا كانت هذه الطريقة غير مألوفة لديك. (يمكنك استخدام برنامج باينت شوب برو).
يتضمن الوسم <FONT> التالي السمة SIZE الذي يتيح لك تغيير الحجم النسبي للنص. يمكنك ضبط حجم النص على مقياس من 1 إلى 7 ، حيث الحجم 7 هو الأكبر. لا تتوافق هذه الأرقام مع أي حجم نقاط أو بكسلات محدد ، ونفس إعداد الحجم يمكنك أن يختلف مظهره في الأنظمة المختلفة يمكنك اكتساب مزيد من التحكم باستعمال مزيد من التحكم باستعمال أوراق الأنماط المتتالية.
يستعمل الوسم <FONT> الأخير السمة FACE لتغيير نوع خط النص. بشكل عام ، من الجيد استعمال الخط الإفتراضي لأنه من الصعب عادة التكهن بأنواع الخطوط المتوفرة في كمبيوتر المستخدم. هذا الأمر صحيح خصوصاً في الحالات التي يتمكن أن تتراوح فيها منصات عمل المستخدم من ويندوز إن تي على كمبيوتر شخصي إلى System 8 على ماكنتوش. بعض الخطوط المتوفرة عادة تتضمن Arial و Courier و Times و Vendana (يدعم إنترنت إكسبلورر 4 تقنية تدعى تضمين الخطوط ، تتيح شمل خطوط يستطيع المستخدمون تحميلها مع الصفحات).
سيكون الناتج في المستعرض كالتالي :-
هذا يريك نصاً عريضاً هذا يريك نصاً مائلاً هذا يريك خطاً تحت النص هذا يريك كيفية تغيير لون الخط هذا يريك كيفية تغيير حجم الخط هذا يريك كيفية تغيير نوع الخط
يمكن وسم واحد أن يكون له عدة سمات. مثلاً الإعداد التالي للوسم <FONT> ينتج نصاً أزرق كبير مكتوب بالخط Times.
<FONT SIZE="7" COLOR="blue" FACE="Tahoma">
يمكنك كتابة السمات في أي ترتيب تريده لتحقيق نفس النتيجة.
قد تتفاجأ بأن تعلم أن المستعرض يعالج أسطر HTML المستقلة في المثال السابق كأنها سطر متواصل من النص يلتف فقط عندما يصل إلى حافة إطاره. ولكن هناك وسوم تجعله يبدأ سطراً جديداً مثل <P> و <BR>. الوسم <P> إختصار Paragraph ، أي فقرة. وفي هذه الأثناء سيبدأ المستعرض بفقرة جديدة. والأمر <BR> يدرج فاصل أسطر. والفرق بين هذين الوسمين أن <BR> لا يدرج أي أسطر إضافية فارغة. لنبدأ بالمثال التالي لنبين لك الفرق بين هذين الوسمين:-
<HTML dir=rtl>
<HEAD>
<TITLE>صفحة إختبار</TITLE>
</HEAD>
<BODY>
مرحباً بكم في عالم الإنترنت
<BR>
لا يوجد فاصل أسطر إضافي أعلى هذا النص.
<P>
يوجد فاصل أسطر إضافي أعلى هذا النص.
</BODY>
</HTML>
سيكون الناتج في المستعرض كالتالي:-
مرحباً بكم في عالم الإنترنت
لا يوجد فاصل أسطر إضافي أعلى هذا النص.
يوجد فاصل أسطر إضافي أعلى هذا النص.
كما قلنا في مبادئ HTML أن الوسمان <BR> و <P> يجعلان المستعرض يبدأ سطراً جديداً. وقد بينا الفرق بينهما. ولكن الوسم <P> له عدة سمات. فبإمكانك أن تجعل الفقرة على اليمين وفي الوسط وعلى اليسار. وذلك باستخدام السمة ALIGN.كما يمكنك أن تجعل النص في الوسط باستخدام الوسم <CENTER>. لنجري هذا الإختبار لنتعرف على كلا الوسمين أكثر:-
<HTML alt=rtl>
<HEAD>
<TITLE>إختبار تنسيق فقرة</TITLE>
<BODY>
<P ALIGN="right">هذا الفقرة على يمين الصفحة.</P>
<P ALIGN="center">هذه الفقرة في منتصف الصفحة.</P>
<P ALIGN="left">هذه الفقرة على يسار الصفحة.</P>
<CENTER>هذا النص في الوسط أيضاً ولكن بوسم آخر</CENTER>
</BODY>
</HTML>
سيكون الناتج ما يلي:-
هذه الفقرة على يمين الصفحة.
هذه الفقرة في منتصف الصفحة.
هذه الفقرة على يسار الصفحة.
لنبدأ الآن التكلم عن وسم آخر. ألا وهو وسم الخط الأفقي<HR> الذي ينشئ خطاً أفقياً على عرض الصفحة. أنظر إلى هذا الخط ..
--------------------------------------------------------------------------------
تستطيع أن تضع الخط أعلاه بمجرد كتابة الوسم <HR> . دعنا الآن نغير خصائص هذا الخط. همممم ... لنعمل على توسيع عرض هذا الخط بنسبة 8 بكسل. ولتوسيعه أكتب الأمر التالي:-
<HR SIZE="8">
--------------------------------------------------------------------------------
ولكن لونه خافت. لنلونه بلون آخر. مثلاً بالأحمر. أكتب الأمر التالي:-
<HR SIZE="8" COLOR="red">
--------------------------------------------------------------------------------
أن لون الخط لم يتغير لماذا؟. إذا لم يتغير لون الخط.. فهذا يعني أنك تستعمل مستعرض Netscape.لأن نتسكايب لا يغير لون الخط الأفقي.
عظيم.. ولكن هذا الخط يبدو كبيراً. أريد أن أصغر حجمه بحيث يأخذ 50% من الصفحة. أكتب الأمر الآتي:-
<HR SIZE="8" COLOR="red" WIDTH="50%">
--------------------------------------------------------------------------------
أريده أن يكون على جهة اليمين . أكتب الأمر الآتي :-
<HR SIZE="8" COLOR="red" WIDTH="50%" ALIGN="right">
--------------------------------------------------------------------------------
الآن يمكنك أن تغير كل مواصفات هذا الخط ولا أعتقد أنك بحاجة إلى أمثلة أكثر .. صح؟
لنأتي إلى وسوم أخرى. الوسوم <H1> , <H2> , <H3>, <H4>, <H5>, <H6>. هذه الوسوم تجعل النص عريضاً وكبيراً حسب الرقم. وكلما كان الرقم أصغر كلما كان النص أكبر.ووظيفته كوظيفة عناوين الصحف Heading.. لنجري هذا الإختبار:-
<HTML alt=rtl>
<HEAD>
<TITLE>إختبار</TITLE>
</HEAD>
<BODY>
<H1>النمط الأول
<H2>النمط الثاني
<H3>النمط الثالث
<H4>النمط الرابع
<H5>النمط الخامس
<H6>النمط السادس
</BODY>
</HTML>
سيكون الناتج ما يلي:-
النمط الأول
النمط الثاني
النمط الثالث
النمط الرابع
النمط الخامس
النمط السادس
أعتقد أنك فهمت ما تعنيه تلك الوسوم. فالمثال واضح جداً. لنذهب لزيارة وسم آخر.. الوسم <UL>. وهو وسم تشييد اللوائح... أنا لم أفهم ماذا تقصد بتشييد اللوائح! هل هي ألواح خشبية؟! حسناً.. لنجري هذا الإختبار للتعرف عليه. ولا تخف فهو من النوع الذي لا يعض.
<HTML alt=rtl>
<HEAD>
<TITLE>تشييد اللوائح</TITLE>
</HEAD>
<BODY>
<UL>
<LI>اللائحة الأولى
<LI>اللائحة الثانية
<UL>
<LI>اللائحة الأولى من اللائحة الثانية
<LI>اللائحة الثانية من اللائحة الثانية
</UL>
<LI>اللائحة الثالثة
</UL>
</BODY>
</HTML>
هل عرفت الآن معنى اللوائح؟ لاحظ أنك بعد أن تكتب الوسم <UL> لابد أن تفتح وسم <LI> ثم نص اللائحة. وإذا أردت أن تفتح لائحة داخل لائحة لابد أن تكتب الوسم <UL> مرة أخرى ثم وسم <LI> وبعد ذلك نص اللائحة. وإذا أردت غلق اللائحة أكتب الوسم <UL/>.أوه .. أعتقد أن مخك ومخي قد تصدعا من كلمة لائحة. لنشرب فنجان قهوة.
أنت تشرب قهوتك على مهل.. حسناً سأتحدث عن الجداول بينما أنت تشرب قهوتك. الجداول تساعدك في تنظيم وترتيب وتنسيق النصوص والقواعد. هل تستخدم مايكروسوفت وورد؟ هل استخدمت الجداول فيه؟ يمكنك تنسيق الجداول في إنترنت كتنسيق الجداول في وورد أو إكسل. والوسم الخاص بالجداول هو <TABLE>. وإذا أردت فتح صف أكتب الوسم <TR> إختصار Table Row أي صف الجدول. وكلما كتبت الوسم <TD> إختصارTable Data أي بيانات جدول يبدأ عمود جديد. أخيراً انتهيت من قهوتك. لنبدأ بمثال للجدول.
<HTML dir=rtl>
<HEAD>
<TITLE>مثال للجداول</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>الصف الأول العمود الأول
<TD>الصف الأول العمود الثاني
</TR>
<TR>
<TD>الصف الثاني العمود الأول
<TD>الصف الثاني العمود الثاني
</TR>
</TABLE>
</BODY>
</HTML>
إن السمة BORDER تجعل عرض إطار الجدول قيمته 1. يمكنك زيادة عرضه كيفما شئت. وإذا أردت إخفائه .. دع قيمته صفر.
الوسم الخاص بالروابط هو <A> ووسم الإغلاق هو <A/> ، وأي شيء يقع بين هذين الوسمين يكون مربوط بالملف. لنفترض أنك تريد ربط ملف أسمه MyLink.html ، لكي تربط هذا الملف أكتب ما يلي:-
<A HREF="MyLink.html"> هذه الجملة ستكون مربوطة بالملف </A>
سيكون الناتج كالتالي :-
هذه الجملة مربوطة بالملف (MYLINK.HTML)
فعند النقر على الجملة ، سيؤدي ذلك إلى فتح الملف MyLink.htm في المستعرض. لنربط الآن صورة ألا وهي MyPicture.jpg ، أكتب هذا السطر:-
<A HREF="MyLink.html"> <IMG SRC="MyPicture.jpg></A>
سيكون الناتج كالتالي :-
عند النقر على الصورة .. سيؤدي ذلك لفتح الملف MyLink.html. ولكن هذه الصورة يحوطهاإطار أزرق ، لحذف الإطار أكتب الآتي:-
<A HREF="MyLink.html"> <IMG SRC="MyPicture.jpg BORDER="0"></A>
القيمة 0 بعد السمة BORDER تجعل عرض الإطار صفراً. ويمكنك زيادة عرض الإطار بتبديل الصفر بعدد البكسل الذي تريده.
لنجري الآن هذا الإختبار للتعرف على الروابط أكثر:-
<HTML DIR="rtl">
<HEAD>
<TITLE>إختبار الروابط</TITLE>
</HEAD>
<BODY>
إضغط
<A HREF="MyLink.html">
هنا
</A>
لفتح الملف. أو إضغط الصورة.
<A HREF="MyLink.html"> <IMG SRC="MyPicture.jpg" BORDER="0"></A>
</BODY>
</HTML>
سيكون الناتج كالتالي :-
إضغط هنا (MYLINK.HTML) لفتح الملف. أو إضغط الصورة.
<A HREF="mailto:Matrook@mail.com"> بريد </A>
في المستعرض عندما تنقر على كلمة (بريد) سيتم تشغيل أحد برامج البريد كـ (الأوت لوك) ويتم كتابة العنوان Matrook@mail.com في خانة (إرسال إلى).
