الدرس 11

‫‪#11‬‬
‫كورس تصميم الويب – لغة الترميز ‪html‬‬
‫‪Web Design – html Course‬‬
‫الدرس ‪ – 11‬القوائم المرتبة‬
‫شرح وإعداد ‪ /‬محمد ماهر عبد السالم‬

‫موضوعات الدرس‬
‫• هندرس النهاردة موضوع مهم جدا وهو ازاي‬

‫نعمل قائمة من العناصر المرتبة بحيث تظهر‬
‫سندرس اآلتي‪:‬‬ ‫ضا‬
‫على صفحة الويب الخاصة بنا ونستطيع أي ً‬
‫• إنشاء قائمة من العناصر المرتبة‬ ‫التحكم في بعض خصائصها مثل نوع الترتيب‬
‫• تغيير نوع الترتيب‬ ‫وبدايته وغير ذلك كما سنرى في األمثلة‪.‬‬
‫• تعديل مكان البداية‬
‫• تغيير ترتيب قيمة معينة‬ ‫• وكالعادة كل األوامر اللي هندرسها النهاردة‬
‫سهل جدا تخمنها من اللغة اإلنجليزية بمنتهى‬
‫السهولة‬
‫إنشاء قائمة من العناصر المرتبة‬
‫• إلضافة قائمة من العناصر المرتبة نقوم بكتابة األمر المباشر بعرض قائمة مرتبة‬
‫واختصارا يكتب هكذا >‪ <ol> </ol‬وبداخله يمكننا وضع مجموعة من‬ ‫ً‬ ‫‪ordered list‬‬
‫واختصارا‬
‫ً‬ ‫العناصر كما نشاء باستخدام األمر المباشر لوضع عنصر في قائمة ‪List Item‬‬
‫يكتب هكذا >‪ <li> </li‬ويمكنك التعديل على القائمة بثالث خصائص رئيسية وهي‬
‫خاصية ‪ Type‬التي تحدد نوع الترتيب هل يكون باألرقام (الوضع االفتراضي) وذلك‬
‫بإعطائها قيمة ”‪ “1‬أم بالحروف الهجائية الكبيرة ‪ Capital Letters‬وذلك بإعطائها قيمة‬
‫”‪ “A‬أم بالحروف الهجائية الصغير ‪ Small Letters‬وذلك بإعطائها قيمة ”‪ “a‬أم‬
‫بالحروف الرومانية الكبيرة والصغيرة وذلك عن طريق إعطائها قيمة ”‪ “I‬أو ”‪ “i‬ويمكنك‬
‫كذلك تحديد مكان البدء في الترتيب من خالل الخاصية ‪ start‬وإعطائها قيمة تعبر عن‬
‫مكان البداية وكذلك يمكنك تغيير ترتيب العناصر بداية من عنصر معين عن طريق تغيير‬
‫الخاصية ‪ value‬وإعطائها قيمة الترتيب الذي تريد البداية من عنده‬
‫مثال ‪1‬‬
‫ناتج تنفيذ المثال‬
‫مثال ‪2‬‬
‫مثال توضيحي هام‬
‫لتعريف المتصفح بأنه كود ‪html‬‬ ‫‪<!DOCTYPE html> -1‬‬
‫لكتابة جميع الكود الخاص ب ‪ html‬بداخله‬ ‫‪<html> </html> -2‬‬
‫يكتب كل ما ال يراه المستخدم في هذا القسم‬ ‫‪<head> </head> -3‬‬
‫يكتب كل ما يراه المستخدم في هذا القسم‬ ‫‪<body> </body> -4‬‬
‫لكتابة عنوان صفحة الويب باألعلى‬ ‫‪<title> </title> -5‬‬
‫لوضع ‪ icon‬لصفحة الويب‬

‫>” ‪<link rel = “icon” type = “image / x-icon” href = “ ref‬‬ ‫‪<link> -6‬‬
‫‪15‬‬
‫إلدراج نص بالشكل المناسب‬ ‫‪<p> </p> -7‬‬
‫إلدراج نص كما تم إدخاله‬ ‫‪<pre> </pre> -8‬‬
‫للنزول لسطر جديد‬ ‫‪<br> -9‬‬
‫إلضافة مسطرة أفقية‬ ‫‪<hr> -10‬‬
‫لتوسيط ما يوضع بداخلها‬ ‫‪<center> </center> -11‬‬
‫إلضافة تعليق‬ ‫‪ -12‬‬
‫‪<h1> <h1> -13‬‬

‫لجعل النص له حجم أكبر (عنوان) ويوجد ست أحجام من ‪6 - 1‬‬
‫‪16‬‬
‫لجعل النص سمي ًكا‬ ‫‪<b> </b> -14‬‬
‫لجعل النص سمي ًكا‬ ‫‪<strong> </ strong> -15‬‬
‫لجعل النص ً‬
‫مائال‬ ‫‪<i> </i> -16‬‬
‫لجعل النص ً‬
‫مائال مع تغيير نبرة الصوت (للمكفوفين)‬ ‫‪<em> </em> -17‬‬
‫لجعل النص يبدو محذوفًا‬ ‫‪<del> </del> -18‬‬
‫لجعل النص يبدو محذوفًا بوضع خط أفقي في وسطه‬ ‫‪<s> </s> -19‬‬
‫‪<u> <u> -20‬‬

