مذكرة في لغة Html 2

خانذ يحذ يشاد إداسج كفش انضاخ انرؼهح ذظ انكثذش انرؼه

1

htmlمقدمة ف لغة

(.yperH extT arkupM anguageLإنها اللغة المستخدمة إلنشاء صفحات اإلنترنت. )والكلمة إختصار لـ وهال تحتوي على جمل . فهمثال Cلست لغة برمجة بالمعنى والشكل المتعارف عله للغات البرمجة األخرى كلغة

ـ التحكم والدوران، وعند الحاجة الستخدام هذ ,Java, JavaScriptه الجمل جب تضمن شفرات من لغات أخرى ك

CGI ال تحتاج إلى مترجم خاص به غر مرتبطة بنظام تشغل معن، ألنه تم Compiler. كذلك فه . وه لغة بسطة تفسرها وتنفذ تعلماتها مباشرة من قبل متصفح اإلنترنت وبغض النظر عن النظام المستخدم. لذلك فه

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

تستخدم بشكل أزواج وتكتب بالصغة TAGSمن شفرات تسمى Htmlتتكون مفردات لغة أي الوسوم. وه

-ن السار إلى المن( :التالة )م

وذلك بالشكل التال: Boldستخدم لكتابة الكلمات بخط أسود عرض فعلى سبل المثال الوسم

Text <‎B >

أو قد تستخدم بكلتا الحالتن ستخدم بصورة مفردة مثل وسم نهاة السطر وهناك بعض الوسوم الخاصة الت ت وسوف نناقش هذه الوسوم وغرها بالتفصل ف حنه إن شاء هللا <.P>مثل وسم الفقرة

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

قوم تت نقوم بتصممها. وعلك فقط أن لمعانة الصفحات ال Internet Explorerإلى أحد متصفحات اإلنترنت ‎.htmأو ‎.htmlبحفظ النص المكتوب بملف حمل االسم الممتد

فحة وب بسطةإنشاء ص

بسرد الوسوم األساسة لصفحة الوب ومناقشتها معك واحدا تلو اآلخر. لنصل ف النهاة إلى إنشاء هنا قوم نسوف صفحة وب بسطة. لنأخذ الوسوم التالة:

عى اناح عى انثذاح

<HTML> <‎/HTML>

<HEAD> <‎/HEAD>

<TITLE> <‎/TITLE>

<BODY> <‎/BODY>

تالحظ؟ أن كل منها تألف من زوج من الوسوم أحدهما وسم البداة، واآلخر وسم النهاة. وتمز وسم النهاة ماذا Htmlبوجود الرمز / . تأمل الرسم التال، فهو عط فكرة عن تركب ملف

2

بالوسم <HTML>بدأ دائما بالوسم Htmlإذن فملف ال تنسى ذلك! <.‎/HTML>ونته

فحدد بداة المقطع الذي حتوي على المعلومات الخاصة بتعرف الصفحة. كالعنوان الظاهر <HEAD>أما الوسم <TITLE< … >‎/TITLE> على شرط عنوان المتصفح. وهذا العنوان بدوره حتاج ألن وضع بن الوسمن:

لك ننه هذا المقطع. <‎/HEAD>وبالطبع جب كتابة الوسم

والذي تم كتابة نصوص صفحة الوب ضمنه، باإلضافة إلى إدراج الصور والجداول <BODY>نأت إلى الوسم <‎/BODY>وباق محتوات الصفحة. وهو أضا حتاج إلى وسم اإلنهاء

مفكرة واكتب ما ل: قم بفتح برنامج ال… ها

<HTML> <HEAD> <TITLE> This is a test Webpage <‎/TITLE> <‎/HEAD> <BODY> Wow, I'm writing my first webpage <‎/BODY> <‎/HTML>

ملف وبأي اسم تختاره. وال تنسى أن االمتداد المستخدم ف أسماء ملفات هو HTMLواآلن قم بحفظ ما كتبته فhtm. أوhtml. مثال أنا اخترت االسم‎1st_file.htm ومن األفضل أن تقوم بإنشاء مجلد مستقل على القرص

الصلب لك تحفظ به ملفاتك فهذا سهل علك عملة استرجاعها للعرض أو التحدث ولكن هذا المجلد مثال باالسم C:\htmfiles نشاهد نتجة ما كتبناه. قم بتشغل متصفح اإلنترنو Internet Explorer ت الذي تستخدمهلك

C:\htmfiles\1st_file.htm ثم حدد المسار الذي وجد به الملف. .Fileمن قائمة …Openفاختر األمر

3

وذلك طبعا حسب االفتراضات السابقة الت اتبعتها عند تخزن الملف. وهذا ما حصلت عله:

وقبل أن نستمر أرد أن أنبهك إلى بعض المالحظات عند كتابة صفحات الوب:

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

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

بالشكل التال:

<HTML><HEAD><TITLE> This is a test Webpage </TITLE></HEAD><BODY> Wow, I'm writing my first webpage </BODY></HTML>‎

أو بالشكل التال:

<HTML> <HEAD> <TITLE> This is a test Webpage <‎/TITLE> <‎/HEAD> <BODY> Wow, I'm writing my first webpage <‎/BODY> <‎/HTML>

كل الحاالت ستحصل على ن فس النتجة.وفواآلن قد تتساءل، إذن كف مكن التحكم بمقدار النص المكتوب ف كل سطر وكف مكن تحدد نهاة الفقرة وبداة

الفقرة الت تلها؟

لتحدد النهاة للسطر. والبدء بسطر جدد )الحظ أن هذا الوسم مفرد، أي لس له وسم سوف نستخدم الوسم

نهاة(.

4

إلى المثال السابق، قم بتعدل الملف لك صبح بالشكل التال ونعود

<HTML> <HEAD> <TITLE> This is a test Webpage <‎/TITLE> <‎/HEAD> <BODY>

Wow, I'm writing my ‎ first webpage <‎/BODY> <‎/HTML>

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

فارغ بن الفقرات. لكن مع إضافة سطر إضاف

<HTML> <HEAD> <TITLE> This is a test Webpage <‎/TITLE> <‎/HEAD> <BODY> Wow, I'm writing my ‎ first webpage <‎/BODY> <‎/HTML>

5

)واأل ‎ ‎أما الفراغات فتعتبر رموزا خاصة لذلك ال نستطع التحكم بها وبعددها إال باستخدام الوسم حرف هوإذا أردت إدخال عدة فراغات بن نص وآخر ما علك إال كتابة هذا (.Non Breakable Spaceاختصار للعبارة

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

إذن لنعد إلى المفكرة ونكتب ملفنا بالشكل التال:

<HTML> <HEAD> <TITLE> This is a test Webpage <‎/TITLE> <‎/HEAD> <BODY> Wow, ‎ I'm writing ‎ ‎ my first webpage <‎/BODY> <‎/HTML>

6

تنسق الصفحة، أضف لصفحتك بعض الحوة باستخدام األلوان والخلفات

هذا ال من أجل التحكم <BODY>بالتعرف على الخصائص الت مكن إضافتها إلى الوسم جزءسوف نقوم ف الدرس وان. بالشكل العام للصفحة، وخصوصا فما تعلق باألل طبعا أنت ال زلت تذكر الصفحة الت قمنا بكتابتها ف

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

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

على التعابر الت تضاف إلى الوسوم، من أجل تحدد الكفة أو الشكل الذي تعمل (Attribute)نطلق كلمة خاصة

بها هذه الوسوم. وبعبارة أخرى فإن الوسم قوم بإخبار المتصفح عن العمل الذي جب القام به أما الخاصة فتحدد تأمل الشفرة التالة: الكفة الت ستم بها أداء هذا العمل.

‎<BODY BGCOLOR="FFFFFF">‎ ... <‎/BODY>

تقوم بتحدد لون الخلفة للصفحة. أما <BODY>إلى الوسم BGCOLORلقد قمت بإضافة الخاصة ، وهFFFFFF القمة الت تمثل اللون المختار وهو هنا اللون األبض، )الحظ أنها مكتوبه بن إشارت " " ( ولو فه

للون األزرق الفاتح...... 9966CCأو الرمز .000000أردت تمثل اللون األسود لكتبت الرمز

يالحظح يح: إال تػغ إشاسجؼغ انرظفت انشيص، نزنك ي األفؼم # حاخ ال ذرؼشف ػه سيص األنا لثم ز

FFFFFF">‎#"= .نرظثح تزا انشكم اعرخذايا دائا

، من الممكن استخدام أسماء هذه األلوان مباشرة بدال من األرقام السداس عشرة. ة لبعض األلوان األساسة وبالنسب ه األلوان ومسماتها: وهذا جدول وضح هذ

Black White

Red Green

Marron Purple

Navy Blue

Teal Lime

Gray Silver

Olive Aqua

Fuchsia Yellow

ونعود إلى الوسوم و خصائصها ...

7

‎<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.jpg">‎ ... <‎/BODY>

رة كخلفة )ورق جدران( للصفحة وقد استخدمت الصورة التالةبتحدد صو BACKGROUNDتقوم الخاصة وكانت هذه النتجة image.jpgوالمسماة ف صفحت

نها أصبحت تغط كل الشاشة. بحث حجبت أضا تالحظ أن المتصفح قد قام بتكرار عرض الصورة بطرقة التجانب وأوالحققة أن اللون ظهر فقط عندما ال (BGCOLORاللون األبض الذي حددناه كلون الخلفة )من خالل الخاصة

نقوم باستخدام صورة ما كخلفة. ومع ذلك فضل تحدده إحتاطا خاصة وأن بعض المتصفحات القدمة توصف بأنها )أي لس بإمكانها عرض الصور(. أو ربما هناك بعض المستخدمن Text-Based Browsersمتصفحات نصة

لصور تلقائا من متصفحاتهم.الذن قاموا بإلغاء خار عرض ا

ربما الحظت خالل استخدامك لإلنترنت أن معظم الوصالت <:BODY>ولنكمل مع باق الخصائص ف وسم تنقلك إلى صفحات أو مواقع أخرى على الشبكة ه دائما ممزة باللون األزرق، الت تنقر علها ل (Links)التشعبة

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

إلك هذه الخصائص الصفحة بما سؤدي إلى اختفاء هذه الوصالت أو حتى اختفاء نص الصفحة نفسها. فما العمل؟ الت تقوم بالتحكم ف ألوان النصوص:

‎TEXT="#rrggbb"‎ للصفحة تحدد لون النص األساس

‎LINK="#rrggbb"‎ تحدد لون الوصالت التشعبة

‎VLINK="#rrggbb"‎ تحدد لون الوصالت التشعبة الت تمت زارتهاvisited links

‎ALINK="#rrggbb"‎ تحدد لون الوصلة التشعبة الفعالة أي عندما تم النقر علهاactive links

بنفس تلك األلوان الت واآلن، دعنا نجمل الخصائص السابقة ف عبارة واحدة. وسوف أكتب الرموز الخاصة باأللوان تمثلها. وألفت نظرك إلى أنه ال أهمة للترتب ف كتابة هذه الخصائص داخل العبارة.

8

‎<BODY BACKGROUND="backimag.jpg"‎ BGCOLOR="#ffff00"‎ TEXT="#000066"‎ LINK="#00ff00"‎ VLINK="#ff0000"‎ ALINK="#999999">‎

؟ وأنن اخترت اللون األصفر للخلفة كخلفة للصفحة backimag.jpgورة حاول أن تحللها! أنن قد حددت الص

)ف حالة عدم عرض الصورة السابقة كخلفة(؟ وان النص سظهر باللون األزرق الغامق؟ أما الوصالت التشعبة اللون الرمادي فلونها أخضر، والوصالت الت تمت زارتها ستظهر باللون األحمر. أما تلك الوصلة الفعالة فستظهر ب

ف لحظة النقر علها بالفأرة.

التحكم بالخطوط ف الصفحة، إختار أنواعها وأحجامها وتنسقاتها

يم يغ انخطؽ إا نى مى تانرؼا ػها فا طفحرا انثغطح انر ف أا ذشكاا ػه األشكال. أ ال تأ شكم ي

تاناعثح فئ ز إػذاداذا االفرشاػح. خؾ ػاد، ػ Times New Romanاإلػذاداخ 3حع > )تماط يرظفحاخ اإلرشد(. <FONT< ... >FONT/انعى األل انخاص تانخطؽ

مو تانرحكى تانخطؽ ي حس انع انه انحعى. أيا انخظائض انر غرخذيا يغ زا انعى انعو

كانران : األخش نهخطؽ ف

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

الخط الثان ... وهكذا

‎‎ ... Text ... <‎/FONT>

Color هاأما هذه الخاصة فتحدد لون الخط، وذلك بنفس مبادئ تحدد األلوان الت تحدثنا ف

‎‎ ... Text ... <‎/FONT>

Size .صفحات هناك سبعة أحجام ألي خط تستطع المتوولتحدد حجم الخط نستخدم هذه الخاصةونقوم بتحدد الحجم المطلوب بأسلوبن: أولهما المباشر. حث تم كتابة رقم التعرف علها. . أي أننا نختار الحجم الذي نرده مباشرة. 7-1تراوح ما بن

‎‎ ... Text ... <‎/FONT>

ما بإشارة + أو مرفقة إ 6إلى 1أما األسلوب الثان فهو النسب: حث تكتب األرقام من

9

. -بإشارة

‎‎ ... Text ... <‎/FONT>

هذه الطرقة فإن األرقام ( للخط وذلك نسبة -تمثل درجات التكبر )+( أو التصغر ) 6-1وف 4إلى الحجم االفتراض. فمثال الرقم + عن تكبر الخط أربع درجات عن الحجم االفتراض

عن تصغر الخط درجة واحدة أي 1-. بالمقابل فأن الرقم 7لحجم ، أي أنه صبح با3وهو . 2صبح بالحجم

ال نستطع الحصول على أكثر من سبعة أحجام للخطوط. الحظ أنه حتى ف األسلوب النسب حتى وإن حاولنا كتابة أرقام أكبر أو أصغر

تؼغ األيصهح نرػح نك كفح اعرخذاو زا انعى، ل ذعشترا نرش انرعح تفغك .فحاز

‎‎‎

This font is Arial, Size is 6, Color is Red <‎/FONT>

‎‎

This font is Arial, Size is +3, Color is Red <‎/FONT>

‎‎‎

This font is Times New Roman, Size is 5, Color is Blue <‎/FONT>

‎‎

This font is Courier, Size is 2, Color is Maroon <‎/FONT>

 This <‎/FONT> is <‎/FONT> multi <‎/FONT> colors, <‎/FONT> multi <‎/FONT> faces, <‎/FONT> and <‎/FONT> multi <‎/FONT> sizes <‎/FONT> text <‎/FONT>

11

C <‎/FONT>

O<‎/FONT> L<‎/FONT> O<‎/FONT> R<‎/FONT> S<‎/FONT>

< انعى انصا ي انعو انخاطح تانخطؽ <.BASEFONTرمم ا إن

ذحذ تانغثح نهظفحح ػه عغرخذو كهاذ ع انخؾ خظائظ انز مو ترؼشف ع انخؾ األعاع . أ أ

حع. ارا حذد ن انظفحح ي تذارا إن ف ػه عى نهاح؟ تانطثغ يا انحاظح إن عى اناح ؽانا أ رؼايم يغ م الحظد ا عى يفشد ال حر

انظفحح ككم ي فمشج تزاذا. نزنك فئ زا انعى كرة ػادج ف غ اإلػذاداخ األعاعح نا، نظ يغ كهح أ عطش أ فظ انخظائض عانفح انزكش BODYأل انهف، فؼم يثاششج تؼذ عى > ف <. أيا انخظائض انغرخذيح يؼ

Name< ، )غرطغ اعرخذاو انخاطح FONTيغ > تذال ي أ اخرالفاخ. (. تفظ اFaceيؼ نطشمح تذ انشفشج كصال: إنك ز

‎<BASEFONT Name="Arial" COLOR="#FF0000" SIZE="5">‎

نهظفحح تحس ظثح ػ Arialتذساعح زا انصال غررط أ مو ترؼذم انخؾ االفرشاػ 5حع ن

ذهك انظفحح ع كم انظص انكرتح ف طثك ػها زا انؾ ي انخؾ. يا نى مى ؽثؼا تاعرخذاو أحش. تانران فئ أكصش ذحذذا أكصش /Font< ... >‎Fontانعو > األيصهح انغاتمح، ف < نرؼذها انرحكى تظشا كا فؼها ف

انعى > < BASEFONTيشح ي

نض انظفحح. أال ذزكش أ انذسط انغاتك ذكها ػ انخاطح تاعثح انحذس ػ األنا ذغش انه األعاع ا فText < انر ذكرة يغ انعىBody ض انظفحح... < انر اعرخذياا نرحذذ ن

انخاطح خاطح انعى > Colorال ظذ ذؼاسع ت ز < فأد تكم تغاؽح ذغرطغ اعرخذاو BASEFONTف< انز BASEFONTأ يا ف طفحرك. إرا حذز اعرخذيد كالا فئ انه انحذد يغ انعى >

عطثم انرظفح ؼرذ.

ف طفحاخ اإلرشد : Headingsعو خاطح ذغرخذو نرض انؼا ** <Hn< ... >‎/Hn>

سلى ت nحشف انؼا.ص 1-9 م يغر

<H1> Heading 1 <‎/H1> <H2> Heading 2 <‎/H2> <H3> Heading 3 <‎/H3> <H4> Heading 4 <‎/H4> <H5> Heading 5 <‎/H5> <H6> Heading 6 <‎/H6>

انظص. فا ه انعو ا إن انرغماخ انرأششاخ انر ك إػافرا إن :انخاطح تا يرثػح تصال أذ انعو انرانح: * انخؾ انغايك )األعد انؼشغ(، غرخذو ن

 ... <‎/B>

11

 Bold Text <‎/B> This is Bold Text

* انخؾ انائم

 ... <‎/I>

 Italic Text <‎/I> This is Italic Text

* انخؾ انغطش

 ... <‎/U>

 Undelined Text <‎/U> elined Text Und This is

* انخؾ انشذفغ

 ... <‎/SUP>

 Superscript Text <‎/SUP> This is Superscript Text

* انخؾ انخفغ

 ... <‎/SUB>

 Subscript Text <‎/SUB> This is Subscript Text

خؾ * ض ؼرشػ

<S> ... <‎/S>

<S> Striked Text <‎/S> This is Striked Text too

أيصهح ذعغ ت ػذج ذغماخ يؼا : ز

 This is a Bold, Italic and Underlined Text <‎/U> <‎/I> <‎/B> This is a Bold, Italic and Underlined Text

 This text is red, size +3, Italic, and Underlined <‎/I> <‎/U> <‎/FONT>

This text is red, size +3, Italic, and Underlined

12

فظ انلد األيصهح ذػح يغائم يؼح أنا: أ تئيكاا اعرخذاو ػذج عو ذغماخ يؼا ف ز لذ أسدخ ي انض. )رنك نعغ انعو نظ فمؾ نعو انخطؽ(. نفظ انمطغ ي كا ركشخ عاتما ، ال أح نرشذة ز

نكانعو ال أا سد أال ... : يمطغ احذ عة يشاػاج ػذو انرذاخم تا!... كف؟ أظش إن انشعى انران ػذ اعرخذاو انعو انرؼذدج ف

خطأ: فكراتح انعو انغاتمح تانطشق انرانح

 This is a Bold, Italic and Underlined Text <‎/B> <‎/I> <‎/U> This is a Bold, Italic and Underlined Text <‎/B> <‎/U> <‎/I>

ناتكقم بتنسق وتنظم صفحتك، واستخدم القوائم لترتب با

زا انذسط عف الش انعو انخاطح تانفمشاخ تشكم خاص ذشذة انظفحاخ ذغما تشكم ػاو. فانرشذة ف فى انخطؽ انؼشؼح نهظفحح. نعزب اراو انضائش أ انماسا نظفحرك ذغم ػه انخطج األن < Pفانعى >

انغطش انحان BRمو تئاء انفمشج. انعى > مو تئػافح &‎nbsp;‎مم انض إن عطش ظذذ. انعى < تفظ ػذد انفشاغاخ انطهت .انفشاغاخ، عة ذكشاس كراتر

عى يفشد نك غرخذو أؼا كعى يضدض >Pنمذ لهد إ انعى > >P< ... >‎/P انحانح كا ي ز < ف انض فا حس غرخذ انخظائض ذحذذ إذعا انفمشج إذعا . ALIGN, DIRو يؼ

وأوضحها باألمثلة التالة: Left ،Center, Rightتحدد محاذاة الفقرة وه تأخذ القم ALIGNفالخاصة

 This is a left-aligned paragraph <‎/P>

This is left-aligned paragraph

 This is right-aligned paragraph

This is a right-aligned paragraph

13

 This is a centered paragraph

This is a centered paragraph

< ... CENTER>كذلك لتوسط الفقرات أو الكائنات بشكل عام ف الصفحة نستطع استخدام الوسوم

</CENTER >

<CENTER> This is a centered text </CENTER>

This is a centered text فتقوم بتحدد إتجاه قراءة النص وتأخذ القم والت نستخدمها أضا مع DIRأما الخاصة

LTR إتجاه النص من السار إلى المن (Left To Right)

RTL إتجاه النص من المن إلى السار (Right To Left)

مهمة عند كتابة صفحات باللغة العربة( )تذكر هذه الخاصة جدا فه

واآلن تأمل هذا الشكل وحاول أن تستنتج كف قمت بإعداده...!؟

A B C D

E F G H

I J K L

M N O P

Q R S T

إستنتاجك حسنا، <.BR>ونهاة السطر ‎ ‎ربما توصلت إلى أن استخدمت عددا كبرا من وسوم الفراغات ال بأس به ولكنه لس دققا فأنا لم أستخدم أا من هذه الوسوم هنا. بل كل ما فعلته بعد إعداد هذا الشكل هو وضعه

ضمن:

<PRE> ... </PRE>

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

ن تم تحول الخط إلى خط موحد المسافات ولو لم أقم بوضعه ضمن هذه الوسوم لكانت النتجة كالتال:إعداده به. لك

A B C D E F G H I J K L M N O P Q R S T

الحظ أن هذا الوسم ستخدم مع الفقرات الت ال نحتاج فها إلى تنسقات متعددة للخطوط أو األلوان. بل فقط مع حدة الخط والتنسقات.الفقرات العادة مو

14

القوائم*

على مجموعة من الوسوم الخاصة بتنظم البانات ف قوائم وباستخدام عدة خارات. وهناك HTMLتحتوي لغة مثل : وطلق علها اضا تعداد رقم .Ordered Listsأولهما المتسلسلة نوعن من القوائم:

محافظة الغربة مدن أسماء بعض

كبرىالمحلة ال .1 طنطا .2 كفر الزات .3 بسون .4 السنطة .5 سمنود .6

هذا مثال علها د النقط و طلق علها اضا التعدا و Unordered Listsوثانهما القوائم غر المتسلسلة

مصرة أسماء بعض الجامعات ال

طنطاجامعة منصورةجامعة ال المنوفةجامعة قاهرةجامعة ال

نحتاج إلى وسوم خاصة بتحدد بداة ونهاة القائمة ووسوم تحدد بنود هذه القائمة.عند التعامل مع القوائم بنوعهما نستخدم الوسوم ( ) تعداد رقم بالنسبة للقوائم المتسلسلة

<OL< ... >‎/OL >

الوسوم فنستخدم ) التعداد النقط ( أما بالنسبة للقوائم غر المتسلسلة

<UL< ... >‎/UL >

Listوهو وسم مفرد كتب ف بداة السطر الخاص بكل بند <LI>بند من بنود القائمة نستخدم الوسم ولتعن كل

Item. :إذن عندما قمت بإنشاء القوائم السابقة استخدمت الشفرة التالة

<OL> <LI> محلة الكبرىال <LI>طنطا <LI>كفر الزيات <LI>بسيون <LI>السنطة <LI>سمنود <‎/OL>

15

<UL> <LI>طنطا جامعة <LI> منصورةجامعة ال <LI>المنوفية جامعة <LI> القاهرةجامعة <‎/UL>

ووظفتها تحدد شكل الرمز الظاهر مع بنود القائمة، TYPEوالخاصة الوحدة الت تستخدم مع هذه الوسوم ه قائمة. ولكن نستطع وبذلك نحدد رمزا واحدا لكل ال <OL>أو <UL>وعادة تستخدم مع وسوم بداة القوائم

مظهر القائمة من خالل تحدد رمز مختلف لكل بند. <LI>استخدامها أضا مع وسم البنود إلعطاء تحكم أكبر فالت تغر رموز الترقم من األرقام العادة A, a, I, iفعند وضعها ضمن تعرف القوائم المتسلسلة تأخذ القم:

ترقم باستخدام األحرف الالتنة الكبرة أو الصغرة، أو باستخدام األرقام الرومانة ( إلى 1اإلفتراضة )والت رمزها كما ترى ف الجدول التال:

‎<OL TYPE="A">‎ ‎<OL TYPE="a">‎ ‎<OL TYPE="I">‎ ‎<OL TYPE="i">‎

A.

B. C. D.

E.

a.

b. c. d.

e.

I.

II. III. IV.

V.

i.

ii. iii. iv.

v.

وكما دل اإلسم تستخدم عندما Definition Listsقوائم دعى قوائم الشرح أو التعرفات هناك نوع خاص من ال نرد إدراج قائمة من المصطلحات تبع كل واحد منها شرح أو تعلق.

HTML Hyper Text Markup Language

WWW World Wide Web

FTP File Transfer Protocol

GIF Graphical Interchange Format

JPG, JPEG Joint Photographic Experts Group

ونحتاج إلنشاء هذه القوائم إلى ثالثة وسوم: لتعرف بداة ونهاة القائمة.< DL< ... >‎/DL>األول

ووضع قبل كل مصطلح لتحدده، وهو وسم مفرد. < DT>والثان فرد. ولنقم اآلن بكتابة شفرة القائمة السابقة وهو وسم الشرح أو التعلق وهو أضا م< DD>أما الثالث فهو

‎<DL>‎ ‎<DT>HTML <DD>Hyper Text Markup Language‎ ‎<DT>WWW <DD>World Wide Web‎

16

‎<DT>FTP <DD>File Transport Protocol‎ ‎<DT>GIF <DD>Graphical Interchange Format‎ ‎<DT>JPG, JPEG <DD>Joint Photographic Experts Group‎ ‎<‎/DL>

( انرحكى تأحعايا أتؼادا إدساظا ) ‎الصور

ا ػه رؼهك تانرؼايم يؼا، مو تانحذس ػ انظس انشعياخ ياعف نمذ الرظش حذصا ػ انظس حر

انظفحاخ فغا فه حك إػافح خهفاخ نهظفحاخ، خدم إن الوسم الرئس المست اح أخش،أيا إدساض انظس ػوهو وسم مفرد. لكن هل كف هذا إلدراج صورة؟ كال، بالطبع جب <IMG>لتعرف صورة ما داخل الصفحة هو

لتحدد موقع واسم الصورة. SRCأن نحدد الصورة الت نردها. لذلك نضف الخاصة له

ه وعندما قمت بإدراجها. كانت الشفرة الخاصة بذلك thedome.jpgالصورة إسمها نفترض أن

‎<IMG SRC="thedome.jpg">‎

الذي أعمل HTMLحث تواجد ملف نفس الدلل الفرع أو المجلدوالصغة هذه تفترض أن الصورة موجودة ف

وإظهار الصورة بالحجم أضا ف أبعاد الصورة نحن نستطع التحكم عله، وقمت باستدعاء الصورة من خالله. متبوعة بأرقام تمثل اإلرتفاع HEIGHT, WIDTHبإضافة الخصائص وذلك . ي نرده من خالل هذا الوسمالذ

والعرض المطلوبن.

‎<IMG SRC="thedome.jpg" HEIGHT="70" WIDTH="120">‎

‎<IMG SRC="thedome.jpg" HEIGHT="300" WIDTH="500">‎

ر مكان الصورة. وهذا النص الحظ وفها نحدد نصا بدال ظه ALTه <IMG>الخاصة التالة الت تستخدم مع

خصوصا عندما كون خار "إظهار الصور تلقائا" غر فعال ف المتصفح. كما تستطع مالحظته ف الفترة الت تسبق تحمل الصور وخاصة ف المواقع بطئة التحمل.

‎<IMG SRC="thedome.jpg" ALT="The Dome Of The Rock">‎

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

تأخذ القم: تحدد موقع النص الذي لها بالنسبة لهاأخرى: ,BOTTOM, TOP ،MIDDLE, LEFTوهRIGHT :وأوضح لك تأثر كل قمة كما ل

17

انحانح انؼادح ف انض انز )يصم ز( ػذيا ال مو ترحذذ أ يحاراج فئ

انحانح اإلفرشاػح نظس ه انظسج ظش تحاراج انحافح انغف نا. ز ه ذصها انمح BOTTOMانظس انر

‎<IMG SRC="image.jpg" ALIGN="BOTTOM">‎

TOP

انض ا انمح فئ انغطش األل ي نز ه انظسج مغ ػذ ذحذذ ز

تحاراج انحافح انؼها نا. أيا تال انض فرذ أعفها.

‎<IMG SRC="image.jpg" ALIGN="TOP">‎

MIDDLE

انمح فئ انغطش األل ي انض مغ تحاراج يرظف أيا ػذ ذحذذ ز

انظسج. كزنك فئ تال انض رذ أعفها.

‎<IMG SRC="image.jpg" ALIGN="MIDDLE">‎

LEFT

انغاس. يغ انرفاف انض ألظ يحاراج انظسج إن إن انمح ذؤد ز نؼذج أعطش حغة اسذفاع انظسج. انعح ان انز ها ػه

‎<IMG SRC="image.jpg" ALIGN="LEFT">‎

RIGHT

ان. يغ انرفاف انض إن يحاراج انظسج إن ألظ انمح فرؤد أيا ز انعح انغش نؼذج أعطش حغة اسذفاع انظسج. انز ها ػه

‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎

لمسافة الفاصلة بنها وبن النص الذي جاورها. واآلن بعد أن قمنا بتحدد محاذاة الصورة نحتاج إلى تحدد ا ونستخدم لذلك الخصائص التالة:

VSPACE: .لتحدد المسافة العمودة الفاصلة بن النص والحافتن العلا والسفلى للصورة

18

HSPACE: .لتحدد المسافة األفقة الفاصلة بن النص والحافتن المنى والسرى للصورة

مثال:

‎<IMG SRC="image.jpg" ALIGN="RIGHT" VSPACE="20" HSPACE="20">‎

انشفشج عرذسض انظسج انغا يغ يحاراذا ن image.jpgانرعح: ز

انعاخ األستؼح. )لاس ت 20انظفحح إػافح يغافح فاسغح يمذاسا تكغم ػه ػحد ف خاطح . RIGHT يغ انمح ALIGNزا اإلؽاس اإلؽاس انغاتك انز

