lesson HTML

- Messenger ماسنجر - برامجمضحك - العاب خطوط - فيديو

مواقع - فالش - ترجمة العاب

http://www.sh3bwah.com/

بسم الله الرحمن الرحيم

HTMLدورة متقدمة في mubarmej 14/9/2000تأليف :

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

تصمم صفحات ويب احترافية ؟ تعال اآلن وشارك الركب.

مقدمةPlain في صورة ملفات نصوص بسيطة )HTMLتكتب ملفات Text. تأخذ اإلمتداد ،)html،يطةooوص البسooعادة، وتكتب في أي برنامج للنص

، جميع هذه الoبرامج مناسoبة جoدا لعمoلSimpleText، في الماكنتوش استخدم pico، في اللينكس استخدم Notepadفي الويندوز استخدم . HTMLصفحات

Netscape أو Internet Explorerاألمر اآلخر الذي ستحتاج إليه هو متصفح لإلنترنت، ولن يكون أكثر من Navigatorاooأو األثنين معا، وبم أنك اآلن تتطلع على هذه الصفحة فال بد من أنك تمتلك المتصفح أيضا، ستحتاج إلى معاينة الصفحات بالمتصفح بعooد كتابهooا، وألن المتصooفحات تختلف من نوع إلى آخر لذا يفضل أن تقoوم بمعاينooة صooفحتك بجميooع المتصooفحات الموجooودة وتتأكooد من أنهooا تظهooر بشooكل سooليم في جميooع المتصفحات، ألن الجمهور الذي سيزور صفحتك سيستخدم المتصفح الذي يفضله هو لooذلك فoإن عليoك التأكoد من أن الجمهoور يسooتطيع رؤيoة

الصفحة بمتصفحه أيا كان.

Internetالمشكلة التي قد تواجهك في كتابة صفحاتك هي دعم المتصفحات للغooة العربيooة أوال، ودعمهooا آلخooر التقنيooات ثانيooا، يقooدم متصooفح Explorer من Microsoft دعما رائعا للغة العربية، وآلخر تقنيات الويب مثل HTML Netscape وغيرهooا، وأمooا متصooفح XML و CSS و 4.0

Navigator فهو ال يدعم اللغة العربية بشكل جيد ولتحسين دعم اللغة العربية تحتاج إلى برنامج Sindbadمن شركة صخر، وفي كل األحوال كمتصفحInternet Explorer 5.0 متصفحا متعبا في التصميم، لهذه األسباب جميعا اعتمدنا متصفح Netscape Navigatorيظل متصفح

قياسي لصفحات موقعنا، فهي تظهر بشكل رائع فيه.

ملحوظة

وقد توقفت شركة صخر4.51 هي Sindbad وآخر إصدارة من برنامج 4.72 هي اإلصدارة Netscape Navigatorآخر إصدارة من متصفح في اآلونة األخيرة ألسباب ال أعرفها Navigatorعن تعريب

لغة وصفية سهلة جدا ذات قدرات عالية وميزات فريدة وقوية، جميع الصفحات العالمية متقنة التصooميم تم إعooدادهاHTMLبعد كل هذا .. لغة عمل الشيء نفسه بأكثر من طريقة،HTML أيضا بأنها ذات قواعد سهلة ومعروفة، تستطيع أيضا في لغة HTML، تتميز HTMLباستخدام لغة

لذلك ومهما كانت الطريقة التي تفكر بها ستجد أنك تحصل غالبا على ما تريده بالضبط.

من قسمين : HTMLتتكون ملفات

: وهو ما يشاهده الجمهور في صفحتك. المحتوى : وهي األجزاء التي تحدد كيف سيشاهد جمهورك المحتوى السابق، فهي تصف المحتوى من حيث التنسيق. الوسوم

..HTMLمثال على ذلك هذا السطر من لغة

http://games.sh3bwah.com/

http://www.sh3bwah.com/modules.php?name=Translate

http://www.sh3bwah.com/modules.php?name=font

http://www.sh3bwah.com/modules.php?name=Videos

http://www.sh3bwah.com/modules.php?name=games

http://www.sh3bwah.com/modules.php?name=MSN


http://www.sh3bwah.com/modules.php?name=Downloads

http://forum.sh3bwah.com/



http://www.sh3bwah.com/ HTML is a <b>Great</b> Language

وعند استخدام المتصفح في مشاهدة السطر السابق سيظهر هكذا ..

Great Language HTML is a