‫لوضع خط تحت النص‬
‫‪17‬‬
‫لوضع خط تحت الكلمة الصحيحة بدل الكلمة المحذوفة‬ ‫‪<ins> </ins> -21‬‬
‫لجعل خلفية النص مميزة باللون األصفر‬ ‫‪<mark> </mark> -22‬‬
‫لجعل النص مرتفع ً‬

‫قليال (للرياضيات غالبًا)‬ ‫‪<sup> </sup> -23‬‬
‫لجعل النص منخفض ً‬

‫قليال (للرياضيات غالبًا)‬ ‫‪<sub> </sub> -24‬‬
‫لوضع نص مقتبس من موقع ويب آخر (بداخل الخاصية ‪)cite‬‬ ‫‪<blockquote> </blockquote> -25‬‬
‫لوضع نص بين عالمتي تنصيص‬ ‫‪<q> </q> -26‬‬
‫لوضع توضيح لنص مختصر‬ ‫‪<abbr> </abbr> -27‬‬

‫‪18‬‬
‫لوضع العناوين وطرق التواصل والوصول‬ ‫‪<address> </address> -28‬‬
‫لوضع أي نص مميز وجعله يبدو مختلفًا‬ ‫‪<cite> </cite> -29‬‬
‫لتمييز النص المعبر عن أزرار الكيبورد‬ ‫‪<kbd> </kbd> -30‬‬
‫لتمييز النص المعبر عن نواتج تنفيذ البرامج‬ ‫‪<samp> </samp> -31‬‬
‫لتمييز النص المعبر عن أسماء المتغيرات‬ ‫‪<var> </var> -32‬‬
‫لتمييز النص المعبر عن أجزاء الكود والمعادالت الرياضية‬ ‫‪<code> </code> -33‬‬
‫‪19‬‬
‫‪<a href = “url or #Reference or # ” target = “ _blank or _self ” title = “-----”> </a> -34‬‬
‫إلضافة رابط على شكل نص وإعطائه كالم يظهر عند الوقوف بالمؤشر عليه وكذلك تحديد مكان فتح الرابط‬
‫‪<button onclick = “document.location = ‘ url ’ ”> Text </button> -35‬‬
‫إلضافة رابط على شكل زر‬
‫‪<a> <img src = “image url” > </a> -36‬‬
‫إلضافة رابط على شكل صورة‬

‫إلنشاء جدول في صفحة الويب‬ ‫‪<table> </table> -37‬‬
‫لوضع عنوان للجدول‬ ‫‪<caption> </caption> -38‬‬
‫إلضافة صف أفقي للجدول‬ ‫‪<tr> </tr> -39‬‬
‫إلضافة خلية في الجدول مع اعتبارها عنوانًا‬ ‫‪<th> </th> -40‬‬
‫إلضافة خلية عادية في الجدول‬ ‫‪<td> </td> -41‬‬
‫لوضع إطار للجدول‬ ‫‪Border = “ in Pixel ” -42‬‬
‫لتحديد عرض وارتفاع الجدول بشكل يدوي‬ ‫‪Width = “ ” height= “ ” -43‬‬

‫‪21‬‬
‫لدمج خليتين بشكل أفقي‬ ‫‪Colspan = “ ” -44‬‬
‫لدمج خليتين بشكل رأسي‬ ‫‪rowspan= “ ” -45‬‬
‫إلضافة قائمة من العناصر المرتبة‬ ‫‪<ol> </ol> -46‬‬
‫إلضافة عنصر في القائمة‬ ‫‪<li> </li> -47‬‬
‫لتحديد نوع الترتيب في القائمة‬ ‫‪type = “ 1 or A or a or I or i” -48‬‬
‫لتحديد مكان البداية في الترتيب في القوائم‬ ‫‪start = “ ” -49‬‬
‫لتغيير ترتيب القائمة بداية من مكان محدد‬ ‫‪value = “ ” -50‬‬

