الجداول داخل لغة 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 التالي عدد الطلبات المرسلة من قبل كل شاحن.

الروابط داخل لغة HTML

ما هي HTML Links ؟


توجد الروابط داخل لغة HTML في جميع صفحات الويب تقريباً. تسمح الروابط للمستخدمين بالإنتقال من صفحة إلى أخري.

Hyperlinks


الروابط داخل لغة HTML هي إرتباطات تشعبية.
يُمكنك النقر فوق إرتباط والإنتقال إلى  صفحة ويب اخري.
عند تحريك الماوس فوق أحد الإرتباطات، يتحول سهم الماوس إلى يد صغيرة.
ملاحظة: لا يجب أن يكون الرابط نصاً. يُمكن أن يكون صورة أو أي عنصر HTML آخر.

HTML Links

في لغة HTML، يتم تحديد الروابط بإستخدام الوسم <a>.
<a href="url">link text</a>
مثال:

<a href="https://www.T3lemOnline.com">Visit our Home Page</a>

تحدد السمة href عنوان الوجهة "https://www.T3lemOnline.com" للرابط.
نص الرابط هو الجزء المرئي، سيؤدي النقر فوق نص الرابط إلى إرسالك إلى العنوان المحدد.
ملاحظة: بدون شرطة مائلة للأمام في نهاية عناوين المجلدات الفرعية، قد تقوم بإنشاء طلبين إلى الخادم.
ستضيف العديد من الخوادم تلقائياً شرطة مائلة للأمام إلى نهاية العنوان، ثم تُنشئ طلباً جديداً.

الروابط المحلية

أستخدم المثال أعلاه عنوان URL مطلق أي عنوان ويب كامل.
يتم تحديد رابط محلي "رابط إلى نفس موقع الويب" بإستخدام مُحدد موقع معلومات نسبي "بدون https: // www ....".
مثال:
<a href="html_images.asp">HTML Images</a>

لون الروابط في لغة HTML

بشكل إفتراضي، سيظهر الرابط كهذا في جميع المتصفحات:
  • يتم وضع خط تحت رابط غير متوقع والأزرق.
  • تم وضع خط أسفل الرابط الذي تمت زيارته والأرجواني.
  • يتم وضع خط أسفل الرابط النشط والأحمر.
  • يمكنك تغيير الألوان الافتراضية بإستخدام لغة CSS.
مثال:
<style>
a:link {color: green;background-color: transparent;text-decoration: none;}
a:visited {color: pink;background-color: transparent;text-decoration: none;}
a:hover {color: red;background-color: transparent;text-decoration: underline;}
a:active {color: yellow;background-color: transparent;text-decoration: underline;}
</style>

السمة target

تُحدد مكان فتح المستند المُرتبط.
يُمكن أن تحتوي سمة الهدف target على إحدى القيم التالية:
_blank: يفتح المستند المرتبط في نافذة أو علامة تبويب جديدة.
_self: فتح المستند المرتبط في نفس النافذة أو علامة التبويب أثناء النقر فوقه "هذا هو الإعداد الافتراضي".

HTML CSS

HTML CSS - Styles


CSS لتقف على أوراق الأنماط المتتالية.
يصف CSS كيفية عرض عناصر HTML على الشاشة أو الورق أو في وسائط أخرى.
يوفر CSS الكثير من العمل.
يُمكنه التحكم في تخطيط صفحات الويب المتعددة دفعة واحدة.
يُمكن إضافة CSS إلى عناصر HTML بثلاث طرق:
مضمنة inline: بإستخدام سمة النمط في عناصر HTML.
داخلي internal: بإستخدام عنصر <style> في القسم <head>.
خارجي external: بإستخدام ملف CSS خارجي.
الطريقة الأكثر شيوعًا لإضافة CSS، هي الحفاظ على الأنماط في ملفات CSS منفصلة.
ومع ذلك، سوف نستخدم هنا التصميم الداخلي والخارجي، لأن هذا يسهل إثباته ويسهل عليك تجربته بنفسك.

التنسيق المضمن inline css