oفي المثال السابق تبدو أجزاء ملف الHTML واضحة، المحتوى الذي يتمثل في عبارة HTML is a Great Languageوالوسوم المحاطة ، )عooريض(، ويooأتي في صooورة زوج من الوسooوم، وسooمbold وهو اختصار لكلمooة bبعالمتي > و <، في المثال السابق استخدمنا وسما يدعى

للفتح ووسم لإلغالق، ويتميز وسم اإلغالق عن وسم الفتح في أنه يحتوي على عالمoة ) / ( قبooل اسoم الوسooم، وسooم الفتح يعooني أن المتصooفح يجب أن يطبق الوصف الموجود في الوسم على جميع النصوص الذي تلي الوسم وحooتى يصooل إلى وسooم اإلغالق، مثooل التشooغيل واإلطفooاء .. وسم الفتح يشغل ميزة الخط العريض ووسم اإلغالق يطفأ هذه الميزة، وكما أن هنالك وسooما للخooط العooريض .. هنالooك وسooم للخooط المائooل،

يتم إدراجهooا عن طريooق الوسooوم، وتحooدد خصائصooها أيضooا عنHTMLوآخر لتغيير الخط، ووسوم أخرى للجداول والصور، جميع عناصooر ملooف طريق الوسوم.

بأن نضبطFont، حيث سنستخدم الوسم Font في مثالنا السابق، سنحتاج إلى استخدام الوسم Greatإذا أردت مثال أن تغير الخط في كلمة إلى اللون األحمر، ويتم هذا كالتالي .. Greatخاصية لون الخط في كلمة

HTML is a <font color="red">Great</font> Language

حيث ستبدو هكذا ..

Language HTML is a Great

في المثال السابق يتضح لنا أمر آخر، وهو أنه حتى نضبط خصائص أحد الوسوم فإننا نقوم بوضع إسم الخاصية بعooد اسooم الوسooم بين عالمooتي<oة الooية ثم عالمooم الخاصooة" أي إسooم="قيمooورة إسoائص في صooون الخصooاء، وتكooافة بيضooية بمسooم والخاصooم الوسooونفصل بين اس >oوال

، وإذاred عند القيمooة font للوسم colorالمساواة ثم قيمة الخاصية بين أقواس اإلقتباس المزدوجة، في المثال السابق قمنا بضبط الخاصية كان هنالك أكثر من خاصية يمكننا إضافتها أيضا في نفس المكان، بحث نفصل كل خاصية واألخرى بمسافة، مثال ..

HTML is a <font color="red" size="+1">Great</font> Language

التي ستظهر هكذا ..

Language Great HTML is a

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

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

من كلمة واحدة دون مسافات.












http://www.sh3bwah.com/ .بعض الوسوم تحتاج إلى وسم إغالق وبعضها ال يحتاج إليه .قد وقد ال يحتوي وسم الفتح على خصائص إضافية، ولكن وسم اإلغالق ال يحتوي أبدا على هذه الخصائص لغةHTMLعooاوي وضooتين، يسooدة بين كلمooافة واحooع مسooدة، أي أن وضooافة واحooا مسooا جميعooاء، وتعتبرهooافات البيضooال تراعي المس

، كلها تترجم إلى مسافة. tabمسافتين، ويساوي وضع ثالثين مسافة، ويساوي وضع سطر جديد، ويساوي وضع جدولة .توضع التعليقات بين >!-- و --< أي أن المتصفح يتجاهل أي شيء بينهما وكأنه غير موجود

HTMLبنية ملف

القياسي من جزئين رئيسيين هما : HTMLيتكون ملف

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

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

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

>html <

>head <

...

/>head <

>body <

...

/>body <

/>html <

<، أما األجزاء التابعة للجسمhead< و >/headالمثال السابق صريح، وال يحتاج إلى المزيد من التوضيح، األجزاء التابعة للرأس توضع بين >< . body< و >/bodyفتوضع بين الوسمين >

< oيتم تحديد عنوان المستند الذي يظهر في شريط العنوان للمتصفح بإحاطته بtitle/< و >title< oooوالمكان الصحيح لوسم ال ،>titleوooه > ال يعتبر من ضمن محتوى الصفحة وال يظهر في الصفحة، وهو يسooتخدم في عمليooات البحث واألرشooفة كمooا فيtitleالرأس، حيث أن الوسم

oمحركات البحث، وال يمكنك وضع وسوم تنسيق أخرى بين وسمي الtitle .

توضع أيضا في منطقة الرأس، وسooنأتي إليهooا في أمooور إضooافية في هooذهmetaوتوجد أيضا وسوم أخرى تحدد صفات المستند تمسى وسوم الدورة.

. bodyأما باقي الوسوم فأغلبها يوضع في منطقة الجسم













األلوان و الـخطوطاألنماط األساسية

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

>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<

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

>p align="left">Left aligned paragraph</p <

>p align="center">Centered paragraph</p <

>p align="right">Right aligned paragraph</p <

: وقد يكون عنooوانhttp وعندها يبدأ العنوان بhtml o لتحديد الوجهة، الوجهة قد تكون صفحة href مع الخاصية aلعمل وصلة استخدم الوسم : ،ستعرف المزيد عن المسارات عندما يأتي الحooديث عن الصooورmailto: وقد يكون بريدا إلكترونيا وعندها يبدأ بftp o وعندها يبدأ بftp oموقع

في الدرس القادم، وبين وسمي الفتح واإلغالق ضع المحتويات الساخنة أو الوصلة نفسها، وهي قد تكون نصوصا أو صورا.

>a href="http://www.microsoft.com/">Microsoft

Corp.</a><br<












http://www.sh3bwah.com/ >a href="mailto:[email protected]">My E-mail</a<

)يمكن استعمال اإلثنين معا(، وبعد ذلooك تسooتطيع أن تooدرج وصooلةhref بدال من name باستعمال الخاصية aيوجد أيضا استخدام آخر للوسم aعادية تشير إلى المكان الذي به > name وذلك بجعل خاصية ،>""=href دد فيoم المحoير إلى اإلسooة تشoلة العاديoالوص nameبوقاoمس

aبعالمة #، مثال ذلك إذا أردت أن تضع وصلة تقودك إلى جزء معين من المسooتند الحooالي، سooتقوم بعمooل > name="myname"<>/a> aفي المكان المطلوب، ثم تدرج وصلة في أي مكان آخooر كالتooالي > href="#myname/<ميooإس>"aبرooك عooل ذلooا عمooك أيضooويمكن ،>

aالمسooooتندات )من مسooooتند إلى مسooooتند آخooooر( بحيث تحooooدد بالضooooبط المكooooان الooooذي تريooooده من المسooooتند الوجهooooة هكooooذا >href="salem.html#myname/<إسم سالم>"a .>

. href في الخاصية topيمكنك أيضا عمل وصلة إلى أعلى المستند بوضع #

< . brإلجبار النص على اإلنتقال إلى السطر التالي استخدم >

; )لعمل أكثر من مسافة واحدة( nbspإلضافة مسافة استخدم &

لمنع المتصفح من تجاهل المسافات البيضاء ويحتسب المسافة مسافة والثالث مسافات ثالث مسافات والسooطرpreيمكنك استخدام الوسم < . pre< و >/preالجديد سطرا جديدا، فقط بين الوسمين >

< center< و >/centerيمكنك توسيط أي شيء بوضعه بين الوسمين >

Fontالوسم

دائما مع مجموعة من الخصائص، فهو ال يمتلك أي تأثير لوحده، وأهم خصائصه هي التي تحدد نوع الخoط والoتي تحoدد لونoهfontيعمل الوسم والتي تحدد حجمه.

التي تحدد نوع الخط المستخدم face هي الخاصية fontأول خصائص الوسم

>font face="verdana">Verdana Text</font><br <

>font face="Courier New">Courier New Text</font <

في األسفل( األلوان المستخدمة لتحديد لون الخط )أنظر إلى colorبعد ذلك هنالك الخاصية












http://www.sh3bwah.com/ This is <font color="red">Red</font <

and this is <font color="blue">Blue</font<

وهي تحدد حجم الخط، توجد سبعة أحجام للخط، والخط األساسي في الصفحة يأخذ أحد هذه األحجooام، وإذاsizeالخاصية الثالثة هي الخاصية لزيادة حجم الخط أو إنقاصه بمقدارsize مع الخاصية fontأردت أن تغير حجم الخط في كلمة معينة أو جزء ما من النصوص استخدم الوسم

وهو أصغر1 وهو أكبر خط ويمكنك إنقاصه مرتين ليصبح 7 مرات حتى تصل إلى 4 فإنه يمكنك زيادة الخط 3معين، إذا كا الخط األساسي هو ما لم تقم بتغييره، يتم تحديد أثر الرقم من حيث الزيادة أو النقصان بإضافة + قبل الرقم للزيooادة3حجم للخط، الخط األساسي القياسي هو

وكذلك عند النقصان إلى أقل من الواحooد فسooوف يتم7 سيعرض المتصفح النص بالحجم 7و - قبل الرقم للنقصان، وعند الزيادة فوق الحجم . 1إعتباره

>font size="+4">Size 7</font><br <




>font size="0">Size 3</font><br <

>font size="-1">Size 2</font><br <

>font size="-2">Size 1</font><br <

< small< و >bigتوجد أيضا طريقة سريعة لتكبير الخط خطوة واحدة أو تصغيره خطوة واحدة باستخدام الوسم >

>big>size 4</big><br <

>small>size 2</small><br <

>big><big>size 5</big></big><br <













ألنك تقوم بتغيير الخط بالنسبة للخط األساسoي، يمكنooك أيضooا تحديoد الحجم الooذيrelativeالطرق السابقة لتغيير الخط تسمى طرقا نسبية ذاتها ولكن دون وضع إشارة + أو - مقابل الحجم المطلوب sizeتريده للخط بالضبط دون اإلعتماد على الخط األساسي عن طريق الخاصية







>font size="1">Size 1</font <

يمكنك كذلك تغيير حجم الخط األساسي في المستند وهذا سيؤثر على جميع األماكن التي استخدمت فيها األحجام النسبية للخطوط، ونغير < ويمكن استخدامه لتغيير حجم الخط األساسي في المستند أو لون الخط األساسي أوbasefontالخط األساسي باستخدام وسم يدعى >

Verdanaنوع الخط األساسي، وهو ال يأخد قيم نسبية في الحجم )ال ينسب إلى نفسه(، على سبيل المثال لتغيير الخط األساسي إلى ولون أخضر نضع السطر التالي في المستند3بحجم

>basefont color="Green" size="3" face="Verdana <"

بل يظهر تأثيره في الصفحة كلها لذلك فهو ال يحتاج إلى وسم إغالق. HTMLوالوسم السابق ال يستخدم في جزء محدد من نصوص

يسooتخدم لجعoلtt للمائoل ،و الوسoم em أو i للخط العريض والوسoم strong أو bتوجد أيضا وسوم أخرى للتنسيقات المختلفة، مثال الوسم الحروف متساوية في الحجم مثل نصوص اآللة الكاتبة

>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













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

وهي خاصية بدون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 <"

<، وهoذه المتغooيرات تسoتخدم في تحديoد تنسoيق الصoفحة مثoل لoون خلفيoةbodyيمكن أيضا استخدام بعض المتغيرات في وسم الجسoم > والمحooددة حاليooاvlink والقديمooة link ولooون الوصooلة الجديooدة text، ولون النص background وصورة الخلفية المتكررة bgcolorالصفحة

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:[email protected]">Bill Gates!?</a><br<












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األلوان في

األلوان في الكمبيوتر تنتج من خلط األلوان األساسية الضوئية الثالثة، وهي األحمر واألخضر واألزرق، يأخذ كل لooون من األلooوان السooابقة قيمooة ، في أي مكان نحتاج إلى أن نضع فيه لونooا نقoوم بوضooعrgb( أو Red,Green,Blue، وهي مرتبة )أحمر،أخضر،أزرق( أو )255 و 0تتراوح بين

الجملة التالية

rgb)R,G,B(oفنضع قيمة الRoفي مكانها المناسب، وال Goوال Bكذلك، يمكن أيضا صياغة العبارة السابقة بصورة أخرى هي الصورة الستعشرية، نقوم بوضع

وأقل قيمةff فإن أعلى قيمة ستعشرية لها هي 255األرقام السابقة بالتتالي في صورها الستعشرية، حيث أن أعلى قيمة عشرية لأللوان هي ويفضل وضع عالمة # قبل األرقام في الصيغ الستعشرية حتى تتعرف عليهاRRGGBB، لذا فإن كل رقم يأخذ خانتين كالتالي .. #00هي

جميع المتصفحات، أغلب الناس يستخدمون الصيغ الستعشرية في تكوين األلوان، يمكن الحصول على القيمة الستعشرية من القيمة العشرية oباستخدام الحاسبة التي تأتي مع الWindows .

لون في نفس اللحظooة،256 مليون لون، ولكن بعض األجهزة القديمة لم تكن تدعم أكثر من 16.5تستطيع بالطريقة السابقة تكوين أكثر من لون سميت بألوان المتصفح اآلمنة، فإذا التزم الجميع بهooذه األلooوان سيسooتطيع المتصooفحون أن يستعرضooوا أكooثر من216لذا فقد اتفق على

فقooط والبooاقي احتيooاطي لألمooور األخooرى مثooل216صفحة واحدة في نفس الوقت دون مشاكل ألن عدد األلوان الooتي يحتاجهooا المتصoفح هي الواجهة وغيرها.

لون، هذه األلوان يمكنooك اسooتخدامها بوضooع141إضافة إلى ما سبق هنالك ألوان معروفة تستخدم بكثرة، ولها أسماء معروفة وعددها حوالي اسمها فقط، وهي تنتمي جميعها للوح األلوان اآلمن والجدول التالي يبين أشهرها :

أمثلة للتوضيح ..












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 <

الooصooور عرض الصور في الصفحات والتحكم في خواصها، قبل كل شooيء يجب أن تكooون الصooورة جooاهرة للنشooر على الooويب،HTMLيمكنك في لغة

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












http://www.sh3bwah.com/(. تجهيز الصور للنشر على الويب )أنظر gif أو jpgلكي تستطيع عرض الصور في المستند يجب أن تكون الصورة من النوع

HTMLالعناوين

في الكثير من األمور، أهمها الوصالت التشعيبية والصور، ويجب أن تعرف كيفية استخدام هذه العناوين جيدا. HTMLتستخدم العناوين في

هنالoooك نوعoooان من العنoooاوين، نسoooبية ومطلقoooة، العنoooاوين النسoooبية تكoooون بالنسoooبة للعنoooوان الحoooالي، فلoooو كنت مثال في صoooفحةhttp://www.microsoft.com/ie/default.asp يةooلة خاصooل وصooوقمت بعم href اويooا تسooله download.htmlفح أنooيعرف المتصooس

تسoooooاويhref، ولoooooو كoooooانت http://www.microsoft.com/ie/download.htmlالعنoooooوان الoooooذي يجب الoooooذهاب إليoooooه هoooooو download/english.html فسيتجه المتصفح إلى http://www.microsoft.com/ie/download/english.htmlيفooأي أن المتصفح يض ،

إلى الدليل الحالي، ويختلف الملف عن الدليل بoأن الooدليل يحتoوي على الشoرطة الخلفيoة ) / ( في آخoره، في كoلhrefالسطر الموجود في تحتooويhrefدليل يوجد دليل خاص، هذا الدليل الخاص يؤدي بك إلى الدليل األب للدليل الحالي وهو الرمز ) .. ( وفي المثال السابق لو كانت

/ie أي أنه سooيخرج من الooدليل http://www.microsoft.com/windwos.html فإن المتصفح سيتجه إلى العنوان windwos.htmlعلى ../ / يعتooبر عنوانooاhttp://www.ayna.comإلى الدليل الجذري / ، أما العناوين المطلقة فتتميز بأنهooا مسooبوقة باسooم الooبروتوكول ،مثال العنooوان

مطلقا، وليس له عالقة بالعنوان الحالي.

إدراج الصور

، وهو وسم مفرد ) ال يجتاج إلى وسم إغالق(، وهذا الوسم يحتاج إلى خاصية مهمةIMG عن طريق الوسم HTMLيتم إدراج الصور في صفحة والتي نضع بها عنوان الصورة المطلوبة. srcلكي يعمل بشكل سليم هي

>img src="/images/sample.gif<"

لتحديد ارتفاعهooا، يمكن بواسooطة الخاصooيتان السooابقتان تكبooير الصooورة وتصooغيرهاheight لتحديد عرض الصورة وwidthتوجد أيضا الخاصية حسب المطلوب، وإذا كنت تريد إظهارها بالحجم الطبيعي فيمكنك ترك هذه الخصائص، فيحجر المتصفح للصورة حجما صooغيرا إلى أن يحصooل عليها فيجعلها بالحجم الطبيعي، ولكن الصور تشغل مكانا في الصفحة وتزيح النصوص بمقدار ما تشغله من مكان لذلك فإن الصورة الصooغيرة تزيح النصوص قليال والكبيرة تزيحها بمقدار أكبر، فالصفحات ستظهر بشكل مختلف عن الشكل الطبيعي إلى إن يحصل المتصفح على الصورة وإذا لم يجدها ألي سبب من األسباب سيظل يحجر لها حجما صغيرا فقط وبالتالي تصبح الصفحة مشوهة، لذلك ينصح دائما باستخدام خصائص

الحجم في وسوم الصور حتى لو لم تكن تريد تغيير حجم الصورة عن الطبيعي.

>img

src="/images/sample.gif"

width=73 height=68><br><br<

>img src="/images/sample.gif"









http://www.arabbuilder.com/learn/howtos/picture.php




http://www.sh3bwah.com/ width=200 height=100<

وهي خاصية مهمة جدا في الصور، وتنبع أهميتها من كونها الطريقة الوحيدة للتحكم بكيفية عooرض الصooورة بالنسooبةalignتوجد أيضا الخاصية العديد من القيم فيماalign تعتبر جزءا من النص المحيط بها تتحرك معه، وترتبط به، تأخذ HTMLللنصوص المحيطة بها، حيث أن الصور في

يلي سرد لها مع الشرح واألمثلة ..

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<"

تعooني دون إطoار، إذا لم تحoدد0 ونحدد بها عرض اإلطار بالبكسoل، والقيمooة borderتوجد أيضا خاصية لوضع إطار حول الصورة هي الخاصية في وسم الصورة، فإن الصور ستظهر بدون إطار في الحالة العاديooة ومooع إطooار إذا كooانت الصooورة عبooارة عن وصooلة،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يمكنك أيضا تحديد عرض الحاشية حول الصورة أو المسافة بين الصورة النصوص المحيطة عن طريق الخاصية

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

خرائط الصور

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

تتكون الخريطoة الصoورية من جoزئين، الخريطoة والصooورة، حيث نقoوم بتصoميم الخريطooة وإعطائهooا إسoما، ثم نكتب هoذا اإلسoم في خاصoيةusemap .للصورة

في البداية نشرح كيفية تكوين الخريطة لصورة مثل هذه الصورة

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













أي بحيث يشير كل حزء من األجزاء الثالثة إلى أحد أقسام الموقع اإلفتراضي، مهمتنا اآلن هي رسم الخريطة السابقة وتحديooد البقooع السooاخنة ، ونقوم بوضooع األشooكال بين وسooمي الفتح واإلغالقname، ونحدد إسم الخريطة بالخاصية mapوالوصالت عليها، ويتم ذلك باستخدام الوسم

، ثم نقooوم بتحديooد الوصooلةshape مفردة، نقooوم بتحديooد الشooكل عن طريooق الخاصooية area، واألشكال تكون في صورة وسوم mapللوسم ، ويختلفكل شكل عن اآلخر بطريقة كتابة إحداثياته، واألشكال ثالثة هي : coords ونحدد إحداثيات الشكل بالخاصية hrefبالخاصية

circle: ,x وهو شكل الدائرة، وتكون إحداثياته عبارة عن اإلحداثي السيني للمركز ثم اإلحداثي الصادي للمركoز ثم نصoف القطoر ) y, radius .)

