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

الجداول داخل لغة HTML تعليم HTML

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

Andrew Elia    فبراير 11, 2019    Comment   

عناصر تنسيق النص داخل لغة 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 تعليم HTML

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

Andrew Elia    فبراير 08, 2019    Comment   

ما هي 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 جملة الشرط SQL HAVING ٍَSQL HAVING

جملة الشرط SQL HAVING

Andrew Elia    فبراير 05, 2019    Comment   

ما هي جملة الشرط 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);

قاعدة بيانات تجريبية

CustomerID	CustomerName	ContactName	Address	City	PostalCode	Country
1	Alfreds Futterkiste	Maria Anders	Obere Str. 57	Berlin	12209	Germany
2	Ana Trujillo Emparedados y helados	Ana Trujillo	Avda. de la Constitución 2222	México D.F.	05021	Mexico
3	Antonio Moreno Taquería	Antonio Moreno	Mataderos 2312	México D.F.	05023	Mexico
4	Around the Horn	Thomas Hardy	120 Hanover Sq.	London	WA1 1DP	UK
5	Berglunds snabbköp	Christina Berglund	Berguvsvägen 8	Luleå	S-958 22	Swede

أمثلة علي جملة 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 عملاء".

قاعدة بيانات تجريبية أخري

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

EmployeeID	LastName	FirstName	BirthDate	Photo	Notes
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

بناء جملة GROUP BY تعليم SQL جملة SQL GROUP جملة The SQL GROUP The SQL GROUP

جملة SQL GROUP

Andrew Elia    فبراير 02, 2019    Comment   

ما هو 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);

قاعدة بيانات تجريبية

CustomerID	CustomerName	ContactName	Address	City	PostalCode	Country
1	Alfreds Futterkiste	Maria Anders	Obere Str. 57	Berlin	12209	Germany
2	Ana Trujillo Emparedados y helados	Ana Trujillo	Avda. de la Constitución 2222	México D.F.	05021	Mexico
3	Antonio Moreno Taquería	Antonio Moreno	Mataderos 2312	México D.F.	05023	Mexico
4	Around the Horn	Thomas Hardy	120 Hanover Sq.	London	WA1 1DP	UK
5	Berglunds snabbköp	Christina Berglund	Berguvsvägen 8	Luleå	S-958 22	Sweden

أمثلة علي جملة 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 التالي عدد العملاء في كل بلد، ويتم ترتيبه من الأعلى إلى المنخفض.

قاعدة بيانات تجريبية

OrderID	CustomerID	EmployeeID	OrderDate	ShipperID
10248	90	5	1996-07-04	3
10249	81	6	1996-07-05	1
10250	34	4	1996-07-08	2

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

ShipperID	ShipperName
1	Speedy Express
2	United Package
3	Federal 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 التالي عدد الطلبات المرسلة من قبل كل شاحن.