الجداول داخل لغة HTML

عناصر تنسيق النص داخل لغة HTML


يتم تعريف جدول HTML بالعلامة <table>.
يتم تعريف كل صف جدول بالعلامة <tr>.
يتم تعريف رأس الجدول بالعلامة <th> بشكل إفتراضي،
تكون عناوين الجدول غامقة ويتم توسيطها.
يتم تعريف بيانات الخلية أو الخلية مع العلامة <td>.

مثال:

<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>
</table>

ملاحظة: 

إن عناصر td هي عبارة عن حاويات للبيانات الخاصة بالجدول.

يُمكن أن تحتوي على جميع أنواع عناصر HTML؛ النص والصور والقوائم والجداول الأخرى إلخ.

إضافة حد إلي جدول HTML


إذا لم تُحدد حداً للجدول، فسيتم عرضه بدون حدود.

يتم تعيين حد بإستخدام خاصية حد CSS.

مثال:

table, th, td {
border: 1px solid black;
}

تذكر تعريف حدود لكل من الجدول وخلايا الجدول.

دمج الحدود داخل الجدول

إذا كنت تريد أن يتم دمج الحدود إلى حد واحد، فأضف الخاصية التي تحتوي على الحد الأقصى لعناصر CSS.
مثال:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}


إضافة فراغ "حشو" داخل الجدول


تحدد مساحة الخلايا المساحة بين محتوى الخلية وحدودها.

إذا لم تقم بتحديد الحشوة أو الفراغ، سيتم عرض خلايا الجدول بدون الحشو.

لتعيين الحشو، إستخدم خاصية padding CSS.

مثال:

th, td { 
padding: 15px;
}


محاذاة العناوين من اليسار

بشكل إفتراضي، تكون عناوين الجدول غامقة ويتم توسيطها.
لمحاذاة عناوين الجداول إلى اليسار، إستخدم خاصية محاذاة النص CSS text-align.
مثال:

th {

text-align: left;

}


تباعد الحدود داخل الجدول

تباعد الحدود يُحدد المسافة بين الخلايا.
لتعيين خاصية تباعد الحدود لجدول، إستخدم خاصية CSS border-spacing:
مثال:

table {

border-spacing: 5px;

}


ملاحظة: إذا كان الجدول قد قام بتقليص الحدود، فإن تباعد الحدود ليس له أي تأثير.

جعل الخلية تمتد في العديد من الأعمدة

لجعل الخلية تمتد لأكثر من عمود واحد، إستخدم السمة colspan.
مثال:


<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>


جعل الخلية تمتد في العديد من الصفوف

لجعل الخلية تمتد لأكثر من صف واحد، إستخدم سمة rowspan.
مثال:

<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>


إضافة تسمية توضيحية


لإضافة تسمية توضيحية إلى جدول HTML، إستخدم علامة <caption>.

مثال:

<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>


ملاحظة: يجب إدخال علامة <caption> مباشرة بعد علامة <table>.

إضافة نمط خاص للجدول

لتحديد نمط خاص للجدول، أضف سمة معرف id إلى الجدول.
مثال:



<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>





الآن يُمكنك تحديد نمط خاص لهذا الجدول.
مثال:

table#t01 {
width: 100%;
background-color: #f1f1c1;
}


إضافة المزيد من الأنماط:
مثال:

table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}


ملخص الجداول داخل لغة HTML

  • إستخدم عنصر HTML table لتحديد جدول.
  • إستخدم عنصر HTML tr لتحديد صف داخل الجدول.
  • إستخدم عنصر td HTML لتحديد بيانات داخل الجدول.
  • إستخدم عنصر HTML th لتحديد عنوان للجدول.
  • إستخدم عنصر HTML caption لتحديد عنوان توضيحي للجدول.
  • إستخدم خاصية حدود CSS لتعريف حد.
  • إستخدم خاصية تقليص الحدود CSS لطي حدود الخلية.
  • إستخدم خاصية padding CSS لإضافة الحشو إلى الخلايا.
  • إستخدم خاصية CSS-align text لمحاذاة نص الخلية.
  • إستخدم خاصية تباعد CSS text-align لتعيين التباعد بين الخلايا.
  • إستخدم سمة colspan لجعل خلية تمتد في العديد من الأعمدة.
  • إستخدم سمة rowspan لجعل خلية تمتد في العديد من الصفوف.
  • إستخدم السمة id لتعريف جدول واحد بشكل فريد.


الصور داخل لغة HTML

ما هي HTML Images ؟


يُمكن للصور تحسين التصميم وظهور صفحة الويب.
مثال:
<img src="pic_trulli.jpg" alt="Italian Trulli">
مثال:
<img src="img_girl.jpg" alt="Girl in a jacket">
مثال:

<img src="img_chania.jpg" alt="Flowers in Chania">

كيفية وضع الصور داخل لغة HTML