rect: وهو شكل المستطيل، وتكون إحداثياته عبارة عن اإلحداثي السيني للركن أعلى اليسار ثم اإلحداثي الصادي له ثم اإلحooداثي (. x1, y1, x2, y2السيني للركن المقابل أدنى اليمين ثم اإلحداثي الصادي له )

poly: وهو شكل المضلع، ويمكنك باستخدامه رسم األشكال المكونة من عدة قطع مستقيمة، وتكون إحداثياته عبارة عن اإلحداثي (. x1, y1, x2, y2, .. xn, ynالسيني ثم الصادي للنقطة األولى ثم الثانية وهكذا حسب ما تشاء من النقط )

ويجب أن تعرف أيضا أن نقطة أعلى اليسار هي نقطة الصفر، وكلما تنزل إلى األسفل تزداد قيمة اإلحداثي الصادي وكلمooا اتجهت إلى اليسooارتزداد قيمة اإلحداثي السيني.

. Paint Shop Pro أو Adobe Photoshopلمعرفة اإلحداثيات المطلوبة نستخدم أي برنامج للرسم مثل

في مثالنا السابق تم حساب اإلحداثيات وكانت النتيحة كالتالي :

>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<













ستالحظ اآلن أن الصورة مقسمة إلى عدة مناطق ساخنة كل منها يشير إلى وصلة مختلفة، عند النقooر على أحooدها يظهooر حولooه إطooار أسooود، مختلooف لكooل قسooم من الصooورةalt، تستطيع أيضا أن تحooدد 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<













