مع SerpClix أصبح كسب المال أمرا سهلا

الأفراد المهتمين بكسب المال من خلال النقر على الروابط

الدرس السابق الدرس التالي
 تنسيق جدول 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>
  <th>Points</th>
  </tr>
  <tr>
  <td>Peter</td>
  <td>Griffin</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
  </tr>
</table>
</body>
</html>

ملاحظة: إذا كنت تستخدم (فردي) بدلاً من (زوجي) ، فسيحدث التصميم في الصف 1،3،5 وما إلى ذلك بدلاً من 2،4،6 وما إلى ذلك.
 خطوط حمار وحشي عمودية Table - Vertical 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, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th:nth-child(even),td:nth-child(even) {
  background-color: #D6EEEE;
}
</style>
</head>
<body>

<h2> جدول مخطط </h2>
<p> بالنسبة للجداول المخططة بالحمار الوحشي ، استخدم المحدد nth-child () وأضف لون الخلفية إلى جميع صفوف الجدول الزوجية (أو الفردية): </p>
<table style="width:100%">
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
    <th>FRI</th>
    <th>SAT</th>
    <th>SUN</th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

</body>
</html>

ملاحظة: ضع محدد: nth-child () على كل من العنصرين th و td إذا كنت تريد أن يكون النمط على كل من الرؤوس وخلايا الجدول العادية.
اجمع بين خطوط حمار وحشي رأسية وأفقية Vertical and Horizontal
يمكنك دمج التصميم من المثالين أعلاه وسيكون لديك خطوط في كل صف آخر وكل عمود آخر.
إذا كنت تستخدم لونًا شفافًا ، فستحصل على تأثير متداخل.
                 
                 
                 
                 
                 

استخدم لون rgba () لتحديد شفافية اللون:
مثال 
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}
</style>
</head>
<body>

<h2> جدول مخطط </h2>
<p> بالنسبة للجداول المخططة بالحمار الوحشي ، استخدم المحدد nth-child () وأضف لون الخلفية إلى جميع صفوف الجدول الزوجية (أو الفردية): </p>
<table style="width:100%">
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
    <th>FRI</th>
    <th>SAT</th>
    <th>SUN</th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

</body>
</html>

فواصل أفقية Horizontal Dividers
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

إذا قمت بتحديد حدود فقط في الجزء السفلي من كل صف جدول ، فسيكون لديك جدول به فواصل أفقية.
أضف خاصية border-bottom لجميع عناصر tr للحصول على فواصل أفقية:
مثال 
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

tr {
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<h2> فواصل منضدة بحدود </h2>
<p> أضف خاصية border-bottom إلى عناصر tr للفواصل الأفقية: </p>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

رفرفة الجداول Hoverable Table
استخدم: محدد التمرير hover على tr لتمييز صفوف الجدول عند مرورالماوس فوق العمود:
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300 
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #DDD;
}

tr:hover {background-color: #D6EEEE;}
</style>
</head>
<body>
<h2> رفرفة متحركة للاعمدة </h2>
<p> حرك الماوس فوق صفوف الجدول لمشاهدة التأثير. </p>

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>
الدرس السابق الدرس التالي
القسم:
الدرس السابق الدرس التالي
يُستخدم عنصر <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> أضف colgroup مع عنصر col يمتد على عمودين لتحديد نمط للعمودين: </p>
<table style="width: 100%;">
<colgroup>
  <col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>

</body>
</html>


1

ملاحظة: يجب أن تكون علامة <colgroup> تابعة لعنصر <table> ويجب وضعها قبل أي عناصر جدول أخرى ، مثل <thead> و <tr> و <td> وما إلى ذلك ، ولكن بعد عنصر <caption> ، إذا كان موجودا.
خصائص CSS القانونية Legal CSS Properties
لا يوجد سوى مجموعة محدودة جدًا من خصائص CSS المسموح باستخدامها في مجموعة colgroup:
  • width
  • visibility
  • background
  • border
لن يكون لجميع خصائص CSS الأخرى أي تأثير على جداولك.
عناصر العمود المتعددة Multiple Col Elements
إذا كنت تريد تصميم المزيد من الأعمدة بأنماط مختلفة ، فاستخدم المزيد من عناصر <col> داخل <colgroup>:
مثال
  
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<h2> عناصر العمود المتعددة </h2>
<p> أضف عدة عناصر col في مجموعةcolgroup:</p>
<table style="width: 100%;">
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>

</body>
</html>

مجموعات Colgroups فارغة Empty Colgroups
إذا كنت تريد style  الأعمدة في منتصف الجدول ، فقم بإدراج عنصر <col> "فارغ" (بدون أنماط style) للأعمدة قبل:
مثال
  
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2> مجموعات Colgroups فارغة </h2>
<p> أضف عناصر عمود "فارغة" تمثل الأعمدة قبل الأعمدة التي تريد تنسيقها: </p>
<table style="width: 100%;">
<colgroup>
  <col span="3">
  <col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</body>
</html>

إخفاء الأعمدة Hide Columns
يمكنك إخفاء الأعمدة بإمكانية الرؤية: خاصية الطي:
مثال
  
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2> إخفاء الأعمدة </h2>
<p> يمكنك إخفاء أعمدة معينة باستخدام خاصية الرؤية: </p>

<table style="width: 100%;">
<colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
<p><b> ملاحظة: </ b> لا يتم طي أعمدة الجدول بشكل صحيح في متصفحات Safari.</p>
</body>
</html>
الدرس السابق الدرس التالي
القسم:
الدرس السابق الدرس التالي
جدول 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>

ملاحظة: تمثل قيمة السمة colspan عدد الأعمدة التي يجب أن تمتد.

جدول HTML - Rowspan
لجعل خلية تمتد على عدة صفوف ، استخدم سمة rowspan:
مثال

  <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<h2> خلية تمتد عبر صفين </h2>
<p> لجعل الخلية تمتد لأكثر من صف واحد ، استخدم rowspan سمة . </p><table style="width:100%">
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
  </tr>
</table>
</body>
</html>

ملاحظة: تمثل قيمة السمة rowspan عدد الصفوف التي سيتم تمديدها.
الدرس السابق الدرس التالي
القسم:
الدرس السابق الدرس التالي
 حشو وتباعد جدول 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>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>محمد</td>
    <td>احمد</td>
    <td>80</td>
  </tr></table>
<p><strong>Tip:</strong> حاول تغيير المساحة المتروكة إلى 5 بكسل.</p>
</body>
</html>

لإضافة مساحة متروكة أعلى المحتوى فقط ، استخدم خاصية padding-top.
والجوانب الأخرى مع خصائص padding-bottom و padding-left و padding-right:
مثال

  <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}
