lesson HTML by alaa sarraah

‫برامج ‪ -‬ماسنجر ‪ - Messenger‬العاب‬ ‫ فيديو مضحك ‪ -‬خطوط ‪ -‬ترجمة‬‫مواقع ‪ -‬العاب فل ش‬ ‫‪/http://www.sh3bwah.com‬‬

‫بسم ا الرحمن الرحيم‬ ‫دورة متقدمة في ‪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 <b>Great</b> Language‬‬

‫وعند استخدام المتصفح في مشاهدة السطر السابق سيظهر هكذا ‪..‬‬ ‫‪Great Language HTML is a‬‬

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

‫‪Great HTML is a‬‬

‫‪Language‬‬

‫أمور إضافية يجب أن تعرفها عن ‪.. HTML‬‬ ‫•‬

‫لغة ‪ HTML‬ل تراعي حالة الحرف من حيث كونها كبيرة أو صغيرة‪ ،‬أي أنه في ‪ HTML‬وضع >‪ <b‬ل يختلف عن >‪.<B‬‬

‫•‬

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

‫•‬

‫بعض الوسوم تحتاج إلى وسم إغل‪،‬ق وبعضها ل يحتاج إليه‪.‬‬

‫برامج ‪ -‬ماسنجر ‪ - Messenger‬العاب‬ ‫ فيديو مضحك ‪ -‬خطوط ‪ -‬ترجمة‬‫مواقع ‪ -‬العاب فل ش‬ ‫‪/http://www.sh3bwah.com‬‬ ‫•‬

‫قد وقد ل يحتوي وسم الفتح على تخصائص إضافية‪ ،‬ولكن وسم الغل‪،‬ق ل يحتوي أبدا على هذه الخصائص‪.‬‬

‫•‬

‫لغة ‪ HTML‬ل تراعسسي المسسافات البيضسساء‪ ،‬وتعتبرهسسا جميعسسا مسسسافة واحسسدة‪ ،‬أي أن وضسع مسسافة واحسسدة بيسسن كلمسستين‪ ،‬يسسساوي وضسع‬ ‫مسافتين‪ ،‬ويساوي وضع نثلنثين مسافة‪ ،‬ويساوي وضع سطر جديد‪ ،‬ويساوي وضع جدولة ‪ ،tab‬كلها تترجم إلى مسافة‪.‬‬

‫•‬

‫توضع التعليقات بين >!‪ --‬و ‪ <--‬أي أن المتصفح يتجاهل أي شيء بينهما وكأنه غير موجود‪.‬‬

‫بنية ملف ‪HTML‬‬ ‫يتكون ملف ‪ HTML‬القياسي من جزئين رئيسيين هما ‪:‬‬ ‫•‬

‫الرأس ‪ : Head‬يحتوي على المعلومات الضافية الخاصة بالمستند مثل عنوان الصفحة والكلمات المفتاحية فيهسسا وغيرهسسا مسسن المسسور‬ ‫الخاصة بالصفحة والتي ل تعتبر من ضمن المحتوى‪.‬‬

‫•‬

‫الجسم ‪ : Body‬وهو يحتوي على المحتوى الذي يراه المستخدم‪.‬‬

‫المثال التالي يبين كيفية تقسيم ملف ‪.. HTML‬‬

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

‫اولـخطوط و الولوان‬ ‫المنماط الساسية‬ ‫أول العناوين وهي من ستة مستويات‪ ،‬العنوان الول ‪ h1‬والثاني ‪ h2‬وهكذا حتى ‪.. h6‬‬ ‫>‪<h1>Heading 1</h1‬‬ ‫>‪<h2>Heading 2</h2‬‬ ‫>‪<h3>Heading 3</h3‬‬ ‫>‪<h4>Heading 4</h4‬‬ ‫>‪<h5>Heading 5</h5‬‬ ‫>‪<h6>Heading 6</h6‬‬

‫لتحديد الفقرات يتم إحاطتها بالوسم ‪P‬‬ ‫>‪<p>Paragraph Text</p‬‬

‫لتحديد اتجاه الفقرة استخدم الخاصية ‪ align‬في الوسم ‪P‬‬ ‫>‪<p align="left">Left aligned paragraph</p‬‬ ‫>‪<p align="center">Centered paragraph</p‬‬ ‫>‪<p align="right">Right aligned paragraph</p‬‬

‫لعمل وصلة استخدم الوسم ‪ a‬مع الخاصية ‪ href‬لتحديد الوجهة‪ ،‬الوجهة قد تكون صفحة ‪ html‬وعنسدها يبسدأ العنسوان بسس ‪ :http‬وقسد يكسون عنسوان‬ ‫موقع ‪ ftp‬وعندها يبدأ بس ‪ :ftp‬وقد يكون بريدا إلكترونيا وعندها يبدأ بس ‪، :mailto‬ستعرف المزيد عن المسارات عندما يأتي الحديث عسن الصسور فسي‬ ‫الدرس القادم‪ ،‬وبين وسمي الفتح والغل‪،‬ق ضع المحتويات الساتخنة أو الوصلة نفسها‪ ،‬وهي قد تكون نصوصا أو صورا‪.‬‬ ‫>‪<a href="http://www.microsoft.com/">Microsoft Corp.</a><br‬‬ ‫>‪<a href="mailto:mubarmej@hotmail.com">My E-mail</a‬‬