الoمoحتوى تنظيم في عدة أشكال، يمكنك مثال وضعه في صورة قائمة مرتبة، أو في صورة شجرة )مخطط هرمي( وأهمHTMLيمكنك تنظيم المحتوى في لغة

أنواع تنظيم المحتوى هي الجداول.

، ويمكنك تحديد نوع الooترقيمli بحيث توضع البنود بينهما وكل بند يحدد بالوسم ul والغير مرتبة olيمكنك عمل القائم المرتبه باستخدام الوسم وتأخذ أحد القيم التالية : typeفي القوائم المرتبة بالحروف أو باألقام العربية أو الرومانية وغيرها عبر الخاصية

1 : 1 ,2 ,3 ,4.. , 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%)












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 <













الجداول

، وجميع التصاميم اإلحترافيooة تسooتفيد من الجooداول لتصooميم الصooفحة وتوزيooع الكائنooات عليهooاHTMLتعتبر الجداول من أهم مكونات صفحات ،td وداخل الصفوف توجد البيانات tr وداخل الجدول يجب إدراج صفوف tableوتشكيلها في القالب الذي يريدونه، يتم إدراج الجدول بالوسم

. 0 تعني دون إطار، القيمة اإلفتراضية لإلطار هي 0 حيث نحدد فيه سماكة اإلطار المطلوب borderيمكن وضع إطار للجدول بالخاصية

>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<

، والمسافة بين الحدود الداخليooة للخاليooا ومحتويooات الخاليooا بواسooطةcellspacingيمكنك أيضا التحكم بالمسافة بين الخاليا بواسطة الخاصية . cellpaddingالخاصية

>table cellspacing="10" cellpadding="20" border="1<"

>tr<

>td>First Cell</td<

>td>Secound Cell</td<

/>tr<

/>table<












http://www.sh3bwah.com/ وكالهما يأخooذ قيمooا مطلقooة أو نسooب مؤيooة، ويمكن اسooتخدام هooذهheight وارتفاعه بالخاصية widthيمكن التحكم بعرض الجدول بالخاصية

أيضا وعند إعطاء الخاليا قيما نسبية فإنها تحسب بالنسبة للصف الذي هي فيه. 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<

