مدرسة الويب web school

تنسيق القوائم باستخدام css

يمكن اجراء العديد من التنسيقات على القوائم من خلال css وذلك بجعل القوائم الرأسية تظهر أفقيا
وذلك من خلال css

<style>

ul{

display: inline

}

</style>

مثال:

<style>

ul li{

display: inline;

}

</style>

</head>

<body>

<h2>office applications</h2>

<ul>

<li>excel</li>

<li>power point</li>

<li>access</li>

</ul>

ناتج المثال:

وبمزيد من التنسيقات باستخدام css يمكن جعل القوائم تظهر كما يلى:-

<style>

#list{padding:0;}

#list li{

display: inline;

}

#list a {

background-color:black;

color:white;

padding:10px;

text-decoration: none;

border-radius: 6px 6px 6px 6px;

}

#list a:hover{background-color: #dd0}

</style>

</head>

<body >

<h2>office</h2>

<li> <a href="#">excel</li></a>

<li><a href="#"> access</li></a>

</ul>

فيظهر ناتج المثال:

وعند الوقوف بالماوس على الارتباطات تظهر كما يلى:-

القوائم الوصفية description list في لغة html

القوائم الوصفية : هى قائمة من العناصر تصف كل عنصر فيها

وهى تحتوى على الوسوم التالية:

<dl> وسم لتعريف القائمة الوصفية
<dt> وسم لتعريف العنصر الذى سيتم وصفه
<dd> وسم الوصف للعنصر

مثال:

<dl>

<dt>laser</dt>

<dd>fast high quality </dd>

<dt>inkjet</dt>

<dd>slower than laser printers</dd>

</dl>

ناتج المثال

كنا قد تحدثنا سابقا عن القوائم فى لغة Html وتكلمنا عن القوائم المرتبة والقوائم غير المرتبة
ويمكن للقوائم المرتبة أن نبدأها بعدد معين فمثلا لو كنا نريد القوائم المرتبة أن تبدأ بعدد 10 نقوم باستخدام الخاصية start=""

<h2>Microsoft office product</h2>

<li>windows</li>

<li>office</li>

<li>visual basic</li>

</ol>

</ul>

ناتج الصورة:

كما يمكن عكس ترتيب القائمة وذلك من خلال استخدام الخاصية reversed

مثال:

<h2>Microsoft office product</h2>

<li>windows</li>

<li>office</li>

<li>visual basic</li>

</ol>

</ul>

ناتج المثال:

ويمكن دمج اكثر من قائمة بداخل بعضها البعض nested list فلو أردنا دمج قائمة غير مرتبة فى قائمة مرتبة نقوم بالآتى

1- داخل العنصر li نقوم بوضع <ul> ثم نقوم بوضع عناصر القائمة غير المرتبة ثم نغلق القائمة غير المرتبة أولا وبعدها نقوم بإغلاق العنصر Li

مثال:

<h2>Microsoft office product</h2>

<ol>

<li>windows

<ul>

<li>windows 95</li>

<li>windows 98</li>

<li>windows xp</li>

<li>windows 7</li>

</ul>

</li>

<li>office</li>

<li>visual basic</li>

</ol>

ناتج المثال:

كما يمكن دمج قائمة غير مرتبة فى قائمة مرتبة

نقوم أولا بوضع القائمة غير المرتبة

<h2>Microsoft office product</h2>

<ul>

<li>windows

<ol>

<li>windows 95</li>

<li>windows 98</li>

<li>windows xp</li>

<li>windows 7</li>

</ol>

</li>

<li>office</li>

<li>visual basic</li>

</ul>

ناتج المثال:

القوائم غير المرتبة unordered list فى لغة html

القوائم غير المرتبة underscored list

سبق وتحدثنا عن النوع الأول من القوائم فى لغة html وهى القوائم المرتبة والآن نتحدث عن القوائم غير المرتبة

والقوائم غير المرتبة تحتاج إلى وسم <ul>

مثال:

<ul>

<li>excel</li>

<li>power point</li>

<li>access</li>

</ul>

ناتج المثال:

القوائم غير المرتبة unordered list فى لغة html

ويمكن تغيير نمط القوائم إلى أكثر من شكل وذلك من خلال الخاصية :list-style-type وهذه الخاصية للوسم ul وهى الخاصية تستخدم داخل style

نسق الدائرة المجوفة : list-style-type:circle

مثال:

<p> mircorsoft office applications</p>

<li>excel</li>

<li>power point</li>

<li>access</li>

</ul>

ناتج المثال:

نسق المربع style="list-style-type:square

<li>excel</li>

<li>power point</li>

<li>access</li>

</ul>

ناتج المثال:

نسق الدائرة المصمتة وهو النسق الافتراضي style="list-style-type:disc"

مثال:

<p> mircorsoft office applications</p>

<li>excel</li>

<li>power point</li>

<li>access</li>

</ul>

ناتج المثال:

وفى حالة الرغبة فى عدم إظهار أى أشكال بجوار القوائم غير المرتبة نختار none

style="list-style-type:none"

مثال:

<p> mircorsoft office applications</p>

<li>excel</li>

<li>power point</li>

<li>access</li>

</ul>

ناتج المثال:

القوائم المرتبة ordered list فى لغة html

تنقسم القوائم lists إلى قسمين :-
1- قوائم مرتبة ordered list
2- قوائم غير مرتبة unordered list

والعديد من صفحات الانترنت تحتاج إلى نوع على الأقل من هذه القوائم لعرض البيانات الخاصة بها.

أولا: القوائم المرتبة ordered list

وسم إنشاء القوائم المرتبة هو <ol> وهى اختصار لـordered list
وكل عنصر داخل القائمة يسبق بوسم <li> وهو اختصار لكلمة List أي قائمة باللغة الانجليزية.
مثال:

<p> mircorsoft office applications</p>

<ol>

<li>excel</li>

<li>power point</li>

<li>access</li>

</ol>

ناتج المثال:

القوائم المرتبة ordered list فى لغة html

ويمكن تغيير نوع الترقيم فى القوائم المرتبة بحيث يكون الترقيم أحرف هجائية وذلك باستخدام الخاصية "type ="A

مثال:

<li>excel</li>

<li>power point</li>

<li>access</li>

</ol>

ناتج المثال:

ويمكن أيضا تغيير نوع الترقيم إلى أحرف صغيرة small من خلال الخاصية "type="a

مثال:

<li>excel</li>

<li>power point</li>

<li>access</li>

</ol>

ناتج المثال:

كما يمكن تغيير نوع الترقيم إلى أحرف رومانية كبيرة من خلال الخاصية "type = "I

مثال:

<li>excel</li>

<li>power point</li>

<li>access</li>

</ol>

ناتج المثال

ويمكن تغيير نوع الترقيم إلى احرف رومانية صغيرة "type="i

مثال:

<li>excel</li>

<li>power point</li>

<li>access</li>

</ol>

ناتج المثال:

تطبيق الأنماط على الجدوال في لغة Html

لتطبيق نمط معين على الجداول نقوم بإضافة Id للجدول

ثم نقوم بتطبيق التنسيقات على الجدول من خلال style

مثال:

<style>

table,th,td{

border:1px solid red;

border-collapse:collapse;

}

table#t1{

width:50%;

background-color:#f1f1c1;

text-align:right;

}

</style>

</head>

<caption>قائمة أسعار</caption>

<tr>

<th rowspan="2">اسم المنتج</th>

<th colspan="2">السعر</th>

</tr>

<tr>

</tr>

<tr>

<td>لوحة مفاتيح</td>

</tr>

</table>

</body>

ناتج المثال:

كما يمكن تطبيق أكثر من نسق على الجدول الواحد

كما فى المثال التالي: الذى نقوم من خلاله بتطبيق نسق معين على الصفوف الفردية للجدول ونسق أخر للصفوف الزوجية للجدول ونسق ثالث لصف العناويين فى الجدول.

<style>

table,th,td{

border:1px solid red;

border-collapse:collapse;

}

table#t1{

width:50%;

background-color:#f1f1c1;