في لغة HTML، يتم تعريف الصور بإستخدام الوسم <img>.
الوسم <img> يكون فارغاً، وتحتوي على سمات فقط ولا تحتوي على علامة إغلاق.
تُحدد السمة src عنوان URL "عنوان الويب" للصورة.
مثال:
<img src="url">

السمة البديلة The alt Attribute

تُوفر سمة alt نصاً بديلاً لصورة ما، إذا لم يتمكن المُستخدم لسبب ما من مشاهدته "بسبب بطء الإتصال أو وجود خطأ في السمة src أو إذا كان المستخدم يستخدم قارئ الشاشة".
يجب أن تصف قيمة سمة alt الصورة.
مثال:

<img src="img_chania.jpg" alt="Flowers in Chania">

إذا تعذر على المتصفح العثور على صورة، فسيعرض قيمة سمة alt.
مثال:

<img src="wrongname.gif" alt="Flowers in Chania">

ملاحظة: سمة alt مطلوبة، صفحة الويب لن يتم التحقق منها بشكل صحيح بدونها.

حجم الصورة - العرض والارتفاع

يُمكنك إستخدام سمة النمط لتحديد عرض وإرتفاع الصورة.
مثال:

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
بدلاً من ذلك، يُمكنك إستخدام سمات العرض والإرتفاع بدون إستخدام الوسم style.
مثال:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

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

Width and Height, or Style 

تكون سمات العرض والإرتفاع والنمط صالحة داخل لغة HTML5.
ومع ذلك، فإننا نقترح إستخدام سمة النمط style attribute.
تمنع أوراق الأنماط style sheets من تغيير حجم الصور.
مثال:

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>


الصور في مجلد آخر

إذا لم تكن الصورة مُحددة، يتوقع المتصفح العثور على الصورة في نفس المجلد مثل صفحة الويب.
ومع ذلك، فمن الشائع تخزين الصور في مجلد فرعي.
يجب تضمين إسم المجلد في وسم src.
مثال:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

الصور في سيرفر أخر

تُخزن بعض مواقع الويب صورها على خوادم الصور.
في الواقع، يُمكنك الوصول إلى الصور من أي عنوان ويب في العالم.
مثال:

<img src="https://www.t3lemonline.com/images/logo.jpg" alt="t3lemonline.com">

الصور المتحركة

تسمح لغة HTML بإضافة الصور المتحركة GIF.
مثال:

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

الصور كروابط

لإستخدام صورة كحلقة وصل، ضع وسم <img> داخل وسم <a>.
مثال:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>


ملاحظة:  يتم إضافة Border 0: لمنع IE9 والإصدارات الأقدم من عرض حد حول الصورة عندما تكون الصورة رابطاً.

الصور العائمة

إستخدم خاصية Float CSS للسماح للصورة بالإنتقال إلى اليمين أو إلى يسار النص.
مثال:

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>


خرائط الصور

تحدد العلامة <map> خريطة الصورة.
خريطة الصورة هي صورة ذات مناطق قابلة للنقر.
في الصورة أدناه، إنقر فوق الكمبيوتر أو الهاتف أو فنجان القهوة.
مثال:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>


ترتبط السمة name للعلامة <map> بسمة usemap للعنصر <img> وتنشئ علاقة بين الصورة والخريطة.
يحتوي عنصر <map> على عدد من العلامات <area> ، التي تحدد المناطق القابلة للنقر في خريطة الصورة.

صورة الخلفية

لإضافة صورة خلفية على عنصر HTML، قم بإستخدام الخاصية background-image.
لإضافة صورة خلفية على صفحة ويب، حدد خاصية صورة الخلفية في عنصر BODY.
مثال:

<body style="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
</body>


لإضافة صورة خلفية في فقرة، قم بتعيين خاصية صورة الخلفية على عنصر P.
مثال:

<body>
<p style="background-image:url('clouds.jpg')">...
</p>
</body>


The <picture> Element

تُقدم لغة HTML5 عنصر <picture> لإضافة المزيد من المرونة عند تحديد موارد الصورة.
يحتوي عنصر <picture> على عدد من عناصر <source>،
كل منها يشير إلى مصادر صور مختلفة.
وبهذه الطريقة، يُمكن للمتصفح إختيار الصورة التي تناسب العرض أو الجهاز الحالي.
 يحتوي كل عنصر <source> على سمات تصف متى تكون صورته هي الأكثر ملاءمة.
سيستخدم المتصفح أول عنصر <source> مع قيم السمات المُتطابقة، ويتجاهل أي عناصر <source> تالية.
مثال:

<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">

</picture>


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

ملخص الفصل الصور داخل لغة HTML

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

جملة الشرط SQL HAVING

ما هي جملة الشرط SQL HAVING ؟


جملة الشرط SQL HAVING تم إضافتها إلي لغة SQL لأنه لا يمكن استخدام الكلمة الأساسية WHERE مع الدالات التجميعية.

بناء جملة SQL HAVING


SELECT column_name(s)FROM table_nameWHERE conditionGROUP BY column_name(s)HAVING conditionORDER BY column_name(s);