، يمكن استعمال هذه الخooواصbackground ويمكن تعيين صورة في الخلفية بالخاصية bgcolorيمكن التحكم بلون خلفية الجدول بالخاصية للجدول مختلفة عن قيمة أحد الخاليooا فooإن لooون الخليooة سooيطغى على لooون الجooدول في تلooكbgcolor أيضا، وعند تعيين قيمة tdفي الخاليا

الخلية، ألن الخلية موجودة فوق الجدول في ترتيب الطبقات.

>table border="1" background="sample.gif" width="90%" height="80%<"

>tr<

>td bgcolor="Yellow">First Cell

>td>Secound Cell

/>tr<

/>table<













تعooني محooاذاة لليسooار وleft القيمooة align، في الخاصية valign ورأسيا بالخاصية alignيمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية rigth لليمين و center ف وooبالمنتص justify يةooا الخاصooول، أمooاوية في الطooطر مسooل األسooبط الكلي تجعooللض valign ةooد القيمooفتأخ top

للمنتصف. middle لألسفل bottomلألعلى،

>table border="1" width="90%" height="80%<"

>tr<

>td align="right" valign="bottom">First Cell

>td align="left" valign="top">Secound Cell

/>tr<

/>table<

، وهنا يحسب عرض الجدول الداخلي النسبي بالنسooبة لعooرضtdيمكن أيضا وضع جدول داخل جدول، عن طريق وضع الجدول في أحد الخاليا الخلية التي تحتويه والموجودة في الجدول الخارجي.

>table width="95%" border="1<"

>tr<

>td>First Table - First Cell

>td<

>table border="1<"

>tr<












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












http://www.sh3bwah.com/ >td>Seventh Cell

>td>Eighth Cell

>td>Nineth Cell

/>tr<

/>table<

األطر

لتقسيم المتصفح إلى عدة إطارات واستعراض عدة صفحات في نفس الooوقت، كمooا يمكنooك تبooادل األوامooر بين هooذهframesتستخدم األطر الصفحات، فيمكن عمل صفحة مستقلة تحتوي على فهرس الموقع، وبعد ذلك تضعها في صورة إطار يظل على يمين الشاشooة، وكلمooا ضooغط المستخدم على أحد الوصالت في الفهرس، يتم تحميل الصفحة في اإلطار اآلخooر الooذي على اليسooار والooذي يحتooل الجooزء األكoبر من الشاشoة

عادة، هذه الطريقة تتبع في الكثير من المواقع لتسهيل األمور، فكيف يتم ذلك.

في البداية هنالك صفحة اإلطارات، تحدد في هذه الصفحة تصميم طقم اإلطارات الذي ستستخدمه، ومoا هي الصoفحة الooتي يجب عرضooها في كل إطار، أن كل صفحة تكون محفوظة في ملف مستقل لوحدها، في صفحة اإلطارات ستسooتخدم وسooوم اإلطooارات، ولكن بooاقي الصooفحات

ستكون صفحات عادية غالبا دون إطارات.

المفooردةframe الذي يفتح مجموعة اإلطارات، وفي هذه المجموعة يوجد عدد من وسوم اإلطooار framesetأول وسوم اإلطارات هو الوسم خooارجframeset األولى، ويوضooع الوسooم frameset أخooرى داخooل الframeset o أو يمكننا وضع srcونضع فيها مصدر الصفحة في الخاصية

إذا كنا سنقسم الصفحة أفقيا أو رأسيا، ونحدد حجم كooل إطooار، إذا كنooا نريooد تقسooيمframeset دائما، نحدد في الوسم bodyمنطقة الجسم ونضع فيها عooرض كooل إطooار بحيث يفصooل بين كooل إطooار واآلخooر فاصooلة ) , ( وهooذهcolsالصفحة رأسيا على شكل أعمدة نستخدم الخاصية

الحجوم قد تكون نسبية أو مطلقة وتختلف في احتواء النسبية على عالمة النسبة المؤوية، وإذا أردنا تقسيم الصooفحة أفقيooا نقooوم بعمooل نفس بكسooل والثooاني100، مثال إذا أردنا تقسيم الصفحة رأسيا إلى ثالثة أعمooدة األول بعooرض cols بدال من rowsالشيء ولكن باستخدام الخاصية

% من الشاشة والثالث يحتل باقي الشاشة تكون مجموعة الوسوم هكذا : 10بعرض

>frameset cols="100,10%<"*,

>frame src="sample1.html<"



/>frameset<













frame آخر بدال من أحد اإلطارات framesetوكما ذكرنا يمكنك وضع

>frameset rows="50<"*,


>frameset cols="100<"*,



/>frameset<

/>frameset<

يظهooر1 لن يظهooر اإلطooار و 0 إذا ضooبتها عنooد القيمooة frameborderيمكنك وضع أو إزالة اإلطار الذي يظهر حول األلواح باستخدام الخاصية فتضooع فيهooا القيمooةframespacingاإلطار، يمكنك التحكم بحجم اإلطار عن طريق زيادة أو إنقاص المسافة بين األلواح وذلك عooبر الخاصooية

لمنع المستخدم من تغيير حجم األلواح. 0التي تريدها، يمكنك ضبط الخاصيتان السابقتان عند

>frameset cols="50%,*" frameborder="0" framespacing="0<"



/>frameset<













Scrollيمكنك التحكم في ظهور أشرطة التمرير Bars يةooق الخاصooارات عن طريooار من اإلطooفي كل إط scrolling ةooذ القيمooوهي تأخ yes إلظهارها وقت الحاجة إليها فقط. auto لمنع ظهورها دائما، و noإلظهار أشرطة التمرير دائما، والقيمة


>frame src="sample1.html" scrolling="no<"


>frame src="sample2.html" scrolling="yes<"


/>frameset<

/>frameset<

، وبعد ذلooك لعمoلnameلكي تستطيع أن ترسل أوامرك ووصالتك من لوح إلى آخر، يجب أن تقوم بتسمية أو عنونة األلواح بواسطة الخاصية أو فتحهooا فيblank لتحديد وجهة الوصلة، يمكنك فتح الوصلة في شاشة متصooفح جديooدة _target استخدم الخاصية aوصلة بواسطة الوسم

parent أو فتحها في اللوح األب )في حالة ألواح داخooل ألooواح( _self أو فتحها في اللوح الحالي _topالشاشة الحالية فوق مجموعة األلواح _أو فتحها في أي لوح بوضع إسم اللوح.

--!>sample4.html<--

>a href="sample1.html"

target="_blank">Page 1</a><br<


target="_top">Page 3</a><br<












http://www.sh3bwah.com/ >a href="sample2.html"

target="main">Page 2</a<


target="main">Page 4</a<





>frame src="sample3.html" name="main<"

/>frameset<

/>frameset<

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

وعمل وصالت موجهة إليه تماما مثل اإلطooار العooادي، وفيمooا بقي فهooو مثooلnameالذي يجب عرضه في اإلطار، يمكنك أيضا عنونه بالخاصية اإلطار

لتحديد حجمة height و widthيمتلك أيضا خاصية

النماذجhttpإرسال البيانات عبر

علىhttp في عمooل ذلooك، وينص بروتكooول httpعندما تريد إرسال المعلومات من متصفح الويب، إلى مزود الويب فإنك تستخدم بروتوكooول فإنooك ترسooلhttpأن البيانات ترسل في صورة أزواج، كل زوج عبارة عن إسم وقيمة، مثال إذا أردت إرسال إسم المستخدم عooبر بروتوكooول

(، والجooزء الثooاني هoوname هذا يسمى زوج ألنooه يتكooون من جooزئين، الجooزء األول هooو إسooم المعلومooة )name=mubarmejالعبارة التالية (، وإذا أردت أن ترسل أكثر من معلومoة فإنoك تفصooل بين أزواج المعلومoات بعالمoات & فoإذا أردت أن ترسoلmubarmejالمعلومة نفسها )

يمكنoooك أن تكتب العبoooارة السoooابقة كالتoooاليname=mubarmej&country=Kuwaitاإلسoooم والبلoooد فإنoooك ترسoooل العبoooارة التاليoooة












http://www.sh3bwah.com/country=Kuwait&name=mubarmejحيث أن الترتيب ليس مهما إلى هذه الدرجة، إضافة إلى ما سبق فإن هنالك شروطا على إرسال

وألن المعلومات عادة ما ترسل ملتصقة بهذه العناوين فإنه ال بد من تحويل سطر البيانات السابق بحيث يصooبحurlالبيانات في صورة عناوين ، وأول شيء هو أنك ال تستطيع وضع المسافات، لذا فقد اتفق على أن جميع المسافات في البيانات تحول إلى إشارة )urlمطابقا لمواصفات

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