text-align:right;

}

#t1 tr:nth-child(even)

{

background-color:#eee;

}

#t1 tr:nth-child(odd)

{

background-color:#fff;

}

#t1 th{

color:white;

background-color:black;

}

ناتج المثال

الجداول فى لغة Html الجزء الثالث

border spacing هذه الخاصية هى المسئولة عن المسافة بين خلايا الجدول

يتم التحكم في هذه الخاصية عن طريق style border-spacing: px

مثال:

<style>

table,td,th{

border:1px solid black;

width:50%;

padding:25px;

border-spacing:15px;

}

</style>

</head>

<body >

<table>

<tr>

<th>address</th>

<th>telephone</th>

</tr>

<tr>

<td>khalid</td>

</tr>

<tr>

<td>cairo</td>

</tr>

</table>

دمج خلايا الجدول : يمكن دمج خلايا الجدول مع بعضها سواء كانت هذه الخلايا عبارة عن أعمدة أو صفوف

ولدمج عمودين فى الجدول نستخدم الخاصية colspan
ولدمج صفين فى الجدول نستخدم الخاصية rowspan

مثال:

<table>

<tr>

<th rowspan="2">اسم المنتج</th>

<th colspan="2">السعر</th>

</tr>

<tr>

</tr>

<tr>

<td>لوحة مفاتيح</td>

</tr>

</table>

فيكون الناتج كما فى الصورة :

عنوان الجدول : يمكن إضافة عنوان للجدول من خلال الوسم caption والذى يوضع داخل وسم الجدول table

مثال:

table>

<caption>قائمة أسعار</caption>

<tr>

<th rowspan="2">اسم المنتج</th>

<th colspan="2">السعر</th>

</tr>

<tr>

</tr>

<tr>

<td>لوحة مفاتيح</td>

</tr>

</table>

ناتج المثال:

الجداول فى لغة Html الجزء الثانى

يمكن إنشاء عناوين للجدول من خلال الوسم <th> ويتم تلقائيا ضبط اعدادات العناوين داخل الوسم th بالخاصية السميكة bold

مثال:

<style>

table,td,th{

border:1px solid black;

width:50%

}

</style>

</head>

<body >

<table>

<tr>

<th>address</th>

<th>telephone</th>

</tr>

<tr>

<td>khalid</td>

</tr>

<tr>

<td>cairo</td>

</tr>

</table>

</body>

ناتج المثال:

ملاحظة هامة: تم إضافة th فى css وذلك حتى يتم تطبيق الإعدادات عليها .

cell padding وهى خاصية تحدد المسافة البين محتويات الخلايا والإطار ويمكن ضبط إعداداتها من خلال css

مثال:

<style>

table,td,th{

border:1px solid black;

width:50%;

padding:25px;

}

</style>

</head>

<body >

<table>

<tr>

<th>address</th>

<th>telephone</th>

</tr>

<tr>

<td>khalid</td>

</tr>

<tr>

<td>cairo</td>

</tr>

</table>

</body>

collapsed border بمعنى ضم الإطارات فى إطار واحد فى الجدول من خلال css

مثال:

<style>

table,td,th{

border:1px solid black;

border-collapse:collapse;

width:50%;

padding:25px;

}

</style>

</head>

<body >

<table>

<tr>

<th>address</th>

<th>telephone</th>

</tr>

<tr>

<td>khalid</td>

</tr>

<tr>

<td>cairo</td>

</tr>

</table>

</body>

ناتج المثال:

إنشاء الجداول فى لغة html الجزء الأول

بعض صفحات الويب قد تحتاج إلى إنشاء جدول نضع فيه أنواع معينة من البيانات مثل المنتج وسعره وبلد التصنيع وغير ذلك من البيانات التى يستحسن تنظيمها داخل جدول.
لإنشاء جدول فى لغة html نحتاج إلى وسم الجدول <table> وبعد انتهاء عمل الجدول نقوم بإغلاق الجدول

</table>

والجدول مقسم إلى صفوف rows ولإنشاء داخل الجدول نحتاج إلى وسم <tr>
كل صف يحتوى على عدد من بيانات الجدول <table data <td