يتم إستخدام CSS مُضمَّنة لتطبيق نمط فريد على عنصر HTML واحد.
وتُستخدم CSS المضمّنة سمة النمط لعنصر HTML.
يقوم هذا المثال بتعيين لون النص الخاص بالعنصر <h1> إلى اللون الأزرق:
مثال:
<h1 style="color:blue;">This is a Blue Heading</h1>

التنسيق الداخلي internal css

يتم إستخدام CSS داخلي لتعريف النمط والتنسيق الخاص بصفحة HTML واحدة.
يتم تعريف CSS داخلي في قسم <head> في صفحة HTML، داخل عنصر <style>.
مثال:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<body/>
</htm/>



التنسيق الخارجي فى CSS

يتم إستخدام الأنماط خارجية لتعريف النمط للعديد من صفحات HTML.
بإستخدام الأنماط خارجية، يُمكنك تغيير مظهر موقع ويب بأكمله، عن طريق تغيير ملف واحد !
لإستخدام ورقة أنماط خارجية، أضف رابطاً إليها في قسم <head> في صفحة HTML.
مثال:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<body/>
<html/>
يُمكن كتابة ورقة أنماط خارجية في أي محرر نصوص.
يجب ألا يحتوي الملف على أي شفرة HTML، ويجب حفظه بإمتداد css.
إليك كيفية ظهور "styles.css":
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}

الخطوط في لغة CSS

تُحدد خاصية CSS Color لون النص المطلوب إستخدامه.
تُحدد الخاصية font-family CSS نوع الخط الذي سيتم إستخدامه.
تًحدد الخاصية  CSS font-size حجم النص المطلوب إستخدامه.
مثال:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue;
font-family: verdana;
font-size: 300%;}
p  {color: red;
font-family: courier;
font-size: 160%;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

الحدود CSS Border

تتعرّف الخاصية padding CSS على المسافة بين النص والحدود.
مثال:
p {border: 1px solid powderblue;padding: 30px;}

الهوامش CSS Margin

تحدد الخاصية CSS Margin الهامش وهي المسافة خارج الحد.
مثال:
p {border: 1px solid powderblue;margin: 50px;}

الوسم The id

لتحديد نمط معين أو ستايل معين لعنصر خاص واحد، أضف سمة معرف id إلى العنصر.
<p id="p01">I am different</p>
ثم حدد نمطاً للعنصر ذو المُعرف المُحدد.
مثال:
#p01 {color: blue;}
ملاحظة: يجب أن يكون معرف العنصر فريداً في الصفحة، لذلك يتم إستخدام محدد الهوية لتحديد عنصر فريد واحد.

الوسم class

لتحديد نمط لأنواع خاصة من العناصر، أضف سمة class إلى العنصر.
<p class="error">I am different</p>
ثم تحديد التشكيل الذي تريد إضافته للعناصر مع فئة معينة.
مثال:
p.error {color: red;}

ملخص الدرس HTML CSS - Style

  • إستخدم سمة نمط HTML Style للتصميم الداخلي.
  • إستخدم عنصر HTML link للإشارة إلى ملف CSS خارجي.
  • إستخدم عنصر  HTML head لتخزين عناصر <style> و<link>.
  • إستخدم خاصية لون CSS Color لألوان النص
  • إستخدم خاصية CSS font-family لتغيير عائلة خطوط النص.
  • إستخدم خاصية حجم الخط CSS font-size لتغيير أحجام النص.
  • إستخدم خاصية CSS border للحدود.
  • إستخدم خاصية padding CSS للمساحة الموجودة داخل الحد.
  • استخدم خاصية CSS margin للمساحة خارج الحدود "الهوامش.



الألوان داخل لغة HTML

ما هي HTML Colors ؟


الألوان داخل لغة HTML يتم تحديدها بإستخدام أسماء ألوان محددة مسبقاً أو قيم RGB و HEX و HSL و RGBA و HSLA.

الألوان داخل لغة HTML

في لغة HTML، يُمكن تحديد لون بإستخدام إسم اللون.
تدعم لغة HTML أكثر من 140 أسماء للألوان.

لون الخلفية فى لغة HTML

يُمكنك تعيين لون الخلفية لعناصر HTML.
مثال:

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

لون النص فى لغة HTML


You can set the color of text:

مثال إستخدام الكود التالي:


<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

لون الحدود فى لغة HTML

يُمكنك ضبط لون الحدود.
مثال:

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

قيم الألوان المختلفة فى لغة HTML

في لغة HTML، يُمكن أيضاً تحديد الألوان بإستخدام قيم RGB وقيم HEX وقيم HSL وقيم RGBA وقيم HSLA:
نفس إسم اللون "الطماطم".
مثال:

<h1 style="background-color:rgb(255, 99, 71);">...</h1><h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1><h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

القيمة RBG

في لغة HTML، يُمكن تحديد لون كقيمة RGB، بإستخدام هذه الصيغة
RGB "أحمر، أخضر، أزرق"
تُحدد كل معلمة "أحمر وأخضر وأزرق" شدة اللون بين 0 و255.
على سبيل المثال، يتم عرض rgb (255 ، 0 ، 0) باللون الأحمر، لأنه يتم تعيين الأحمر إلى أعلى قيمة له (255) ويتم تعيين الآخرين إلى 0.
لعرض اللون الأسود، يجب تعيين كل معلمات اللون على 0، مثل هذا: rgb (0 ، 0 ، 0).
لعرض اللون الأبيض، يجب تعيين كل معلمات اللون على 255، مثل هذا: rgb (255 ، 255 ، 255).

القيمة HEX

في HTML، يُمكن تحديد لون بإستخدام قيمة سداسية عشرية في النموذج:
#rrggbb
حيث rr (red) و gg (green) و bb (blue) هي قيم سداسية عشرية بين 00 و ff (مثل العشري 0-255).
على سبيل المثال، يتم عرض  #ff0000 باللون الأحمر، لأنه يتم تعيين اللون الأحمر إلى أعلى قيمة له (ff) ويتم تعيين الآخرين إلى أدنى قيمة (00).

القيمة HSL

في HTML، يُمكن تحديد لون بإستخدام hue و saturation و lightness )HSL) في النموذج:
hsl "تدرج، تشبع، خفة".
هيو هي درجة على عجلة الألوان من 0 إلى 360. 0 أحمر، و 120 أخضر، و 240 أزرق.
التشبع هو قيمة النسبة المئوية، 0 ٪ يعني الظل من الرمادي، و 100 ٪ هو اللون الكامل.
الخفة هي أيضاً نسبة، 0٪ سوداء، 50٪ ليست خفيفة أو داكنة، 100٪ بيضاء.