</style>
</head>
<body>
<h2>Cellpadding - top - bottom - left - right </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>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>محمد</td>
    <td>احمد</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>

جدول HTML - تباعد الخلايا
تباعد الخلايا هو المسافة بين كل خلية.
بشكل افتراضي ، يتم تعيين المساحة على 2 بكسل.
لتغيير المسافة بين خلايا الجدول ، استخدم خاصية CSS لتباعد الحدود border-spacing في عنصر table :
مثال

  <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table {
  border-spacing: 30px;
}
</style>
</head>
<body>
<h2> تباعد الخلايا </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>
    <td>عيسى</td>
    <td>ماندو</td>
    <td>94</td>
  </tr>
  <tr>
    <td>احمد</td>
    <td>حميدو</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>
الدرس السابق الدرس التالي
القسم:
الدرس السابق الدرس التالي
 يمكن أن تحتوي جداول 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>

رؤوس الجدول العمودي Vertical Table Headers
لاستخدام العمود الأول كرؤوس للجدول ، حدد الخلية الأولى في كل صف كعنصرth  :
مثال

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

</body>
</html>

محاذاة رؤوس الجدول Align Table Headers
بشكل افتراضي ، تكون رؤوس الجدول table headers  غامقة bold  و في الوسط:
لمحاذاة رؤوس الجدول إلى اليسار ، استخدم خاصية محاذاة النص  text-align :
مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th {
  text-align: left;
}
</style>
</head>
<body>
<h2> محاذاة الرؤوس إلى اليسار </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>
    <td>فريد</td>
    <td>الفريدي</td>
    <td>94</td>
  </tr>
</table>

</body>
</html>

رأس أعمدة متعددة Header for Multiple Columns
يمكن أن يكون لديك رأس header  يمتد على عمودين أو أكثر.
للقيام بذلك ، استخدم سمة colspan على عنصر <th>:
مثال

<!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">الاسم</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>

الجدول التوضيحي  Table Caption
يمكنك إضافة تسمية توضيحية تعمل كعنوان للجدول بأكمله.
لإضافة تعليق إلى جدول ، استخدم علامة <caption>:
مثال

<!DOCTYPE html><html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}
</style>
</head>
<body>
<h2> تسمية توضيحية للجدول </h2>
<p> لإضافة تسمية توضيحية إلى جدول ، استخدم علامة التسمية التوضيحية. </p>
<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>شهر</th>
    <th>مدخرات</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
</body>
</html>

ملاحظة: يجب إدراج علامة <caption> مباشرة بعد علامة <table>.
الدرس السابق الدرس التالي
القسم:
الدرس السابق الدرس التالي
يمكن أن تحتوي جداول 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>عبد الله</td>
    <td>عبد مناف</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>

ملاحظة: استخدام النسبة المئوية كوحدة حجم للعرض يعني مدى عرض هذا العنصر بالعنصر الأصلي ، والذي في هذه الحالة هو عنصر <body>.
 Table Column Width  -عرض عمود جدول
لتعيين حجم عمود معين ، أضف سمة  style إلى عنصر <th> أو <td>:
مثال
اضبط عرض العمود الأول على 70٪:

  <!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}
</style>
<body>
<h2>اضبط العمود الأول على 70٪ من عرض الجدول</h2>
<table style="width:100%">
  <tr>
    <th style="width:70%">الاسم</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>عمر</td>
    <td>سعد</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

ارتفاع صف الجدول HTML Table Row Height
لتعيين ارتفاع صف معين ، أضف سمة style إلى عنصر صف الجدول:
مثال
اضبط ارتفاع الصف الثاني على 200 بكسل:

  <!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}
</style>
<body>

<h2>اضبط ارتفاع الصف الثاني على 200 بكسل</h2>