مثال:

<table>

<tr>

<td>address</td>

</tr>

<tr>

<td>khalid</td>

</tr>

<tr>

<td>cairo</td>

</tr>

</table>

ناتج المثال

نلاحظ أنه قد تم عمل جدول ولكن بدون إطار ويمكن إضافة الإطار كخاصية للجدول كالتالي:-

وناتج الجدول بعد إضافة الإطار كالتالي:-

يفضل عمل الإطار من خلال css ويمكن التحكم فى عرض الجدول من خلال الخاصية widthوذلك كالآتي:-

<style>

table,td{

border:1px solid black;

width:50%

}

</style>

ناتج المثال كالتالي:-

نلاحظ ان خاصية width عن طريقها يمكن جعل عرض الجدول بنسبة 100 % من عرض الصفحة أو غير ذلك .

خرائط الصور image maps

خرائط الصور: عبارة عن صورة واحدة ولكنها تحوى العديد من الروابط التشعبية كل رابط يؤدى إلى صفحة معينة أو موقع معين.

ولعمل خرائط الصور نستخدم العديد من الوسوم

وسم إدراج الصورة التى سنستخدمها فى إنشاء الخريطة <img>

نقوم بعمل خريطة للصورة التى تم إدراجها باستخدام الوسم <map> وهذا الوسم يأتى عقب الوسم img

<map>

</map>

نقوم باستخدام الخاصية name لكى نخبر المتصفح أننا سوف نستخدم خريطة تحمل الاسم وليكن "egy"

</map>

نشير إلى اسم الخريطة فى وسم الصورة باستخدام الخاصية usemap ونضع علامة # ثم اسم الخريطة

</map>

الأن نحن بحاجة لتحديد الأماكن فى الصورة التى عندما نقف عليها بالماوس سيكون لها روابط تشعبية
نحتاج إلى برنامج لمعالجة الصور وليكن برنامج الرسام paint وهو برنامج مجانى يأتى مع الويندوز
نقوم بالوقوف على هذا البرنامج ونحدد الاحداثيات للمناطق التى نريد ان نكون لها روابط تشعبية

كما فى الشكل التالي:-

نلاحظ انه عندما وقفنا بالمؤشر على القاهرة الموجودة فى خريطة مصر ظهرت احداثيات المكان فى أسفل البرنامج كما هو موضح

ونلاحظ أن اجداثيات المكان تتحدد بالبعد x والبعد Y

ونحتاج إلى وسم area وهو الوسم الذى يقوم بعمل الارتباط على خريطة الصور

مثال:-

<area>

</map>

نحتاج إلى تحديد شكل المنطقة التى تكون الارتباط وهى إما ان تأخذ شكل دائرة أو شكل منتظم (مربع - مستطيل) أو شكل غير منتظم
الخاصية shape هى المسئولة عن تحديد شكل الرابط سواء دائرة circle او شكل منتظم rect أو شكل غير منتظم poly

مثال:

</map>

وسم coords وهو المسئول عن الاحداثيات.
احداثيات الدائرة تكون عبارة عن مركز الدائرة x,y ثم نصف القطر

احداثيات الشكل المنتظم تكون عبارة عن نقطة البدء (x1,y1)ونقطة النهاية(x2,y2)

احداثيات الشكل غير المنتظم وهنا تكون عبارة عن اكثر من نقطتين حسب زوايا الشكل

بالطبع كل شكل سيكون عليه رابط مختلف hyperlink وينتقل بنا إلى صفحة معينة

</map>

الصفحات

تنسيق القوائم باستخدام css

القوائم الوصفية description list في لغة html

القوائم الوصفية : هى قائمة من العناصر تصف كل عنصر فيها

<dl> وسم لتعريف القائمة الوصفية
<dt> وسم لتعريف العنصر الذى سيتم وصفه
<dd> وسم الوصف للعنصر

القوائم المتداخلة فى لغة Html

القوائم غير المرتبة unordered list فى لغة html

القوائم غير المرتبة underscored list