التشبع

يُمكن وصف التشبع على أنه شدة اللون.
100 ٪ هو لون نقي، أي ظلال من اللون الرمادي.
50٪ رمادي بنسبة 50٪، ولكن لا يزال بإمكانك رؤية اللون.
0٪ رمادي تماماً، ولم يعد بإمكانك رؤية اللون.

الخفة

يُمكن وصف خفة اللون بأنها مقدار الضوء الذي تريد أن تعطيه للون،
حيث 0٪ يعني عدم وجود ضوء "أسود"، 50٪ يعني 50٪ ضوء "لا داكن ولا فاتح" 100٪ يعني الخفة الكاملة "أبيض".
غالباً ما يتم تحديد درجات الرمادي من خلال ضبط درجة اللون والتشبع على 0، وضبط الإضاءة من 0٪ إلى 100٪ للحصول على ظلال داكنة أو خفيفة.

معلومات عن القيمة RBG

قيم اللون RGBA هي إمتداد لقيم ألوان RGB مع قناة ألفا والتي بدورها تُحدد عتامة اللون.
يتم تحديد قيمة لون RGBA مع:
rgba "أحمر، أخضر، أزرق، ألفا".
المعلمة alpha هي رقم بين 0.0 "شفاف بالكامل" و 1.0 "غير شفاف على الإطلاق".

معلومات عن القيمة HSLA

قيم ألوان HSLA هي إمتداد لقيم ألوان HSL مع قناة ألفا والتي تُحدد عتامة اللون.
يتم تحديد قيمة لون HSLA مع:
hsla "تدرج، تشبع، خفة، ألفا"
المعلمة alpha هي رقم بين 0.0 "شفاف بالكامل" و1.0 "غير شفاف على الإطلاق".

التعليقات داخل لغة HTML

ما هي HTML Comments ؟


