تصميم المواقع .pdf

  • Uploaded by: Ahmedfir Anarke
  • 0
  • 0
  • November 2019
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View تصميم المواقع .pdf as PDF for free.

More details

  • Words: 11,187
  • Pages: 300
1

‫الفهرس‬ ‫الموضوع‬ ‫الفصل الول‪:‬الساسيات‬ ‫ماهي ‪HTML‬‬ ‫الدوات المطلوبة لبناء صفحات النترنت‬ ‫وسوم هيكل المستند ‪Document Structure Tags‬‬ ‫خصائص الوسوم ‪Attributes Tags‬‬ ‫التعليقات في ‪HTML‬‬ ‫أسئلة الفصل الول‬

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


‫الوسم >‪‪‪‪<strong‬‬ ‫الوسم >‪<em‬‬ ‫الوسم >‪<sup‬‬ ‫الوسم >‪<sub‬‬ ‫الوسم >‪‪<small‬‬ ‫الوسم >‪<strike‬‬ ‫الوسم >‪<s‬‬ ‫الوسم >‪
‫الفصل الثالث‪:‬الفقرات والقوائم‬ ‫الفقرات‬ ‫الوسم >‪
‫الوسم >‪‪<pre‬‬ ‫الوسم >‪‪‪‪‪‪
‫الفصل الرابع‪:‬وسوم الويب‬ ‫الوسم >‪
‫اربع طرق لتعريف الروابط‬ ‫خرائط الصور‬ ‫الوسم rel="nofollow">‪<map‬‬ ‫الوسم >‪<area‬‬ ‫تقسيم الويب‬ ‫الوسمس‪‪‪<embed‬‬ ‫الوسم >‪<marquee‬‬ ‫أسئلة الفصل الرابع‬

‫الفصل الخامس‪:‬الجدوال‬ ‫شرح الوسوم‬ ‫الوسم >‪‪‪‪
‫أسئلة الفصل الخامس‬

‫الفصل السادس‪:‬الطارات‬ ‫الوسم >‪
‫الفصل السابع‪:‬النماذج‬ ‫أشكال النماذج‬ ‫الوسم >‪‪‪<select‬‬ ‫الوسم >‪‪‪‪
‫الوسم >‪
‫الفصل الثامن‪:‬الميتا والرموز‬ ‫الوسم س‪<mate‬‬ ‫الرموز‬ ‫أسئلة الفصل الثامن‬