‫‪22‬‬
‫‪2022 / 7 / 28‬‬
‫جاء‬
‫ف على الر ِّ‬ ‫ب الخ َْو َ‬ ‫وغ َِّل ِّ‬
‫موالك بال ت َ ِّ‬
‫ناء‬ ‫َ‬ ‫و ِّس ْر ِّل‬
‫لألوزار‬
‫ِّ‬ ‫و َج ِّد ِّد الت ْوبَةَ‬
‫س ْن ِّم ْن َرحم ِّة الغَف ِّ‬
‫ار‬ ‫ال تَيْأ َ َ‬ ‫اقتباس‬
‫ش ُكورا‬ ‫و ُك ْن على آال ِّئ ِّه َ‬
‫صبُورا‬ ‫و ُك ْن على بَالئِّ ِّه َ‬ ‫لإلمام الكبير أحمد الدردير المالكي األزهري‬
‫ضاء والق َد ْر‬ ‫َىء بالقَ ِّ‬ ‫و ُك ُّل ش ٍ‬
‫ع ْنهُ َمفَ ْر‬‫قدور فَما َ‬ ‫و ُك ُّل َم ٍ‬
‫س ِّلما ً َكي ت َ ْسلَما‬ ‫ف ُك ْن لَهُ ُم َ‬
‫ين العُلَما‬ ‫سبي َل النا ِّسك َ‬ ‫واتْبَ ْع َ‬

الدرس 11

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

الدرس 11

Uploaded by

Copyright:

Available Formats

‫‪#11‬‬

‫كورس تصميم الويب – لغة الترميز ‪html‬‬

‫‪Web Design – html Course‬‬

‫الدرس ‪ – 11‬القوائم المرتبة‬

‫شرح وإعداد ‪ /‬محمد ماهر عبد السالم‬

‫• هندرس النهاردة موضوع مهم جدا وهو ازاي‬

‫لكتابة جميع الكود الخاص ب ‪ html‬بداخله‬ ‫‪<html> </html> -2‬‬

‫يكتب كل ما ال يراه المستخدم في هذا القسم‬ ‫‪<head> </head> -3‬‬

‫يكتب كل ما يراه المستخدم في هذا القسم‬ ‫‪<body> </body> -4‬‬

‫لكتابة عنوان صفحة الويب باألعلى‬ ‫‪<title> </title> -5‬‬

‫لوضع ‪ icon‬لصفحة الويب‬

‫إلدراج نص كما تم إدخاله‬ ‫‪<pre> </pre> -8‬‬

‫للنزول لسطر جديد‬ ‫‪<br> -9‬‬

‫إلضافة مسطرة أفقية‬ ‫‪<hr> -10‬‬

‫لتوسيط ما يوضع بداخلها‬ ‫‪<center> </center> -11‬‬

‫إلضافة تعليق‬ ‫‪ -12‬‬

‫‪<h1> <h1> -13‬‬

‫لجعل النص سمي ًكا‬ ‫‪<strong> </ strong> -15‬‬

‫لجعل النص يبدو محذوفًا‬ ‫‪<del> </del> -18‬‬

‫‪<u> <u> -20‬‬

‫لجعل خلفية النص مميزة باللون األصفر‬ ‫‪<mark> </mark> -22‬‬

‫لجعل النص مرتفع ً‬

‫لجعل النص منخفض ً‬

‫لوضع نص بين عالمتي تنصيص‬ ‫‪<q> </q> -26‬‬

‫لوضع توضيح لنص مختصر‬ ‫‪<abbr> </abbr> -27‬‬

‫لوضع أي نص مميز وجعله يبدو مختلفًا‬ ‫‪<cite> </cite> -29‬‬

‫لتمييز النص المعبر عن أزرار الكيبورد‬ ‫‪<kbd> </kbd> -30‬‬

‫لتمييز النص المعبر عن نواتج تنفيذ البرامج‬ ‫‪<samp> </samp> -31‬‬

‫لتمييز النص المعبر عن أسماء المتغيرات‬ ‫‪<var> </var> -32‬‬

‫‪<button onclick = “document.location = ‘ url ’ ”> Text </button> -35‬‬

‫إلضافة رابط على شكل زر‬

‫‪<a> <img src = “image url” > </a> -36‬‬

‫إلضافة رابط على شكل صورة‬

‫لوضع عنوان للجدول‬ ‫‪<caption> </caption> -38‬‬

‫إلضافة صف أفقي للجدول‬ ‫‪<tr> </tr> -39‬‬

‫إلضافة خلية في الجدول مع اعتبارها عنوانًا‬ ‫‪<th> </th> -40‬‬

‫إلضافة خلية عادية في الجدول‬ ‫‪<td> </td> -41‬‬

‫لوضع إطار للجدول‬ ‫‪Border = “ in Pixel ” -42‬‬

‫لتحديد عرض وارتفاع الجدول بشكل يدوي‬ ‫‪Width = “ ” height= “ ” -43‬‬

‫لدمج خليتين بشكل رأسي‬ ‫‪rowspan= “ ” -45‬‬

‫إلضافة قائمة من العناصر المرتبة‬ ‫‪<ol> </ol> -46‬‬

‫إلضافة عنصر في القائمة‬ ‫‪<li> </li> -47‬‬

‫لتحديد نوع الترتيب في القائمة‬ ‫‪type = “ 1 or A or a or I or i” -48‬‬

‫لتحديد مكان البداية في الترتيب في القوائم‬ ‫‪start = “ ” -49‬‬

‫لتغيير ترتيب القائمة بداية من مكان محدد‬ ‫‪value = “ ” -50‬‬

You might also like