قاعدة بيانات تجريبية
CustomerIDCustomerNameContactNameAddressCityPostalCodeCountry
1Alfreds FutterkisteMaria AndersObere Str. 57Berlin12209Germany
2Ana Trujillo Emparedados y heladosAna TrujilloAvda. de la Constitución 2222México D.F.05021Mexico
3Antonio Moreno TaqueríaAntonio MorenoMataderos 2312México D.F.05023Mexico
4Around the HornThomas Hardy120 Hanover Sq.LondonWA1 1DPUK
5Berglunds snabbköpChristina BerglundBerguvsvägen 8LuleåS-958 22Swede


أمثلة علي جملة SQL HAVING

SELECT COUNT(CustomerID), Country
FROM Customers
GROUP BY Country
HAVING COUNT(CustomerID) > 5;
يسرد بيان SQL التالي عدد العملاء في كل بلد. تضمين فقط البلدان التي لديها أكثر من 5 عملاء.
SELECT COUNT(CustomerID), Country
FROM Customers
GROUP BY Country
HAVING COUNT(CustomerID) > 5
ORDER BY COUNT(CustomerID) DESC;
يسرد بيان SQL التالي عدد العملاء في كل بلد، ويتم ترتيبه من الأعلى إلى المنخفض "يشمل فقط البلدان التي لديها أكثر من 5 عملاء".
قاعدة بيانات تجريبية أخري

وإختيار من جدول "الموظفين":




EmployeeIDLastNameFirstNameBirthDatePhotoNotes
1
Davolio
Nancy
1968-12-08
EmpID1.pic
Education includes a BA....
2
Fuller
Andrew
1952-02-19
EmpID2.pic
Andrew received his BTS....
3
Leverling
Janet
1963-08-30
EmpID3.pic
Janet has a BS degree....

أمثلة أخري علي HAVING


SELECT Employees.LastName, COUNT(Orders.OrderID) AS NumberOfOrders
FROM (Orders
INNER JOIN Employees ON Orders.EmployeeID = Employees.EmployeeID)
GROUP BY LastName
HAVING COUNT(Orders.OrderID) > 10;

يسرد بيان SQL التالي الموظفين الذين قاموا بتسجيل أكثر من 10 أوامر.

SELECT Employees.LastName, COUNT(Orders.OrderID) AS NumberOfOrders
FROM Orders
INNER JOIN Employees ON Orders.EmployeeID = Employees.EmployeeID
WHERE LastName = 'Davolio' OR LastName = 'Fuller'
GROUP BY LastName
HAVING COUNT(Orders.OrderID) > 25;



يسرد بيان SQL التالي إذا قام الموظفون "Davolio" أو "Fuller" بتسجيل أكثر من 25 طلباً.

جملة SQL GROUP

ما هو The SQL GROUP BY Statement ؟


The SQL GROUP BY Statement تُستخدم مع دالات التجميع "COUNT  ،MAX  MIN ،SUM،  AVG) لتجميع النتيجة التي تم تعيينها بواسطة عمود واحد أو أكثر.

بناء جملة The SQL GROUP

SELECT column_name(s)FROM table_nameWHERE conditionGROUP BY column_name(s)ORDER BY column_name(s);
قاعدة بيانات تجريبية
CustomerIDCustomerNameContactNameAddressCityPostalCodeCountry
1Alfreds FutterkisteMaria AndersObere Str. 57Berlin12209Germany
2Ana Trujillo Emparedados y heladosAna TrujilloAvda. de la Constitución 2222México D.F.05021Mexico
3Antonio Moreno TaqueríaAntonio MorenoMataderos 2312México D.F.05023Mexico
4Around the HornThomas Hardy120 Hanover Sq.LondonWA1 1DPUK
5Berglunds snabbköpChristina BerglundBerguvsvägen 8LuleåS-958 22Sweden


أمثلة علي جملة The SQL GROUP


SELECT COUNT(CustomerID), Country
FROM Customers
GROUP BY Country;

يسرد بيان SQL التالي عدد العملاء في كل بلد.

SELECT COUNT(CustomerID), Country
FROM Customers
GROUP BY Country
ORDER BY COUNT(CustomerID) DESC;

يسرد بيان SQL التالي عدد العملاء في كل بلد، ويتم ترتيبه من الأعلى إلى المنخفض.
قاعدة بيانات تجريبية


OrderIDCustomerIDEmployeeIDOrderDateShipperID
102489051996-07-043
102498161996-07-051
102503441996-07-082

والإختيار من الجدول "شركات الشحن":

ShipperIDShipperName
1Speedy Express
2United Package
3Federal Shipping


أمثلة علي GROUP BY With JOIN

SELECT Shippers.ShipperName, COUNT(Orders.OrderID) AS NumberOfOrders FROM Orders
LEFT JOIN Shippers ON Orders.ShipperID = Shippers.ShipperID
GROUP BY ShipperName;
يسرد بيان SQL التالي عدد الطلبات المرسلة من قبل كل شاحن.