<table style="width:100%">
  <tr>
    <th>الإسم</th>
    <th>اللقب</th> 
    <th>السن</th>
  </tr>
  <tr style="height:200px">
    <td>احمد</td>
    <td>زهير</td>
    <td>50</td>
  </tr>
  <tr>
    <td>فهد</td>
    <td>الكنري</td>
    <td>94</td>
  </tr>
  <tr>
    <td>سعد</td>
    <td>الاصيلي</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>
الدرس السابق الدرس التالي
القسم:
الدرس السابق الدرس التالي
 حدود جدول HTML
يمكن أن يكون لجداول HTML حدود من أنماط وأشكال مختلفة.
كيفية إضافة حد - Add a Border
عندما تضيف حدًا إلى جدول ، فإنك تضيف أيضًا حدودًا حول كل خلية في الجدول:
لإضافة حد ، استخدم خاصية CSS border في عناصر الجدول -table، والعناصرth ، والعناصر 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>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

حدود الجدول المنهارة - Collapsed Table Borders
لتجنب وجود حدود مزدوجة كما في المثال أعلاه ، قم بتعيين خاصية CSS border-collapse.
سيؤدي هذا إلى انهيار الحدود إلى حد واحد:
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<h2> انهيار الحدود </h2>
<p> إذا كنت تريد تصغير الحدود إلى حد واحد ، فأضف خاصية CSS لتصغير الحدود. </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>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

حدود جدول النمط - style
إذا قمت بتعيين لون خلفية لكل خلية ، ومنحت الحد لونًا أبيض (مثل خلفية المستند) ، تحصل على انطباع  بحد-border غير مرئي:
  
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}
</style>
</head>
<body>
<h2> جدول ذات حدود غير مرئية </h2>
<p> صمم الجدول بحدود بيضاء ولون خلفية للخلايا لتكوين انطباع بحدود غير مرئية. </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>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

حدود الجداول المستديرة - Round Table Borders
باستخدام خاصية border-radius ، تحصل الحدود على زوايا مستديرة:
 
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}
</style>
</head>
<body>
<h2> جدول ذات حدود مستديرة </h2>
<p> استخدم خاصية CSS border-radius لإضافة زوايا مستديرة للحدود. </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>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

حذف الحد حول الجدول من خلال استبعاد الجدول table من محدد css:
  
مثال
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
  border: 1px solid black;
  border-radius: 10px;
}
</style>
</head>
<body>
<h2> جدول ذات حدود مستديرة </h2>
<p> استخدم خاصية CSS border-radius لإضافة زوايا مستديرة إلى خلايا الجدول. </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>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

حدود الجدول المنقط - Dotted Table Borders
باستخدام خاصية نمط الحدود border-style ، يمكنك تعيين مظهر الحدود.
القيم التالية مسموح بها:
  • dotted       - منقط
  • dashed      - متقطع
  • solid         - صلب
  • double      -  مزدوج
  • groove      -  أخدود
  • ridge         -
  • inset          -    أقحم
  • outset        -  البداية
  • none          - لا حد
  • hidden       - مختفي 
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
  border-style: dotted;
}
</style>
</head>
<body>
<h2> جدول بحدود منقطة </h2>
<p> استخدم خاصية CSS border-style لتعيين نمط الحدود. </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>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>
لون الحدود - border color
باستخدام خاصية لون الحدود border-color ، يمكنك تعيين لون الحد.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
  border-style:solid;
  border-color: #96D4D4;
}
</style>
</head>
<body>
<h2> جدول بلون الحدود </h2>
<p> استخدم خاصية CSS border-color لتعيين لون الحدود. </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>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>
الدرس السابق الدرس التالي
القسم:
الدرس السابق الدرس التالي
 الجداول 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>
     <td> إرنست هاندل </ td>
     <td> رولاند مندل </ td>
     <td> النمسا </td>
   </tr>
   <tr>
     <td> تجارة الجزر </ td>
     <td> هيلين بينيت </td>
     <td> المملكة المتحدة </td>
   </tr>
   <tr>
     <td> يضحك باخوس Winecellars </td>
     <td> يوشي تاناموري </ td>
     <td> كندا </td>
   </tr>
   <tr>
     <td> Magazzini Alimentari Riuniti </td>
     <td> جيوفاني روفيلي </ td>
     <td> إيطاليا </td>
   </tr></tr>
</table>

</body>
</html>
حدد جدول  Define an HTML Table
يتكون الجدول في HTML من خلايا جدول داخل الصفوف والأعمدة
مثال
جدول HTML بسيط:
 <!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
 <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>
</table>

<p> لفهم المثال بشكل أفضل ، أضفنا حدودًا إلى الجدول. </ p>

</body>
</html>


خلايا الجدول-Table Cells
يتم تعريف كل خلية من خلايا الجدول بعلامة <td> و </ td>.
td  لتقف على بيانات الجدول.
كل ما يقع بين <td> و </ td> يمثل محتوى خلية الجدول.
مثال
 <!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2> تحدد عناصر TD خلايا الجدول </ h2>

<table style="width:100%">
  <tr>
     <td> اميل </ td>
     <td> توبياس </ td>
     <td> لينوس </ td>
  </tr>
</table>

<p> لفهم المثال بشكل أفضل ، أضفنا حدودًا إلى الجدول. </ p>

