المشاركات

عرض المشاركات من نوفمبر, 2021

تنسيق الجداول HTML Table Styling

صورة
الدرس السابق الدرس التالي  تنسيق جدول HTML استخدم CSS لجعل الجداول تبدو أفضل.  خطوط الحمار الوحشي Table - Zebra Stripes 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 إذا أضفت لونًا للخلفية على كل صف جدول آخر ، فستحصل على تأثير خطوط حمار وحشي جميل. لتصميم كل عنصر بعنصر من عناصر صف الجدول ، استخدم المحدد : nth-child (even)   كما يلي: مثال <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #D6EEEE; } </style> </head> <body> <h2> جدول مخطط حمار وحشي </h2> <p> بالنسبة للجداول المخططة بالحمار الوحشي ، استخدم المحدد nth-child () وأضف لون الخلفية إلى جميع صفوف الجدول الزوجية (أو الفردية): </p> <table> <tr> <th>First Name</th> <th>Last Name</th> <t...
إرسال تعليق
قراءة المزيد

تعيين الأعمدة HTML Table Colgroup

صورة
الدرس السابق الدرس التالي يُستخدم عنصر < colgroup > لتصميم أعمدة معينة في الجدول. تصميم اعمدة معينة  HTML Table Colgroup إذا كنت تريد تصميم العمودين الأولين من الجدول ، فاستخدم عنصري < colgroup > و < col >. الاحد الاثنين الثلاثاء الاربعاء الخميس السبت الجمعة 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 يجب استخدام عنصر < colgroup > كحاوية لمواصفات العمود. يتم تحديد كل مجموعة باستخدام عنصر < col >. تحدد السمة span عدد الأعمدة التي تحصل على التنسيق ب  style تحدد سمة style  لإعطاء الأعمدة التنسيق . ملاحظة: هناك مجموعة محدودة للغاية من خصائص CSS القانونية لمجموعات colgroups. مثال <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2> colgroup </h2> <p> أضف co...
إرسال تعليق
قراءة المزيد

جدول HTML Table Colspan & Rowspan

صورة
الدرس السابق الدرس التالي جدول HTML Table Colspan & Rowspan يمكن أن تحتوي جداول HTML على خلايا تمتد عبر عدة صفوف و / أو أعمدة. جدول HTML - Colspan  لجعل خلية تمتد على عدة أعمدة ، استخدم سمة colspan : مثال <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2> خلية تمتد على عمودين </h2> <p> لجعل الخلية تمتد لأكثر من عمود واحد ، استخدم colspan سمة . </p> <table style="width:100%"> <tr> <th colspan="2">Name</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>43</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>57</td> </tr> </table> </body> </html> ملاحظة: تمثل ...
إرسال تعليق
قراءة المزيد

حشو وتباعد الجدول Table Padding & Spacing html

صورة
الدرس السابق الدرس التالي  حشو وتباعد جدول HTML يمكن لجداول HTML ضبط المساحة المتروكة داخل الخلايا وكذلك المسافة بين الخلايا. جدول HTML - حشو الخلية HTML Table - Cell Padding مساحة الخلية هي المسافة بين حواف الخلية ومحتوى الخلية. بشكل افتراضي ، يتم تعيين المساحة المتروكة على 0. لإضافة مساحة متروكة على خلايا الجدول ، استخدم خاصية CSS padding : مثال <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; } </style> </head> <body> <h2>Cellpadding</h2> <p> تحدد مساحة الخلية المسافة بين محتوى الخلية وحدودها. </p> <table style="width:100%"> <tr><th>الاسم</th> <th>اللقب</th> <th>السن</th> </tr> <tr> <td>بدر</td> <td>البدوري</td> <td>50</td> </tr> <tr> ...
إرسال تعليق
قراءة المزيد

رؤوس الجداول HTML Table Headers

صورة
الدرس السابق الدرس التالي  يمكن أن تحتوي جداول HTML على رؤوس-Headers لكل عمود أو صف ، أو للعديد من الأعمدة / الصفوف. رؤوس جداول -HTML Table Headers يتم تحديد رؤوس الجدول بالعناصر th ، حيث يمثل كل عنصر th   خلية جدول. مثال <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2> رؤوس الجدول </h2> <p> استخدم عنصر TH لتحديد رؤوس الجدول </p> <table style="width:100%"> <tr> <th>الاسم</th> <th>اللقب</th> <th>السن</th> </tr> <tr> <td>محمد</td> <td>بن ادم</td> <td>50</td> </tr> <tr> <td>ايمن</td> <td>البدري</td> <td>94</td> </tr> </table> </body> </html> رؤوس الجدول العمودي...
إرسال تعليق
قراءة المزيد