‫يوجد أيضا استخدام آتخر للوسم ‪ 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‬التي تحدد نوع الخط المستخدم‬ ‫>‪<font face="verdana">Verdana Text</font><br‬‬ ‫>‪<font face="Courier New">Courier New Text</font‬‬

‫بعد ذلك هنالك الخاصية ‪ color‬المستخدمة لتحديد لون الخط )أنظر إلى اللوان في السفل(‬ ‫‪<This is <font color="red">Red</font‬‬ ‫‪<and this is <font color="blue">Blue</font‬‬

‫الخاصية الثالثة هي الخاصية ‪ size‬وهي تحدد حجم الخط‪ ،‬توجد سبعة أحجام للخط‪ ،‬والخط الساسي فسي الصسفحة يأتخسذ أحسد هسسذه الحجسام‪،‬‬ ‫وإذا أردت أن تغير حجم الخط في كلمة معينة أو جزء ما من النصوص استخدم الوسم ‪ font‬مع الخاصية ‪ size‬لزيادة حجم الخط أو إنقاصه بمقسسدار‬ ‫معين‪ ،‬إذا كا الخط الساسي هو ‪ 3‬فإنه يمكنك زيادة الخط ‪ 4‬مرات حتى تصل إلى ‪ 7‬وهو أكبر تخط ويمكنسسك إنقاصسسه مرتيسسن ليصسسبح ‪ 1‬وهسسو أصسسغر‬ ‫حجم للخط‪ ،‬الخط الساسي القياسي هو ‪ 3‬ما لم تقم بتغييره‪ ،‬يتم تحديد أنثر الرقم من حيث الزيادة أو النقصان بإضافة ‪ +‬قبل الرقم للزيادة و ‪-‬‬ ‫قبل الرقم للنقصان‪ ،‬وعند الزيادة فو‪،‬ق الحجم ‪ 7‬سيعرض المتصفح النص بالحجم ‪ 7‬وكذلك عند النقصان إلى أقل من الواحد فسوف يتسسم إعتبسساره‬ ‫‪.1‬‬ ‫>‪<font size="+4">Size 7</font><br‬‬ ‫>‪<font size="+3">Size 6</font><br‬‬ ‫>‪<font size="+2">Size 5</font><br‬‬ ‫>‪<font size="+1">Size 4</font><br‬‬ ‫>‪<font size="0">Size 3</font><br‬‬ ‫>‪<font size="-1">Size 2</font><br‬‬ ‫>‪<font size="-2">Size 1</font><br‬‬

‫توجد أيضا طريقة سريعة لتكبير الخط تخطوة واحدة أو تصغيره تخطوة واحدة باستخدام الوسم >‪ <big‬و >‪<small‬‬ ‫>‪<big>size 4</big><br‬‬ ‫>‪<small>size 2</small><br‬‬ ‫>‪<big><big>size 5</big></big><br‬‬

‫برامج ‪ -‬ماسنجر ‪ - Messenger‬العاب‬ ‫ فيديو مضحك ‪ -‬خطوط ‪ -‬ترجمة‬‫مواقع ‪ -‬العاب فل ش‬ ‫‪/http://www.sh3bwah.com‬‬ ‫الطر‪،‬ق السابقة لتغيير الخط تسمى طرقا نسبية ‪ relative‬لنك تقوم بتغيير الخط بالنسبة للخسسط الساسسسي‪ ،‬يمكنسسك أيضسسا تحديسسد الحجسسم السسذي‬ ‫تريده للخط بالضبط دون العتماد على الخط الساسي عن طريق الخاصية ‪ size‬ذاتها ولكن دون وضع إشارة ‪ +‬أو ‪ -‬مقابل الحجم المطلوب‬ ‫>‪<font size="7">Size 7</font><br‬‬ ‫>‪<font size="6">Size 6</font><br‬‬ ‫>‪<font size="5">Size 5</font><br‬‬ ‫>‪<font size="4">Size 4</font><br‬‬ ‫>‪<font size="3">Size 3</font><br‬‬ ‫>‪<font size="2">Size 2</font><br‬‬ ‫>‪<font size="1">Size 1</font‬‬

‫يمكنك كذلك تغيير حجم الخط الساسي في المستند وهذا سيؤنثر على جميع الماكن التي استخدمت فيها الحجام النسبية للخطوط‪،‬‬ ‫ونغير الخط الساسي باستخدام وسم يدعى >‪ <basefont‬ويمكن استخدامه لتغيير حجم الخط الساسي في المستند أو لون الخط‬ ‫الساسي أو نوع الخط الساسي‪ ،‬وهو ل يأتخد قيم نسبية في الحجم )ل ينسب إلى نفسه(‪ ،‬على سبيل المثال لتغيير الخط الساسي‬ ‫إلى ‪ Verdana‬بحجم ‪ 3‬ولون أتخضر نضع السطر التالي في المستند‬ ‫>‪<"basefont color="Green" size="3" face="Verdana‬‬ ‫والوسم السابق ل يستخدم في جزء محدد من نصوص ‪ HTML‬بل يظهر تأنثيره في الصفحة كلها لذلك فهو ل يحتاج إلى وسم إغل‪،‬ق‪.‬‬ ‫توجد أيضا وسوم أتخرى للتنسسسيقات المختلفسة‪ ،‬مثل الوسسم ‪ b‬أو ‪ strong‬للخسسط العريسض والوسسسم ‪ i‬أو ‪ em‬للمائسل ‪،‬و الوسسم ‪ tt‬يسستخدم لجعسسل‬ ‫الحروف متساوية في الحجم مثل نصوص اللة الكاتبة‬ ‫>‪<b>This</b> is Bold Text and <strong>this</strong> to!<br‬‬ ‫‪<but <i>This</i> is Italic Text and <em>this</em> to!<br‬‬ ‫‪And <tt>This</tt> is Typewriter Text‬‬

‫يوجد وسم تخاص بوضع الخط الفقي هو الوسم ‪ hr‬يمكنك تحديد عرض الخط بالخاصية ‪ ،width‬حيث تأتخذ ‪ width‬قيما مطلقة مثل ‪ 10‬أو ‪293‬‬ ‫وهي تحدد العرض بالبكسل‪ ،‬وقيما نسبية تقاس بالنسبة إلى عرض الصفحة‪ ،‬مثل ‪ %20‬و ‪ ،%85‬توجد أيضا تخاصية أتخرى هي ‪ size‬تحدد‬

‫ العاب‬- Messenger ‫ ماسنجر‬- ‫برامج‬ ‫ ترجمة‬- ‫ خطوط‬- ‫ فيديو مضحك‬‫ العاب فل ش‬- ‫مواقع‬ /http://www.sh3bwah.com ‫ وعند‬،‫ وهي تخاصية بدون قيمة‬noshade ‫ والخاصية‬،‫ لتحديد لون الخط‬color ‫ وتوجد أيضا تخاصية‬،‫ارتفاع الخط رأسيا ويأتخذ قيما مطلقة صغيرة‬ ‫وضعها تجعل الخط يبدو مصمتا وليس منحوتا كما في الحالة القياسية‬ This is the First Line <hr> This is the Secound Line <"hr color="Purple> This is the Third Line <"hr width="30%> This is the Fourth Line <"hr noshade size="40>

‫ وهسذه المتغيسسرات تسسستخدم فسي تحديسسد تنسسسيق الصسسفحة مثسسل لسسون تخلفيسسة‬،<body> ‫يمكن أيضا استخدام بعض المتغيرات في وسم الجسم‬ ،alink ‫ والمحسددة حاليسا‬vlink ‫ والقديمسة‬link ‫ ولسون الوصسلة الجديسدة‬text ‫ ولسون النسص‬،background ‫ وصورة الخلفيسة المتكسررة‬bgcolor ‫الصفحة‬ .rightmargin ‫ واليمنى‬leftmargin ‫ واليسرى‬buttommargin ‫ والسفلية‬topmargin ‫وحاشية الصفحة العلوية‬ "body alink="red" link="yellow" vlink="blue> <"bgcolor="black" text="white" topmargin="0 <This is some Text.<br <And here are some links :<br <a href="http://www.download.com/">Great Downloads</a><br> <a href="mailto:bgates@hotmail.com">Bill Gates!?</a><br> <a href="http://www.msn.com/">Microsft Network</a><br> <a href="http://www.hotmail.com">Free E-mail</a> <body/>

‫اللوان في ‪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‬‬ ‫>‪<font color="Khaki"> Sample 1 </font><br‬‬ ‫>‪<font color="#0066cc"> Sample 2 </font><br‬‬

‫برامج ‪ -‬ماسنجر ‪ - Messenger‬العاب‬ ‫ فيديو مضحك ‪ -‬خطوط ‪ -‬ترجمة‬‫مواقع ‪ -‬العاب فل ش‬ ‫‪/http://www.sh3bwah.com‬‬ ‫>‪<font color="rgb(204,112,202)"> Sample 3 </font><br‬‬ ‫>‪<font/‬‬

‫الــصــور‬ ‫يمكنك في لغة ‪ 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><br><br‬‬ ‫>‪"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‬‬ ‫>‪<img src="/images/sample.gif"></a><br‬‬ ‫>‪<"/a href="http://www.microsoft.com‬‬ ‫>‪<img src="/images/sample.gif" border="0"></a><br‬‬ ‫>‪<"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/‬‬

‫ العاب‬- Messenger ‫ ماسنجر‬- ‫برامج‬ ‫ ترجمة‬- ‫ خطوط‬- ‫ فيديو مضحك‬‫ العاب فل ش‬- ‫مواقع‬ /http://www.sh3bwah.com

،‫ عند النقسر علسى أحسدها يظهسر حسوله إطسار أسسود‬،‫ستلحظ الن أن الصورة مقسمة إلى عدة مناطق ساتخنة كل منها يشير إلى وصلة مختلفة‬ ‫ مختلسسف لكسسل قسسسم مسسن الصسسورة‬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‬‬ ‫>‪<ul/‬‬ ‫>‪<"ol type="I‬‬ ‫>‪(li>Windows (85%‬‬

‫ العاب‬- Messenger ‫ ماسنجر‬- ‫برامج‬ ‫ ترجمة‬- ‫ خطوط‬- ‫ فيديو مضحك‬‫ العاب فل ش‬- ‫مواقع‬ /http://www.sh3bwah.com (li>Linux (10%> (li>Mac (3%> (li>Other (2%> <ol/>

<ol> li>American Companies> <ol> li>Microsoft> li>General Motors> <ol/> li>German Companies> <ol> li>Dubian> li>BMW> <ul> li>6 Class> li>7 Class> <ul/> <ol/> <ol/>

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

‫يمكنك أيضا التحكم بالمسافة بين الخليا بواسطة الخاصية ‪ ،cellspacing‬والمسافة بيسسن الحسسدود الداتخليسسة للخليسسا ومحتويسسات الخليسسا بواسسسطة‬ ‫الخاصية ‪.cellpadding‬‬ ‫>‪<"table cellspacing="10" cellpadding="20" border="1‬‬ ‫>‪<tr‬‬ ‫>‪<td>First Cell</td‬‬ ‫>‪<td>Secound Cell</td‬‬ ‫>‪<tr/‬‬ ‫>‪<table/‬‬

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

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

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

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

‫ العاب‬- Messenger ‫ ماسنجر‬- ‫برامج‬ ‫ ترجمة‬- ‫ خطوط‬- ‫ فيديو مضحك‬‫ العاب فل ش‬- ‫مواقع‬ /http://www.sh3bwah.com td>Secound Table - First Cell> td>Secound Table - Secound Cell> <tr/> <table/> <tr/> <tr> <td> <"table border="1> <tr> td>Third Table - First Cell> td>Third Table - Secound Cell> <tr/> <table/> td>First Table - Fourth Cell> <tr/> <table/>

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

‫برامج ‪ -‬ماسنجر ‪ - Messenger‬العاب‬ ‫ فيديو مضحك ‪ -‬خطوط ‪ -‬ترجمة‬‫مواقع ‪ -‬العاب فل ش‬ ‫‪/http://www.sh3bwah.com‬‬ ‫>‪td>Seventh Cell‬‬ ‫>‪td>Eighth Cell‬‬ ‫>‪td>Nineth Cell‬‬ ‫>‪<tr/‬‬ ‫>‪<table/‬‬

‫الطر‬ ‫تستخدم الطر ‪ 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/‬‬

‫وكما ذكرنا يمكنك وضع ‪ frameset‬آتخر بدل من أحد الطارات ‪frame‬‬ ‫>‪<"*,frameset rows="50‬‬ ‫>‪<"frame src="sample1.html‬‬ ‫>‪<"*,frameset cols="100‬‬ ‫>‪<"frame src="sample2.html‬‬ ‫>‪<"frame src="sample3.html‬‬ ‫>‪<frameset/‬‬ ‫>‪<frameset/‬‬

‫يمكنك وضع أو إزالة الطار الذي يظهر حول اللواح باستخدام الخاصية ‪ frameborder‬إذا ضبتها عند القيمة ‪ 0‬لسسن يظهسسر الطسسار و ‪ 1‬يظهسسر الطسسار‪،‬‬ ‫يمكنك التحكم بحجم الطار عن طريق زيادة أو إنقاص المسافة بين اللواح وذلك عبر الخاصية ‪ framespacing‬فتضع فيهسسا القيمسسة السستي تريسسدها‪،‬‬ ‫يمكنك ضبط الخاصيتان السابقتان عند ‪ 0‬لمنع المستخدم من تغيير حجم اللواح‪.‬‬ ‫>‪<"frameset cols="50%,*" frameborder="0" framespacing="0‬‬ ‫>‪<"frame src="sample1.html‬‬ ‫>‪<"frame src="sample2.html‬‬ ‫>‪<frameset/‬‬

‫يمكنك التحكم في ظهور أشرطة التمرير ‪ 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‬‬ ‫>‪<frameset/‬‬ ‫>‪<frameset/‬‬

‫لكي تستطيع أن ترسل أوامرك ووصلتك من لوح إلى آتخر‪ ،‬يجب أن تقوم بتسمية أو عنونة اللسواح بواسسطة الخاصسية ‪ ،name‬وبعسد ذلسك لعمسل‬ ‫وصلة بواسطة الوسم ‪ a‬استخدم الخاصية ‪ target‬لتحديد وجهة الوصلة‪ ،‬يمكنك فتح الوصلة في شاشسة متصسسفح جديسدة _‪ blank‬أو فتحهسا فسي‬ ‫الشاشة الحالية فو‪،‬ق مجموعة اللواح _‪ top‬أو فتحها في اللوح الحالي _‪ self‬أو فتحها في اللوح الب )في حالة ألسسواح داتخسسل ألسسواح( _‪ parent‬أو‬ ‫فتحها في أي لوح بوضع إسم اللوح‪.‬‬ ‫>!‪--‬‬

‫‪sample4.html‬‬

‫‪<--‬‬

‫>‪"a href="sample1.html‬‬ ‫‪<target="_blank">Page 1</a><br‬‬ ‫>‪"a href="sample3.html‬‬ ‫‪<target="_top">Page 3</a><br‬‬

‫برامج ‪ -‬ماسنجر ‪ - Messenger‬العاب‬ ‫ فيديو مضحك ‪ -‬خطوط ‪ -‬ترجمة‬‫مواقع ‪ -‬العاب فل ش‬ ‫‪/http://www.sh3bwah.com‬‬ ‫>‪"a href="sample2.html‬‬ ‫‪<target="main">Page 2</a‬‬ ‫>‪"a href="sample4.html‬‬ ‫‪<target="main">Page 4</a‬‬ ‫>‪<"*,frameset rows="20‬‬ ‫>‪<"frame src="sample1.html‬‬ ‫>‪<"*,frameset cols="200‬‬ ‫>‪<"frame src="sample4.html‬‬ ‫>‪<"frame src="sample3.html" name="main‬‬ ‫>‪<frameset/‬‬ ‫>‪<frameset/‬‬

‫إضافة إلى ما سبق‪ ،‬يوجد أيضا إطار من نوع تخاص يكون عائما في المستند مثل الصورة‪ ،‬يتم إدراج هسسذا الطسسار فسسي أي مكسسان بالمسسستند تحسست‬ ‫القسم ‪ ،body‬ويقوم بعمل إطار ليعرض صفحة ‪ HTML‬تخارجية‪ ،‬ووسمه هو ‪ iframe‬وأهم تخصائصه الخاصسسية ‪ src‬السستي تحسسدد المسسستند المصسسدر‬ ‫الذي يجب عرضه في الطار‪ ،‬يمكنك أيضا عنونه بالخاصية ‪ name‬وعمل وصلت موجهة إليه تماما مثل الطار العادي‪ ،‬وفيما بقي فهو مثل الطار‬ ‫يمتلك أيضا تخاصية ‪ width‬و ‪ height‬لتحديد حجمة‬

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

‫برامج ‪ -‬ماسنجر ‪ - Messenger‬العاب‬ ‫ فيديو مضحك ‪ -‬خطوط ‪ -‬ترجمة‬‫مواقع ‪ -‬العاب فل ش‬ ‫‪/http://www.sh3bwah.com‬‬ ‫ترسل ملتصقة بهذه العناوين فإنه ل بد من تحويل سطر البيانات السابق بحيث يصبح مطابقا لمواصسسفات ‪ ،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‬‬ ‫‪<First Name : <input type="text" name="first_name"><br‬‬ ‫‪<Secound Name : <input type="text" name="secound_name"><br‬‬ ‫>‪input type="radio" name="exact"> Exact Match‬‬ ‫>‪<input type="radio" name="all"> All Words<br‬‬ ‫>‪<"input type="hidden" name="todo" value="search‬‬ ‫>‪<"input type="submit" value="Search‬‬ ‫>‪<form/‬‬

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

‫مربع النص‬ ‫نقوم بوضع مربع النص كما ذكرنا سابقا‪ ،‬باستخدام الوسم ‪ input‬مع تغيير الخاصية ‪ type‬له إلى القيمة ‪ ،text‬ويمكننا وضع أي محتويات ابتدائية‬ ‫نريدها فيه عن طريق الخاصية ‪ value‬له‪ ،‬ويمكن أيضا التحكم بحجمه عن طريق الخاصية ‪ ،size‬لتحديد طول المربع الذي نريده‪.‬‬ ‫>‪<"form action="echo.pl" method="get‬‬ ‫‪<Username <input type="text" size="20" name="username"><br‬‬ ‫‪<Email <input type="text" size="40" name="email"><br‬‬ ‫‪<URL <input type="text" size="40" name="url" value="http://"><br‬‬ ‫>‪<"input type="submit‬‬ ‫>‪<form/‬‬

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

‫برامج ‪ -‬ماسنجر ‪ - Messenger‬العاب‬ ‫ فيديو مضحك ‪ -‬خطوط ‪ -‬ترجمة‬‫مواقع ‪ -‬العاب فل ش‬ ‫‪/http://www.sh3bwah.com‬‬ ‫>‪<form/‬‬

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

‫تلحظ من المثال السابق أنك تستطيع فقط اتختيار ‪ Male‬أو ‪ Female‬من القائمة الثانية‪ ،‬لنها يمتلكان نفس السم ‪.name‬‬

‫القائمة‬ ‫عند تكوين القائمة نقوم أول بوضع وسم القائمة ‪ select‬ونعين له تخاصية ‪ name‬التي ستظهر في النموذج‪ ،‬وبعسسد ذلسسك نقسسوم بوضسسع عسسدة وسسوم‬ ‫‪ option‬لكل منها تخاصية ‪ value‬وعند إرسال البيانات سيتم إرسال المعلومة التي إسمها موجود في الخاصية ‪ name‬من الوسم ‪ select‬وقيمتها‬ ‫موجودة في الخاصية ‪ value‬من الوسم ‪ option‬الذي تم اتختياره‪.‬‬ ‫>‪<"form action="echo.pl" method="get‬‬

‫ العاب‬- Messenger ‫ ماسنجر‬- ‫برامج‬ ‫ ترجمة‬- ‫ خطوط‬- ‫ فيديو مضحك‬‫ العاب فل ش‬- ‫مواقع‬ /http://www.sh3bwah.com <"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> <form/>

‫مربع النص متعدد السطر‬ ‫ق ( وبينهما تضع المحتويات التي تريدها أن تظهر‬،‫ مزدوج ) فتح وإغل‬textarea ‫ وهو عبارة عن وسم‬،Textarea ‫ويمسى أيضا بالمساحة النصية‬ .‫ لنه يستخدم لرسال كمية كبيرة من البيانات‬post ‫ وهو يستخدم غالبا مع النماذج التي ترسل معلوماتها بالطريقة‬،‫داتخل المربع‬ .( ‫ ) عدد العمدة‬cols ‫ وعدد الحرف في كل سطر بالخاصية‬rows ‫يمكنك التحكم في عدد السطر بالخاصية‬ <"form action="echo.pl" method="get> <"textarea name="message" rows="6" cols="50> ! This Text will appear inside the box WOW (: It's working <textarea><br/> <"input type="submit> <form/>

‫أمور أضافية‬ ‫وسوم ‪meta‬‬ ‫على الرغم من أن اسمها وسوم ‪ meta‬إل أنها ليست أكثر من وسم واحد هو الوسم ‪! meta‬‬ ‫يستخدم الوسم ‪ meta‬لعطاء المزيد من المعلومات حول الصفحة‪ ،‬مثل وصف الصفحة والكلمات المفتاحية للصفحة وإسم مؤلف الصفحة وإسم‬ ‫البرنامج المستخدم لتأليف الصفحة وغيرها من المعلومات‪ ،‬وجميع واصفحات ‪ meta‬توضسع فسي ترويسسسة مسسستند ‪ HTML‬أي بيسسن وسسسمي ‪head‬‬ ‫وهذا أمر طبيعي لنها ليست جزءا من المحتوى‪.‬‬ ‫تختلف واصفحات ‪ meta‬عن بعضها البعض بالخاصية ‪ name‬أو ‪ ،http-equiv‬توجد بعض البرامج تحدد نسسوع الوسسسم ‪ meta‬حسسسب الخاصسسية ‪name‬‬ ‫وبرامج أتخرى حسب الخاصية ‪ http-equiv‬لذا فمن الفضل وضع النثنين‪.‬‬

‫برامج ‪ -‬ماسنجر ‪ - Messenger‬العاب‬ ‫ فيديو مضحك ‪ -‬خطوط ‪ -‬ترجمة‬‫مواقع ‪ -‬العاب فل ش‬ ‫‪/http://www.sh3bwah.com‬‬ ‫الخاصية الثانية لوسوم ‪ meta‬هي الخاصية ‪ content‬التي تحدد محتوى المعلومة التي حددت اسمها بكل من الخاصيتين ‪ name‬و ‪.http-equiv‬‬ ‫الكلمات المفتاحية مثل إسمها ‪ ،keywords‬فإذا كانت الكلمات المفتاحيسسة فسي موقعسسك هسسي )ألعسساب برامسج صسسور مقلت دروس دورات(‪ ،‬فإنسسك‬ ‫ستحتاج إلى أن يكون لديك الوسم التالي ‪:‬‬ ‫>‪"meta name="keywords" http-equiv="keywords‬‬ ‫‪"=content‬ألعاب‪,‬برامج‪,‬صور‪,‬مقلت‪,‬دروس‪,‬دورات"<‬ ‫لحظ من الوسم السابق أن الكلمات المفتاحية يفصل كل منها عن التخر بفاصلة عادية‪.‬‬ ‫وكما في الطريقة السابقة يتم تحديد معلومات الصفحة بنفس الطريقة‪ ،‬وتأتخد الخاصية ‪ name‬أو ‪ http-equiv‬أحد القيم التالية‪:‬‬ ‫•‬

‫‪ : keywords‬لتعيين الكلمات المفتاحية للمستند مفصولة بفواصل‪ ،‬ومرتبة حسب أهميتها ول يجوز التكرار‪.‬‬

‫•‬

‫‪ : description‬لوضع وصف بسيط للصفحة ويفضل أن ل يتعدى العشرون كلمة‪.‬‬

‫•‬

‫‪ : generator‬إسم البرنامج الذي استخدم لنشاء الصفحة‪.‬‬

‫•‬

‫‪ : author‬إسم مؤلف الصفحة‪.‬‬

‫• ‪ : content-type‬لتحديد نسق البيانات وصفحة المحارف المستخدمة‪ ،‬لصفحات ‪ HTML‬العربيسسة المكتوبسسة فسسي الوينسسدوز ضسسع الوسسسم‬ ‫كالتالي ‪:‬‬ ‫• >‪"meta name="content-type" http-equiv="content-type‬‬ ‫•‬ ‫•‬

‫‪<"content="text/html; cahrset=windows-1256‬‬ ‫‪ : copyright‬معلومات عن حقو‪،‬ق طبع الصفحة‪.‬‬

‫تعريب الصفحات‬ ‫تتلخص إجراءات التعريب في جزئين رئيسيين‪ ،‬أول إظهار الخطوط بصورة سليمة‪ ،‬ونثانيا إظهار التجاه بشكل سليم‪.‬‬ ‫لظهار الخطوط العربية بشكل سليم يجب التأكد من استخدام صفحات المحارف العربية المنتشرة حاليا وهي ‪ ،windows-1256‬إذا كنت تكتسسب‬ ‫صفحاتك في ‪ Windows‬فهسذه هسي صسفحة المحسارف القياسسية‪ ،‬مسا عسسدا ‪ Windows 2000‬فهسسو يسسستخدم صسسفحة المحسارف العالميسسة الموحسدة‬ ‫‪ ،Unicode‬وأما إذا كنت تكتب صفحاتك في بيئة ‪ Unix (Linux‬مثل( فإن ذلك يعتمد على البرنامج الذي تستخدمه لتعريب النظام‪.‬‬ ‫وفي جميع الحوال السابقة فإنك تحتاج لضبط الوسم ‪ meta‬الخاص بنوع المحتوى ‪ content-type‬عند قيمة مناسبة‪.‬‬ ‫أما تغيير اتجاه الصفحات فيتم بعدة طر‪،‬ق‪ ،‬أول طريقة هي استخدام الوسم ‪ p‬وضبط الخاصية ‪ align‬له عند القيمة ‪ ،right‬وهي طريقة بسيطة‬ ‫ونافعة‪ ،‬ولكنها تصبح متعبة في المواقع الكبيرة وعندما تريد عمل الكثير من الجداول والتنسيقات‪ ،‬أمسا الطريقسة الثانيسة وهسي الطريقسة الفضسل‬ ‫فهي استخدام الخاصية ‪ dir‬في الوسم ‪ html‬وضبطه عند القيمة ‪ ،rtl‬يقوم ذلك بجعل الصفحة تتجه كليا من اليمين إلى اليسار‪ ،‬بحيث تصبح‬ ‫الفقرات تتجه من اليمين إلى اليسار‪ ،‬والعناوين تتجه من اليمين إلى اليسسار وتصسسبح الخليسسة الولسى فسي الجسسدول هسسي الخليسسة الولسى علسى‬ ‫اليمين‪ ،‬وهذه الميزة متوفرة تلقائيا في متصفح ‪ Internet Explorer‬وهي غير متوفرة في ‪ ،Netscape Navigator‬ولكن عند تركيب ‪،Sindbad‬‬ ‫فإن هذه الميزة تظهر في صورة زر في على شريط العنوان حيث يحدد المستخدم التجاه الذي يريده يدويا ول تؤنثر الخاصية ‪ dir‬على الصسسفحة‬ ‫تلقائيا‪.‬‬ ‫>‪<"html dir="rtl‬‬

‫ما وراء ‪HTML‬‬ ‫الن وقد انتهيت من تعلم لغة ‪ HTML‬فل يسعنا أن نقول أنسسك انتهيسست مسسن تعلسسم مهنسسة تطسسوير السسويب ‪ ،Web Developing‬فل زال أمامسسك الكسسثير‬ ‫لتتعلمه حتى تصل إلى المستوى الحترافي الذي نطالب به جميع العرب‪ ،‬فتقنيات الويب تتجدد باستمرار ويصبح اللحا‪،‬ق بها كلها أمرا مستحيل‬ ‫على الضعفاء‪ ،‬أما القوياء فهم على الطريق بثبات وبعزمهم وإصرارهم أصبحوا روادا في عالم الكمبيوتر والنسسترنت الرائسسع‪ ،‬بقسسي علينسسا أن نعلمسسك‬ ‫ببعض هذه التقنيات وكيفية الحصول على المزيد من المعلومات عنها‪ ،‬ونعدك بأننا سنواكب جميع هذه التقنيات فسسي دورات مسسستقبلية إن شسساء‬ ‫ا لنؤدي دورنا إلى جميع العرب‪.‬‬

‫أورا‪،‬ق النماط المتتالية‬ ‫أورا‪،‬ق النماط المتتالية أو ‪ Casscading Style Sheet‬أو ‪ CSS‬هي تقنية تستخدم للتحكم في الكيفية التي يجب أن تظهر بها الوسوم في صفحة‬ ‫ويب‪ ،‬فمثل العنوان الرئيسي ‪ H1‬يظهر باللون السود وبخط عادي وطريقة عادية‪ ،‬ولتغييره كان ل بد من وضع وسسم ‪ Font‬داتخسسل كسل وسسم ‪،H1‬‬ ‫فماذا لو استطعنا أن نحدد نحن كيف نريد لعنوان الصفحة الرئيسي أن يظهر‪ ،‬وكيف يجب أن تظهر الجداول وكيف يجسب أن تظهسر جميسع الوسسوم‬ ‫التخرى في لغة ‪ ،HTML‬الن يمكننا عمل ذلك باستخدام تقنية ‪ ،CSS‬وقد تم تطوير هذه التقنية على المدى العوام السابقة حتى وصلنا إلسسى‬ ‫النسخة الثانية من مواصفات هذه اللغة ويمكن الحصول عليها من مجمع الشبكة العنكبوتية العالمية مع مجموعسسة كسسبيرة مسسن الوصسسلت والكتسسب‬ ‫والدورات ‪/http://www.w3.org/Style/CSS :‬‬

‫لغة الترميز القابلة للتوسع‬ ‫لغة الترميز القابلة للتوسع أو ‪ eXtensible Markup Language‬أو ‪ XML‬هي عبارة عن تقنية جديدة بحيث يتم التخلسسص مسسن الوسسسوم القياسسسية‬ ‫ويصبح لكل شخص وسومه الخاصة به‪ ،‬فبد أن ظهرت تقنية ‪ CSS‬أصبح أمر الوسوم غير مهما‪ ،‬فيمكنني مثل أن أقوم بجعسل الوسسم ‪ h6‬السذي ل‬ ‫أستخدمه كثيرا يصبح وسما تخاصا له لون تخاص وشكل تخاص أستخدمه في كتابة الملحظات مثل‪ ،‬بحيث يصبح لونها أحمرا وتكون مبروزة ببرواز‬ ‫جميل ولفته للنظر‪ ،‬وهكذا أصبح السم ‪ h6‬ل يشير إلى شيء‪ ،‬فما الفائدة منه الن !‬ ‫لذا فقد ظهرت فكرة لغة الترميز القابلة للتوسع بحيث أنك تقوم بعمل الوسوم وتسميها بأي اسسسم تريسسده‪ ،‬وتحسسدد كيفيسسة ظهسسور المحتسسوى السسذي‬ ‫بداتخل الوسم عن طريق أورا‪،‬ق النماط المتتالية‪ ،‬للمزيد عن ‪ XML‬إذهب إلى قسم ‪ XML‬في مجمع الويب ‪/http://www.w3.org/XML :‬‬

‫لغة الجافا سكريبت‬ ‫لغة الجافا سكريبت هي عبارة عن لغة برمجة محدودة‪ ،‬مخصصة للعمل في صفحات ويب لتوفير صفحات متغيرة ) ديناميكية (‪ ،‬فيمكنك عمل زر‬ ‫ينفذ عمليات تخاصة على جهاز الزبون دون إرسال المعلومات إلى مزود ويب‪ ،‬وتستخدم بشكل كبير في الصفحات الشخصية في عمل الحركسسات‬ ‫والتأنثيرات الفنية والحركية وقد ظهرت أتخيرا العديد من المواقع التي توفر سكريبتات جاهزة ورائعة لتقوم بنقلها وإضسسافتها إلسسى موقعسسك بسسسهولة‪،‬‬ ‫للمزيسسسسسد مسسسسسن المعلومسسسسسات عسسسسسن لغسسسسسة الجافسسسسسا سسسسسسكريبت إذهسسسسسب إلسسسسسى موقسسسسسع ‪ /http://javascript.internet.com :‬أو موقسسسسسع‬ ‫‪./http://www.dynamicdrive.com‬‬

‫البرمجة جهة المزود‬ ‫البرمجة جهة المزود هي طريق يتسسم فيهسا تركيسسب الصسسفحات وصسسنعها ديناميكيسا طبقسا لمواصسسفات متفسسق عليهسا لتبسادل البيانسات‪ ،‬وتسسسمى هسذه‬ ‫المواصفات واجهة البوابات الشائعة أو ‪ Common Gateway Interface‬أو ‪ ،CGI‬ويمكن كتابة البرامج بأي لغة من لغات البرمجة بشرط أن يعمل‬ ‫البرنامج حسب مواصفات ‪ ،CGI‬ولكن أشهر لغات البرمجة استخداما هي لغة ‪ Perl‬وهسسي تتميسسز باحتواءهسسا علسسى العديسسد مسسن الميسسزات ووظسسائف‬

‫برامج ‪ -‬ماسنجر ‪ - Messenger‬العاب‬ ‫ فيديو مضحك ‪ -‬خطوط ‪ -‬ترجمة‬‫مواقع ‪ -‬العاب فل ش‬ ‫‪/http://www.sh3bwah.com‬‬ ‫معالجة النصوص المطلوبة في عمليات إنشاء الصفحات ديناميكيا‪ ،‬وهي لغة عامة وليست لغة مخصصة لكتابة برامسسج ‪ CGI‬فقسسط‪ ،‬علسسى العكسسس‬ ‫من لغة ‪ PHP‬الجديدة وهي لغة مخصصة كليا لعمل الصفحات الديناميكية وهي اللغة المسسستخدمة لجعسسل موقسسع مبرمسسج يظهسسر بمظهسره الموحسسد‬ ‫والمتناسق والمترابط‪ ،‬وتوجد أيضا لغة ‪ ASP‬من مايكروسوفت أيضا ولكنها مقصورة على مزودات ‪ NT‬فقسسط ول تعمسسل فسسي مسسزودات ‪ UNIX‬الوسسسع‬ ‫انتشارا‪ ،‬للمزيد من المعلومات حول ‪ Perl‬راجع ‪ /http://www.perl.com :‬ولمعلومات حول لغة ‪ PHP‬راجع ‪/http://www.php.net‬‬