</body>
</html>

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

صفوف الجدول-Table Rows
يبدأ كل صف في الجدول بعلامة <tr> وينتهي بعلامة </tr>.
tr  للتوقف على صف الجدول.
مثال
<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2> تحدد عناصر TR صفوف الجدول </ h2>

<table style="width:100%">
  <tr>
      <td> اميل </ td>
     <td> توبياس </ td>
     <td> لينوس </ td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

<p> لفهم المثال بشكل أفضل ، أضفنا حدودًا إلى الجدول. </ p>

</body>
</html>


يمكن أن يكون لديك العديد من الصفوف كما تريد في الجدول ، فقط تأكد من أن عدد الخلايا هو نفسه في كل صف.

ملاحظة: هناك أوقات يمكن أن يحتوي فيها صف على خلايا أقل أو أكثر من خلايا أخرى. سوف تتعلم عن ذلك في فصل لاحق.

 Table Headers-رؤوس الجدول
في بعض الأحيان تريد أن تكون خلاياك رؤوسًا ، وفي هذه الحالات ، استخدم علامة <th> بدلاً من علامة <td>:

مثال
اجعل الصف الأول عبارة عن رؤوس (Headers) جدول: 
<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>تحدد عناصر TH رؤوس الجدول</h2>

<table style="width:100%">
  <tr>
    <th>الشخص 1</th>
    <th>الشخص 2</th>
    <th>الشخص 3</th>
  </tr>
  <tr>
    <td>احمد</td>
    <td>عمر</td>
    <td>ابراهيم</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

<p>لفهم المثال بشكل أفضل ، أضفنا حدودًا إلى الجدول.</p>

</body>
</html>
بشكل افتراضي ، يكون النص الموجود في عناصر <th> غامقًا ومتوسطًا ، ولكن يمكنك تغيير ذلك باستخدام CSS.


الدرس السابق الدرس التالي
القسم:
الدرس السابق الدرس التالي
الأيقونة المفضلة هي صورة صغيرة تُعرض بجانب عنوان الصفحة في علامة تبويب المتصفح.
كيفية إضافة الأيقونة المفضلة - HTML Favicon
يمكنك استخدام أي صورة تريدها كرمز مفضل خاص بك. يمكنك أيضًا إنشاء الأيقونة المفضلة الخاصة بك على مواقع مثل https://favicon.cc.
نصيحة: الأيقونة المفضلة هي صورة صغيرة ، لذا يجب أن تكون صورة بسيطة ذات تباين عالٍ.

يتم عرض صورة الأيقونة المفضلة على يسار عنوان الصفحة في علامة تبويب المتصفح ، على النحو التالي:
مثال على الأيقونة المفضلة

لإضافة رمز مفضل إلى موقع الويب الخاص بك ، قم إما بحفظ صورة الأيقونة المفضلة في الدليل الجذر لخادم الويب الخاص بك ، أو قم بإنشاء مجلد في الدليل الجذر يسمى الصور ، واحفظ صورة الرمز المفضل في هذا المجلد. الاسم الشائع لصورة الأيقونة المفضلة هو "favicon.ico".
بعد ذلك ، أضف عنصر <link> إلى ملف "index.html" ، بعد عنصر <title> ، على النحو التالي:
مثال
<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

الآن ، احفظ ملف "index.html" وأعد تحميله في متصفحك. يجب أن تعرض علامة تبويب المتصفح الآن صورة الأيقونة المفضلة على يسار عنوان الصفحة.
دعم تنسيق ملف favicon
يوضح الجدول التالي دعم تنسيق الملف لصورة الأيقونة المفضلة:
Browser ICO PNG GIF JPEG SVG
Edge Yes Yes Yes Yes Yes
Chrome Yes Yes Yes Yes Yes
Firefox Yes Yes Yes Yes Yes
Opera Yes Yes Yes Yes Yes
Safari Yes Yes Yes Yes Yes

ملخص الفصل
  • استخدم عنصر  <link> لإدراج رمز مفضل 
الدرس السابق الدرس التالي
القسم:
الدرس السابق الدرس التالي
يسمح لك عنصر <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)" srcset="https://www.w3schools.com/html/img_car.jpg">

<p> عنصر img مطلوب باعتباره آخر علامة فرعية من كتلة إعلان الصورة.
  <img src="https://www.w3schools.com/html/img_girl.jpg" style="width:auto;">
</picture>
<p> قم بتغيير حجم المتصفح لمشاهدة الإصدارات المختلفة من الصورة التي يتم تحميلها بأحجام مختلفة لإطار العرض.
يبحث المستعرض عن أول عنصر مصدر حيث يتطابق الاستعلام عن الوسائط مع عرض إطار العرض الحالي للمستخدم ،
وجلب الصورة المحددة في سمة srcset. </p>

يُستخدم عنصر img لتوفير التوافق مع الإصدارات السابقة للمتصفحات التي لا تدعم عنصر الصورة ، أو في حالة عدم تطابق أي من علامات المصدر.
</p>

<p> <strong> ملاحظة: </ strong> عنصر الصورة غير مدعوم في IE12 والإصدارات الأقدم أو Safari 9.0 والإصدارات الأقدم. </ p>
</body>
</html>