‫الفصل التاسع‪CSS:‬‬ ‫ماهي ‪CSS‬‬ ‫ماهي فوائد)‪(CSS‬‬ ‫طرق تعريف ت‪ (CSS‬داخل الصفحات‬ ‫الوسم >‪
links list border table margin padding display & visibility Position & z-index float & clear

8

‫الفصل الول‬ ‫ماهي ‪HTML‬‬ ‫لغةت‪ (HTML‬هي اختصار الى ت‪(Hyper Text Markup Language‬‬ ‫وهي ليست لغة برمجة وإنما ه‪TT‬ي لغ‪TT‬ة ترمي‪TT‬ز تس‪TT‬تخدم ف‪TT‬ي إنش‪TT‬اء‬ ‫وتصميم صفحات النترنت وتعتبر من اقدم اللغ‪TT‬ات وأوس‪TT‬عها اس‪TT‬تخدما‬ ‫في المواقع وتس‪TT‬تخدم ت‪ ( HTML‬وس‪TT‬وم أو ت‪ (tags‬لص‪TT‬دار التعليم‪TT‬ات‬ ‫إلى المتصفح‬

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

‫‪Internet Explorer-4‬‬ ‫يفضل استخدام المحررات التالية في كتابة وسومت‪:(HTML‬‬ ‫‪1-Notepad ++‬‬ ‫‪2-Komodo‬‬ ‫وذلك لنها تحتوي على مساعدة في كتابة الوسوم‬

‫‪-1‬جميع وسومت‪ (HTML‬توضع بين علمتي أكبر وأصغرت><(‬ ‫‪ -2‬اغلب وسوم)‪ (HTML‬لها زوجين من الوسوم وسم بداية‬ ‫وسم نهاية مثل >وسم النهاية‪> ‪(
‪
‫‪10‬‬

‫وسوم هيكل المستند ‪Document Structure Tags‬‬ ‫وه‪TT‬ي عب‪TT‬ارة ع‪TT‬ن أربع‪TT‬ة وس‪TT‬وم ت‪ ( Tags‬وتس‪TT‬مى بوس‪TT‬وم هيكلي‪TT‬ة‬ ‫المستند وذلك أي ملف تق‪TT‬وم بتص‪TT‬ميمه يحت‪TT‬وي عل‪TT‬ى ه‪TT‬ذه الوس‪TT‬وم‬ ‫الربعة كما في الصورة‬

‫‪11‬‬

‫الوسوم الربعة هي م‪:‬‬ ‫>‪ ‪‪</title‬‬ ‫>‪<body></body‬‬<br /> <br /> ‫‪HTML‬‬<br /> <br /> ‫هذا الوسم يعني أن الملف يحتوي على أوامر ‪, HTML‬‬ ‫وليس نصاً عادياً‬<br /> <br /> ‫‪HEAD‬‬<br /> <br /> ‫يعتبر هذا الوسم بمثابة رأس الصفحة الذي يتم وضع‬ ‫معلومات عن الصفحة فيها مثلت‪ (page title‬او ت‪(meta tag‬‬<br /> <br /> ‫‪TITLE‬‬<br /> <br /> ‫هذا الوسم هو مخصص لعنوان الصفحة حيث أن عنوان‬ ‫الصفحة في المثال السابق ت‪ (Page Title‬وي‪i‬هر في‬ ‫أعلى نافذة مستعرض الويب‬<br /> <br /> ‫‪BODY‬‬<br /> <br /> ‫هذا الوسم بمثابة جسم الصفحة ويحتوي على جميع‬ ‫النصوص والصور التي ستعرض في الصفحة‬<br /> <br /> ‫بعد الطلع الوسوم ‪ HTML‬الربعة الرئيسية يتم تخزين الصفحة‬ ‫بامتداد ت‪ (.html‬أو )‪ (.htm‬كما في الصورة‬ ‫‪12‬‬<br /> <br /> 13<br /> <br /> ‫خصائص الوسوم ‪Attributes Tags‬‬ ‫يجب عليك أخي القارئ أن تعرف أن اغلب الوسوم تحتوي على‬ ‫خصائص تعمل على تحسين م‪i‬هر الوسم والتحكم فيه بشكل افضل‬ ‫في الصفحة و هذه الخصائص تكون داخل الوسم مثال‬ ‫>‪<body bgcolor=#0000FF> </body‬‬ ‫في هذا السطر قمنا بتغير اللون الفتراضي للصفحة وهو البيض إلى‬ ‫اللون الزرق كما في الصورة‬ ‫ستتعرف على اللوان وخصائص الوسوم بشكل اكثر في‬ ‫الفصل القادم‬<br /> <br /> ‫‪14‬‬<br /> <br /> ‫التعليقات في ‪HTML‬‬ ‫تستخدم التعليقات عادة في شرح ووصف الوسوم في صفحة الويب‬ ‫وهي ل تتأثر بالتنفيذ‬ ‫‪15‬‬<br /> <br /> ‫كما ترى حتى تضيف تعليق في ‪ HTML‬عليك كتابته بالطريقةالتالية‬ ‫>‪--‬هنا يبدء كتابة التعليق‪<!--‬‬<br /> <br /> ‫‪16‬‬<br /> <br /> ‫أسئلة الفصل الول‬ ‫‪-1‬ما هي لغة ت‪(HTML‬؟‬ ‫‪-2‬ماهي وسوم هيكلية المستند )‪Structure Tags‬‬<br /> <br /> ‫‪(Document‬‬<br /> <br /> ‫مع شرح وظيفة كل وسم؟‬ ‫‪ -3‬ما هو امتداد صفحة ت‪(HTML‬؟‬ ‫‪ -4‬كيف استطيع تغيير لون خلفية الصفحة من اللون البيض إلى لون‬ ‫أخر ؟‬<br /> <br /> ‫‪17‬‬<br /> <br /> ‫الفصل الثاني‬ ‫الخطوط و اللوان ‪Colors and lines tags‬‬ ‫أولًم‪ :‬اللوانم‪:‬‬ ‫يمكن تمثيل اللوان في ‪ HTML‬بطريقتين وهيم‪:‬‬ ‫‪ -1‬الن‪i‬ام السادس عشر أو ت‪ (Hex decimal‬ويتكون من ‪ 6‬أرقام‬ ‫وحروف كما في الصورة التاليةم‪:‬‬<br /> <br /> ‫‪18‬‬<br /> <br /> 19<br /> <br /> ‫هناك ثلث ألوان أساسية وهي ت‪ (RED,GREEN,BLUE‬أو‬ ‫)الحمر‪,‬الخضر‪,‬الزرق( ولكل منها ‪ 256‬درجة لونية‬<br /> <br /> ‫بحيث يمثل كل رقمين أو رقم وحرف أو حرف ورقم من هذه الثلث‬ ‫اللوان الساسية بحيث يتم دمجها مع بعض وا ظهارها لون واحد‬ ‫تمثل هذه اللوان الثلث‬<br /> <br /> ‫‪20‬‬<br /> <br /> ‫‪ -2‬استخدام أسماء اللوانم‪:‬‬ ‫إذا واجهتك صعوبة في استخدام الطريقة الولى يمكنك أن تستخدم‬ ‫الطريقة الثانية وهي أسهل من الطريقة الولى بحيث يمكنك كتابة‬ ‫اسم اللون مباشرة كما في الصورة التالية‬<br /> <br /> ‫‪21‬‬<br /> <br /> ‫قمنا بتغيير اللون البيض إلى اللون الزرق حيث استخدمنا هنا اسم‬ ‫اللون مباشرة دون استخدام الطريقة الولى‬<br /> <br /> ‫ملخص اللوان في ‪ HTML‬ممثلة بالطريقتينم‪:‬‬<br /> <br /> ‫‪22‬‬<br /> <br /> 23<br /> <br /> 24<br /> <br /> 25<br /> <br /> ‫ملخص للوان الخلفيات في ‪:HTML‬‬<br /> <br /> ‫‪26‬‬<br /> <br /> 27<br /> <br /> ‫الوسوم‬ ‫>‪<body‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ < body></body‬كما قلن‪TT‬ا س‪TT‬ابقا ه‪TT‬و بمثاب‪TT‬ة جس‪TT‬م الص‪TT‬فحة‬ ‫ويحتوي على جميع النصوص والصور التي ستعرض في الصفحة‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪bgcolor‬‬ ‫‪dir‬‬<br /> <br /> ‫هذه الخاصية تسمح بتغيير لون الخلفية للصفحة‬ ‫مسئولة عن تحديد اتجاه قراءة النص من اليمين‬ ‫إلى الشمال أو العكس‬<br /> <br /> ‫‪background‬‬ ‫‪id‬‬<br /> <br /> ‫مسئولة عن تحديد صورة للصفحة بدل عن اللون‬ ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪text‬‬<br /> <br /> ‫تحديد اللون الساسي للنص‬ ‫‪28‬‬<br /> <br /> ‫‪link‬‬<br /> <br /> ‫تحديد لون الربط أو الوصلة التشعبية‬<br /> <br /> ‫‪vlink‬‬<br /> <br /> ‫تحديد لون الربط أو الوصلة التشعبية التي تم‬ ‫زيارتها‬<br /> <br /> ‫‪alink‬‬<br /> <br /> ‫تحديد لون الربط أو الوصلة التشعبية عند النقر‬ ‫عليها‬<br /> <br /> ‫‪ -1‬ستتعرف على ‪ id‬و ‪ Class‬بشكل اكثر في في الجزء‬ ‫الثاني من الكتاب والذي يتكلم عن ‪CSS‬‬ ‫‪ -2‬هناك الكثير من الخصائص الموجودة في اغلب الوسوم‬ ‫ول يمكن شرحها في الوقت الحالي لن استخدامها يتطلب‬ ‫بمعرفة في الجافا سكربت تالجزء الثالث من الكتاب( وهناك‬ ‫خصائص ليست مهما كثيرا سوف اقوم بتجاهلها في هذا‬ ‫الكتاب‬<br /> <br /> ‫‪29‬‬<br /> <br /> ‫مثال على الوسم ‪:body‬‬<br /> <br /> ‫قمنا في هذا المثال بتغيير لون الخلفية إلى الل‪TT‬ون الزرق وقمن‪TT‬ا أيض‪TT‬ا‬ ‫بتحديد اتجاه النص م‪T‬ن الش‪TT‬مال إل‪TT‬ى اليمي‪TT‬ن حي‪TT‬ث تمث‪TT‬ل القيم‪TT‬ة ‪ltr‬‬ ‫شمال م يمين و ‪ rtl‬يمين م شمال‬<br /> <br /> ‫‪30‬‬<br /> <br /> ‫مثال أخر لتغيير الخلفيةم‪:‬‬<br /> <br /> ‫قمنا في هذا المثال بتغيير اللون إلى صورة الخلفية كما ف‪TT‬ي المث‪TT‬ال‬ ‫حيث قمنا بكتابة الخاصية ‪ background‬ثم كتبنا ت=( ثم اسم الص‪TT‬ورة‬ ‫مع امتدادها بين علمتي تنصيص " ‪” pic.jpg‬‬<br /> <br /> ‫‪31‬‬<br /> <br /> ‫>‪<br/‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <br/‬هو وسم مختص بعمل سطر جديد بحيث إذا أردت أن‬ ‫تنزل سطر جديد فقط استخدم الوسم >‪ <br/‬كما أن الوسم يتكون‬ ‫من زوج وحيد فقط‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫ل توجد خصائص أو ‪ Attributes‬لهذا الوسم‬<br /> <br /> ‫‪32‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪<h1><h2><h3><h4><h5><h6‬‬<br /> <br /> ‫هذا الوسم مخصص للعناوين بحيث إذا أردت أن تكتب عنوان معين‬ ‫تستطيع من خلل هذا الوسم أن تضع عنوان المقالة بين وسمي‬ ‫>‪</h1‬عنوان المقالة>‪ <h1‬بحيث تمثل >‪ <h1‬أكبر حجم‬ ‫للعنوان و>‪ <h6‬أصغر حجم للعنوان‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪align‬‬<br /> <br /> ‫هذه الخاصية مسئولة عن تحديد محاذاة العنوان‬ ‫عن اليمين‪-‬الوسط‪-‬الشمال‬<br /> <br /> ‫‪style‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬ ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬ ‫‪33‬‬<br /> <br /> 34<br /> <br /> 35<br /> <br /> ‫>‪<font‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم س‪ <font></font‬يتحكم في الخطوط م‪TT‬ن حي‪TT‬ث الن‪TT‬وع وحج‪TT‬م و‬ ‫لون الخط‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪face‬‬<br /> <br /> ‫هذه الخاصية تسمح بتحديد نوع الخط ويمكن‬ ‫تحديد اكثر من نوع خط‬<br /> <br /> ‫‪Color‬‬<br /> <br /> ‫هذه الخاصية تسمح بتحديد لون الخط‬<br /> <br /> ‫‪Size‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بتغيير حجم الخط وتأخذ‬ ‫القيمة من ‪ 1‬إلى ‪ 7‬حيث واحد اصغر حجم و ‪7‬‬ ‫اكبر حجم‬<br /> <br /> ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬ ‫‪36‬‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪37‬‬<br /> <br /> ‫>‪<b‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <b> </b‬اختصار إلى ت‪ (bold‬مخصص للخط الغامق‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪38‬‬<br /> <br /> 39<br /> <br /> ‫>‪<i‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <i> </i‬اختصار إلى ت‪ (italic‬مخصص للخط المائل‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪40‬‬<br /> <br /> 41<br /> <br /> ‫>‪<u‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <u> </u‬هو اختصار إلى ت‪ (under line‬وهو الخط الذي يوضع‬ ‫اسفل الكلمة أو الجملة‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪42‬‬<br /> <br /> 43<br /> <br /> ‫>‪<strong‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <strong> </strong‬هو نفس الوسم س‪ <b‬وهو مخصص للخط‬ ‫الغامق‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪44‬‬<br /> <br /> 45<br /> <br /> ‫>‪<em‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <em> </em‬هو نفس الوسم س‪ <i‬وهو مخصص للخط المائل‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪46‬‬<br /> <br /> 47<br /> <br /> ‫>‪<sup‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <sup> </sup‬اختصار إلى ت‪ (super‬وهو عبارة عن الخط‬ ‫المرتفع‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪48‬‬<br /> <br /> 49<br /> <br /> ‫>‪<sub‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <sub> </sub‬وهو عبارة عن الخط المنخفض‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪50‬‬<br /> <br /> 51<br /> <br /> ‫>‪<big‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <big> </big‬وهو عبارة عن الخط الكبير‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪52‬‬<br /> <br /> 53<br /> <br /> 54<br /> <br /> ‫>‪<small‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <small> </small‬وهو عبارة عن الخط الصغير‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪55‬‬<br /> <br /> 56<br /> <br /> ‫>‪<strike‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <strike> </strike‬وهو عبارة عن الخط المشطوب‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪57‬‬<br /> <br /> 58<br /> <br /> ‫>‪<s‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <s> </s‬وهو نفس الوسم >‪ <strike‬الخط المشطوب‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪59‬‬<br /> <br /> 60<br /> <br /> ‫>‪<tt‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <tt> </tt‬هذا الوسم عبارة عن الخط الموحد ألة الطباعة‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪61‬‬<br /> <br /> 62<br /> <br /> ‫يمكن استخدام عدة وسوم مع بعضها البعض في مقط‪TT‬ع‬ ‫واحد مع مراعاة عدم تداخل الوسمة مع بعض‪TT‬ها بطريق‪TT‬ة‬ ‫خاطئه‬<br /> <br /> ‫‪63‬‬<br /> <br /> ‫أسئلة الفصل الثاني‬ ‫‪-1‬غير لون صفحة الويب من اللون البيض إلى اللون الخضر‬ ‫بالطريقتين ؟‬ ‫‪-2‬ماهي وظيفية الوسم >‪<font‬؟‬ ‫‪ -3‬ماهي وظيفية الوسم >‪<h‬؟‬ ‫‪ -4‬ماهي وظيفية الوسم >‪<b‬؟‬ ‫‪-5‬ماهي وظيفية الوسم >‪<i‬؟‬ ‫‪-6‬ماهي وظيفية الوسم >‪<u‬؟‬ ‫‪-7‬ماهي وظيفية الوسم >‪<small‬؟‬ ‫‪-8‬ماهي وظيفية الوسم >‪<big‬؟‬ ‫‪-9‬ماهي وظيفية الوسم >‪<tt‬؟‬ ‫‪-10‬ماهي وظيفية الوسم >‪<s‬؟‬<br /> <br /> ‫‪64‬‬<br /> <br /> ‫هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬<br /> <br /> ‫‪-11‬‬ ‫ما‬<br /> <br /> ‫‪-12‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬<br /> <br /> ‫‪65‬‬<br /> <br /> ‫الفصل الثالث‬ ‫الفقرات والقوائم ‪Paragraphs and lists‬‬ ‫في هذا الفصل سوف نتعرف على الوسوم الخاصة في الفقرات‬ ‫والقوائم‬<br /> <br /> ‫>‪<p‬‬ ‫الوسم )‪(Tag‬‬ ‫وسم >‪ <p> </p‬اختصار إلى ‪ Paragraph‬وهذا الوسم هو لعمل‬ ‫فقرة مستقلة او عدة فقرات مستقلة عن بعضها‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬ ‫‪66‬‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪align‬‬<br /> <br /> ‫لتحديد محاذاة الفقرة إما من اليمين أو الوسط‬ ‫أو الشمال‬<br /> <br /> ‫‪dir‬‬<br /> <br /> ‫لتحديد اتجاه قراءة النص من اليمين إلى الشمال‬ ‫أو العكس‬<br /> <br /> ‫‪67‬‬<br /> <br /> ‫لحظ أخي القارئ أننا عن‪TT‬دما اس‪TT‬تخدمنا الوس‪TT‬م >‪ < p‬ل‪TT‬م نس‪TT‬تخدم‬ ‫معه الوس >‪<br/‬للنزول إلى سطر جديد هذا يدل على أن الوسم‬ ‫>‪ <p‬قام بتنسيق وترتيب الفقرة بنفسه‬ ‫‪68‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪<blockquote‬‬ ‫>‪ < blockquote‬وه‪TT‬و وس‪TT‬م الفق‪TT‬رات‬<br /> <br /> ‫وس‪TT‬م >‪</blockquote‬‬ ‫المقتبسة وظيفتها تمييز الفقرات من خل إضافة هامش على يمين‬ ‫الفقرة أو شمالها وتستطيع وضع عدة أوسمة مع بعض في حال‬ ‫إدراج هوامش‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪dir‬‬<br /> <br /> ‫لتحديد اتجاه قراءة النص من اليمين إلى الشمال‬ ‫أو العكس‬<br /> <br /> ‫‪69‬‬<br /> <br /> 70<br /> <br /> ‫>‪<pre‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <pre> </pre‬اختصار إلى ت‪ (Preformated‬أي المنسق مسبقا‬ ‫وظيفة هذا الوسم التحكم في مسافات بين الجمل والكلمات وحتى‬ ‫الحرف‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪71‬‬<br /> <br /> 72<br /> <br /> ‫>‪<center‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ < center> </center‬هذا الوسم هو لتوسيط الفقرات أي جعل‬ ‫النصوص في الوسط‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪73‬‬<br /> <br /> 74<br /> <br /> ‫القوائم ‪Lists‬‬ ‫القوائم في ‪ HTML‬هي لترتيب البيانات في قوائم وهناك نوعان من‬ ‫القوائم وهمام‪:‬‬ ‫‪ -1‬القوائم التسلسليةم‪ :‬وتحتوي على الرقام النجليزية والرقام‬ ‫الرومانية والحرف النجليزية الصغيرة والكبيرة‬ ‫‪-2‬القوائم الغير التسلسليةم‪ :‬وتحتوي على الرموز فقط مثل مربعات و‬ ‫دوائر صغيرة وغيره من الرموز‬<br /> <br /> ‫‪75‬‬<br /> <br /> ‫>‪<ol‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <ol> </ol‬وهي عبارة عن القوائم التسلسلية‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪type‬‬<br /> <br /> ‫هذا الخاصية تسمح بتحديد نوع القائمة‬ ‫التسلسلية هل هي أرقام أو أحرف‬<br /> <br /> ‫‪start‬‬<br /> <br /> ‫هذا الخاصية تسمح للقائمة التسلسلية البدء‬ ‫من أي رقم أو حرف‬<br /> <br /> ‫‪76‬‬<br /> <br /> ‫في هذا المثال قمنا بتعريف الوسم >‪ < ol‬وقمنا بتحدي‪TT‬د ن‪TT‬وعه ‪ 1‬أي‬ ‫أرقام انجليزية وعرفنا الخاصية ‪ start‬وتعني أن تبدأ من الرق‪TT‬م ‪ 3‬ولك‪TT‬ن‬ ‫إذا كنت تلحظ فإنه ل يوجد أي نتيجة والسبب في ذلك لم نس‪TT‬تخدم‬ ‫الوسم >‪ <li‬وهذا الوسم مسئول عن تحديد البنود‬<br /> <br /> ‫‪77‬‬<br /> <br /> ‫>‪<li‬‬<br /> <br /> ‫الوسم ت‪(Tag‬‬<br /> <br /> ‫وسم >‪ <li> </li‬هذا الوسم يوضع بين وسمي >‪ <ol></ol‬وهو‬ ‫مسئول عن تحديد بنود القائمة التسلسلية والغير تسلسلية‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪type‬‬<br /> <br /> ‫هذا الخاصية تسمح بتحديد نوع القائمة‬ ‫التسلسلية هل هي أرقام أو أحرف‬<br /> <br /> ‫‪start‬‬<br /> <br /> ‫هذا الخاصية تسمح للقائمة التسلسلية البدء‬ ‫من أي رقم أو حرف‬ ‫‪78‬‬<br /> <br /> ‫وقمنا بتحديد الخاصية >‪ <ol‬في هذا المثال قمنا بتعريف الوسم ‪ type‬و ‪ start‬وتأخذ‬ ‫القيمة واحد ثم بعد ذلك قمنا بتعريف الوسم >‪ <li‬وقمنا بتعريف البنود كما في‬ ‫المثال‬<br /> <br /> ‫‪79‬‬<br /> <br /> ‫أمثلة أخرى‬<br /> <br /> ‫‪80‬‬<br /> <br /> 81<br /> <br /> 82<br /> <br /> ‫في المثلة السابقة استخدمنا الرقام والحروف عن طري‪TT‬ق الخاص‪TT‬ية‬ ‫‪ type‬التي تسمح لك بتحدي‪TT‬د ن‪TT‬وع القائم‪TT‬ة م‪TT‬ن أرق‪TT‬ام عربي‪TT‬ة و أرق‪TT‬ام‬ ‫الرومانية أو حروف انجليزية‬<br /> <br /> ‫‪83‬‬<br /> <br /> ‫>‪<ul‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <ul> </ul‬وهي عبارة عن القوائم الغير التسلسلية‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪type‬‬<br /> <br /> ‫هذا الخاصية تسمح بتحديد نوع القائمة من رموز‬ ‫مختلفة‬<br /> <br /> ‫‪84‬‬<br /> <br /> ‫الوسم>‪<li‬يستخدم في القوائم التسلسلية والغير‬ ‫التسلسلية‬<br /> <br /> ‫‪85‬‬<br /> <br /> 86<br /> <br /> ‫في المثلة السابقة استخدمنا الرموز عن طريق الخاصية ‪ type‬التي‬ ‫تسمح لك بتحديد نوع القائمة برموز كالدوائر والمربعات‬<br /> <br /> ‫‪87‬‬<br /> <br /> ‫يمكن عمل قائمة مكونة من وسمين>‪ <ol‬و س‪ <ul‬لعمل‬ ‫قائمة احترفيه‬<br /> <br /> ‫‪88‬‬<br /> <br /> ‫قوائم التعريفات ‪Definition Lists‬‬<br /> <br /> ‫هناك نوع من القوائم تسمى بقوائم التعريفات عندما نريد إدراج قائمة‬ ‫من التعريفات مثل مصطلح معين وتعريف هذا المصطلح أو قائمة من‬ ‫المصطلحات فهناك ثلث أوسمة مختصة بذلك وهيم‪:‬‬<br /> <br /> ‫أولم‪:‬‬ ‫>‪<dl‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <dl> </dl‬هذا الوسم مخصص لتعريف بداية ونهاية قائمة‬ ‫المصطلحات أو التعريفات‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬<br /> <br /> ‫‪89‬‬<br /> <br /> ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬ ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫الوسم نفسه‬<br /> <br /> ‫ثانيا‪:‬‬ ‫>‪<dt‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <dt></dt‬هذا الوسم مخصص لتعريف لتعريف مصطلح‬ ‫القائمة‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬ ‫‪90‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫الوسم نفسه‬<br /> <br /> ‫ثالثاًم‪:‬‬ ‫>‪<dd‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم س‪ <dd></dd‬هذا الوسم هو لتعريف المصطلح أو شرحه‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪91‬‬<br /> <br /> 92<br /> <br /> ‫أسئلة الفصل الثالث‬ ‫‪ -1‬ما وظيفة الوسم >‪<p></p‬؟‬ ‫‪ -2‬ما وظيفة الوسم س‪<pre></pre‬؟‬ ‫‪ -3‬ما هي وظيفية القوائم وكم نوع؟‬<br /> <br /> ‫‪ -4‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق‬ ‫من خلل الوسمة التي تعلمته في هذا الفصل فقط؟‬<br /> <br /> ‫‪ -5‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق‬ ‫من خلل الوسمة التي تعلمته في هذا الفصل فقط؟‬ ‫‪93‬‬<br /> <br /> ‫‪ -6‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق‬ ‫من خلل الوسمة التي تعلمته في هذا الفصل فقط؟‬<br /> <br /> ‫‪ -7‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق‬ ‫من خلل الوسمة التي تعلمته في هذا الفصل فقط؟‬<br /> <br /> ‫‪94‬‬<br /> <br /> ‫الفصل الرابع‬ ‫وسوم خاصة ‪Special tags‬‬ ‫الصور ‪Images‬‬ ‫>‪<img‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <img‬هو وسم مخصص لدراج صورة في صفحة الويب‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬ ‫‪95‬‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪src‬‬<br /> <br /> ‫هذه الخاصية لتحديد مسار الصورة‬<br /> <br /> ‫‪height‬‬<br /> <br /> ‫تحديد ارتفاع الصورة‬<br /> <br /> ‫‪width‬‬<br /> <br /> ‫تحديد عرض الصورة‬ ‫تحديد نصاً ي‪i‬هر عند مرور الماوس على الصورة‬<br /> <br /> ‫‪border‬‬<br /> <br /> ‫إضافة إطار للصورة‬<br /> <br /> ‫‪Vspace‬‬<br /> <br /> ‫لتحديد المسافة العمودية الفاصلة بين النص‬ ‫والحافتين العليا والسفلى للصورة‬<br /> <br /> ‫‪Hspace‬‬<br /> <br /> ‫لتحديد المسافة الفقية الفاصلة بين النص‬ ‫والحافتين اليمنى واليسرى للصورة‬<br /> <br /> ‫‪usemap‬‬<br /> <br /> ‫هذه الخاصية تسمح تقسيم الصورة إلى عدة‬ ‫روابط في نفس الصورة‬<br /> <br /> ‫‪alt‬‬<br /> <br /> ‫تحديد مسار الصورة‬ ‫يوجد ثلث طرق لتحديد مسار الصورةم‪:‬‬ ‫الطريقة الولى‪ :‬أن تكون الصورة وصفحة الويب ‪ HTML‬كلهما في‬ ‫مجلد واحد وهنا تكون طريقة استدعاء مسار الصورة كالتاليم‪:‬‬ ‫‪96‬‬<br /> <br /> ‫>"‪<img src="pic.png‬‬ ‫هنا قمنا بتعرف الوسم الخاص لدراج الصورة ثم عرفنا الخاصية‬ ‫)‪(src‬لتحديد مسار الصورة بعد ذلك كتبنا اسم الصورة مع امتداده‬ ‫الطريقة الثانية‪:‬أن تكون الصورة موجودة في مجلد متفرع عن‬ ‫المجلد الموجود التي فيها صفحة ‪ HTML‬وهنا تكون طريقة الستدعاء‬ ‫مسار الصورة كما في الصورة التاليةم‪:‬‬<br /> <br /> ‫هنا نقوم بكتابة اسم المجلد تتبعها الرمز "لم ثم اسم الصورة مع‬ ‫المتداد‬ ‫الطريقة الثالثة‪ :‬أن تكون مجلد صفحة الويب في مكان ومجلد‬ ‫الصورة أيضا في مكان أخر في هذه الحالة تكون طريق الستدعاء كما‬ ‫في الصورة التاليةم‪:‬‬ ‫‪97‬‬<br /> <br /> ‫نكتب "‪..‬م لتوجيه المتصفح للخروج من المجلد الى المجلد ‪images‬‬ ‫حيث توجد الصورة‬<br /> <br /> ‫‪98‬‬<br /> <br /> 99<br /> <br /> ‫في هذا المثال قمنا بتعريف الوسم ث‪TT‬م عرفن‪TT‬ا الخاص‪TT‬ية ت‪ (src‬لتحدي‪TT‬د‬ ‫مس‪TT‬ار الص‪TT‬ورة بع‪TT‬د ذل‪TT‬ك كتبن‪TT‬ا اس‪TT‬م الص‪TT‬ورة م‪TT‬ع المت‪TT‬داد ث‪TT‬م عرفن‪TT‬ا‬ ‫الخاصية ت‪ ( height‬لتحديد ارتفاع الصورة بت‪ ( pixel‬وفي الخير حددنا‬ ‫الخاصية ت‪ (width‬لتحديد عرض الصورة بت‪(pixel‬‬ ‫يمكن تحديد عرض الصورة بالمئوية بدل ً من ت‪(pixel‬‬<br /> <br /> ‫‪100‬‬<br /> <br /> 101<br /> <br /> 102<br /> <br /> 103<br /> <br /> ‫الروابط ‪Links‬‬ ‫تستخدم الروابط للوصول إلى صفحة معينة في نفس الويب أو إلى‬ ‫موقع أخر ‪.‬‬<br /> <br /> ‫>‪<a‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم rel="nofollow">‪ < a> </a‬وهو اختصار إلى )‪ ( anchor‬لدراج رابط وهذا الوسم‬ ‫ل يعمل لوحده بل تتطلب اضافة خاصية مسئولة عن توجيه الصفحة‬ ‫وهي )‪(href‬‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬ ‫‪104‬‬<br /> <br /> ‫‪href‬‬<br /> <br /> ‫هذه الخاصية مسئولة عن توجيه الرابط إلى‬ ‫صفحة معينة في نفس الموقع أو إلى موقع أخر‬<br /> <br /> ‫‪name‬‬<br /> <br /> ‫هذه الخاصية لتوجيه الرابط في نفس الصفحة‬<br /> <br /> ‫اربع طرق لتعريف الروابط‬ ‫الطريقة الولى‪ :‬هي توجيه الرابط إلى موقع أخر‬<br /> <br /> ‫‪105‬‬<br /> <br /> ‫في هذا المث‪TT‬ال قمن‪TT‬ا بتعري‪TT‬ف الوس‪TT‬م >‪ < a‬و أض‪TT‬فنا الخاص‪TT‬ية ت‪(href‬‬ ‫لدراج الرابط بحيث تكون الصيغة تن‪(href="http://www.google.com‬ث‪TT‬م‬ ‫كتبنا الكلمة الدللية بين وسمي >‪<a></a‬وهي ‪google‬‬<br /> <br /> ‫‪106‬‬<br /> <br /> ‫الطريقة الثانية‪:‬توجيه الرابط إلى صفحة معينة من نفس الموقع‬<br /> <br /> ‫‪107‬‬<br /> <br /> ‫في هذا المثال قمنا بإنشاء صفحتين الصفحة الولى هي‬ ‫)‪ (index.html‬والصفحة الثانيةت‪ (whous.html‬في مجلد واحد بعد ذلك‬ ‫في صفحة ت‪ (index.html‬قمنا بتعريف الوسمس‪ <a‬وأضفنا الخاصية‬ ‫)‪ (href‬بالصغية التاليةت ن‪ (href="whous.html‬للوصول إلى صفحة‬ ‫)‪ (whous.html‬وعند الضغط على الرابط سوف يقوم بتحويلك إلى‬ ‫الصفحة التي قمت بتحديده وهيت‪.(whous.html‬‬<br /> <br /> ‫‪108‬‬<br /> <br /> ‫الطريقة الثالثة‪ :‬إضافة رابط للصورة لتوجيهها إلى موقع أخر أو‬ ‫صفحة معينة في نفس الموقع‬<br /> <br /> ‫‪109‬‬<br /> <br /> ‫في هذا المثال قمنا بتعريف الوسم س‪ <a‬وأضفنا الخاصية ت‪(href‬‬ ‫لتوجيهها إلى صفحة في نفس الموقع وبعد ذلك لم نكتب الكلمة‬ ‫الدللية بل قمنا بإضافة الوسم rel="nofollow">‪ <img‬الخاص بإدراج الصور لتكون‬ ‫الصورة هي الدللية للصفحة‬ ‫الطريقة الرابعة‪:‬توجيه رسالة لعنوان إيميل ت‪ (Email‬بحيث عند‬ ‫النقر عليه يقوم بإظهار برنامج البريد اللكتروني‬<br /> <br /> ‫‪110‬‬<br /> <br /> ‫في هذا المثال قمنا بتعريف الوسم س‪ <a‬وأضفنا الخاصية ت‪(href‬‬ ‫لتوجيه ‪ email‬بالصيغة التاليةم‪:‬‬ ‫)“‪(href="mailto:mohammad200610022@gmail.com‬‬ ‫‪111‬‬<br /> <br /> ‫خرائط الصور‬ ‫وهي عبارة عن أكثر من رابط في صورة واحدة فقط يتم تقسيم‬ ‫الصورة فيها يتم تقسيم الصورة كما في الصورةم‪:‬‬<br /> <br /> ‫‪112‬‬<br /> <br /> ‫شرح التقسيمم‪:‬‬ ‫‪circle‬‬<br /> <br /> ‫وه‪TT‬و ش‪TT‬كل ال‪TT‬دائرة يتك‪TT‬ون م‪TT‬ن الح‪TT‬داثي الس‪TT‬يني‬ ‫والصادي ونصف القطر ت‪(X,Y,Radius‬‬<br /> <br /> ‫‪rect‬‬<br /> <br /> ‫وهو شكل المستطيل يتك‪TT‬ون م‪TT‬ن الح‪TT‬داثي الس‪TT‬يني‬ ‫للرك‪TT‬ن أعل‪TT‬ى اليس‪TT‬ار ث‪TT‬م الح‪TT‬داثي الص‪TT‬ادي ل‪TT‬ه ث‪TT‬م‬ ‫الح‪TT‬داثي الس‪TT‬يني للرك‪TT‬ن المقاب‪TT‬ل أدن‪TT‬ى اليمي‪TT‬ن ث‪TT‬م‬ ‫الحداثي الصادي ت‪(X1,Y1,X2,Y2‬‬<br /> <br /> ‫‪poly‬‬<br /> <br /> ‫وهو شكل المضلع يمكنك رسم ع‪TT‬دة قط‪TT‬ع مس‪TT‬تقيمة‬ ‫وتك‪TTT‬ون إح‪TTT‬داثياته عب‪TTT‬ارة ع‪TTT‬ن الح‪TTT‬داثي الس‪TTT‬يني‬ ‫والصادي لنقطة الولى ثم الثانية وهكذا‬ ‫)‪(X1,Y1,X2,Y2,X3,Y3,X4,Y4,....Xn,Yn‬‬<br /> <br /> ‫ rel="nofollow">‪<map‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <map></map‬هذا الوسم هو لوضع الرسومات على الصورة‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪name‬‬<br /> <br /> ‫هذا الخاصية تستدعي تنفيذ الخاصية ‪usemap‬‬ ‫الموجودة في الوسم >‪<img‬‬<br /> <br /> ‫‪113‬‬<br /> <br /> ‫>‪<area‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم >‪ <area‬هو وسم لرسم الشكل المحدد في الصورة‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪Shape‬‬<br /> <br /> ‫من خلل هذا الوسم يمكن تحديد الشكل من‬ ‫الشكال التى شرحناها قبل قليل‬<br /> <br /> ‫‪coords‬‬ ‫‪alt‬‬<br /> <br /> ‫هذه الخاصية لتحديد النقط لرسم الشكل في‬ ‫الصورة‬ ‫تحديد نصاً ي‪i‬هر عند مرور الماوس على الصورة‬<br /> <br /> ‫‪114‬‬<br /> <br /> ‫في هذا المثال قمنا بتعريف الوسم >‪ <img‬وعرفنا الخاصية )‪(src‬‬ ‫لتحديد مسار الصورة ثم عرفنا الخاصية ت‪ (usemap‬لتحديد التقسيم‬ ‫‪115‬‬<br /> <br /> ‫في الصورة إلى عدة روابط وأعطيناها اسم ت‪ (#image‬بعد ذلك كتبنا‬ ‫الوسم >‪ <map‬لتهيئة التقسيم في الصورة وعرفنا الخاصية )‪(name‬‬ ‫من أجل تنفيذ التقسيم بعد ذلك كتبنا الوسم س‪ <area‬للبدء‬ ‫بالتقسيم الصورة إلى عدة أقسام‬<br /> <br /> ‫تقسيم الويب‬ ‫>‪<div‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫وسم س‪ <div></div‬هذا الوسم مخصص لتقس‪TT‬يم ج‪TT‬زء م‪TT‬ن الص‪TT‬فحة‬ ‫أو عدة أجزاء لعطائه بعض الخصائص باستخدام ‪ CSS‬كإض‪TT‬افة ل‪TT‬ون أو‬ ‫تغيير الخط أو إضافة حواف وعند تعريف الوس‪TT‬م ف‪TT‬ي الص‪TT‬فحة ف‪TT‬إنه ل‬ ‫ي‪i‬هر تأثيره في الصفحة إل بعد استخدام ‪CSS‬‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫‪116‬‬<br /> <br /> ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬ ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪align‬‬<br /> <br /> ‫هذه الخاصية مسئولة عن تحديد محاذاة >‪<div‬‬ ‫عن اليمين‪-‬الوسط‪-‬الشمال‬<br /> <br /> ‫‪117‬‬<br /> <br /> ‫>‪<hr‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ <hr‬هذا الوسم اختصار إلى ‪ Horizontal Rule‬أو المسطرة الفقية‬ ‫يستخدم لتسطير الصفحة من أجل تقسيمها‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪size‬‬ ‫‪width‬‬<br /> <br /> ‫لتحديد سمك المسطرة‬ ‫لتحديد عرض المسطرة اما بت‪ (pixel‬أو‬ ‫بالمئويةت‪(%‬‬<br /> <br /> ‫‪align‬‬<br /> <br /> ‫لتحديد المحاذاة للمسطرة سواء من اليمين أو‬ ‫الوسط أو الشمال‬<br /> <br /> ‫‪color‬‬ ‫‪noshade‬‬<br /> <br /> ‫لدراج لون للمسطرة‬ ‫لجعل خط المسطرة غير غائر‬ ‫‪118‬‬<br /> <br /> 119<br /> <br /> 120<br /> <br /> ‫>‪<embed‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ <embed‬هذا الوسم يستخدم لتشغيل الفيديوهات والفلشات‬ ‫والصوات على المتصفح‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪src‬‬ ‫‪height‬‬<br /> <br /> ‫لتحديد مسار الفيديو أو الفلش من أجل تشغيله‬ ‫على المتصفح‬ ‫لتحديد ارتفاع المشغل‬<br /> <br /> ‫‪width‬‬<br /> <br /> ‫لتحديد عرض المشغل‬<br /> <br /> ‫‪type‬‬<br /> <br /> ‫لتحديد موصفات المشغل‬<br /> <br /> ‫‪121‬‬<br /> <br /> 122<br /> <br /> ‫>‪<marquee‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ < marquee></marquee‬ه‪TT‬ذا الوس‪TT‬م للن‪TT‬ص المتح‪TT‬رك وه‪TT‬و ش‪TT‬بيه‬ ‫بالشريط المتحرك الذي ي‪i‬هر في الخبار‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪Bigcolor‬‬ ‫‪height‬‬<br /> <br /> ‫لتحديد لون للشريط المتحرك‬ ‫لتحديد ارتفاع الشريط‬<br /> <br /> ‫‪width‬‬<br /> <br /> ‫لتحديد عرض الشريط‬<br /> <br /> ‫‪align‬‬<br /> <br /> ‫لتحديد المحاذاة سواء من اليمين أو الوسط أو‬ ‫الشمال‬<br /> <br /> ‫‪behavior‬‬<br /> <br /> ‫لتحديد سلوك النص المتحرك وتأخذ ثلث قيم م‪:‬‬ ‫‪1-scroll‬‬ ‫تيتحرك النص بنفس التجاه من الجانب إلى‬ ‫الخر بصورة مستمرة وهي الحالة الفتراضية(‬ ‫‪123‬‬<br /> <br /> ‫‪2-slide‬‬ ‫تيتحرك النص مرة واحدة من الجانب إلى الخر(‬ ‫‪3-alternate‬‬ ‫تيتحرك النص جيئة وذهابا من جانب إلى أخر(‬ ‫‪direction‬‬<br /> <br /> ‫‪loop‬‬<br /> <br /> ‫‪scrollamount‬‬ ‫‪scrolldelay‬‬<br /> <br /> ‫لتحديد سير اتجاه النص في الشريط وتأخذ القيم‬ ‫التاليةم‪:‬‬ ‫‪1-rtl‬‬ ‫تمن اليمين إلى الشمال في اللغة العربية(‬ ‫‪2-ltr‬‬ ‫تمن الشمال إلى اليمين في اللغة النجليزية(‬ ‫لتحديد عدد المرات الذي يتحرك بها النص وتأخذ‬ ‫قيم عددية إذا اردت أن يتحرك النص بعدد ل‬ ‫نهائي نستخدم ‪ 1-‬أو ‪infiniti‬‬ ‫لتحديد المسافة بين كل لقطة وأخرى للنص‬ ‫وتأخذ قيم عددية صحيحة‬ ‫لتحديد المسافة الزمنية الذي يستغرقه النص‬ ‫في القفز بين كل خطوة وأخرى وتأخذ قيم عددية‬ ‫ولكنها تمثل بالميلي ثانية‬<br /> <br /> ‫‪124‬‬<br /> <br /> 125<br /> <br /> ‫أسئلة الفصل الرابع‬ ‫‪ -1‬كم طريقة لتحديد مسار الصورة مع الشرح لكل طريقة ؟‬ ‫‪-2‬كم طريقة للضافة رابط مع الشرح لكل طريقة؟‬ ‫‪ -3‬ما هو الوسم >‪<div‬؟‬<br /> <br /> ‫‪-4‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬<br /> <br /> ‫‪-5‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬<br /> <br /> ‫‪126‬‬<br /> <br /> ‫‪-6‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬<br /> <br /> ‫الفصل الخامس‬ ‫الجدوال ‪Tables‬‬ ‫تعد الجداول من أهم المواضيع في ‪ HTML‬فمن خلل الجداول‬ ‫تستطيع ترتيب وتن‪i‬يم صفحة الويب إذا كانت تحتوي على معلومات‬ ‫كثيرة وتعتبر الجداول مهمة جدا في أي موقع فأغلب المواقع تحتوي‬ ‫على الجداول وطريقة إضافة وسوم الخاصة بالجداول سهلة سأقوم‬ ‫بشرحها بالتفصيل حتى ل يصعب المر عليك‬<br /> <br /> ‫شرح الوسوم‬ ‫>‪<table></table‬‬ ‫>‪<tr></tr‬‬<br /> <br /> ‫وسم تعريف الجدول‬ ‫وسم تعريف الصف في الجدول ويكون‬ ‫بين وسمي س‪<table></table‬‬<br /> <br /> ‫>‪<td></td‬‬<br /> <br /> ‫وسم تعريف الخلية للصف في الجدول‬ ‫ويكون بين وسمي س‪<tr></tr‬‬ ‫‪127‬‬<br /> <br /> ‫>‪<table‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ < table></table‬ه‪TT‬ذا الوس‪TT‬م لتعري‪TT‬ف الج‪TT‬دول وب‪TT‬دون ه‪TT‬ذا ال‪TT‬وس‬ ‫ليمكن تعرف الصفوف والخليا في الجدول‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪dir‬‬<br /> <br /> ‫مسئولة عن تحديد اتجاه قراءة النص من اليمين‬ ‫إلى الشمال أو العكس في الجدول‬<br /> <br /> ‫‪width‬‬<br /> <br /> ‫لتحديد عرض الجدول أما بت‪(pixel‬أو بالمئويةت‪(%‬‬<br /> <br /> ‫‪align‬‬<br /> <br /> ‫لتحديد المحاذاة للجدول سواء من اليمين أو‬ ‫الوسط أو الشمال‬<br /> <br /> ‫‪bgcolor‬‬<br /> <br /> ‫لدراج لون للجدول‬ ‫‪128‬‬<br /> <br /> ‫لدراج صورة للجدول‬<br /> <br /> ‫‪background‬‬<br /> <br /> ‫‪ CELLSPACING‬لتحديد المسافة بين كل خلية وأخرى‬ ‫‪ CELLPADDING‬تحديد الهوامش لخليا الجدول‬<br /> <br /> ‫>‪<tr‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ < tr></tr‬هذا الوسم لتعري‪TT‬ف الج‪TT‬دول وب ‪T‬دون ه‪TT‬ذا الوس‪TT‬م ليمك‪TT‬ن‬ ‫تعرف الصفوف والخليا في الجدول‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪dir‬‬<br /> <br /> ‫مسئولة عن تحديد اتجاه قراءة النص من اليمين‬ ‫إلى الشمال أو العكس‬<br /> <br /> ‫‪bgcolor‬‬ ‫‪background‬‬ ‫‪align‬‬<br /> <br /> ‫لتغيير لون الصف في الجدول‬ ‫لضافة صورة في الصف‬ ‫تحديد المحاذاة للجدول سواء من اليمين أو‬ ‫‪129‬‬<br /> <br /> ‫الوسط أو الشمال وتأخذ القيم‬ ‫)‪(right, centre, left‬‬ ‫‪VALIGN‬‬<br /> <br /> ‫تحدي‪TTT‬د المح‪TTT‬اذاة للج‪TTT‬دول س‪TTT‬واء م‪TTT‬ن ف‪TTT‬وق أو‬ ‫المنتصف أوتحت وتأخذ القيم‬ ‫)‪(top, middle, bottom‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪<td‬‬<br /> <br /> ‫>‪<td></td‬هذا الوسم لضافة خليا داخل الصف في الجدول‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪dir‬‬<br /> <br /> ‫مسئولة عن تحديد اتجاه قراءة النص من اليمين‬ ‫إلى الشمال أو العكس‬<br /> <br /> ‫‪width‬‬<br /> <br /> ‫لتحديد عرض الجدول أما بت‪(pixel‬أو بالمئويةت‪(%‬‬ ‫‪130‬‬<br /> <br /> ‫‪align‬‬ ‫‪bgcolor‬‬ ‫‪background‬‬<br /> <br /> ‫لتحديد المحاذاة للجدول سواء من اليمين أو‬ ‫الوسط أو الشمال‬ ‫لدراج لون للجدول‬ ‫لدراج صورة للجدول‬<br /> <br /> ‫‪colspan‬‬<br /> <br /> ‫لدمج أكثر من خلية في الصف الواحد‬<br /> <br /> ‫‪rowspan‬‬<br /> <br /> ‫لدمج أكثر من صف في الجدول‬<br /> <br /> ‫‪131‬‬<br /> <br /> 132<br /> <br /> ‫في ه‪TT‬ذا المث‪TT‬ال قمن‪TT‬ا ب‪TT‬إدراج ج‪TT‬دول وعرفن‪TT‬ا الخاص‪TT‬ية ‪ border‬لرس‪TT‬م‬ ‫حواف أو اطار للجدول ثم بعد ذلك عرفنا بعض الخصائص بع‪TT‬دها عرفن‪TT‬ا‬ ‫الوسم >‪ < tr‬لدراج صف في الجدول وعرفنا بعض الخصائص كم‪TT‬ا ه‪TT‬و‬ ‫موجود في المثال ثم بعد ذلك عرفنا الوس‪TT‬م >‪ < td‬لدراج خلي‪TT‬ا ف‪TT‬ي‬ ‫الصف وعرفنا بعض الخصائص لها‬<br /> <br /> ‫‪133‬‬<br /> <br /> ‫ف‪TT‬ي ه‪TT‬ذا المث‪TT‬ال قمن‪TT‬ا بتعري‪TT‬ف ف‪TT‬ي الص‪TT‬ف الث‪TT‬اني الخاص‪TT‬ية ‪colspan‬‬ ‫وأعطيناها القيمة ‪ 2‬بحيث يقوم بدمج خليتن في صف واحد‬<br /> <br /> ‫‪134‬‬<br /> <br /> ‫في هذا المثال قمنا بتعريف في الصف الول الخاصية ‪rowspan‬‬ ‫وأعطيناها القيمة ‪ 2‬بحيث يقوم بدمج صفين‬<br /> <br /> ‫>‪<caption‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪<caption></caption‬هذا الوسم لضافة عنوان للجدول ويكتب بين‬ ‫وسمي س‪<table></table‬‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪135‬‬<br /> <br /> 136<br /> <br /> ‫أمثلة على الجداول‬<br /> <br /> ‫‪137‬‬<br /> <br /> 138<br /> <br /> 139<br /> <br /> 140<br /> <br /> ‫أسئلة الفصل الخامس‬ ‫‪-1‬ما هي الوسوم لبناء جدول في الويب؟‬<br /> <br /> ‫‪-2‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬<br /> <br /> ‫‪141‬‬<br /> <br /> ‫‪-3‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬<br /> <br /> ‫‪-4‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬ ‫‪142‬‬<br /> <br /> ‫الفصل السادس‬ ‫الطارات ‪Frames‬‬ ‫الطار هو باختصار تقسيم صفحة الويب إلى عدة أقسام في صفحة‬ ‫واحدة بحيث كل قسم يحتوي على صفحة ويب خاص به‪.‬‬<br /> <br /> ‫>‪<frameset‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪<frameset></frameset‬هذا الوسم لضافة إطار في صفحة الويب‬ ‫وهنا عليك أن تلحظ عند إضافة وسم >‪ <frameset‬يجب عليك‬ ‫استبدال الوسم >‪ <body‬بالوسم >‪ <setframe‬وإل لن ي‪i‬هر أي إطار‬ ‫في الصفحة‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪cols‬‬<br /> <br /> ‫هذه الخاصية لتحديد عدد العمدة وأحجامها في‬ ‫الطار وتأخذ القيمة إما بالمئوية أو البيكسل‬<br /> <br /> ‫‪rows‬‬<br /> <br /> ‫هذه الخاصية لتحديد عدد الصفوف وأحجامها في‬ ‫الطار وتأخذ القيمة إما بالمئوية أو البيكسل‬ ‫‪143‬‬<br /> <br /> ‫هذه الخاصية لتحديد ظهور أو أخفاء الطار من‬<br /> <br /> ‫‪frameborder‬‬<br /> <br /> ‫الصفحة‬<br /> <br /> ‫>‪<frame‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪<frame></frame‬هذا الوس‪TT‬م لض‪TT‬افة مس‪TT‬ار الص‪TT‬فحة أو ص‪TT‬ورة م‪TT‬ن‬ ‫خلل الخاصية ‪ src‬في صفحة الويب‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪src‬‬<br /> <br /> ‫هذه الخاصية تسمح بتحديد مسار الصفحة أو‬ ‫الصورة‬<br /> <br /> ‫‪name‬‬<br /> <br /> ‫لتحديد التنسيق بين الطارات و أسلوب عرضها‬<br /> <br /> ‫‪marginheight‬‬<br /> <br /> ‫لتحديد مقدار المسافة الفارغة للهوامش‬ ‫السفلي والعلوي‬<br /> <br /> ‫‪marginwidth‬‬<br /> <br /> ‫تحديد مقدار المسافة الفارغة للهوامش اليمين‬ ‫والشمال‬<br /> <br /> ‫‪scrolling‬‬<br /> <br /> ‫هذه الخاصية لتحديد أشرطة المتصفح وتأخذ‬ ‫ثلث قيمم‪:‬‬ ‫)ي‪i‬هر شريط المتصفح(‪1-scrolling=yes‬‬ ‫)ل ي‪i‬هر شريط المتصفح(‪2-scrolling=no‬‬ ‫)ي‪i‬هر تلقائي من نفسه(‪3-scrolling=auto‬‬<br /> <br /> ‫‪noresize‬‬<br /> <br /> ‫هذه الخاصية تسمح بعدم التحكم في حجم‬ ‫الطار من تكبير أو تصغير‬<br /> <br /> ‫‪144‬‬<br /> <br /> ‫أمثلة على الطارات‬<br /> <br /> ‫ةت‬TT‫ ( والثاني‬frame1.html‫ىت‬TT‫ ( الول‬HTML) ‫فحات‬TT‫اء ثلث ص‬TT‫ا بإنش‬TT‫قمن‬ > ‫ف‬TTT‫ا بتعري‬TTT‫ث قمن‬TTT‫( بحي‬framemain.html‫رةت‬TTT‫ ( والخي‬frame2.html (cols‫ية ت‬TT‫ا الخاص‬TT‫ك عرفن‬TT‫د ذل‬TT‫ ( بع‬framemain.html) ‫ي‬TT‫ < ف‬frameset 145<br /> <br /> ‫لتحديد كم عمود للصفحة حي‪T‬ث ك‪T‬ل عم‪T‬ود يمث‪TT‬ل ص‪TT‬فحة واح‪T‬دة بع‪T‬دها‬ ‫أضفنا الوسمين من >‪<frame‬وم‪TT‬ن خلل الخاص‪TT‬ية ‪ src‬ح‪TT‬ددنا ص‪TT‬فحتين‬ ‫لكل الوس‪TTT‬مين وعن‪TTT‬د التنفي‪TTT‬ذ ن‪TTT‬رى ان الص‪TTT‬فحتين ت‪(frame1.html‬وت‬ ‫‪ (frame2.html‬تم عرضهما في صفحة ت‪(framemain.html‬‬<br /> <br /> ‫‪146‬‬<br /> <br /> ‫قمنا في هذا المثال بتقسيم الصفحة عن طريق الخاصية ‪ cols‬إلى‬ ‫ثلث أعمدة بحيث كل عمود يحتوي على صفحة مع تحديد مسار‬ ‫الصفحة لها من خلل الخاصية ‪ src‬التي بداخل الوسم س‪<frame‬‬<br /> <br /> ‫‪147‬‬<br /> <br /> ‫هذا المثال نفس نفس السابق ولكن الختلف فيه هو قمنا بتعريف‬ ‫الخاصية ‪ rows‬ويعني هذا تقسيم الصفحة إلى ثلث صفوف كما في‬ ‫المثال‬<br /> <br /> ‫في هذا المثال قمنا بتعريف الخاصية ‪ cols‬وأعطيناها القيمة‬ ‫)*‪ (30%,‬حيث أن العمود الول يأخذ مساحة ‪ 30%‬من مساحة‬ ‫الصفحة أما العلمة ت*(فتعني خذ باقي مساحة الصفحة المتبقية أي‬ ‫‪148‬‬<br /> <br /> ‫يعني أن مساحة الصفحة هي‪ 100%‬ففي العمود الول يأخذ ‪30%‬‬ ‫والعمود الثاني يأخذ ‪ %70‬وهكذا‬<br /> <br /> ‫المثال واضح ل يحتاج إلى شرح حاول أن تشرحه بنفسك كاختبار‬<br /> <br /> ‫‪149‬‬<br /> <br /> ‫بسيط لك‬<br /> <br /> ‫‪150‬‬<br /> <br /> ‫في هذا المثال قمنا بتعريف اثنين من الوسم س‪ <frmaeset‬الول قمنا‬ ‫بتعريف الخاصية ‪ rows‬وأعطيناها القيمة ت*‪ (30%,‬أي أن الصف الول‬ ‫يأخذ مساحة ت‪(30%‬والصف الثاني يأخذ باقي المساحة المتبقية من‬ ‫حجم الصفحة ثم بعد ذلك أضفنا الوسم >‪ <frame‬داخل >‪<frameset‬‬ ‫الولى وحددنا ‪ src‬لها بعد ذلك قمنا بإضافة >‪ <frameset‬ثاني داخل‬ ‫>‪ <frameset‬الول وحددنا الخاصية ‪ cols‬مع القيم ت‪ (20%,60%‬أي‬ ‫أن الصف الثاني يتكون من عمودين بعد ذلك أضفنا وسمين >‪<frame‬‬ ‫وقمنا بتحديد ‪ src‬لهما‬<br /> <br /> ‫أتمنى أن يكون الشرح واضح‬<br /> <br /> ‫‪151‬‬<br /> <br /> ‫الخاصية ‪name‬‬ ‫الخاصية ‪ name‬تعتبر من أهم الخصائص التي تأتي من الوسم‬ ‫>‪ <frame‬هذه الخاصية تسمح لك بجلب وعرض الصفحة في الطار‬ ‫مع بقاء جميع الطارات موجوده وهي شبيه الوصلت التشعبية أو‬ ‫الروابط لحد ما إل أن الروابط عند الضغط عليه يقوم بفتح وعرض‬ ‫الصفحة في نافذه جديدة من المتصفح بعكس الطار كما في المثال‬ ‫التاليم‪:‬‬<br /> <br /> ‫‪152‬‬<br /> <br /> (frma1.html ‫تصفحة‬<br /> <br /> 153<br /> <br /> ‫صفحة ت‪(frame2.html‬‬<br /> <br /> ‫ف‪TTTT‬ي ه‪TTTT‬ا المث‪TTTTT‬ال قمن‪TTTT‬ا بإنش‪TTTTT‬اء ص‪TTTTT‬فحتين الول اس‪TTTTT‬ميناهت‬ ‫‪(frame1.html‬الص‪TTT‬فحة الثاني‪TTT‬ة أس‪TTT‬ميناه ت‪ ( frame2.html‬الص‪TTT‬فحة ت‬ ‫‪ ( frame1.htm‬في السطر ‪ 13‬أض‪TT‬فنا الخاص‪TT‬ية ‪ name‬إل‪TT‬ى الوس‪TT‬م >‬ ‫‪<frame‬في الصفحة ت‪ (frame2.html‬قمنا بإضافة رابط ف‪TT‬ي الص‪TT‬فحة و‬ ‫وهذا الرابط يوصلك إلى الصفحة )‪ ( src=frame1.html‬وعرفنا الخاص‪TT‬ية‬ ‫‪ target‬وأعطيناه‪TT‬ا نف‪TT‬س القيم‪TT‬ة الموج‪TT‬ودة ف‪TT‬ي الوس‪TT‬م ‪ frame‬ف‪TT‬ي‬ ‫الص‪TT‬فحة ت‪ (frame1.html‬وه‪TT‬ي )‪(pic‬بع‪TT‬د التنفي‪TT‬ذ عن‪TT‬د الض‪TT‬غط عل‪TT‬ى‬ ‫الصورة سوف ت‪i‬ه‪TT‬ر ص‪TT‬فحة ‪ fram1.html‬ف‪TT‬ي الط‪TT‬ار ال‪TT‬ذي يوج‪TT‬د في‪TT‬ه‬ ‫صفحة ‪ frame2.html‬وهكذا‬ ‫‪154‬‬<br /> <br /> ‫أسئلة الفصل السادس‬ ‫‪ -1‬ما هي الطارات؟‬ ‫‪ -2‬ما هي وظيفة الخاصية ت‪ (rows‬في الوسم س‪<frameset‬مع مثال‬ ‫‪ -3‬ما هي وظيفة الخاصية ت‪ (cols‬في الوسم س‪<frameset‬مع مثال‬ ‫‪ -4‬ما هي وظيفة الوسم س‪<frame‬‬ ‫‪ -5‬ما هي وظيفة الخاصية ت‪ (name‬في الوسم س‪<frame‬مع مثال‬<br /> <br /> ‫‪-6‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬<br /> <br /> ‫‪155‬‬<br /> <br /> ‫‪-7‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬<br /> <br /> ‫‪-8‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬ ‫في السئلة ‪6‬و ‪7‬و ‪ 8‬ليس شرطا ان يكون حجم العمدة‬ ‫والصفوف دقيقية المهم ان تكون نفس النتيجة‬<br /> <br /> ‫‪156‬‬<br /> <br /> ‫الفصل السابع‬ ‫النماذج ‪forms‬‬<br /> <br /> ‫إن النماذج مهمة جدا في تصميم الموقع واكاد اجزم بإن النماذج تكاد‬ ‫ل تخلو من المواقع الويب وذلك لهميتها في التفاعل مع الموقع‬ ‫وصاحبه من جهة والزوار من جهة اخرى كعملية تسجيل في منتدي‬ ‫او إضافة تعليقات ‪....‬الخ‬<br /> <br /> ‫أشكال النماذج‬<br /> <br /> ‫‪text‬‬<br /> <br /> ‫لضافة نص من خلل الوسم‬ ‫>”‪<input type=”text‬‬<br /> <br /> ‫‪password‬‬<br /> <br /> ‫لضافة كلمة سر من خلل‬ ‫الوسم‬ ‫>”‪<input type=”password‬‬ ‫‪157‬‬<br /> <br /> ‫‪Radio button‬‬<br /> <br /> ‫للختيار الواحد فقط حيث أن‬ ‫‪ radio‬تسمح لك باختيار خيار‬ ‫واحد فقط من خلل الوسم‬ ‫>”‪<input type=”radio‬‬<br /> <br /> ‫‪checkbox‬‬<br /> <br /> ‫للختيار المتعدد حيث أن‬ ‫‪ checkbox‬يسمح لك باختيار‬ ‫أكثر من خيار واحد من خلل‬ ‫الوسم‬ ‫>”‪<input type=”checkbox‬‬<br /> <br /> ‫‪file‬‬<br /> <br /> ‫لرفع الملفات من خلل الوسم‬ ‫>”‪<input type=”file‬‬<br /> <br /> ‫‪submit‬‬<br /> <br /> ‫الزر يمكن أن يقوم بأكثر من‬ ‫عملية كحفظ او ارسال بيانات‬ ‫‪...‬الخ من خلل الوسم‬ ‫>”‪<input type=”submit‬‬<br /> <br /> ‫‪button‬‬<br /> <br /> ‫نفس ‪submit‬‬ ‫لضافة نصوص أو تعليقات‬ ‫وهي شبيه ب ‪ textarea‬الخاصة‬ ‫بالفيس بوك أو تويتر من خلل‬ ‫الوسم س‪<textarea></textarea‬‬<br /> <br /> ‫‪textarea‬‬<br /> <br /> ‫وتسمى القائمة المنسدلة‬ ‫وتسمح لك باختيار خيار واحد‬ ‫أو أكثر من خلل الوسم‬ ‫>‪<select></select‬‬<br /> <br /> ‫‪select‬‬<br /> <br /> ‫‪158‬‬<br /> <br /> ‫هن‪TT‬اك اض‪TT‬افات ك‪TT‬ثيره ف‪TT‬ي ‪ HTML5‬بخص‪TT‬وص ‪forms‬‬ ‫وسوف تتعرف عليها ف‪TT‬ي الج‪TT‬زء الث‪TT‬اني م‪TT‬ن الكت‪TT‬اب إن‬ ‫شاء ا‬<br /> <br /> ‫>‪<form‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ <form></form‬حتى تضيف الشكال السابقة من النماذج وتعمل‬ ‫بشكل صحيح يجب أن تتم بين وسمي ‪form‬‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪action‬‬<br /> <br /> ‫ه‪TT‬ذه الخاص‪TT‬ية تح‪TT‬دد العن‪TT‬وان ال‪TT‬ذي س‪TT‬وف يت‪TT‬م‬ ‫ارس‪TT‬ال بيان‪TT‬ات النم‪TT‬وذج الي‪TT‬ه س‪TT‬واء ك‪TT‬انت ص‪TT‬فحة‬ ‫خاصة مبنية بلغة برمجة خاصة أو ايميل‬<br /> <br /> ‫‪method‬‬<br /> <br /> ‫هذه الخاصية تحدد الطريقة التى سيتم بها‬ ‫التعامل من العنوان المحدد في الخاصية السابقة‬ ‫‪ action‬وتأخذ قيمتين وهمام‪:‬‬ ‫‪get -1‬م‪ :‬تستخدم في حال إذا كانت عملية‬ ‫المعالجة داخلية أي تتم داخل السيرفر‬ ‫‪post-2‬م‪ :‬تستخدم في حال إذا كانت عملية‬ ‫المعالجة خارجية كإرسال بيانات الى اليميل مثل‬<br /> <br /> ‫‪enctype‬‬<br /> <br /> ‫هذه الخاصية مهمة جدا وهي تحدد طريقة‬ ‫‪159‬‬<br /> <br /> ‫الترميز التى سيتم ارسال البيانات ولديها‬ ‫طريقتين لتحديد الترميز‬ ‫‪text/plain-1‬‬ ‫‪application/x-www-form-urlencoded-2‬‬<br /> <br /> ‫‪160‬‬<br /> <br /> 161<br /> <br /> ‫>‪<Input‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪<Input‬وهو الوسم الذي يعرف شكل النماذج من خلل الخصائص‬ ‫التابعة لهذا الوسم‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪type‬‬<br /> <br /> ‫هذه الخاص‪TT‬ية مس‪TT‬ئولة ع‪TT‬ن تحدي‪TT‬د ش‪TT‬كل ال‪TT‬ذي‬ ‫ي‪i‬هر في الوسم س‪ <Input‬سواء كان زر أو نص أو‬ ‫متعدد الختيار ‪...‬الخ‬ ‫والشكال هيم‪:‬‬ ‫‪text-1‬‬ ‫‪password-2‬‬ ‫‪hidden-3‬‬ ‫‪radio-4‬‬ ‫‪checkbox-5‬‬ ‫‪submit-6‬‬ ‫‪reset-7‬‬ ‫‪button-8‬‬ ‫طبع‪TT‬ا ه‪TT‬ذه الش‪TT‬كال فق‪TT‬ط ف‪TT‬ي ‪ HTML4‬وهن‪TT‬اك‬ ‫اضافات كثيرة في ‪HTML5‬‬<br /> <br /> ‫‪name‬‬<br /> <br /> ‫هذه الخاص‪TT‬ية لتحدي‪TT‬د اس‪TT‬م حق‪TT‬ل للوس‪TT‬م حي‪TT‬ث‬ ‫تمكنك هذه الخاص‪TT‬ية م‪TT‬ن اس‪TT‬تخدام ه‪TT‬ذا الحق‪TT‬ل‬ ‫في البرمجة بلغات متقدمة مثل ‪PHP‬‬<br /> <br /> ‫‪value‬‬<br /> <br /> ‫لتعيين قيمة للحقل يمكن استخدامها كتوضيح‬ ‫ما هو هذا الحقل مثل كلمة المرور‬<br /> <br /> ‫‪size‬‬<br /> <br /> ‫لتحديد حجم الحقل‬ ‫‪162‬‬<br /> <br /> ‫‪maxlength‬‬ ‫‪height‬‬<br /> <br /> ‫لتحديد الحد القصي من عدد الحروف في النص‬ ‫لتحديد ارتفاع الحقل اذا كان ‪ type‬هو ‪ text‬أو‬ ‫‪password‬‬<br /> <br /> ‫‪width‬‬ ‫‪checked‬‬<br /> <br /> ‫لتحديد طول الحقل‬ ‫لتحديد الختيار الفتراضي اذا كان ‪ type‬هو ‪radio‬‬ ‫أو ‪checkbox‬‬<br /> <br /> ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪placeholder‬‬<br /> <br /> ‫تستخدم هذه الخاصية من أجل وصف او‬ ‫المساعدة م‪TT‬اذا المس‪TT‬تخدم س‪TT‬وف يكت‪TT‬ب داخ‪TT‬ل‬ ‫هذا الحقل اذا كان ‪ type‬هو ‪text, password‬‬<br /> <br /> ‫‪163‬‬<br /> <br /> ‫في هذا المثال قمنا بتعريف الوسم س‪ <form‬و ايضا قمنا بتعريف‬ ‫الوسم س‪ <input‬ثلث مرات كل مرة لها خاصية مختلفة وهم‬ ‫‪ text, password, radio‬وقمنا بتحديد الخواص التابعة لهم وهي‬ ‫مشروحة فوق يمكنك الرجوع اليها‬ ‫‪164‬‬<br /> <br /> 165<br /> <br /> ‫الفرق بين ‪ radio‬و ‪checkbox‬‬<br /> <br /> ‫‪checkbox‬‬<br /> <br /> ‫‪radio‬‬<br /> <br /> ‫‪ -1‬تستطيع اختيار خيار واحد من ‪ -1‬تستطيع اختيار خيار واحد أو‬ ‫أكثر من عدة اختيارات‬ ‫عدة اختيارات‬ ‫‪ -2‬تكون اسماء الحقول موحدة‬ ‫والقيم مختلفة‬<br /> <br /> ‫‪ -2‬تكون اسماء الحقول موحدة‬ ‫والقيم ايضا موحدة‬<br /> <br /> ‫‪166‬‬<br /> <br /> 167<br /> <br /> ‫>‪<select‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ <select></select‬وهو وسم القائمة المنسدلة تستطيع اختيار اكثر‬ ‫من اختيار في القائمة وحتى يعمل الوسم س‪ <select‬ويجب كتابة‬ ‫وسميس‪ <option> </option‬بين وسمي س‪ <select‬اي هكذا‬ ‫>‪<select‬‬ ‫>‪</option‬العنصر الول>‪<option‬‬ ‫>‪</option‬العنصر الثاني>‪</option‬‬ ‫>‪</select‬‬ ‫لن وسم س‪ <option‬هو مسئول عن تحديد العناصر في الوسم‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪name‬‬<br /> <br /> ‫‪size‬‬<br /> <br /> ‫هذه الخاص‪TT‬ية لتحدي‪TT‬د اس‪TT‬م حق‪TT‬ل للوس‪TT‬م حي‪TT‬ث‬ ‫تمكنك هذه الخاص‪TT‬ية م‪TT‬ن اس‪TT‬تخدام ه‪TT‬ذا الحق‪TT‬ل‬ ‫في البرمجة بلغات متقدمة مثل ‪PHP‬‬ ‫لتحديد حجم القائمة المنسدلة‬<br /> <br /> ‫‪multiple‬‬<br /> <br /> ‫تسمح لك بالختيار المتعدد عن طريق الضغط‬ ‫باستمرار على زر ‪ Ctrl‬ثم تحديد العناصر‬<br /> <br /> ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬ ‫‪168‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬<br /> <br /> ‫‪class‬‬<br /> <br /> ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪style‬‬<br /> <br /> ‫>‪<option‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ <option></option‬هذا الوسم مسئول عن إضافة العناصر في‬ ‫القائمة المنسدلة وبدونه ليمكن عرض العناصر في القائمة‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪selected‬‬<br /> <br /> ‫وتعني الختيار الفتراضي لول عنصر في القائمة‬ ‫المنسدلة سوف ي‪i‬هر‬<br /> <br /> ‫‪value‬‬ ‫‪id‬‬<br /> <br /> ‫لعطاء قيمية لكل عنصر‬ ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬<br /> <br /> ‫‪169‬‬<br /> <br /> ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬ ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪style‬‬<br /> <br /> ‫>‪<optgroup‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ <optgroup></optgroup‬هذه الوسم ايضا يوضع بين وسمي‬ ‫>‪ <select‬وهو شبيه بالوسم س‪ <option‬ولكن الختلف بينهما وهو‬ ‫أن الوسم س‪ <optgroup‬يقوم بجعل القائمة المنسدلة تحتوع على‬ ‫مجموعات لها س‪ <option‬خاصة عن الخرى‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪label‬‬ ‫‪id‬‬<br /> <br /> ‫تستخدم لعطاء اسم للمجموعة‬ ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬ ‫‪170‬‬<br /> <br /> ‫‪style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫عند الضغط علىها سوف تفتح القائمة المنسدلة كما في الصور التالية‬<br /> <br /> ‫‪171‬‬<br /> <br /> 172<br /> <br /> ‫المثال هذا شبيه بالمثال السابق ولكن الختلف في هذا المثال‬ ‫‪173‬‬<br /> <br /> ‫استخدمنا الخاصية ‪ size‬لتكبير حجم القائمة المنسدلة‬<br /> <br /> ‫في هذا المثال استخدمنا الخاصية ‪ multiple‬والتي تسمح لك باختيار‬ ‫‪174‬‬<br /> <br /> ‫أكثر من خيار واحد بالضغط باستمرار على زر ‪Ctrl‬‬<br /> <br /> ‫‪175‬‬<br /> <br /> ‫ف‪TT‬ي ه‪TT‬ذا المث‪TT‬ال اس‪TT‬تخدمنا الوس‪TT‬م س‪ <optgroup‬م‪TT‬ن اج‪TT‬ل تص‪TT‬نيف‬ ‫القائمة المنسدلة كما في المثال‬<br /> <br /> ‫>‪<textarea‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ <textarea></textarea‬وهو شبيه بالحقل النصي العادي ‪ text‬ال انه‬ ‫يحتوي على خصائص تجعله افضل من ‪ text‬العادي وهو يستخدم‬ ‫لكتابة التعليقات أو الرسائل كما في الفيس بوك أو تويتر‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪name‬‬<br /> <br /> ‫‪id‬‬<br /> <br /> ‫هذه الخاص‪TT‬ية لتحدي‪TT‬د اس‪TT‬م حق‪TT‬ل للوس‪TT‬م حي‪TT‬ث‬ ‫تمكنك هذه الخاص‪TT‬ية م‪TT‬ن اس‪TT‬تخدام ه‪TT‬ذا الحق‪TT‬ل‬ ‫في البرمجة بلغات متقدمة مثل ‪PHP‬‬ ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬ ‫‪176‬‬<br /> <br /> ‫‪style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪cols‬‬<br /> <br /> ‫لتحديد العرض‬<br /> <br /> ‫‪rows‬‬<br /> <br /> ‫لتحدي الرتفاع‬<br /> <br /> ‫‪warp‬‬<br /> <br /> ‫لتحديد طريقة اللتفاف النص في ‪ textarea‬وتأخذ‬ ‫قيمتينم‪:‬‬ ‫‪soft-1‬م‪ :‬وهي الفتراضية اي عند ارسال معلومات‬ ‫في ‪ textarea‬اكثر من سطر تلن يلتف على عدة‬ ‫اسطر(سوف تكون عبارة عن سطر واحد عند‬ ‫المستقبل‬ ‫‪hard-2‬م‪ :‬اي عند ارسال معلومات في ‪textarea‬‬ ‫اكثر من سطر تسيلتف على عدة اسطر(سوف‬ ‫تكون كما هي منسقة في ‪ textarea‬اي اذا كانت‬ ‫ثلث اسطر سوف ترسل الى المستقبل ثلث‬ ‫اسطر وهكذا‬<br /> <br /> ‫‪readonly‬‬<br /> <br /> ‫لجعل ‪ textarea‬للقراءة فقط‬ ‫‪177‬‬<br /> <br /> 178<br /> <br /> ‫وسم ‪fieldset‬‬<br /> <br /> ‫>‪<fieldset‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ <fieldset></fieldset‬يس‪TT‬تخدم ه‪TT‬ذا الوس‪TT‬م ع‪TT‬ادة ل‪TT‬ترتيب العناص‪TT‬ر‬ ‫المشتركة مع بعض عل‪TT‬ى س‪TT‬بيل المث‪TT‬ال معلوم‪TT‬ات ال‪TT‬دخول والعناص‪TT‬ر‬ ‫المشتركة في معلومات الدخول هي اسم المستخدم وكلم‪TT‬ة الم‪TT‬رور‬ ‫ويتم تسمية المجموعة من خلل الوسم س‪<legend‬‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪dir‬‬<br /> <br /> ‫مسئولة عن تحديد اتجاه قراءة النص من اليمين‬ ‫إلى الشمال أو العكس‬<br /> <br /> ‫‪179‬‬<br /> <br /> ‫>‪<legend‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪<legend></legend‬وهو الوسم المسئول عن تسمية المجموعة‬ ‫التي تحتوي على عناصر مشتركة ويتم كتابة الوسم بين وسمي‬ ‫>‪<fieldset‬‬ ‫>‪ </legend‬اسم المجموعة>‪<legend‬‬<br /> <br /> ‫>‪</fieldse‬‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪id‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ ID‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪Class‬‬<br /> <br /> ‫هذه الخاصية تسمح لك باستدعاء ملف ‪CSS‬‬ ‫سواء من نفس الملف أو من ملف خارجي من‬ ‫خلل ‪ Class‬وتنفيذ أوامر ‪ CSS‬للوسم‬<br /> <br /> ‫‪style‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة ‪ CSS‬داخل‬ ‫الوسم نفسه‬<br /> <br /> ‫‪dir‬‬<br /> <br /> ‫مسئولة عن تحديد اتجاه قراءة النص من اليمين‬ ‫إلى الشمال أو العكس‬<br /> <br /> ‫‪180‬‬<br /> <br /> ‫في هذا المثال عرفنا الوسم س‪ <fieldset‬ثم عرفنا الوسم س‪<legend‬‬ ‫بين وسمي س‪ <fieldset‬وذلك من أجل تسمية المجموعة التى فيها‬ ‫عناصر مشتركة وقمنا بتسمية المجموعة ‪Admin Login‬‬ ‫‪181‬‬<br /> <br /> ‫أسئلة الفصل السابع‬ ‫‪ -1‬ما هي فائدة استخدام النماذج ت‪ (forms‬؟‬ ‫‪ -2‬ما هو الوسم س‪ <form‬مع شرح الثلث الخصائص المهمة ؟‬ ‫‪ -3‬ما هو الوسم س‪ <input‬مع شرح خاصية ‪ type‬مع مثال ؟‬ ‫‪ -4‬ما هو الوسم س‪ <select‬مع مثال ؟‬ ‫‪ -5‬ما هو الوسم س‪ <textarea‬مع مثال؟‬ ‫‪ -6‬ما هو الوسم س‪ <fieldset‬و الوسم س‪ <legend‬مع مثال ؟‬<br /> <br /> ‫‪182‬‬<br /> <br /> ‫‪ -8‬ما هي الوسوم المطلوبة لظهار نفس ما يوجد في الصورة فوق؟‬ ‫‪183‬‬<br /> <br /> ‫ملح‪i‬ةم‪ :‬لي‪TT‬س ش‪TT‬رط اض‪TT‬افة الل‪TT‬وان كم‪TT‬ا موج‪TT‬ودة ف‪TT‬ي‬ ‫الصورة في الفورم سوف تتعلم كيفية إضافة اللوان في‬ ‫الفصل التاسع والذي يتكلم عن ‪CSS‬‬<br /> <br /> ‫‪184‬‬<br /> <br /> ‫الفصل الثامن‬ ‫الميتا والرموز ‪meta and symbols‬‬<br /> <br /> ‫>‪<mate‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ <meta‬هو عبار عن وسم ين‪TT‬درج ض‪TT‬من ص‪TT‬فحات ال‪TT‬ويب يكت‪TT‬ب بي‪TT‬ن‬ ‫وسمي س‪ <head><head‬في اعلى الصفحة يستخدم لوص‪TT‬ف الموق‪TT‬ع‬ ‫أو الص‪TT‬فحة م‪TT‬ن حي‪TT‬ث المحت‪TT‬وي والكلم‪TT‬ات الرئيس‪TT‬ية أو المفتاحي‪TT‬ة‬ ‫والمؤل‪TT‬ف وغيره‪TT‬ا م‪TT‬ن الم‪TT‬ور وتفي‪TT‬د ف‪TT‬ي عميل‪TT‬ة التص‪TT‬نيف م‪TT‬ن قب‪TT‬ل‬ ‫محركات البحث وكل هذا يتم من خلل الخصائص التي تتوفر في‬ ‫>‪ <meta‬حيث يمكن ادارج أكثر من وسم س‪ <meta‬لتحديد المور‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪equiv‬‬<br /> <br /> ‫لتحديد خصائص الصفحة ككل وتأخذ القيمة‬ ‫‪ content-type‬وهي تعني تحديد نوع المحتوى‬<br /> <br /> ‫‪name‬‬<br /> <br /> ‫لتحدي‪TT‬د عن‪TT‬وان وح‪TT‬دة البيان‪TT‬ات ال‪TT‬تي نري‪TT‬د تعيي‪TT‬ن‬ ‫قيمها وتأخذ القيمم‪:‬‬ ‫‪keyword -1‬م‪ :‬من أجل تحديد الكلمات المفتاحية‬ ‫‪description -2‬م‪ :‬لوصف الصفحة‬ ‫‪author-3‬م‪ :‬لدارج اسم صاحب الموقع‬ ‫‪copyright-4‬م‪:‬لحفظ الحقوق الملكية‬ ‫‪185‬‬<br /> <br /> ‫‪content‬‬<br /> <br /> ‫لتحديد المحتوى التي نريد اسنادها للخاصتين‬ ‫السابقتين‬<br /> <br /> ‫‪charset‬‬<br /> <br /> ‫تس‪TT‬تخدم لتحدي‪TT‬د ترمي‪TT‬ز الص‪TT‬فحة ال‪TT‬تي س‪TT‬يتم‬ ‫عرض الصفحة كاللغة العربية أو النجليزية و‪.‬ال‪TT‬خ‬ ‫ويفضل استخدام الترميز ‪ UTF-8‬لنه يقب‪TT‬ل اللغ‪TT‬ة‬ ‫العربية والنجليزية ولغات أخرى‬<br /> <br /> ‫‪186‬‬<br /> <br /> 187<br /> <br /> ‫الرموز‬ ‫هناك رموز في ‪ HTML‬تكتب بصغية معينة وليس بصغيتها العادية‬ ‫باستخدام الوسوم مثل رمز أكبر س او أصغر < أو @ ‪...‬الخ هذه كلها‬ ‫رموز تكتب في ‪ HTML‬بصغية معينة كما هو موضح‬<br /> <br /> ‫‪188‬‬<br /> <br /> 189<br /> <br /> 190<br /> <br /> 191<br /> <br /> 192<br /> <br /> 193<br /> <br /> ‫أسئلة الفصل الثامن‬ ‫‪ -1‬ما هو الوسم س‪<meta‬‬ ‫‪ -2‬اشرح الخاصية ‪ name‬في الوسم س‪<meta‬‬ ‫‪ -3‬اشرح الخاصية ‪ charset‬في الوسم س‪<meta‬‬ ‫‪ -4‬اشرح الخاصية ‪ content‬في الوسم س‪<meta‬‬<br /> <br /> ‫‪194‬‬<br /> <br /> ‫الفصل التاسع‬ ‫‪CSS‬‬<br /> <br /> ‫ماهي ‪CSS‬‬ ‫هي اختصار إلى )‪ ( Cascading Style Sheets‬هي "ليست لغه برمجه" ولكنها‬ ‫تقنية تهتم بتحديد شكل وتصميم المواقع ‪ ،‬وينطبق ذلك على اللوان والخطوط‬ ‫والصور والخلفيات التي تستخدم فى الصفحات ‪ ،‬بمرونة وسهولة تامه ‪.‬‬<br /> <br /> ‫ماهي فوائد)‪(CSS‬‬ ‫‪ -1‬فصل محتويات الموقع عن التصميم ‪ ،‬والتحكم بجميع الصفحات من خلل ملف واحد‬ ‫بامتداد م‪(.css‬‬ ‫‪ -2‬إضافة مزيد من الحترافية والسهولة لتصميم المواقع‬ ‫‪ -3‬لن ترهقك بعد اليوم طلبات العملء والتعديلت الكثيرة التى يطلبوها ويروها سهله‬ ‫ولكنك تراها مرهقه مع كثرة العمال‪.‬‬ ‫‪195‬‬<br /> <br /> ‫‪ -4‬تقليل حجم صفحات الموقع‪ ،‬مما يعني أن المستخدم سيقضي وقتا ً أقل لكي تظهر له‬ ‫صفحات الموقع بشكل كامل‪.‬‬<br /> <br /> ‫طرق تعريف ت‪ (CSS‬داخل الصفحات‬ ‫يوجد ثلث طرق لتعريف ‪:CSS‬‬ ‫‪-1‬توجد عدة ط‪TT‬رق لتعري‪TT‬ف خص‪TT‬ائص ‪ CSS‬داخ‪TT‬ل الص‪TT‬فحات والك‪TT‬ثر‬ ‫إستخداماً و هو عمل ملف نصي منفصل وتسميته بإي أسم المهم ان‬ ‫يكون بالمتداد ‪ css‬يحتوى على كافة التنسيقات ويت‪TT‬م ربط‪TT‬ة ب‪TT‬الموقع‬ ‫وتسمي هذه الطريقة‪.( External) :‬‬<br /> <br /> ‫‪196‬‬<br /> <br /> ‫‪-2‬الطريقة الثانية هو ان تطبق خصائص ال‪ CSS T‬مباشرة في أوسمة‬ ‫‪ HTML‬وتسمى هذه الطريقة )‪(in-line‬‬<br /> <br /> ‫‪197‬‬<br /> <br /> ‫‪-3‬الطريقة الخيرة وفيها يت‪TT‬م إض‪TT‬افة جمي‪TT‬ع خص‪TT‬ائص ‪ CSS‬ف‪TT‬ي أعل‪TT‬ى‬ ‫الصفحة بين وسمين لتعريفهم على المتصفح وتسمي هذه الطريقة‬ ‫)‪ (Internal‬ومنه تطبق هذه الوامر على جميع فقرات الصفحة‬<br /> <br /> ‫‪198‬‬<br /> <br /> ‫>‪<link‬‬<br /> <br /> ‫الوسم )‪(Tag‬‬<br /> <br /> ‫>‪ <link‬هذا الوسم يكتب في أعلى الص‪TT‬فحة بي‪TT‬ن وس‪TT‬مي س‪<head‬‬ ‫وظيفته الساسية هي ربط ملفات خارجية مع صفحة ال‪TT‬ويب الخ‪TT‬اص‬ ‫بك مثل ملفات ‪CSS‬‬<br /> <br /> ‫أهم الخصائص ‪Attributes‬‬ ‫‪href‬‬<br /> <br /> ‫لتحديد مسار الملف وطريقة تعريف المسار نفس‬ ‫طريقة تعريف مس‪TT‬ار الص‪TT‬ورة ف‪TT‬ي الوس‪TT‬مس‪<img‬‬ ‫*راجع الوسم س‪ <img‬إذا نسيت‬<br /> <br /> ‫‪rel‬‬<br /> <br /> ‫لتحديد العلقة بين الوثيقة الحاليةت صفحة ال‪TT‬ويب‬ ‫الحالي‪TT‬ة( والمس‪TT‬تند المرتب‪TT‬ط معاه‪TT‬ات مل‪TT‬ف ‪(CSS‬‬ ‫وفي حالة ملفات ‪ CSS‬نكتب م‪:‬‬ ‫”‪rel=”stylesheet‬‬<br /> <br /> ‫‪type‬‬<br /> <br /> ‫لتحديد نوع الوثيقةتملف ‪ (CSS‬وفي حالة ملف‪TT‬ات‬ ‫‪ CSS‬نكتبم‪:‬‬ ‫”‪type=”text/css‬‬<br /> <br /> ‫‪199‬‬<br /> <br /> ‫طريقة تحديد‪CSS‬‬ ‫يمكن تحديد ‪ CSS‬باستخدام الخاصية ت‪ (id‬أو الخاصية ت‪(class‬‬ ‫أو الخاصية ت‪ (style‬وهذه الخصائص موجودة في الوسمة ‪.‬‬ ‫• ملح‪i‬ات عند استخدام الخاصيةت‪ (id‬و ت‪:(class‬‬ ‫‪-1‬عند تعريف الخاص‪TT‬ية ت‪ (id‬ف‪TT‬ي الوس‪TT‬م يج‪TT‬ب أن نق‪TT‬وم بإعط‪TT‬ائه‬ ‫اسم تاي اسم يدل على معنى( حتى تعود اليه في حال نسيته‬ ‫الوظيفة لهذا ت‪ (id‬وكذلك الحال مع الخاصية ت‪(class‬يجب أن نقوم‬ ‫بإعطائه اسم‬ ‫‪ -2‬طريقة استدعاء ت‪ (id‬و ت‪ (class‬للوسم في ح‪TT‬ال اذا ك‪TT‬ان مل‪T‬ف‬ ‫‪ CSS‬في نف‪TT‬س الص‪TT‬فحة ال‪TT‬ويب أو مل‪TT‬ف خ‪TT‬ارجي تك‪T‬ون بالطريق‪TT‬ة‬ ‫التاليةم‪:‬‬ ‫في الخاصية ت‪ (id‬نقوم بتعريف الرمز ت‪ (#‬ثم اسم‬ ‫)‪(id‬‬ ‫في الخاصية ت‪ (class‬نقوم بتعريف الرمز ت‪ (.‬ثم اسم‬ ‫)‪(class‬‬<br /> <br /> ‫‪200‬‬<br /> <br /> ‫في هذا المثال قمنا بتعريف الخاصية ت‪(id‬و اعطين‪TT‬اه اس‪TT‬م ‪ text‬وبع‪TT‬د‬ ‫ذلك عرفنا ملف ‪ CSS‬داخل الصفحة وقمنا بتعريف اس‪TT‬م ت‪ (id‬مس‪TT‬بوق‬ ‫بالرمز ت‪ (#‬داخل ‪ CSS‬واعطيناه اللون الزرق من خلل الخاصية ‪color‬‬<br /> <br /> ‫‪201‬‬<br /> <br /> ‫في ه‪TT‬ذا المث‪TT‬ال قمن‪TT‬ا بتعري‪TT‬ف الخاص‪TT‬ية ت‪(class‬و اعطين‪TT‬اه اس‪TT‬م ‪text‬‬ ‫وبعد ذلك عرفنا ملف ‪ CSS‬داخل الصفحة وقمنا بتعري‪TT‬ف اس‪TT‬م ت‪(class‬‬ ‫مس‪TT‬بوق ب‪TT‬الرمز ت‪ (.‬داخ‪TT‬ل ‪ CSS‬واعطين‪TT‬اه الل‪TT‬ون الزرق م‪TT‬ن خلل‬ ‫‪202‬‬<br /> <br /> ‫الخاصية ‪color‬‬<br /> <br /> ‫خصائص ‪CSS‬‬ ‫جميع خصائص ‪ CSS‬تعمل عل‪TT‬ى جمي‪TT‬ع الوس‪TT‬وم ت‪ (Tags‬ويمك‪TT‬ن‬ ‫تحديد ‪ CSS‬من خلل تعريف الوسم نفسه أو من الخاص‪TT‬ية ‪ id‬أو‬ ‫‪ class‬أو ‪style‬‬<br /> <br /> ‫‪background‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪background-color‬‬<br /> <br /> ‫تسمح لك بإضافة لون لخلفية الصفحة أو لوسم محدد ‪...‬الخ ويمكن‬ ‫تعري‪TT‬ف الل‪T‬ون بطريقت‪T‬ن ت‪T‬م ذكرهم‪TT‬ا ف‪T‬ي الفص‪T‬ل الث‪TT‬اني م‪T‬ن الكت‪TT‬اب‬ ‫يمكنك الرجوع الى الفصل الثاني‬<br /> <br /> ‫‪203‬‬<br /> <br /> ‫قمن‪TT‬ا بتغيي‪TT‬ر ل‪TT‬ون الص‪TT‬فحة م‪TT‬ن خلل الخاص‪TT‬ية ‪Background-color‬‬ ‫للوسم ‪ body‬مباشرة بدون استخدام الخاصية ‪ id‬أو ‪class‬‬ ‫‪204‬‬<br /> <br /> 205<br /> <br /> 206<br /> <br /> ‫قمنا بتغيير الل‪T‬ون للوس‪T‬م س‪ <div‬م‪T‬ن خلل ‪ id‬حي‪T‬ث عرفن‪T‬ا اس‪TT‬م ‪id‬‬ ‫داخ‪TTT‬ل ‪ css‬وعرفن‪TTT‬ا الخاص‪TTT‬ية ‪ background-color‬واعطيناه‪TTT‬ا الل‪TTT‬ون‬ ‫الخضر‬<br /> <br /> ‫‪207‬‬<br /> <br /> ‫قمنا بتغيير اللون للوس‪TT‬م س‪ <div‬م‪T‬ن خلل ‪ class‬حي‪T‬ث عرفن‪TT‬ا اس‪TT‬م‬ ‫‪ class‬داخل ‪ css‬وعرفنا الخاصية ‪ background-color‬واعطيناها الل‪TT‬ون‬ ‫الصفر‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪background-image‬‬<br /> <br /> ‫تسمح لك بإض‪TT‬افة ص‪TT‬ورة ب‪TT‬دل م‪TT‬ن الل‪TT‬ون للص‪TT‬فحة أو لوس‪T‬م مح‪TT‬دد‬ ‫‪...‬الخ ويمكن تعريف مسار الصورة بنف‪TT‬س الطريق‪TT‬ة ال‪TT‬تى يت‪TT‬م تعري‪TT‬ف‬ ‫مسار الصورة في الوسم س‪<img‬‬ ‫*راجع الوسم س‪<img‬‬<br /> <br /> ‫‪208‬‬<br /> <br /> 209<br /> <br /> ‫قمنا بإضافة صورة للص‪TT‬فحة م‪TT‬ن خلل الخاص‪TT‬ية ‪Background-image‬‬ ‫للوسم ‪ body‬حيث عرفنا ‪ url‬ثم مسار الصورة والسم‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪background-repeat‬‬<br /> <br /> ‫تسمح لك ه‪TT‬ذه الخاص‪TT‬ية بتك‪TT‬رار أو ع‪TT‬دم تك‪TT‬رار الص‪TT‬ورة ف‪TT‬ي الص‪TT‬فحة‬ ‫عمودياً و افقياً أو كلهما وتأخذ القيم التاليةم‪:‬‬ ‫تكرار الصورة عمودياً و أفقياً ‪1-repeat:‬‬ ‫عدم تكرار الصورة عمودياً و أفقياً ‪2-no-repeat:‬‬ ‫تكرار الصورة عمودياً فقط ‪3-repeat-x:‬‬ ‫تكرار الصورة أفقياً فقط ‪4-repeat-y:‬‬<br /> <br /> ‫‪210‬‬<br /> <br /> 211<br /> <br /> Background-image ‫ية‬TT‫ن خلل الخاص‬TT‫فحة م‬TT‫قمنا بإضافة صورة للص‬ ‫ا‬TT‫ا قمن‬TT‫م وايض‬TT‫ ثم مسار الصورة والس‬url ‫ حيث عرفنا‬body ‫للوسم‬ background-repeat ‫ن خلل‬TT‫فحة م‬TT‫ي الص‬TT‫ورة ف‬TT‫رار الص‬TT‫ع تك‬TT‫بمن‬ no-repeat ‫وأعطيناه القيمة‬<br /> <br /> background-position<br /> <br /> (CSS)<br /> <br /> :‫تسمح لك هذه الخاصية بتغيير موضع الصورة أو مكانها وتأخذ القيم م‬ 1-left 2-right 3-top 4-bottom 5-center :‫ويمكن أن تأخذ أكثر من قيمة مثلم‬ background-position: left top; background-position: right top; background-position: left bottom; background-position: right bottom; background-position: center top; background-position: center bottom;<br /> <br /> 212<br /> <br /> 213<br /> <br /> ‫ف‪TT‬ي الس‪TT‬طر العاش‪TTT‬ر ح‪TTT‬ددنا موض‪TT‬ع أو مك‪TTT‬ان الص‪TTT‬ورة م‪TTT‬ن خلل الخاص‪TTT‬ية‬ ‫‪ background-position‬وأعطيناها قيمتين ت‪ (left top‬أي مكان الصورة في اعلى‬ ‫جهة اليسار ويمكنك تخصيص قيمة واحدة بدل من القيمتين‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪background‬‬<br /> <br /> ‫هذه الخاصية تسمح لك بكتابة جميع خصائص ‪ backround‬في س‪TT‬طر‬ ‫واحد فقط للختصار أي بدل من أن تكتب م‪:‬‬ ‫;‪background-color:red‬‬ ‫;)”‪background-image:url(“pic/small.png‬‬ ‫;‪background-repeat:no-repeat‬‬ ‫;‪background-position:left top‬‬ ‫في أكثر من سطر يمكنك كتابتهم من خل قيمهم في سطر واحد‬ ‫باستخدام الخاصية ‪background‬‬<br /> <br /> ‫‪214‬‬<br /> <br /> 215<br /> <br /> ‫كما تلحظ في المثال عرفنا جمي‪TT‬ع الخص‪TT‬ائص م‪TT‬ن خلل قيمه‪TT‬م ف‪TT‬ي‬ ‫سطر واحد من خلل الخاصية ‪background‬‬<br /> <br /> ‫‪color‬‬ ‫)‪(CSS‬‬<br /> <br /> ‫‪color‬‬<br /> <br /> ‫تسمح ل‪TT‬ك ه‪TT‬ذه الخاص‪TT‬ية بتخص‪TT‬يص ل‪TT‬ون للنص‪TT‬وص وويمك‪TT‬ن تعري‪TT‬ف‬ ‫اللون بطريقت‪TT‬ن ت‪TT‬م ذكرهم‪TT‬ا ف‪TT‬ي الفص‪TT‬ل الث‪TT‬اني م‪T‬ن الكت‪TT‬اب يمكن‪TT‬ك‬ ‫الرجوع الى الفصل الثاني‬<br /> <br /> ‫‪216‬‬<br /> <br /> 217<br /> <br /> ‫‪Text‬‬ ‫)‪(CSS‬‬<br /> <br /> ‫‪text-align‬‬<br /> <br /> ‫تسمح ل‪TT‬ك ه‪TT‬ذه الخاص‪TT‬يةبمحاذة النص‪TT‬وص م‪TT‬ن اليمي‪TT‬ن أو الوس‪TT‬ط أو‬ ‫الشمال أو جعل السطر متساوية وتأخذ القيم التاليةم‪:‬‬ ‫)يمين(‪1-right‬‬ ‫)وسط(‪2-center‬‬ ‫)شمال(‪3-left‬‬ ‫)السطر متساوية(‪4- justify‬‬<br /> <br /> ‫‪218‬‬<br /> <br /> ‫في السطر رقم ‪ 8‬عرفنا الخاصية ‪ text-align‬والتى تسمح لن‪T‬ا بمح‪TT‬اذة‬ ‫النصوص واعطيناها القيمة ‪ justify‬لجعل السطر متساوية كم‪TT‬ا ف‪TT‬ي‬ ‫المثال‬<br /> <br /> ‫‪219‬‬<br /> <br /> ‫في السطر رقم ‪ 8‬عرفنا الخاصية ‪ text-align‬والتى تسمح لنا بمح‪TT‬اذة‬ ‫النصوص واعطيناها القيمة ‪ center‬لجعل السطر في الوسط كما في‬ ‫المثال‬<br /> <br /> ‫‪220‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪text-decoration‬‬<br /> <br /> ‫تس‪TT‬مح ل‪TT‬ك ه‪TT‬ذه الخاص‪TT‬ية بح‪TT‬ذف الخ‪TT‬ط أس‪TT‬فل الكلم‪TT‬ة وع‪TT‬ادة م‪TT‬ا‬ ‫تس‪TT‬تخدم ه‪TT‬ذه الخاص‪TT‬ية لح‪TT‬ذف الخ‪TT‬ط أس‪TT‬فل الكلم‪TT‬ة ف‪TT‬ي الوس‪TT‬م‬ ‫المسئول عن تعريف الروابط س‪ <a></a‬وتأخذ القيم التاليةم‪:‬‬ ‫)خط أسفل الكلمة(‪1-underline‬‬ ‫)يقوم بحذف الخط أسفل الكلمة(‪2-none‬‬ ‫)خط فوق الكلمة(‪3-overline‬‬ ‫)خط في منتصف الكلمة أو الخط المشطوب(‪4-line-through‬‬ ‫)تجعل الكلمة مثل الوميض أي يختفي وي‪i‬هر(‪5-blink‬‬<br /> <br /> ‫‪221‬‬<br /> <br /> ‫في السطر رقم ‪ 8‬عرفنا الخاص‪TT‬ية ‪ text-decoration‬واعطيناه‪TT‬ا القيم‪TT‬ة‬ ‫‪222‬‬<br /> <br /> ‫‪ none‬اي يقوم بخذف أي خط موجود على الكلمة‬<br /> <br /> ‫في السطر رقم ‪ 6‬قمن‪TT‬ا بتعري‪TT‬ف اس‪TT‬م ‪ id‬الموج‪TT‬ود‬ ‫في الوسم س‪ <p‬ثم عرفنا بجانب اسم ‪ id‬الوس‪TT‬م ‪a‬‬ ‫ومعناها نفذ هذه الخاصية على الوسم الذي يحم‪TT‬ل‬ ‫‪ id‬الذي بداخله الوسم س‪ <a‬فقط أي في حال ك‪TT‬ان‬ ‫هن‪TT‬اك وس‪TT‬م س‪ <a‬داخ‪TT‬ل الوس‪TT‬م س‪ <p‬ف‪TT‬إن ه‪TT‬ذه‬ ‫الخاصية تعم‪TT‬ل أم‪TT‬ا ف‪TT‬ي ح‪TT‬ال إن ك‪TT‬ان الوس‪TT‬م س‪<a‬‬ ‫خارج الوسم س‪ <p‬فإن هذه الخاصية لن تعم‪TT‬ل كم‪TT‬ا‬ ‫سنرى في المثلة القادمة‬<br /> <br /> ‫‪-1‬عند تعريف الوسم في ملف ‪ CSS‬يجب تعريفه من‬ ‫اسمه دون اضافة علمتيس<‬ ‫‪-2‬عن‪TT‬د كتاب‪TT‬ة أي خاص‪TT‬ية ف‪TT‬ي مل‪TT‬ف ‪ CSS‬يج‪TT‬ب أن‬ ‫تنتهي بفاصلة منقوطة ت;(‬<br /> <br /> ‫‪223‬‬<br /> <br /> ‫كما تلحظ في المثال السابق عندما عرفنا الوسم س‪ <a‬داخل الوسم‬ ‫ rel="nofollow">‪ <p‬ف‪TT‬إن الخاص‪TT‬ية ‪ text-decoratin‬عمل‪TT‬ت بينم‪TT‬ا ل‪TT‬م تعم‪TT‬ل عل‪TT‬ى‬ ‫‪224‬‬<br /> <br /> ‫الوسم س‪ <a‬الخر لنها ليست داخل الوسم س‪<p‬‬<br /> <br /> ‫‪225‬‬<br /> <br /> ‫ف‪TT‬ي ه‪TT‬ذا المث‪TT‬ال قمن‪TT‬ا بتعري‪TT‬ف الوس‪TT‬م ت‪(a‬ف‪TT‬ي مل‪TT‬ف ‪ CSS‬وعرفن‪TT‬ا‬ ‫الخاصية ‪ text-decoration‬واعطيناه القيمة ‪ none‬أي حذف الخط أسفل‬ ‫الرابط وهنا تلحظ بأنه الخاصية قد عملت في الح‪TT‬التين دون اس‪TT‬تثناء‬ ‫والسبب في ذلك أننا عرفنا ‪ a‬داخل ملف ‪ CSS‬ومعناها أن تنفذ ه‪TT‬ذه‬ ‫الخاصية على جميع الوسوم في الصفحة سواء كانت داخ‪TT‬ل وس‪TT‬م أو‬ ‫لم تكن في الداخل ولهذا أحيانا قد تض‪TT‬طر لس‪TT‬تخدام ‪ id‬أو ‪ class‬م‪T‬ن‬ ‫أجل تعريف بعض الخصائص على وسوم محدده دون الكل‬ ‫أتمنى قد وصلت الفكرة اليك‬<br /> <br /> ‫‪226‬‬<br /> <br /> ‫في هذا المثال عرفنا الخاصية ‪ text-decoration‬واعطيناها القيمة‬ ‫‪ overline‬ومعناها أننا قمنا بوضع خط أعلى الرابط كما في المثال‬ ‫‪227‬‬<br /> <br /> ‫ف‪TT‬ي ه‪TT‬ذا المث‪TT‬ال عرفن‪TT‬ا الخاص‪TT‬ية ‪ text-decoration‬واعطيناه‪TT‬ا القيم‪TT‬ة‬ ‫‪ line-through‬ومعناها أننا قمنا بوض‪TT‬ع خ‪T‬ط ف‪TT‬ي منتص‪TT‬ف الراب‪TT‬ط كم‪TT‬ا‬ ‫في المثال‬<br /> <br /> ‫‪228‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪text-transform‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحويل الكلمات إل‪TT‬ى أح‪TT‬رف ص‪TT‬غيرة أو ك‪TT‬بيرة أو‬ ‫جعل الحرف الول كبير من كل كلمة وتأخذ القيم التاليةم‪:‬‬ ‫)جعل الكلمة احرفها صغيرة(‪1-lowercase‬‬ ‫)جعل الكلمة احرفها كبيرة(‪2-uppercase‬‬ ‫)جعل أول حرف كبير(‪3-capitalize‬‬<br /> <br /> ‫ف‪TT‬ي ه‪TT‬ذا المث‪TT‬ال عرفن‪TT‬ا الخاص‪TT‬ية ‪ text-transform‬واعطيناه‪TT‬ا القيم‪TT‬ة‬ ‫‪229‬‬<br /> <br /> ‫‪ lowercase‬ومعناها جعل الكلمة جميع احرفها صغيرة كما في المثال‬<br /> <br /> ‫ف‪TT‬ي ه‪TT‬ذا المث‪TT‬ال عرفن‪TT‬ا الخاص‪TT‬ية ‪ text-transform‬واعطيناه‪TT‬ا القيم‪TT‬ة‬ ‫‪ uppercase‬ومعناها جعل الكلمة جميع احرفها كبيرة كما في المثال‬ ‫‪230‬‬<br /> <br /> ‫ف‪TT‬ي ه‪TT‬ذا المث‪TT‬ال عرفن‪TT‬ا الخاص‪TT‬ية ‪ text-transform‬واعطيناه‪TT‬ا القيم‪TT‬ة‬ ‫‪ capitalize‬ومعناها جعل أول حرف من الكلمة كبير كما في المثال‬ ‫‪231‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪text-indent‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد المسافة البادئة من أول سطر من النص‬<br /> <br /> ‫‪232‬‬<br /> <br /> ‫في هذا المثال عرفنا الخاصية ‪ text-indent‬واعطيناه‪TT‬ا القيم‪TT‬ة ‪150px‬‬ ‫من اجل تحديد المسافة البادئة للنص‬<br /> <br /> ‫‪Font‬‬ ‫)‪(CSS‬‬<br /> <br /> ‫‪font-family‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد نوع الخط للنص ويمكن تحدي‪TT‬د أك‪TT‬ثر م‪TT‬ن‬ ‫نوع خط في نفس الوقت مفصولة بفاصلة بين كل خط‬<br /> <br /> ‫‪233‬‬<br /> <br /> ‫في السطر رقم ‪ 8‬عرفنا الخاصية ‪ font-family‬وحددنا أكثر من خط‬ ‫كما في المثال‬ ‫‪234‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪font-size‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد حجم الخط للنصوص ويمكن تحديد حجم‬ ‫الخط إما ب ‪ pixels‬أو ‪ em‬ولحساب حج‪T‬م الخ‪T‬ط م‪T‬ن ‪ pixels‬ال‪T‬ى ‪em‬‬ ‫نستخدم المعادلة التاليةم‪:‬‬ ‫‪pixels/16=em‬‬ ‫ولحساب حجم الخط من ‪ em‬الى ‪ pixels‬نستخدم المعادلة التاليةم‪:‬‬ ‫‪em*16=pixels‬‬<br /> <br /> ‫‪235‬‬<br /> <br /> ‫في السطر رقم ‪ 9‬عرفنا الخاصية ‪ font-size‬مع القيمة ‪ 40‬بيكسل‬ ‫‪236‬‬<br /> <br /> ‫في السطر رقم ‪ 9‬عرفنا الخاصية ‪ font-size‬مع القيمة ‪40em‬‬<br /> <br /> ‫‪237‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪font-style‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد الستايل للنص وتأخذ القيم التاليةم‪:‬‬ ‫)الخط المائل(‪1- italic‬‬ ‫)الخط العاديلالفتراضي(‪2-normal‬‬ ‫)الخط المائل(‪3-oblique‬‬<br /> <br /> ‫‪238‬‬<br /> <br /> ‫‪links‬‬ ‫)‪(CSS‬‬<br /> <br /> ‫‪a:link‬‬<br /> <br /> ‫تسمح هذة الخاصية باعطاء خصائص للروابط في حال اذا كان الراب‪TT‬ط‬ ‫لم يضغط عليهتأي لم يتم زيارة الرابط( مث‪TT‬ل تغيي‪TT‬ر ل‪TT‬ون الراب‪TT‬ط وتغيي‪TT‬ر‬ ‫حجم الخط ‪...‬الخ‬<br /> <br /> ‫‪239‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪a:visited‬‬<br /> <br /> ‫تسمح هذة الخاصية باعطاء خصائص للروابط في حال اذا كان الراب‪TT‬ط‬ ‫ت‪TT‬م الض‪TT‬غط علي‪TT‬هتاي ت‪TT‬م زي‪TT‬ارة الراب‪TT‬ط أي بع‪TT‬د الض‪TT‬غط علي‪TT‬ه تنف‪TT‬ذ‬ ‫الخصائص( مثل تغيير لون الرابط وتغيير حجم الخط ‪...‬الخ‬<br /> <br /> ‫‪240‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪a:hover‬‬<br /> <br /> ‫تس‪TT‬مح ه‪TT‬ذة الخاص‪TT‬ية باعط‪TT‬اء خص‪TT‬ائص للرواب‪TT‬ط ويت‪TT‬م تنفي‪TT‬ذ ه‪TT‬ذه‬ ‫الخصائص في حال تم المرور على الرابط بمؤش‪TT‬رة الف‪TT‬أرة مث‪TT‬ل تغيي‪TT‬ر‬ ‫لون الرابط وتغيير حجم الخط ‪...‬الخ‬<br /> <br /> ‫في حال تم المرور على الرابط سوف تتغيير خصائص الرابط‬ ‫‪241‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪a:active‬‬<br /> <br /> ‫تسمح هذة الخاصية باعطاء خصائص للروابط في حال اذا كان الراب‪TT‬ط‬ ‫تم الضغط عليهتاي تم في حالة الضغط تنفذ الخصائص عندما يض‪TT‬غط‬ ‫على الرابط مباشرة وليس بعد زي‪TT‬ارة الراب‪TT‬ط ( مث‪TT‬ل تغيي‪TT‬ر ل‪TT‬ون الراب‪TT‬ط‬ ‫وتغيير حجم الخط ‪...‬الخ‬<br /> <br /> ‫‪242‬‬<br /> <br /> ‫‪list‬‬ ‫تستخدم خصائص ‪ list‬في ‪ CSS‬لتغيير الرموز في القائمة الغير‬ ‫متسلسة والقائمة المتسلسة‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪List-style-type‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحدي‪TT‬د ش‪TT‬كل الرم‪TT‬ز ف‪TT‬ي القائم‪TT‬ة س‪TT‬واء ك‪TT‬انت‬ ‫القائمة متسلسة أو غير متسلسة وتأخذ القيم التاليةم‪:‬‬ ‫)لجعل القائمة رموزها على شكل مربع( ‪1-square‬‬ ‫)لجعل القائمة رموزها على شكل دوائر( ‪2-circle‬‬ ‫)لجعل القائمة رموزها على شكل ارقام العربية( ‪3-decimal‬‬ ‫‪4-decimal-leading-zero‬‬ ‫لجعل القائمة رموزها على ش‪TT‬كل ارق‪TT‬ام العربي‪TT‬ة مض‪TT‬افة اليه‪TT‬ا الرق‪TT‬م(‬ ‫)صفر على جهة الشمال‬ ‫)لجعل القائمة رموزها على شكل الحرف الرمنية( ‪5-armenian‬‬ ‫لجعل القائمة رموزها على شكل الح‪TT‬رف النجليزي‪TT‬ة( ‪6-lower-alpha‬‬ ‫)الصغيرة‬ ‫لجعل القائمة رموزها على شكل الح‪TT‬رف النجليزي‪TT‬ة( ‪7-upper-alpha‬‬ ‫)الكبيرة‬ ‫لجعل القائمة رموزها على شكل الح‪TT‬رف الروماني‪TT‬ة( ‪8-lower-roman‬‬ ‫)الصغيرة‬ ‫لجعل القائمة رموزها على شكل الح‪TT‬رف الروماني‪TT‬ة( ‪9-upper-roman‬‬ ‫‪243‬‬<br /> <br /> ‫)الكبيرة‬ ‫) لجعل القائمة بدون رموز أو أرقام(‪1-none‬‬<br /> <br /> ‫‪244‬‬<br /> <br /> 245<br /> <br /> 246<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪List-style-imge‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد صورة تعبرر كرمز للقائمة بدل م‪TT‬ن الرم‪TT‬وز‬ ‫الموجودة في الخاصية ‪list-style-type‬‬<br /> <br /> ‫‪247‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪List-style-position‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد الرموز اذا كانت دخ‪TT‬ل المحت‪TT‬وى أو خ‪TT‬ارج‬ ‫المحتوى وتأخذ القيم التاليةم‪:‬‬ ‫)جعل الرموز داخل المحتوى(‪1-inside‬‬ ‫)جعل الرموز خارج المحتوى(‪2-outside‬‬<br /> <br /> ‫‪248‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪List-style‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد جميع الخصائص التي ت‪TT‬م ذكره‪TT‬ا س‪TT‬ابقا‬ ‫في سطر واحد وتكتب بالطريقة التاليةم‪:‬‬ ‫; ‪list-style: list-type list-position list-image‬‬<br /> <br /> ‫‪249‬‬<br /> <br /> ‫‪border‬‬ ‫)‪(CSS‬‬<br /> <br /> ‫‪border‬‬<br /> <br /> ‫تس‪TT‬مح ه‪TT‬ذة الخاص‪TT‬ية بتحدي‪TT‬د اط‪TT‬ار ف‪TT‬ي الج‪TT‬دول أو ح‪TT‬تى يمكن‪TT‬ك‬ ‫اس‪TT‬تخدام الخاص‪TT‬ية ‪ border‬م‪TT‬ع وس‪TT‬م س‪ <div‬ف‪TT‬ي ح‪TT‬ال تقس‪TT‬يم‬ ‫الصفحة أو أوسمة أخرى تتطلب عملك وتأخذ القيم التاليةم‪:‬‬ ‫)تحديد سمك الطار(‪1-width‬‬ ‫)نوع الطار(‪2-style‬‬ ‫)لون الطار(‪3-color‬‬ ‫‪border: width style color‬‬<br /> <br /> ‫‪250‬‬<br /> <br /> 251<br /> <br /> (CSS)<br /> <br /> border-style<br /> <br /> :‫ وتأخذ القيم التاليةم‬border ‫تسمح هذة الخاصية بتحديد ستايل لل‬ 1-dotted 2-dashed 3-solid 4-double 5-groove 6-ridge 7-inset 8-outset 9-none<br /> <br /> 252<br /> <br /> 253<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪border-width‬‬<br /> <br /> ‫س‪ T‬مك للط‪TT‬ار ف‪TT‬ي الج‪TT‬دول أو ح‪TT‬تى‬ ‫تس‪TT‬مح ه‪TT‬ذة الخاص‪TT‬ية بتحدي‪TT‬د م‬ ‫يمكنك استخدام الخاصية ‪ border-width‬مع وس‪TT‬م س‪ <div‬ف‪TT‬ي ح‪TT‬ال‬ ‫تقسيم الصفحة أو أوسمة أخرى تتطلب عملك‬<br /> <br /> ‫‪254‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪border-color‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد لون للطار في الج‪TT‬دول أو ح‪TT‬تى يمكن‪TT‬ك‬ ‫استخدام الخاصية ‪ border-color‬مع وس‪TT‬م س‪ <div‬ف‪TT‬ي ح‪TT‬ال تقس‪TT‬يم‬ ‫الصفحة أو أوسمة أخرى تتطلب عملك‬<br /> <br /> ‫‪255‬‬<br /> <br /> ‫التحكم في ‪Border‬‬<br /> <br /> ‫هناك خصائص لل ‪ border‬من خللها تمكرنك بالتحكم في جميع ج‪TT‬وانب‬ ‫ال ‪ border‬سواء من العلى أو من اليمين أو الشمال أو في السفل‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Border-top-style‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد الستايل م‪TT‬ن الج‪TT‬انب العل‪TT‬ى فق‪TT‬ط م‪TT‬ن‬ ‫الطار‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Border-right-style‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد الس‪TT‬تايل م‪T‬ن الج‪TT‬انب اليمي‪T‬ن فق‪T‬ط م‪T‬ن‬ ‫الطار‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Border-left-style‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد الستايل من الجانب الش‪TT‬مال فق‪TT‬ط م‪TT‬ن‬ ‫الطار‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Border-bottom-style‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد الستايل م‪T‬ن الج‪TT‬انب الس‪T‬فل فق‪T‬ط م‪T‬ن‬ ‫الطار‬ ‫‪256‬‬<br /> <br /> 257<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Border-top-width‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد حجم ‪ border‬من الجانب العلى فقط‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Border-right-width‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد حجم ‪ border‬من الجانب اليمين فقط‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Border-left-width‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد حجم ‪ border‬من الجانب الشمال فقط‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Border-bottom-width‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد حجم ‪ border‬من الجانب السفل فقط‬<br /> <br /> ‫‪258‬‬<br /> <br /> 259<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Border-top-color‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد لون ‪ border‬من الجانب العلى فقط‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Border-right-color‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد لون ‪ border‬من الجانب اليمين فقط‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Border-left-color‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد لون ‪ border‬من الجانب الشمال فقط‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Border-bottom-color‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد لون ‪ border‬من الجانب السفل فقط‬<br /> <br /> ‫‪260‬‬<br /> <br /> 261<br /> <br /> ‫‪table‬‬ ‫)‪(CSS‬‬<br /> <br /> ‫‪border-Collapse‬‬<br /> <br /> ‫تسمح هذة الخاص‪TT‬ية بجع‪TT‬ل ح‪TT‬دود الط‪TT‬ار أو ‪ border‬ف‪TT‬ردي ب‪TT‬دل م‪TT‬ن‬ ‫المزدوج‬<br /> <br /> ‫‪262‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪width‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحدي‪TT‬د حج‪TT‬م للج‪TT‬دول أو ‪ border‬ويمك‪TT‬ن تحدي‪TT‬د‬ ‫الحجم إما بالبيكسل أو بالنسبة المئوية‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪height‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد ارتف‪TT‬اع للج‪TT‬دول أو ‪ border‬ويمك‪TT‬ن تحدي‪TT‬د‬ ‫الرتفاع إما بالبيكسل أو بالنسبة المئوية‬<br /> <br /> ‫يمك‪TTT‬ن اس‪TTT‬تخدام الخص‪TTT‬ائص ‪ width‬و ‪ height‬و ‪ border‬م‪TTT‬ع‬ ‫أوسمة أخرى مثل الوسم س‪<div‬‬<br /> <br /> ‫‪263‬‬<br /> <br /> 264<br /> <br /> 265<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪Vertical-align‬‬<br /> <br /> ‫تسمح هذة الخاصية بتحديد المحاذاة للن‪TT‬ص س‪TT‬واء م‪TT‬ن المنتص‪TT‬ف أو‬ ‫العلى أو في السفل وتأخذ القيمم‪:‬‬ ‫)محاذاة من العلى(‪1-top‬‬ ‫)محاذاة من السفل(‪1-bottom‬‬ ‫)محاذاة من المنتصف(‪1-middle‬‬<br /> <br /> ‫‪266‬‬<br /> <br /> 267<br /> <br /> ‫‪outline‬‬ ‫)‪(CSS‬‬<br /> <br /> ‫‪outline‬‬<br /> <br /> ‫هذه الخاصية تسمى بالحدود الخارجية وهي عبارة عن خ‪TT‬ط مرس‪TT‬وم‬ ‫حول العناصر أو الوس‪TT‬وم لجع‪TT‬ل العناص‪TT‬ر أك‪TT‬ثر س‪TT‬هولة لرؤيته‪TT‬ا وتك‪TT‬ون‬ ‫بالعادة خارج ال ‪ border‬وهو شبيه ل‪TT‬ل ‪ border‬ويأخ‪TT‬ذ نف‪TT‬س القي‪TT‬م ل‪TT‬ه‬ ‫وتأخذ القيم التالية‬ ‫)السمك الخارجي للحدود الخارجية(‪1-width‬‬ ‫م‬ ‫)شكل الستايل للحدود الخارجية(‪2-style‬‬ ‫)تحديد اللون للحدود الخارجية(‪3-color‬‬ ‫ويمكن تعريفه بالطريقة التالية‬ ‫‪outline: width style color‬‬<br /> <br /> ‫‪268‬‬<br /> <br /> 269<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪outline-width‬‬<br /> <br /> ‫مك للحدود الخارجي‬ ‫تسمح هذه الخاصية بتحديد حجم الس ٌ‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪outline-style‬‬<br /> <br /> ‫تسمح هذه الخاصية بتحديد شكل الستايل للحدود الخ‪TT‬ارجي وه‪TT‬ي‬ ‫شبيه بالخاصية ‪border‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪outline-color‬‬<br /> <br /> ‫تسمح هذه الخاصية بتحديد لون للحدود الخارجية‬<br /> <br /> ‫‪270‬‬<br /> <br /> 271<br /> <br /> ‫‪margin‬‬ ‫)‪(CSS‬‬<br /> <br /> ‫‪margin‬‬<br /> <br /> ‫وتس‪TT‬مى اله‪TT‬وامش الخارجي‪TT‬ة وه‪TT‬ذه الخاص‪TT‬ية تق‪TT‬وم بعملي‪TT‬ة تحدي‪TT‬د‬ ‫المساحة حول العناصر تخ‪TT‬ارج الح‪TT‬دود ( ويمك‪TT‬ن تغيي‪TT‬ر اله‪TT‬وامش م‪TT‬ن‬ ‫العلى أو اليمين أو السفل أو اليسار ويمكن تحديد القي‪TT‬م لله‪TT‬وامش‬ ‫إما بالبيكسل أو بالنسبة المئويةت‪(%‬‬<br /> <br /> ‫‪272‬‬<br /> <br /> ‫في هذا المثال في السطر رقم ‪ 14‬قمنا بتحديد الهامش من جميع‬ ‫التجهات من خلل قيمة واحدة وهي ‪50px‬‬ ‫‪273‬‬<br /> <br /> ‫في هذا المثال في السطر رقم ‪ 14‬قمنا بتحديد الهامش من جميع‬ ‫التجهات من خلل اربعة قيم حيث تمثلم‪:‬‬ ‫‪-1‬القيمة الولى الهامش من العلى وهي ‪10px‬‬ ‫‪-2‬القيمة الثانية الهامش من اليمين وهي ‪30px‬‬ ‫‪-3‬القيمة الثالثة الهامش من السفل وهي ‪40px‬‬ ‫‪274‬‬<br /> <br /> ‫‪-4‬القيمة الرابعة الهامش من اليسار وهي ‪30px‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪margin-top‬‬<br /> <br /> ‫ه‪TT‬ذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن العل‪TT‬ى للعنص‪TTT‬رتخارج‬ ‫الحدود(‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪margin-right‬‬<br /> <br /> ‫ه‪TT‬ذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن اليمي‪TT‬ن للعنص‪TTT‬رتخارج‬ ‫الحدود(‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪margin-bottom‬‬<br /> <br /> ‫ه‪T‬ذه الخاص‪TT‬ية تس‪T‬مح بتحدي‪TT‬د اله‪T‬امش م‪T‬ن الس‪T‬فل للعنص‪TT‬رتخارج‬ ‫الحدود(‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪margin-left‬‬<br /> <br /> ‫ه‪TT‬ذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن اليس‪TT‬ار للعنص‪TTT‬رتخارج‬ ‫الحدود(‬<br /> <br /> ‫‪275‬‬<br /> <br /> 276<br /> <br /> ‫‪padding‬‬ ‫)‪(CSS‬‬<br /> <br /> ‫‪padding‬‬<br /> <br /> ‫وتس‪TT‬مى اله‪TT‬وامش الداخلي‪TT‬ة وه‪TT‬ذه الخاص‪TT‬ية تق‪TT‬وم بعملي‪TT‬ة تحدي‪TT‬د‬ ‫المساحة حول العناصر تداخ‪TT‬ل الح‪TT‬دود ( ويمك‪T‬ن تغيي‪TT‬ر اله‪TT‬وامش م‪T‬ن‬ ‫العلى أو اليمين أو السفل أو اليسار ويمكن تحديد القي‪TT‬م لله‪TT‬وامش‬ ‫إما بالبيكسل أو بالنسبة المئويةت‪(%‬‬<br /> <br /> ‫‪277‬‬<br /> <br /> 278<br /> <br /> ‫في هذا المثال في السطر رقم ‪ 14‬قمنا بتحديد الهامش الداخلي‬ ‫من جميع التجهات من خلل قيمة واحدة وهي ‪50px‬‬<br /> <br /> ‫في هذا المثال في السطر رقم ‪ 14‬قمنا بتحديد الهامش الداخلي‬ ‫من جميع التجهات من خلل اريعة قيم حيث تمثلم‪:‬‬ ‫‪-1‬القيمة الولى الهامش من العلى وهي ‪10px‬‬ ‫‪279‬‬<br /> <br /> ‫‪-2‬القيمة الثانية الهامش من اليمين وهي ‪20px‬‬ ‫‪-3‬القيمة الثالثة الهامش من السفل وهي ‪30px‬‬ ‫‪-4‬القيمة الرابعة الهامش من اليسار وهي ‪40px‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪padding-top‬‬<br /> <br /> ‫ه‪TT‬ذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن العل‪TT‬ى للعنص‪TTT‬رتداخل‬ ‫الحدود(‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪padding-right‬‬<br /> <br /> ‫ه‪TT‬ذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن اليمي‪TT‬ن للعنص‪TTT‬رتداخل‬ ‫الحدود(‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪padding-bottom‬‬<br /> <br /> ‫هذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن الس‪TT‬فل للعنص‪TTT‬رتداخل‬ ‫الحدود(‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪padding-left‬‬<br /> <br /> ‫ه‪TT‬ذه الخاص‪TT‬ية تس‪TT‬مح بتحدي‪TT‬د اله‪TT‬امش م‪TT‬ن اليس‪TT‬ار للعنص‪TTT‬رتداخل‬ ‫الحدود(‬<br /> <br /> ‫‪280‬‬<br /> <br /> 281<br /> <br /> ‫‪display & visibility‬‬ ‫)‪(CSS‬‬<br /> <br /> ‫‪display‬‬<br /> <br /> ‫هذه الخاصية تستخدم لخفاء العناصر في الويب مع اخف‪T‬اء المس‪TT‬احة‬ ‫أو اظهارها بطريقة معينة وتأخذ القيم التاليةم‪:‬‬ ‫)لخفاء العنصر مع المساحة المحجوزة للعنصر في الصفحة( ‪1-none‬‬ ‫)لجعل العناصر ت‪i‬هر في سطر واحد(‪2-inline‬‬ ‫)لجعل العناصر ت‪i‬هر كبلوك أو كتل(‪3-block‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪visibility‬‬<br /> <br /> ‫هذه الخاصية تستخدم لخفاء العناصر في الويب م‪TT‬ع ابق‪TT‬اء المس‪TT‬احة‬ ‫محجوزة للعنصر وتأخذ القيم التاليةم‪:‬‬ ‫)لخفاء العنصر مع بقاء المساحة للعنصر محجوزة(‪1-hidden‬‬ ‫)لظهار العنصر(‪2-visible‬‬ ‫‪282‬‬<br /> <br /> 283<br /> <br /> 284<br /> <br /> 285<br /> <br /> 286<br /> <br /> ‫‪position‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪position‬‬<br /> <br /> ‫هذه الخاصية تستخدم لترتيب العناصر مع بعضها وهن‪TT‬اك اريع‪TT‬ة أن‪TT‬واع‬ ‫للترتيب م‪:‬‬ ‫)جعل العنصر ثابت في الصفحة(‪1-fixed‬‬ ‫)ترتيب العنصر بشكل طبيعي في الصفحة(‪2-relative‬‬ ‫يكون ترتيب العناصر بشكل جامد ويت‪TT‬م تش‪TT‬كيل ه‪TT‬ذا ال‪TT‬ترتيب(‪3-static‬‬ ‫)من خلل شكل الصفحة‬ ‫يكون متص‪TT‬ل م‪TT‬ع العناص‪TT‬ر الرئيس‪TT‬ية ال‪TT‬تي ب‪TT‬دورها ليس‪TT‬ت(‪4-absolute‬‬ ‫)مرتبة بشكل جامد‬ ‫وتعمل هذه الخاصية مع الخصائص التاليةم‪:‬‬ ‫‪-1‬الخاصية ‪ right‬تترتيب العنصر أو العناصر من جهة اليمين(‬ ‫‪-2‬الخاصية ‪ left‬تترتيب العنصر أو العناصر من جهة اليسار(‬ ‫‪-3‬الخاصية ‪ top‬تترتيب العنصر أو العناصر من جهة العلى(‬ ‫‪-4‬الخاصية ‪ bottom‬تترتيب العنصر أو العناصر من جهة السفل(‬<br /> <br /> ‫‪287‬‬<br /> <br /> ‫إن المحتوى في حالة الخاصية ‪ position‬مع القيمة ‪ relative‬يمكن أن‬ ‫ينتقل أو يتداخل مع العناصر الخرى ولكن المساحة المتبقي‪TT‬ة للعنص‪TT‬ر‬ ‫ماتزال محفوظة في الشكل الطبيعي‬ ‫‪288‬‬<br /> <br /> ‫عند استخدام الخاصية ‪ position‬م‪TT‬ع القيم‪TT‬ة ‪ fixed‬ل‪TT‬ن يتح‪TT‬رك العنص‪TT‬ر‬ ‫حتى لو ‪ scroll‬المتصفح تحرك سيبقى العنصر ثابت‬ ‫‪289‬‬<br /> <br /> ‫يتم ترتيب العناصر في الخاصية ‪ position‬م‪TT‬ع القيم‪TT‬ة ‪ absolute‬بش‪TT‬كل‬ ‫مطلق في الصفحة‬ ‫‪290‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪z-index‬‬<br /> <br /> ‫هذه الخاصية تستخدم لترتيب العناصر المتراكم‪TT‬ة بحي‪TT‬ث يمك‪TT‬ن ض‪TT‬بط‬ ‫العنص‪TT‬ر ف‪TT‬ي المقدم‪TT‬ة أو خل‪TT‬ف العناص‪TT‬ر الخ‪TT‬رى وتأخ‪TT‬ذ القيم‪TT‬ة إم‪TT‬ا‬ ‫بالموجب أو السالب‬<br /> <br /> ‫‪291‬‬<br /> <br /> ‫‪Float & clear‬‬ ‫)‪(CSS‬‬<br /> <br /> ‫‪float‬‬<br /> <br /> ‫هذه الخاصية تمكنك من طفو العناصر لليمين أو اليسار كما تسمح‬ ‫للعناصر الخرى باللتفاف حولهم وتستخدم خاصية الطفو بشكل عام‬ ‫مع الصور ولكن تستخدم أيضاً بشكل مثالي مع هيكل تصميم الموقع‪,‬‬ ‫تطفو العناصر بشكل افقي فقط أي يمكن للعناصر أن تطفو باتجاه‬ ‫اليمين ‪ right‬أو اليسار ‪ left‬ولكن ليس للعلى أو للسفل‬<br /> <br /> ‫‪292‬‬<br /> <br /> ‫ستلتف العناصر الخرى عند طفو العناصر الخرى لليمين أو اليسار‬<br /> <br /> ‫‪293‬‬<br /> <br /> ‫يمكن أن تطفو العناصر بجانب بعضهم اذا كان هناك مساحة فارغة‬<br /> <br /> ‫‪294‬‬<br /> <br /> ‫)‪(CSS‬‬<br /> <br /> ‫‪clear‬‬<br /> <br /> ‫تستخدم هذه الخاصية بعد طفو العناصر حيث إذا ك‪TT‬انت هن‪TT‬اك عناص‪TT‬ر‬ ‫أخرى سيتم طفو هذه العناصر حولهم ولتجنب ذل‪TT‬ك يمك‪TT‬ن اس‪TT‬تخدام‬ ‫خاصية المسح ‪clear‬‬<br /> <br /> ‫‪295‬‬<br /> <br /> ‫كما تلحظ في المثال تم طفو عناصر أخري حولهم ولتجنب ذلك‬ ‫سوف نأخذ نفس المثال ونضيف عليه خاصية ‪clear‬‬<br /> <br /> ‫‪296‬‬<br /> <br /> 297<br /> <br /> ‫أسئلة الفصل التاسع‬ ‫‪ -1‬ماهي ‪ CSS‬وماهي فوائدها؟‬ ‫‪ -2‬ماهي استخدمات الخاصية ‪background‬؟‬ ‫‪ -3‬ماهي استخدمات الخاصية ‪text‬؟‬ ‫‪ -4‬ماهي استخدمات الخاصية ‪margin‬؟‬ ‫‪ -5‬ماهي استخدمات الخاصية ‪padding‬؟‬ ‫‪ -6‬ماهي استخدمات الخاصية ‪position‬؟‬ ‫‪ -7‬ماهي استخدمات الخاصية ‪float‬؟‬ ‫‪ -8‬ماهي استخدمات الخاصية ‪font‬؟‬ ‫‪ -9‬ماهي استخدمات الخاصية ‪display‬؟‬ ‫‪ -10‬ماهي استخدمات الخاصية ‪z-index‬؟‬ ‫‪ -11‬ماهي استخدمات الخاصية ‪clear‬؟‬<br /> <br /> ‫‪298‬‬<br /> <br /> ‫‪ -12‬قم ببناء هذا المشروع باستخدام ‪ HTML‬و ‪CSS‬؟‬ ‫‪299‬‬<br /> <br /> ‫تم بحمدل النتهاء من الكتاب‬ ‫أخي القارئم‪:‬‬ ‫**إن وجدت في هذا الكتاب منفعة فل تنسى الدعاء لي في أي وقت‬ ‫**ثمن هذا الكتاب هو مجاناً للجميع‬ ‫**سوف يكون هناك الج‪TT‬زء الث‪TT‬اني م‪T‬ن الكت‪TT‬اب بإس‪TT‬م مملك‪TT‬ة تص‪TT‬ميم‬ ‫المواقع الجزء الثاني والذي يتكلم عن ‪ HTML5‬و ‪ CSS3‬قريب‪TT‬اً إن ش‪TT‬اء‬ ‫ا‬ ‫لمتابعة كل ما هو جديد‬ ‫‪mohammad awwad‬‬ ‫‪https://jo.linkedin.com/in/mohammadawwad‬‬<br /> <br /> ‫**المراجع‪:‬‬ ‫تم الستعانة ببعض المراجع والغرض منه‪TT‬ا ه‪TT‬و لتس‪TT‬هيل الم‪TT‬ادة عل‪TT‬ى‬ ‫القارئ م‪:‬‬ ‫‪/http://www.w3schools.com-1‬‬ ‫‪/http://www.w3arabiconline.com-2‬‬ ‫‪/http://www.khayma.com-3‬‬ ‫‪-4‬منتديات شبوة نت‬ ‫وصلى ا وسلم وبارك على محمد وعلى أله الطيبين وصحبه أجمعين‬ ‫‪300‬‬ </div> </div> <hr /> <h4>Related Documents</h4> <div class="row"> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdf-1d3qg6q5p7og" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/1d3qg6q5p7og.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdf-1d3qg6q5p7og" class="text-dark">Pdf</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> June 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 43</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdf-r6zw14wk4q30" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/r6zw14wk4q30.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdf-r6zw14wk4q30" class="text-dark">Pdf</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> July 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 31</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdf-wqzmrv76n630" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/wqzmrv76n630.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdf-wqzmrv76n630" class="text-dark">Pdf</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> July 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 33</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdf-68o2nypxw9op" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/68o2nypxw9op.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdf-68o2nypxw9op" class="text-dark">Pdf</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> May 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 55</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdf-63edd2ndm4o0" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/63edd2ndm4o0.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdf-63edd2ndm4o0" class="text-dark">_________.pdf</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> October 2019</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 74</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdf-1d3q4nqeg5og" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/1d3q4nqeg5og.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdf-1d3q4nqeg5og" class="text-dark">Pdf</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> May 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 61</small> <div class="clearfix"></div> </div> </div> </div> </div> <hr/> <h4>More Documents from "Gabriela Coutinho"</h4> <div class="row"> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdfcoke-8o2nnx6we0op" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/8o2nnx6we0op.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdfcoke-8o2nnx6we0op" class="text-dark"></a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> November 2019</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 16</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdfcoke-63eddmygm4o0" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/63eddmygm4o0.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdfcoke-63eddmygm4o0" class="text-dark"></a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> April 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 10</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdfcoke-v3r778gddyze" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/v3r778gddyze.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdfcoke-v3r778gddyze" class="text-dark"></a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> April 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 14</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdfcoke-lo677k158836" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/lo677k158836.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdfcoke-lo677k158836" class="text-dark"></a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> November 2019</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 38</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdfcoke-6zw11qg0n730" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/6zw11qg0n730.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdfcoke-6zw11qg0n730" class="text-dark"></a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> December 2019</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 8</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdfcoke-9o888l1yn8or" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/9o888l1yn8or.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdfcoke-9o888l1yn8or" class="text-dark"></a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> November 2019</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 13</small> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div> </div> </div> <footer class="footer pt-5 pb-0 pb-md-5 bg-primary text-white"> <div class="container"> <div class="row"> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Our Company</h5> <ul class="list-unstyled"> <li><i class="fas fa-location-arrow"></i> 3486 Boone Street, Corpus Christi, TX 78476</li> <li><i class="fas fa-phone"></i> +1361-285-4971</li> <li><i class="fas fa-envelope"></i> <a href="mailto:info@pdfcoke.com" class="text-white">info@pdfcoke.com</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Quick Links</h5> <ul class="list-unstyled"> <li><a href="https://pdfcoke.com/about" class="text-white">About</a></li> <li><a href="https://pdfcoke.com/contact" class="text-white">Contact</a></li> <li><a href="https://pdfcoke.com/help" class="text-white">Help / FAQ</a></li> <li><a href="https://pdfcoke.com/account" class="text-white">Account</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Legal</h5> <ul class="list-unstyled"> <li><a href="https://pdfcoke.com/tos" class="text-white">Terms of Service</a></li> <li><a href="https://pdfcoke.com/privacy-policy" class="text-white">Privacy Policy</a></li> <li><a href="https://pdfcoke.com/cookie-policy" class="text-white">Cookie Policy</a></li> <li><a href="https://pdfcoke.com/disclaimer" class="text-white">Disclaimer</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Follow Us</h5> <ul class="list-unstyled list-inline list-social"> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-facebook-f"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-twitter"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-linkedin"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-instagram"></i></a></li> </ul> <h5 class="text-white font-weight-bold mb-4">Mobile Apps</h5> <ul class="list-unstyled "> <li><a href="#" class="bb-alert" data-msg="IOS app is not available yet! Please try again later!"><img src="https://pdfcoke.com/static/images/app-store-badge.svg" height="45" /></a></li> <li><a href="#" class="bb-alert" data-msg="ANDROID app is not available yet! Please try again later!"><img style="margin-left: -10px;" src="https://pdfcoke.com/static/images/google-play-badge.png" height="60" /></a></li> </ul> </div> </div> </div> </footer> <div class="footer-copyright border-top pt-4 pb-2 bg-primary text-white"> <div class="container"> <p>Copyright © 2024 PDFCOKE.</p> </div> </div> <script src="https://pdfcoke.com/static/javascripts/jquery.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/popper.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/bootstrap.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/bootbox.all.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/filepond.js"></script> <script src="https://pdfcoke.com/static/javascripts/main.js?v=1732746622"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-144986120-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-144986120-1'); </script> </body> </html>