Msword 199680 1222206878

  • October 2019
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Msword 199680 1222206878 as PDF for free.

More details

  • Words: 6,994
  • Pages: 30
‫بسم الله الرحمن الرحيم‬ ‫دورة متقدمة في ‪HTML‬‬ ‫‪14/9/2000‬‬

‫تأليف ‪mubarmej :‬‬

‫يشير الختصار ‪ HTML‬إلى عبارة ‪ HyperText Markup Language‬أو لغة الترميز المتشعبة‪ ،‬وهذه اللغة هي اللغة المستخدمة في تصميم جميع صفحات الويب الحترافية‪ ،‬فهل تريد أن‬ ‫تصمم صفحات ويب احترافية ؟ تعال الن وشارك الركب‪.‬‬

‫مقدمة‬ ‫تكتتب ملفات ‪ HTML‬فتي صتورة ملفات نصتوص بستيطة (‪ ،)Plain Text‬تأختذ المتداد ‪ html.‬عادة‪ ،‬وتكتتب فتي أي برنامتج للنصتوص البستيطة‪،‬‬ ‫فتي الويندوز استتخدم ‪ ،Notepad‬فتي اللينكتس استتخدم ‪ ،pico‬فتي الماكنتوش استتخدم ‪ ،SimpleText‬جميتع هذه البرامتج مناستبة جدا لعمتل‬ ‫صفحات ‪.HTML‬‬ ‫المر الخر الذي ستحتاج إليه هو متصفح للنترنت‪ ،‬ولن يكون أكثر من ‪ Internet Explorer‬أو ‪ Netscape Navigator‬أو الثنين معا‪ ،‬وبما‬ ‫أنك الن تتطلع على هذه الصفحة فل بد من أنك تمتلك المتصفح أيضا‪ ،‬ستحتاج إلى معاينة الصفحات بالمتصفح بعد كتابها‪ ،‬ولن المتصفحات‬ ‫تختلف متن نوع إلى آختر لذا يفضتل أن تقوم بمعاينتة صتفحتك بجميتع المتصتفحات الموجودة وتتأكتد متن أنهتا تظهتر بشكتل ستليم فتي جميتع‬ ‫المتصتفحات‪ ،‬لن الجمهور الذي ستيزور صتفحتك ستيستخدم المتصتفح الذي يفضله هتو لذلك فإن عليتك التأكتد متن أن الجمهور يستتطيع رؤيتة‬ ‫الصفحة بمتصفحه أيا كان‪.‬‬ ‫المشكلة التتي قتد تواجهتك فتي كتابتة صتفحاتك هتي دعتم المتصتفحات للغتة العربيتة أول‪ ،‬ودعمهتا لختر التقنيات ثانيتا‪ ،‬يقدم متصتفح ‪Internet‬‬ ‫‪ Explorer‬متن ‪ Microsoft‬دعمتا رائعتا للغتة العربيتة‪ ،‬ولختر تقنيات الويتب مثتل ‪ HTML 4.0‬و ‪ CSS‬و ‪ XML‬وغيرهتا‪ ،‬وأمتا متصتفح ‪Netscape‬‬ ‫‪ Navigator‬فهو ل يدعم اللغة العربية بشكل جيد ولتحسين دعم اللغة العربية تحتاج إلى برنامج ‪ Sindbad‬من شركة صخر‪ ،‬وفي كل الحوال‬ ‫يظل متصفح ‪ Netscape Navigator‬متصفحا متعبا في التصميم‪ ،‬لهذه السباب جميعا اعتمدنا متصفح ‪ Internet Explorer 5.0‬كمتصفح‬ ‫قياسي لصفحات موقعنا‪ ،‬فهي تظهر بشكل رائع فيه‪.‬‬ ‫ملحوظة‬

‫آخر إصدارة من متصفح ‪ Netscape Navigator‬هي الصدارة ‪ 4.72‬وآخر إصدارة من برنامج ‪ Sindbad‬هي ‪ 4.51‬وقد توقفت شركة صخر‬ ‫عن تعريب ‪ Navigator‬في الونة الخيرة لسباب ل أعرفها‬ ‫بعد كل هذا ‪ ..‬لغة ‪ HTML‬لغة وصفية سهلة جدا ذات قدرات عالية وميزات فريدة وقوية‪ ،‬جميع الصفحات العالمية متقنة التصميم تم إعدادها‬ ‫باستخدام لغة ‪ ،HTML‬تتميز ‪ HTML‬أيضا بأنها ذات قواعد سهلة ومعروفة‪ ،‬تستطيع أيضا في لغة ‪ HTML‬عمل الشيء نفسه بأكثر من طريقة‪،‬‬ ‫لذلك ومهما كانت الطريقة التي تفكر بها ستجد أنك تحصل غالبا على ما تريده بالضبط‪.‬‬ ‫تتكون ملفات ‪ HTML‬من قسمين ‪:‬‬ ‫•المحتوى ‪ :‬وهو ما يشاهده الجمهور في صفحتك‪.‬‬ ‫•الوسوم ‪:‬وهي الجزاء التي تحدد كيف سيشاهد جمهورك المحتوى السابق‪ ،‬فهي تصف المحتوى من حيث التنسيق‪.‬‬ ‫مثال على ذلك هذا السطر من لغة ‪.. HTML‬‬ ‫‪HTML is a Great Language‬‬ ‫وعند استخدام المتصفح في مشاهدة السطر السابق سيظهر هكذا ‪..‬‬ ‫‪Great Language HTML is a‬‬

‫في المثال السابق تبدو أجزاء ملف الت ‪ HTML‬واضحة‪ ،‬المحتوى الذي يتمثل في عبارة ‪ ،HTML is a Great Language‬والوسوم المحاطة‬ ‫بعلمتتي < و >‪ ،‬فتي المثال الستابق استتخدمنا وستما يدعتى ‪ b‬وهتو اختصتار لكلمتة ‪( bold‬عريتض)‪ ،‬ويأتتي فتي صتورة زوج متن الوستوم‪ ،‬وستم‬ ‫للفتتح ووستم للغلق‪ ،‬ويتميتز وستم الغلق عتن وستم الفتتح فتي أنته يحتوي على علمتة ( ‪ ) /‬قبتل استم الوستم‪ ،‬وستم الفتتح يعنتي أن المتصتفح‬ ‫يجتب أن يطبتق الوصتف الموجود فتي الوستم على جميتع النصتوص الذي تلي الوستم وحتتى يصتل إلى وستم الغلق‪ ،‬مثتل التشغيتل والطفاء ‪..‬‬ ‫وستم الفتتح يشغتل ميزة الختط العريتض ووستم الغلق يطفتأ هذه الميزة‪ ،‬وكمتا أن هنالك وستما للختط العريتض ‪ ..‬هنالك وستم للختط المائل‪،‬‬ ‫وآختر لتغييتر الختط‪ ،‬ووستوم أخرى للجداول والصتور‪ ،‬جميتع عناصتر ملف ‪ HTML‬يتتم إدراجهتا عتن طريتق الوستوم‪ ،‬وتحدد خصتائصها أيضتا عتن‬ ‫طريق الوسوم‪.‬‬ ‫إذا أردت مثل أن تغير الخط في كلمة ‪ Great‬في مثالنا السابق‪ ،‬سنحتاج إلى استخدام الوسم ‪ ،Font‬حيث سنستخدم الوسم ‪ Font‬بأن نضبط‬ ‫خاصية لون الخط في كلمة ‪ Great‬إلى اللون الحمر‪ ،‬ويتم هذا كالتالي ‪..‬‬ ‫‪HTML is a Great Language‬‬ ‫حيث ستبدو هكذا ‪..‬‬ ‫‪Language HTML is a Great‬‬ ‫في المثال السابق يتضح لنا أمر آخر‪ ،‬وهو أنه حتى نضبط خصائص أحد الوسوم فإننا نقوم بوضع إسم الخاصية بعد اسم الوسم بين علمتي‬ ‫التت< والتت> ونفصتل بيتن استم الوستم والخاصتية بمستافة بيضاء‪ ،‬وتكون الخصتائص فتي صتورة إستم="قيمتة" أي إستم الخاصتية ثتم علمتة‬ ‫المساواة ثم قيمة الخاصية بين أقواس القتباس المزدوجة‪ ،‬في المثال السابق قمنا بضبط الخاصية ‪ color‬للوسم ‪ font‬عند القيمة ‪ ،red‬وإذا‬ ‫كان هنالك أكثر من خاصية يمكننا إضافتها أيضا في نفس المكان‪ ،‬بحث نفصل كل خاصية والخرى بمسافة‪ ،‬مثل ‪..‬‬ ‫‪HTML is a Great Language‬‬ ‫التي ستظهر هكذا ‪..‬‬

‫‪Great HTML is a‬‬

‫‪Language‬‬

