Kingdom of web design(html,css)
-
Upload
mohammad-awwad -
Category
Documents
-
view
236 -
download
1
description
Transcript of Kingdom of web design(html,css)
![Page 1: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/1.jpg)
1
![Page 2: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/2.jpg)
الفهرسالموضوع
الفصل الول:الساسياتHTMLماهي
الدوات المطلوبة لبناء صفحات النترنتDocument Structure Tagsوسوم هيكل المستند
Attributes Tagsخصائص الوسوم
HTMLالتعليقات في
أسئلة الفصل الول
الفصل الثاني:الخطوط واللواناللوان
ممثلة بالطريقتين HTMLملخص اللوان في HTMLملخص للوان الخلفيات في
>body<الوسم >br</الوسم
>h1><h2><h3><h4><h5><h6<الوسمة
2
![Page 3: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/3.jpg)
>font<الوسم >b<الوسم >i<الوسم
>uالوسم س>strong<الوسم
>em<الوسم >sup<الوسم >sub<الوسم >big<الوسم
<small>الوسم >strike<الوسم
>s<الوسم >tt<الوسم
الثانيأسئلة الفصل
الفقرات والقوائمالفصل الثالث:الفقرات
>p<الوسم
3
![Page 4: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/4.jpg)
>blockquote<الوسم >pre<الوسم >center<الوسم
القوائم>ol<الوسم >li<الوسم >ul<الوسم
قوائم التعريفات>dlالوسم س
>dt<الوسم >dd<الوسم
أسئلة الفصل الثالث
وسوم الويبالفصل الرابع:>img<الوسم
تحديد مسار الصورةالروابط>aالوسم س
4
![Page 5: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/5.jpg)
اربع طرق لتعريف الروابطخرائط الصور
>map<الوسم >area<الوسم
تقسيم الويب>divالوسمس>hr<الوسم
>embed<الوسم >marquee<الوسم
أسئلة الفصل الرابع
الجدوالالفصل الخامس:
شرح الوسوم>table<الوسم
>tr<الوسم >td<الوسم
>caption<الوسم أمثلة على الجداول
5
![Page 6: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/6.jpg)
أسئلة الفصل الخامس
الطاراتالفصل السادس:>frameset<الوسم
>frameالوسمسname الخاصية
أسئلة الفصل السادس
النماذجالفصل السابع:أشكال النماذج
>form<الوسم >Input<الوسم checkbox و radioالفرق بين
>select<الوسم >option<الوسم >optgroup<الوسم >textarea<الوسم >fieldset<الوسم
6
![Page 7: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/7.jpg)
>legend<الوسم أسئلة الفصل السابع
الميتا والرموزالفصل الثامن:>mateالوسم س
الرموزأسئلة الفصل الثامن
CSSالفصل التاسع:CSS ماهي
)CSS(ماهي فوائد) داخل الصفحات CSS طرق تعريف ت
>link<الوسم CSSطريقة تحديدCSSخصائص
backgroundcolorTextFont
7
![Page 8: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/8.jpg)
linkslist
bordertable
marginpadding
display & visibilityPosition & z-index
float & clear
8
![Page 9: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/9.jpg)
لالفصل الو
)Hyper Text Markup Language) هي اختصار الى تHTMLلغةت
هي ليست لغة برمجة وإنما هTTي لغTTة ترميTTز تسTTتخدم فTTي إنشTTاءووتصميم صفحات النترنت وتعتبر من اقدم اللغTTات وأوسTTعها اسTTتخدما
التعليمTTات) لصTTدار tagsوسTTوم أو ت) HTMLفي المواقع وتسTTتخدم ت المتصفحىإل
مثل م: )tagsمحرر لكتابة وسومتأولم:1-notepad(تمجاني2++-notepad(تمجاني3-dream waver(تغير مجاني4-Komodo(تيوجد نسخة مجانيه ونسخة غير مجانية
ثانيام:متصفح إنترنت من اجل العرض مثلم:1-Google chrome2-Fire Fox3-Opera
9
HTMLماهي
الدوات المطلوبة لبناء صفحات النترنت
![Page 10: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/10.jpg)
4-Internet Explorer
):HTMLيفضل استخدام المحررات التالية في كتابة وسومت1-Notepad ++2-Komodo
وذلك لنها تحتوي على مساعدة في كتابة الوسوم
)<>توضع بين علمتي أكبر وأصغرت) HTMLجميع وسومت-1
لها زوجين من الوسوم وسم بداية) HTML(اغلب وسوم- 2
>وسم بداية/> <وسم النهاية< وسم نهاية مثل
)>br</- هناك وسوم لها زوج واحد أي وسم واحد فقط مثلت3
>html> </html<تكتب بين وسمي) HTML-جميع وسوم ت3
10
![Page 11: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/11.jpg)
وتسTTمى بوسTTوم هيكليTTة) TagsوهTTي عبTTارة عTTن أربعTTة وسTTوم تالمستند وذلك أي ملف تقTTوم بتصTTميمه يحتTTوي علTTى هTTذه الوسTTوم
الربعة كما في الصورة
11
Document Structure Tagsوسوم هيكل المستند
![Page 12: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/12.jpg)
الوسوم الربعة هي م:> html> </html<
>head></head<
>title></title<
>body></body<
HTML هذا الوسم يعني أن الملف يحتوي على أوامرHTML, وليس نصاً عادياً
HEADيعتبر هذا الوسم بمثابة رأس الصفحة الذي يتم وضع
)meta tagاو ت) page titleمعلومات عن الصفحة فيها مثلتTITLEهذا الوسم هو مخصص لعنوان الصفحة حيث أن عنوان
) ويiهر فيPage Titleالصفحة في المثال السابق ت
أعلى نافذة مستعرض الويب BODYحتوي على جميعيهذا الوسم بمثابة جسم الصفحة و
النصوص والصور التي ستعرض في الصفحة
الرئيسية يتم تخزين الصفحة الربعةHTMLالوسوم بعد الطلع كما في الصورة) .htm (.) أوhtmlبامتداد ت
12
![Page 13: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/13.jpg)
13
![Page 14: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/14.jpg)
يجب عليك أخي القارئ أن تعرف أن اغلب الوسوم تحتوي على
خصائص تعمل على تحسين مiهر الوسم والتحكم فيه بشكل افضل
في الصفحة و هذه الخصائص تكون داخل الوسم مثال
>body bgcolor=#0000FF> </body<
في هذا السطر قمنا بتغير اللون الفتراضي للصفحة وهو البيض إلى
الزرق كما في الصورةلون ال
فيستتعرف على اللوان وخصائص الوسوم بشكل اكثر
الفصل القادم
14
Attributes Tagsخصائص الوسوم
![Page 15: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/15.jpg)
تستخدم التعليقات عادة في شرح ووصف الوسوم في صفحة الويب وهي ل تتأثر بالتنفيذ
15
HTMLالتعليقات في
![Page 16: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/16.jpg)
عليك كتابته بالطريقةالتاليةHTMLكما ترى حتى تضيف تعليق في <--هنا يبدء كتابة التعليق--!>
16
![Page 17: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/17.jpg)
أسئلة الفصل الول
؟)HTML-ما هي لغة ت1
)Document Structure Tags (-ماهي وسوم هيكلية المستند2
وظيفة كل وسم؟مع شرح
؟)HTML- ما هو امتداد صفحة ت3
كيف استطيع تغيير لون خلفية الصفحة من اللون البيض إلى لون- 4
أخر ؟
17
![Page 18: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/18.jpg)
الفصل الثاني
أولمً: اللوانم:
بطريقتين وهيم: HTMLيمكن تمثيل اللوان في
أرقام6ويتكون من ) Hex decimal- النiام السادس عشر أو ت1
وحروف كما في الصورة التاليةم:
18
Colors and lines tagsالخطوط و اللوان
![Page 19: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/19.jpg)
19
![Page 20: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/20.jpg)
) أوRED,GREEN,BLUEهناك ثلث ألوان أساسية وهي ت درجة لونية 256ولكل منها ) الحمر,الخضر,الزرق(
بحيث يمثل كل رقمين أو رقم وحرف أو حرف ورقم من هذه الثلث
اللوان الساسية بحيث يتم دمجها مع بعض وا ظهارها لون واحد
تمثل هذه اللوان الثلث
20
![Page 21: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/21.jpg)
- استخدام أسماء اللوانم:2
إذا واجهتك صعوبة في استخدام الطريقة الولى يمكنك أن تستخدم
الطريقة الثانية وهي أسهل من الطريقة الولى بحيث يمكنك كتابة
اسم اللون مباشرة كما في الصورة التالية
21
![Page 22: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/22.jpg)
قمنا بتغيير اللون البيض إلى اللون الزرق حيث استخدمنا هنا اسماللون مباشرة دون استخدام الطريقة الولى
ممثلة بالطريقتينم: HTMLملخص اللوان في
22
![Page 23: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/23.jpg)
23
![Page 24: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/24.jpg)
24
![Page 25: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/25.jpg)
25
![Page 26: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/26.jpg)
:HTMLملخص للوان الخلفيات في
26
![Page 27: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/27.jpg)
27
![Page 28: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/28.jpg)
الوسوم
<Tag(<body(الوسم بمثابTTة جسTTم الصTTفحةكما قلنTTا سTTابقا هTTو> body></body<وسم
حتوي على جميع النصوص والصور التي ستعرض في الصفحةيو
Attributesالخصائص أهم
bgcolor هذه الخاصية تسمح بتغيير لون الخلفية للصفحة
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس backgroundمسئولة عن تحديد صورة للصفحة بدل عن اللون
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل text تحديد اللون الساسي للنص
28
![Page 29: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/29.jpg)
link تحديد لون الربط أو الوصلة التشعبيةvlink التي تمتحديد لون الربط أو الوصلة التشعبية
زيارتهاalinkتحديد لون الربط أو الوصلة التشعبية عند النقر
عليها
في الجزءفي بشكل اكثر Classو idستتعرف على - 1
CSSالثاني من الكتاب والذي يتكلم عن
هناك الكثير من الخصائص الموجودة في اغلب الوسوم- 2
ول يمكن شرحها في الوقت الحالي لن استخدامها يتطلب
) وهناكالجزء الثالث من الكتاببمعرفة في الجافا سكربت ت
بتجاهلها في هذااقومخصائص ليست مهما كثيرا سوف
الكتاب
29
![Page 30: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/30.jpg)
:bodyمثال على الوسم
لون الخلفية إلى اللTTون الزرق وقمنTTا أيضTTابتغييرقمنا في هذا المثال ltrبتحديد اتجاه النص مTن الشTTمال إلTTى اليميTTن حيTTث تمثTTل القيمTTة
يمين م شمال rtlشمال م يمين و
30
![Page 31: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/31.jpg)
مثال أخر لتغيير الخلفيةم:
صورة الخلفية كما فTTي المثTTالاللون إلى بتغييرقمنا في هذا المثال ثم كتبنا ت=) ثم اسم الصTTورة background الخاصيةحيث قمنا بكتابة
”pic.jpg بين علمتي تنصيص " مع امتدادها
31
![Page 32: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/32.jpg)
</Tag(<br(الوسم سطر جديد بحيث إذا أردت أنعملهو وسم مختص ب> br</وسم
كما أن الوسم يتكون> br</تنزل سطر جديد فقط استخدم الوسم من زوج وحيد فقط
Attributesالخصائص أهم
لهذا الوسمAttributesل توجد خصائص أو
32
![Page 33: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/33.jpg)
<Tag(<h1><h2><h3><h4><h5><h6(الوسم هذا الوسم مخصص للعناوين بحيث إذا أردت أن تكتب عنوان معين
تستطيع من خلل هذا الوسم أن تضع عنوان المقالة بين وسمي
>h1</عنوان المقالة>h1< بحيث تمثل>h1 <أكبر حجم
أصغر حجم للعنوان> h6< وللعنوان
Attributesالخصائص أهم
alignهذه الخاصية مسئولة عن تحديد محاذاة العنوان
عن اليمين-الوسط-الشمال
styleداخل CSSهذه الخاصية تسمح لك بكتابة
الوسم نفسهid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
33
![Page 34: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/34.jpg)
34
![Page 35: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/35.jpg)
35
![Page 36: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/36.jpg)
<Tag(<font(الوسم يتحكم في الخطوط مTTن حيTTث النTTوع وحجTTم و >font></fontوسم س
لون الخط
Attributesالخصائص أهم
faceهذه الخاصية تسمح بتحديد نوع الخط ويمكن
تحديد اكثر من نوع خط Color هذه الخاصية تسمح بتحديد لون الخطSizeهذه الخاصية تسمح لك بتغيير حجم الخط وتأخذ
7 حيث واحد اصغر حجم و7 إلى 1القيمة من
اكبر حجمid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
36
![Page 37: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/37.jpg)
Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
37
![Page 38: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/38.jpg)
<Tag(<b(الوسم مخصص للخط الغامق )boldاختصار إلى ت> b> </b<وسم
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
38
![Page 39: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/39.jpg)
39
![Page 40: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/40.jpg)
<Tag(<i(الوسم مخصص للخط المائل )italicاختصار إلى ت> i> </i<وسم
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
40
![Page 41: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/41.jpg)
41
![Page 42: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/42.jpg)
<Tag(<u(الوسم خط الذي يوضع وهو ال)under lineاختصار إلى ت> هو u> </u<وسم
اسفل الكلمة أو الجملة
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
42
![Page 43: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/43.jpg)
43
![Page 44: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/44.jpg)
<Tag(<strong(الوسم وهو مخصص للخط>bهو نفس الوسم س> strong> </strong<وسم
الغامق
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
44
![Page 45: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/45.jpg)
45
![Page 46: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/46.jpg)
<Tag(<em(الوسم المائل وهو مخصص للخط >iهو نفس الوسم س> em> </em<وسم
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
46
![Page 47: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/47.jpg)
47
![Page 48: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/48.jpg)
<Tag(<sup(الوسم وهو عبارة عن الخط)superاختصار إلى ت> sup> </sup<وسم
المرتفع
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
48
![Page 49: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/49.jpg)
49
![Page 50: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/50.jpg)
<Tag(<sub(الوسم المنخفض> وهو عبارة عن الخط sub> </sub<وسم
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
50
![Page 51: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/51.jpg)
51
![Page 52: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/52.jpg)
<Tag(<big(الوسم > وهو عبارة عن الخط الكبيرbig> </big<وسم
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
52
![Page 53: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/53.jpg)
53
![Page 54: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/54.jpg)
54
![Page 55: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/55.jpg)
<Tag(<small(الوسم الصغير> وهو عبارة عن الخط small> </small<وسم
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
55
![Page 56: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/56.jpg)
56
![Page 57: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/57.jpg)
<Tag(<strike(الوسم
المشطوب> وهو عبارة عن الخط strike> </strike<وسم
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
57
![Page 58: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/58.jpg)
58
![Page 59: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/59.jpg)
<Tag(<s(الوسم
المشطوب الخط >strike<> وهو نفس الوسم s> </s<وسم
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
59
![Page 60: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/60.jpg)
60
![Page 61: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/61.jpg)
<Tag(<tt(الوسم
ة الطباعة> هذا الوسم عبارة عن الخط الموحد ألtt> </tt<وسم
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
61
![Page 62: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/62.jpg)
62
![Page 63: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/63.jpg)
في مقطTTعيمكن استخدام عدة وسوم مع بعضها البعض واحد مع مراعاة عدم تداخل الوسمة مع بعضTTها بطريقTTة
خاطئه
63
![Page 64: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/64.jpg)
الثانيأسئلة الفصل
-غير لون صفحة الويب من اللون البيض إلى اللون الخضر1
بالطريقتين ؟
؟>font<وظيفية الوسم -ماهي 2
؟>h<وظيفية الوسم ماهي - 3
؟>b<وظيفية الوسم ماهي - 4
؟>i<وظيفية الوسم ماهي -5
؟>u<وظيفية الوسم ماهي -6
؟>small<وظيفية الوسم -ماهي 7
؟>big<وظيفية الوسم -ماهي 8
؟>tt<وظيفية الوسم ماهي -9
؟>s<وظيفية الوسم ماهي -10
64
![Page 65: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/65.jpg)
11-ما
هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟
-ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟12
65
![Page 66: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/66.jpg)
الفصل الثالث
في هذا الفصل سوف نتعرف على الوسوم الخاصة في الفقراتوالقوائم
<Tag(<p(الوسم
وهذا الوسم هو لعملParagraph> اختصار إلى p> </p<وسم
فقرة مستقلة او عدة فقرات مستقلة عن بعضها
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
66
Paragraphs and listsالفقرات والقوائم
![Page 67: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/67.jpg)
Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسهalign الفقرة إما من اليمين أو الوسط محاذاةلتحديد
أو الشمالdir الشماللتحديد اتجاه قراءة النص من اليمين إلى
أو العكس
67
![Page 68: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/68.jpg)
لTTم نسTTتخدم> p<لحظ أخي القارئ أننا عنTTدما اسTTتخدمنا الوسTTم للنزول إلى سطر جديد هذا يدل على أن الوسم >br</الوس معه
>p <قام بتنسيق وترتيب الفقرة بنفسه
68
![Page 69: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/69.jpg)
<Tag(<blockquote(الوسم
<blockquote<وسTTم </blockquote <راتTTم الفقTTو وسTTوهالمقتبسة وظيفتها تمييز الفقرات من خل إضافة هامش على يمين
الفقرة أو شمالها وتستطيع وضع عدة أوسمة مع بعض في حالإدراج هوامش
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسهdir الشماللتحديد اتجاه قراءة النص من اليمين إلى
أو العكس
69
![Page 70: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/70.jpg)
70
![Page 71: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/71.jpg)
<Tag(<pre(الوسم أي المنسق مسبقا )Preformatedاختصار إلى ت> pre> </pre<وسم
وظيفة هذا الوسم التحكم في مسافات بين الجمل والكلمات وحتىالحرف
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
71
![Page 72: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/72.jpg)
72
![Page 73: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/73.jpg)
<Tag(<center(الوسم هذا الوسم هو لتوسيط الفقرات أي جعل> center> </center<وسم
النصوص في الوسط
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
73
![Page 74: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/74.jpg)
74
![Page 75: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/75.jpg)
هي لترتيب البيانات في قوائم وهناك نوعان من HTMLالقوائم في
القوائم وهمام:
- القوائم التسلسليةم: وتحتوي على الرقام النجليزية والرقام1
الرومانية والحرف النجليزية الصغيرة والكبيرة
-القوائم الغير التسلسليةم: وتحتوي على الرموز فقط مثل مربعات و2
دوائر صغيرة وغيره من الرموز
75
Listsالقوائم
![Page 76: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/76.jpg)
<Tag(<ol(الوسم القوائم التسلسلية > وهي عبارة عن ol> </ol<وسم
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسهtypeهذا الخاصية تسمح بتحديد نوع القائمة
التسلسلية هل هي أرقام أو أحرف startهذا الخاصية تسمح للقائمة التسلسلية البدء
من أي رقم أو حرف
76
![Page 77: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/77.jpg)
أي 1وقمنا بتحديTTد نTTوعه > ol<في هذا المثال قمنا بتعريف الوسم ولكTTن3وتعني أن تبدأ من الرقTTم startعرفنا الخاصية وأرقام انجليزية
إذا كنت تلحظ فإنه ل يوجد أي نتيجة والسبب في ذلك لم نسTTتخدم مسئول عن تحديد البنود > وهذا الوسمli<الوسم
77
![Page 78: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/78.jpg)
<Tag(<liالوسم ت
وهو> ol></ol<هذا الوسم يوضع بين وسمي > li> </li<وسم والغير تسلسليةمسئول عن تحديد بنود القائمة التسلسلية
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسهtypeهذا الخاصية تسمح بتحديد نوع القائمة
التسلسلية هل هي أرقام أو أحرف startهذا الخاصية تسمح للقائمة التسلسلية البدء
من أي رقم أو حرف
78
![Page 79: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/79.jpg)
وتأخذ startو type> في هذا المثال قمنا بتعريف الوسم ol< وقمنا بتحديد الخاصية وقمنا بتعريف البنود كما في> li<القيمة واحد ثم بعد ذلك قمنا بتعريف الوسم
المثال
79
![Page 80: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/80.jpg)
أمثلة أخرى
80
![Page 81: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/81.jpg)
81
![Page 82: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/82.jpg)
82
![Page 83: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/83.jpg)
والحروف عن طريTTق الخاصTTيةالرقامفي المثلة السابقة استخدمنا type ةTTام عربيTTن أرقTTة مTTوع القائمTTد نTTاموالتي تسمح لك بتحديTTأرق
أو حروف انجليزية الرومانية
83
![Page 84: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/84.jpg)
<Tag(<ul(الوسم التسلسلية الغيرالقوائم > وهي عبارة عن ul> </ul<وسم
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسهtypeهذا الخاصية تسمح بتحديد نوع القائمة من رموز
مختلفة
84
![Page 85: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/85.jpg)
يستخدم في القوائم التسلسلية والغير>li<الوسم التسلسلية
85
![Page 86: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/86.jpg)
86
![Page 87: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/87.jpg)
التي type عن طريق الخاصية الرموز في المثلة السابقة استخدمنا تسمح لك بتحديد نوع القائمة برموز كالدوائر والمربعات
87
![Page 88: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/88.jpg)
لعمل> ulو س >ol<يمكن عمل قائمة مكونة من وسمين
قائمة احترفيه
88
![Page 89: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/89.jpg)
هناك نوع من القوائم تسمى بقوائم التعريفات عندما نريد إدراج قائمة
من التعريفات مثل مصطلح معين وتعريف هذا المصطلح أو قائمة من
المصطلحات فهناك ثلث أوسمة مختصة بذلك وهيم:
أولم:
<Tag(<dl(الوسم هذا الوسم مخصص لتعريف بداية ونهاية قائمة> dl> </dl<وسم
المصطلحات أو التعريفات
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
89
Definition Listsقوائم التعريفات
![Page 90: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/90.jpg)
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
:ثانيا
<Tag(<dt(الوسم لتعريف مصطلحهذا الوسم مخصص لتعريف > dt></dt<وسم
القائمة
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
90
![Page 91: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/91.jpg)
Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
ثالثامً:
<Tag(<dd(الوسم هو لتعريف المصطلح أو شرحههذا الوسم > dd></ddوسم س
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
91
![Page 92: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/92.jpg)
92
![Page 93: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/93.jpg)
أسئلة الفصل الثالث
>؟p></p<- ما وظيفة الوسم 1
>؟pre></pre- ما وظيفة الوسم س2
- ما هي وظيفية القوائم وكم نوع؟3
ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق- 4
من خلل الوسمة التي تعلمته في هذا الفصل فقط؟
ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق- 5
من خلل الوسمة التي تعلمته في هذا الفصل فقط؟
93
![Page 94: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/94.jpg)
ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق- 6
من خلل الوسمة التي تعلمته في هذا الفصل فقط؟
ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق- 7
من خلل الوسمة التي تعلمته في هذا الفصل فقط؟
94
![Page 95: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/95.jpg)
الفصل الرابع
<Tag(<img(الوسم > هو وسم مخصص لدراج صورة في صفحة الويب img<وسم
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
95
Special tagsوسوم خاصة
Imagesالصور
![Page 96: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/96.jpg)
Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسهsrc هذه الخاصية لتحديد مسار الصورة
heightتحديد ارتفاع الصورةwidthتحديد عرض الصورة
altهر عند مرور الماوس علiالصورةىتحديد نصاً ي borderإضافة إطار للصورةVspaceلتحديد المسافة العمودية الفاصلة بين النص
والحافتين العليا والسفلى للصورةHspaceلتحديد المسافة الفقية الفاصلة بين النص
والحافتين اليمنى واليسرى للصورةusemapهذه الخاصية تسمح تقسيم الصورة إلى عدة
روابط في نفس الصورة
لتحديد مسار الصورةم:ثلث طرقيوجد
كلهما في HTML أن تكون الصورة وصفحة الويب الطريقة الولى:
مجلد واحد وهنا تكون طريقة استدعاء مسار الصورة كالتاليم:
96
تحديد مسار الصورة
![Page 97: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/97.jpg)
<img src="pic.png">
هنا قمنا بتعرف الوسم الخاص لدراج الصورة ثم عرفنا الخاصية
)src(لتحديد مسار الصورة بعد ذلك كتبنا اسم الصورة مع امتداده
أن تكون الصورة موجودة في مجلد متفرع عنالطريقة الثانية:
وهنا تكون طريقة الستدعاء HTMLالمجلد الموجود التي فيها صفحة
مسار الصورة كما في الصورة التاليةم:
هنا نقوم بكتابة اسم المجلد تتبعها الرمز "لم ثم اسم الصورة مع
المتداد
أن تكون مجلد صفحة الويب في مكان ومجلدالطريقة الثالثة:
الصورة أيضا في مكان أخر في هذه الحالة تكون طريق الستدعاء كما
في الصورة التاليةم:
97
![Page 98: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/98.jpg)
imagesنكتب "..م لتوجيه المتصفح للخروج من المجلد الى المجلد
حيث توجد الصورة
98
![Page 99: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/99.jpg)
99
![Page 100: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/100.jpg)
لتحديTTد)srcفي هذا المثال قمنا بتعريف الوسم ثTTم عرفنTTا الخاصTTية تمسTTار الصTTورة بعTTد ذلTTك كتبنTTا اسTTم الصTTورة مTTع المتTTداد ثTTم عرفنTTا
وفي الخير حددنا ) pixelبتلتحديد ارتفاع الصورة ) heightالخاصية ت)pixelلتحديد عرض الصورة بت) widthالخاصية ت
)pixel الصورة بالمئوية بدلً من تعرضيمكن تحديد
100
![Page 101: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/101.jpg)
101
![Page 102: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/102.jpg)
102
![Page 103: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/103.jpg)
103
![Page 104: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/104.jpg)
تستخدم الروابط للوصول إلى صفحة معينة في نفس الويب أو إلى
موقع أخر .
<Tag(<a(الوسم لدراج رابط وهذا الوسم) anchor(وهو اختصار إلى > a> </a<وسم
ل يعمل لوحده بل تتطلب اضافة خاصية مسئولة عن توجيه الصفحة)href(وهي
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
104
Linksالروابط
![Page 105: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/105.jpg)
hrefهذه الخاصية مسئولة عن توجيه الرابط إلى
صفحة معينة في نفس الموقع أو إلى موقع أخرname نفس الصفحةفيهذه الخاصية لتوجيه الرابط
هي توجيه الرابط إلى موقع أخرالطريقة الولى:
105
اربع طرق لتعريف الروابط
![Page 106: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/106.jpg)
)hrefأضTTفنا الخاصTTية ت و> a< الوسTTم ريTTفعبتفي هذا المثTTال قمنTTا ثTTم)href="http://www.google.comلدراج الرابط بحيث تكون الصيغة تن googleوهي >a></a<كتبنا الكلمة الدللية بين وسمي
106
![Page 107: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/107.jpg)
توجيه الرابط إلى صفحة معينة من نفس الموقعالطريقة الثانية:
107
![Page 108: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/108.jpg)
في هذا المثال قمنا بإنشاء صفحتين الصفحة الولى هي
)index.html (والصفحة الثانيةتwhous.html بعد ذلك) في مجلد واحد
وأضفنا الخاصية> aالوسمس) قمنا بتعريف index.htmlفي صفحة ت
)href (بالصغية التاليةت نhref="whous.htmlللوصول إلى صفحة (
)whous.html (وعند الضغط على الرابط سوف يقوم بتحويلك إلى
).whous.htmlالصفحة التي قمت بتحديده وهيت
108
![Page 109: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/109.jpg)
رابط للصورة لتوجيهها إلى موقع أخر أوإضافةالطريقة الثالثة:
صفحة معينة في نفس الموقع
109
![Page 110: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/110.jpg)
)hrefوأضفنا الخاصية ت> aفي هذا المثال قمنا بتعريف الوسم س
لتوجيهها إلى صفحة في نفس الموقع وبعد ذلك لم نكتب الكلمة
الخاص بإدراج الصور لتكون> img<الدللية بل قمنا بإضافة الوسم
الصورة هي الدللية للصفحة
بحيث عند) Emailإيميل تلعنوان رسالةتوجيه الطريقة الرابعة:
النقر عليه يقوم بإظهار برنامج البريد اللكتروني
110
![Page 111: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/111.jpg)
)hrefوأضفنا الخاصية ت> aفي هذا المثال قمنا بتعريف الوسم س
بالصيغة التاليةم: emailلتوجيه
“)href="mailto:[email protected](
111
![Page 112: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/112.jpg)
وهي عبارة عن أكثر من رابط في صورة واحدة فقط يتم تقسيمالصورة فيها يتم تقسيم الصورة كما في الصورةم:
112
خرائط الصور
![Page 113: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/113.jpg)
شرح التقسيمم:
circle دائرةTTكل الTTو شTTينيوهTTداثي السTTن الحTTون مTTيتك)X,Y,Radiusوالصادي ونصف القطر ت
rect ونTTنوهو شكل المستطيل يتكTTيني مTTداثي السTTالحللركTTن أعلTTى اليسTTار ثTTم الحTTداثي الصTTادي لTTه ثTTمالحTTداثي السTTيني للركTTن المقابTTل أدنTTى اليميTTن ثTTم
)X1,Y1,X2,Y2الحداثي الصادي تpoly تقيمةوهو شكل المضلعTTع مسTTدة قطTTيمكنك رسم ع
وتكTTTون إحTTTداثياته عبTTTارة عTTTن الحTTTداثي السTTTينيوالصادي لنقطة الولى ثم الثانية وهكذا
)X1,Y1,X2,Y2,X3,Y3,X4,Y4,....Xn,Yn(
<Tag(<map(الوسم هذا الوسم هو لوضع الرسومات على الصورة > map></map<وسم
Attributesالخصائص أهم
name هذا الخاصية تستدعي تنفيذ الخاصيةusemap>img<الموجودة في الوسم
113
![Page 114: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/114.jpg)
<Tag(<area(الوسم هو وسم لرسم الشكل المحدد في الصورة > area<وسم
Attributesالخصائص أهم
Shapeمن خلل هذا الوسم يمكن تحديد الشكل من
الشكال التى شرحناها قبل قليلcoordsهذه الخاصية لتحديد النقط لرسم الشكل في
الصورةaltهر عند مرور الماوس على الصورةiتحديد نصاً ي
114
![Page 115: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/115.jpg)
)src(وعرفنا الخاصية > img<في هذا المثال قمنا بتعريف الوسم
) لتحديد التقسيمusemapلتحديد مسار الصورة ثم عرفنا الخاصية ت
115
![Page 116: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/116.jpg)
كتبنا#) بعد ذلكimageفي الصورة إلى عدة روابط وأعطيناها اسم ت
)name(لتهيئة التقسيم في الصورة وعرفنا الخاصية > map<الوسم
للبدء> areaمن أجل تنفيذ التقسيم بعد ذلك كتبنا الوسم س
بالتقسيم الصورة إلى عدة أقسام
<Tag(<div(الوسم > هذا الوسم مخصص لتقسTTيم جTTزء مTTن الصTTفحةdiv></divوسم س
كإضTTافة لTTون أو CSSبعض الخصائص باستخدام أو عدة أجزاء لعطائه وعند تعريف الوسTTم فTTي الصTTفحة فTTإنه ل تغيير الخط أو إضافة حواف
CSSيiهر تأثيره في الصفحة إل بعد استخدام
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل class ملفهذه الخاصية تسمح لك باستدعاء CSS
116
تقسيم الويب
![Page 117: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/117.jpg)
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسهalign هذه الخاصية مسئولة عن تحديد محاذاة>div<
عن اليمين-الوسط-الشمال
117
![Page 118: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/118.jpg)
<Tag(<hr(الوسم >hr < هذا الوسم اختصار إلىHorizontal Rule أو المسطرة الفقية
يستخدم لتسطير الصفحة من أجل تقسيمها
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل sizeلتحديد سمك المسطرة
widthلتحديد عرض المسطرة اما بتpixel (أو
بالمئويةت%)alignلتحديد المحاذاة للمسطرة سواء من اليمين أو
أو الشمالالوسطcolorلدراج لون للمسطرة
noshadeلجعل خط المسطرة غير غائر
118
![Page 119: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/119.jpg)
119
![Page 120: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/120.jpg)
120
![Page 121: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/121.jpg)
<Tag(<embed(الوسم >embed <هذا الوسم يستخدم لتشغيل الفيديوهات والفلشات
والصوات على المتصفح
Attributesالخصائص أهم
srcلتحديد مسار الفيديو أو الفلش من أجل تشغيله على المتصفح
heightلتحديد ارتفاع المشغل widthلتحديد عرض المشغلtype لتحديد موصفات المشغل
121
![Page 122: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/122.jpg)
122
![Page 123: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/123.jpg)
<Tag(<marquee(الوسم >marquee></marquee <بيهTTو شTTرك وهTTص المتحTTم للنTTذا الوسTTه
بالشريط المتحرك الذي يiهر في الخبار
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSSمن سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخلالوسم نفسه
Bigcolorلتحديد لون للشريط المتحرك heightلتحديد ارتفاع الشريط widthلتحديد عرض الشريطalignأولوسطلتحديد المحاذاة سواء من اليمين أو ا
الشمالbehavior :لتحديد سلوك النص المتحرك وتأخذ ثلث قيم م
1-scroll تيتحرك النص بنفس التجاه من الجانب إلى
الخر بصورة مستمرة وهي الحالة الفتراضية)
123
![Page 124: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/124.jpg)
2-slideتيتحرك النص مرة واحدة من الجانب إلى الخر)
3-alternateتيتحرك النص جيئة وذهابا من جانب إلى أخر)
directionلتحديد سير اتجاه النص في الشريط وتأخذ القيمالتاليةم:
1-rtlتمن اليمين إلى الشمال في اللغة العربية)
2-ltrتمن الشمال إلى اليمين في اللغة النجليزية)
loopلتحديد عدد المرات الذي يتحرك بها النص وتأخذقيم عددية إذا اردت أن يتحرك النص بعدد ل
infiniti أو 1نهائي نستخدم -
scrollamountلتحديد المسافة بين كل لقطة وأخرى للنص وتأخذ قيم عددية صحيحة
scrolldelayلتحديد المسافة الزمنية الذي يستغرقه النصفي القفز بين كل خطوة وأخرى وتأخذ قيم عددية
ولكنها تمثل بالميلي ثانية
124
![Page 125: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/125.jpg)
125
![Page 126: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/126.jpg)
أسئلة الفصل الرابع
- كم طريقة لتحديد مسار الصورة مع الشرح لكل طريقة ؟1
؟-كم طريقة للضافة رابط مع الشرح لكل طريقة2
؟>div<- ما هو الوسم 3
؟ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق-4
؟ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق-5
126
![Page 127: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/127.jpg)
؟ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق-6
الفصل الخامس
فمن خلل الجداول HTML من أهم المواضيع في الجداولتعد
تستطيع ترتيب وتنiيم صفحة الويب إذا كانت تحتوي على معلومات
مهمة جدا في أي موقع فأغلب المواقع تحتوي وتعتبر الجداولة كثير
على الجداول وطريقة إضافة وسوم الخاصة بالجداول سهلة سأقوم
بشرحها بالتفصيل حتى ل يصعب المر عليك
<table></table>وسم تعريف الجدول<tr></tr> كوني الصف في الجدول وتعريفوسم
>table></tableبين وسمي س<td></td>وسم تعريف الخلية للصف في الجدول
> tr></trويكون بين وسمي س
127
Tablesالجدوال
شرح الوسوم
![Page 128: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/128.jpg)
<Tag(<table(الوسم >table></table < دولTTف الجTTم لتعريTTذا الوسTTدونهTTوسوبTTذا الTTه
تعرف الصفوف والخليا في الجدولليمكن
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
الشمال أو العكس في الجدولإلى widthلتحديد عرض الجدول أما بتpixel((%أو بالمئويةتalignلتحديد المحاذاة للجدول سواء من اليمين أو
أو الشمالالوسطbgcolorلدراج لون للجدول
128
![Page 129: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/129.jpg)
background لدراج صورة للجدولCELLSPACINGلتحديد المسافة بين كل خلية وأخرىCELLPADDINGتحديد الهوامش لخليا الجدول
<Tag(<tr(الوسم >tr></tr < دولTTف الجTTهذا الوسم لتعريTTم وبTTذا الوسTTندون هTTليمك
تعرف الصفوف والخليا في الجدول
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
الشمال أو العكس إلى bgcolorلتغيير لون الصف في الجدول
backgroundلضافة صورة في الصفalignتحديد المحاذاة للجدول سواء من اليمين أو
129
![Page 130: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/130.jpg)
القيمذ وتأخ أو الشمال الوسط)right, centre, left(
VALIGN نTTTواء مTTTدول سTTTاذاة للجTTTد المحTTTوقتحديTTTأوف القيم ذتحت وتأخالمنتصف أو
)top, middle, bottom(
<Tag(<td(الوسم >td></td في الجدول>هذا الوسم لضافة خليا داخل الصف
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
dirمسئولة عن تحديد اتجاه قراءة النص من اليمين
الشمال أو العكس إلى widthلتحديد عرض الجدول أما بتpixel((%أو بالمئويةت
130
![Page 131: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/131.jpg)
alignلتحديد المحاذاة للجدول سواء من اليمين أو أو الشمالالوسط
bgcolorلدراج لون للجدولbackground لدراج صورة للجدول
colspanلدمج أكثر من خلية في الصف الواحدrowspanلدمج أكثر من صف في الجدول
131
![Page 132: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/132.jpg)
132
![Page 133: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/133.jpg)
لرسTTم borderفي هTTذا المثTTال قمنTTا بTTإدراج جTTدول وعرفنTTا الخاصTTية الخصائص بعTTدها عرفنTTاعض بحواف أو اطار للجدول ثم بعد ذلك عرفنا
عرفنا بعض الخصائص كمTTا هTTوولدراج صف في الجدول > tr<الوسم لدراج خليTTا فTTي> td<الوسTTم موجود في المثال ثم بعد ذلك عرفنا
الصف وعرفنا بعض الخصائص لها
133
![Page 134: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/134.jpg)
colspanفTTي هTTذا المثTTال قمنTTا بتعريTTف فTTي الصTTف الثTTاني الخاصTTية بحيث يقوم بدمج خليتن في صف واحد 2 القيمة وأعطيناها
134
![Page 135: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/135.jpg)
rowspan الخاصية الولفي هذا المثال قمنا بتعريف في الصف بحيث يقوم بدمج صفين 2 القيمة وأعطيناها
<Tag(<caption(الوسم >caption></caption ويكتب بينعنوان للجدول >هذا الوسم لضافة
>table></tableوسمي س
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
135
![Page 136: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/136.jpg)
136
![Page 137: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/137.jpg)
أمثلة على الجداول
137
![Page 138: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/138.jpg)
138
![Page 139: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/139.jpg)
139
![Page 140: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/140.jpg)
140
![Page 141: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/141.jpg)
أسئلة الفصل الخامس
ما هي الوسوم لبناء جدول في الويب؟-1
؟ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق-2
141
![Page 142: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/142.jpg)
؟ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق-3
؟ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق-4
142
![Page 143: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/143.jpg)
الفصل السادس
في صفحةأقسام الويب إلى عدة صفحةالطار هو باختصار تقسيم واحدة بحيث كل قسم يحتوي على صفحة ويب خاص به.
<Tag(<frameset(الوسم >frameset></frameset<هذا الوسم لضافة إطار في صفحة الويب
يجب عليك> frameset<وهنا عليك أن تلحظ عند إضافة وسم
> وإل لن يiهر أي إطارsetframe<بالوسم > body<استبدال الوسم
في الصفحة
Attributesالخصائص أهم
colsهذه الخاصية لتحديد عدد العمدة وأحجامها في
الطار وتأخذ القيمة إما بالمئوية أو البيكسلrows وأحجامها فيالصفوفهذه الخاصية لتحديد عدد
الطار وتأخذ القيمة إما بالمئوية أو البيكسل
143
Framesالطارات
![Page 144: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/144.jpg)
frameborder هذه الخاصية لتحديد ظهور أو أخفاء الطار من
الصفحة
<Tag(<frame(الوسم >frame></frame< فحةTTار الصTTافة مسTTم لضTTورة هذا الوسTTنأو صTTم
في صفحة الويب srcخلل الخاصية
Attributesالخصائص أهم
srcهذه الخاصية تسمح بتحديد مسار الصفحة أوالصورة
nameلتحديد التنسيق بين الطارات و أسلوب عرضهاmarginheight لتحديد مقدار المسافة الفارغة للهوامش
السفلي والعلويmarginwidthتحديد مقدار المسافة الفارغة للهوامش اليمين
والشمالscrolling هذه الخاصية لتحديد أشرطة المتصفح وتأخذ
ثلث قيمم:1-scrolling=yes( iهر شريط المتصفحي )2-scrolling=no( iهر شريط المتصفحيل )3-scrolling=auto( iهر تلقائي من نفسهي )
noresizeهذه الخاصية تسمح بعدم التحكم في حجمالطار من تكبير أو تصغير
144
![Page 145: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/145.jpg)
على الطاراتأمثلة
والثانيTTةت) frame1.htmlالولTTىت) HTML( صTTفحاتثلث قمنTTا بإنشTTاء frame2.html (رةتTTTوالخيframemain.html( فTTTا بتعريTTTث قمنTTTبحي>
frameset < يTTف)framemain.html (ية تTTا الخاصTTك عرفنTTد ذلTTبعcols(
145
![Page 146: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/146.jpg)
لتحديد كم عمود للصفحة حيTث كTل عمTود يمثTTل صTTفحة واحTدة بعTدهاحTTددنا صTTفحتين srcومTTن خلل الخاصTTية >frame<أضفنا الوسمين من
وت)frame1.htmlلكل الوسTTTمين وعنTTTد التنفيTTTذ نTTTرى ان الصTTTفحتين تframe2.html (تم عرضهما في صفحة تframemain.html(
146
![Page 147: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/147.jpg)
إلىcolsقمنا في هذا المثال بتقسيم الصفحة عن طريق الخاصية صفحة مع تحديد مسارى يحتوي علمود بحيث كل ععمدةثلث أ
> frame الوسم سالتي بداخل srcالخاصية من خلل الصفحة لها
147
![Page 148: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/148.jpg)
هذا المثال نفس نفس السابق ولكن الختلف فيه هو قمنا بتعريفويعني هذا تقسيم الصفحة إلى ثلث صفوف كما في rowsالخاصية
المثال
وأعطيناها القيمة colsفي هذا المثال قمنا بتعريف الخاصية من مساحة 30) حيث أن العمود الول يأخذ مساحة 30%%(*,
الصفحة أما العلمة ت*)فتعني خذ باقي مساحة الصفحة المتبقية أي
148
![Page 149: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/149.jpg)
30ففي العمود الول يأخذ % 100يعني أن مساحة الصفحة هي%% وهكذا70والعمود الثاني يأخذ
المثال واضح ل يحتاج إلى شرح حاول أن تشرحه بنفسك كاختبار
149
![Page 150: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/150.jpg)
بسيط لك
150
![Page 151: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/151.jpg)
الول قمنا>frmaesetفي هذا المثال قمنا بتعريف اثنين من الوسم س
أي أن الصف الول) 30*,%وأعطيناها القيمة ت rowsبتعريف الخاصية
والصف الثاني يأخذ باقي المساحة المتبقية من)30يأخذ مساحة ت%
>frameset<داخل > frame<حجم الصفحة ثم بعد ذلك أضفنا الوسم
داخلثاني > frameset<بعد ذلك قمنا بإضافة لها srcالولى وحددنا
>frameset< الول وحددنا الخاصية cols %أي )20,%60مع القيم ت
>frame<بعد ذلك أضفنا وسمين أن الصف الثاني يتكون من عمودين
لهما srcوقمنا بتحديد
أتمنى أن يكون الشرح واضح
151
![Page 152: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/152.jpg)
تعتبر من أهم الخصائص التي تأتي من الوسم nameالخاصية
>frame < صفحة في الطارالهذه الخاصية تسمح لك بجلب وعرض
مع بقاء جميع الطارات موجوده وهي شبيه الوصلت التشعبية أو
الروابط لحد ما إل أن الروابط عند الضغط عليه يقوم بفتح وعرض
من المتصفح بعكس الطار كما في المثالةالصفحة في نافذه جديد
التاليم:
152
name الخاصية
![Page 153: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/153.jpg)
)frma1.htmlتصفحة
153
![Page 154: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/154.jpg)
)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و قمنا بإضافة رابط فوعرفنا الخاصTTية) src=frame1.html(وهذا الرابط يوصلك إلى الصفحة
target مTTي الوسTTودة فTTة الموجTTس القيمTTا نفTTوأعطيناهframe يTTفبعTTد التنفيTTذ عنTTد الضTTغط علTTى)pic(وهTTي )frame1.htmlالصTTفحة ت
فTTي الطTTار الTTذي يوجTTد فيTTه fram1.htmlالصورة سوف تiهTTر صTTفحةوهكذا frame2.htmlصفحة
154
![Page 155: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/155.jpg)
أسئلة الفصل السادس
- ما هي الطارات؟1
>مع مثالframeset) في الوسم سrows- ما هي وظيفة الخاصية ت2
>مع مثالframeset) في الوسم سcols- ما هي وظيفة الخاصية ت3
>frame- ما هي وظيفة الوسم س4
>مع مثالframe) في الوسم سname- ما هي وظيفة الخاصية ت5
؟ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق-6
155
![Page 156: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/156.jpg)
؟ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق-7
؟ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق-8
ليس شرطا ان يكون حجم العمدة8و7و6في السئلة
والصفوف دقيقية المهم ان تكون نفس النتيجة
156
![Page 157: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/157.jpg)
الفصل السابع
إن النماذج مهمة جدا في تصميم الموقع واكاد اجزم بإن النماذج تكاد
ل تخلو من المواقع الويب وذلك لهميتها في التفاعل مع الموقع
وصاحبه من جهة والزوار من جهة اخرى كعملية تسجيل في منتدي
او إضافة تعليقات ....الخ
text لضافة نص من خلل الوسم<input type=”text”>
passwordلضافة كلمة سر من خللالوسم
<input type=”password”>
157
formsالنماذج
أشكال النماذج
![Page 158: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/158.jpg)
Radio buttonللختيار الواحد فقط حيث أنradioتسمح لك باختيار خيار
واحد فقط من خلل الوسم<input type=”radio”>
checkboxللختيار المتعدد حيث أنcheckboxيسمح لك باختيار
أكثر من خيار واحد من خللالوسم
<input type=”checkbox”>
fileلرفع الملفات من خلل الوسم<input type=”file”>
submitالزر يمكن أن يقوم بأكثر من عملية كحفظ او ارسال بيانات
...الخ من خلل الوسم <input type=”submit”>
button نفسsubmit
textareaلضافة نصوص أو تعليقات الخاصةtextareaوهي شبيه ب
بالفيس بوك أو تويتر من خلل>textarea></textareaالوسم س
selectوتسمى القائمة المنسدلةوتسمح لك باختيار خيار واحد
أو أكثر من خلل الوسم >select></select<
158
![Page 159: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/159.jpg)
forms بخصTTوص HTML5هنTTاك اضTTافات كTTثيره فTTي وسوف تتعرف عليها فTTي الجTTزء الثTTاني مTTن الكتTTاب إن
شاء ا
<Tag(<form(الوسم >form></form< حتى تضيف الشكال السابقة من النماذج وتعمل
formيجب أن تتم بين وسمي بشكل صحيح
Attributesالخصائص أهم
actionمTTوف يتTTذي سTTوان الTTدد العنTTية تحTTذه الخاصTTهارسTTال بيانTTات النمTTوذج اليTTه سTTواء كTTانت صTTفحة
خاصة مبنية بلغة برمجة خاصة أو ايميل methodهذه الخاصية تحدد الطريقة التى سيتم بها
التعامل من العنوان المحدد في الخاصية السابقةaction:وتأخذ قيمتين وهمام
1 -getم: تستخدم في حال إذا كانت عمليةالمعالجة داخلية أي تتم داخل السيرفر
2-postم: تستخدم في حال إذا كانت عمليةالمعالجة خارجية كإرسال بيانات الى اليميل مثل
enctype هذه الخاصية مهمة جدا وهي تحدد طريقة
159
![Page 160: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/160.jpg)
الترميز التى سيتم ارسال البيانات ولديهاطريقتين لتحديد الترميز
text/plain-1application/x-www-form-urlencoded-2
160
![Page 161: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/161.jpg)
161
![Page 162: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/162.jpg)
<Tag(<Input(الوسم >Input<وهو الوسم الذي يعرف شكل النماذج من خلل الخصائص
التابعة لهذا الوسم
Attributesالخصائص أهم
typeذيTTكل الTTد شTTن تحديTTئولة عTTية مسTTهذه الخاص> سواء كان زر أو نص أوInputيiهر في الوسم س
متعدد الختيار ...الخ هيم:والشكال
text-1password-2
hidden-34-radio
checkbox-5submit-6
reset-78-button
وهنTTاكHTML4طبعTTا هTTذه الشTTكال فقTTط فTTي HTML5اضافات كثيرة في
nameثTTم حيTTل للوسTTم حقTTد اسTTية لتحديTTهذه الخاصتمكنك هذه الخاصTTية مTTن اسTTتخدام هTTذا الحقTTل
PHPفي البرمجة بلغات متقدمة مثل valueلتعيين قيمة للحقل يمكن استخدامها كتوضيح
ما هو هذا الحقل مثل كلمة المرور size لتحديد حجم الحقل
162
![Page 163: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/163.jpg)
maxlength لتحديد الحد القصي من عدد الحروف في النصheight لتحديد ارتفاع الحقل اذا كانtype هو textأو
password
widthلتحديد طول الحقلchecked لتحديد الختيار الفتراضي اذا كانtype هو radio
checkboxأو
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل Style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسهplaceholderتستخدم هذه الخاصية من أجل وصف او
المساعدة مTTاذا المسTTتخدم سTTوف يكتTTب داخTTلtext, password هو typeهذا الحقل اذا كان
163
![Page 164: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/164.jpg)
> و ايضا قمنا بتعريفformفي هذا المثال قمنا بتعريف الوسم س
> ثلث مرات كل مرة لها خاصية مختلفة وهم inputالوسم س
text, password, radioوقمنا بتحديد الخواص التابعة لهم وهي
مشروحة فوق يمكنك الرجوع اليها
164
![Page 165: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/165.jpg)
165
![Page 166: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/166.jpg)
radiocheckbox
- تستطيع اختيار خيار واحد من1عدة اختيارات
- تكون اسماء الحقول موحدة2والقيم مختلفة
- تستطيع اختيار خيار واحد أو1أكثر من عدة اختيارات
- تكون اسماء الحقول موحدة2والقيم ايضا موحدة
166
checkbox و radioالفرق بين
![Page 167: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/167.jpg)
167
![Page 168: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/168.jpg)
<Tag(<select(الوسم >select></select <وهو وسم القائمة المنسدلة تستطيع اختيار اكثر
> ويجب كتابةselectمن اختيار في القائمة وحتى يعمل الوسم س
> اي هكذاselect> بين وسمي سoption> </optionوسميس
<select><option>العنصر الول</option></option>العنصر الثاني</option></select>
> هو مسئول عن تحديد العناصر في الوسمoptionلن وسم س
Attributesالخصائص أهم
nameثTTم حيTTل للوسTTم حقTTد اسTTية لتحديTTهذه الخاصتمكنك هذه الخاصTTية مTTن اسTTتخدام هTTذا الحقTTل
PHPفي البرمجة بلغات متقدمة مثل
sizeلتحديد حجم القائمة المنسدلةmultiple تسمح لك بالختيار المتعدد عن طريق الضغط
ثم تحديد العناصرCtrlباستمرار على زر id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل
168
![Page 169: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/169.jpg)
class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجيstyle هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
<Tag(<option(الوسم >option></option <هذا الوسم مسئول عن إضافة العناصر في
القائمة المنسدلة وبدونه ليمكن عرض العناصر في القائمة
Attributesالخصائص أهم
selectedوتعني الختيار الفتراضي لول عنصر في القائمة
المنسدلة سوف يiهرvalue لعطاء قيمية لكل عنصر
id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
169
![Page 170: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/170.jpg)
للوسمCSSوتنفيذ أوامر Class خلل style هذه الخاصية تسمح لك بكتابةCSS داخل
الوسم نفسه
<Tag(<optgroup(الوسم >optgroup></optgroup <هذه الوسم ايضا يوضع بين وسمي
>selectوهو شبيه بالوسم س <optionولكن الختلف بينهما وهو <
> يقوم بجعل القائمة المنسدلة تحتوع علىoptgroupأن الوسم س
> خاصة عن الخرى optionمجموعات لها س
Attributesالخصائص أهم
labelتستخدم لعطاء اسم للمجموعةid ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
170
![Page 171: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/171.jpg)
style هذه الخاصية تسمح لك بكتابةCSS داخلالوسم نفسه
عند الضغط علىها سوف تفتح القائمة المنسدلة كما في الصور التالية
171
![Page 172: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/172.jpg)
172
![Page 173: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/173.jpg)
المثال هذا شبيه بالمثال السابق ولكن الختلف في هذا المثال
173
![Page 174: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/174.jpg)
لتكبير حجم القائمة المنسدلةsizeاستخدمنا الخاصية
والتي تسمح لك باختيارmultipleفي هذا المثال استخدمنا الخاصية
174
![Page 175: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/175.jpg)
Ctrlأكثر من خيار واحد بالضغط باستمرار على زر
175
![Page 176: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/176.jpg)
> مTTن اجTTل تصTTنيفoptgroupفTTي هTTذا المثTTال اسTTتخدمنا الوسTTم س القائمة المنسدلة كما في المثال
<Tag(<textarea(الوسم >textarea></textarea < وهو شبيه بالحقل النصي العاديtextال انه
العادي وهو يستخدمtextيحتوي على خصائص تجعله افضل من
لكتابة التعليقات أو الرسائل كما في الفيس بوك أو تويتر
Attributesالخصائص أهم
nameثTTم حيTTل للوسTTم حقTTد اسTTية لتحديTTهذه الخاصتمكنك هذه الخاصTTية مTTن اسTTتخدام هTTذا الحقTTل
PHPفي البرمجة بلغات متقدمة مثل id ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر Class خلل
176
![Page 177: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/177.jpg)
style هذه الخاصية تسمح لك بكتابةCSS داخلالوسم نفسه
cols لتحديد العرضrowsلتحدي الرتفاعwarp لتحديد طريقة اللتفاف النص فيtextareaوتأخذ
قيمتينم:
1-softم: وهي الفتراضية اي عند ارسال معلومات
اكثر من سطر تلن يلتف على عدةtextareaفي
اسطر)سوف تكون عبارة عن سطر واحد عند
المستقبل
2-hard م: اي عند ارسال معلومات فيtextarea
اكثر من سطر تسيلتف على عدة اسطر)سوف
اي اذا كانتtextareaتكون كما هي منسقة في
ثلث اسطر سوف ترسل الى المستقبل ثلث
اسطر وهكذا readonly لجعلtextarea للقراءة فقط
177
![Page 178: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/178.jpg)
178
![Page 179: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/179.jpg)
<Tag( <fieldset(الوسم >fieldset></fieldset<رTTترتيب العناصTTادة لTTم عTTذا الوسTTتخدم هTTيس
المشتركة مع بعض علTTى سTTبيل المثTTال معلومTTات الTTدخول والعناصTTرالمشتركة في معلومات الدخول هي اسم المستخدم وكلمTTة المTTرور
> legendويتم تسمية المجموعة من خلل الوسم س
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSSمن سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر ID خلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخلالوسم نفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمينالشمال أو العكسإلى
179
fieldsetوسم
![Page 180: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/180.jpg)
<Tag( <legend(الوسم >legend></legendوهو الوسم المسئول عن تسمية المجموعة<
التي تحتوي على عناصر مشتركة ويتم كتابة الوسم بين وسمي
<fieldset><legend>اسم المجموعة </legend>
</fieldse>
Attributesالخصائص أهم
id ملفهذه الخاصية تسمح لك باستدعاء CSSمن سواء من نفس الملف أو من ملف خارجي
للوسمCSSوتنفيذ أوامر IDخلل Class ملفهذه الخاصية تسمح لك باستدعاء CSS
من سواء من نفس الملف أو من ملف خارجي للوسمCSSوتنفيذ أوامر Class خلل
style هذه الخاصية تسمح لك بكتابةCSS داخلالوسم نفسه
dirمسئولة عن تحديد اتجاه قراءة النص من اليمينإلى الشمال أو العكس
180
![Page 181: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/181.jpg)
>legend> ثم عرفنا الوسم سfieldsetفي هذا المثال عرفنا الوسم س> وذلك من أجل تسمية المجموعة التى فيهاfieldsetبين وسمي س
Admin Loginعناصر مشتركة وقمنا بتسمية المجموعة
181
![Page 182: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/182.jpg)
أسئلة الفصل السابع
) ؟forms- ما هي فائدة استخدام النماذج ت1
> مع شرح الثلث الخصائص المهمة ؟form- ما هو الوسم س2
مع مثال ؟type> مع شرح خاصية input- ما هو الوسم س3
> مع مثال ؟select- ما هو الوسم س4
> مع مثال؟textarea- ما هو الوسم س5
> مع مثال ؟legend> و الوسم سfieldset- ما هو الوسم س6
182
![Page 183: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/183.jpg)
ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟- 8
183
![Page 184: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/184.jpg)
ملحiةم: ليTTس شTTرط اضTTافة اللTTوان كمTTا موجTTودة فTTيالصورة في الفورم سوف تتعلم كيفية إضافة اللوان في
CSSالفصل التاسع والذي يتكلم عن
184
![Page 185: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/185.jpg)
الفصل الثامن
<Tag( <mate(الوسم >metaنTTب بيTTويب يكت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ل
محركات البحث وكل هذا يتم من خلل الخصائص التي تتوفر في>metaحيث يمكن ادارج أكثر من وسم س <meta لتحديد المور <
Attributesالخصائص أهم
equiv لتحديد خصائص الصفحة ككل وتأخذ القيمةcontent-type وهي تعني تحديد نوع المحتوى
nameنTTد تعييTTتي نريTTات الTTدة البيانTTوان وحTTد عنTTلتحديقيمها وتأخذ القيمم:
1 -keywordم: من أجل تحديد الكلمات المفتاحية2 -descriptionم: لوصف الصفحة3-authorم: لدارج اسم صاحب الموقع4-copyrightم:لحفظ الحقوق الملكية
185
meta and symbolsالميتا والرموز
![Page 186: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/186.jpg)
contentلتحديد المحتوى التي نريد اسنادها للخاصتين السابقتين
charsetيتمTTتي سTTفحة الTTز الصTTد ترميTTتخدم لتحديTTتسعرض الصفحة كاللغة العربية أو النجليزية و.الTTخ
لنه يقبTTل اللغTTةUTF-8ويفضل استخدام الترميز العربية والنجليزية ولغات أخرى
186
![Page 187: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/187.jpg)
187
![Page 188: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/188.jpg)
تكتب بصغية معينة وليس بصغيتها العاديةHTML هناك رموز في باستخدام الوسوم مثل رمز أكبر س او أصغر > أو @ ...الخ هذه كلها
بصغية معينة كما هو موضح HTMLرموز تكتب في
188
الرموز
![Page 189: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/189.jpg)
189
![Page 190: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/190.jpg)
190
![Page 191: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/191.jpg)
191
![Page 192: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/192.jpg)
192
![Page 193: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/193.jpg)
193
![Page 194: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/194.jpg)
أسئلة الفصل الثامن
>meta- ما هو الوسم س1
> meta في الوسم سname- اشرح الخاصية 2
>meta في الوسم سcharset- اشرح الخاصية 3
>meta في الوسم سcontent- اشرح الخاصية 4
194
![Page 195: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/195.jpg)
الفصل التاسع
ولكنها" ليست لغه برمجه"هي ) Cascading Style Sheets(هي اختصار إلى تقنية تهتم بتحديد شكل وتصميم المواقع ، وينطبق ذلك على اللوان والخطوط
.والصور والخلفيات التي تستخدم فى الصفحات ، بمرونة وسهولة تامه
فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلل ملف واحد- 1 .)css بامتداد م
إضافة مزيد من الحترافية والسهولة لتصميم المواقع - 2
لن ترهقك بعد اليوم طلبات العملء والتعديلت الكثيرة التى يطلبوها ويروها سهله - 3 . ولكنك تراها مرهقه مع كثرة العمال
195
)CSS(ماهي فوائد
CSS
CSS ماهي
![Page 196: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/196.jpg)
تقليل حجم صفحات الموقع، مما يعني أن المستخدم سيقضي وقتاً أقل لكي تظهر له - 4
.صفحات الموقع بشكل كامل
:CSS يوجد ثلث طرق لتعريف
داخTTل الصTTفحات والكTTثر CSSتوجد عدة طTTرق لتعريTTف خصTTائص -1 إستخداماً و هو عمل ملف نصي منفصل وتسميته بإي أسم المهم ان
يحتوى على كافة التنسيقات ويتTTم ربطTTة بTTالموقع cssيكون بالمتداد ). External( :وتسمي هذه الطريقة
196
داخل الصفحات )CSS طرق تعريف ت
![Page 197: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/197.jpg)
2- Tالطريقة الثانية هو ان تطبق خصائص الCSS مباشرة في أوسمة HTMLوتسمى هذه الطريقة )in-line(
197
![Page 198: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/198.jpg)
فTTي أعلTTى CSSالطريقة الخيرة وفيها يتTTم إضTTافة جميTTع خصTTائص -3 الصفحة بين وسمين لتعريفهم على المتصفح وتسمي هذه الطريقة
)Internal( ومنه تطبق هذه الوامر على جميع فقرات الصفحة
198
![Page 199: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/199.jpg)
<Tag( <link(الوسم >linkمي سTTن وسTTفحة بيTTهذا الوسم يكتب في أعلى الص <head<
وظيفته الساسية هي ربط ملفات خارجية مع صفحة الTTويب الخTTاص CSSبك مثل ملفات
Attributesالخصائص أهم
hrefلتحديد مسار الملف وطريقة تعريف المسار نفس>imgطريقة تعريف مسTTار الصTTورة فTTي الوسTTمس
> إذا نسيتimg*راجع الوسم س
relويبTTلتحديد العلقة بين الوثيقة الحاليةت صفحة ال)CSSالحاليTTة) والمسTTتند المرتبTTط معاهTTات ملTTف
نكتب م:CSSوفي حالة ملفات rel=”stylesheet”
type لتحديد نوع الوثيقةتملفCSSاتTTوفي حالة ملف (CSS:نكتبم
type=”text/css”
199
![Page 200: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/200.jpg)
) class) أو الخاصية تid باستخدام الخاصية تCSS يمكن تحديد ) وهذه الخصائص موجودة في الوسمة .style أو الخاصية ت
):class) و تidملحiات عند استخدام الخاصيةت•
) فTTي الوسTTم يجTTب أن نقTTوم بإعطTTائهid-عند تعريف الخاصTTية ت1اسم تاي اسم يدل على معنى) حتى تعود اليه في حال نسيته
)يجب أن نقومclass) وكذلك الحال مع الخاصية تidالوظيفة لهذا تبإعطائه اسم
) للوسم في حTTال اذا كTTان ملTفclass) و تid- طريقة استدعاء ت2CSSةTTون بالطريقTارجي تكTTف خTTويب أو ملTTفحة الTTس الصTTفي نف
التاليةم:
) نقوم بتعريف الرمز ت#) ثم اسمid في الخاصية ت) id(
) نقوم بتعريف الرمز ت.) ثم اسمclass في الخاصية ت) class(
200
CSSطريقة تحديد
![Page 201: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/201.jpg)
وبعTTدtext)و اعطينTTاه اسTTم idفي هذا المثال قمنا بتعريف الخاصية ت) مسTTبوقid داخل الصفحة وقمنا بتعريف اسTTم تCSSذلك عرفنا ملف
color واعطيناه اللون الزرق من خلل الخاصية CSSبالرمز ت#) داخل
201
![Page 202: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/202.jpg)
text)و اعطينTTاه اسTTم classفي هTTذا المثTTال قمنTTا بتعريTTف الخاصTTية ت)class داخل الصفحة وقمنا بتعريTTف اسTTم تCSSوبعد ذلك عرفنا ملف
واعطينTTاه اللTTون الزرق مTTن خللCSSمسTTبوق بTTالرمز ت.) داخTTل
202
![Page 203: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/203.jpg)
colorالخاصية
) ويمكTTنTags تعمل علTTى جميTTع الوسTTوم تCSSجميع خصائص أوid من خلل تعريف الوسم نفسه أو من الخاصTTية CSSتحديد class أو style
)CSS( background-color تسمح لك بإضافة لون لخلفية الصفحة أو لوسم محدد ...الخ ويمكنتعريTTف اللTون بطريقتTن تTم ذكرهمTTا فTي الفصTل الثTTاني مTن الكتTTاب
يمكنك الرجوع الى الفصل الثاني
203
CSSخصائص
background
![Page 204: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/204.jpg)
Background-color قمنTTا بتغييTTر لTTون الصTTفحة مTTن خلل الخاصTTيةclass أو id مباشرة بدون استخدام الخاصية bodyللوسم
204
![Page 205: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/205.jpg)
205
![Page 206: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/206.jpg)
206
![Page 207: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/207.jpg)
id حيTث عرفنTا اسTTم id> مTن خلل divقمنا بتغيير اللTون للوسTم س واعطيناهTTTا اللTTTونbackground-color وعرفنTTTا الخاصTTTية cssداخTTTل الخضر
207
![Page 208: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/208.jpg)
حيTث عرفنTTا اسTTمclass> مTن خلل divقمنا بتغيير اللون للوسTTم سclass داخل css وعرفنا الخاصية background-colorونTTواعطيناها الل
الصفر
)CSS( background-image تسمح لك بإضTTافة صTTورة بTTدل مTTن اللTTون للصTTفحة أو لوسTم محTTدد...الخ ويمكن تعريف مسار الصورة بنفTTس الطريقTTة الTTتى يتTTم تعريTTف
> imgمسار الصورة في الوسم س >img *راجع الوسم س
208
![Page 209: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/209.jpg)
209
![Page 210: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/210.jpg)
Background-image قمنا بإضافة صورة للصTTفحة مTTن خلل الخاصTTية ثم مسار الصورة والسم url حيث عرفنا bodyللوسم
)CSS( background-repeatتسمح لك هTTذه الخاصTTية بتكTTرار أو عTTدم تكTTرار الصTTورة فTTي الصTTفحة
عمودياً و افقياً أو كلهما وتأخذ القيم التاليةم:1-repeat: ًتكرار الصورة عمودياً و أفقيا2-no-repeat: ًعدم تكرار الصورة عمودياً و أفقيا3-repeat-x: تكرار الصورة عمودياً فقط 4-repeat-y: تكرار الصورة أفقياً فقط
210
![Page 211: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/211.jpg)
211
![Page 212: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/212.jpg)
Background-image قمنا بإضافة صورة للصTTفحة مTTن خلل الخاصTTية ثم مسار الصورة والسTTم وايضTTا قمنTTاurl حيث عرفنا bodyللوسم
background-repeatبمنTTع تكTTرار الصTTورة فTTي الصTTفحة مTTن خلل no-repeatوأعطيناه القيمة
)CSS( background-positionتسمح لك هذه الخاصية بتغيير موضع الصورة أو مكانها وتأخذ القيم م: 1-left2-right3-top4-bottom5-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
![Page 213: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/213.jpg)
213
![Page 214: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/214.jpg)
فTTي السTTطر العاشTTTر حTTTددنا موضTTع أو مكTTTان الصTTTورة مTTTن خلل الخاصTTTيةbackground-positionوأعطيناها قيمتين ت left topأي مكان الصورة في اعلى (
جهة اليسار ويمكنك تخصيص قيمة واحدة بدل من القيمتين
)CSS( background في سTTطرbackroundهذه الخاصية تسمح لك بكتابة جميع خصائص
واحد فقط للختصار أي بدل من أن تكتب م:
background-color:red;background-image:url(“pic/small.png”);background-repeat:no-repeat;background-position:left top;
في أكثر من سطر يمكنك كتابتهم من خل قيمهم في سطر واحد backgroundباستخدام الخاصية
214
![Page 215: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/215.jpg)
215
![Page 216: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/216.jpg)
كما تلحظ في المثال عرفنا جميTTع الخصTTائص مTTن خلل قيمهTTم فTTيbackgroundسطر واحد من خلل الخاصية
)CSS( colorتسمح لTTك هTTذه الخاصTTية بتخصTTيص لTTون للنصTTوص وويمكTTن تعريTTفاللون بطريقتTTن تTTم ذكرهمTTا فTTي الفصTTل الثTTاني مTن الكتTTاب يمكنTTك
الرجوع الى الفصل الثاني
216
color
![Page 217: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/217.jpg)
217
![Page 218: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/218.jpg)
)CSS( text-alignتسمح لTTك هTTذه الخاصTTيةبمحاذة النصTTوص مTTن اليميTTن أو الوسTTط أو
الشمال أو جعل السطر متساوية وتأخذ القيم التاليةم:1-right(يمين)2-center(وسط)3-left(شمال)4- justify(السطر متساوية)
218
Text
![Page 219: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/219.jpg)
والتى تسمح لنTا بمحTTاذةtext-align عرفنا الخاصية 8في السطر رقم لجعل السطر متساوية كمTTا فTTيjustifyالنصوص واعطيناها القيمة
المثال
219
![Page 220: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/220.jpg)
والتى تسمح لنا بمحTTاذةtext-align عرفنا الخاصية 8في السطر رقم لجعل السطر في الوسط كما فيcenterالنصوص واعطيناها القيمة
المثال
220
![Page 221: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/221.jpg)
)CSS( text-decorationتس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(خط في منتصف الكلمة أو الخط المشطوب)5-blink(هرiتجعل الكلمة مثل الوميض أي يختفي وي)
221
![Page 222: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/222.jpg)
واعطيناهTTا القيمTTةtext-decoration عرفنا الخاصTTية 8في السطر رقم
222
![Page 223: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/223.jpg)
none اي يقوم بخذف أي خط موجود على الكلمة
الموجTTودid قمنTTا بتعريTTف اسTTم 6في السطر رقم a الوسTTم id> ثم عرفنا بجانب اسم pفي الوسم س
ومعناها نفذ هذه الخاصية على الوسم الذي يحمTTلidالذي بداخله الوسم س aانTTفقط أي في حال ك <
> فTTإن هTTذهp> داخTTل الوسTTم سaهنTTاك وسTTم س>aالخاصية تعمTTل أمTTا فTTي حTTال إن كTTان الوسTTم س
> فإن هذه الخاصية لن تعمTTل كمTTاpخارج الوسم سسنرى في المثلة القادمة
يجب تعريفه منCSS-عند تعريف الوسم في ملف 1اسمه دون اضافة علمتيس>
يجTTب أنCSS-عنTTد كتابTTة أي خاصTTية فTTي ملTTف 2تنتهي بفاصلة منقوطة ت;)
223
![Page 224: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/224.jpg)
> داخل الوسمaكما تلحظ في المثال السابق عندما عرفنا الوسم س>p يةTTإن الخاصTTف <text-decoratinىTTل علTTم تعمTTا لTTت بينمTTعمل
224
![Page 225: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/225.jpg)
> p> الخر لنها ليست داخل الوسم سaالوسم س
225
![Page 226: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/226.jpg)
وعرفنTTاCSS)فTTي ملTTف a فTTي هTTذا المثTTال قمنTTا بتعريTTف الوسTTم ت
أي حذف الخط أسفلnone واعطيناه القيمة text-decorationالخاصية الرابط وهنا تلحظ بأنه الخاصية قد عملت في الحTTالتين دون اسTTتثناء
ومعناها أن تنفذ هTTذهCSS داخل ملف aوالسبب في ذلك أننا عرفنا الخاصية على جميع الوسوم في الصفحة سواء كانت داخTTل وسTTم أو
مTنclass أو idلم تكن في الداخل ولهذا أحيانا قد تضTTطر لسTTتخدام أجل تعريف بعض الخصائص على وسوم محدده دون الكل
أتمنى قد وصلت الفكرة اليك
226
![Page 227: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/227.jpg)
واعطيناها القيمةtext-decorationفي هذا المثال عرفنا الخاصية overlineومعناها أننا قمنا بوضع خط أعلى الرابط كما في المثال
227
![Page 228: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/228.jpg)
واعطيناهTTا القيمTTةtext-decorationفTTي هTTذا المثTTال عرفنTTا الخاصTTية line-throughاTTط كمTTف الرابTTي منتصTTط فTع خTTومعناها أننا قمنا بوض
في المثال
228
![Page 229: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/229.jpg)
)CSS( text-transformتسمح هذة الخاصية بتحويل الكلمات إلTTى أحTTرف صTTغيرة أو كTTبيرة أو
جعل الحرف الول كبير من كل كلمة وتأخذ القيم التاليةم:1-lowercase(جعل الكلمة احرفها صغيرة)2-uppercase(جعل الكلمة احرفها كبيرة)3-capitalize(جعل أول حرف كبير)
واعطيناهTTا القيمTTةtext-transform فTTي هTTذا المثTTال عرفنTTا الخاصTTية
229
![Page 230: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/230.jpg)
lowercase كما في المثالجعل الكلمة جميع احرفها صغيرة ومعناها
واعطيناهTTا القيمTTةtext-transform فTTي هTTذا المثTTال عرفنTTا الخاصTTيةuppercase كما في المثالجعل الكلمة جميع احرفها كبيرة ومعناها
230
![Page 231: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/231.jpg)
واعطيناهTTا القيمTTةtext-transform فTTي هTTذا المثTTال عرفنTTا الخاصTTيةcapitalize كما في المثالجعل أول حرف من الكلمة كبير ومعناها
231
![Page 232: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/232.jpg)
)CSS( text-indentتسمح هذة الخاصية بتحديد المسافة البادئة من أول سطر من النص
232
![Page 233: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/233.jpg)
150px واعطيناهTTا القيمTTة text-indent في هذا المثال عرفنا الخاصيةمن اجل تحديد المسافة البادئة للنص
)CSS(font-familyتسمح هذة الخاصية بتحديد نوع الخط للنص ويمكن تحديTTد أكTTثر مTTن
نوع خط في نفس الوقت مفصولة بفاصلة بين كل خط
233
Font
![Page 234: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/234.jpg)
وحددنا أكثر من خطfont-family عرفنا الخاصية 8في السطر رقم كما في المثال
234
![Page 235: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/235.jpg)
)CSS(font-sizeتسمح هذة الخاصية بتحديد حجم الخط للنصوص ويمكن تحديد حجم
em الTى pixels ولحساب حجTم الخTط مTن em أو pixelsالخط إما ب نستخدم المعادلة التاليةم:
pixels/16=em
نستخدم المعادلة التاليةم:pixels الى em ولحساب حجم الخط من
em*16=pixels
235
![Page 236: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/236.jpg)
بيكسل40 مع القيمة font-size عرفنا الخاصية 9في السطر رقم
236
![Page 237: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/237.jpg)
40em مع القيمة font-size عرفنا الخاصية 9في السطر رقم
237
![Page 238: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/238.jpg)
)CSS(font-styleتسمح هذة الخاصية بتحديد الستايل للنص وتأخذ القيم التاليةم:
1- italic(الخط المائل)2-normal(الخط العاديلالفتراضي)3-oblique(الخط المائل)
238
![Page 239: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/239.jpg)
)CSS(a:linkتسمح هذة الخاصية باعطاء خصائص للروابط في حال اذا كان الرابTTطلم يضغط عليهتأي لم يتم زيارة الرابط) مثTTل تغييTTر لTTون الرابTTط وتغييTTر
حجم الخط ...الخ
239
links
![Page 240: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/240.jpg)
)CSS(a:visitedتسمح هذة الخاصية باعطاء خصائص للروابط في حال اذا كان الرابTTطتTTم الضTTغط عليTTهتاي تTTم زيTTارة الرابTTط أي بعTTد الضTTغط عليTTه تنفTTذ
الخصائص) مثل تغيير لون الرابط وتغيير حجم الخط ...الخ
240
![Page 241: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/241.jpg)
)CSS(a:hoverتسTTمح هTTذة الخاصTTية باعطTTاء خصTTائص للروابTTط ويتTTم تنفيTTذ هTTذهالخصائص في حال تم المرور على الرابط بمؤشTTرة الفTTأرة مثTTل تغييTTر
لون الرابط وتغيير حجم الخط ...الخ
في حال تم المرور على الرابط سوف تتغيير خصائص الرابط
241
![Page 242: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/242.jpg)
)CSS(a:activeتسمح هذة الخاصية باعطاء خصائص للروابط في حال اذا كان الرابTTطتم الضغط عليهتاي تم في حالة الضغط تنفذ الخصائص عندما يضTTغطعلى الرابط مباشرة وليس بعد زيTTارة الرابTTط ) مثTTل تغييTTر لTTون الرابTTط
وتغيير حجم الخط ...الخ
242
![Page 243: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/243.jpg)
لتغيير الرموز في القائمة الغيرCSS في listتستخدم خصائص متسلسة والقائمة المتسلسة
)CSS(List-style-typeتسمح هذة الخاصية بتحدي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 (لجعل القائمة رموزها على شكل الحرف الرمنية)6-lower-alpha لجعل القائمة رموزها على شكل الحTTرف النجليزيTTة) (الصغيرة7-upper-alpha لجعل القائمة رموزها على شكل الحTTرف النجليزيTTة) (الكبيرة8-lower-roman لجعل القائمة رموزها على شكل الحTTرف الرومانيTTة) (الصغيرة9-upper-roman لجعل القائمة رموزها على شكل الحTTرف الرومانيTTة)
243
list
![Page 244: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/244.jpg)
(الكبيرة1-none(لجعل القائمة بدون رموز أو أرقام )
244
![Page 245: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/245.jpg)
245
![Page 246: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/246.jpg)
246
![Page 247: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/247.jpg)
)CSS(List-style-imge تسمح هذة الخاصية بتحديد صورة تعبرر كرمز للقائمة بدل مTTن الرمTTوز
list-style-typeالموجودة في الخاصية
247
![Page 248: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/248.jpg)
)CSS(List-style-position بتحديد الرموز اذا كانت دخTTل المحتTTوى أو خTTارجتسمح هذة الخاصية
المحتوى وتأخذ القيم التاليةم:1-inside(جعل الرموز داخل المحتوى)2-outside(جعل الرموز خارج المحتوى)
248
![Page 249: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/249.jpg)
)CSS(List-styleتسمح هذة الخاصية بتحديد جميع الخصائص التي تTTم ذكرهTTا سTTابقا
في سطر واحد وتكتب بالطريقة التاليةم:list-style: list-type list-position list-image ;
249
![Page 250: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/250.jpg)
)CSS(borderتسTTمح هTTذة الخاصTTية بتحديTTد اطTTار فTTي الجTTدول أو حTTتى يمكنTTك
> فTTي حTTال تقسTTيمdiv مTTع وسTTم سborderاسTTتخدام الخاصTTية الصفحة أو أوسمة أخرى تتطلب عملك وتأخذ القيم التاليةم:
1-width(تحديد سمك الطار)2-style(نوع الطار)3-color(لون الطار)
border: width style color
250
border
![Page 251: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/251.jpg)
251
![Page 252: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/252.jpg)
)CSS(border-style وتأخذ القيم التاليةم:borderتسمح هذة الخاصية بتحديد ستايل لل
1-dotted2-dashed3-solid4-double5-groove6-ridge7-inset8-outset9-none
252
![Page 253: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/253.jpg)
253
![Page 254: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/254.jpg)
)CSS(border-widthمك للطTTار فTTي الجTTدول أو حTTتى TTد سمTTية بتحديTTذة الخاصTTمح هTTتس
> فTTي حTTالdiv مع وسTTم سborder-widthيمكنك استخدام الخاصية تقسيم الصفحة أو أوسمة أخرى تتطلب عملك
254
![Page 255: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/255.jpg)
)CSS(border-colorتسمح هذة الخاصية بتحديد لون للطار في الجTTدول أو حTTتى يمكنTTك
> فTTي حTTال تقسTTيمdiv مع وسTTم سborder-colorاستخدام الخاصية الصفحة أو أوسمة أخرى تتطلب عملك
255
![Page 256: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/256.jpg)
من خللها تمكرنك بالتحكم في جميع جTTوانبborderهناك خصائص لل سواء من العلى أو من اليمين أو الشمال أو في السفلborderال
)CSS(Border-top-styleتسمح هذة الخاصية بتحديد الستايل مTTن الجTTانب العلTTى فقTTط مTTن
الطار
)CSS(Border-right-styleتسمح هذة الخاصية بتحديد السTTتايل مTن الجTTانب اليميTن فقTط مTن
الطار
)CSS(Border-left-styleتسمح هذة الخاصية بتحديد الستايل من الجانب الشTTمال فقTTط مTTن
الطار
)CSS(Border-bottom-styleتسمح هذة الخاصية بتحديد الستايل مTن الجTTانب السTفل فقTط مTن
الطار
256
Border التحكم في
![Page 257: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/257.jpg)
257
![Page 258: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/258.jpg)
)CSS(Border-top-width من الجانب العلى فقط borderتسمح هذة الخاصية بتحديد حجم
)CSS(Border-right-width من الجانب اليمين فقط borderتسمح هذة الخاصية بتحديد حجم
)CSS(Border-left-width من الجانب الشمال فقط borderتسمح هذة الخاصية بتحديد حجم
)CSS(Border-bottom-width من الجانب السفل فقط borderتسمح هذة الخاصية بتحديد حجم
258
![Page 259: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/259.jpg)
259
![Page 260: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/260.jpg)
)CSS(Border-top-color من الجانب العلى فقط borderتسمح هذة الخاصية بتحديد لون
)CSS(Border-right-color من الجانب اليمين فقط borderتسمح هذة الخاصية بتحديد لون
)CSS(Border-left-color من الجانب الشمال فقط borderتسمح هذة الخاصية بتحديد لون
)CSS(Border-bottom-color من الجانب السفل فقط borderتسمح هذة الخاصية بتحديد لون
260
![Page 261: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/261.jpg)
261
![Page 262: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/262.jpg)
)CSS(border-Collapse فTTردي بTTدل مTTنborderتسمح هذة الخاصTTية بجعTTل حTTدود الطTTار أو
المزدوج
262
table
![Page 263: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/263.jpg)
)CSS(width ويمكTTن تحديTTدborderتسمح هذة الخاصية بتحديTTد حجTTم للجTTدول أو
الحجم إما بالبيكسل أو بالنسبة المئوية
)CSS(height ويمكTTن تحديTTدborderتسمح هذة الخاصية بتحديد ارتفTTاع للجTTدول أو
الرتفاع إما بالبيكسل أو بالنسبة المئوية
مTTTعborder و height و widthيمكTTTن اسTTTتخدام الخصTTTائص >divأوسمة أخرى مثل الوسم س
263
![Page 264: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/264.jpg)
264
![Page 265: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/265.jpg)
265
![Page 266: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/266.jpg)
)CSS(Vertical-alignتسمح هذة الخاصية بتحديد المحاذاة للنTTص سTTواء مTTن المنتصTTف أو
العلى أو في السفل وتأخذ القيمم:1-top(محاذاة من العلى)1-bottom(محاذاة من السفل)1-middle(محاذاة من المنتصف)
266
![Page 267: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/267.jpg)
267
![Page 268: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/268.jpg)
)CSS(outlineهذه الخاصية تسمى بالحدود الخارجية وهي عبارة عن خTTط مرسTTومحول العناصر أو الوسTTوم لجعTTل العناصTTر أكTTثر سTTهولة لرؤيتهTTا وتكTTون
ويأخTTذ نفTTس القيTTم لTTهborder وهو شبيه لTTل borderبالعادة خارج ال وتأخذ القيم التالية
1-width(مك الخارجي للحدود الخارجية (السم2-style(شكل الستايل للحدود الخارجية)3-color(تحديد اللون للحدود الخارجية)
ويمكن تعريفه بالطريقة التاليةoutline: width style color
268
outline
![Page 269: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/269.jpg)
269
![Page 270: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/270.jpg)
)CSS(outline-widthتسمح هذه الخاصية بتحديد حجم السٌمك للحدود الخارجي
)CSS(outline-styleتسمح هذه الخاصية بتحديد شكل الستايل للحدود الخTTارجي وهTTي
borderشبيه بالخاصية
)CSS(outline-colorتسمح هذه الخاصية بتحديد لون للحدود الخارجية
270
![Page 271: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/271.jpg)
271
![Page 272: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/272.jpg)
)CSS(margin وتسTTمى الهTTوامش الخارجيTTة وهTTذه الخاصTTية تقTTوم بعمليTTة تحديTTدالمساحة حول العناصر تخTTارج الحTTدود ) ويمكTTن تغييTTر الهTTوامش مTTنالعلى أو اليمين أو السفل أو اليسار ويمكن تحديد القيTTم للهTTوامش
إما بالبيكسل أو بالنسبة المئويةت%)
272
margin
![Page 273: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/273.jpg)
قمنا بتحديد الهامش من جميع14في هذا المثال في السطر رقم 50pxالتجهات من خلل قيمة واحدة وهي
273
![Page 274: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/274.jpg)
قمنا بتحديد الهامش من جميع14في هذا المثال في السطر رقم التجهات من خلل اربعة قيم حيث تمثلم:
10px-القيمة الولى الهامش من العلى وهي 130px-القيمة الثانية الهامش من اليمين وهي 240px-القيمة الثالثة الهامش من السفل وهي 3
274
![Page 275: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/275.jpg)
30px-القيمة الرابعة الهامش من اليسار وهي 4
)CSS(margin-top هTTذه الخاصTTية تسTTمح بتحديTTد الهTTامش مTTن العلTTى للعنصTTTرتخارج
الحدود)
)CSS(margin-right هTTذه الخاصTTية تسTTمح بتحديTTد الهTTامش مTTن اليميTTن للعنصTTTرتخارج
الحدود)
)CSS(margin-bottom هTذه الخاصTTية تسTمح بتحديTTد الهTامش مTن السTفل للعنصTTرتخارج
الحدود)
)CSS(margin-left هTTذه الخاصTTية تسTTمح بتحديTTد الهTTامش مTTن اليسTTار للعنصTTTرتخارج
الحدود)
275
![Page 276: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/276.jpg)
276
![Page 277: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/277.jpg)
)CSS(padding وتسTTمى الهTTوامش الداخليTTة وهTTذه الخاصTTية تقTTوم بعمليTTة تحديTTدالمساحة حول العناصر تداخTTل الحTTدود ) ويمكTن تغييTTر الهTTوامش مTنالعلى أو اليمين أو السفل أو اليسار ويمكن تحديد القيTTم للهTTوامش
إما بالبيكسل أو بالنسبة المئويةت%)
277
padding
![Page 278: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/278.jpg)
278
![Page 279: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/279.jpg)
قمنا بتحديد الهامش الداخلي14في هذا المثال في السطر رقم 50pxمن جميع التجهات من خلل قيمة واحدة وهي
قمنا بتحديد الهامش الداخلي14في هذا المثال في السطر رقم من جميع التجهات من خلل اريعة قيم حيث تمثلم:
10px-القيمة الولى الهامش من العلى وهي 1
279
![Page 280: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/280.jpg)
20px-القيمة الثانية الهامش من اليمين وهي 230px-القيمة الثالثة الهامش من السفل وهي 340px-القيمة الرابعة الهامش من اليسار وهي 4
)CSS(padding-top هTTذه الخاصTTية تسTTمح بتحديTTد الهTTامش مTTن العلTTى للعنصTTTرتداخل
الحدود)
)CSS(padding-right هTTذه الخاصTTية تسTTمح بتحديTTد الهTTامش مTTن اليميTTن للعنصTTTرتداخل
الحدود)
)CSS(padding-bottom هذه الخاصTTية تسTTمح بتحديTTد الهTTامش مTTن السTTفل للعنصTTTرتداخل
الحدود)
)CSS(padding-left هTTذه الخاصTTية تسTTمح بتحديTTد الهTTامش مTTن اليسTTار للعنصTTTرتداخل
الحدود)
280
![Page 281: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/281.jpg)
281
![Page 282: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/282.jpg)
)CSS(displayهذه الخاصية تستخدم لخفاء العناصر في الويب مع اخفTاء المسTTاحة
أو اظهارها بطريقة معينة وتأخذ القيم التاليةم:
1-none (لخفاء العنصر مع المساحة المحجوزة للعنصر في الصفحة) 2-inline(هر في سطر واحدiلجعل العناصر ت)3-block(هر كبلوك أو كتلiلجعل العناصر ت)
)CSS(visibilityهذه الخاصية تستخدم لخفاء العناصر في الويب مTTع ابقTTاء المسTTاحة
محجوزة للعنصر وتأخذ القيم التاليةم:
1-hidden(لخفاء العنصر مع بقاء المساحة للعنصر محجوزة)2-visible(لظهار العنصر)
282
display & visibility
![Page 283: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/283.jpg)
283
![Page 284: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/284.jpg)
284
![Page 285: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/285.jpg)
285
![Page 286: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/286.jpg)
286
![Page 287: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/287.jpg)
)CSS(positionهذه الخاصية تستخدم لترتيب العناصر مع بعضها وهنTTاك اريعTTة أنTTواع
للترتيب م:1-fixed(جعل العنصر ثابت في الصفحة)2-relative(ترتيب العنصر بشكل طبيعي في الصفحة)3-static(ترتيبTTذا الTTكيل هTTم تشTTيكون ترتيب العناصر بشكل جامد ويت(من خلل شكل الصفحة4-absolute(تTTدورها ليسTTتي بTTية الTTر الرئيسTTع العناصTTل مTTيكون متص(مرتبة بشكل جامد
وتعمل هذه الخاصية مع الخصائص التاليةم: تترتيب العنصر أو العناصر من جهة اليمين)right-الخاصية 1 تترتيب العنصر أو العناصر من جهة اليسار)left-الخاصية 2 تترتيب العنصر أو العناصر من جهة العلى)top-الخاصية 3 تترتيب العنصر أو العناصر من جهة السفل)bottom-الخاصية 4
287
position
![Page 288: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/288.jpg)
يمكن أنrelative مع القيمة positionإن المحتوى في حالة الخاصية ينتقل أو يتداخل مع العناصر الخرى ولكن المساحة المتبقيTTة للعنصTTر
ماتزال محفوظة في الشكل الطبيعي
288
![Page 289: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/289.jpg)
لTTن يتحTTرك العنصTTرfixed مTTع القيمTTة positionعند استخدام الخاصية المتصفح تحرك سيبقى العنصر ثابتscrollحتى لو
289
![Page 290: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/290.jpg)
بشTTكلabsolute مTTع القيمTTة positionيتم ترتيب العناصر في الخاصية مطلق في الصفحة
290
![Page 291: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/291.jpg)
)CSS(z-indexهذه الخاصية تستخدم لترتيب العناصر المتراكمTTة بحيTTث يمكTTن ضTTبطالعنصTTر فTTي المقدمTTة أو خلTTف العناصTTر الخTTرى وتأخTTذ القيمTTة إمTTا
بالموجب أو السالب
291
![Page 292: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/292.jpg)
)CSS(floatمكنك من طفو العناصر لليمين أو اليسار كما تسمحهذه الخاصية ت
تستخدم خاصية الطفو بشكل عام وللعناصر الخرى باللتفاف حولهم
مع الصور ولكن تستخدم أيضاً بشكل مثالي مع هيكل تصميم الموقع,
تطفو العناصر بشكل افقي فقط أي يمكن للعناصر أن تطفو باتجاه
ولكن ليس للعلى أو للسفل leftأو اليسار rightاليمين
292
Float & clear
![Page 293: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/293.jpg)
ستلتف العناصر الخرى عند طفو العناصر الخرى لليمين أو اليسار
293
![Page 294: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/294.jpg)
يمكن أن تطفو العناصر بجانب بعضهم اذا كان هناك مساحة فارغة
294
![Page 295: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/295.jpg)
)CSS(clearتستخدم هذه الخاصية بعد طفو العناصر حيث إذا كTTانت هنTTاك عناصTTر
سيتم طفو هذه العناصر حولهم ولتجنب ذلTTك يمكTTن اسTTتخدام أخرى clearخاصية المسح
295
![Page 296: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/296.jpg)
كما تلحظ في المثال تم طفو عناصر أخري حولهم ولتجنب ذلكclearسوف نأخذ نفس المثال ونضيف عليه خاصية
296
![Page 297: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/297.jpg)
297
![Page 298: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/298.jpg)
أسئلة الفصل التاسع
وماهي فوائدها؟CSS- ماهي 1
؟background- ماهي استخدمات الخاصية 2
؟text- ماهي استخدمات الخاصية 3
؟margin- ماهي استخدمات الخاصية 4
؟padding- ماهي استخدمات الخاصية 5
؟position- ماهي استخدمات الخاصية 6
؟float- ماهي استخدمات الخاصية 7
؟font- ماهي استخدمات الخاصية 8
؟display- ماهي استخدمات الخاصية 9
؟z-index- ماهي استخدمات الخاصية 10
؟clear- ماهي استخدمات الخاصية 11
298
![Page 299: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/299.jpg)
؟CSS و HTML- قم ببناء هذا المشروع باستخدام 12
299
![Page 300: Kingdom of web design(html,css)](https://reader034.fdocuments.net/reader034/viewer/2022050913/579057011a28ab900c9b9032/html5/thumbnails/300.jpg)
تم بحمدل النتهاء من الكتاب
أخي القارئم:
**إن وجدت في هذا الكتاب منفعة فل تنسى الدعاء لي في أي وقت
**ثمن هذا الكتاب هو مجاناً للجميع
**سوف يكون هناك الجTTزء الثTTاني مTن الكتTTاب بإسTTم مملكTTة تصTTميم قريبTTاً إن شTTاءCSS3 و HTML5المواقع الجزء الثاني والذي يتكلم عن
ا
لمتابعة كل ما هو جديد
mohammad awwadhttps://jo.linkedin.com/in/mohammadawwad
**المراجع:تم الستعانة ببعض المراجع والغرض منهTTا هTTو لتسTTهيل المTTادة علTTى
القارئ م:1-http://www.w3schools.com/2-http://www.w3arabiconline.com/3-http://www.khayma.com/-منتديات شبوة نت4
وصلى ا وسلم وبارك على محمد وعلى أله الطيبين وصحبه أجمعين
300