أحجام الجداول HTML Table Sizes

صورة
الدرس السابق الدرس التالي يمكن أن تحتوي جداول HTML على أحجام مختلفة لكل عمود أو صف أو الجدول بأكمله. استخدم سمة  style مع خصائص العرض( width ) أو الارتفاع( height ) لتحديد حجم جدول أو صف أو عمود. عرض الجدول  - HTML Table Width لتعيين عرض الجدول ، أضف سمة style  إلى عنصر < table >: مثال اضبط عرض الجدول على 100٪: <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; border-collapse: collapse; } </style> <body> <h2>جدول HTML عريض 100٪</h2> <table style="width:100%"> <tr> <th>الإسم</th> <th>اللقب</th> <th>السن</th> </tr> <tr> <td>عمر</td> <td>بن الخطاب</td> <td>50</td> </tr> <tr> <td>حمزة</td> <td>عبد المطلب</td> <td>94</td> </tr> <tr> <td>عبد ...
إرسال تعليق
قراءة المزيد

حدود الجدول HTML Table Borders

صورة
الدرس السابق الدرس التالي  حدود جدول HTML يمكن أن يكون لجداول HTML حدود من أنماط وأشكال مختلفة. كيفية إضافة حد - Add a Border عندما تضيف حدًا إلى جدول ، فإنك تضيف أيضًا حدودًا حول كل خلية في الجدول: لإضافة حد ، استخدم خاصية CSS border في عناصر الجدول - table ، والعناصرt h ، والعناصر td : مثال <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <h2> جدول بحدود </h2> <p> استخدم خاصية CSS border لإضافة حد إلى الجدول. </p> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> ...
إرسال تعليق
قراءة المزيد

الجداول HTML Tables

صورة
الدرس السابق الدرس التالي  الجداول HTML Tables تسمح جداول HTML لمطوري الويب بترتيب البيانات في صفوف وأعمدة. <!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> <h2>HTML Table</h2> <table> <tr> <th> الشركة </th> <th> جهة الاتصال </th> <th> البلد </th> </tr> <tr> <td> ألفريدز فوتيركيست </ td> <td> ماريا أندرس </ td> <td> ألمانيا </td> </tr> <tr> <td> Centro Comercial Moctezuma </td> <td> فرانسيسكو تشانغ </ td> <td> المكسيك </ td> </tr> <tr> <...
إرسال تعليق
قراءة المزيد

الأيقونة المفضلة - HTML Favicon

صورة
الدرس السابق الدرس التالي الأيقونة المفضلة هي صورة صغيرة تُعرض بجانب عنوان الصفحة في علامة تبويب المتصفح. كيفية إضافة الأيقونة المفضلة - HTML Favicon يمكنك استخدام أي صورة تريدها كرمز مفضل خاص بك. يمكنك أيضًا إنشاء الأيقونة المفضلة الخاصة بك على مواقع مثل https://favicon.cc. نصيحة: الأيقونة المفضلة هي صورة صغيرة ، لذا يجب أن تكون صورة بسيطة ذات تباين عالٍ. يتم عرض صورة الأيقونة المفضلة على يسار عنوان الصفحة في علامة تبويب المتصفح ، على النحو التالي: مثال على الأيقونة المفضلة لإضافة رمز مفضل إلى موقع الويب الخاص بك ، قم إما بحفظ صورة الأيقونة المفضلة في الدليل الجذر لخادم الويب الخاص بك ، أو قم بإنشاء مجلد في الدليل الجذر يسمى الصور ، واحفظ صورة الرمز المفضل في هذا المجلد. الاسم الشائع لصورة الأيقونة المفضلة هو "favicon.ico". بعد ذلك ، أضف عنصر <link> إلى ملف "index.html" ، بعد عنصر <title> ، على النحو التالي: مثال <!DOCTYPE html> <html> <head> <title>My Page Tit...
إرسال تعليق
قراءة المزيد

عرض صور مختلفة لأجهزة أو أحجام شاشة مختلفة HTML picture Element