هى وسوم التعليقات داخل لغة HTML حيث ان التعليقات يتم إستخدامها من أجل إدراج تعليقات داخل شفرة المصدر الخاصة بكود HTML.

وسم HTML Comment

يُمكنك إضافة التعليقات داخل لغة HTML او إلى مصدر HTML الخاص بك بإستخدام الكود التالي:

<!-- Write your comments here -->

لاحظ أن هناك علامة تعجب (!) في علامة الفتح، ولكن ليس هناك علامة ! في علامة الإغلاق.
ملاحظة مهمة: لا يتم عرض التعليقات من خلال المتصفح، ولكنها يُمكن أن تُساعد في توثيق شفرة مصدر HTML الخاصة بك.
من خلال التعليقات، يُمكنك وضع الإشعارات والتذكيرات الخاصة بك داخل لغة HTML.
مثال:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->

تُعد التعليقات رائعة أيضاً لتصحيح الأخطاء داخل الأكواد المكتوبة بتنسيق HTML، نظراً لأنه يُمكنك التعليق على سطور HTML البرمجية، واحدة تلو الأخرى للبحث عن الأخطاء:
مثال:
<!--
Do not display this at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->

المشغل SQL UNION

ما هو The SQL UNION Operator ؟


The SQL UNION يُستخدم من أجل الجمع بين مجموعة مكونة من إثنين أو أكثر من عبارات SELECT.
  • يجب أن يكون لكل عبارة SELECT داخل UNION نفس عدد الأعمدة.
  • يجب أن تحتوي الأعمدة أيضًا على أنواع بيانات متشابهة.
  • يجب أن تكون الأعمدة في كل عبارة SELECT أيضًا بنفس الترتيب.

بناء جملة SQL UNION


SELECT column_name(s) FROM table1UNION
SELECT column_name(s) FROM table2;

بناء جملة UNION ALL

SELECT column_name(s) FROM table1UNION ALL
SELECT column_name(s) FROM table2;
يحدد عامل التشغيل UNION القيم المميزة فقط بشكل إفتراضي.
للسماح بالقيم المُكررة، قم بإستخدم UNION ALL.
ملاحظة: أسماء الأعمدة في resultset تساوي عادةً أسماء الأعمدة في أول عبارة SELECT في UNION.
قاعدة بيانات تجريبية

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.05023Mexic

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

SupplierIDSupplierNameContactNameAddressCityPostalCodeCountry
1Exotic LiquidCharlotte Cooper49 Gilbert St.LondonEC1 4SDUK
2New Orleans Cajun DelightsShelley BurkeP.O. Box 78934New Orleans70117USA
3Grandma Kelly's HomesteadRegina Murphy707 Oxford Rd.Ann Arbor48104USA

مثال علي SQL UNION


SELECT City FROM Customers
UNION
SELECT City FROM Suppliers
ORDER BY City;

إرجاع جملة SQL التالية المدن "القيم المميزة فقط" من "العملاء" وجدول "الموردين".
ملاحظة: إذا كان لدى بعض العملاء أو الموردين نفس المدينة، فسيتم إدراج كل مدينة مرة واحدة فقط،
نظراً لأن UNION لا يختار سوى القيم المميزة فقط. إستخدم UNION ALL لتحديد القيم المكررة أيضاً.

مثال علي SQL UNION ALL


SELECT City FROM Customers
UNION ALL
SELECT City FROM Suppliers
ORDER BY City;


ترجع عبارة SQL التالية المدن "القيم المكررة أيضاً " من كل من "العملاء" وجدول "الموردين".

مثال علي SQL UNION With WHERE


SELECT City, Country FROM Customers
WHERE Country='Germany'
UNION
SELECT City, Country FROM Suppliers
WHERE Country='Germany'
ORDER BY City;


ترجع العبارة SQL التالية المدن الألمانية "القيم المميزة فقط" من "العملاء" وجدول "الموردين".

مثال علي SQL UNION ALL With WHERE

SELECT City, Country FROM Customers
WHERE Country='Germany'
UNION ALL
SELECT City, Country FROM Suppliers
WHERE Country='Germany'
ORDER BY City;


ترجع عبارة SQL التالية المدن الألمانية "قيم مكررة أيضاً" من "العملاء" وجدول "الموردين".

مثال أخر علي SQL UNION


