‫برامج ‪ -‬ماسنجر ‪ - 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‬‬

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

‫‪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‬‬

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

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

‫أول العناوين وهي من ستة مستويات‪ ،‬العنوان الول ‪ 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‬‬

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

‫لتحديد الفقرات يتم إحاطتها بالوسم ‪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‬‬

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

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

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

‫يوجد وسم خاص بوضع الخط الفقي هو الوسم ‪ hr‬يمكنك تحديد عرض الخط بالخاصية ‪ ،width‬حيث تأخذ ‪ width‬قيما مطلقة مثل ‪ 10‬أو‬
‫‪ 293‬وهي تحدد العرض بالبكسل‪ ،‬وقيما نسبية تقاس بالنسبة إلى عرض الصفحة‪ ،‬مثل ‪ %20‬و ‪ ،%85‬توجد أيضا خاصية أخرى هي ‪size‬‬
‫تحدد ارتفاع الخط رأسيا ويأخذ قيما مطلقة صغيرة‪ ،‬وتوجد أيضا خاصية ‪ color‬لتحديد لون الخط‪ ،‬والخاصية ‪ noshade‬وهي خاصية بدون‬
‫قيمة‪ ،‬وعند وضعها تجعل الخط يبدو مصمتا وليس منحوتا كما في الحالة القياسية‬
‫‪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‬وهذه المتغيرات تستتخدم فتي تحديتد تنستيق الصتفحة مثتل لون خلفيتة‬
‫الصتفحة ‪ bgcolor‬وصتورة الخلفيتة المتكررة ‪ ،background‬ولون النتص ‪ text‬ولون الوصتلة الجديدة ‪ link‬والقديمتة ‪ vlink‬والمحددة حاليتا‬
‫‪ ،alink‬وحاشية الصفحة العلوية ‪ topmargin‬والسفلية ‪ buttommargin‬واليسرى ‪ leftmargin‬واليمنى ‪.rightmargin‬‬
‫>"‪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‬‬

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

‫أمثلة للتوضيح ‪..‬‬

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

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

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

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

‫توجد أيضا الخاصية ‪ 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‬‬

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

‫•‪ : 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‬‬

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

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

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

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

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

‫أي بحيث يشير كل حزء من الجزاء الثلثة إلى أحد أقسام الموقع الفتراضي‪ ،‬مهمتنا الن هي رسم الخريطة السابقة وتحديد البقع الساخنة‬
‫والوصلت عليها‪ ،‬ويتم ذلك باستخدام الوسم ‪ ،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/>

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

‫تنظيم الـمـحتوى‬
‫يمكنك تنظيم المحتوى في لغة ‪ 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/>

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

‫تعتتبر الجداول متن أهتم مكونات صتفحات ‪ ،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/‬‬

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

‫يمكتن التحكتم بمحاذاة محتوى الخليتة أفقيتا بالخاصتية ‪ 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/‬‬

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

‫وكما ذكرنا يمكنك وضع ‪ 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/‬‬

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

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

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

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

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

‫يبتو واضحتا فتي المثال الستابق كيتف يتتم نقتل المعلومات عتبر الويتب باستتخدام طريقتة ‪ ،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/>

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

‫أمور أضافية‬
‫وسوم ‪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‬على الصفحة تلقائيا‪.‬‬

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

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

Sign up to vote on this title
UsefulNot useful