الحظ انغافح ت انظسج انض انشافك نا.(

ووظفتها إضافة إطار حول الصور والتحكم BORDERه <IMG>الخاصة األخرة والت تستخدم مع الوسم بسمكه. وهذه الخاصة تستخدم بشكل خاص عند تعن صورة ما كوصلة تشعبة. وتم التحكم بالسمك من خالل إسناد

أي ال وجد إطار حول الصورة. 0مثل السمك بالبكسل. والقمة اإلفتراضة له ه رقم بكسل نكتب الشفرة التالة: 5مثال إلضافة إطار سمكه

‎<IMG SRC="image.jpg" BORDER="5">‎

** االرتباطات التشعبة

Links... مجملها ه شبكة العنكبوت فإن هذه أو الوصالت التشعبة ه روح اإلنترنت. وإذا كانت اإلنترنت ب الخوط الت تشكل هذه الشبكة وتؤلف عها. تنقر على وصلة ما قحلقات الوصل بن المالن من مواالوصالت ه

نفس الموقع... وتنقر على وصلة أخرى لتنقلك كلا إلى أحد المواقع ف الجانب اآلخر من فتنقلك إلى صفحة أخرى ف العالم

رات للوصالت التشعبة، منها أن تكون الوصلة لموقع آخر، أو أن تكون لصفحة أخرى داخل الموقع هناك عدة خا نفس الصفحة )إلى أعلى أو أسفل على سبل المثال( أو أن تكون وصلة لعنوان نفسه، ومنها أن تكون لمكان آخر ف

جمع الحاالت فإن المبدأ واحد لكن تختلف بعض E-mailبرد إلكترون التفاصل وف

نستخدم الوسوم

<A< ... >‎/A>

اختصار لكلمة ال تعمل لوحدها بل تتطلب إضافة .Anchorكوسوم أساسة إلدراج الوصالت التشعبة، وه وه

خصائص معنة أولها وأهمها الخاصة

HREF

مال. الت نحدد من خاللها الموقع الذي نرد الداللة عله، وجب أن كتب عنوان الموقع كا

الحالة األولى: إدراج وصلة تشعبة تشر إلى موقع خارج.** لنقم بإدراج وصلة تشعبة إلى أحد المواقع العربة الرائدة والرائعة، وهو موقع شركة صخر. وعنوانه

http://www.sakhr.com :هذه الحالة تم كتابة الشفرة بالشكل التال ف

19

<A HREF="http://www.sakhr.com"> <‎/A>

لكن بق شء واحد وهو العبارة أو الكلمة الت ستم النقر علها لتشغل الوصلة، وهذه جب أن توضع بن الوسمن <A< ... >‎/A.> أي لك تكتمل الوصلة السابقة جب أن نكتب معها أي عبارة نردها، لك نقر علها الزائر فتنقله

والت تصبح الشفرة معها بالشكل التال: Go To SAKHRبارة: إلى العنوان المطلوب. ما رأك بع

<A HREF="http://www.sakhr.com">Go To SAKHR<‎/A>

وتظهر الوصلة كما ل:

Go To SAKHR

الكثر من الم-بل إنك تستطع إدراج صورة أو )زر( كبدل عن الكلمات وكل ما علك فعله ف -واقعكما تشاهد ف بالشكل التال: <A< ... >‎/A>هذه الحالة هو كتابة الوسم الخاص بإدراج الصورة بن الوسمن

<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif">‎<‎/A>

والذي ؤدي إلى ظهور الصورة التالة كوصلة تشعبة لموقع صخر

سوف كون الوسلة أو العنوان الذي نقلنا إلى <A< ... >‎/A>وبشكل عام فإن أي شء وضع بن الوسمن

هذا الشء نصا أو صورة أو كالهما معا. الموقع المشار إله ف الوصلة التشعبة، سواء كان

الحالة اإلفتراضة. وبالطبع نستطع 2ف إطار سمكه واآلن هل تالحظ اإلطار الظاهر حول الصورة بكسل وهذه ه ضمن وسم الصورة. BORDER="0"‎إزالته بكتابة الخاصة

<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="0"><‎/A>

أو حتى تكبره بكتابة السمك المطلوب مع هذه الخاصة.

<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="6"><‎/A>

أن تشر الوصلة التشعبة إلى ملف موجود ف نفس الموقع )أي ملف محل( سواء كان ** الحالة الثانة، وه هذه الحالة فإن ما كتب مع الخاصة أ HTMLملف هو اسم هذا الملف HREFو صورة أو غر ذلك. وف

لنقم بإنشاء وصلة تشعبة تقودنا إلى الصفحة الرئسة لهذا الموقع وبالمناسبة فإن الملف المطلوب الوصول إله. ، والشفرة الخاصة بذلك ه: index.htmlالذي حتوها اسمه

<A HREF="index.html">Main Page<‎/A>

http://www.sakhr.com/


21

Main Page

http://www.khayma.com/hpinarabic/index.html

http://www.khayma.com/hpinarabic/index.html

مذكرة في لغة Html 2

Education

Transcript of مذكرة في لغة Html 2