SELECT 'Customer' As Type, ContactName, City, Country
FROM Customers
UNION
SELECT 'Supplier', ContactName, City, Country
FROM Suppliers;

يسرد بيان SQL التالي جميع العملاء والموردين.

HTML Quotation

ما هي HTML Quotation ؟


العنصر HTML quote يقوم بتحديد الإقتباسات الصغيرة.
تقوم المتصفحات عادةً بإدخال علامات الإقتباس حول العنصر <q>.

مثال:


<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

HTML <blockquote> للإقتباسات
العنصر The HTML blockquote يُحدد القسم الذي يتم إقتباسه من مصدر آخر.
تقوم المتصفحات عادةً بالبدء بعناصر <blockquote>.
مثال:

<p>Here is HTML quotation a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

العنصر HTML abbr

العنصر HTML abbr هو عبارة عن إختصار.
يُمكن أن تُعطي علامات الإختصارات معلومات مفيدة للمتصفحات وأنظمة الترجمة ومحركات البحث المختلفة.

العنصر HTML Contact

يقوم بتحدد معلومات الإتصال مثل "المؤلف أو المالك" من وثيقة أو مقال.
مثال:


<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>


العنصر HTML Cite

يقوم بتحديد عنوان العمل.
تقوم المتصفحات عادة بعرض عناصر <cite> بشكل مائل أي في صورة خط من النوع Italic.
مثال:

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>


العنصر HTML bdo من أجل التجاوز ثنائي الإتجاه

يقوم هذا العنصر بتعريف التجاوز ثتائي الإتجاه.
يتم إستخدام العنصر <bdo> لتجاوز إتجاه النص الحالي:
مثال:

<bdo dir="rtl">This text will be written from right to left</bdo>




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

HTML Text Formatting


يُحدد HTML عناصر خاصة لتعريف النص مع معنى خاص.
يستخدم HTML عناصر مثل <b> و <i> لتنسيق الإخراج، مثل النص الغامق أو المائل.
تم تصميم عناصر التنسيق لعرض أنواع خاصة من النص.
العناصر المستخدمه فى HTML Text Formatting
<b>: نص عريض.
<strong>: نص مهم.
<i>: نص مائل>
<em>: النص المُحدد.
<mark>: النص المُحدد.
<small>: نص صغير.
<del>: النص المحذوف.
<ins>: النص الذي تم إدخاله.
<sub>: نص مُنخفض.
<sup>: نص فائق.

العنصري <b> و <strong>

يُعرف عنصر <b> النص دون وجود أي أهمية إضافية.
مثال:

<b>This text is bold</b>
العنصر <strong> يُستخدم من أجل عنصر يُعرف بالنص القوي، مع أهمية "قوية" الدلالية المُضافة.
مثال:
<strong>This text is strong</strong>

العنصرين <i> و <em>

العنصر <i> يُستخدم من أجل تعريف النص المائل دون أي أهمية إضافية.
مثال:

<i>This text is italic</i>
العنصر يُستخدم من أجل تحديد نص مُعين وتأكيده مع إضافة أهمية إضافية للنص الذي تم تحديده.
مثال:
<em>This text is emphasized</em>

ملاحظة: تعرض المُتصفحات <strong> كـ <b> و <em> كـ <i>.
ومع ذلك، هناك إختلاف في معنى هذه العلامات: <b> و <i> يُعرف بالنص الغامق والمائل،
ولكن <strong> و <em> يعني أن النص "مهم".

العنصر HTML Small

يُستخدم العنصر HTML Small من أجل تعريف أن هذا العنصر صغير.
مثال:


<h2>HTML <small>Small</small> Formatting</h2>

العنصر HRML Mark

العنصر الذي يحدد النص المميز أو الذي يتم وضع خط بأسفله.
مثال:

<h2>HTML <mark>Marked</mark> Formatting</h2>

العنصر del

يُعرف النص المحذوف "الذي تمت إزالته".
مثال:

<p>My favorite color is <del>blue</del> red.</p>

العنصر ins

يقوم بتحدد النص المضاف.
مثال:

<p>My favorite <ins>color</ins> is red.</p>

العنصر sub

يُعرف النص المكتوب.
مثال:
<p>This is <sub>subscripted</sub> text.</p>