تعريف

هي المسافات واألسطر الجديدة وعالمات الجدولة. المسافات البيضاء :

get، يتم إرسooال البيانooات بطريقooة post والثانيooة تسooمى get أيضا على أن البيانooات ترسooل بطريقooتين، األولى تسooمى httpينص بروتوكول بصورة بسيطة جدا حيث تكون عبارة عن جزء يضاف إلى إسم البرنامج الذي سيستفيد من البيانooات، مثال إذا كooان لooديك برنooامج يأخooذ اإلسooم

ستقوم فقط بعمل إضooافةget فإن طريقة http://somewhere.com/script.cgiوالبلد ويخزتها على المزود، وكان عنوان هذا البرنامج هو إلى العنoooوان السoooابقة هoooذه اإلضoooافة هي عبoooارة عن عالمoooة اسoooتفهام يليهoooا سoooطر البيانoooات الoooذي جهزتoooه، فيصoooبح إسoooم الصoooفحة

http://somewhere.com/script.cgi?name=mubarmej&country=United+Statesاooذا وربمooوال بد من أنك صادفت شيئا كه أكثر تعقيدا في مربع الوجهة في متصفحك خاصة عندما تزور المواقع الضخمة وتجooري عمليooات البحث وغيرهooا، سooتجد كooل هooذه البيانooات في

وفيها يتم إرسال لوحدها مع طلب الموقعpost في إرسال البيانات، أما الطريقة الثانية فهي طريقة getشريط العنوان، هذا بالنسبة لطريقة أبسooط بكثooير ويمكنooك بسooهولة اسooتخدامهاgetوال تظهر البيانات في شريط العنوان، تختلف الطريقتان عن بعضهما البعض في أن الطريقooة

ال يمكن عملها في صورة وصلة بسهولة، حيث أنها ال تعمل إلى عن طريق النماذجpostكوصلة عادية بأن تركب سطر البيانات بنفسك، ولكن في أنها مناسبة إلرسال كمية كبooيرة من البيانooات مثooل نص رسooالةget أفضل من post) اإلثنان يعمالن بشكل ممتاز بالنماذج (، لكن طريقة

) هذا ال يعني أنها آمنةpostكاملة، حيث يتعسر عرض هذه األشياء في عنوان الموقع، كذلك البيانات واإلتصاالت السرية يجب أن تتم بطريقة للشراء عبر الويب وإنما تحتاج إلى تقنيات أخرى (.

مهمة النماذج

بعد أن عرفت كيف يتم إرسال البيانات، يجب أن تعرف مهمة النماذج في كل هذا، تعطيك النماذج واجهة سهلة إلدخال البيانات مثooل مربعooاتالنص وقooooوائم اإلختيooooار ومربعooooات نعم/ال واألزرار، وغيرهooooا من األدوات، كooooل مooooا عليooooك فعلooooه هooooو تحديooooد مكooooان البرنooooامج )

http://somewhere.com/script.cgi( في مثالنا السابق، والطريقة التي تريد اتباعها )get أو postددooالها، وتحooد إرسooوالبيانات التي تري ،) ( وانتهى األمر، كooل مooا على زائooر الصooفحة اآلن هooو أن يمأل بعض الحقooولsubmitبعض األلوان واألحجام وتصمم الحقول وتضع زر اإلرسال )

ويختار بعض الخيارات، ويضغط زر اإلرسال فيقوم المتصفح بجمع البيانات وتحويلهooا وتجهيزهooا ثم إرسooالها إلى المكooان الooذي حددتooه وحسooب. HTMLالطريقة التي حددتها، النماذج بالفعل هي أفضل طريقة تفاعلية في لغة

على مجموعoة من الخoواصform مفoردة، يحتoوي الوسoم input ويتم إدراج المعلومات في صoورة وسoوم formيتم إدراج النموذج بالوسم وفيهooا تحooدد طريقoة نقoل البيانooات إمoاmethod وفيه تحدد عنوان البرنامج الذي سيستفيد من البيانات، والخاصooية الثانيooة هي actionأهمها post أو get أما الوسوم ،input فأهم خاصية فيها هي typeد القيمooذ أحooتخدم، ويأخooوتحدد فيها نوع الكائن الذي سيأخذ المعلومة من المس

التالية :

Text: .وهو أشهر طرق إرسال المعلومات ويظهر في النموذج في صورة مربع نص يمكن للمستخدم إدخال أي شيء فيه Button: .لعمل زر، ويستفاد من الزر في عمل أي شيء












http://www.sh3bwah.com/Checkbox: لعمل مربع اختيار، إذا تم اختياره فإنه يرسل القيمة on .وإذا لم يتم اختياره فإنه ال يرسل أي معلومة File: .إلرسال الملفات Hidden: ، تسoتطيع عن طريقoه دمجHTML يرسل المعلومة التي تريooدها بالقيمoة الooتي تريooدها، وال يظهooر أي شoيء في صoفحة

بحيث ال يعلم عنها المستخدم وال يحتاج إلى تغييرها. HTMLمعلومة ما داخل ملف Image: .تستخدم في الكثير من األمور مثل الزر Password: يستخدم إلرسال كلمة المرور، وهو يرسل كلمة المرور بصورة واضحة دون أية تشفير وإنما يختلف عن مربooع النص

