تصميم المواقع 1

1
‫الفهرس‬
‫الموضوع‬
‫الفصل الول‪:‬الساسيات‬
‫ماهي ‪HTML‬‬
‫الدوات المطلوبة لبناء صفحات النترنت‬
‫وسوم هيكل المستند ‪Document Structure Tags‬‬
‫خصائص الوسوم ‪Attributes Tags‬‬
‫التعليقات في ‪HTML‬‬
‫أسئلة الفصل الول‬
‫الفصل الثاني‪:‬الخطوط واللوان‬
‫اللوان‬
‫ملخص اللوان في ‪ HTML‬ممثلة بالطريقتين‬
‫ملخص للوان الخلفيات في ‪HTML‬‬
‫الوسم >‪<body‬‬
‫الوسم >‪<br/‬‬
‫الوسمة >‪<h1><h2><h3><h4><h5><h6‬‬
‫‪2‬‬
‫الوسم >‪<font‬‬
‫الوسم >‪<b‬‬
‫الوسم >‪<i‬‬
‫الوسم س‪<u‬‬
‫الوسم >‪<strong‬‬
‫الوسم >‪<em‬‬
‫الوسم >‪<sup‬‬
‫الوسم >‪<sub‬‬
‫الوسم >‪<big‬‬
‫الوسم>‪<small‬‬
‫الوسم >‪<strike‬‬
‫الوسم >‪<s‬‬
‫الوسم >‪<tt‬‬
‫أسئلة الفصل الثاني‬
‫الفصل الثالث‪:‬الفقرات والقوائم‬
‫الفقرات‬
‫الوسم >‪<p‬‬
‫‪3‬‬
‫الوسم >‪<blockquote‬‬
‫الوسم >‪<pre‬‬
‫الوسم >‪<center‬‬
‫القوائم‬
‫الوسم >‪<ol‬‬
‫الوسم >‪<li‬‬
‫الوسم >‪<ul‬‬
‫قوائم التعريفات‬
‫الوسم س‪<dl‬‬
‫الوسم >‪<dt‬‬
‫الوسم >‪<dd‬‬
‫أسئلة الفصل الثالث‬
‫الفصل الرابع‪:‬وسوم الويب‬
‫الوسم >‪<img‬‬
‫تحديد مسار الصورة‬
‫الروابط‬
‫الوسم س‪<a‬‬
‫‪4‬‬
‫اربع طرق لتعريف الروابط‬
‫خرائط الصور‬
‫الوسم >‪<map‬‬
‫الوسم >‪<area‬‬
‫تقسيم الويب‬
‫الوسمس‪<div‬‬
‫الوسم >‪<hr‬‬
‫الوسم >‪<embed‬‬
‫الوسم >‪<marquee‬‬
‫أسئلة الفصل الرابع‬
‫الفصل الخامس‪:‬الجدوال‬
‫شرح الوسوم‬
‫الوسم >‪<table‬‬
‫الوسم >‪<tr‬‬
‫الوسم >‪<td‬‬
‫الوسم >‪<caption‬‬
‫أمثلة على الجداول‬
‫‪5‬‬
‫أسئلة الفصل الخامس‬
‫الفصل السادس‪:‬الطارات‬
‫الوسم >‪<frameset‬‬
‫الوسمس‪<frame‬‬
‫الخاصية ‪name‬‬
‫أسئلة الفصل السادس‬
‫الفصل السابع‪:‬النماذج‬
‫أشكال النماذج‬
‫الوسم >‪<form‬‬
‫الوسم >‪<Input‬‬
‫الفرق بين ‪ radio‬و ‪checkbox‬‬
‫الوسم >‪<select‬‬
‫الوسم >‪<option‬‬
‫الوسم >‪<optgroup‬‬
‫الوسم >‪<textarea‬‬
‫الوسم >‪<fieldset‬‬
‫‪6‬‬
‫الوسم >‪<legend‬‬
‫أسئلة الفصل السابع‬
‫الفصل الثامن‪:‬الميتا والرموز‬
‫الوسم س‪<mate‬‬
‫الرموز‬
‫أسئلة الفصل الثامن‬
‫الفصل التاسع‪CSS:‬‬
‫ماهي ‪CSS‬‬
‫ماهي فوائد)‪(CSS‬‬
‫طرق تعريف ت‪ (CSS‬داخل الصفحات‬
‫الوسم >‪<link‬‬
‫طريقة تحديد ‪CSS‬‬
‫خصائص ‪CSS‬‬
‫‪background‬‬
‫‪color‬‬
‫‪Text‬‬
‫‪Font‬‬
‫‪7‬‬
links
list
border
table
margin
padding
display & visibility
Position & z-index
float & clear
8
‫الفصل الول‬
‫ماهي ‪HTML‬‬
‫لغةت‪ (HTML‬هي اختصار الى ت‪(Hyper Text Markup Language‬‬
‫وهي ليست لغة برمجة وإنما ه‪TT‬ي لغ‪TT‬ة ترمي‪TT‬ز تس‪TT‬تخدم ف‪TT‬ي إنش‪TT‬اء‬
‫وتصميم صفحات النترنت وتعتبر من اقدم اللغ‪TT‬ات وأوس‪TT‬عها اس‪TT‬تخدما‬
‫في المواقع وتس‪TT‬تخدم ت‪ ( HTML‬وس‪TT‬وم أو ت‪ (tags‬لص‪TT‬دار التعليم‪TT‬ات‬
‫إلى المتصفح‬
‫الدوات المطلوبة لبناء صفحات النترنت‬

‫أولم‪:‬محرر لكتابة وسومت‪ (tags‬مثل م‪:‬‬
‫‪notepad-1‬تمجاني(‬
‫‪notepad++-2‬تمجاني(‬
‫‪dream waver-3‬تغير مجاني(‬
‫‪Komodo-4‬تيوجد نسخة مجانيه ونسخة غير مجانية(‬
‫ثانيام‪:‬متصفح إنترنت من اجل العرض مثلم‪:‬‬
‫‪Google chrome-1‬‬
‫‪Fire Fox-2‬‬
‫‪Opera-3‬‬
‫‪9‬‬
‫‪Internet Explorer-4‬‬
‫يفضل استخدام المحررات التالية في كتابة وسومت‪:(HTML‬‬

‫‪1-Notepad ++‬‬
‫‪2-Komodo‬‬
‫وذلك لنها تحتوي على مساعدة في كتابة الوسوم‬
‫‪-1‬جميع وسومت‪ (HTML‬توضع بين علمتي أكبر وأصغرت><(‬
‫‪ -2‬اغلب وسوم)‪ (HTML‬لها زوجين من الوسوم وسم بداية‬
‫وسم نهاية مثل >وسم النهاية‪> </‬وسم بداية<‬
‫‪ -3‬هناك وسوم لها زوج واحد أي وسم واحد فقط مثلت>‪(<br/‬‬
‫‪-3‬جميع وسوم ت‪ (HTML‬تكتب بين وسمي>‪<html> </html‬‬
‫‪10‬‬
‫وسوم هيكل المستند ‪Document Structure Tags‬‬
‫وه‪TT‬ي عب‪TT‬ارة ع‪TT‬ن أربع‪TT‬ة وس‪TT‬وم ت‪ ( Tags‬وتس‪TT‬مى بوس‪TT‬وم هيكلي‪TT‬ة‬

‫المستند وذلك أي ملف تق‪TT‬وم بتص‪TT‬ميمه يحت‪TT‬وي عل‪TT‬ى ه‪TT‬ذه الوس‪TT‬وم‬
‫الربعة كما في الصورة‬
‫‪11‬‬
‫الوسوم الربعة هي م‪:‬‬
‫>‪<html> </html‬‬
‫>‪<head></head‬‬
‫>‪<title></title‬‬
‫>‪<body></body‬‬
‫هذا الوسم يعني أن الملف يحتوي على أوامر ‪, HTML‬‬ ‫‪HTML‬‬

‫وليس نصاً عادياً‬
‫يعتبر هذا الوسم بمثابة رأس الصفحة الذي يتم وضع‬ ‫‪HEAD‬‬
‫معلومات عن الصفحة فيها مثلت‪ (page title‬او ت‪(meta tag‬‬

‫هذا الوسم هو مخصص لعنوان الصفحة حيث أن عنوان‬ ‫‪TITLE‬‬
‫الصفحة في المثال السابق ت‪ (Page Title‬وي‪i‬هر في‬
‫أعلى نافذة مستعرض الويب‬

‫هذا الوسم بمثابة جسم الصفحة ويحتوي على جميع‬ ‫‪BODY‬‬
‫النصوص والصور التي ستعرض في الصفحة‬
‫بعد الطلع الوسوم ‪ HTML‬الربعة الرئيسية يتم تخزين الصفحة‬

‫بامتداد ت‪ (.html‬أو )‪ (.htm‬كما في الصورة‬
‫‪12‬‬
13
‫خصائص الوسوم ‪Attributes Tags‬‬
‫يجب عليك أخي القارئ أن تعرف أن اغلب الوسوم تحتوي على‬
‫خصائص تعمل على تحسين م‪i‬هر الوسم والتحكم فيه بشكل افضل‬
‫في الصفحة و هذه الخصائص تكون داخل الوسم مثال‬
‫>‪<body bgcolor=#0000FF> </body‬‬
‫في هذا السطر قمنا بتغير اللون الفتراضي للصفحة وهو البيض إلى‬
‫اللون الزرق كما في الصورة‬
‫ستتعرف على اللوان وخصائص الوسوم بشكل اكثر في‬
‫الفصل القادم‬
‫‪14‬‬
‫التعليقات في ‪HTML‬‬
‫تستخدم التعليقات عادة في شرح ووصف الوسوم في صفحة الويب‬
‫وهي ل تتأثر بالتنفيذ‬
‫‪15‬‬
‫كما ترى حتى تضيف تعليق في ‪ HTML‬عليك كتابته بالطريقةالتالية‬
‫>‪--‬هنا يبدء كتابة التعليق‪<!--‬‬
‫‪16‬‬
‫أسئلة الفصل الول‬
‫‪-1‬ما هي لغة ت‪(HTML‬؟‬
‫‪(Document‬‬ ‫‪-2‬ماهي وسوم هيكلية المستند )‪Structure Tags‬‬
‫مع شرح وظيفة كل وسم؟‬
‫‪ -3‬ما هو امتداد صفحة ت‪(HTML‬؟‬
‫‪ -4‬كيف استطيع تغيير لون خلفية الصفحة من اللون البيض إلى لون‬
‫أخر ؟‬
‫‪17‬‬
‫الفصل الثاني‬
‫الخطوط و اللوان ‪Colors and lines tags‬‬
‫أولًم‪ :‬اللوانم‪:‬‬
‫يمكن تمثيل اللوان في ‪ HTML‬بطريقتين وهيم‪:‬‬
‫‪ -1‬الن‪i‬ام السادس عشر أو ت‪ (Hex decimal‬ويتكون من ‪ 6‬أرقام‬
‫وحروف كما في الصورة التاليةم‪:‬‬
‫‪18‬‬
19
‫هناك ثلث ألوان أساسية وهي ت‪ (RED,GREEN,BLUE‬أو‬
‫)الحمر‪,‬الخضر‪,‬الزرق( ولكل منها ‪ 256‬درجة لونية‬
‫بحيث يمثل كل رقمين أو رقم وحرف أو حرف ورقم من هذه الثلث‬
‫اللوان الساسية بحيث يتم دمجها مع بعض وا ظهارها لون واحد‬
‫تمثل هذه اللوان الثلث‬
‫‪20‬‬
‫‪ -2‬استخدام أسماء اللوانم‪:‬‬
‫إذا واجهتك صعوبة في استخدام الطريقة الولى يمكنك أن تستخدم‬
‫الطريقة الثانية وهي أسهل من الطريقة الولى بحيث يمكنك كتابة‬
‫اسم اللون مباشرة كما في الصورة التالية‬
‫‪21‬‬
‫قمنا بتغيير اللون البيض إلى اللون الزرق حيث استخدمنا هنا اسم‬
‫اللون مباشرة دون استخدام الطريقة الولى‬
‫ملخص اللوان في ‪ HTML‬ممثلة بالطريقتينم‪:‬‬
‫‪22‬‬
23
24
25
‫ملخص للوان الخلفيات في ‪:HTML‬‬
‫‪26‬‬
27
‫الوسوم‬
‫>‪<body‬‬ ‫الوسم )‪(Tag‬‬

‫وسم >‪ < body></body‬كما قلن‪TT‬ا س‪TT‬ابقا ه‪TT‬و بمثاب‪TT‬ة جس‪TT‬م الص‪TT‬فحة‬
‫ويحتوي على جميع النصوص والصور التي ستعرض في الصفحة‬
‫أهم الخصائص ‪Attributes‬‬
‫هذه الخاصية تسمح بتغيير لون الخلفية للصفحة‬ ‫‪bgcolor‬‬
‫مسئولة عن تحديد اتجاه قراءة النص من اليمين‬
‫‪dir‬‬
‫إلى الشمال أو العكس‬
‫مسئولة عن تحديد صورة للصفحة بدل عن اللون‬ ‫‪background‬‬
‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫‪id‬‬
‫سواء من نفس الملف أو من ملف خارجي من‬
‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬

‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫‪Class‬‬
‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬

‫تحديد اللون الساسي للنص‬ ‫‪text‬‬
‫‪28‬‬
‫تحديد لون الربط أو الوصلة التشعبية‬ ‫‪link‬‬
‫تحديد لون الربط أو الوصلة التشعبية التي تم‬ ‫‪vlink‬‬
‫زيارتها‬
‫تحديد لون الربط أو الوصلة التشعبية عند النقر‬ ‫‪alink‬‬
‫عليها‬
‫‪ -1‬ستتعرف على ‪ id‬و ‪ Class‬بشكل اكثر في في الجزء‬
‫الثاني من الكتاب والذي يتكلم عن ‪CSS‬‬
‫‪ -2‬هناك الكثير من الخصائص الموجودة في اغلب الوسوم‬
‫ول يمكن شرحها في الوقت الحالي لن استخدامها يتطلب‬
‫بمعرفة في الجافا سكربت تالجزء الثالث من الكتاب( وهناك‬
‫خصائص ليست مهما كثيرا سوف اقوم بتجاهلها في هذا‬
‫الكتاب‬
‫‪29‬‬
‫مثال على الوسم ‪:body‬‬
‫قمنا في هذا المثال بتغيير لون الخلفية إلى الل‪TT‬ون الزرق وقمن‪TT‬ا أيض‪TT‬ا‬
‫بتحديد اتجاه النص م‪T‬ن الش‪TT‬مال إل‪TT‬ى اليمي‪TT‬ن حي‪TT‬ث تمث‪TT‬ل القيم‪TT‬ة ‪ltr‬‬
‫شمال م يمين و ‪ rtl‬يمين م شمال‬
‫‪30‬‬
‫مثال أخر لتغيير الخلفيةم‪:‬‬
‫قمنا في هذا المثال بتغيير اللون إلى صورة الخلفية كما ف‪TT‬ي المث‪TT‬ال‬
‫حيث قمنا بكتابة الخاصية ‪ background‬ثم كتبنا ت=( ثم اسم الص‪TT‬ورة‬
‫مع امتدادها بين علمتي تنصيص " ‪” pic.jpg‬‬
‫‪31‬‬
‫>‪<br/‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <br/‬هو وسم مختص بعمل سطر جديد بحيث إذا أردت أن‬
‫تنزل سطر جديد فقط استخدم الوسم >‪ <br/‬كما أن الوسم يتكون‬
‫من زوج وحيد فقط‬
‫ل توجد خصائص أو ‪ Attributes‬لهذا الوسم‬
‫‪32‬‬
‫>‪<h1><h2><h3><h4><h5><h6‬‬ ‫الوسم )‪(Tag‬‬
‫هذا الوسم مخصص للعناوين بحيث إذا أردت أن تكتب عنوان معين‬
‫تستطيع من خلل هذا الوسم أن تضع عنوان المقالة بين وسمي‬
‫>‪</h1‬عنوان المقالة>‪ <h1‬بحيث تمثل >‪ <h1‬أكبر حجم‬
‫للعنوان و>‪ <h6‬أصغر حجم للعنوان‬

‫هذه الخاصية مسئولة عن تحديد محاذاة العنوان‬ ‫‪align‬‬
‫عن اليمين‪-‬الوسط‪-‬الشمال‬
‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬
‫الوسم نفسه‬ ‫‪style‬‬

‫‪33‬‬
34
35
‫>‪<font‬‬ ‫الوسم )‪(Tag‬‬
‫وسم س‪ <font></font‬يتحكم في الخطوط م‪TT‬ن حي‪TT‬ث الن‪TT‬وع وحج‪TT‬م و‬
‫لون الخط‬
‫هذه الخاصية تسمح بتحديد نوع الخط ويمكن‬ ‫‪face‬‬
‫تحديد اكثر من نوع خط‬
‫هذه الخاصية تسمح بتحديد لون الخط‬ ‫‪Color‬‬
‫هذه الخاصية تسمح لك بتغيير حجم الخط وتأخذ‬ ‫‪Size‬‬
‫القيمة من ‪ 1‬إلى ‪ 7‬حيث واحد اصغر حجم و ‪7‬‬
‫اكبر حجم‬

‫‪36‬‬
‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫‪Style‬‬
‫الوسم نفسه‬
‫‪37‬‬
‫>‪<b‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <b> </b‬اختصار إلى ت‪ (bold‬مخصص للخط الغامق‬


‫‪38‬‬
39
‫>‪<i‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <i> </i‬اختصار إلى ت‪ (italic‬مخصص للخط المائل‬


‫‪40‬‬
41
‫>‪<u‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <u> </u‬هو اختصار إلى ت‪ (under line‬وهو الخط الذي يوضع‬
‫اسفل الكلمة أو الجملة‬



‫‪42‬‬
43
‫>‪<strong‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <strong> </strong‬هو نفس الوسم س‪ <b‬وهو مخصص للخط‬
‫الغامق‬


‫‪44‬‬
45
‫>‪<em‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <em> </em‬هو نفس الوسم س‪ <i‬وهو مخصص للخط المائل‬


‫‪46‬‬
47
‫>‪<sup‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <sup> </sup‬اختصار إلى ت‪ (super‬وهو عبارة عن الخط‬
‫المرتفع‬


‫‪48‬‬
49
‫>‪<sub‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <sub> </sub‬وهو عبارة عن الخط المنخفض‬


‫‪50‬‬
51
‫>‪<big‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <big> </big‬وهو عبارة عن الخط الكبير‬


‫‪52‬‬
53
54
‫>‪<small‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <small> </small‬وهو عبارة عن الخط الصغير‬


‫‪55‬‬
56
‫>‪<strike‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <strike> </strike‬وهو عبارة عن الخط المشطوب‬


‫‪57‬‬
58
‫>‪<s‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <s> </s‬وهو نفس الوسم >‪ <strike‬الخط المشطوب‬


‫‪59‬‬
60
‫>‪<tt‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <tt> </tt‬هذا الوسم عبارة عن الخط الموحد ألة الطباعة‬


‫‪61‬‬
62
‫يمكن استخدام عدة وسوم مع بعضها البعض في مقط‪TT‬ع‬
‫واحد مع مراعاة عدم تداخل الوسمة مع بعض‪TT‬ها بطريق‪TT‬ة‬
‫خاطئه‬
‫‪63‬‬
‫أسئلة الفصل الثاني‬
‫‪-1‬غير لون صفحة الويب من اللون البيض إلى اللون الخضر‬
‫بالطريقتين ؟‬
‫‪-2‬ماهي وظيفية الوسم >‪<font‬؟‬
‫‪ -3‬ماهي وظيفية الوسم >‪<h‬؟‬
‫‪ -4‬ماهي وظيفية الوسم >‪<b‬؟‬
‫‪-5‬ماهي وظيفية الوسم >‪<i‬؟‬
‫‪-6‬ماهي وظيفية الوسم >‪<u‬؟‬
‫‪-7‬ماهي وظيفية الوسم >‪<small‬؟‬
‫‪-8‬ماهي وظيفية الوسم >‪<big‬؟‬
‫‪-9‬ماهي وظيفية الوسم >‪<tt‬؟‬
‫‪-10‬ماهي وظيفية الوسم >‪<s‬؟‬
‫‪64‬‬
‫‪-11‬‬
‫ما‬
‫هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬
‫‪-12‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬
‫‪65‬‬
‫الفصل الثالث‬
‫الفقرات والقوائم ‪Paragraphs and lists‬‬

‫في هذا الفصل سوف نتعرف على الوسوم الخاصة في الفقرات‬
‫والقوائم‬
‫>‪<p‬‬ ‫الوسم )‪(Tag‬‬

‫وسم >‪ <p> </p‬اختصار إلى ‪ Paragraph‬وهذا الوسم هو لعمل‬
‫فقرة مستقلة او عدة فقرات مستقلة عن بعضها‬


‫‪66‬‬
‫لتحديد محاذاة الفقرة إما من اليمين أو الوسط‬ ‫‪align‬‬
‫أو الشمال‬
‫لتحديد اتجاه قراءة النص من اليمين إلى الشمال‬ ‫‪dir‬‬
‫أو العكس‬
‫‪67‬‬
‫لحظ أخي القارئ أننا عن‪TT‬دما اس‪TT‬تخدمنا الوس‪TT‬م >‪ < p‬ل‪TT‬م نس‪TT‬تخدم‬
‫معه الوس >‪<br/‬للنزول إلى سطر جديد هذا يدل على أن الوسم‬
‫>‪ <p‬قام بتنسيق وترتيب الفقرة بنفسه‬
‫‪68‬‬
‫>‪<blockquote‬‬ ‫الوسم )‪(Tag‬‬
‫>‪ < blockquote‬وه‪TT‬و وس‪TT‬م الفق‪TT‬رات‬
‫وس‪TT‬م >‪</blockquote‬‬
‫المقتبسة وظيفتها تمييز الفقرات من خل إضافة هامش على يمين‬
‫الفقرة أو شمالها وتستطيع وضع عدة أوسمة مع بعض في حال‬
‫إدراج هوامش‬

‫لتحديد اتجاه قراءة النص من اليمين إلى الشمال‬ ‫‪dir‬‬
‫أو العكس‬
‫‪69‬‬
70
‫>‪<pre‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <pre> </pre‬اختصار إلى ت‪ (Preformated‬أي المنسق مسبقا‬
‫وظيفة هذا الوسم التحكم في مسافات بين الجمل والكلمات وحتى‬
‫الحرف‬


‫‪71‬‬
72
‫>‪<center‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ < center> </center‬هذا الوسم هو لتوسيط الفقرات أي جعل‬
‫النصوص في الوسط‬


‫‪73‬‬
74
‫القوائم ‪Lists‬‬
‫القوائم في ‪ HTML‬هي لترتيب البيانات في قوائم وهناك نوعان من‬
‫القوائم وهمام‪:‬‬
‫‪ -1‬القوائم التسلسليةم‪ :‬وتحتوي على الرقام النجليزية والرقام‬
‫الرومانية والحرف النجليزية الصغيرة والكبيرة‬
‫‪-2‬القوائم الغير التسلسليةم‪ :‬وتحتوي على الرموز فقط مثل مربعات و‬
‫دوائر صغيرة وغيره من الرموز‬
‫‪75‬‬
‫>‪<ol‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <ol> </ol‬وهي عبارة عن القوائم التسلسلية‬


‫هذا الخاصية تسمح بتحديد نوع القائمة‬ ‫‪type‬‬
‫التسلسلية هل هي أرقام أو أحرف‬

‫هذا الخاصية تسمح للقائمة التسلسلية البدء‬ ‫‪start‬‬
‫من أي رقم أو حرف‬
‫‪76‬‬
‫في هذا المثال قمنا بتعريف الوسم >‪ < ol‬وقمنا بتحدي‪TT‬د ن‪TT‬وعه ‪ 1‬أي‬
‫أرقام انجليزية وعرفنا الخاصية ‪ start‬وتعني أن تبدأ من الرق‪TT‬م ‪ 3‬ولك‪TT‬ن‬
‫إذا كنت تلحظ فإنه ل يوجد أي نتيجة والسبب في ذلك لم نس‪TT‬تخدم‬
‫الوسم >‪ <li‬وهذا الوسم مسئول عن تحديد البنود‬
‫‪77‬‬
‫>‪<li‬‬ ‫الوسم ت‪(Tag‬‬
‫وسم >‪ <li> </li‬هذا الوسم يوضع بين وسمي >‪ <ol></ol‬وهو‬
‫مسئول عن تحديد بنود القائمة التسلسلية والغير تسلسلية‬


‫هذا الخاصية تسمح بتحديد نوع القائمة‬ ‫‪type‬‬
‫التسلسلية هل هي أرقام أو أحرف‬

‫هذا الخاصية تسمح للقائمة التسلسلية البدء‬ ‫‪start‬‬
‫من أي رقم أو حرف‬
‫‪78‬‬
‫وقمنا بتحديد الخاصية >‪ <ol‬في هذا المثال قمنا بتعريف الوسم ‪ type‬و ‪ start‬وتأخذ‬
‫القيمة واحد ثم بعد ذلك قمنا بتعريف الوسم >‪ <li‬وقمنا بتعريف البنود كما في‬
‫المثال‬
‫‪79‬‬
‫أمثلة أخرى‬
‫‪80‬‬
81
82
‫في المثلة السابقة استخدمنا الرقام والحروف عن طري‪TT‬ق الخاص‪TT‬ية‬
‫‪ type‬التي تسمح لك بتحدي‪TT‬د ن‪TT‬وع القائم‪TT‬ة م‪TT‬ن أرق‪TT‬ام عربي‪TT‬ة و أرق‪TT‬ام‬
‫الرومانية أو حروف انجليزية‬
‫‪83‬‬
‫>‪<ul‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <ul> </ul‬وهي عبارة عن القوائم الغير التسلسلية‬


‫هذا الخاصية تسمح بتحديد نوع القائمة من رموز‬ ‫‪type‬‬
‫مختلفة‬
‫‪84‬‬
‫الوسم>‪<li‬يستخدم في القوائم التسلسلية والغير‬
‫التسلسلية‬
‫‪85‬‬
86
‫في المثلة السابقة استخدمنا الرموز عن طريق الخاصية ‪ type‬التي‬
‫تسمح لك بتحديد نوع القائمة برموز كالدوائر والمربعات‬
‫‪87‬‬
‫يمكن عمل قائمة مكونة من وسمين>‪ <ol‬و س‪ <ul‬لعمل‬
‫قائمة احترفيه‬
‫‪88‬‬
‫قوائم التعريفات ‪Definition Lists‬‬
‫هناك نوع من القوائم تسمى بقوائم التعريفات عندما نريد إدراج قائمة‬
‫من التعريفات مثل مصطلح معين وتعريف هذا المصطلح أو قائمة من‬
‫المصطلحات فهناك ثلث أوسمة مختصة بذلك وهيم‪:‬‬
‫أولم‪:‬‬
‫>‪<dl‬‬ ‫الوسم )‪(Tag‬‬

‫وسم >‪ <dl> </dl‬هذا الوسم مخصص لتعريف بداية ونهاية قائمة‬
‫المصطلحات أو التعريفات‬

‫‪89‬‬

‫ثانيا‪:‬‬
‫>‪<dt‬‬ ‫الوسم )‪(Tag‬‬

‫وسم >‪ <dt></dt‬هذا الوسم مخصص لتعريف لتعريف مصطلح‬
‫القائمة‬

‫‪90‬‬
‫ثالثاًم‪:‬‬
‫>‪<dd‬‬ ‫الوسم )‪(Tag‬‬

‫وسم س‪ <dd></dd‬هذا الوسم هو لتعريف المصطلح أو شرحه‬


‫‪91‬‬
92
‫أسئلة الفصل الثالث‬
‫‪ -1‬ما وظيفة الوسم >‪<p></p‬؟‬
‫‪ -2‬ما وظيفة الوسم س‪<pre></pre‬؟‬
‫‪ -3‬ما هي وظيفية القوائم وكم نوع؟‬
‫‪ -4‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق‬
‫من خلل الوسمة التي تعلمته في هذا الفصل فقط؟‬

‫‪93‬‬
‫‪94‬‬
‫الفصل الرابع‬
‫وسوم خاصة ‪Special tags‬‬
‫الصور ‪Images‬‬
‫>‪<img‬‬ ‫الوسم )‪(Tag‬‬

‫وسم >‪ <img‬هو وسم مخصص لدراج صورة في صفحة الويب‬

‫‪95‬‬
‫هذه الخاصية لتحديد مسار الصورة‬ ‫‪src‬‬
‫تحديد ارتفاع الصورة‬ ‫‪height‬‬
‫تحديد عرض الصورة‬ ‫‪width‬‬
‫تحديد نصاً ي‪i‬هر عند مرور الماوس على الصورة‬ ‫‪alt‬‬
‫إضافة إطار للصورة‬ ‫‪border‬‬
‫لتحديد المسافة العمودية الفاصلة بين النص‬ ‫‪Vspace‬‬
‫والحافتين العليا والسفلى للصورة‬
‫لتحديد المسافة الفقية الفاصلة بين النص‬ ‫‪Hspace‬‬
‫والحافتين اليمنى واليسرى للصورة‬
‫هذه الخاصية تسمح تقسيم الصورة إلى عدة‬ ‫‪usemap‬‬
‫روابط في نفس الصورة‬
‫تحديد مسار الصورة‬
‫يوجد ثلث طرق لتحديد مسار الصورةم‪:‬‬
‫الطريقة الولى‪ :‬أن تكون الصورة وصفحة الويب ‪ HTML‬كلهما في‬
‫مجلد واحد وهنا تكون طريقة استدعاء مسار الصورة كالتاليم‪:‬‬
‫‪96‬‬
‫>"‪<img src="pic.png‬‬
‫هنا قمنا بتعرف الوسم الخاص لدراج الصورة ثم عرفنا الخاصية‬
‫)‪(src‬لتحديد مسار الصورة بعد ذلك كتبنا اسم الصورة مع امتداده‬
‫الطريقة الثانية‪:‬أن تكون الصورة موجودة في مجلد متفرع عن‬
‫المجلد الموجود التي فيها صفحة ‪ HTML‬وهنا تكون طريقة الستدعاء‬
‫مسار الصورة كما في الصورة التاليةم‪:‬‬
‫هنا نقوم بكتابة اسم المجلد تتبعها الرمز "لم ثم اسم الصورة مع‬
‫المتداد‬
‫الطريقة الثالثة‪ :‬أن تكون مجلد صفحة الويب في مكان ومجلد‬
‫الصورة أيضا في مكان أخر في هذه الحالة تكون طريق الستدعاء كما‬
‫في الصورة التاليةم‪:‬‬

‫‪97‬‬
‫نكتب "‪..‬م لتوجيه المتصفح للخروج من المجلد الى المجلد ‪images‬‬
‫حيث توجد الصورة‬
‫‪98‬‬
99
‫في هذا المثال قمنا بتعريف الوسم ث‪TT‬م عرفن‪TT‬ا الخاص‪TT‬ية ت‪ (src‬لتحدي‪TT‬د‬
‫مس‪TT‬ار الص‪TT‬ورة بع‪TT‬د ذل‪TT‬ك كتبن‪TT‬ا اس‪TT‬م الص‪TT‬ورة م‪TT‬ع المت‪TT‬داد ث‪TT‬م عرفن‪TT‬ا‬
‫الخاصية ت‪ ( height‬لتحديد ارتفاع الصورة بت‪ ( pixel‬وفي الخير حددنا‬
‫الخاصية ت‪ (width‬لتحديد عرض الصورة بت‪(pixel‬‬
‫يمكن تحديد عرض الصورة بالمئوية بدل ً من ت‪(pixel‬‬
‫‪100‬‬
101
102
103
‫الروابط ‪Links‬‬
‫تستخدم الروابط للوصول إلى صفحة معينة في نفس الويب أو إلى‬
‫موقع أخر ‪.‬‬
‫>‪<a‬‬ ‫الوسم )‪(Tag‬‬

‫وسم >‪ < a> </a‬وهو اختصار إلى )‪ ( anchor‬لدراج رابط وهذا الوسم‬
‫ل يعمل لوحده بل تتطلب اضافة خاصية مسئولة عن توجيه الصفحة‬
‫وهي )‪(href‬‬


‫‪104‬‬
‫هذه الخاصية مسئولة عن توجيه الرابط إلى‬ ‫‪href‬‬
‫صفحة معينة في نفس الموقع أو إلى موقع أخر‬

‫هذه الخاصية لتوجيه الرابط في نفس الصفحة‬ ‫‪name‬‬
‫اربع طرق لتعريف الروابط‬
‫الطريقة الولى‪ :‬هي توجيه الرابط إلى موقع أخر‬
‫‪105‬‬
‫في هذا المث‪TT‬ال قمن‪TT‬ا بتعري‪TT‬ف الوس‪TT‬م >‪ < a‬و أض‪TT‬فنا الخاص‪TT‬ية ت‪(href‬‬
‫لدراج الرابط بحيث تكون الصيغة تن‪(href="http://www.google.com‬ث‪TT‬م‬
‫كتبنا الكلمة الدللية بين وسمي >‪<a></a‬وهي ‪google‬‬
‫‪106‬‬
‫الطريقة الثانية‪:‬توجيه الرابط إلى صفحة معينة من نفس الموقع‬
‫‪107‬‬
‫في هذا المثال قمنا بإنشاء صفحتين الصفحة الولى هي‬
‫)‪ (index.html‬والصفحة الثانيةت‪ (whous.html‬في مجلد واحد بعد ذلك‬
‫في صفحة ت‪ (index.html‬قمنا بتعريف الوسمس‪ <a‬وأضفنا الخاصية‬
‫)‪ (href‬بالصغية التاليةت ن‪ (href="whous.html‬للوصول إلى صفحة‬
‫)‪ (whous.html‬وعند الضغط على الرابط سوف يقوم بتحويلك إلى‬
‫الصفحة التي قمت بتحديده وهيت‪.(whous.html‬‬
‫‪108‬‬
‫الطريقة الثالثة‪ :‬إضافة رابط للصورة لتوجيهها إلى موقع أخر أو‬
‫صفحة معينة في نفس الموقع‬
‫‪109‬‬
‫في هذا المثال قمنا بتعريف الوسم س‪ <a‬وأضفنا الخاصية ت‪(href‬‬
‫لتوجيهها إلى صفحة في نفس الموقع وبعد ذلك لم نكتب الكلمة‬
‫الدللية بل قمنا بإضافة الوسم >‪ <img‬الخاص بإدراج الصور لتكون‬
‫الصورة هي الدللية للصفحة‬
‫الطريقة الرابعة‪:‬توجيه رسالة لعنوان إيميل ت‪ (Email‬بحيث عند‬
‫النقر عليه يقوم بإظهار برنامج البريد اللكتروني‬
‫‪110‬‬
‫في هذا المثال قمنا بتعريف الوسم س‪ <a‬وأضفنا الخاصية ت‪(href‬‬
‫لتوجيه ‪ email‬بالصيغة التاليةم‪:‬‬
‫)“‪(href="mailto:mohammad200610022@gmail.com‬‬
‫‪111‬‬
‫خرائط الصور‬
‫وهي عبارة عن أكثر من رابط في صورة واحدة فقط يتم تقسيم‬

‫الصورة فيها يتم تقسيم الصورة كما في الصورةم‪:‬‬
‫‪112‬‬
‫شرح التقسيمم‪:‬‬
‫وه‪TT‬و ش‪TT‬كل ال‪TT‬دائرة يتك‪TT‬ون م‪TT‬ن الح‪TT‬داثي الس‪TT‬يني‬ ‫‪circle‬‬

‫والصادي ونصف القطر ت‪(X,Y,Radius‬‬
‫وهو شكل المستطيل يتك‪TT‬ون م‪TT‬ن الح‪TT‬داثي الس‪TT‬يني‬ ‫‪rect‬‬
‫للرك‪TT‬ن أعل‪TT‬ى اليس‪TT‬ار ث‪TT‬م الح‪TT‬داثي الص‪TT‬ادي ل‪TT‬ه ث‪TT‬م‬
‫الح‪TT‬داثي الس‪TT‬يني للرك‪TT‬ن المقاب‪TT‬ل أدن‪TT‬ى اليمي‪TT‬ن ث‪TT‬م‬
‫الحداثي الصادي ت‪(X1,Y1,X2,Y2‬‬
‫وهو شكل المضلع يمكنك رسم ع‪TT‬دة قط‪TT‬ع مس‪TT‬تقيمة‬ ‫‪poly‬‬
‫وتك‪TTT‬ون إح‪TTT‬داثياته عب‪TTT‬ارة ع‪TTT‬ن الح‪TTT‬داثي الس‪TTT‬يني‬
‫والصادي لنقطة الولى ثم الثانية وهكذا‬
‫)‪(X1,Y1,X2,Y2,X3,Y3,X4,Y4,....Xn,Yn‬‬
‫>‪<map‬‬ ‫الوسم )‪(Tag‬‬

‫وسم >‪ <map></map‬هذا الوسم هو لوضع الرسومات على الصورة‬
‫هذا الخاصية تستدعي تنفيذ الخاصية ‪usemap‬‬ ‫‪name‬‬
‫الموجودة في الوسم >‪<img‬‬
‫‪113‬‬
‫>‪<area‬‬ ‫الوسم )‪(Tag‬‬
‫وسم >‪ <area‬هو وسم لرسم الشكل المحدد في الصورة‬
‫من خلل هذا الوسم يمكن تحديد الشكل من‬ ‫‪Shape‬‬
‫الشكال التى شرحناها قبل قليل‬

‫هذه الخاصية لتحديد النقط لرسم الشكل في‬ ‫‪coords‬‬
‫الصورة‬
‫تحديد نصاً ي‪i‬هر عند مرور الماوس على الصورة‬ ‫‪alt‬‬
‫‪114‬‬
‫في هذا المثال قمنا بتعريف الوسم >‪ <img‬وعرفنا الخاصية )‪(src‬‬
‫لتحديد مسار الصورة ثم عرفنا الخاصية ت‪ (usemap‬لتحديد التقسيم‬
‫‪115‬‬
‫في الصورة إلى عدة روابط وأعطيناها اسم ت‪ (#image‬بعد ذلك كتبنا‬
‫الوسم >‪ <map‬لتهيئة التقسيم في الصورة وعرفنا الخاصية )‪(name‬‬
‫من أجل تنفيذ التقسيم بعد ذلك كتبنا الوسم س‪ <area‬للبدء‬
‫بالتقسيم الصورة إلى عدة أقسام‬
‫تقسيم الويب‬
‫>‪<div‬‬ ‫الوسم )‪(Tag‬‬

‫وسم س‪ <div></div‬هذا الوسم مخصص لتقس‪TT‬يم ج‪TT‬زء م‪TT‬ن الص‪TT‬فحة‬
‫أو عدة أجزاء لعطائه بعض الخصائص باستخدام ‪ CSS‬كإض‪TT‬افة ل‪TT‬ون أو‬
‫تغيير الخط أو إضافة حواف وعند تعريف الوس‪TT‬م ف‪TT‬ي الص‪TT‬فحة ف‪TT‬إنه ل‬
‫ي‪i‬هر تأثيره في الصفحة إل بعد استخدام ‪CSS‬‬

‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫‪class‬‬
‫‪116‬‬

‫هذه الخاصية مسئولة عن تحديد محاذاة >‪<div‬‬ ‫‪align‬‬
‫عن اليمين‪-‬الوسط‪-‬الشمال‬
‫‪117‬‬
‫>‪<hr‬‬ ‫الوسم )‪(Tag‬‬
‫>‪ <hr‬هذا الوسم اختصار إلى ‪ Horizontal Rule‬أو المسطرة الفقية‬
‫يستخدم لتسطير الصفحة من أجل تقسيمها‬


‫لتحديد سمك المسطرة‬ ‫‪size‬‬
‫لتحديد عرض المسطرة اما بت‪ (pixel‬أو‬ ‫‪width‬‬
‫بالمئويةت‪(%‬‬
‫لتحديد المحاذاة للمسطرة سواء من اليمين أو‬ ‫‪align‬‬
‫الوسط أو الشمال‬
‫لدراج لون للمسطرة‬ ‫‪color‬‬
‫لجعل خط المسطرة غير غائر‬ ‫‪noshade‬‬
‫‪118‬‬
119
120
‫>‪<embed‬‬ ‫الوسم )‪(Tag‬‬
‫>‪ <embed‬هذا الوسم يستخدم لتشغيل الفيديوهات والفلشات‬
‫والصوات على المتصفح‬
‫لتحديد مسار الفيديو أو الفلش من أجل تشغيله‬ ‫‪src‬‬
‫على المتصفح‬
‫لتحديد ارتفاع المشغل‬ ‫‪height‬‬
‫لتحديد عرض المشغل‬ ‫‪width‬‬
‫لتحديد موصفات المشغل‬ ‫‪type‬‬
‫‪121‬‬
122
‫>‪<marquee‬‬ ‫الوسم )‪(Tag‬‬
‫>‪ < marquee></marquee‬ه‪TT‬ذا الوس‪TT‬م للن‪TT‬ص المتح‪TT‬رك وه‪TT‬و ش‪TT‬بيه‬
‫بالشريط المتحرك الذي ي‪i‬هر في الخبار‬
‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫‪style‬‬
‫لتحديد لون للشريط المتحرك‬ ‫‪Bigcolor‬‬
‫لتحديد ارتفاع الشريط‬ ‫‪height‬‬
‫لتحديد عرض الشريط‬ ‫‪width‬‬
‫لتحديد المحاذاة سواء من اليمين أو الوسط أو‬ ‫‪align‬‬
‫الشمال‬
‫لتحديد سلوك النص المتحرك وتأخذ ثلث قيم م‪:‬‬ ‫‪behavior‬‬
‫‪1-scroll‬‬
‫تيتحرك النص بنفس التجاه من الجانب إلى‬
‫الخر بصورة مستمرة وهي الحالة الفتراضية(‬
‫‪123‬‬
‫‪2-slide‬‬
‫تيتحرك النص مرة واحدة من الجانب إلى الخر(‬
‫‪3-alternate‬‬
‫تيتحرك النص جيئة وذهابا من جانب إلى أخر(‬
‫لتحديد سير اتجاه النص في الشريط وتأخذ القيم‬ ‫‪direction‬‬
‫التاليةم‪:‬‬
‫‪1-rtl‬‬
‫تمن اليمين إلى الشمال في اللغة العربية(‬
‫‪2-ltr‬‬
‫تمن الشمال إلى اليمين في اللغة النجليزية(‬
‫لتحديد عدد المرات الذي يتحرك بها النص وتأخذ‬ ‫‪loop‬‬
‫قيم عددية إذا اردت أن يتحرك النص بعدد ل‬
‫نهائي نستخدم ‪ 1-‬أو ‪infiniti‬‬
‫لتحديد المسافة بين كل لقطة وأخرى للنص‬ ‫‪scrollamount‬‬
‫وتأخذ قيم عددية صحيحة‬
‫لتحديد المسافة الزمنية الذي يستغرقه النص‬ ‫‪scrolldelay‬‬
‫في القفز بين كل خطوة وأخرى وتأخذ قيم عددية‬
‫ولكنها تمثل بالميلي ثانية‬
‫‪124‬‬
125
‫أسئلة الفصل الرابع‬
‫‪ -1‬كم طريقة لتحديد مسار الصورة مع الشرح لكل طريقة ؟‬
‫‪-2‬كم طريقة للضافة رابط مع الشرح لكل طريقة؟‬
‫‪ -3‬ما هو الوسم >‪<div‬؟‬
‫‪126‬‬
‫الفصل الخامس‬
‫الجدوال ‪Tables‬‬
‫تعد الجداول من أهم المواضيع في ‪ HTML‬فمن خلل الجداول‬
‫تستطيع ترتيب وتن‪i‬يم صفحة الويب إذا كانت تحتوي على معلومات‬
‫كثيرة وتعتبر الجداول مهمة جدا في أي موقع فأغلب المواقع تحتوي‬
‫على الجداول وطريقة إضافة وسوم الخاصة بالجداول سهلة سأقوم‬
‫بشرحها بالتفصيل حتى ل يصعب المر عليك‬
‫شرح الوسوم‬
‫وسم تعريف الجدول‬ ‫>‪<table></table‬‬
‫وسم تعريف الصف في الجدول ويكون‬ ‫>‪<tr></tr‬‬
‫بين وسمي س‪<table></table‬‬

‫وسم تعريف الخلية للصف في الجدول‬ ‫>‪<td></td‬‬
‫ويكون بين وسمي س‪<tr></tr‬‬
‫‪127‬‬
‫>‪<table‬‬ ‫الوسم )‪(Tag‬‬
‫>‪ < table></table‬ه‪TT‬ذا الوس‪TT‬م لتعري‪TT‬ف الج‪TT‬دول وب‪TT‬دون ه‪TT‬ذا ال‪TT‬وس‬
‫ليمكن تعرف الصفوف والخليا في الجدول‬


‫مسئولة عن تحديد اتجاه قراءة النص من اليمين‬ ‫‪dir‬‬
‫إلى الشمال أو العكس في الجدول‬

‫لتحديد عرض الجدول أما بت‪(pixel‬أو بالمئويةت‪(%‬‬ ‫‪width‬‬
‫لتحديد المحاذاة للجدول سواء من اليمين أو‬ ‫‪align‬‬
‫لدراج لون للجدول‬ ‫‪bgcolor‬‬
‫‪128‬‬
‫لدراج صورة للجدول‬ ‫‪background‬‬
‫‪ CELLSPACING‬لتحديد المسافة بين كل خلية وأخرى‬
‫‪ CELLPADDING‬تحديد الهوامش لخليا الجدول‬
‫>‪<tr‬‬ ‫الوسم )‪(Tag‬‬

‫>‪ < tr></tr‬هذا الوسم لتعري‪TT‬ف الج‪TT‬دول وب ‪T‬دون ه‪TT‬ذا الوس‪TT‬م ليمك‪TT‬ن‬
‫تعرف الصفوف والخليا في الجدول‬



‫لتغيير لون الصف في الجدول‬ ‫‪bgcolor‬‬
‫لضافة صورة في الصف‬ ‫‪background‬‬
‫تحديد المحاذاة للجدول سواء من اليمين أو‬ ‫‪align‬‬
‫‪129‬‬
‫الوسط أو الشمال وتأخذ القيم‬
‫)‪(right, centre, left‬‬
‫تحدي‪TTT‬د المح‪TTT‬اذاة للج‪TTT‬دول س‪TTT‬واء م‪TTT‬ن ف‪TTT‬وق أو‬ ‫‪VALIGN‬‬
‫المنتصف أوتحت وتأخذ القيم‬
‫)‪(top, middle, bottom‬‬
‫>‪<td‬‬ ‫الوسم )‪(Tag‬‬

‫>‪<td></td‬هذا الوسم لضافة خليا داخل الصف في الجدول‬


‫لتحديد عرض الجدول أما بت‪(pixel‬أو بالمئويةت‪(%‬‬ ‫‪width‬‬
‫‪130‬‬
‫لتحديد المحاذاة للجدول سواء من اليمين أو‬ ‫‪align‬‬
‫لدراج لون للجدول‬ ‫‪bgcolor‬‬
‫لدراج صورة للجدول‬ ‫‪background‬‬
‫لدمج أكثر من خلية في الصف الواحد‬ ‫‪colspan‬‬
‫لدمج أكثر من صف في الجدول‬ ‫‪rowspan‬‬
‫‪131‬‬
132
‫في ه‪TT‬ذا المث‪TT‬ال قمن‪TT‬ا ب‪TT‬إدراج ج‪TT‬دول وعرفن‪TT‬ا الخاص‪TT‬ية ‪ border‬لرس‪TT‬م‬
‫حواف أو اطار للجدول ثم بعد ذلك عرفنا بعض الخصائص بع‪TT‬دها عرفن‪TT‬ا‬
‫الوسم >‪ < tr‬لدراج صف في الجدول وعرفنا بعض الخصائص كم‪TT‬ا ه‪TT‬و‬
‫موجود في المثال ثم بعد ذلك عرفنا الوس‪TT‬م >‪ < td‬لدراج خلي‪TT‬ا ف‪TT‬ي‬
‫الصف وعرفنا بعض الخصائص لها‬
‫‪133‬‬
‫ف‪TT‬ي ه‪TT‬ذا المث‪TT‬ال قمن‪TT‬ا بتعري‪TT‬ف ف‪TT‬ي الص‪TT‬ف الث‪TT‬اني الخاص‪TT‬ية ‪colspan‬‬
‫وأعطيناها القيمة ‪ 2‬بحيث يقوم بدمج خليتن في صف واحد‬
‫‪134‬‬
‫في هذا المثال قمنا بتعريف في الصف الول الخاصية ‪rowspan‬‬
‫وأعطيناها القيمة ‪ 2‬بحيث يقوم بدمج صفين‬
‫>‪<caption‬‬ ‫الوسم )‪(Tag‬‬

‫>‪<caption></caption‬هذا الوسم لضافة عنوان للجدول ويكتب بين‬
‫وسمي س‪<table></table‬‬

‫‪135‬‬
136
‫أمثلة على الجداول‬
‫‪137‬‬
138
139
140
‫أسئلة الفصل الخامس‬
‫‪-1‬ما هي الوسوم لبناء جدول في الويب؟‬
‫‪141‬‬
‫‪142‬‬
‫الفصل السادس‬
‫الطارات ‪Frames‬‬
‫الطار هو باختصار تقسيم صفحة الويب إلى عدة أقسام في صفحة‬

‫واحدة بحيث كل قسم يحتوي على صفحة ويب خاص به‪.‬‬
‫>‪<frameset‬‬ ‫الوسم )‪(Tag‬‬

‫>‪<frameset></frameset‬هذا الوسم لضافة إطار في صفحة الويب‬
‫وهنا عليك أن تلحظ عند إضافة وسم >‪ <frameset‬يجب عليك‬
‫استبدال الوسم >‪ <body‬بالوسم >‪ <setframe‬وإل لن ي‪i‬هر أي إطار‬
‫في الصفحة‬
‫هذه الخاصية لتحديد عدد العمدة وأحجامها في‬ ‫‪cols‬‬
‫الطار وتأخذ القيمة إما بالمئوية أو البيكسل‬

‫هذه الخاصية لتحديد عدد الصفوف وأحجامها في‬ ‫‪rows‬‬
‫الطار وتأخذ القيمة إما بالمئوية أو البيكسل‬

‫‪143‬‬
‫هذه الخاصية لتحديد ظهور أو أخفاء الطار من‬ ‫‪frameborder‬‬
‫الصفحة‬
‫>‪<frame‬‬ ‫الوسم )‪(Tag‬‬

‫>‪<frame></frame‬هذا الوس‪TT‬م لض‪TT‬افة مس‪TT‬ار الص‪TT‬فحة أو ص‪TT‬ورة م‪TT‬ن‬
‫خلل الخاصية ‪ src‬في صفحة الويب‬
‫هذه الخاصية تسمح بتحديد مسار الصفحة أو‬ ‫‪src‬‬
‫الصورة‬
‫لتحديد التنسيق بين الطارات و أسلوب عرضها‬ ‫‪name‬‬
‫لتحديد مقدار المسافة الفارغة للهوامش‬ ‫‪marginheight‬‬
‫السفلي والعلوي‬
‫تحديد مقدار المسافة الفارغة للهوامش اليمين‬ ‫‪marginwidth‬‬
‫والشمال‬
‫هذه الخاصية لتحديد أشرطة المتصفح وتأخذ‬ ‫‪scrolling‬‬
‫ثلث قيمم‪:‬‬
‫)ي‪i‬هر شريط المتصفح(‪1-scrolling=yes‬‬
‫)ل ي‪i‬هر شريط المتصفح(‪2-scrolling=no‬‬
‫)ي‪i‬هر تلقائي من نفسه(‪3-scrolling=auto‬‬
‫هذه الخاصية تسمح بعدم التحكم في حجم‬ ‫‪noresize‬‬
‫الطار من تكبير أو تصغير‬
‫‪144‬‬
‫أمثلة على الطارات‬
‫ةت‬TT‫ ( والثاني‬frame1.html‫ىت‬TT‫ ( الول‬HTML) ‫فحات‬TT‫اء ثلث ص‬TT‫ا بإنش‬TT‫قمن‬

> ‫ف‬TTT‫ا بتعري‬TTT‫ث قمن‬TTT‫( بحي‬framemain.html‫رةت‬TTT‫ ( والخي‬frame2.html
(cols‫ية ت‬TT‫ا الخاص‬TT‫ك عرفن‬TT‫د ذل‬TT‫ ( بع‬framemain.html) ‫ي‬TT‫ < ف‬frameset
145
‫لتحديد كم عمود للصفحة حي‪T‬ث ك‪T‬ل عم‪T‬ود يمث‪TT‬ل ص‪TT‬فحة واح‪T‬دة بع‪T‬دها‬
‫أضفنا الوسمين من >‪<frame‬وم‪TT‬ن خلل الخاص‪TT‬ية ‪ src‬ح‪TT‬ددنا ص‪TT‬فحتين‬
‫لكل الوس‪TTT‬مين وعن‪TTT‬د التنفي‪TTT‬ذ ن‪TTT‬رى ان الص‪TTT‬فحتين ت‪(frame1.html‬وت‬
‫‪ (frame2.html‬تم عرضهما في صفحة ت‪(framemain.html‬‬
‫‪146‬‬
‫قمنا في هذا المثال بتقسيم الصفحة عن طريق الخاصية ‪ cols‬إلى‬
‫ثلث أعمدة بحيث كل عمود يحتوي على صفحة مع تحديد مسار‬
‫الصفحة لها من خلل الخاصية ‪ src‬التي بداخل الوسم س‪<frame‬‬
‫‪147‬‬
‫هذا المثال نفس نفس السابق ولكن الختلف فيه هو قمنا بتعريف‬
‫الخاصية ‪ rows‬ويعني هذا تقسيم الصفحة إلى ثلث صفوف كما في‬
‫المثال‬
‫في هذا المثال قمنا بتعريف الخاصية ‪ cols‬وأعطيناها القيمة‬

‫)*‪ (30%,‬حيث أن العمود الول يأخذ مساحة ‪ 30%‬من مساحة‬
‫الصفحة أما العلمة ت*(فتعني خذ باقي مساحة الصفحة المتبقية أي‬
‫‪148‬‬
‫يعني أن مساحة الصفحة هي‪ 100%‬ففي العمود الول يأخذ ‪30%‬‬
‫والعمود الثاني يأخذ ‪ %70‬وهكذا‬
‫المثال واضح ل يحتاج إلى شرح حاول أن تشرحه بنفسك كاختبار‬
‫‪149‬‬
‫بسيط لك‬
‫‪150‬‬
‫في هذا المثال قمنا بتعريف اثنين من الوسم س‪ <frmaeset‬الول قمنا‬
‫بتعريف الخاصية ‪ rows‬وأعطيناها القيمة ت*‪ (30%,‬أي أن الصف الول‬
‫يأخذ مساحة ت‪(30%‬والصف الثاني يأخذ باقي المساحة المتبقية من‬
‫حجم الصفحة ثم بعد ذلك أضفنا الوسم >‪ <frame‬داخل >‪<frameset‬‬
‫الولى وحددنا ‪ src‬لها بعد ذلك قمنا بإضافة >‪ <frameset‬ثاني داخل‬
‫>‪ <frameset‬الول وحددنا الخاصية ‪ cols‬مع القيم ت‪ (20%,60%‬أي‬
‫أن الصف الثاني يتكون من عمودين بعد ذلك أضفنا وسمين >‪<frame‬‬
‫وقمنا بتحديد ‪ src‬لهما‬
‫أتمنى أن يكون الشرح واضح‬
‫‪151‬‬
‫الخاصية ‪name‬‬
‫الخاصية ‪ name‬تعتبر من أهم الخصائص التي تأتي من الوسم‬
‫>‪ <frame‬هذه الخاصية تسمح لك بجلب وعرض الصفحة في الطار‬
‫مع بقاء جميع الطارات موجوده وهي شبيه الوصلت التشعبية أو‬
‫الروابط لحد ما إل أن الروابط عند الضغط عليه يقوم بفتح وعرض‬
‫الصفحة في نافذه جديدة من المتصفح بعكس الطار كما في المثال‬
‫التاليم‪:‬‬
‫‪152‬‬
(frma1.html ‫تصفحة‬
153
‫صفحة ت‪(frame2.html‬‬
‫ف‪TTTT‬ي ه‪TTTT‬ا المث‪TTTTT‬ال قمن‪TTTT‬ا بإنش‪TTTTT‬اء ص‪TTTTT‬فحتين الول اس‪TTTTT‬ميناهت‬

‫‪(frame1.html‬الص‪TTT‬فحة الثاني‪TTT‬ة أس‪TTT‬ميناه ت‪ ( frame2.html‬الص‪TTT‬فحة ت‬
‫‪ ( frame1.htm‬في السطر ‪ 13‬أض‪TT‬فنا الخاص‪TT‬ية ‪ name‬إل‪TT‬ى الوس‪TT‬م >‬
‫‪<frame‬في الصفحة ت‪ (frame2.html‬قمنا بإضافة رابط ف‪TT‬ي الص‪TT‬فحة و‬
‫وهذا الرابط يوصلك إلى الصفحة )‪ ( src=frame1.html‬وعرفنا الخاص‪TT‬ية‬
‫‪ target‬وأعطيناه‪TT‬ا نف‪TT‬س القيم‪TT‬ة الموج‪TT‬ودة ف‪TT‬ي الوس‪TT‬م ‪ frame‬ف‪TT‬ي‬
‫الص‪TT‬فحة ت‪ (frame1.html‬وه‪TT‬ي )‪(pic‬بع‪TT‬د التنفي‪TT‬ذ عن‪TT‬د الض‪TT‬غط عل‪TT‬ى‬
‫الصورة سوف ت‪i‬ه‪TT‬ر ص‪TT‬فحة ‪ fram1.html‬ف‪TT‬ي الط‪TT‬ار ال‪TT‬ذي يوج‪TT‬د في‪TT‬ه‬
‫صفحة ‪ frame2.html‬وهكذا‬
‫‪154‬‬
‫أسئلة الفصل السادس‬
‫‪ -1‬ما هي الطارات؟‬
‫‪ -2‬ما هي وظيفة الخاصية ت‪ (rows‬في الوسم س‪<frameset‬مع مثال‬
‫‪ -3‬ما هي وظيفة الخاصية ت‪ (cols‬في الوسم س‪<frameset‬مع مثال‬
‫‪ -4‬ما هي وظيفة الوسم س‪<frame‬‬
‫‪ -5‬ما هي وظيفة الخاصية ت‪ (name‬في الوسم س‪<frame‬مع مثال‬
‫‪155‬‬
‫في السئلة ‪6‬و ‪7‬و ‪ 8‬ليس شرطا ان يكون حجم العمدة‬
‫والصفوف دقيقية المهم ان تكون نفس النتيجة‬
‫‪156‬‬
‫الفصل السابع‬
‫النماذج ‪forms‬‬
‫إن النماذج مهمة جدا في تصميم الموقع واكاد اجزم بإن النماذج تكاد‬
‫ل تخلو من المواقع الويب وذلك لهميتها في التفاعل مع الموقع‬
‫وصاحبه من جهة والزوار من جهة اخرى كعملية تسجيل في منتدي‬
‫او إضافة تعليقات ‪....‬الخ‬
‫أشكال النماذج‬
‫لضافة نص من خلل الوسم‬ ‫‪text‬‬

‫>”‪<input type=”text‬‬
‫لضافة كلمة سر من خلل‬ ‫‪password‬‬
‫الوسم‬
‫>”‪<input type=”password‬‬
‫‪157‬‬
‫للختيار الواحد فقط حيث أن‬ ‫‪Radio button‬‬
‫‪ radio‬تسمح لك باختيار خيار‬
‫واحد فقط من خلل الوسم‬
‫>”‪<input type=”radio‬‬
‫للختيار المتعدد حيث أن‬ ‫‪checkbox‬‬
‫‪ checkbox‬يسمح لك باختيار‬
‫أكثر من خيار واحد من خلل‬
‫الوسم‬
‫>”‪<input type=”checkbox‬‬
‫لرفع الملفات من خلل الوسم‬ ‫‪file‬‬
‫>”‪<input type=”file‬‬
‫الزر يمكن أن يقوم بأكثر من‬ ‫‪submit‬‬
‫عملية كحفظ او ارسال بيانات‬
‫‪...‬الخ من خلل الوسم‬
‫>”‪<input type=”submit‬‬
‫نفس ‪submit‬‬ ‫‪button‬‬
‫لضافة نصوص أو تعليقات‬ ‫‪textarea‬‬

‫وهي شبيه ب ‪ textarea‬الخاصة‬
‫بالفيس بوك أو تويتر من خلل‬
‫الوسم س‪<textarea></textarea‬‬
‫وتسمى القائمة المنسدلة‬ ‫‪select‬‬
‫وتسمح لك باختيار خيار واحد‬
‫أو أكثر من خلل الوسم‬
‫>‪<select></select‬‬
‫‪158‬‬
‫هن‪TT‬اك اض‪TT‬افات ك‪TT‬ثيره ف‪TT‬ي ‪ HTML5‬بخص‪TT‬وص ‪forms‬‬
‫وسوف تتعرف عليها ف‪TT‬ي الج‪TT‬زء الث‪TT‬اني م‪TT‬ن الكت‪TT‬اب إن‬
‫شاء ا‬
‫>‪<form‬‬ ‫الوسم )‪(Tag‬‬

‫>‪ <form></form‬حتى تضيف الشكال السابقة من النماذج وتعمل‬
‫بشكل صحيح يجب أن تتم بين وسمي ‪form‬‬
‫ه‪TT‬ذه الخاص‪TT‬ية تح‪TT‬دد العن‪TT‬وان ال‪TT‬ذي س‪TT‬وف يت‪TT‬م‬ ‫‪action‬‬
‫ارس‪TT‬ال بيان‪TT‬ات النم‪TT‬وذج الي‪TT‬ه س‪TT‬واء ك‪TT‬انت ص‪TT‬فحة‬
‫خاصة مبنية بلغة برمجة خاصة أو ايميل‬
‫هذه الخاصية تحدد الطريقة التى سيتم بها‬ ‫‪method‬‬
‫التعامل من العنوان المحدد في الخاصية السابقة‬
‫‪ action‬وتأخذ قيمتين وهمام‪:‬‬
‫‪get -1‬م‪ :‬تستخدم في حال إذا كانت عملية‬

‫المعالجة داخلية أي تتم داخل السيرفر‬
‫‪post-2‬م‪ :‬تستخدم في حال إذا كانت عملية‬

‫المعالجة خارجية كإرسال بيانات الى اليميل مثل‬
‫هذه الخاصية مهمة جدا وهي تحدد طريقة‬ ‫‪enctype‬‬
‫‪159‬‬
‫الترميز التى سيتم ارسال البيانات ولديها‬
‫طريقتين لتحديد الترميز‬
‫‪text/plain-1‬‬
‫‪application/x-www-form-urlencoded-2‬‬
‫‪160‬‬
161
‫>‪<Input‬‬ ‫الوسم )‪(Tag‬‬
‫>‪<Input‬وهو الوسم الذي يعرف شكل النماذج من خلل الخصائص‬
‫التابعة لهذا الوسم‬
‫هذه الخاص‪TT‬ية مس‪TT‬ئولة ع‪TT‬ن تحدي‪TT‬د ش‪TT‬كل ال‪TT‬ذي‬ ‫‪type‬‬
‫ي‪i‬هر في الوسم س‪ <Input‬سواء كان زر أو نص أو‬
‫متعدد الختيار ‪...‬الخ‬
‫والشكال هيم‪:‬‬
‫‪text-1‬‬
‫‪password-2‬‬
‫‪hidden-3‬‬
‫‪radio-4‬‬
‫‪checkbox-5‬‬
‫‪submit-6‬‬
‫‪reset-7‬‬
‫‪button-8‬‬
‫طبع‪TT‬ا ه‪TT‬ذه الش‪TT‬كال فق‪TT‬ط ف‪TT‬ي ‪ HTML4‬وهن‪TT‬اك‬
‫اضافات كثيرة في ‪HTML5‬‬
‫هذه الخاص‪TT‬ية لتحدي‪TT‬د اس‪TT‬م حق‪TT‬ل للوس‪TT‬م حي‪TT‬ث‬ ‫‪name‬‬
‫تمكنك هذه الخاص‪TT‬ية م‪TT‬ن اس‪TT‬تخدام ه‪TT‬ذا الحق‪TT‬ل‬
‫في البرمجة بلغات متقدمة مثل ‪PHP‬‬
‫لتعيين قيمة للحقل يمكن استخدامها كتوضيح‬ ‫‪value‬‬
‫ما هو هذا الحقل مثل كلمة المرور‬
‫لتحديد حجم الحقل‬ ‫‪size‬‬
‫‪162‬‬
‫لتحديد الحد القصي من عدد الحروف في النص‬ ‫‪maxlength‬‬
‫لتحديد ارتفاع الحقل اذا كان ‪ type‬هو ‪ text‬أو‬ ‫‪height‬‬
‫‪password‬‬
‫لتحديد طول الحقل‬ ‫‪width‬‬
‫لتحديد الختيار الفتراضي اذا كان ‪ type‬هو ‪radio‬‬ ‫‪checked‬‬
‫أو ‪checkbox‬‬


‫تستخدم هذه الخاصية من أجل وصف او‬ ‫‪placeholder‬‬
‫المساعدة م‪TT‬اذا المس‪TT‬تخدم س‪TT‬وف يكت‪TT‬ب داخ‪TT‬ل‬
‫هذا الحقل اذا كان ‪ type‬هو ‪text, password‬‬
‫‪163‬‬
‫في هذا المثال قمنا بتعريف الوسم س‪ <form‬و ايضا قمنا بتعريف‬
‫الوسم س‪ <input‬ثلث مرات كل مرة لها خاصية مختلفة وهم‬
‫‪ text, password, radio‬وقمنا بتحديد الخواص التابعة لهم وهي‬
‫مشروحة فوق يمكنك الرجوع اليها‬
‫‪164‬‬
165
‫الفرق بين ‪ radio‬و ‪checkbox‬‬
‫‪checkbox‬‬ ‫‪radio‬‬
‫‪ -1‬تستطيع اختيار خيار واحد من ‪ -1‬تستطيع اختيار خيار واحد أو‬

‫أكثر من عدة اختيارات‬ ‫عدة اختيارات‬
‫‪ -2‬تكون اسماء الحقول موحدة‬ ‫‪ -2‬تكون اسماء الحقول موحدة‬

‫والقيم ايضا موحدة‬ ‫والقيم مختلفة‬
‫‪166‬‬
167
‫>‪<select‬‬ ‫الوسم )‪(Tag‬‬
‫>‪ <select></select‬وهو وسم القائمة المنسدلة تستطيع اختيار اكثر‬
‫من اختيار في القائمة وحتى يعمل الوسم س‪ <select‬ويجب كتابة‬
‫وسميس‪ <option> </option‬بين وسمي س‪ <select‬اي هكذا‬
‫>‪<select‬‬
‫>‪</option‬العنصر الول>‪<option‬‬
‫>‪</option‬العنصر الثاني>‪</option‬‬
‫>‪</select‬‬
‫لن وسم س‪ <option‬هو مسئول عن تحديد العناصر في الوسم‬
‫لتحديد حجم القائمة المنسدلة‬ ‫‪size‬‬

‫تسمح لك بالختيار المتعدد عن طريق الضغط‬ ‫‪multiple‬‬
‫باستمرار على زر ‪ Ctrl‬ثم تحديد العناصر‬
‫‪168‬‬

‫>‪<option‬‬ ‫الوسم )‪(Tag‬‬

‫>‪ <option></option‬هذا الوسم مسئول عن إضافة العناصر في‬
‫القائمة المنسدلة وبدونه ليمكن عرض العناصر في القائمة‬
‫وتعني الختيار الفتراضي لول عنصر في القائمة‬ ‫‪selected‬‬
‫المنسدلة سوف ي‪i‬هر‬

‫لعطاء قيمية لكل عنصر‬ ‫‪value‬‬

‫‪169‬‬
‫>‪<optgroup‬‬ ‫الوسم )‪(Tag‬‬

‫>‪ <optgroup></optgroup‬هذه الوسم ايضا يوضع بين وسمي‬
‫>‪ <select‬وهو شبيه بالوسم س‪ <option‬ولكن الختلف بينهما وهو‬
‫أن الوسم س‪ <optgroup‬يقوم بجعل القائمة المنسدلة تحتوع على‬
‫مجموعات لها س‪ <option‬خاصة عن الخرى‬
‫تستخدم لعطاء اسم للمجموعة‬ ‫‪label‬‬

‫‪170‬‬
‫عند الضغط علىها سوف تفتح القائمة المنسدلة كما في الصور التالية‬
‫‪171‬‬
172
‫المثال هذا شبيه بالمثال السابق ولكن الختلف في هذا المثال‬
‫‪173‬‬
‫استخدمنا الخاصية ‪ size‬لتكبير حجم القائمة المنسدلة‬
‫في هذا المثال استخدمنا الخاصية ‪ multiple‬والتي تسمح لك باختيار‬
‫‪174‬‬
‫أكثر من خيار واحد بالضغط باستمرار على زر ‪Ctrl‬‬
‫‪175‬‬
‫ف‪TT‬ي ه‪TT‬ذا المث‪TT‬ال اس‪TT‬تخدمنا الوس‪TT‬م س‪ <optgroup‬م‪TT‬ن اج‪TT‬ل تص‪TT‬نيف‬
‫القائمة المنسدلة كما في المثال‬
‫>‪<textarea‬‬ ‫الوسم )‪(Tag‬‬

‫>‪ <textarea></textarea‬وهو شبيه بالحقل النصي العادي ‪ text‬ال انه‬
‫يحتوي على خصائص تجعله افضل من ‪ text‬العادي وهو يستخدم‬
‫لكتابة التعليقات أو الرسائل كما في الفيس بوك أو تويتر‬

‫‪176‬‬
‫لتحديد العرض‬ ‫‪cols‬‬
‫لتحدي الرتفاع‬ ‫‪rows‬‬
‫لتحديد طريقة اللتفاف النص في ‪ textarea‬وتأخذ‬ ‫‪warp‬‬
‫قيمتينم‪:‬‬
‫‪soft-1‬م‪ :‬وهي الفتراضية اي عند ارسال معلومات‬
‫في ‪ textarea‬اكثر من سطر تلن يلتف على عدة‬
‫اسطر(سوف تكون عبارة عن سطر واحد عند‬
‫المستقبل‬
‫‪hard-2‬م‪ :‬اي عند ارسال معلومات في ‪textarea‬‬
‫اكثر من سطر تسيلتف على عدة اسطر(سوف‬
‫تكون كما هي منسقة في ‪ textarea‬اي اذا كانت‬
‫ثلث اسطر سوف ترسل الى المستقبل ثلث‬
‫اسطر وهكذا‬
‫لجعل ‪ textarea‬للقراءة فقط‬ ‫‪readonly‬‬
‫‪177‬‬
178
‫وسم ‪fieldset‬‬
‫>‪<fieldset‬‬ ‫الوسم )‪(Tag‬‬

‫>‪ <fieldset></fieldset‬يس‪TT‬تخدم ه‪TT‬ذا الوس‪TT‬م ع‪TT‬ادة ل‪TT‬ترتيب العناص‪TT‬ر‬
‫المشتركة مع بعض عل‪TT‬ى س‪TT‬بيل المث‪TT‬ال معلوم‪TT‬ات ال‪TT‬دخول والعناص‪TT‬ر‬
‫المشتركة في معلومات الدخول هي اسم المستخدم وكلم‪TT‬ة الم‪TT‬رور‬
‫ويتم تسمية المجموعة من خلل الوسم س‪<legend‬‬
‫‪179‬‬
‫>‪<legend‬‬ ‫الوسم )‪(Tag‬‬
‫>‪<legend></legend‬وهو الوسم المسئول عن تسمية المجموعة‬
‫التي تحتوي على عناصر مشتركة ويتم كتابة الوسم بين وسمي‬
‫>‪<fieldset‬‬
‫>‪ </legend‬اسم المجموعة>‪<legend‬‬
‫>‪</fieldse‬‬
‫‪180‬‬
‫في هذا المثال عرفنا الوسم س‪ <fieldset‬ثم عرفنا الوسم س‪<legend‬‬
‫بين وسمي س‪ <fieldset‬وذلك من أجل تسمية المجموعة التى فيها‬
‫عناصر مشتركة وقمنا بتسمية المجموعة ‪Admin Login‬‬
‫‪181‬‬
‫أسئلة الفصل السابع‬
‫‪ -1‬ما هي فائدة استخدام النماذج ت‪ (forms‬؟‬
‫‪ -2‬ما هو الوسم س‪ <form‬مع شرح الثلث الخصائص المهمة ؟‬
‫‪ -3‬ما هو الوسم س‪ <input‬مع شرح خاصية ‪ type‬مع مثال ؟‬
‫‪ -4‬ما هو الوسم س‪ <select‬مع مثال ؟‬
‫‪ -5‬ما هو الوسم س‪ <textarea‬مع مثال؟‬
‫‪ -6‬ما هو الوسم س‪ <fieldset‬و الوسم س‪ <legend‬مع مثال ؟‬
‫‪182‬‬
‫‪ -8‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬
‫‪183‬‬
‫ملح‪i‬ةم‪ :‬لي‪TT‬س ش‪TT‬رط اض‪TT‬افة الل‪TT‬وان كم‪TT‬ا موج‪TT‬ودة ف‪TT‬ي‬
‫الصورة في الفورم سوف تتعلم كيفية إضافة اللوان في‬
‫الفصل التاسع والذي يتكلم عن ‪CSS‬‬
‫‪184‬‬
‫الفصل الثامن‬
‫الميتا والرموز ‪meta and symbols‬‬
‫>‪<mate‬‬ ‫الوسم )‪(Tag‬‬

‫>‪ <meta‬هو عبار عن وسم ين‪TT‬درج ض‪TT‬من ص‪TT‬فحات ال‪TT‬ويب يكت‪TT‬ب بي‪TT‬ن‬
‫وسمي س‪ <head><head‬في اعلى الصفحة يستخدم لوص‪TT‬ف الموق‪TT‬ع‬
‫أو الص‪TT‬فحة م‪TT‬ن حي‪TT‬ث المحت‪TT‬وي والكلم‪TT‬ات الرئيس‪TT‬ية أو المفتاحي‪TT‬ة‬
‫والمؤل‪TT‬ف وغيره‪TT‬ا م‪TT‬ن الم‪TT‬ور وتفي‪TT‬د ف‪TT‬ي عميل‪TT‬ة التص‪TT‬نيف م‪TT‬ن قب‪TT‬ل‬
‫محركات البحث وكل هذا يتم من خلل الخصائص التي تتوفر في‬
‫>‪ <meta‬حيث يمكن ادارج أكثر من وسم س‪ <meta‬لتحديد المور‬
‫لتحديد خصائص الصفحة ككل وتأخذ القيمة‬ ‫‪equiv‬‬
‫‪ content-type‬وهي تعني تحديد نوع المحتوى‬
‫لتحدي‪TT‬د عن‪TT‬وان وح‪TT‬دة البيان‪TT‬ات ال‪TT‬تي نري‪TT‬د تعيي‪TT‬ن‬ ‫‪name‬‬
‫قيمها وتأخذ القيمم‪:‬‬
‫‪keyword -1‬م‪ :‬من أجل تحديد الكلمات المفتاحية‬
‫‪description -2‬م‪ :‬لوصف الصفحة‬
‫‪author-3‬م‪ :‬لدارج اسم صاحب الموقع‬
‫‪copyright-4‬م‪:‬لحفظ الحقوق الملكية‬
‫‪185‬‬
‫لتحديد المحتوى التي نريد اسنادها للخاصتين‬ ‫‪content‬‬
‫السابقتين‬
‫تس‪TT‬تخدم لتحدي‪TT‬د ترمي‪TT‬ز الص‪TT‬فحة ال‪TT‬تي س‪TT‬يتم‬ ‫‪charset‬‬
‫عرض الصفحة كاللغة العربية أو النجليزية و‪.‬ال‪TT‬خ‬
‫ويفضل استخدام الترميز ‪ UTF-8‬لنه يقب‪TT‬ل اللغ‪TT‬ة‬
‫العربية والنجليزية ولغات أخرى‬
‫‪186‬‬
187
‫الرموز‬
‫هناك رموز في ‪ HTML‬تكتب بصغية معينة وليس بصغيتها العادية‬

‫باستخدام الوسوم مثل رمز أكبر س او أصغر < أو @ ‪...‬الخ هذه كلها‬
‫رموز تكتب في ‪ HTML‬بصغية معينة كما هو موضح‬
‫‪188‬‬
189
190
191
192
193
‫أسئلة الفصل الثامن‬
‫‪ -1‬ما هو الوسم س‪<meta‬‬
‫‪ -2‬اشرح الخاصية ‪ name‬في الوسم س‪<meta‬‬
‫‪ -3‬اشرح الخاصية ‪ charset‬في الوسم س‪<meta‬‬
‫‪ -4‬اشرح الخاصية ‪ content‬في الوسم س‪<meta‬‬
‫‪194‬‬
‫الفصل التاسع‬
‫‪CSS‬‬
‫ماهي ‪CSS‬‬
‫هي اختصار إلى )‪ ( Cascading Style Sheets‬هي "ليست لغه برمجه" ولكنها‬
‫تقنية تهتم بتحديد شكل وتصميم المواقع ‪ ،‬وينطبق ذلك على اللوان والخطوط‬
‫والصور والخلفيات التي تستخدم فى الصفحات ‪ ،‬بمرونة وسهولة تامه ‪.‬‬
‫ماهي فوائد)‪(CSS‬‬
‫‪ -1‬فصل محتويات الموقع عن التصميم ‪ ،‬والتحكم بجميع الصفحات من خلل ملف واحد‬
‫بامتداد م‪(.css‬‬
‫‪ -2‬إضافة مزيد من الحترافية والسهولة لتصميم المواقع‬
‫‪ -3‬لن ترهقك بعد اليوم طلبات العملء والتعديلت الكثيرة التى يطلبوها ويروها سهله‬
‫ولكنك تراها مرهقه مع كثرة العمال‪.‬‬
‫‪195‬‬
‫‪ -4‬تقليل حجم صفحات الموقع‪ ،‬مما يعني أن المستخدم سيقضي وقتا ً أقل لكي تظهر له‬
‫صفحات الموقع بشكل كامل‪.‬‬
‫طرق تعريف ت‪ (CSS‬داخل الصفحات‬
‫يوجد ثلث طرق لتعريف ‪:CSS‬‬
‫‪-1‬توجد عدة ط‪TT‬رق لتعري‪TT‬ف خص‪TT‬ائص ‪ CSS‬داخ‪TT‬ل الص‪TT‬فحات والك‪TT‬ثر‬

‫إستخداماً و هو عمل ملف نصي منفصل وتسميته بإي أسم المهم ان‬
‫يكون بالمتداد ‪ css‬يحتوى على كافة التنسيقات ويت‪TT‬م ربط‪TT‬ة ب‪TT‬الموقع‬
‫وتسمي هذه الطريقة‪.( External) :‬‬
‫‪196‬‬
‫‪-2‬الطريقة الثانية هو ان تطبق خصائص ال‪ CSS T‬مباشرة في أوسمة‬
‫‪ HTML‬وتسمى هذه الطريقة )‪(in-line‬‬
‫‪197‬‬
‫‪-3‬الطريقة الخيرة وفيها يت‪TT‬م إض‪TT‬افة جمي‪TT‬ع خص‪TT‬ائص ‪ CSS‬ف‪TT‬ي أعل‪TT‬ى‬
‫الصفحة بين وسمين لتعريفهم على المتصفح وتسمي هذه الطريقة‬
‫)‪ (Internal‬ومنه تطبق هذه الوامر على جميع فقرات الصفحة‬
‫‪198‬‬
‫>‪<link‬‬ ‫الوسم )‪(Tag‬‬
‫>‪ <link‬هذا الوسم يكتب في أعلى الص‪TT‬فحة بي‪TT‬ن وس‪TT‬مي س‪<head‬‬
‫وظيفته الساسية هي ربط ملفات خارجية مع صفحة ال‪TT‬ويب الخ‪TT‬اص‬
‫بك مثل ملفات ‪CSS‬‬
‫لتحديد مسار الملف وطريقة تعريف المسار نفس‬ ‫‪href‬‬
‫طريقة تعريف مس‪TT‬ار الص‪TT‬ورة ف‪TT‬ي الوس‪TT‬مس‪<img‬‬
‫*راجع الوسم س‪ <img‬إذا نسيت‬
‫لتحديد العلقة بين الوثيقة الحاليةت صفحة ال‪TT‬ويب‬ ‫‪rel‬‬
‫الحالي‪TT‬ة( والمس‪TT‬تند المرتب‪TT‬ط معاه‪TT‬ات مل‪TT‬ف ‪(CSS‬‬
‫وفي حالة ملفات ‪ CSS‬نكتب م‪:‬‬
‫”‪rel=”stylesheet‬‬
‫لتحديد نوع الوثيقةتملف ‪ (CSS‬وفي حالة ملف‪TT‬ات‬ ‫‪type‬‬
‫‪ CSS‬نكتبم‪:‬‬
‫”‪type=”text/css‬‬
‫‪199‬‬
‫طريقة تحديد‪CSS‬‬
‫يمكن تحديد ‪ CSS‬باستخدام الخاصية ت‪ (id‬أو الخاصية ت‪(class‬‬

‫أو الخاصية ت‪ (style‬وهذه الخصائص موجودة في الوسمة ‪.‬‬
‫• ملح‪i‬ات عند استخدام الخاصيةت‪ (id‬و ت‪:(class‬‬
‫‪-1‬عند تعريف الخاص‪TT‬ية ت‪ (id‬ف‪TT‬ي الوس‪TT‬م يج‪TT‬ب أن نق‪TT‬وم بإعط‪TT‬ائه‬

‫اسم تاي اسم يدل على معنى( حتى تعود اليه في حال نسيته‬
‫الوظيفة لهذا ت‪ (id‬وكذلك الحال مع الخاصية ت‪(class‬يجب أن نقوم‬
‫بإعطائه اسم‬
‫‪ -2‬طريقة استدعاء ت‪ (id‬و ت‪ (class‬للوسم في ح‪TT‬ال اذا ك‪TT‬ان مل‪T‬ف‬

‫‪ CSS‬في نف‪TT‬س الص‪TT‬فحة ال‪TT‬ويب أو مل‪TT‬ف خ‪TT‬ارجي تك‪T‬ون بالطريق‪TT‬ة‬
‫التاليةم‪:‬‬
‫في الخاصية ت‪ (id‬نقوم بتعريف الرمز ت‪ (#‬ثم اسم‬

‫)‪(id‬‬
‫في الخاصية ت‪ (class‬نقوم بتعريف الرمز ت‪ (.‬ثم اسم‬

‫)‪(class‬‬
‫‪200‬‬
‫في هذا المثال قمنا بتعريف الخاصية ت‪(id‬و اعطين‪TT‬اه اس‪TT‬م ‪ text‬وبع‪TT‬د‬
‫ذلك عرفنا ملف ‪ CSS‬داخل الصفحة وقمنا بتعريف اس‪TT‬م ت‪ (id‬مس‪TT‬بوق‬
‫بالرمز ت‪ (#‬داخل ‪ CSS‬واعطيناه اللون الزرق من خلل الخاصية ‪color‬‬
‫‪201‬‬
‫في ه‪TT‬ذا المث‪TT‬ال قمن‪TT‬ا بتعري‪TT‬ف الخاص‪TT‬ية ت‪(class‬و اعطين‪TT‬اه اس‪TT‬م ‪text‬‬
‫وبعد ذلك عرفنا ملف ‪ CSS‬داخل الصفحة وقمنا بتعري‪TT‬ف اس‪TT‬م ت‪(class‬‬
‫مس‪TT‬بوق ب‪TT‬الرمز ت‪ (.‬داخ‪TT‬ل ‪ CSS‬واعطين‪TT‬اه الل‪TT‬ون الزرق م‪TT‬ن خلل‬
‫‪202‬‬
‫الخاصية ‪color‬‬
‫خصائص ‪CSS‬‬
‫جميع خصائص ‪ CSS‬تعمل عل‪TT‬ى جمي‪TT‬ع الوس‪TT‬وم ت‪ (Tags‬ويمك‪TT‬ن‬

‫تحديد ‪ CSS‬من خلل تعريف الوسم نفسه أو من الخاص‪TT‬ية ‪ id‬أو‬
‫‪ class‬أو ‪style‬‬
‫‪background‬‬
‫‪background-color‬‬ ‫)‪(CSS‬‬
‫تسمح لك بإضافة لون لخلفية الصفحة أو لوسم محدد ‪...‬الخ ويمكن‬
‫تعري‪TT‬ف الل‪T‬ون بطريقت‪T‬ن ت‪T‬م ذكرهم‪TT‬ا ف‪T‬ي الفص‪T‬ل الث‪TT‬اني م‪T‬ن الكت‪TT‬اب‬
‫يمكنك الرجوع الى الفصل الثاني‬
‫‪203‬‬
‫قمن‪TT‬ا بتغيي‪TT‬ر ل‪TT‬ون الص‪TT‬فحة م‪TT‬ن خلل الخاص‪TT‬ية ‪Background-color‬‬
‫للوسم ‪ body‬مباشرة بدون استخدام الخاصية ‪ id‬أو ‪class‬‬
‫‪204‬‬
205
206
‫قمنا بتغيير الل‪T‬ون للوس‪T‬م س‪ <div‬م‪T‬ن خلل ‪ id‬حي‪T‬ث عرفن‪T‬ا اس‪TT‬م ‪id‬‬
‫داخ‪TTT‬ل ‪ css‬وعرفن‪TTT‬ا الخاص‪TTT‬ية ‪ background-color‬واعطيناه‪TTT‬ا الل‪TTT‬ون‬
‫الخضر‬
‫‪207‬‬
‫قمنا بتغيير اللون للوس‪TT‬م س‪ <div‬م‪T‬ن خلل ‪ class‬حي‪T‬ث عرفن‪TT‬ا اس‪TT‬م‬
‫‪ class‬داخل ‪ css‬وعرفنا الخاصية ‪ background-color‬واعطيناها الل‪TT‬ون‬
‫الصفر‬
‫‪background-image‬‬ ‫)‪(CSS‬‬
‫تسمح لك بإض‪TT‬افة ص‪TT‬ورة ب‪TT‬دل م‪TT‬ن الل‪TT‬ون للص‪TT‬فحة أو لوس‪T‬م مح‪TT‬دد‬
‫‪...‬الخ ويمكن تعريف مسار الصورة بنف‪TT‬س الطريق‪TT‬ة ال‪TT‬تى يت‪TT‬م تعري‪TT‬ف‬
‫مسار الصورة في الوسم س‪<img‬‬
‫*راجع الوسم س‪<img‬‬
‫‪208‬‬
209
‫قمنا بإضافة صورة للص‪TT‬فحة م‪TT‬ن خلل الخاص‪TT‬ية ‪Background-image‬‬
‫للوسم ‪ body‬حيث عرفنا ‪ url‬ثم مسار الصورة والسم‬
‫‪background-repeat‬‬ ‫)‪(CSS‬‬
‫تسمح لك ه‪TT‬ذه الخاص‪TT‬ية بتك‪TT‬رار أو ع‪TT‬دم تك‪TT‬رار الص‪TT‬ورة ف‪TT‬ي الص‪TT‬فحة‬
‫عمودياً و افقياً أو كلهما وتأخذ القيم التاليةم‪:‬‬
‫تكرار الصورة عمودياً و أفقياً ‪1-repeat:‬‬
‫عدم تكرار الصورة عمودياً و أفقياً ‪2-no-repeat:‬‬
‫تكرار الصورة عمودياً فقط ‪3-repeat-x:‬‬
‫تكرار الصورة أفقياً فقط ‪4-repeat-y:‬‬
‫‪210‬‬
211
Background-image ‫ية‬TT‫ن خلل الخاص‬TT‫فحة م‬TT‫قمنا بإضافة صورة للص‬
‫ا‬TT‫ا قمن‬TT‫م وايض‬TT‫ ثم مسار الصورة والس‬url ‫ حيث عرفنا‬body ‫للوسم‬
background-repeat ‫ن خلل‬TT‫فحة م‬TT‫ي الص‬TT‫ورة ف‬TT‫رار الص‬TT‫ع تك‬TT‫بمن‬
no-repeat ‫وأعطيناه القيمة‬
background-position (CSS)
:‫تسمح لك هذه الخاصية بتغيير موضع الصورة أو مكانها وتأخذ القيم م‬
1-left
2-right
3-top
4-bottom
5-center
:‫ويمكن أن تأخذ أكثر من قيمة مثلم‬
background-position: left top;
background-position: right top;
background-position: left bottom;
background-position: right bottom;
background-position: center top;
background-position: center bottom;
212
213
‫ف‪TT‬ي الس‪TT‬طر العاش‪TTT‬ر ح‪TTT‬ددنا موض‪TT‬ع أو مك‪TTT‬ان الص‪TTT‬ورة م‪TTT‬ن خلل الخاص‪TTT‬ية‬
‫‪ background-position‬وأعطيناها قيمتين ت‪ (left top‬أي مكان الصورة في اعلى‬
‫جهة اليسار ويمكنك تخصيص قيمة واحدة بدل من القيمتين‬
‫‪background‬‬ ‫)‪(CSS‬‬
‫هذه الخاصية تسمح لك بكتابة جميع خصائص ‪ backround‬في س‪TT‬طر‬
‫واحد فقط للختصار أي بدل من أن تكتب م‪:‬‬
‫;‪background-color:red‬‬
‫;)”‪background-image:url(“pic/small.png‬‬
‫;‪background-repeat:no-repeat‬‬
‫;‪background-position:left top‬‬
‫في أكثر من سطر يمكنك كتابتهم من خل قيمهم في سطر واحد‬
‫باستخدام الخاصية ‪background‬‬
‫‪214‬‬
215
‫كما تلحظ في المثال عرفنا جمي‪TT‬ع الخص‪TT‬ائص م‪TT‬ن خلل قيمه‪TT‬م ف‪TT‬ي‬
‫سطر واحد من خلل الخاصية ‪background‬‬
‫‪color‬‬
‫‪color‬‬ ‫)‪(CSS‬‬
‫تسمح ل‪TT‬ك ه‪TT‬ذه الخاص‪TT‬ية بتخص‪TT‬يص ل‪TT‬ون للنص‪TT‬وص وويمك‪TT‬ن تعري‪TT‬ف‬
‫اللون بطريقت‪TT‬ن ت‪TT‬م ذكرهم‪TT‬ا ف‪TT‬ي الفص‪TT‬ل الث‪TT‬اني م‪T‬ن الكت‪TT‬اب يمكن‪TT‬ك‬
‫الرجوع الى الفصل الثاني‬
‫‪216‬‬
217
‫‪Text‬‬
‫‪text-align‬‬ ‫)‪(CSS‬‬
‫تسمح ل‪TT‬ك ه‪TT‬ذه الخاص‪TT‬يةبمحاذة النص‪TT‬وص م‪TT‬ن اليمي‪TT‬ن أو الوس‪TT‬ط أو‬
‫الشمال أو جعل السطر متساوية وتأخذ القيم التاليةم‪:‬‬
‫)يمين(‪1-right‬‬
‫)وسط(‪2-center‬‬
‫)شمال(‪3-left‬‬
‫)السطر متساوية(‪4- justify‬‬
‫‪218‬‬
‫في السطر رقم ‪ 8‬عرفنا الخاصية ‪ text-align‬والتى تسمح لن‪T‬ا بمح‪TT‬اذة‬
‫النصوص واعطيناها القيمة ‪ justify‬لجعل السطر متساوية كم‪TT‬ا ف‪TT‬ي‬
‫المثال‬
‫‪219‬‬
‫في السطر رقم ‪ 8‬عرفنا الخاصية ‪ text-align‬والتى تسمح لنا بمح‪TT‬اذة‬
‫النصوص واعطيناها القيمة ‪ center‬لجعل السطر في الوسط كما في‬
‫المثال‬
‫‪220‬‬
‫‪text-decoration‬‬ ‫)‪(CSS‬‬
‫تس‪TT‬مح ل‪TT‬ك ه‪TT‬ذه الخاص‪TT‬ية بح‪TT‬ذف الخ‪TT‬ط أس‪TT‬فل الكلم‪TT‬ة وع‪TT‬ادة م‪TT‬ا‬
‫تس‪TT‬تخدم ه‪TT‬ذه الخاص‪TT‬ية لح‪TT‬ذف الخ‪TT‬ط أس‪TT‬فل الكلم‪TT‬ة ف‪TT‬ي الوس‪TT‬م‬
‫المسئول عن تعريف الروابط س‪ <a></a‬وتأخذ القيم التاليةم‪:‬‬
‫)خط أسفل الكلمة(‪1-underline‬‬
‫)يقوم بحذف الخط أسفل الكلمة(‪2-none‬‬
‫)خط فوق الكلمة(‪3-overline‬‬
‫)خط في منتصف الكلمة أو الخط المشطوب(‪4-line-through‬‬
‫)تجعل الكلمة مثل الوميض أي يختفي وي‪i‬هر(‪5-blink‬‬
‫‪221‬‬
‫في السطر رقم ‪ 8‬عرفنا الخاص‪TT‬ية ‪ text-decoration‬واعطيناه‪TT‬ا القيم‪TT‬ة‬
‫‪222‬‬
‫‪ none‬اي يقوم بخذف أي خط موجود على الكلمة‬
‫في السطر رقم ‪ 6‬قمن‪TT‬ا بتعري‪TT‬ف اس‪TT‬م ‪ id‬الموج‪TT‬ود‬

‫في الوسم س‪ <p‬ثم عرفنا بجانب اسم ‪ id‬الوس‪TT‬م ‪a‬‬
‫ومعناها نفذ هذه الخاصية على الوسم الذي يحم‪TT‬ل‬
‫‪ id‬الذي بداخله الوسم س‪ <a‬فقط أي في حال ك‪TT‬ان‬
‫هن‪TT‬اك وس‪TT‬م س‪ <a‬داخ‪TT‬ل الوس‪TT‬م س‪ <p‬ف‪TT‬إن ه‪TT‬ذه‬
‫الخاصية تعم‪TT‬ل أم‪TT‬ا ف‪TT‬ي ح‪TT‬ال إن ك‪TT‬ان الوس‪TT‬م س‪<a‬‬
‫خارج الوسم س‪ <p‬فإن هذه الخاصية لن تعم‪TT‬ل كم‪TT‬ا‬
‫سنرى في المثلة القادمة‬
‫‪-1‬عند تعريف الوسم في ملف ‪ CSS‬يجب تعريفه من‬

‫اسمه دون اضافة علمتيس<‬
‫‪-2‬عن‪TT‬د كتاب‪TT‬ة أي خاص‪TT‬ية ف‪TT‬ي مل‪TT‬ف ‪ CSS‬يج‪TT‬ب أن‬

‫تنتهي بفاصلة منقوطة ت;(‬
‫‪223‬‬
‫كما تلحظ في المثال السابق عندما عرفنا الوسم س‪ <a‬داخل الوسم‬
‫>‪ <p‬ف‪TT‬إن الخاص‪TT‬ية ‪ text-decoratin‬عمل‪TT‬ت بينم‪TT‬ا ل‪TT‬م تعم‪TT‬ل عل‪TT‬ى‬
‫‪224‬‬
‫الوسم س‪ <a‬الخر لنها ليست داخل الوسم س‪<p‬‬
‫‪225‬‬
‫ف‪TT‬ي ه‪TT‬ذا المث‪TT‬ال قمن‪TT‬ا بتعري‪TT‬ف الوس‪TT‬م ت‪(a‬ف‪TT‬ي مل‪TT‬ف ‪ CSS‬وعرفن‪TT‬ا‬
‫الخاصية ‪ text-decoration‬واعطيناه القيمة ‪ none‬أي حذف الخط أسفل‬
‫الرابط وهنا تلحظ بأنه الخاصية قد عملت في الح‪TT‬التين دون اس‪TT‬تثناء‬
‫والسبب في ذلك أننا عرفنا ‪ a‬داخل ملف ‪ CSS‬ومعناها أن تنفذ ه‪TT‬ذه‬
‫الخاصية على جميع الوسوم في الصفحة سواء كانت داخ‪TT‬ل وس‪TT‬م أو‬
‫لم تكن في الداخل ولهذا أحيانا قد تض‪TT‬طر لس‪TT‬تخدام ‪ id‬أو ‪ class‬م‪T‬ن‬
‫أجل تعريف بعض الخصائص على وسوم محدده دون الكل‬
‫أتمنى قد وصلت الفكرة اليك‬
‫‪226‬‬
‫في هذا المثال عرفنا الخاصية ‪ text-decoration‬واعطيناها القيمة‬
‫‪ overline‬ومعناها أننا قمنا بوضع خط أعلى الرابط كما في المثال‬
‫‪227‬‬
‫ف‪TT‬ي ه‪TT‬ذا المث‪TT‬ال عرفن‪TT‬ا الخاص‪TT‬ية ‪ text-decoration‬واعطيناه‪TT‬ا القيم‪TT‬ة‬
‫‪ line-through‬ومعناها أننا قمنا بوض‪TT‬ع خ‪T‬ط ف‪TT‬ي منتص‪TT‬ف الراب‪TT‬ط كم‪TT‬ا‬
‫في المثال‬
‫‪228‬‬
‫‪text-transform‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحويل الكلمات إل‪TT‬ى أح‪TT‬رف ص‪TT‬غيرة أو ك‪TT‬بيرة أو‬
‫جعل الحرف الول كبير من كل كلمة وتأخذ القيم التاليةم‪:‬‬
‫)جعل الكلمة احرفها صغيرة(‪1-lowercase‬‬
‫)جعل الكلمة احرفها كبيرة(‪2-uppercase‬‬
‫)جعل أول حرف كبير(‪3-capitalize‬‬
‫ف‪TT‬ي ه‪TT‬ذا المث‪TT‬ال عرفن‪TT‬ا الخاص‪TT‬ية ‪ text-transform‬واعطيناه‪TT‬ا القيم‪TT‬ة‬
‫‪229‬‬
‫‪ lowercase‬ومعناها جعل الكلمة جميع احرفها صغيرة كما في المثال‬

‫‪ uppercase‬ومعناها جعل الكلمة جميع احرفها كبيرة كما في المثال‬
‫‪230‬‬
‫‪ capitalize‬ومعناها جعل أول حرف من الكلمة كبير كما في المثال‬
‫‪231‬‬
‫‪text-indent‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد المسافة البادئة من أول سطر من النص‬
‫‪232‬‬
‫في هذا المثال عرفنا الخاصية ‪ text-indent‬واعطيناه‪TT‬ا القيم‪TT‬ة ‪150px‬‬
‫من اجل تحديد المسافة البادئة للنص‬
‫‪Font‬‬
‫‪font-family‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد نوع الخط للنص ويمكن تحدي‪TT‬د أك‪TT‬ثر م‪TT‬ن‬
‫نوع خط في نفس الوقت مفصولة بفاصلة بين كل خط‬
‫‪233‬‬
‫في السطر رقم ‪ 8‬عرفنا الخاصية ‪ font-family‬وحددنا أكثر من خط‬
‫كما في المثال‬
‫‪234‬‬
‫‪font-size‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد حجم الخط للنصوص ويمكن تحديد حجم‬
‫الخط إما ب ‪ pixels‬أو ‪ em‬ولحساب حج‪T‬م الخ‪T‬ط م‪T‬ن ‪ pixels‬ال‪T‬ى ‪em‬‬
‫نستخدم المعادلة التاليةم‪:‬‬
‫‪pixels/16=em‬‬
‫ولحساب حجم الخط من ‪ em‬الى ‪ pixels‬نستخدم المعادلة التاليةم‪:‬‬
‫‪em*16=pixels‬‬
‫‪235‬‬
‫في السطر رقم ‪ 9‬عرفنا الخاصية ‪ font-size‬مع القيمة ‪ 40‬بيكسل‬
‫‪236‬‬
‫في السطر رقم ‪ 9‬عرفنا الخاصية ‪ font-size‬مع القيمة ‪40em‬‬
‫‪237‬‬
‫‪font-style‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد الستايل للنص وتأخذ القيم التاليةم‪:‬‬
‫)الخط المائل(‪1- italic‬‬
‫)الخط العاديلالفتراضي(‪2-normal‬‬
‫)الخط المائل(‪3-oblique‬‬
‫‪238‬‬
‫‪links‬‬
‫‪a:link‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية باعطاء خصائص للروابط في حال اذا كان الراب‪TT‬ط‬
‫لم يضغط عليهتأي لم يتم زيارة الرابط( مث‪TT‬ل تغيي‪TT‬ر ل‪TT‬ون الراب‪TT‬ط وتغيي‪TT‬ر‬
‫حجم الخط ‪...‬الخ‬
‫‪239‬‬
‫‪a:visited‬‬ ‫)‪(CSS‬‬
‫ت‪TT‬م الض‪TT‬غط علي‪TT‬هتاي ت‪TT‬م زي‪TT‬ارة الراب‪TT‬ط أي بع‪TT‬د الض‪TT‬غط علي‪TT‬ه تنف‪TT‬ذ‬
‫الخصائص( مثل تغيير لون الرابط وتغيير حجم الخط ‪...‬الخ‬
‫‪240‬‬
‫‪a:hover‬‬ ‫)‪(CSS‬‬
‫تس‪TT‬مح ه‪TT‬ذة الخاص‪TT‬ية باعط‪TT‬اء خص‪TT‬ائص للرواب‪TT‬ط ويت‪TT‬م تنفي‪TT‬ذ ه‪TT‬ذه‬
‫الخصائص في حال تم المرور على الرابط بمؤش‪TT‬رة الف‪TT‬أرة مث‪TT‬ل تغيي‪TT‬ر‬
‫لون الرابط وتغيير حجم الخط ‪...‬الخ‬
‫في حال تم المرور على الرابط سوف تتغيير خصائص الرابط‬

‫‪241‬‬
‫‪a:active‬‬ ‫)‪(CSS‬‬
‫تم الضغط عليهتاي تم في حالة الضغط تنفذ الخصائص عندما يض‪TT‬غط‬
‫على الرابط مباشرة وليس بعد زي‪TT‬ارة الراب‪TT‬ط ( مث‪TT‬ل تغيي‪TT‬ر ل‪TT‬ون الراب‪TT‬ط‬
‫وتغيير حجم الخط ‪...‬الخ‬
‫‪242‬‬
‫‪list‬‬
‫تستخدم خصائص ‪ list‬في ‪ CSS‬لتغيير الرموز في القائمة الغير‬

‫متسلسة والقائمة المتسلسة‬
‫‪List-style-type‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحدي‪TT‬د ش‪TT‬كل الرم‪TT‬ز ف‪TT‬ي القائم‪TT‬ة س‪TT‬واء ك‪TT‬انت‬
‫القائمة متسلسة أو غير متسلسة وتأخذ القيم التاليةم‪:‬‬
‫)لجعل القائمة رموزها على شكل مربع( ‪1-square‬‬
‫)لجعل القائمة رموزها على شكل دوائر( ‪2-circle‬‬
‫)لجعل القائمة رموزها على شكل ارقام العربية( ‪3-decimal‬‬
‫‪4-decimal-leading-zero‬‬
‫لجعل القائمة رموزها على ش‪TT‬كل ارق‪TT‬ام العربي‪TT‬ة مض‪TT‬افة اليه‪TT‬ا الرق‪TT‬م(‬
‫)صفر على جهة الشمال‬
‫)لجعل القائمة رموزها على شكل الحرف الرمنية( ‪5-armenian‬‬
‫لجعل القائمة رموزها على شكل الح‪TT‬رف النجليزي‪TT‬ة( ‪6-lower-alpha‬‬
‫)الصغيرة‬
‫لجعل القائمة رموزها على شكل الح‪TT‬رف النجليزي‪TT‬ة( ‪7-upper-alpha‬‬
‫)الكبيرة‬
‫لجعل القائمة رموزها على شكل الح‪TT‬رف الروماني‪TT‬ة( ‪8-lower-roman‬‬
‫)الصغيرة‬
‫لجعل القائمة رموزها على شكل الح‪TT‬رف الروماني‪TT‬ة( ‪9-upper-roman‬‬
‫‪243‬‬
‫)الكبيرة‬
‫) لجعل القائمة بدون رموز أو أرقام(‪1-none‬‬
‫‪244‬‬
245
246
‫‪List-style-imge‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد صورة تعبرر كرمز للقائمة بدل م‪TT‬ن الرم‪TT‬وز‬
‫الموجودة في الخاصية ‪list-style-type‬‬
‫‪247‬‬
‫‪List-style-position‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد الرموز اذا كانت دخ‪TT‬ل المحت‪TT‬وى أو خ‪TT‬ارج‬
‫المحتوى وتأخذ القيم التاليةم‪:‬‬
‫)جعل الرموز داخل المحتوى(‪1-inside‬‬
‫)جعل الرموز خارج المحتوى(‪2-outside‬‬
‫‪248‬‬
‫‪List-style‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد جميع الخصائص التي ت‪TT‬م ذكره‪TT‬ا س‪TT‬ابقا‬
‫في سطر واحد وتكتب بالطريقة التاليةم‪:‬‬
‫; ‪list-style: list-type list-position list-image‬‬
‫‪249‬‬
‫‪border‬‬
‫‪border‬‬ ‫)‪(CSS‬‬
‫تس‪TT‬مح ه‪TT‬ذة الخاص‪TT‬ية بتحدي‪TT‬د اط‪TT‬ار ف‪TT‬ي الج‪TT‬دول أو ح‪TT‬تى يمكن‪TT‬ك‬
‫اس‪TT‬تخدام الخاص‪TT‬ية ‪ border‬م‪TT‬ع وس‪TT‬م س‪ <div‬ف‪TT‬ي ح‪TT‬ال تقس‪TT‬يم‬
‫الصفحة أو أوسمة أخرى تتطلب عملك وتأخذ القيم التاليةم‪:‬‬
‫)تحديد سمك الطار(‪1-width‬‬
‫)نوع الطار(‪2-style‬‬
‫)لون الطار(‪3-color‬‬
‫‪border: width style color‬‬
‫‪250‬‬
251
border-style (CSS)
:‫ وتأخذ القيم التاليةم‬border ‫تسمح هذة الخاصية بتحديد ستايل لل‬
1-dotted
2-dashed
3-solid
4-double
5-groove
6-ridge
7-inset
8-outset
9-none
252
253
‫‪border-width‬‬ ‫)‪(CSS‬‬
‫س‪ T‬مك للط‪TT‬ار ف‪TT‬ي الج‪TT‬دول أو ح‪TT‬تى‬
‫تس‪TT‬مح ه‪TT‬ذة الخاص‪TT‬ية بتحدي‪TT‬د م‬
‫يمكنك استخدام الخاصية ‪ border-width‬مع وس‪TT‬م س‪ <div‬ف‪TT‬ي ح‪TT‬ال‬
‫تقسيم الصفحة أو أوسمة أخرى تتطلب عملك‬
‫‪254‬‬
‫‪border-color‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد لون للطار في الج‪TT‬دول أو ح‪TT‬تى يمكن‪TT‬ك‬
‫استخدام الخاصية ‪ border-color‬مع وس‪TT‬م س‪ <div‬ف‪TT‬ي ح‪TT‬ال تقس‪TT‬يم‬
‫الصفحة أو أوسمة أخرى تتطلب عملك‬
‫‪255‬‬
‫التحكم في ‪Border‬‬
‫هناك خصائص لل ‪ border‬من خللها تمكرنك بالتحكم في جميع ج‪TT‬وانب‬

‫ال ‪ border‬سواء من العلى أو من اليمين أو الشمال أو في السفل‬
‫‪Border-top-style‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد الستايل م‪TT‬ن الج‪TT‬انب العل‪TT‬ى فق‪TT‬ط م‪TT‬ن‬
‫الطار‬
‫‪Border-right-style‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد الس‪TT‬تايل م‪T‬ن الج‪TT‬انب اليمي‪T‬ن فق‪T‬ط م‪T‬ن‬
‫الطار‬
‫‪Border-left-style‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد الستايل من الجانب الش‪TT‬مال فق‪TT‬ط م‪TT‬ن‬
‫الطار‬
‫‪Border-bottom-style‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد الستايل م‪T‬ن الج‪TT‬انب الس‪T‬فل فق‪T‬ط م‪T‬ن‬
‫الطار‬
‫‪256‬‬
257
‫‪Border-top-width‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد حجم ‪ border‬من الجانب العلى فقط‬
‫‪Border-right-width‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد حجم ‪ border‬من الجانب اليمين فقط‬
‫‪Border-left-width‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد حجم ‪ border‬من الجانب الشمال فقط‬
‫‪Border-bottom-width‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد حجم ‪ border‬من الجانب السفل فقط‬
‫‪258‬‬
259
‫‪Border-top-color‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد لون ‪ border‬من الجانب العلى فقط‬
‫‪Border-right-color‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد لون ‪ border‬من الجانب اليمين فقط‬
‫‪Border-left-color‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد لون ‪ border‬من الجانب الشمال فقط‬
‫‪Border-bottom-color‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد لون ‪ border‬من الجانب السفل فقط‬
‫‪260‬‬
261
‫‪table‬‬
‫‪border-Collapse‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاص‪TT‬ية بجع‪TT‬ل ح‪TT‬دود الط‪TT‬ار أو ‪ border‬ف‪TT‬ردي ب‪TT‬دل م‪TT‬ن‬
‫المزدوج‬
‫‪262‬‬
‫‪width‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحدي‪TT‬د حج‪TT‬م للج‪TT‬دول أو ‪ border‬ويمك‪TT‬ن تحدي‪TT‬د‬
‫الحجم إما بالبيكسل أو بالنسبة المئوية‬
‫‪height‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد ارتف‪TT‬اع للج‪TT‬دول أو ‪ border‬ويمك‪TT‬ن تحدي‪TT‬د‬
‫الرتفاع إما بالبيكسل أو بالنسبة المئوية‬
‫يمك‪TTT‬ن اس‪TTT‬تخدام الخص‪TTT‬ائص ‪ width‬و ‪ height‬و ‪ border‬م‪TTT‬ع‬

‫أوسمة أخرى مثل الوسم س‪<div‬‬
‫‪263‬‬
264
265
‫‪Vertical-align‬‬ ‫)‪(CSS‬‬
‫تسمح هذة الخاصية بتحديد المحاذاة للن‪TT‬ص س‪TT‬واء م‪TT‬ن المنتص‪TT‬ف أو‬
‫العلى أو في السفل وتأخذ القيمم‪:‬‬
‫)محاذاة من العلى(‪1-top‬‬
‫)محاذاة من السفل(‪1-bottom‬‬
‫)محاذاة من المنتصف(‪1-middle‬‬
‫‪266‬‬
267
‫‪outline‬‬
‫‪outline‬‬ ‫)‪(CSS‬‬
‫هذه الخاصية تسمى بالحدود الخارجية وهي عبارة عن خ‪TT‬ط مرس‪TT‬وم‬
‫حول العناصر أو الوس‪TT‬وم لجع‪TT‬ل العناص‪TT‬ر أك‪TT‬ثر س‪TT‬هولة لرؤيته‪TT‬ا وتك‪TT‬ون‬
‫بالعادة خارج ال ‪ border‬وهو شبيه ل‪TT‬ل ‪ border‬ويأخ‪TT‬ذ نف‪TT‬س القي‪TT‬م ل‪TT‬ه‬
‫وتأخذ القيم التالية‬
‫)السمك الخارجي للحدود الخارجية(‪1-width‬‬ ‫م‬
‫)شكل الستايل للحدود الخارجية(‪2-style‬‬
‫)تحديد اللون للحدود الخارجية(‪3-color‬‬
‫ويمكن تعريفه بالطريقة التالية‬
‫‪outline: width style color‬‬
‫‪268‬‬
269
‫‪outline-width‬‬ ‫)‪(CSS‬‬
‫مك للحدود الخارجي‬
‫تسمح هذه الخاصية بتحديد حجم الس ٌ‬
‫‪outline-style‬‬ ‫)‪(CSS‬‬
‫تسمح هذه الخاصية بتحديد شكل الستايل للحدود الخ‪TT‬ارجي وه‪TT‬ي‬
‫شبيه بالخاصية ‪border‬‬
‫‪outline-color‬‬ ‫)‪(CSS‬‬
‫تسمح هذه الخاصية بتحديد لون للحدود الخارجية‬
‫‪270‬‬
271
‫‪margin‬‬
‫‪margin‬‬ ‫)‪(CSS‬‬
‫وتس‪TT‬مى اله‪TT‬وامش الخارجي‪TT‬ة وه‪TT‬ذه الخاص‪TT‬ية تق‪TT‬وم بعملي‪TT‬ة تحدي‪TT‬د‬
‫المساحة حول العناصر تخ‪TT‬ارج الح‪TT‬دود ( ويمك‪TT‬ن تغيي‪TT‬ر اله‪TT‬وامش م‪TT‬ن‬
‫العلى أو اليمين أو السفل أو اليسار ويمكن تحديد القي‪TT‬م لله‪TT‬وامش‬
‫إما بالبيكسل أو بالنسبة المئويةت‪(%‬‬
‫‪272‬‬
‫في هذا المثال في السطر رقم ‪ 14‬قمنا بتحديد الهامش من جميع‬
‫التجهات من خلل قيمة واحدة وهي ‪50px‬‬
‫‪273‬‬
‫في هذا المثال في السطر رقم ‪ 14‬قمنا بتحديد الهامش من جميع‬
‫التجهات من خلل اربعة قيم حيث تمثلم‪:‬‬
‫‪-1‬القيمة الولى الهامش من العلى وهي ‪10px‬‬
‫‪-2‬القيمة الثانية الهامش من اليمين وهي ‪30px‬‬
‫‪-3‬القيمة الثالثة الهامش من السفل وهي ‪40px‬‬
‫‪274‬‬
‫‪-4‬القيمة الرابعة الهامش من اليسار وهي ‪30px‬‬
‫‪margin-top‬‬ ‫)‪(CSS‬‬
‫ه‪TT‬ذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن العل‪TT‬ى للعنص‪TTT‬رتخارج‬
‫الحدود(‬
‫‪margin-right‬‬ ‫)‪(CSS‬‬
‫ه‪TT‬ذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن اليمي‪TT‬ن للعنص‪TTT‬رتخارج‬
‫الحدود(‬
‫‪margin-bottom‬‬ ‫)‪(CSS‬‬
‫ه‪T‬ذه الخاص‪TT‬ية تس‪T‬مح بتحدي‪TT‬د اله‪T‬امش م‪T‬ن الس‪T‬فل للعنص‪TT‬رتخارج‬
‫الحدود(‬
‫‪margin-left‬‬ ‫)‪(CSS‬‬
‫ه‪TT‬ذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن اليس‪TT‬ار للعنص‪TTT‬رتخارج‬
‫الحدود(‬
‫‪275‬‬
276
‫‪padding‬‬
‫‪padding‬‬ ‫)‪(CSS‬‬
‫وتس‪TT‬مى اله‪TT‬وامش الداخلي‪TT‬ة وه‪TT‬ذه الخاص‪TT‬ية تق‪TT‬وم بعملي‪TT‬ة تحدي‪TT‬د‬
‫المساحة حول العناصر تداخ‪TT‬ل الح‪TT‬دود ( ويمك‪T‬ن تغيي‪TT‬ر اله‪TT‬وامش م‪T‬ن‬
‫العلى أو اليمين أو السفل أو اليسار ويمكن تحديد القي‪TT‬م لله‪TT‬وامش‬
‫إما بالبيكسل أو بالنسبة المئويةت‪(%‬‬
‫‪277‬‬
278
‫في هذا المثال في السطر رقم ‪ 14‬قمنا بتحديد الهامش الداخلي‬
‫من جميع التجهات من خلل قيمة واحدة وهي ‪50px‬‬
‫في هذا المثال في السطر رقم ‪ 14‬قمنا بتحديد الهامش الداخلي‬

‫من جميع التجهات من خلل اريعة قيم حيث تمثلم‪:‬‬
‫‪-1‬القيمة الولى الهامش من العلى وهي ‪10px‬‬
‫‪279‬‬
‫‪-2‬القيمة الثانية الهامش من اليمين وهي ‪20px‬‬
‫‪-3‬القيمة الثالثة الهامش من السفل وهي ‪30px‬‬
‫‪-4‬القيمة الرابعة الهامش من اليسار وهي ‪40px‬‬
‫‪padding-top‬‬ ‫)‪(CSS‬‬
‫ه‪TT‬ذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن العل‪TT‬ى للعنص‪TTT‬رتداخل‬
‫الحدود(‬
‫‪padding-right‬‬ ‫)‪(CSS‬‬
‫ه‪TT‬ذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن اليمي‪TT‬ن للعنص‪TTT‬رتداخل‬
‫الحدود(‬
‫‪padding-bottom‬‬ ‫)‪(CSS‬‬
‫هذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن الس‪TT‬فل للعنص‪TTT‬رتداخل‬
‫الحدود(‬
‫‪padding-left‬‬ ‫)‪(CSS‬‬
‫ه‪TT‬ذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن اليس‪TT‬ار للعنص‪TTT‬رتداخل‬
‫الحدود(‬
‫‪280‬‬
281
‫‪display & visibility‬‬
‫‪display‬‬ ‫)‪(CSS‬‬
‫هذه الخاصية تستخدم لخفاء العناصر في الويب مع اخف‪T‬اء المس‪TT‬احة‬
‫أو اظهارها بطريقة معينة وتأخذ القيم التاليةم‪:‬‬
‫)لخفاء العنصر مع المساحة المحجوزة للعنصر في الصفحة( ‪1-none‬‬

‫)لجعل العناصر ت‪i‬هر في سطر واحد(‪2-inline‬‬
‫)لجعل العناصر ت‪i‬هر كبلوك أو كتل(‪3-block‬‬
‫‪visibility‬‬ ‫)‪(CSS‬‬
‫هذه الخاصية تستخدم لخفاء العناصر في الويب م‪TT‬ع ابق‪TT‬اء المس‪TT‬احة‬
‫محجوزة للعنصر وتأخذ القيم التاليةم‪:‬‬
‫)لخفاء العنصر مع بقاء المساحة للعنصر محجوزة(‪1-hidden‬‬

‫)لظهار العنصر(‪2-visible‬‬
‫‪282‬‬
283
284
285
286
‫‪position‬‬
‫‪position‬‬ ‫)‪(CSS‬‬
‫هذه الخاصية تستخدم لترتيب العناصر مع بعضها وهن‪TT‬اك اريع‪TT‬ة أن‪TT‬واع‬
‫للترتيب م‪:‬‬
‫)جعل العنصر ثابت في الصفحة(‪1-fixed‬‬
‫)ترتيب العنصر بشكل طبيعي في الصفحة(‪2-relative‬‬
‫يكون ترتيب العناصر بشكل جامد ويت‪TT‬م تش‪TT‬كيل ه‪TT‬ذا ال‪TT‬ترتيب(‪3-static‬‬
‫)من خلل شكل الصفحة‬
‫يكون متص‪TT‬ل م‪TT‬ع العناص‪TT‬ر الرئيس‪TT‬ية ال‪TT‬تي ب‪TT‬دورها ليس‪TT‬ت(‪4-absolute‬‬
‫)مرتبة بشكل جامد‬
‫وتعمل هذه الخاصية مع الخصائص التاليةم‪:‬‬

‫‪-1‬الخاصية ‪ right‬تترتيب العنصر أو العناصر من جهة اليمين(‬
‫‪-2‬الخاصية ‪ left‬تترتيب العنصر أو العناصر من جهة اليسار(‬
‫‪-3‬الخاصية ‪ top‬تترتيب العنصر أو العناصر من جهة العلى(‬
‫‪-4‬الخاصية ‪ bottom‬تترتيب العنصر أو العناصر من جهة السفل(‬
‫‪287‬‬
‫إن المحتوى في حالة الخاصية ‪ position‬مع القيمة ‪ relative‬يمكن أن‬
‫ينتقل أو يتداخل مع العناصر الخرى ولكن المساحة المتبقي‪TT‬ة للعنص‪TT‬ر‬
‫ماتزال محفوظة في الشكل الطبيعي‬
‫‪288‬‬
‫عند استخدام الخاصية ‪ position‬م‪TT‬ع القيم‪TT‬ة ‪ fixed‬ل‪TT‬ن يتح‪TT‬رك العنص‪TT‬ر‬
‫حتى لو ‪ scroll‬المتصفح تحرك سيبقى العنصر ثابت‬
‫‪289‬‬
‫يتم ترتيب العناصر في الخاصية ‪ position‬م‪TT‬ع القيم‪TT‬ة ‪ absolute‬بش‪TT‬كل‬
‫مطلق في الصفحة‬
‫‪290‬‬
‫‪z-index‬‬ ‫)‪(CSS‬‬
‫هذه الخاصية تستخدم لترتيب العناصر المتراكم‪TT‬ة بحي‪TT‬ث يمك‪TT‬ن ض‪TT‬بط‬
‫العنص‪TT‬ر ف‪TT‬ي المقدم‪TT‬ة أو خل‪TT‬ف العناص‪TT‬ر الخ‪TT‬رى وتأخ‪TT‬ذ القيم‪TT‬ة إم‪TT‬ا‬
‫بالموجب أو السالب‬
‫‪291‬‬
‫‪Float & clear‬‬
‫‪float‬‬ ‫)‪(CSS‬‬
‫هذه الخاصية تمكنك من طفو العناصر لليمين أو اليسار كما تسمح‬
‫للعناصر الخرى باللتفاف حولهم وتستخدم خاصية الطفو بشكل عام‬
‫مع الصور ولكن تستخدم أيضاً بشكل مثالي مع هيكل تصميم الموقع‪,‬‬
‫تطفو العناصر بشكل افقي فقط أي يمكن للعناصر أن تطفو باتجاه‬
‫اليمين ‪ right‬أو اليسار ‪ left‬ولكن ليس للعلى أو للسفل‬
‫‪292‬‬
‫ستلتف العناصر الخرى عند طفو العناصر الخرى لليمين أو اليسار‬
‫‪293‬‬
‫يمكن أن تطفو العناصر بجانب بعضهم اذا كان هناك مساحة فارغة‬
‫‪294‬‬
‫‪clear‬‬ ‫)‪(CSS‬‬
‫تستخدم هذه الخاصية بعد طفو العناصر حيث إذا ك‪TT‬انت هن‪TT‬اك عناص‪TT‬ر‬
‫أخرى سيتم طفو هذه العناصر حولهم ولتجنب ذل‪TT‬ك يمك‪TT‬ن اس‪TT‬تخدام‬
‫خاصية المسح ‪clear‬‬
‫‪295‬‬
‫كما تلحظ في المثال تم طفو عناصر أخري حولهم ولتجنب ذلك‬
‫سوف نأخذ نفس المثال ونضيف عليه خاصية ‪clear‬‬
‫‪296‬‬
297
‫أسئلة الفصل التاسع‬
‫‪ -1‬ماهي ‪ CSS‬وماهي فوائدها؟‬
‫‪ -2‬ماهي استخدمات الخاصية ‪background‬؟‬
‫‪ -3‬ماهي استخدمات الخاصية ‪text‬؟‬
‫‪ -4‬ماهي استخدمات الخاصية ‪margin‬؟‬
‫‪ -5‬ماهي استخدمات الخاصية ‪padding‬؟‬
‫‪ -6‬ماهي استخدمات الخاصية ‪position‬؟‬
‫‪ -7‬ماهي استخدمات الخاصية ‪float‬؟‬
‫‪ -8‬ماهي استخدمات الخاصية ‪font‬؟‬
‫‪ -9‬ماهي استخدمات الخاصية ‪display‬؟‬
‫‪ -10‬ماهي استخدمات الخاصية ‪z-index‬؟‬
‫‪ -11‬ماهي استخدمات الخاصية ‪clear‬؟‬
‫‪298‬‬
‫‪ -12‬قم ببناء هذا المشروع باستخدام ‪ HTML‬و ‪CSS‬؟‬
‫‪299‬‬
‫تم بحمدل النتهاء من الكتاب‬
‫أخي القارئم‪:‬‬
‫**إن وجدت في هذا الكتاب منفعة فل تنسى الدعاء لي في أي وقت‬
‫**ثمن هذا الكتاب هو مجاناً للجميع‬
‫**سوف يكون هناك الج‪TT‬زء الث‪TT‬اني م‪T‬ن الكت‪TT‬اب بإس‪TT‬م مملك‪TT‬ة تص‪TT‬ميم‬
‫المواقع الجزء الثاني والذي يتكلم عن ‪ HTML5‬و ‪ CSS3‬قريب‪TT‬اً إن ش‪TT‬اء‬
‫ا‬
‫لمتابعة كل ما هو جديد‬
‫‪mohammad awwad‬‬
‫‪https://jo.linkedin.com/in/mohammadawwad‬‬
‫**المراجع‪:‬‬
‫تم الستعانة ببعض المراجع والغرض منه‪TT‬ا ه‪TT‬و لتس‪TT‬هيل الم‪TT‬ادة عل‪TT‬ى‬
‫القارئ م‪:‬‬
‫‪/http://www.w3schools.com-1‬‬
‫‪/http://www.w3arabiconline.com-2‬‬
‫‪/http://www.khayma.com-3‬‬
‫‪-4‬منتديات شبوة نت‬
‫وصلى ا وسلم وبارك على محمد وعلى أله الطيبين وصحبه أجمعين‬
‫‪300‬‬

تصميم المواقع 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

تصميم المواقع 1

Uploaded by

Copyright:

Available Formats

1

‫لغةت‪ (HTML‬هي اختصار الى ت‪(Hyper Text Markup Language‬‬

‫الدوات المطلوبة لبناء صفحات النترنت‬

‫يفضل استخدام المحررات التالية في كتابة وسومت‪:(HTML‬‬

‫‪-1‬جميع وسومت‪ (HTML‬توضع بين علمتي أكبر وأصغرت><(‬

‫‪ -2‬اغلب وسوم)‪ (HTML‬لها زوجين من الوسوم وسم بداية‬

‫وسم نهاية مثل >وسم النهاية‪> </‬وسم بداية<‬

‫‪ -3‬هناك وسوم لها زوج واحد أي وسم واحد فقط مثلت>‪(<br/‬‬

‫‪-3‬جميع وسوم ت‪ (HTML‬تكتب بين وسمي>‪<html> </html‬‬

‫وه‪TT‬ي عب‪TT‬ارة ع‪TT‬ن أربع‪TT‬ة وس‪TT‬وم ت‪ ( Tags‬وتس‪TT‬مى بوس‪TT‬وم هيكلي‪TT‬ة‬

‫هذا الوسم يعني أن الملف يحتوي على أوامر ‪, HTML‬‬ ‫‪HTML‬‬

‫معلومات عن الصفحة فيها مثلت‪ (page title‬او ت‪(meta tag‬‬

‫الصفحة في المثال السابق ت‪ (Page Title‬وي‪i‬هر في‬

‫أعلى نافذة مستعرض الويب‬

‫النصوص والصور التي ستعرض في الصفحة‬

‫بعد الطلع الوسوم ‪ HTML‬الربعة الرئيسية يتم تخزين الصفحة‬

‫في الصفحة و هذه الخصائص تكون داخل الوسم مثال‬

‫>‪<body bgcolor=#0000FF> </body‬‬

‫اللون الزرق كما في الصورة‬

‫ستتعرف على اللوان وخصائص الوسوم بشكل اكثر في‬

‫‪-1‬ما هي لغة ت‪(HTML‬؟‬

‫‪(Document‬‬ ‫‪-2‬ماهي وسوم هيكلية المستند )‪Structure Tags‬‬

‫مع شرح وظيفة كل وسم؟‬

‫‪ -3‬ما هو امتداد صفحة ت‪(HTML‬؟‬

‫الخطوط و اللوان ‪Colors and lines tags‬‬

‫يمكن تمثيل اللوان في ‪ HTML‬بطريقتين وهيم‪:‬‬

‫‪ -1‬الن‪i‬ام السادس عشر أو ت‪ (Hex decimal‬ويتكون من ‪ 6‬أرقام‬

‫وحروف كما في الصورة التاليةم‪:‬‬

‫بحيث يمثل كل رقمين أو رقم وحرف أو حرف ورقم من هذه الثلث‬

‫اللوان الساسية بحيث يتم دمجها مع بعض وا ظهارها لون واحد‬

‫تمثل هذه اللوان الثلث‬

‫إذا واجهتك صعوبة في استخدام الطريقة الولى يمكنك أن تستخدم‬

‫الطريقة الثانية وهي أسهل من الطريقة الولى بحيث يمكنك كتابة‬

‫اسم اللون مباشرة كما في الصورة التالية‬

‫ملخص اللوان في ‪ HTML‬ممثلة بالطريقتينم‪:‬‬

‫>‪<body‬‬ ‫الوسم )‪(Tag‬‬

‫سواء من نفس الملف أو من ملف خارجي من‬

‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬

‫سواء من نفس الملف أو من ملف خارجي من‬

‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬

‫‪ -1‬ستتعرف على ‪ id‬و ‪ Class‬بشكل اكثر في في الجزء‬

‫الثاني من الكتاب والذي يتكلم عن ‪CSS‬‬

‫‪ -2‬هناك الكثير من الخصائص الموجودة في اغلب الوسوم‬

‫ول يمكن شرحها في الوقت الحالي لن استخدامها يتطلب‬

‫بمعرفة في الجافا سكربت تالجزء الثالث من الكتاب( وهناك‬

‫خصائص ليست مهما كثيرا سوف اقوم بتجاهلها في هذا‬

‫تستطيع من خلل هذا الوسم أن تضع عنوان المقالة بين وسمي‬

‫>‪</h1‬عنوان المقالة>‪ <h1‬بحيث تمثل >‪ <h1‬أكبر حجم‬

‫للعنوان و>‪ <h6‬أصغر حجم للعنوان‬

‫سواء من نفس الملف أو من ملف خارجي من‬

‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬

‫سواء من نفس الملف أو من ملف خارجي من‬

‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬

‫القيمة من ‪ 1‬إلى ‪ 7‬حيث واحد اصغر حجم و ‪7‬‬

‫سواء من نفس الملف أو من ملف خارجي من‬

‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬

‫سواء من نفس الملف أو من ملف خارجي من‬

‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬

‫سواء من نفس الملف أو من ملف خارجي من‬

‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬

‫سواء من نفس الملف أو من ملف خارجي من‬

‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬

‫سواء من نفس الملف أو من ملف خارجي من‬

‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