نسق الدائرة المجوفة : list-style-type:circle

نسق المربع style="list-style-type:square

نسق الدائرة المصمتة وهو النسق الافتراضي style="list-style-type:disc"

وفى حالة الرغبة فى عدم إظهار أى أشكال بجوار القوائم غير المرتبة نختار none

القوائم المرتبة ordered list فى لغة html

تنقسم القوائم lists إلى قسمين :-
1- قوائم مرتبة ordered list
2- قوائم غير مرتبة unordered list

أولا: القوائم المرتبة ordered list

ويمكن تغيير نوع الترقيم فى القوائم المرتبة بحيث يكون الترقيم أحرف هجائية وذلك باستخدام الخاصية "type ="A

ويمكن أيضا تغيير نوع الترقيم إلى أحرف صغيرة small من خلال الخاصية "type="a

كما يمكن تغيير نوع الترقيم إلى أحرف رومانية كبيرة من خلال الخاصية "type = "I

ويمكن تغيير نوع الترقيم إلى احرف رومانية صغيرة "type="i

تطبيق الأنماط على الجدوال في لغة Html

لتطبيق نمط معين على الجداول نقوم بإضافة Id للجدول

كما يمكن تطبيق أكثر من نسق على الجدول الواحد

الجداول فى لغة Html الجزء الثالث

border spacing هذه الخاصية هى المسئولة عن المسافة بين خلايا الجدول

دمج خلايا الجدول : يمكن دمج خلايا الجدول مع بعضها سواء كانت هذه الخلايا عبارة عن أعمدة أو صفوف

عنوان الجدول : يمكن إضافة عنوان للجدول من خلال الوسم caption والذى يوضع داخل وسم الجدول table

الجداول فى لغة Html الجزء الثانى

إنشاء الجداول فى لغة html الجزء الأول

خرائط الصور image maps

تم الكشف عن مانع الإعلانات

القوائم الوصفية : هى قائمة من العناصر تصف كل عنصر فيها

<dl> وسم لتعريف القائمة الوصفية<dt> وسم لتعريف العنصر الذى سيتم وصفه<dd> وسم الوصف للعنصر

القوائم غير المرتبة underscored list

نسق الدائرة المجوفة : list-style-type:circle

نسق المربع style="list-style-type:square

نسق الدائرة المصمتة وهو النسق الافتراضي style="list-style-type:disc"

وفى حالة الرغبة فى عدم إظهار أى أشكال بجوار القوائم غير المرتبة نختار none

تنقسم القوائم lists إلى قسمين :-1- قوائم مرتبة ordered list2- قوائم غير مرتبة unordered list

أولا: القوائم المرتبة ordered list

ويمكن تغيير نوع الترقيم فى القوائم المرتبة بحيث يكون الترقيم أحرف هجائية وذلك باستخدام الخاصية "type ="A

ويمكن أيضا تغيير نوع الترقيم إلى أحرف صغيرة small من خلال الخاصية "type="a

كما يمكن تغيير نوع الترقيم إلى أحرف رومانية كبيرة من خلال الخاصية "type = "I

ويمكن تغيير نوع الترقيم إلى احرف رومانية صغيرة "type="i

لتطبيق نمط معين على الجداول نقوم بإضافة Id للجدول

كما يمكن تطبيق أكثر من نسق على الجدول الواحد

border spacing هذه الخاصية هى المسئولة عن المسافة بين خلايا الجدول

دمج خلايا الجدول : يمكن دمج خلايا الجدول مع بعضها سواء كانت هذه الخلايا عبارة عن أعمدة أو صفوف

عنوان الجدول : يمكن إضافة عنوان للجدول من خلال الوسم caption والذى يوضع داخل وسم الجدول table

تم الكشف عن مانع الإعلانات

<dl> وسم لتعريف القائمة الوصفية
<dt> وسم لتعريف العنصر الذى سيتم وصفه
<dd> وسم الوصف للعنصر

تنقسم القوائم lists إلى قسمين :-
1- قوائم مرتبة ordered list
2- قوائم غير مرتبة unordered list