ملاحظة: حدد دائمًا عنصر <img> كعنصر فرعي آخر من عنصر <picture>. يتم استخدام عنصر <img> بواسطة المتصفحات التي لا تدعم عنصر <picture> ، أو إذا لم تتطابق أي من علامات <source>.

متى تستخدم عنصر الصورة -<picture>
هناك غرضان رئيسيان لعنصر <picture>:
1. عرض النطاق الترددي-Bandwidth
إذا كانت لديك شاشة أو جهاز صغير ، فليس من الضروري تحميل ملف صورة كبير. سيستخدم المستعرض العنصر <source> الأول مع قيم السمات المطابقة ، ويتجاهل أيًا من العناصر التالية.
2. تنسيق الدعم-Format Support
قد لا تدعم بعض المتصفحات أو الأجهزة جميع تنسيقات الصور. باستخدام عنصر <picture> ، يمكنك إضافة صور بجميع التنسيقات ، وسيستخدم المتصفح التنسيق الأول الذي يتعرف عليه ، ويتجاهل أيًا من العناصر التالية.
مثال 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
  <source srcset="https://www.w3schools.com/html/img_avatar.png">
  <source srcset="https://www.w3schools.com/html/img_girl.jpg">
  <img src="https://www.w3schools.com/html/img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
194 / 5000

<p> يمكن استخدام عنصر الصورة عندما لا تكون تنسيق الصورة مدعومة من قبل جميع الأجهزة. </ p>

<p> سيستخدم الجهاز تنسيق الصورة الأول الذي يدعمه ويتجاهل باقي الصور. </ p> 
</body>
</html>

سيستخدم المتصفح تنسيق الصورة الأول الذي يتعرف عليه:
ملاحظة: سيستخدم المتصفح عنصر <source> الأول مع قيم السمات المطابقة ، ويتجاهل أي عناصر <source> التالية.
الدرس السابق الدرس التالي
القسم:
الدرس السابق الدرس التالي
 صور خلفية  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 style="background-image: url('https://www.w3schools.com/html/img_girl.jpg');">