العادي في أن الحروف تظهر في صورة نجوم ) * (. Radio: .يستخدم لعمل الدوائر لكي يختار المستخدم قيمة ما من عدة خيارات Reset: .يستخدم لمحو محتويات النموذج وإعادته إلى الحالة األصلية Submit: .يظهر في صورة زر يستخدم إلرسال المعلومات الموجودة في النموذج

لعمooل قائمooةselect وهذا الوسooمان همooا formيمكنك أيضا إرسال المعلومات مع النموذج بواسطة وسمين آخرين يوضعان أيضا بين وسمي كoل واحoد منهooا يعoبر عن بنoد فيoption نضoع عoدة وسoوم select لعمل مربع نص متعدد األسطر، وبين وسoمي textareaاختيار والوسم

القائمة ويكون لكل بند قيمة معينة وترسل قيمة البند الذي تم اختياره.

مالحظة

لقد قمت بعمل برنامج صغير موجود على المزود يقوم بأخذ المعلومات التي ترسلها بأي من الطريقooتين ويعيooد لooك النتooائج في صooورة جooدولوسنستخدمه لتوجيه جميع الطلبات إليه لمعرفة كيفية عمل النماذج.

فيaction وهو موجود في الدليل الذي به هooذا الملooف لooذا سooنقوم باسooتخدام المسooارات النسooبية ونحooدد الخاصooية echo.plإسم البرنامج دائما. 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<













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

مربع النص

، ويمكننooا وضooع أي محتويooاتtext لooه إلى القيمooة type مع تغيooير الخاصooية inputنقوم بوضع مربع النص كما ذكرنا سابقا، باستخدام الوسم ، لتحديد طول المربع الذي نريده. size له، ويمكن أيضا التحكم بحجمه عن طريق الخاصية valueابتدائية نريدها فيه عن طريق الخاصية

>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<

مربع اإلختيار

، ويمكن بالمعلومات الooتي سoيتم إرسoالها عن طريoق اإلسoمcheckbox لها عند القيمة type أيضا بتحديد الخاصية inputوهو يوضع بالوسم إذا قooام المسooتخم باختيooار أحooدdo=subscribe فيمكننا مثال أن نجعل النمooوذج يرسooل المعلومooة value والقيمة بالخاصية nameبالخاصية

، وعنooد عooدم اختيooار مربooع الخيooارsubscribe له عن القيمة value والخاصية do له عند القيمة nameمربعات الخيار، وذلك بضبط الخاصية فلن يتم إرسال أي شيء يتعلق به.

إال المستخدم هنا يحدد فقط إذا كانت المعلومة سترسل أو ال. hiddenأي أنه مثل النوع


>input type="checkbox" name="do" value="subscribe"> Subscribe.<br<













http://www.sh3bwah.com/ />form<

اإلختيار من متعدد

، ولعمل مجموعة من الوسوم التيradio عند القيمة type بحيث تضبط خاصيتها inputيمكنك عمل دوائر اإلختيار من متعدد بواسطة وسوم متسooاوية فيهooا جميعooا مooع تغيooير قيمooةname لكل واحد منها واجعل قيمة الخاصooية inputيجب على المستخدم اختيار أحدها قم بعمل وسم

وقيمتهooا حسooب قيمooةname في كل منها، فيكون عندنا نيابooة عن جميooع هooذه األزرار معلومooة واحooدة اسooمها يحooدد بالقيمooة valueالخاصية للزر الذي تم اختياره. valueالخاصية

>form action="echo.pl" action="get<"

Age : <br<

>input type="radio" name="age" value="17"> 10 - 17<br<



Gender : <br<

>input type="radio" name="gender" value="male"> Male

>input type="radio" name="gender" value="female"> Female<br<


/>form<

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

القائمة

التي ستظهر في النموذج، وبعد ذلك نقوم بوضع عدة وسooومname ونعين له خاصية selectعند تكوين القائمة نقوم أوال بوضع وسم القائمة option لكل منها خاصية value يةoود في الخاصoمها موجoتي إسoة الoال المعلومoوعند إرسال البيانات سيتم إرس name مoمن الوس select

الذي تم اختياره. option من الوسم valueوقيمتها موجودة في الخاصية












http://www.sh3bwah.com/ >form action="echo.pl" method="get<"

>select name="country<"

>option value="kw">Kuwait

>option value="sa">Saudia

>option value="ua">Emirates

>option value="qt">Qatar

>option value="bh">Bahrain

>option value="om">Oman

/>select<


/>form<

مربع النص متعدد األسطر

مoزدوج ) فتح وإغالق ( وبينهمoا تضoع المحتويoات الooتي تريooدها أنtextarea، وهو عبارة عن وسم Textareaويمسى أيضا بالمساحة النصية ألنه يستخدم إلرسال كمية كبيرة من البيانات. postتظهر داخل المربع، وهو يستخدم غالبا مع النماذج التي ترسل معلوماتها بالطريقة

) عدد األعمدة (. cols وعدد األحرف في كل سطر بالخاصية rowsيمكنك التحكم في عدد األسطر بالخاصية


>textarea name="message" rows="6" cols="50<"

This Text will appear inside the box!

WOW

It's working(:

/>textarea><br<


/>form<













أضافية أمورmetaوسوم

! meta إال أنها ليست أكثر من وسم واحد هو الوسم metaعلى الرغم من أن اسمها وسوم

إلعطاء المزيد من المعلومات حول الصفحة، مثل وصف الصفحة والكلمات المفتاحية للصفحة وإسooم مؤلooف الصooفحةmetaيستخدم الوسم أي بين وسooميHTML توضع في ترويسooة مسooتند metaوإسم البرنامج المستخدم لتأليف الصفحة وغيرها من المعلومات، وجميع واصفحات

head .وهذا أمر طبيعي ألنها ليست جزءا من المحتوى

حسooب الخاصooيةmeta، توجد بعض الooبرامج تحoدد نooوع الوسooم http-equiv أو name عن بعضها البعض بالخاصية metaتختلف واصفحات name وبرامج أخرى حسب الخاصية http-equiv .لذا فمن األفضل وضع اإلثنين












http://www.sh3bwah.com/-http و name التي تحدد محتوى المعلومooة الooتي حooددت اسooمها بكooل من الخاصooيتين content هي الخاصية metaالخاصية الثانية لوسوم

equiv .

، فإذا كانت الكلمات المفتاحية في موقعك هي )ألعاب برامج صooور مقالت دروس دورات(، فإنooكkeywordsالكلمات المفتاحية مثال إسمها ستحتاج إلى أن يكون لديك الوسم التالي :

>meta name="keywords" http-equiv="keywords "

content"=, , , , دورات, دروس مقالت صور برامج ">ألعاب

الحظ من الوسم السابق أن الكلمات المفتاحية يفصل كل منها عن اآلخر بفاصلة عادية.

أحد القيم التالية: http-equiv أو nameوكما في الطريقة السابقة يتم تحديد معلومات الصفحة بنفس الطريقة، وتأخد الخاصية

keywords .لتعيين الكلمات المفتاحية للمستند مفصولة بفواصل، ومرتبة حسب أهميتها وال يجوز التكرار : description .لوضع وصف بسيط للصفحة ويفضل أن ال يتعدى العشرون كلمة : generator .إسم البرنامج الذي استخدم إلنشاء الصفحة : author .إسم مؤلف الصفحة :

content-type لتحديد نسق البيانات وصفحة المحارف المستخدمة، لصفحات : HTMLالعربية المكتوبة في الويندوز ضع الوسم كالتالي :

>meta name="content-type" http-equiv="content-type"

content="text/html; cahrset=windows-1256<"

copyright .معلومات عن حقوق طبع الصفحة :

تعريب الصفحات

تتلخص إجراءات التعريب في جزئين رئيسيين، أوال إظهار الخطوط بصورة سليمة، وثانيا إظهار اإلتجاه بشكل سليم.

، إذا كنتwindows-1256إلظهار الخطوط العربية بشكل سليم يجب التأكد من استخدام صooفحات المحooارف العربيooة المنتشooرة حاليooا وهي Windows فهoذه هي صoفحة المحoارف القياسoية، مoا عoدا Windowsتكتب صفحاتك في فهoو يسoتخدم صoفحة المحoارف العالميooة2000

مثال( فإن ذلك يعتمد على البرنامج الذي تستخدمه لتعريب النظام. Linux )Unix، وأما إذا كنت تكتب صفحاتك في بيئة Unicodeالموحدة

عند قيمة مناسبة. content-type الخاص بنوع المحتوى metaوفي جميع األحوال السابقة فإنك تحتاج لضبط الوسم

، وهي طريقooةright لooه عنooد القيمooة align وضooبط الخاصooية pأما تغيير اتجاه الصفحات فيتم بعدة طرق، أول طريقة هي استخدام الوسم بسيطة ونافعة، ولكنها تصبح متعبة في المواقع الكبيرة وعندما تريد عمل الكثير من الجداول والتنسيقات، أما الطريقة الثانية وهي الطريقooة

، يقوم ذلooك بجعooل الصooفحة تتجooه كليooا من اليمين إلى اليسooار،rtl وضبطه عند القيمة html في الوسم dirاألفضل فهي استخدام الخاصية بحيث تصبح الفقرات تتجه من اليمين إلى اليسار، والعناوين تتجه من اليمين إلى اليسار وتصبح الخلية األولى في الجدول هي الخليooة األولى

، ولكن عند تركيبNetscape Navigator وهي غير متوفرة في Internet Explorerعلى اليمين، وهذه الميزة متوفرة تلقائيا في متصفح Sindbadيةooؤثر الخاصooدويا وال تooده يooذي يريooفإن هذه الميزة تظهر في صورة زر في على شريط العنوان حيث يحدد المستخدم اإلتجاه ال ،

dir .على الصفحة تلقائيا












http://www.sh3bwah.com/>html dir="rtl<"

HTMLما وراء

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

إن شاء الله لنؤدي دورنا إلى جميع العرب.

أوراق األنماط المتتالية

Casscadingأوراق األنماط المتتالية أو Style Sheet أو CSSوم فيooا الوسooهي تقنية تستخدم للتحكم في الكيفية التي يجب أن تظهر به داخooل كooلFont يظهر باللون األسود وبخط عادي وطريقة عادية، ولتغييره كان ال بد من وضooع وسooم H1صفحة ويب، فمثال العنوان الرئيسي

، فماذا لو استطعنا أن نحدد نحن كيف نريد لعنوان الصفحة الرئيسي أن يظهر، وكيف يجب أن تظهر الجoداول وكيoف يجب أن تظهoرH1وسم ، وقد تم تطooوير هoذه التقنيooة على المooدى األعoوام السooابقةCSS، اآلن يمكننا عمل ذلك باستخدام تقنية HTMLجميع الوسوم األخرى في لغة

حتى وصلنا إلى النسخة الثانية من مواصفات هذه اللغة ويمكن الحصول عليها من مجمع الشبكة العنكبوتيooة العالميooة مooع مجموعooة كبooيرة من /http://www.w3.org/Style/CSSالوصالت والكتب والدورات :

لغة الترميز القابلة للتوسع

eXtensibleلغooة الترمooيز القابلooة للتوسooع أو Markup Language أو XMLومooدة بحيث يتم التخلص من الوسooة جديooارة عن تقنيooهي عب أصبح أمر الوسوم غير مهما، فيمكنني مثال أن أقooوم بجعooل الوسooمCSSالقياسية ويصبح لكل شخص وسومه الخاصة به، فبد أن ظهرت تقنية

h6ونooرا وتكooالذي ال أستخدمه كثيرا يصبح وسما خاصا له لون خاص وشكل خاص أستخدمه في كتابة المالحظات مثال، بحيث يصبح لونها أحم ال يشير إلى شيء، فما الفائدة منه اآلن ! h6مبروزة ببرواز جميل والفته للنظر، وهكذا أصبح اإلسم

لذا فقد ظهرت فكرة لغة الترميز القابلة للتوسع بحيث أنك تقوم بعمل الوسوم وتسميها بأي اسم تريده، وتحدد كيفيooة ظهooور المحتooوى الooذي /http://www.w3.org/XML في مجمع الويب : XML إذهب إلى قسم XMLبداخل الوسم عن طريق أوراق األنماط المتتالية، للمزيد عن

لغة الجافا سكريبت

لغة الجافا سكريبت هي عبارة عن لغة برمجة محدودة، مخصصة للعمل في صفحات ويب لتوفير صفحات متغيرة ) ديناميكية (، فيمكنك عمooل زر ينفذ عمليات خاصة على جهاز الزبون دون إرسال المعلومات إلى مزود ويب، وتسooتخدم بشooكل كبooير في الصooفحات الشخصooية في عمooل الحركات والتأثيرات الفنية والحركية وقد ظهرت أخيرا العديد من المواقooع الooتي تooوفر سooكريبتات جooاهزة ورائعooة لتقooوم بنقلهooا وإضooافتها إلى

أو موقooع/http://javascript.internet.comموقعooك بسooهولة، للمزيooد من المعلومooات عن لغooة الجافooا سooكريبت إذهب إلى موقooع : http://www.dynamicdrive.com/ .

البرمجة جهة المزود









http://www.arabbuilder.com/link.php?http://www.dynamicdrive.com/

http://www.arabbuilder.com/link.php?http://javascript.internet.com/

http://www.arabbuilder.com/link.php?http://www.w3.org/XML/

http://www.arabbuilder.com/link.php?http://www.w3.org/Style/CSS/




http://www.sh3bwah.com/ البرمجة جهة المزود هي طريق يتم فيها تoركيب الصoفحات وصoنعها ديناميكيoا طبقooا لمواصoفات متفoق عليهoا لتبooادل البيانoات، وتسoمى هooذه

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

فقط، علىCGIووظائف معالجة النصوص المطلوبة في عمليات إنشاء الصفحات ديناميكيا، وهي لغة عامة وليست لغة مخصصة لكتابة برامج الجديدة وهي لغة مخصصة كليا لعمل الصفحات الديناميكية وهي اللغة المستخدمة لجعل موقooع مooبرمج يظهooر بمظهooرهPHPالعكس من لغة

فقooط وال تعمooل في مooزوداتNT من مايكروسوفت أيضا ولكنها مقصooورة على مooزودات ASPالموحد والمتناسق والمترابط، وتوجد أيضا لغة UNIX ولoooات حoooد من المعلومoooارا، للمزيoooع انتشoooاألوس Perl : عoooراج http://www.perl.com/ ةoooول لغoooات حoooولمعلوم PHPعoooراج

http://www.php.net/









http://www.arabbuilder.com/link.php?http://www.php.net/

http://www.arabbuilder.com/link.php?http://www.perl.com/


lesson HTML

Documents

Transcript of lesson HTML