‫أمور إضافية يجب أن تعرفها عن ‪.. HTML‬‬ ‫•لغة ‪ HTML‬ل تراعي حالة الحرف من حيث كونها كبيرة أو صغيرة‪ ،‬أي أنه في ‪ HTML‬وضع <‪ >b‬ل يختلف عن <‪.>B‬‬ ‫•يمكتن إحاطتة قيتم الخصتائص بعلمتة إقتباس مزدوجتة ( " ) أو مفردة ( ' )‪ ،‬ويمكتن أيضتا عدم إحاطتهتا بأي منهتا إذا كانتت القيمتة‬ ‫تتألف من كلمة واحدة دون مسافات‪.‬‬ ‫•بعض الوسوم تحتاج إلى وسم إغلق وبعضها ل يحتاج إليه‪.‬‬ ‫•قد وقد ل يحتوي وسم الفتح على خصائص إضافية‪ ،‬ولكن وسم الغلق ل يحتوي أبدا على هذه الخصائص‪.‬‬ ‫•لغتة ‪ HTML‬ل تراعتي المستافات البيضاء‪ ،‬وتعتبرهتا جميعتا مستافة واحدة‪ ،‬أي أن وضتع مستافة واحدة بيتن كلمتيتن‪ ،‬يستاوي وضتع‬ ‫مسافتين‪ ،‬ويساوي وضع ثلثين مسافة‪ ،‬ويساوي وضع سطر جديد‪ ،‬ويساوي وضع جدولة ‪ ،tab‬كلها تترجم إلى مسافة‪.‬‬ ‫•توضع التعليقات بين --‬أي أن المتصفح يتجاهل أي شيء بينهما وكأنه غير موجود‪.‬‬

‫‪HTML‬‬ ‫يتكون ملف ‪ HTML‬القياسي من جزئين رئيسيين هما ‪:‬‬ ‫•الرأس ‪ : Head‬يحتوي على المعلومات الضافيتة الخاصتة بالمستتند مثتل عنوان الصتفحة والكلمات المفتاحيتة فيهتا وغيرهتا متن‬ ‫المور الخاصة بالصفحة والتي ل تعتبر من ضمن المحتوى‪.‬‬ ‫•الجسم ‪ : Body‬وهو يحتوي على المحتوى الذي يراه المستخدم‪.‬‬ ‫المثال التالي يبين كيفية تقسيم ملف ‪.. HTML‬‬

‫>‪‪‪‪‪‪head‬و <‪ ،>head/‬أما الجزاء التابعة للجسم‬ ‫فتوضع بين الوسمين <‪ >body‬و <‪. >body/‬‬ ‫يتم تحديد عنوان المستند الذي يظهر في شريط العنوان للمتصفح بإحاطته بت <‪ >title‬و <‪ ،>title/‬والمكان الصحيح لوسم الت <‪ >title‬هو‬ ‫الرأس‪ ،‬حيث أن الوسم ‪ title‬ل يعتبر من ضمن محتوى الصفحة ول يظهر في الصفحة‪ ،‬وهو يستخدم في عمليات البحث والرشفة كما في‬ ‫محركات البحث‪ ،‬ول يمكنك وضع وسوم تنسيق أخرى بين وسمي الت ‪.title‬‬ ‫وتوجد أيضتا و سوم أخرى تحدد صفات المستتند تمستى و سوم ‪ meta‬توضع أيضا في منط قة الرأس‪ ،‬وستنأتي إليهتا في أمور إضافية فتي هذه‬ ‫الدورة‪.‬‬ ‫أما باقي الوسوم فأغلبها يوضع في منطقة الجسم ‪.body‬‬

‫الـخطوط و اللوان‬

.. h6 ‫ وهكذا حتى‬h2 ‫ والثاني‬h1 ‫ العنوان الول‬،‫أول العناوين وهي من ستة مستويات‬

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6


P ‫لتحديد الفقرات يتم إحاطتها بالوسم‬

Paragraph Text



P ‫ في الوسم‬align ‫لتحديد اتجاه الفقرة استخدم الخاصية‬

Left aligned paragraph

Centered paragraph

Right aligned paragraph



‫لعمل وصلة استخدم الوسم ‪ a‬مع الخاصية ‪ href‬لتحديد الوجهة‪ ،‬الوجهة قد تكون صفحة ‪ html‬وعندها يبدأ العنوان بت ‪ :http‬وقد يكون عنوان‬ ‫موقع ‪ ftp‬وعندها يبدأ بت ‪ :ftp‬وقد يكون بريدا إلكترونيا وعندها يبدأ بت ‪، :mailto‬ستعرف المزيد عن المسارات عندما يأتي الحديث عن الصور‬ ‫في الدرس القادم‪ ،‬وبين وسمي الفتح والغلق ضع المحتويات الساخنة أو الوصلة نفسها‪ ،‬وهي قد تكون نصوصا أو صورا‪.‬‬ ‫>‪a href="http://www.microsoft.com/">Microsoft‬‬ ‫‪‪My E-mail
‫يوجد أيضا استخدام آخر للوسم ‪ a‬باستعمال الخاصية ‪ name‬بدل من ‪( href‬يمكن استعمال الثنين معا)‪ ،‬وبعد ذلك تستطيع أن تدرج وصلة‬ ‫عاديتة تشيتر إلى المكان الذي بته <‪ ،>""=a name‬وذلك بجعتل خاصتية ‪ href‬الوصتلة العاديتة تشيتر إلى الستم المحدد فتي ‪ name‬مستبوقا‬ ‫بعلمتة ‪ ،#‬مثال ذلك إذا أردت أن تضتع وصتلة تقودك إلى جزء معيتن متن المستتند الحالي‪ ،‬ستتقوم بعمتل <‪>a name="myname"<>/a‬‬ ‫فتي المكان المطلوب‪ ،‬ثتم تدرج وصتلة فتي أي مكان آختر كالتالي <‪>"a href="#myname‬إستمي<‪ ،>a/‬ويمكنتك أيضتا عمتل ذلك عتبر‬ ‫المستتتتتتندات (متتتتتن مستتتتتتند إلى مستتتتتتند آختتتتتر) بحيتتتتتث تحدد بالضبتتتتتط المكان الذي تريده متتتتتن المستتتتتتند الوجهتتتتتة هكذا <‪a‬‬ ‫‪>"href="salem.html#myname‬إسم سالم<‪.>a/‬‬ ‫يمكنك أيضا عمل وصلة إلى أعلى المستند بوضع ‪ top#‬في الخاصية ‪.href‬‬ ‫لجبار النص على النتقال إلى السطر التالي استخدم <‪. >br‬‬ ‫لضافة مسافة استخدم &‪( ;nbsp‬لعمل أكثر من مسافة واحدة)‬ ‫يمكنك استخدام الوسم ‪ pre‬لمنع المتصفح من تجاهل المسافات البيضاء ويحتسب المسافة مسافة والثلث مسافات ثلث مسافات والسطر‬ ‫الجديد سطرا جديدا‪ ،‬فقط بين الوسمين <‪ >pre‬و <‪. >pre/‬‬ ‫يمكنك توسيط أي شيء بوضعه بين الوسمين <‪ >center‬و <‪>center/‬‬

‫‪Font‬‬ ‫يعمل الوسم ‪ font‬دائما مع مجموعة من الخصائص‪ ،‬فهو ل يمتلك أي تأثير لوحده‪ ،‬وأهم خصائصه هي التي تحدد نوع الخط والتي تحدد لونه‬ ‫والتي تحدد حجمه‪.‬‬ ‫أول خصائص الوسم ‪ font‬هي الخاصية ‪ face‬التي تحدد نوع الخط المستخدم‬ ‫>‪Verdana Text‪Courier New Text
‫بعد ذلك هنالك الخاصية ‪ color‬المستخدمة لتحديد لون الخط (أنظر إلى اللوان في السفل)‬

‫‪RedBlue
‫الخاصية الثالثة هي الخاصية ‪ size‬وهي تحدد حجم الخط‪ ،‬توجد سبعة أحجام للخط‪ ،‬والخط الساسي في الصفحة يأخذ أحد هذه الحجام‪ ،‬وإذا‬ ‫أردت أن تغير حجم الخط في كلمة معينة أو جزء ما من النصوص استخدم الوسم ‪ font‬مع الخاصية ‪ size‬لزيادة حجم الخط أو إنقاصه بمقدار‬ ‫معين‪ ،‬إذا كا الخط الساسي هو ‪ 3‬فإنه يمكنك زيادة الخط ‪ 4‬مرات حتى تصل إلى ‪ 7‬وهو أكبر خط ويمكنك إنقاصه مرتين ليصبح ‪ 1‬وهو أصغر‬ ‫حجم للخط‪ ،‬الخط الساسي القياسي هو ‪ 3‬ما لم تقم بتغييره‪ ،‬يتم تحديد أثر الرقم من حيث الزيادة أو النقصان بإضافة ‪ +‬قبل الرقم للزيادة‬ ‫و ‪ -‬قبل الرقم للنقصان‪ ،‬وعند الزيادة فوق الحجم ‪ 7‬سيعرض المتصفح النص بالحجم ‪ 7‬وكذلك عند النقصان إلى أقل من الواحد فسوف يتم‬ ‫إعتباره ‪.1‬‬ ‫>‪Size 7‪Size 6‪Size 5‪Size 4‪Size 3‪Size 2‪Size 1
‫توجد أيضا طريقة سريعة لتكبير الخط خطوة واحدة أو تصغيره خطوة واحدة باستخدام الوسم <‪ >big‬و <‪>small‬‬ ‫>‪size 4‪<small>size 2‪size 5
‫الطرق الستابقة لتغيير الخط تسمى طرقا نسبية ‪ relative‬لنك تقوم بتغيير الخط بالنستبة لل خط الساسي‪ ،‬يمكنك أيضا تحديتد الحجم الذي‬ ‫تريده للخط بالضبط دون العتماد على الخط الساسي عن طريق الخاصية ‪ size‬ذاتها ولكن دون وضع إشارة ‪ +‬أو ‪ -‬مقابل الحجم المطلوب‬ ‫>‪Size 7‪Size 6
‫>‪Size 5‪Size 4‪Size 3‪Size 2‪Size 1
‫يمكنك كذلك تغيير حجم الخط الساسي في المستند وهذا سيؤثر على جميع الماكن التي استخدمت فيها الحجام النسبية للخطوط‪ ،‬ونغير‬ ‫الخط الساسي باستخدام وسم يدعى <‪ >basefont‬ويمكن استخدامه لتغيير حجم الخط الساسي في المستند أو لون الخط الساسي أو‬ ‫نوع الخط الساسي‪ ،‬وهو ل يأخد قيم نسبية في الحجم (ل ينسب إلى نفسه)‪ ،‬على سبيل المثال لتغيير الخط الساسي إلى ‪Verdana‬‬ ‫بحجم ‪ 3‬ولون أخضر نضع السطر التالي في المستند‬ ‫>‪<"basefont color="Green" size="3" face="Verdana‬‬ ‫والوسم السابق ل يستخدم في جزء محدد من نصوص ‪ HTML‬بل يظهر تأثيره في الصفحة كلها لذلك فهو ل يحتاج إلى وسم إغلق‪.‬‬ ‫توجتد أيضتا وستوم أخرى للتنستيقات المختلفتة‪ ،‬مثل الوستم ‪ b‬أو ‪ strong‬للختط العريتض والوستم ‪ i‬أو ‪ em‬للمائل ‪،‬و الوستم ‪ tt‬يستتخدم لجعتل‬ ‫الحروف متساوية في الحجم مثل نصوص اللة الكاتبة‬ ‫>‪This is Bold Text and <strong>this to!This is Italic Text and <em>this to!This is Typewriter Text‬‬

‫يوجد وسم خاص بوضع الخط الفقي هو الوسم ‪ hr‬يمكنك تحديد عرض الخط بالخاصية ‪ ،width‬حيث تأخذ ‪ width‬قيما مطلقة مثل ‪ 10‬أو‬ ‫‪ 293‬وهي تحدد العرض بالبكسل‪ ،‬وقيما نسبية تقاس بالنسبة إلى عرض الصفحة‪ ،‬مثل ‪ %20‬و ‪ ،%85‬توجد أيضا خاصية أخرى هي ‪size‬‬ ‫تحدد ارتفاع الخط رأسيا ويأخذ قيما مطلقة صغيرة‪ ،‬وتوجد أيضا خاصية ‪ color‬لتحديد لون الخط‪ ،‬والخاصية ‪ noshade‬وهي خاصية بدون‬ ‫قيمة‪ ،‬وعند وضعها تجعل الخط يبدو مصمتا وليس منحوتا كما في الحالة القياسية‬ ‫‪This is the First Line‬‬ ‫>‪‪<"hr color="Purple‬‬ ‫‪This is the Third Line‬‬ ‫>‪<"hr width="30%‬‬ ‫‪This is the Fourth Line‬‬ ‫>‪<"hr noshade size="40‬‬

‫يمكتن أيضتا استتخدام بعتض المتغيرات فتي وستم الجستم <‪ ،>body‬وهذه المتغيرات تستتخدم فتي تحديتد تنستيق الصتفحة مثتل لون خلفيتة‬ ‫الصتفحة ‪ bgcolor‬وصتورة الخلفيتة المتكررة ‪ ،background‬ولون النتص ‪ text‬ولون الوصتلة الجديدة ‪ link‬والقديمتة ‪ vlink‬والمحددة حاليتا‬ ‫‪ ،alink‬وحاشية الصفحة العلوية ‪ topmargin‬والسفلية ‪ buttommargin‬واليسرى ‪ leftmargin‬واليمنى ‪.rightmargin‬‬ ‫>"‪body alink="red" link="yellow‬‬ ‫‪"vlink="blue‬‬ ‫‪<"bgcolor="black" text="white" topmargin="0‬‬ ‫‪‪Great Downloads‪Bill Gates!?‪Microsft Network‪Free E-mail‪
‫‪HTML‬‬ ‫اللوان في الكمبيوتر تنتج من خلط اللوان الساسية الضوئية الثلثة‪ ،‬وهي الحمر والخضر والزرق‪ ،‬يأخذ كل لون من اللوان السابقة قيمة‬ ‫تتراوح بين ‪ 0‬و ‪ ،255‬وهي مرتبة (أحمتر‪،‬أخضر‪،‬أزرق) أو (‪ )Red,Green,Blue‬أو ‪ ،rgb‬في أي مكان نحتاج إلى أن نضع فيه لونتا نقوم بوضع‬ ‫الجملة التالية‬ ‫(‪rgb)R,G,B‬‬ ‫فنضع قيمة الت ‪ R‬في مكانها المناسب‪ ،‬والت ‪ G‬والت ‪ B‬كذلك‪ ،‬يمكن أيضا صياغة العبارة السابقة بصورة أخرى هي الصورة الستعشرية‪ ،‬نقوم‬ ‫بوضع الرقام السابقة بالتتالي في صورها الستعشرية‪ ،‬حيث أن أعلى قيمة عشرية لللوان هي ‪ 255‬فإن أعلى قيمة ستعشرية لها هي ‪ff‬‬ ‫وأقل قيمة هي ‪ ،00‬لذا فإن كل رقم يأخذ خانتين كالتالي ‪ RRGGBB# ..‬ويفضل وضع علمة ‪ #‬قبل الرقام في الصيغ الستعشرية حتى‬ ‫تتعرف عليها جميع المتصفحات‪ ،‬أغلب الناس يستخدمون الصيغ الستعشرية في تكوين اللوان‪ ،‬يمكن الحصول على القيمة الستعشرية من‬ ‫القيمة العشرية باستخدام الحاسبة التي تأتي مع الت ‪.Windows‬‬

‫تستطيع بالطريقة السابقة تكوين أكثر من ‪ 16.5‬مليون لون‪ ،‬ولكن بعض الجهزة القديمة لم تكن تدعم أكثر من ‪ 256‬لون في نفس اللحظة‪،‬‬ ‫لذا فقتد اتفتق على ‪ 216‬لون ستميت بألوان المتصتفح المنتة‪ ،‬فإذا التزم الجميتع بهذه اللوان ستيستطيع المتصتفحون أن يستتعرضوا أكثتر متن‬ ‫صتفحة واحدة فتي نفتس الوقتت دون مشاكتل لن عدد اللوان التتي يحتاجهتا المتصتفح هتي ‪ 216‬فقتط والباقتي احتياطتي للمور الخرى مثتل‬ ‫الواجهة وغيرها‪.‬‬ ‫إضافة إلى ما سبق هنالك ألوان معروفة تستخدم بكثرة‪ ،‬ولها أسماء معروفة وعددها حوالي ‪ 141‬لون‪ ،‬هذه اللوان يمكنك استخدامها بوضع‬ ‫اسمها فقط‪ ،‬وهي تنتمي جميعها للوح اللوان المن والجدول التالي يبين أشهرها ‪:‬‬

‫أمثلة للتوضيح ‪..‬‬ ‫>‪<"font size="+1‬‬ ‫>‪ Sample 1 ‪ Sample 2 ‪ Sample 3 ‪
‫الــصــور‬ ‫يمكنتك فتي لغتة ‪ HTML‬عرض الصتور فتي الصتفحات والتحكتم فتي خواصتها‪ ،‬قبتل كتل شيتء يجتب أن تكون الصتورة جاهرة للنشتر على الويتب‪،‬‬ ‫فيجب أن ل تكون ذا حجم ضخم لن ذلك سيؤدي إلى بطء شديد في التحميل‪ ،‬ويجب الحذر جيدا عند التعامل مع الصور‪ ،‬لنها تستهلك حجما‬ ‫كبيرا وتسبب بطءا شديدا في تحميل الصفحات‪ ،‬لذلك يفضل التقليل من الصور قدر المكان في صفحات ‪.HTML‬‬ ‫لكي تستطيع عرض الصور في المستند يجب أن تكون الصورة من النوع ‪ jpg‬أو ‪( gif‬أنظر تجهيز الصور للنشر على الويب)‪.‬‬

‫‪HTML‬‬ ‫تستخدم العناوين في ‪ HTML‬في الكثير من المور‪ ،‬أهمها الوصلت التشعيبية والصور‪ ،‬ويجب أن تعرف كيفية استخدام هذه العناوين جيدا‪.‬‬ ‫هنالك نوعان متتتتن العناويتتتتن‪ ،‬نستتتتبية ومطلقتتتتة‪ ،‬العناويتتتتن النستتتتبية تكون بالنستتتتبة للعنوان الحالي‪ ،‬فلو كنتتتتت مثل فتتتتي صتتتتفحة‬ ‫‪ http://www.microsoft.com/ie/default.asp‬وقمتتت بعمتتل وصتتلة خاصتتية ‪ href‬لهتتا تستتاوي ‪ download.html‬ستتيعرف المتصتتفح أن‬ ‫العنوان الذي يجتتتتتتتتب الذهاب إليتتتتتتتته هتتتتتتتتو ‪ ،http://www.microsoft.com/ie/download.html‬ولو كانتتتتتتتتت ‪ href‬تستتتتتتتتاوي‬ ‫‪ download/english.html‬فستيتجه المتصتفح إلى ‪ ،http://www.microsoft.com/ie/download/english.html‬أي أن المتصتفح يضيتف‬ ‫الستطر الموجود فتي ‪ href‬إلى الدليتل الحالي‪ ،‬ويختلف الملف عتن الدليتل بأن الدليتل يحتوي على الشرطتة الخلفيتة ( ‪ ) /‬فتي آخره‪ ،‬فتي كتل‬ ‫دليل يوجد دليل خاص‪ ،‬هذا الدليل الخاص يؤدي بك إلى الدليل الب للدليل الحالي وهو الرمز ( ‪ ) ..‬وفي المثال السابق لو كانت ‪ href‬تحتوي‬ ‫على ‪ windwos.html/..‬فإن المتصتفح ستيتجه إلى العنوان ‪ http://www.microsoft.com/windwos.html‬أي أنته ستيخرج متن الدليتل ‪/ie‬‬ ‫إلى الدليتل الجذري ‪ ، /‬أمتا العناويتن المطلقتة فتتميتز بأنهتا مستبوقة باستم البروتوكول ‪،‬مثل العنوان ‪ /http://www.ayna.com‬يعتتبر عنوانتا‬ ‫مطلقا‪ ،‬وليس له علقة بالعنوان الحالي‪.‬‬

‫يتم إدراج الصور في صفحة ‪ HTML‬عن طريق الوسم ‪ ،IMG‬وهو وسم مفرد ( ل يجتاج إلى وسم إغلق)‪ ،‬وهذا الوسم يحتاج إلى خاصية مهمة‬ ‫لكي يعمل بشكل سليم هي ‪ src‬والتي نضع بها عنوان الصورة المطلوبة‪.‬‬ ‫>‪<"img src="/images/sample.gif‬‬

‫توجتد أيضتا الخاصتية ‪ width‬لتحديتد عرض الصتورة و ‪ height‬لتحديتد ارتفاعهتا‪ ،‬يمكتن بواستطة الخاصتيتان الستابقتان تكتبير الصتورة وتصتغيرها‬ ‫حسب المطلوب‪ ،‬وإذا كنت تريد إظهارها بالحجم الطبيعي فيمكنك ترك هذه الخصائص‪ ،‬فيحجر المتصفح للصورة حجما صغيرا إلى أن يحصل‬ ‫عليها فيجعلها بالحجم الطبيعي‪ ،‬ولكن الصور تشغل مكانا في الصفحة وتزيح النصوص بمقدار ما تشغله من مكان لذلك فإن الصورة الصغيرة‬ ‫تزيح النصوص قليل والكبيرة تزيحها بمقدار أكبر‪ ،‬فالصفحات ستظهر بشكل مختلف عن الشكل الطبيعي إلى إن يحصل المتصفح على الصورة‬ ‫وإذا لم يجدها لي سبب من السباب سيظل يحجر لها حجما صغيرا فقط وبالتالي تصبح الصفحة مشوهة‪ ،‬لذلك ينصح دائما باستخدام خصائص‬ ‫الحجم في وسوم الصور حتى لو لم تكن تريد تغيير حجم الصورة عن الطبيعي‪.‬‬ ‫>‪img‬‬ ‫‪"src="/images/sample.gif‬‬

‫‪<width=73 height=68>
‪"img src="/images/sample.gif‬‬ ‫‪<width=200 height=100‬‬

‫توجد أيضا الخاصية ‪ align‬وهي خاصية مهمة جدا في الصور‪ ،‬وتنبع أهميتها من كونها الطريقة الوحيدة للتحكم بكيفية عرض الصورة بالنسبة‬ ‫للنصوص المحيطة بها‪ ،‬حيث أن الصور في ‪ HTML‬تعتبر جزءا من النص المحيط بها تتحرك معه‪ ،‬وترتبط به‪ ،‬تأخذ ‪ align‬العديد من القيم فيما‬ ‫يلي سرد لها مع الشرح والمثلة ‪..‬‬ ‫•‪ : bottom, baseline, absbottom‬وهي تعرض الصورة بحيث تكون على السطر مثل أي كلمة أخرى ‪.‬‬ ‫>"‪img src="/images/sample.gif‬‬

‫‪<"align="bottom‬‬

‫•‪ : left‬وهي تعرض الصورة على يسار الفقرة ول يكون للصورة علقة بالسطر‪.‬‬

‫>‪<"img src="/images/sample.gif" align="left‬‬

‫•‪ : middle, absmiddle‬وهي تعرض الصورة في منتصف السطر‪.‬‬

‫>‪<"img src="/images/sample.gif" align="middle‬‬

‫•‪ : right‬وهي تعرض الصورة على يمين الفقرة ول يكون للصورة علقة بالسطر‪.‬‬

‫>‪<"img src="/images/sample.gif" align="right‬‬

‫•‪ : top, texttop‬وهي تعرض أسفل السطر فيكون السطر أعلها‪.‬‬

‫>‪<"img src="/images/sample.gif" align="right‬‬

‫توجتد أيضتا خاصتية لوضتع إطار حول الصتورة هتي الخاصتية ‪ border‬ونحدد بهتا عرض الطار بالبكستل‪ ،‬والقيمتة ‪ 0‬تعنتي دون إطار‪ ،‬إذا لم تحدد‬ ‫قيمة للخاصية ‪ border‬في وسم الصورة‪ ،‬فإن الصور ستظهر بدون إطار في الحالة العادية ومع إطار إذا كانت الصورة عبارة عن وصلة‪ ،‬لذلك‬ ‫يعمد الناس إلى وضع ‪ "border="0‬في جميع الصور لخفاء الطار حتى لو كانت الصورة عبارة عن وصلة‪ ،‬ويجدر بالذكر أن لون الطار في‬ ‫الوصلة الجديدة هو نفس لون النصوص في الوصلة الجديدة وكذلك بالنسبة للقديمة‪.‬‬ ‫>‪<"/a href="http://www.microsoft.com‬‬ ‫>‪‪<"/a href="http://www.microsoft.com‬‬ ‫>‪‪<"img src="/images/sample.gif" border="3‬‬

‫يمكنك أيضا تحديد عرض الحاشية حول الصورة أو المسافة بين الصورة النصوص المحيطة عن طريق الخاصية ‪.hspace‬‬ ‫توجتد أيضتا خاصتية ‪ alt‬للصتور‪ ،‬وهتي تستتخدم لوصتف الصتورة‪ ،‬بحيتث أن النتص الذي تضعته فتي الخاصتية ‪ alt‬ستيعرض بدل متن الصتورة حتتى‬ ‫إتماما تحميلها‪ ،‬وكذلك إذا لم يجد المتصفح الصورة‪ ،‬وهذه النصوص أيضا تظهر في مربع التلميح ‪ ToolTip‬عند التأشير بالفأرة على الصورة‪.‬‬

‫فتي بعتض الحيان تجتد أن هنالك صتورة عليهتا أكثتر متن بقعتة ستاخنة ‪ Hot Spots‬بوصتلت مختلفتة‪ ،‬هذه الصتور يتتم تقستيمها إلى مناطتق مثتل‬ ‫الخريطة‪ ،‬وما يلي هو كيفية عمل ذلك‪.‬‬ ‫تتكون الخريطتة الصتورية متن جزئيتن‪ ،‬الخريطتة والصتورة‪ ،‬حيتث نقوم بتصتميم الخريطتة وإعطائهتا إستما‪ ،‬ثتم نكتتب هذا الستم فتي خاصتية‬ ‫‪ usemap‬للصورة‪.‬‬ ‫في البداية نشرح كيفية تكوين الخريطة لصورة مثل هذه الصورة‬

‫فإذا إردنا تقسيم الصورة السابقة فسيكون التقسيم (الخريطة) كالتالي‬

‫أي بحيث يشير كل حزء من الجزاء الثلثة إلى أحد أقسام الموقع الفتراضي‪ ،‬مهمتنا الن هي رسم الخريطة السابقة وتحديد البقع الساخنة‬ ‫والوصلت عليها‪ ،‬ويتم ذلك باستخدام الوسم ‪ ،map‬ونحدد إسم الخريطة بالخاصية ‪ ،name‬ونقوم بوضع الشكال بين وسمي الفتح والغلق‬ ‫للوستم ‪ ،map‬والشكال تكون فتي صتورة وستوم ‪ area‬مفردة‪ ،‬نقوم بتحديتد الشكتل عتن طريتق الخاصتية ‪ ،shape‬ثتم نقوم بتحديتد الوصتلة‬ ‫بالخاصية ‪ href‬ونحدد إحداثيات الشكل بالخاصية ‪ ،coords‬ويختلفكل شكل عن الخر بطريقة كتابة إحداثياته‪ ،‬والشكال ثلثة هي ‪:‬‬ ‫•‪ : circle‬وهو شكل الدائرة‪ ،‬وتكون إحداثياته عبارة عن الحداثي السيني للمركز ثم الحداثي الصادي للمركز ثم نصف القطر (‬ ‫‪.)x, y, radius‬‬ ‫•‪ : rect‬وهتو شكتل المستتطيل‪ ،‬وتكون إحداثياتته عبارة عتن الحداثتي الستيني للركتن أعلى اليستار ثتم الحداثتي الصتادي له ثتم‬ ‫الحداثي السيني للركن المقابل أدنى اليمين ثم الحداثي الصادي له (‪.)x1, y1, x2, y2‬‬ ‫•‪ : poly‬وهتو شكتل المضلع‪ ،‬ويمكنتك باستتخدامه رستم الشكال المكونتة متن عدة قطتع مستتقيمة‪ ،‬وتكون إحداثياتته عبارة عتن‬ ‫الحداثي السيني ثم الصادي للنقطة الولى ثم الثانية وهكذا حسب ما تشاء من النقط (‪.)x1, y1, x2, y2, .. xn, yn‬‬ ‫ويجب أن تعرف أيضا أن نقطة أعلى اليسار هي نقطة الصفر‪ ،‬وكلما تنزل إلى السفل تزداد قيمة الحداثي الصادي وكلما اتجهت إلى اليسار‬ ‫تزداد قيمة الحداثي السيني‪.‬‬ ‫لمعرفة الحداثيات المطلوبة نستخدم أي برنامج للرسم مثل ‪ Adobe Photoshop‬أو ‪. Paint Shop Pro‬‬ ‫في مثالنا السابق تم حساب الحداثيات وكانت النتيحة كالتالي ‪:‬‬ ‫>‪<"img src="/images/sample2.gif" usemap="#mymap‬‬ ‫>‪<"map name="mymap‬‬ ‫>‪"/area shape="rect" href="http://www.jokes.com‬‬

<"coords="6,10,67,44 "/area shape="circle" href="http://www.story.com> <"coords="121,93,27 "/area shape="poly" href="http://www.download.com> <"coords="37,90,73,105,59,129,15,129,4,105 <map/>

،‫ عنتد النقتر على أحدهتا يظهتر حوله إطار أستود‬،‫ستتلحظ الن أن الصتورة مقستمة إلى عدة مناطتق ستاخنة كتل منهتا يشيتر إلى وصتلة مختلفتة‬ ‫ مختلف لكتل قستم متن الصتورة‬alt ‫ تستتطيع أيضتا أن تحدد‬،shape ‫ فتي الوستم‬border ‫يمكنتك إزاله هذا الطار والتحكتم بستماكته بالخاصتية‬ .shape ‫ في الوسم‬alt ‫باستخدام الخاصية‬ <"img src="/images/sample2.gif" usemap="#mymap" border="0> <"map name="mymap> "/area shape="rect" href="http://www.jokes.com> "coords="6,10,67,44 <"border="0" alt="Be Happy "/area shape="circle" href="http://www.story.com> "coords="121,93,27 <"!border="0" alt="Enjoy "/area shape="poly" href="http://www.download.com> "coords="37,90,73,105,59,129,15,129,4,105 <"border="0" alt="Best Downloads <map/>

‫تنظيم الـمـحتوى‬ ‫يمكنك تنظيم المحتوى في لغة ‪ HTML‬في عدة أشكال‪ ،‬يمكنك مثل وضعه في صورة قائمة مرتبة‪ ،‬أو في صورة شجرة (مخطط هرمي) وأهم‬ ‫أنواع تنظيم المحتوى هي الجداول‪.‬‬ ‫يمكنك عمل القائم المرتبه باستخدام الوسم ‪ ol‬والغير مرتبة ‪ ul‬بحيث توضع البنود بينهما وكل بند يحدد بالوسم ‪ ،li‬ويمكنك تحديد نوع الترقيم‬ ‫في القوائم المرتبة بالحروف أو بالقام العربية أو الرومانية وغيرها عبر الخاصية ‪ type‬وتأخذ أحد القيم التالية ‪:‬‬ ‫‪.. ,4 ,3 ,2 ,1 : 1‬‬ ‫‪.. ,a : a, b, c, d‬‬ ‫‪.. ,A : A, B, C, D‬‬ ‫‪.. ,i : i, ii, iii, iv‬‬ ‫‪.. ,I : I, II, III, IV‬‬ ‫وفي القوائم الغير مرتبة ‪:‬‬ ‫•‪: circle‬‬ ‫‪o‬‬ ‫•‪: square‬‬

‫‪: disc‬‬

‫ويمكن وضع قائمة داخل قائمة لتشكيل المخططات الهرمية‪.‬‬ ‫>‪<"ul type="circle‬‬ ‫>‪li>Pepsi‬‬ ‫>‪li>Crash‬‬ ‫>‪li>7 Up‬‬ ‫>‪
    ‪<"ol type="I‬‬ ‫>‪(li>Windows (85%‬‬ ‫>‪(li>Linux (10%‬‬ ‫>‪(li>Mac (3%‬‬ ‫>‪(li>Other (2%‬‬ ‫>‪

      ‫>‪‪li>American Companies‬‬ ‫>‪‪li>Microsoft‬‬ ‫>‪li>General Motors‬‬ ‫>‪
        ‪li>German Companies‬‬ ‫>‪‪li>Dubian‬‬ ‫>‪li>BMW‬‬ ‫>‪‪li>6 Class‬‬ ‫>‪li>7 Class‬‬ ‫>‪
          ‪
            ‪

              ‫تعتتبر الجداول متن أهتم مكونات صتفحات ‪ ،HTML‬وجميتع التصتاميم الحترافيتة تستتفيد متن الجداول لتصتميم الصتفحة وتوزيتع الكائنات عليهتا‬ ‫وتشكيلها في القالب الذي يريدونه‪ ،‬يتم إدراج الجدول بالوسم ‪ table‬وداخل الجدول يجب إدراج صفوف ‪ tr‬وداخل الصفوف توجد البيانات ‪،td‬‬ ‫يمكن وضع إطار للجدول بالخاصية ‪ border‬حيث نحدد فيه سماكة الطار المطلوب ‪ 0‬تعني دون إطار‪ ،‬القيمة الفتراضية للطار هي ‪.0‬‬ ‫>‪<"table border="1‬‬ ‫>‪‪td>First Row - First Data‬‬ ‫>‪td>First Row - Secound Data‬‬ ‫>‪‪
              ‫>‪td>Secound Raw - First Data‬‬ ‫>‪td>Secound Raw - Secound Data‬‬ ‫>‪‪
              ‫يمكنتك أيضتا التحكتم بالمستافة بيتن الخليتا بواستطة الخاصتية ‪ ،cellspacing‬والمستافة بيتن الحدود الداخليتة للخليتا ومحتويات الخليتا بواستطة‬ ‫الخاصية ‪.cellpadding‬‬ ‫>‪<"table cellspacing="10" cellpadding="20" border="1‬‬ ‫>‪‪‪
              First Cell‪Secound Cell‪

              ‫يمكتن التحكتم بعرض الجدول بالخاصتية ‪ width‬وارتفاعته بالخاصتية ‪ height‬وكلهمتا يأختذ قيمتا مطلقتة أو نستب مؤيتة‪ ،‬ويمكتن استتخدام هذه‬ ‫الخصائص في الخليا ‪ td‬أيضا وعند إعطاء الخليا قيما نسبية فإنها تحسب بالنسبة للصف الذي هي فيه‪.‬‬ ‫>‪<"table width="100%" height="100%" border="1‬‬ ‫>‪‪td width="100" height="40%">First Cell‬‬ ‫>‪td width="100%" height="40%">Secound Cell‬‬ ‫>‪‪‪td width="100" height="60%">First Cell‬‬ ‫>‪td width="100%" height="60%">Secound Cell‬‬ ‫>‪‪

              ‫يمكن التحكم بلون خلفية الجدول بالخاصية ‪ bgcolor‬ويمكن تعيين صورة في الخلفية بالخاصية ‪ ،background‬يمكن استعمال هذه الخواص‬ ‫فتي الخليتا ‪ td‬أيضتا‪ ،‬وعنتد تعييتن قيمتة ‪ bgcolor‬للجدول مختلفتة عتن قيمتة أحتد الخليتا فإن لون الخليتة ستيطغى على لون الجدول فتي تلك‬ ‫الخلية‪ ،‬لن الخلية موجودة فوق الجدول في ترتيب الطبقات‪.‬‬ ‫>‪<"table border="1" background="sample.gif" width="90%" height="80%‬‬ ‫>‪‪td bgcolor="Yellow">First Cell‬‬ ‫>‪td>Secound Cell‬‬ ‫>‪‪

              ‫يمكتن التحكتم بمحاذاة محتوى الخليتة أفقيتا بالخاصتية ‪ align‬ورأستيا بالخاصتية ‪ ،valign‬فتي الخاصتية ‪ align‬القيمتة ‪ left‬تعنتي محاذاة لليستار و‬ ‫‪ rigth‬لليميتن و ‪ center‬بالمنتصتف و ‪ justify‬للضبتط الكلي تجعتل الستطر مستاوية فتي الطول‪ ،‬أمتا الخاصتية ‪ valign‬فتأختد القيمتة ‪top‬‬ ‫للعلى‪ bottom ،‬للسفل ‪ middle‬للمنتصف‪.‬‬ ‫>‪<"table border="1" width="90%" height="80%‬‬ ‫>‪‪td align="right" valign="bottom">First Cell‬‬ ‫>‪td align="left" valign="top">Secound Cell‬‬ ‫>‪‪

              ‫يمكن أيضا وضع جدول داخل جدول‪ ،‬عن طريق وضع الجدول في أحد الخليا ‪ ،td‬وهنا يحسب عرض الجدول الداخلي النسبي بالنسبة لعرض‬ ‫الخلية التي تحتويه والموجودة في الجدول الخارجي‪.‬‬ ‫>‪<"table width="95%" border="1‬‬ ‫>‪‪td>First Table - First Cell‬‬

               td>Secound Table - First Cell> td>Secound Table - Secound Cell>
              <"table border="1>
              td>Third Table - First Cell> td>Third Table - Secound Cell>
              <"table border="1>
              td>First Table - Fourth Cell>


              ‫ حيتث تحدد فتي كتل منهمتا عدد الخليتا التتي يجتب دمجهتا فتي‬،colspan ‫ وأفقيتا بالخاصتية‬rawspan ‫يمكتن أيتض دمتج الخليتا رأستيا بالخاصتية‬ .td ‫ وتستخدم هذه الخصائص في الخليا‬،‫الخلية الحالية‬ <"table border="1> td rowspan="2" colspan="2">First Cell> td>Secound Cell> td>Third Cell> td rowspan="3">Fourth Cell> td colspan="2">Fifth Cell> td>Sixth Cell> td>Seventh Cell> td>Eighth Cell> td>Nineth Cell>

              ‫>‪

              ‫تستتخدم الطتر ‪ frames‬لتقستيم المتصتفح إلى عدة إطارات واستتعراض عدة صتفحات فتي نفتس الوقتت‪ ،‬كمتا يمكنتك تبادل الوامتر بيتن هذه‬ ‫الصفحات‪ ،‬فيمكن عمل صفحة مستقلة تحتوي على فهرس الموقع‪ ،‬وبعد ذلك تضعها في صورة إطار يظل على يمين الشاشة‪ ،‬وكلما ضغط‬ ‫المستتخدم على أحتد الوصتلت فتي الفهرس‪ ،‬يتتم تحميتل الصتفحة فتي الطار الختر الذي على اليستار والذي يحتتل الجزء الكتبر متن الشاشتة‬ ‫عادة‪ ،‬هذه الطريقة تتبع في الكثير من المواقع لتسهيل المور‪ ،‬فكيف يتم ذلك‪.‬‬ ‫في البداية هنالك صفحة الطارات‪ ،‬تحدد في هذه الصفحة تصميم طقم الطارات الذي ستستخدمه‪ ،‬وما هي الصفحة التي يجب عرضها في‬ ‫كتل إطار‪ ،‬أن كتل صتفحة تكون محفوظتة فتي ملف مستتقل لوحدهتا‪ ،‬فتي صتفحة الطارات ستتستخدم وستوم الطارات‪ ،‬ولكتن باقتي الصتفحات‬ ‫ستكون صفحات عادية غالبا دون إطارات‪.‬‬ ‫أول وسوم الطارات هو الوسم ‪ frameset‬الذي يفتح مجموعة الطارات‪ ،‬وفي هذه المجموعة يوجد عدد من وسوم الطار ‪ frame‬المفردة‬ ‫ونضتع فيهتا مصتدر الصتفحة فتي الخاصتية ‪ src‬أو يمكننتا وضتع ‪ frameset‬أخرى داختل التت ‪ frameset‬الولى‪ ،‬ويوضتع الوستم ‪ frameset‬خارج‬ ‫منط قة الجستم ‪ body‬دائمتا‪ ،‬نحدد فتي الوستم ‪ frameset‬إذا كنتا ستنقسم ال صفحة أفقيتا أو رأستيا‪ ،‬ونحدد حجتم كل إطار‪ ،‬إذا كنتا نريتد تقستيم‬ ‫الصتفحة رأستيا على شكتل أعمدة نستتخدم الخاصتية ‪ cols‬ونضتع فيهتا عرض كتل إطار بحيتث يفصتل بيتن كتل إطار والختر فاصتلة ( ‪ ) ,‬وهذه‬ ‫الحجوم قتد تكون نستبية أو مطل قة وتختلف فتي احتواء النستبية على علمة النستبة المؤوية‪ ،‬وإذا أردنتا تقستيم الصتفحة أفقيتا نقوم بعمتل نفتس‬ ‫الشيتء ولكتن باستتخدام الخاصتية ‪ rows‬بدل متن ‪ ،cols‬مثل إذا أردنتا تقستيم الصتفحة رأستيا إلى ثلثتة أعمدة الول بعرض ‪ 100‬بكستل والثانتي‬ ‫بعرض ‪ %10‬من الشاشة والثالث يحتل باقي الشاشة تكون مجموعة الوسوم هكذا ‪:‬‬ ‫>‪<"*,frameset cols="100,10%‬‬ ‫>‪<"frame src="sample1.html‬‬ ‫>‪<"frame src="sample2.html‬‬ ‫>‪<"frame src="sample3.html‬‬ ‫>‪
              ‫وكما ذكرنا يمكنك وضع ‪ frameset‬آخر بدل من أحد الطارات ‪frame‬‬ ‫>‪<"*,frameset rows="50‬‬ ‫>‪<"frame src="sample1.html‬‬ ‫>‪<"*,frameset cols="100‬‬ ‫>‪<"frame src="sample2.html‬‬

              ‫>‪<"frame src="sample3.html‬‬ ‫>‪‪
              ‫يمكنتك وضتع أو إزالة الطار الذي يظهتر حول اللواح باستتخدام الخاصتية ‪ frameborder‬إذا ضبتهتا عنتد القيمتة ‪ 0‬لن يظهتر الطار و ‪ 1‬يظهتر‬ ‫الطار‪ ،‬يمكنتك التحكتم بحجتم الطار عتن طريتق زيادة أو إنقاص المستافة بيتن اللواح وذلك عتبر الخاصتية ‪ framespacing‬فتضتع فيهتا القيمتة‬ ‫التي تريدها‪ ،‬يمكنك ضبط الخاصيتان السابقتان عند ‪ 0‬لمنع المستخدم من تغيير حجم اللواح‪.‬‬ ‫>‪<"frameset cols="50%,*" frameborder="0" framespacing="0‬‬ ‫>‪<"frame src="sample1.html‬‬ ‫>‪<"frame src="sample2.html‬‬ ‫>‪
              ‫يمكنتك التحكتم فتي ظهور أشرطتة التمريتر ‪ Scroll Bars‬فتي كتل إطار متن الطارات عتن طريتق الخاصتية ‪ scrolling‬وهتي تأختذ القيمتة ‪yes‬‬ ‫لظهار أشرطة التمرير دائما‪ ،‬والقيمة ‪ no‬لمنع ظهورها دائما‪ ،‬و ‪ auto‬لظهارها وقت الحاجة إليها فقط‪.‬‬ ‫>‪<"*,frameset rows="20‬‬ ‫>‪<"frame src="sample1.html" scrolling="no‬‬ ‫>‪<"*,frameset cols="100‬‬ ‫>‪<"frame src="sample2.html" scrolling="yes‬‬ ‫>‪<"frame src="sample3.html‬‬ ‫>‪‪
              ‫لكي تستطيع أن ترسل أوامرك ووصلتك من لوح إلى آخر‪ ،‬يجب أن تقوم بتسمية أو عنونة اللواح بواسطة الخاصية ‪ ،name‬وبعد ذلك لعمل‬ ‫وصلة بواسطة الوسم ‪ a‬استخدم الخاصية ‪ target‬لتحديد وجهة الوصلة‪ ،‬يمكنك فتح الوصلة في شاشة متصفح جديدة _‪ blank‬أو فتحها في‬ ‫الشاشة الحالية فوق مجموعة اللواح _‪ top‬أو فتحها في اللوح الحالي _‪ self‬أو فتحها في اللوح الب (في حالة ألواح داخل ألواح) _‪parent‬‬ ‫أو فتحها في أي لوح بوضع إسم اللوح‪.‬‬ ‫>!‪--‬‬

              ‫‪sample4.html‬‬

              ‫‪<--‬‬

              ‫>‪"a href="sample1.html‬‬ ‫‪Page 1‪"a href="sample3.html‬‬ ‫‪Page 3‪"a href="sample2.html‬‬ ‫‪Page 2‪"a href="sample4.html‬‬ ‫‪Page 4‪<"*,frameset rows="20‬‬ ‫>‪<"frame src="sample1.html‬‬ ‫>‪<"*,frameset cols="200‬‬ ‫>‪<"frame src="sample4.html‬‬ ‫>‪<"frame src="sample3.html" name="main‬‬ ‫>‪‪
              ‫إضافة إلى ما سبق‪ ،‬يوجد أيضا إطار من نوع خاص يكون عائما في المستند مثل الصورة‪ ،‬يتم إدراج هذا الطار في أي مكان بالمستند تحت‬ ‫القسم ‪ ،body‬ويقوم بعمل إطار ليعرض صفحة ‪ HTML‬خارجية‪ ،‬ووسمه هو ‪ iframe‬وأهم خصائصه الخاصية ‪ src‬التي تحدد المستند المصدر‬ ‫الذي يجب عرضه فتي الطار‪ ،‬يمكنك أيضا عنونه بالخاصتية ‪ name‬وعمل و صلت موجهة إليته تمامتا مثل الطار العادي‪ ،‬وفيمتا بقي ف هو مثل‬ ‫الطار‬ ‫يمتلك أيضا خاصية ‪ width‬و ‪ height‬لتحديد حجمة‬

              ‫النماذج‬ ‫إرسال البيانات عبر ‪http‬‬ ‫عندمتا تريتد إرستال المعلومات متن متصتفح الويتب‪ ،‬إلى مزود الويتب فإنتك تستتخدم بروتوكول ‪ http‬فتي عمتل ذلك‪ ،‬وينتص بروتكول ‪ http‬على‬ ‫أن البيانات ترستل فتي صتورة أزواج‪ ،‬كتل زوج عبارة عتن إستم وقيمتة‪ ،‬مثل إذا أردت إرستال إستم المستتخدم عتبر بروتوكول ‪ http‬فإنتك ترستل‬ ‫العبارة التاليتتة ‪ name=mubarmej‬هذا يستتمى زوج لنتته يتكون متن جزئيتتن‪ ،‬الجزء الول هتتو إستتم المعلومتتة ( ‪ ،)name‬والجزء الثانتتي هتتو‬ ‫المعلومتة نفستها (‪ ،)mubarmej‬وإذا أردت أن ترستل أكثتر متن معلومتة فإنتك تفصتل بيتن أزواج المعلومات بعلمات & فإذا أردت أن ترستل‬ ‫الستتتتم والبلد فإنتتتتك ترستتتتل العبارة التاليتتتتة ‪ name=mubarmej&country=Kuwait‬يمكنتتتتك أن تكتتتتتب العبارة الستتتتابقة كالتالي‬ ‫‪ country=Kuwait&name=mubarmej‬حيث أن الترتيب ليس مهما إلى هذه الدرجة‪ ،‬إضافة إلى ما سبق فإن هنالك شروطا على إرسال‬ ‫البيانات في صورة عناوين ‪ url‬ولن المعلومات عادة ما ترسل ملتصقة بهذه العناوين فإنه ل بد من تحويل سطر البيانات السابق بحيث يصبح‬ ‫مطابقا لمواصفات ‪ ،url‬وأول شيء هو أنك ل تستطيع وضع المسافات‪ ،‬لذا فقد اتفق على أن جميع المسافات في البيانات تحول إلى إشارة (‬ ‫‪ ،) +‬فإذا كان البلد هتتو ‪ United States‬فإن ستتطر البيانات ستتيكون ‪ ،name=mubarmej&country=United+States‬وهنالك أيضتتا‬ ‫شروط أخرى لتحويل الرموز الغير انجليزية والكثير من الشياء التي يتم تطبيقها على البيانات حتى تصبح جاهزة للرسال‪.‬‬ ‫تعريف‬

              ‫المسافات البيضاء ‪ :‬هي المسافات والسطر الجديدة وعلمات الجدولة‪.‬‬ ‫ينتص بروتوكول ‪ http‬أيضتا على أن البيانات ترستل بطريقتيتن‪ ،‬الولى تستمى ‪ get‬والثانيتة تستمى ‪ ،post‬يتتم إرستال البيانات بطريقتة ‪get‬‬ ‫بصتورة بستيطة جدا حيتث تكون عبارة عتن جزء يضاف إلى إستم البرنامتج الذي ستيستفيد متن البيانات‪ ،‬مثل إذا كان لديتك برنامتج يأختذ الستم‬ ‫والبلد ويخزتها على المزود‪ ،‬وكان عنوان هذا البرنامج هو ‪ http://somewhere.com/script.cgi‬فإن طريقة ‪ get‬ستقوم فقط بعمل إضافة‬ ‫إلى العنوان الستتتابقة هذه الضافتتتة هتتتي عبارة عتتتن علمتتتة استتتتفهام يليهتتتا ستتتطر البيانات الذي جهزتتتته‪ ،‬فيصتتتبح إستتتم الصتتتفحة‬ ‫‪ http://somewhere.com/script.cgi?name=mubarmej&country=United+States‬ول بتد متن أنتك صتادفت شيئا كهذا وربمتا‬ ‫أكثتر تعقيدا فتي مربتع الوجهتة فتي متصتفحك خاصتة عندمتا تزور المواقتع الضخمتة وتجري عمليات البحتث وغيرهتا‪ ،‬ستتجد كتل هذه البيانات فتي‬ ‫شريط العنوان‪ ،‬هذا بالنسبة لطريقة ‪ get‬في إرسال البيانات‪ ،‬أما الطريقة الثانية فهي طريقة ‪ post‬وفيها يتم إرسال لوحدها مع طلب الموقع‬ ‫ول تظهتر البيانات فتي شريتط العنوان‪ ،‬تختلف الطريقتان عتن بعضهمتا البعتض فتي أن الطريقتة ‪ get‬أبستط بكثيتر ويمكنتك بستهولة استتخدامها‬ ‫كوصلة عادية بأن تركب سطر البيانات بنفسك‪ ،‬ولكن ‪ post‬ل يمكن عملها في صورة وصلة بسهولة‪ ،‬حيث أنها ل تعمل إلى عن طريق النماذج‬ ‫( الثنان يعملن بشكل ممتاز بالنماذج )‪ ،‬لكن طريقة ‪ post‬أفضل من ‪ get‬في أنها مناسبة لرسال كمية كبيرة من البيانات مثل نص رسالة‬ ‫كاملة‪ ،‬حيث يتعسر عرض هذه الشياء في عنوان الموقع‪ ،‬كذلك البيانات والتصالت السرية يجب أن تتم بطريقة ‪ ( post‬هذا ل يعني أنها آمنة‬ ‫للشراء عبر الويب وإنما تحتاج إلى تقنيات أخرى )‪.‬‬

              ‫مهمة النماذج‬ ‫بعد أن عرفت كيف يتم إرسال البيانات‪ ،‬يجب أن تعرف مهمة النماذج في كل هذا‪ ،‬تعطيك النماذج واجهة سهلة لدخال البيانات مثل مربعات‬ ‫النتتتتتص وقوائم الختيار ومربعات نعتتتتتم‪/‬ل والزرار‪ ،‬وغيرهتتتتتا متتتتتن الدوات‪ ،‬كتتتتتل متتتتتا عليتتتتتك فعله هتتتتتو تحديتتتتتد مكان البرنامتتتتتج (‬ ‫‪ )http://somewhere.com/script.cgi‬في مثالنا السابق‪ ،‬والطريقة التتي تريد اتباعها (‪ get‬أو ‪ ،)post‬والبيانات التي تريد إرسالها‪ ،‬وتحدد‬ ‫بعتض اللوان والحجام وتصتمم الحقول وتضتع زر الرستال (‪ )submit‬وانتهتى المتر‪ ،‬كتل متا على زائر الصتفحة الن هتو أن يمل بعتض الحقول‬ ‫ويختار بعتض الخيارات‪ ،‬ويضغتط زر الرستال فيقوم المتصتفح بجمتع البيانات وتحويلهتا وتجهيزهتا ثتم إرستالها إلى المكان الذي حددتته وحستب‬ ‫الطريقة التي حددتها‪ ،‬النماذج بالفعل هي أفضل طريقة تفاعلية في لغة ‪.HTML‬‬ ‫يتتم إدراج النموذج بالوستم ‪ form‬ويتتم إدراج المعلومات فتي صتورة وستوم ‪ input‬مفردة‪ ،‬يحتوي الوستم ‪ form‬على مجموعتة متن الخواص‬ ‫أهمهتا ‪ action‬وفيته تحدد عنوان البرنامتج الذي ستيستفيد متن البيانات‪ ،‬والخاصتية الثانيتة هتي ‪ method‬وفيهتا تحدد طريقتة نقتل البيانات إمتا‬

              ‫‪ post‬أو ‪ ،get‬أما الوسوم ‪ input‬فأهم خاصية فيها هي ‪ type‬وتحدد فيها نوع الكائن الذي سيأخذ المعلومة من المستخدم‪ ،‬ويأخذ أحد القيم‬ ‫التالية ‪:‬‬ ‫•‪ : Text‬وهو أشهر طرق إرسال المعلومات ويظهر في النموذج في صورة مربع نص يمكن للمستخدم إدخال أي شيء فيه‪.‬‬ ‫•‪ : Button‬لعمل زر‪ ،‬ويستفاد من الزر في عمل أي شيء‪.‬‬ ‫•‪ : Checkbox‬لعمل مربع اختيار‪ ،‬إذا تم اختياره فإنه يرسل القيمة ‪ on‬وإذا لم يتم اختياره فإنه ل يرسل أي معلومة‪.‬‬ ‫•‪ : File‬لرسال الملفات‪.‬‬ ‫•‪ : Hidden‬يرسل المعلومة التي تريدها بالقيمة التي تريدها‪ ،‬ول يظهر أي شيء في صفحة ‪ ،HTML‬تستطيع عن طريقه دمج‬ ‫معلومة ما داخل ملف ‪ HTML‬بحيث ل يعلم عنها المستخدم ول يحتاج إلى تغييرها‪.‬‬ ‫•‪ : Image‬تستخدم في الكثير من المور مثل الزر‪.‬‬ ‫•‪ : Password‬يستتخدم لرستال كلمتة المرور‪ ،‬وهتو يرستل كلمتة المرور بصتورة واضحتة دون أيتة تشفيتر وإنمتا يختلف عتن مربتع‬ ‫النص العادي في أن الحروف تظهر في صورة نجوم ( * )‪.‬‬ ‫•‪ : Radio‬يستخدم لعمل الدوائر لكي يختار المستخدم قيمة ما من عدة خيارات‪.‬‬ ‫•‪ : Reset‬يستخدم لمحو محتويات النموذج وإعادته إلى الحالة الصلية‪.‬‬ ‫•‪ : Submit‬يظهر في صورة زر يستخدم لرسال المعلومات الموجودة في النموذج‪.‬‬ ‫يمكنك أيضا إرسال المعلومات مع النموذج بواسطة وسمين آخرين يوضعان أيضا بين وسمي ‪ form‬وهذا الوسمان هما ‪ select‬لعمل قائمة‬ ‫اختيار والوستم ‪ textarea‬لعمتل مربتع نتص متعدد الستطر‪ ،‬وبيتن وستمي ‪ select‬نضتع عدة وستوم ‪ option‬كتل واحتد منهتا يعتبر عتن بنتد فتي‬ ‫القائمة ويكون لكل بند قيمة معينة وترسل قيمة البند الذي تم اختياره‪.‬‬ ‫ملحظة‬

              ‫لقتد قمتت بعمتل برنامتج صتغير موجود على المزود يقوم بأختذ المعلومات التتي ترستلها بأي متن الطريقتيتن ويعيتد لك النتائج فتي صتورة جدول‬ ‫وسنستخدمه لتوجيه جميع الطلبات إليه لمعرفة كيفية عمل النماذج‪.‬‬ ‫إستم البرنامتج ‪ echo.pl‬وهتو موجود فتي الدليتل الذي بته هذا الملف لذا ستنقوم باستتخدام المستارات النستبية ونحدد الخاصتية ‪ action‬فتي‬ ‫تجاربنا على القيمة ‪ echo.pl‬دائما‪.‬‬ ‫سنقوم في البداية بعمل أمثلة عامة وبعد ذلك سنركز على كل كائن من كائنات النموذج‪.‬‬ ‫أنظر إلى المثال التالي ‪:‬‬ ‫>‪<"form action="echo.pl‬‬ ‫‪‪input type="radio" name="exact"> Exact Match‬‬ ‫>‪ All Words‪<"input type="hidden" name="todo" value="search‬‬ ‫>‪<"input type="submit" value="Search‬‬ ‫>‪

              ‫يبتو واضحتا فتي المثال الستابق كيتف يتتم نقتل المعلومات عتبر الويتب باستتخدام طريقتة ‪ ،get‬وإذا أعدت التجربتة الستابقة باستتخدام الطريقتة‬ ‫‪ post‬فسوف تحصل على نتائج مطابقة لن البرنامج الذي أعددته (‪ )echo.pl‬مجهز للتعامل مع الطريقتين‪.‬‬

              ‫مربع النص‬ ‫نقوم بوضتع مربتع النتص كمتا ذكرنتا ستابقا‪ ،‬باستتخدام الوستم ‪ input‬متع تغييتر الخاصتية ‪ type‬له إلى القيمتة ‪ ،text‬ويمكننتا وضتع أي محتويات‬ ‫ابتدائية نريدها فيه عن طريق الخاصية ‪ value‬له‪ ،‬ويمكن أيضا التحكم بحجمه عن طريق الخاصية ‪ ،size‬لتحديد طول المربع الذي نريده‪.‬‬ ‫>‪<"form action="echo.pl" method="get‬‬ ‫‪<Username ‪<"input type="submit‬‬ ‫>‪
              ‫مربع الختيار‬ ‫و هو يوضع بالو سم ‪ input‬أيضا بتحديد الخاصية ‪ type‬لهتا عند القيمة ‪ ،checkbox‬ويمكن بالمعلومات التي سيتم إرسالها عن طريق السم‬ ‫بالخاصتية ‪ name‬والقيمتة بالخاصتية ‪ value‬فيمكننتا مثل أن نجعتل النموذج يرستل المعلومتة ‪ do=subscribe‬إذا قام المستتخم باختيار أحتد‬ ‫مربعات الخيار‪ ،‬وذلك بضبتط الخاصتية ‪ name‬له عنتد القيمتة ‪ do‬والخاصتية ‪ value‬له عتن القيمتة ‪ ،subscribe‬وعنتد عدم اختيار مربتع الخيار‬ ‫فلن يتم إرسال أي شيء يتعلق به‪.‬‬ ‫أي أنه مثل النوع ‪ hidden‬إل المستخدم هنا يحدد فقط إذا كانت المعلومة سترسل أو ل‪.‬‬ ‫>‪<"form action="echo.pl" method="get‬‬ ‫>‪ Subscribe.‪<"input type="submit‬‬ ‫>‪
              ‫الختيار من متعدد‬

              ‫يمكنك عمل دوائر الختيار من متعدد بواسطة وسوم ‪ input‬بحيث تضبط خاصيتها ‪ type‬عند القيمة ‪ ،radio‬ولعمل مجموعة من الوسوم التي‬ ‫يجتب على المستتخدم اختيار أحدهتا قتم بعمتل وستم ‪ input‬لكتل واحتد منهتا واجعتل قيمتة الخاصتية ‪ name‬متستاوية فيهتا جميعتا متع تغييتر قيمتة‬ ‫الخاصتية ‪ value‬فتي كتل منهتا‪ ،‬فيكون عندنتا نيابتة عتن جميتع هذه الزرار معلومتة واحدة استمها يحدد بالقيمتة ‪ name‬وقيمتهتا حستب قيمتة‬ ‫الخاصية ‪ value‬للزر الذي تم اختياره‪.‬‬ ‫>‪<"form action="echo.pl" action="get‬‬ ‫‪‪ 10 - 17‪ 18 - 50‪ 51 - 100‪input type="radio" name="gender" value="male"> Male‬‬ ‫>‪ Female‪<"input type="submit‬‬ ‫>‪
              ‫تلحظ من المثال السابق أنك تستطيع فقط اختيار ‪ Male‬أو ‪ Female‬من القائمة الثانية‪ ،‬لنها يمتلكان نفس السم ‪.name‬‬

              ‫القائمة‬ ‫عند تكوين القائمة نقوم أول بوضع وسم القائمة ‪ select‬ونعين له خاصية ‪ name‬التي ستظهر في النموذج‪ ،‬وبعد ذلك نقوم بوضع عدة وسوم‬ ‫‪ option‬لكتل منهتا خاصتية ‪ value‬وعنتد إرستال البيانات ستيتم إرستال المعلومتة التتي إستمها موجود فتي الخاصتية ‪ name‬متن الوستم ‪select‬‬ ‫وقيمتها موجودة في الخاصية ‪ value‬من الوسم ‪ option‬الذي تم اختياره‪.‬‬ ‫>‪<"form action="echo.pl" method="get‬‬ ‫>‪<"select name="country‬‬ ‫>‪option value="kw">Kuwait‬‬ ‫>‪option value="sa">Saudia‬‬ ‫>‪option value="ua">Emirates‬‬ ‫>‪option value="qt">Qatar‬‬ ‫>‪option value="bh">Bahrain‬‬ ‫>‪option value="om">Oman‬‬ ‫>‪<select/‬‬ ‫>‪<"input type="submit‬‬ ‫>‪
              ‫مربع النص متعدد السطر‬ ‫ويمستى أيضتا بالمستاحة النصتية ‪ ،Textarea‬وهتو عبارة عتن وستم ‪ textarea‬مزدوج ( فتتح وإغلق ) وبينهمتا تضتع المحتويات التتي تريدهتا أن‬ ‫تظهر داخل المربع‪ ،‬وهو يستخدم غالبا مع النماذج التي ترسل معلوماتها بالطريقة ‪ post‬لنه يستخدم لرسال كمية كبيرة من البيانات‪.‬‬ ‫يمكنك التحكم في عدد السطر بالخاصية ‪ rows‬وعدد الحرف في كل سطر بالخاصية ‪ ( cols‬عدد العمدة )‪.‬‬ ‫>‪<"form action="echo.pl" method="get‬‬ ‫>‪<"textarea name="message" rows="6" cols="50‬‬ ‫‪! This Text will appear inside the box‬‬ ‫‪WOW‬‬ ‫‪(: It's working‬‬ ‫>‪