يمكنك تحديد صور الخلفية <br>
لأي عنصر HTML مرئي. <br>
في هذا المثال ، صورة الخلفية <br>
محدد لعنصر div. <br>
بشكل افتراضي ، صورة الخلفية <br>
سيكرر نفسه في الاتجاه (الاتجاهات) <br>
حيث يكون أصغر من العنصر <br>
حيث تم تحديده. (حاول تغيير حجم <br>
نافذة المتصفح لنرى كيف <br>
صورة الخلفية تتصرف.
</p>

</body>
</html>

أضف صورة خلفية إلى عنصر HTML:
يمكنك أيضًا تحديد صورة الخلفية في عنصر <style> في قسم <head>:
مثال
حدد صورة الخلفية في عنصر <style>: 

  <!DOCTYPE html>
<html>
<head>
<style>
div {
  background-image: url('https://www.w3schools.com/html/img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<div>
يمكنك تحديد صور الخلفية <br>
لأي عنصر HTML مرئي. <br>
في هذا المثال ، صورة الخلفية <br>
محدد لعنصر div. <br>
بشكل افتراضي ، صورة الخلفية <br>
سيكرر نفسه في الاتجاه (الاتجاهات) <br>
حيث يكون أصغر من العنصر <br>
حيث تم تحديده. (حاول تغيير حجم <br>
نافذة المتصفح لنرى كيف <br>
صورة الخلفية تتصرف.
</div>

</body>
</html>

صورة الخلفية على الصفحة Background Image on a Page
إذا كنت تريد أن تحتوي الصفحة بأكملها على صورة خلفية ، فيجب عليك تحديد صورة الخلفية في عنصر <body>:
مثال
أضف صورة خلفية للصفحة بأكملها: 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.w3schools.com/html/img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>بشكل افتراضي ، ستكرر صورة الخلفية نفسها إذا كانت أصغر من العنصر المحدد ، في هذه الحالة عنصر الجسم.</p>

</body>
</html>

تكرار الخلفية Background Repeat
إذا كانت صورة الخلفية أصغر من العنصر ، فستكرر الصورة نفسها أفقيًا وعموديًا حتى تصل إلى نهاية العنصر:
مثال:
 <!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.w3schools.com/html/example_img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Repeat</h2>

<p>بشكل افتراضي ، ستكرر صورة الخلفية نفسها إذا كانت أصغر من العنصر المحدد ، في هذه الحالة عنصر الجسم.</p>

</body>
</html>

لتجنب تكرار صورة الخلفية ، اضبط خاصية تكرار الخلفية (background-repeat) على عدم التكرار(no-repeat).
مثال 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.w3schools.com/html/example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h2>Background No Repeat</h2>

<p>يمكنك تجنب تكرار الصورة عن طريق تعيين خاصية تكرار الخلفية على "عدم التكرار".</p>

</body>
</html>

غلاف الخلفية Background Cover
إذا كنت تريد أن تغطي صورة الخلفية العنصر بأكمله ، فيمكنك تعيين خاصية حجم الخلفية(background-size) لتغطيتها(cover.).
أيضًا ، للتأكد من تغطية العنصر بالكامل دائمًا ، اضبط خاصية مرفق الخلفية (background-attachment) على ثابت(fixed):
بهذه الطريقة ، ستغطي صورة الخلفية العنصر بأكمله ، بدون تمدد (ستحتفظ الصورة بنسبها الأصلية):
مثال 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.w3schools.com/html/img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>
</head>
<body>

<h2>Background Cover</h2>

<p>اضبط خاصية background-size على "cover" وستغطي صورة الخلفية العنصر بأكمله ، وفي هذه الحالة عنصر body.</p>

</body>
</html>

امتداد الخلفية Background Stretch
إذا كنت تريد أن تمتد صورة الخلفية لتلائم العنصر بأكمله ، فيمكنك تعيين خاصية حجم الخلفية (background-size) إلى 100٪ 100٪:
حاول تغيير حجم نافذة المتصفح ، وسترى أن الصورة ستمتد ، لكنها ستغطي العنصر بأكمله دائمًا.
مثال 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://www.w3schools.com/html/img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}
</style>
</head>
<body>

<h2>Background Stretch</h2>

<p>اضبط خاصية حجم الخلفية على "100٪ 100٪" وسيتم تمديد صورة الخلفية لتغطية العنصر بأكمله ، في هذه الحالة عنصر الجسم.</p>

</body>
</html>
الدرس السابق الدرس التالي
القسم:
الدرس السابق الدرس التالي
 باستخدام خرائط صور HTML ، يمكنك إنشاء مناطق قابلة للنقر على الصورة.
خرائط الصور
تحدد علامة  <map> خريطة الصورة. خريطة الصورة هي صورة بها مناطق قابلة للنقر. يتم تحديد المناطق بعلامة أو أكثر من علامات <area>.
حاول النقر فوق الكمبيوتر أو الهاتف أو فنجان القهوة في الصورة أدناه:
Computer Phone Cup of coffee مثال فيما يلي رمز مصدر 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="34,44,270,350" alt="Computer" href="https://www.w3schools.com/html/computer.htm" target="_blank">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://www.w3schools.com/html/phone.htm" target="_blank">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://www.w3schools.com/html/coffee.htm" target="_blank">
</map>

</body>
</html>
كيف يعمل؟
الفكرة وراء خريطة الصورة هي أنه يجب أن تكون قادرًا على تنفيذ إجراءات مختلفة اعتمادًا على المكان الذي تنقر عليه في الصورة.
لإنشاء مخطط صورة ، تحتاج إلى صورة وبعض تعليمات HTML البرمجية التي تصف المناطق القابلة للنقر.
الصورة
يتم إدراج الصورة باستخدام علامة <img>. الاختلاف الوحيد عن الصور الأخرى هو أنه يجب عليك إضافة سمة usemap:
  
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
تبدأ قيمة خريطة المستخدم بعلامة التجزئة # متبوعة باسم خريطة الصورة ، وتُستخدم لإنشاء علاقة بين الصورة وخريطة الصورة.

نصيحة: يمكنك استخدام أي صورة كخريطة صورة!

إنشاء خريطة الصورة
 أضف عنصر <map>.
يُستخدم عنصر <map> لإنشاء مخطط صورة ، ويرتبط بالصورة باستخدام سمة الاسم (name attribute) المطلوبة:
<map name="workmap">
يجب أن تحتوي سمة الاسم (name attribute) على نفس قيمة سمة خريطة المستخدم الخاصة بـ <img>.

المناطق
أضف المناطق القابلة للنقر.
يتم تحديد المنطقة القابلة للنقر باستخدام عنصر <area>.

شكل
يجب تحديد شكل المنطقة القابلة للنقر ، ويمكنك اختيار إحدى هذه القيم:
  • المستطيل rect  - يحدد منطقة مستطيلة
  • دائرة circle - تحدد منطقة دائرية
  • متعدد poly - يحدد منطقة متعددة الأضلاع
  • افتراضي default - يحدد المنطقة بأكملها
يجب عليك أيضًا تحديد بعض الإحداثيات لتتمكن من وضع المنطقة القابلة للنقر على الصورة.

Shape="rect"
تأتي إحداثيات Shape = "rect" في أزواج ، أحدهما للمحور x والآخر للمحور y.

الإحداثيات 34،44 تقع على بعد 34 بكسل من الهامش الأيسر و 44 بكسل من الأعلى:
 
الإحداثيات 270،350 تقع على بعد 270 بكسل من الهامش الأيسر و 350 بكسل من الأعلى:
لدينا الآن بيانات كافية لإنشاء منطقة مستطيلة قابلة للنقر: 
<!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="34,44,270,350" alt="Computer" href="https://www.w3schools.com/html/computer.htm" target="_blank">
 
</map>

</body>
</html>
هذه هي المنطقة التي تصبح قابلة للنقر وسوف ترسل المستخدم إلى الصفحة "computer.htm":
Shape="circle"
لإضافة منطقة دائرة ، حدد أولاً إحداثيات مركز الدائرة
337,300
ثم حدد نصف قطر الدائرة:
44 بكسل
لديك الآن بيانات كافية لإنشاء منطقة دائرية قابلة للنقر:
مثال 
<!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="circle" coords="337,300,44" alt="Cup of coffee" href="https://www.w3schools.com/html/coffee.htm" target="_blank">
</map>

</body>
</html>
هذه هي المنطقة التي تصبح قابلة للنقر وسوف ترسل المستخدم إلى الصفحة "coffee.htm":
Shape= poly 
يحتوي shape="poly" على عدة نقاط إحداثيات ، مما يؤدي إلى تكوين شكل بخطوط مستقيمة (مضلع).

يمكن استخدام هذا لإنشاء أي شكل.
مثل شكل كرواسون!
كيف يمكننا أن نجعل الكرواسون في الصورة أدناه رابطًا قابلًا للنقر؟
 
علينا إيجاد إحداثيات x و y لجميع حواف الكرواسون:
تأتي الإحداثيات في أزواج ، أحدهما للمحور x والآخر للمحور y: 
<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>انقر فوق الكرواسون للذهاب إلى صفحة جديدة وقراءة المزيد عن الموضوع:</p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNr6HxRReO8me3ILW_e70iIp-sYyC2unzJCDyRJ-0XOCI3nHCxWYwa6X-lJt5NqT9c0pAIGQVwJvAwLwyJV5DjuJHofsbMFYNFuhDBta_MxSm3u2hI8zDxqaco-mRC4bygJGBjtfi0zHJ/s0/2021-11-25_062250.png" alt="French Food" usemap="#foodmap" width="450" height="675">

<map name="foodmap">
  <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" alt="Croissant" href="https://www.w3schools.com/html/croissant.htm" target="_blank">
</map>

</body>
</html>
هذه هي المنطقة التي تصبح قابلة للنقر وسوف ترسل المستخدم إلى الصفحة "croissant.htm":
خريطة الصورة وجافا سكريبت
يمكن للمنطقة القابلة للنقر أيضًا تشغيل وظيفة JavaScript.

أضف حدث نقرة onclick إلى عنصر <area> لتنفيذ وظيفة (function) JavaScript:

مثال
هنا ، نستخدم السمة onclick لتنفيذ وظيفة JavaScript عند النقر فوق المنطقة:
  
<!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="circle" coords="337,300,44" href="https://www.w3schools.com/html/coffee.htm" onclick="myFunction()" target="_blank">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

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

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

مثال
  
<!DOCTYPE html>
<html>
<body>  
 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMbyEcrLMbZ2M2bVAXCUyHH1sVSgWUvScpwm0E-GLzw6FakfA9eyGfCNBrRNkn14aSIOu0J3ogxscGyEUw91fYIFvwmpxEyOXMs3V_uaCVSafgCnKuLyFWW6S1B82sCchrp5BOusRCE5s/w1600/19.png" alt="النص البديل هنا" width="460" height="345">

</body>
</html>
سمة النص البديل (alt Attribute)
توفر السمة alt المطلوبة نصًا بديلاً للصورة ، إذا كان المستخدم لسبب ما لا يمكنه عرضها (بسبب بطء الاتصال ، أو خطأ في السمة src ، أو إذا كان المستخدم يستخدم قارئ الشاشة).

يجب أن تصف قيمة سمة النص البديل الصورة:
مثال
  
<img src="img_chania.jpg" alt="النص البديل ">
نصيحة: قارئ الشاشة هو برنامج يقرأ كود HTML ، ويسمح للمستخدم "بالاستماع" إلى المحتوى. تعد قارئات الشاشة مفيدة للأشخاص ضعاف البصر أو الذين يعانون من إعاقات التعلم.

حجم الصورة - العرض والارتفاع
يمكنك استخدام سمة النمط (style attribute) لتحديد عرض الصورة وارتفاعها.

مثال
<!DOCTYPE html>
<html>
<body>

<h2>حجم الصور</h2>

<p> نستخدم هنا سمة النمط لتحديد عرض الصورة وارتفاعها :</p>

<img src="img_girl.jpg" alt="وصف الصورة يكون واضح" style="width:500px;height:600px;">

</body>
</html>
بدلاً من ذلك ، يمكنك استخدام سمات العرض والارتفاع: 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMbyEcrLMbZ2M2bVAXCUyHH1sVSgWUvScpwm0E-GLzw6FakfA9eyGfCNBrRNkn14aSIOu0J3ogxscGyEUw91fYIFvwmpxEyOXMs3V_uaCVSafgCnKuLyFWW6S1B82sCchrp5BOusRCE5s/w1600/19.png" alt="Girl in a jacket" width="500" height="600">
تحدد سمات العرض والارتفاع دائمًا عرض الصورة وارتفاعها بالبكسل.

ملاحظة: حدد دائمًا عرض الصورة وارتفاعها. إذا لم يتم تحديد العرض والارتفاع ، فقد تومض صفحة الويب أثناء تحميل الصورة.

العرض والارتفاع ، أو النمط؟
جميع سمات العرض والارتفاع والنمط صالحة في HTML.
ومع ذلك ، نقترح استخدام سمة النمط (style).لانه  يمنع أوراق الأنماط من تغيير حجم الصور:

مثال
<!DOCTYPE html>
<html>
<head>
<style>
/* %يضبط هذا النمط عرض كل الصور على 100: */
img {
  width: 100%;
}
</style>
</head>
<body>

<h2>سمات أو نمط العرض / الارتفاع?</h2>

<p>تستخدم الصورة الأولى سمة العرض (مضبوطة على 128 بكسل) ، لكن النمط في قسم الرأس يتجاوزها ، ويضبط العرض على 100٪.</p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMbyEcrLMbZ2M2bVAXCUyHH1sVSgWUvScpwm0E-GLzw6FakfA9eyGfCNBrRNkn14aSIOu0J3ogxscGyEUw91fYIFvwmpxEyOXMs3V_uaCVSafgCnKuLyFWW6S1B82sCchrp5BOusRCE5s/w1600/19.png" alt="HTML5 Icon" width="128" height="128">

<p>تستخدم الصورة الثانية سمة النمط (style) لتعيين العرض على 128 بكسل ، ولن يتم تجاوز ذلك بالنمط في قسم الرأس:</p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMbyEcrLMbZ2M2bVAXCUyHH1sVSgWUvScpwm0E-GLzw6FakfA9eyGfCNBrRNkn14aSIOu0J3ogxscGyEUw91fYIFvwmpxEyOXMs3V_uaCVSafgCnKuLyFWW6S1B82sCchrp5BOusRCE5s/w1600/19.png" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
الصور في مجلد آخر
إذا كانت لديك صورك في مجلد فرعي ، فيجب عليك تضمين اسم المجلد في سمة src:

مثال
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
الصور على خادم / موقع آخر
تشير بعض مواقع الويب إلى صورة على خادم آخر.

للإشارة إلى صورة على خادم آخر ، يجب عليك تحديد عنوان URL مطلق (كامل) في سمة src:

مثال
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMbyEcrLMbZ2M2bVAXCUyHH1sVSgWUvScpwm0E-GLzw6FakfA9eyGfCNBrRNkn14aSIOu0J3ogxscGyEUw91fYIFvwmpxEyOXMs3V_uaCVSafgCnKuLyFWW6S1B82sCchrp5BOusRCE5s/w1600/19.png" alt="HTML5 Icon" style="width:128px;height:128px;">
ملاحظات حول الصور الخارجية: قد تكون الصور الخارجية محمية بحقوق النشر. إذا لم تحصل على إذن لاستخدامه ، فقد تنتهك قوانين حقوق النشر. بالإضافة إلى ذلك ، لا يمكنك التحكم في الصور الخارجية ؛ يمكن إزالته أو تغييره فجأة.

(Animated Images) صور متحركة
يسمح HTML بصور GIF المتحركة:

مثال
  
<!DOCTYPE html>
<html>
<body>

<h2>Animated Images</h2>

<p>يسمح HTML بتحريك الصور:</p>

<img src="https://www.w3schools.com/html/programming.gif" alt="Computer man" style="width:48px;height:48px;">

</body>
</html>
إستخدام الصورة كارتباط
لاستخدام صورة كرابط ، ضع علامة <img> داخل علامة <a>

مثال
<a href="default.html">
  <img src="https://www.blogger.com/img/logo_blogger_40px.png" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
ssdsd
صورة عائمة
استخدم خاصية CSS float للسماح للصورة بأن تطفو إلى يمين أو يسار النص:

مثال
  
<!DOCTYPE html>
<html>
<body>

<h2>Floating Images</h2>
<p><strong>تعويم الصورة إلى اليمين:</strong></p>

<p>
<img src="https://www.blogger.com/img/logo_blogger_40px.png" alt="Smiley face" style="float:right;width:42px;height:42px;">
فقرة مع صورة عائمة. فقرة مع صورة عائمة. فقرة مع صورة عائمة.
</p>

<p><strong>تعويم الصورة إلى اليسار:</strong></p>
<p>
<img src="https://www.blogger.com/img/logo_blogger_40px.png" alt="Smiley face" style="float:left;width:42px;height:42px;">
فقرة مع صورة عائمة. فقرة مع صورة عائمة. فقرة مع صورة عائمة. 
</p>

</body>
</html>
تنسيقات الصور العامة
فيما يلي أنواع ملفات الصور الأكثر شيوعًا ، والمدعومة في جميع المتصفحات (Chrome ، و Edge ، و Firefox ، و Safari ، و Opera):
اختصار تنسيق الملف امتداد الملف
APNG رسومات الشبكة المحمولة المتحركة .apng
GIF تنسيق تبادل الرسومات .gif
ICO أيقونة مايكروسوفت .ico, .cur
JPEG صورة مجموعة خبراء التصوير المشتركة .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG رسومات الشبكة المحمولة .png
SVG Scalable Vector Graphics .svg

ملخص الفصل
  • استخدم عنصر <img> في HTML لتعريف الصورة
  • استخدم سمة  src لتعريف عنوان URL للصورة
  • استخدم سمة  alt لتعريف نص بديل للصورة ، إذا كان لا يمكن عرضها
  • استخدم سمات العرض والارتفاع في HTML أو خصائص العرض والارتفاع في CSS لتحديد حجم الصورة
  • استخدم خاصية CSS float للسماح للصورة بالطفو إلى اليسار أو اليمين
ملاحظة: يستغرق تحميل الصور الكبيرة وقتًا ، ويمكن أن يبطئ صفحة الويب الخاصة بك. استخدم الصور بعناية. 


القسم:
الاشتراك في: الرسائل (Atom)