SQL Self Join

ما هي SQL Self JOIN ؟


SQL Self JOIN هو إرتباط عادي، ولكن يتم ربط الجدول مع نفسه.

بناء جملة Self JOIN

SELECT column_name(s)FROM table1 T1, table1 T2WHERE condition;

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

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

مثال علي SQL Self JOIN


SELECT A.CustomerName AS CustomerName1, B.CustomerName AS CustomerName2, A.City
FROM Customers A, Customers B
WHERE A.CustomerID <> B.CustomerID
AND A.City = B.City
ORDER BY A.City;


يقوم كود SQL السابق بمطابقة العملاء الذين ينتمون إلي نفس المدينة.

SQL FULL OUTER JOIN

ما هي SQL FULL OUTER JOIN ؟


SQL FULL OUTER JOIN تقوم بإعادة كافة السجلات عندما يكون هناك تطابق في أي من الجدولين الأيسر "الجدول 1" أو اليمين "الجدول 2".
ملاحظة: يُمكن أن يؤدي FULL OUTER JOIN إلى إرجاع مجموعات نتائج كبيرة جداً.

بناء جملة SQL FULL OUTER JOIN

SELECT column_name(s)FROM table1FULL OUTER JOIN table2 ON table1.column_name = table2.column_name;
قاعدة بيانات تجريبية

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

ومجموعة مختارة من جدول "الطلبات":

OrderIDCustomerIDEmployeeIDOrderDateShipperID
10308271996-09-183
103093731996-09-191
103107781996-09-202


مثال علي جملة SQL FULL OUTER JOIN

SELECT Customers.CustomerName, Orders.OrderID
FROM Customers
FULL OUTER JOIN Orders ON Customers.CustomerID=Orders.CustomerID
ORDER BY Customers.CustomerName;

تحدد عبارة SQL التالية جميع العملاء، وجميع الطلبات.
قد يبدو الإختيار من مجموعة النتائج هكذا:


OrderIDCustomerName
Alfreds Futterkiste
10308Ana Trujillo Emparedados y helados
10365Antonio Moreno Taquería
10382

10351


ملاحظة: تقوم الكلمة الأساسية FULL OUTER JOIN بإرجاع كافة الصفوف من الجدول الأيسر (Customers)،
وكافة الصفوف من الجدول الأيمن (Orders). إذا كانت هناك صفوف في "العملاء" لا تحتوي على تطابقات في "الطلبات"،
أو إذا كانت هناك صفوف في "الطلبات" لا تحتوي على تطابقات في "العملاء" ، فسيتم إدراج هذه الصفوف أيضاً.

الأنماط داخل لغة HTML Styles

HTML Styles


يُمكن ضبط  عنصر HTML، بإستخدام سمة Styles.
تحتوي سمة النمط HTML Styles على الصيغة التالية:
<tagname style="property:value;">

الخاصية هي خاصية CSS، القيمة هي قيمة CSS.

لون الخلفية داخل لغة HTML

تحدد خاصية لون الخلفية background لون الخلفية لعنصر HTML.
يعيّن هذا المثال لون الخلفية لصفحة إلى اللون powderblue:

مثال:

<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>


تغيير لون النص داخل لغة HTML

تُحدد خاصية اللون color: لون النص لعنصر HTML.

مثال:


<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

خاصية الخط داخل لغة HTML

تحدد خاصية font-family نوع الخط الذي سيتم إستخدامه لعنصر HTML:

مثال:


<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

حجم الخط داخل لغة HTML

تُحدد خاصية font-size حجم النص لعنصر HTML:
مثال:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

محاذاة النص داخل لغة HTML

تُحدد خاصية محاذاة النص Font Align محاذاة النص الأفقي لعنصر HTML:
مثال:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

ملخص درس HTML Styles

  • إستخدم سمة النمط Styles لتصميم عناصر HTML
  • إستخدم لون الخلفية background color لتغيير لون الخلفية
  • إستخدم اللون color لألوان النص.
  • استخدم عائلة الخط font family لتحديد نوع خطوط النص.
  • إستخدم حجم الخط font size لتحديد أحجام الخطوط داخل النصوص.
  • إستخدم محاذاة النص font align لمحاذاة النص.