صورة
الدرس السابق الدرس التالي يسمح لك عنصر <picture> في HTML بعرض صور مختلفة لأجهزة أو أحجام شاشة مختلفة. عنصر  <picture> يمنح عنصر  < picture > مطوري الويب مزيدًا من المرونة في تحديد موارد الصور. يحتوي العنصر <picture> على عنصر < source > واحد أو أكثر ، كل عنصر يشير إلى صور مختلفة من خلال سمة srcset . بهذه الطريقة يمكن للمتصفح اختيار الصورة التي تناسب العرض الحالي و / أو الجهاز. يحتوي كل عنصر من عناصر < source > على سمة وسائط تحدد متى تكون الصورة هي الأنسب. مثال عرض صور مختلفة لأحجام الشاشات المختلفة: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>The picture Element</h2> <picture> <source media="(min-width: 650px)" srcset="https://www.w3schools.com/html/img_food.jpg"> <source media="(min-width: 465px)" srcse...
إرسال تعليق
قراءة المزيد

صور الخلفية Background Images HTML

صورة
الدرس السابق الدرس التالي  صور خلفية  HTML يمكن تحديد صورة الخلفية (background-image) لأي عنصر HTML تقريبًا. صورة الخلفية على عنصر Background Image on a HTML element لإضافة صورة خلفية إلى عنصر HTML ، استخدم سمة نمط (style attribute) HTML و خاصية صورة الخلفية (background-image property)   لـ CSS: مثال <!DOCTYPE html> <html> <body> <h2>Background Image</h2> <p>صورة خلفية لعنصر div:</p> <div style="background-image: url('https://www.w3schools.com/html/img_girl.jpg');"> يمكنك تحديد صور الخلفية <br> لأي عنصر HTML مرئي. <br> في هذا المثال ، صورة الخلفية <br> محدد لعنصر div. <br> بشكل افتراضي ، صورة الخلفية <br> سيكرر نفسه في الاتجاه (الاتجاهات) <br> حيث يكون أصغر من العنصر <br> حيث تم تحديده. (حاول تغيير حجم <br> نافذة المتصفح لنرى كيف <br> صورة الخلفية تتصرف. </div> <p>صورة خلفية لعنصر p:</p> <p styl...
إرسال تعليق
قراءة المزيد

خرائط صور HTML Image Maps

صورة
الدرس السابق الدرس التالي  باستخدام خرائط صور HTML ، يمكنك إنشاء مناطق قابلة للنقر على الصورة. خرائط الصور تحدد علامة  <map> خريطة الصورة. خريطة الصورة هي صورة بها مناطق قابلة للنقر. يتم تحديد المناطق بعلامة أو أكثر من علامات <area> . حاول النقر فوق الكمبيوتر أو الهاتف أو فنجان القهوة في الصورة أدناه: مثال فيما يلي رمز مصدر HTML لخريطة الصورة أعلاه: <!DOCTYPE html> <html> <body> <h2>خرائط الصور</h2> <p>انقر على الكمبيوتر أو الهاتف أو فنجان القهوة للانتقال إلى صفحة جديدة وقراءة المزيد عن الموضوع:</p> <img border="0" data-original-height="379" data-original-width="400" height="379" src="https://www.w3schools.com/html/workplace.jpg" width="400" usemap="#workmap" /> <map name="workmap"> <area shape="rect" coords=...
إرسال تعليق
قراءة المزيد

الصور HTML Images

صورة
الدرس السابق الدرس التالي الصور HTML Images   يمكن للصور تحسين تصميم ومظهر صفحة الويب. تركيب صور HTML تستخدم علامة <img> لتضمين صورة في صفحة ويب. لا يتم إدراج الصور تقنيًا في صفحة الويب ؛ الصور مرتبطة بصفحات الويب. تنشئ علامة <img> مساحة تعليق للصورة المشار إليها. علامة <img> فارغة وتحتوي على سمات فقط ولا تحتوي على علامة إغلاق. تحتوي العلامة <img> على سمتين مطلوبتين: src - تحدد المسار إلى الصورة النص البديل (alt) - يحدد نصًا بديلًا للصورة بناء الجملة <img src="url" alt="alternatetext"> السمة (Attribute) src  تحدد سمة src المطلوبة المسار (URL) للصورة. ملاحظة: عندما يتم تحميل صفحة ويب ، فإن المتصفح ، في تلك اللحظة ، هو الذي يحصل على الصورة من خادم الويب ويدرجها في الصفحة. لذلك ، تأكد من بقاء الصورة بالفعل في نفس المكان بالنسبة إلى صفحة الويب ، وإلا سيحصل زوارك على رمز ...
إرسال تعليق
قراءة المزيد