الدرس 12

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

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

‫نعمل قائمة من العناصر الغير المرتبة والعناصر‬
‫سندرس اآلتي‪:‬‬
‫الوصفية بحيث تظهر على صفحة الويب الخاصة‬
‫• إنشاء قائمة غير مرتبة‬
‫ضا التحكم في بعض خصائصها‬ ‫بنا ونستطيع أي ً‬
‫• تغيير رمز العناصر‬
‫مثل نوع الترتيب وغير ذلك كما سنرى في األمثلة‪.‬‬
‫• وضع قائمة بداخل قائمة‬
‫• القوائم الوصفية‬
‫• وكالعادة كل األوامر اللي هندرسها النهاردة سهل‬
‫جدا تخمنها من اللغة اإلنجليزية بمنتهى السهولة‬
‫إنشاء قائمة من العناصر الغير مرتبة‬
‫• إلضافة قائمة من العناصر الغير مرتبة نقوم بكتابة األمر المباشر بعرض قائمة غير مرتبة‬
‫واختصارا يكتب هكذا >‪ <ul> </ul‬وبداخله يمكننا وضع مجموعة‬ ‫ً‬ ‫‪unordered list‬‬
‫من العناصر كما نشاء باستخدام األمر المباشر لوضع عنصر في قائمة ‪List Item‬‬
‫واختصارا يكتب هكذا >‪ <li> </li‬ويمكنك تغيير شكل الرمز المعبر عن كل عنصر‬ ‫ً‬
‫عن طريق الخاصية ‪ type‬والتي يمكن أن تأخذ قيمة من أربع‪ :‬إما ‪ circle‬أو ‪ disc‬أو‬
‫‪ square‬أو ‪ none‬وكل واحدة فيهم هتدي الشكل اللي هي على اسمه ببساطة جدا‪.‬‬
‫• عند وضع قائمة بداخل قائمة يقوم المتصفح تلقائيًا بتغيير شكل الرمز بين القوائم الداخلية‬
‫والقائمة الكبيرة‬
‫مثال ‪1‬‬
‫ناتج تنفيذ المثال‬
‫إنشاء قائمة وصفية‬
‫• إلضافة قائمة من العناصر وكل عنصر يكون تحته مجموعة من العناصر األخرى التي‬
‫تعتبر وصفًا له نقوم بكتابة األمر المباشر >‪ <dl> </dl‬والذي يرمز ل‬
‫‪ description list‬وهذا هو الوسم األساسي الذي يجب وضعه ليعلم المتصفح أنك‬
‫تريد إنشاء مجموعة من الموصوفات تحت كل موصوف صفته أو عناصر تابعة له‪.‬‬
‫• إلضافة نص بداخل القائمة واعتباره موصوف أو عنصر رئيسي نقوم بكتابة األمر‬
‫>‪ <dt> </dt‬والذي يرمز ل ‪ description term‬أو عنصر موصوف وإلضافة‬
‫مجموعة من العناصر له في صورة وصف نستخدم األمر >‪ <dd> </dd‬والذي‬
‫يعني ‪ description details‬وبس كدا‬
‫لتعريف المتصفح بأنه كود ‪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‬‬
‫‪14‬‬
‫إلدراج نص بالشكل المناسب‬ ‫‪<p> </p> -7‬‬
‫إلدراج نص كما تم إدخاله‬ ‫‪<pre> </pre> -8‬‬
‫للنزول لسطر جديد‬ ‫‪<br> -9‬‬
‫إلضافة مسطرة أفقية‬ ‫‪<hr> -10‬‬
‫لتوسيط ما يوضع بداخلها‬ ‫‪<center> </center> -11‬‬
‫إلضافة تعليق‬ ‫‪ -12‬‬
‫‪<h1> <h1> -13‬‬

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

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

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

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

‫‪17‬‬
‫لوضع العناوين وطرق التواصل والوصول‬ ‫‪<address> </address> -28‬‬
‫لوضع أي نص مميز وجعله يبدو مختلفًا‬ ‫‪<cite> </cite> -29‬‬
‫لتمييز النص المعبر عن أزرار الكيبورد‬ ‫‪<kbd> </kbd> -30‬‬
‫لتمييز النص المعبر عن نواتج تنفيذ البرامج‬ ‫‪<samp> </samp> -31‬‬
‫لتمييز النص المعبر عن أسماء المتغيرات‬ ‫‪<var> </var> -32‬‬
‫لتمييز النص المعبر عن أجزاء الكود والمعادالت الرياضية‬ ‫‪<code> </code> -33‬‬
‫‪18‬‬
‫‪<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‬‬

‫‪20‬‬
‫لدمج خليتين بشكل أفقي‬ ‫‪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‬‬

‫‪21‬‬
‫إلضافة قائمة من العناصر الغير مرتبة‬ ‫‪<ul> </ul> -51‬‬
‫لتحديد شكل الرمز في القوائم الغير مرتبة‬ ‫‪type = “ ” -52‬‬
‫إلضافة قائمة وصفية من العناصر‬ ‫‪<dl> </dl> -53‬‬
‫إلضافة عنصر أساسي موصوف في قائمة وصفية‬ ‫‪<dt> </dt> -54‬‬
‫إلضافة عناصر للوصف في القائمة الوصفية‬ ‫‪<dd> </dd> -55‬‬
‫‪22‬‬
‫‪2022 / 7 / 28‬‬
‫جاء‬
‫ف على الر ِّ‬ ‫ب الخ َْو َ‬ ‫وغ َِّل ِّ‬
‫موالك بال ت َ ِّ‬
‫ناء‬ ‫َ‬ ‫و ِّس ْر ِّل‬
‫لألوزار‬
‫ِّ‬ ‫و َج ِّد ِّد الت ْوبَةَ‬
‫س ْن ِّم ْن َرحم ِّة الغَف ِّ‬
‫ار‬ ‫ال تَيْأ َ َ‬ ‫اقتباس‬
‫ش ُكورا‬ ‫و ُك ْن على آال ِّئ ِّه َ‬
‫صبُورا‬ ‫و ُك ْن على بَالئِّ ِّه َ‬ ‫لإلمام الكبير أحمد الدردير المالكي األزهري‬
‫ضاء والق َد ْر‬ ‫َىء بالقَ ِّ‬ ‫و ُك ُّل ش ٍ‬
‫ع ْنهُ َمفَ ْر‬‫قدور فَما َ‬ ‫و ُك ُّل َم ٍ‬
‫س ِّلما ً َكي ت َ ْسلَما‬ ‫ف ُك ْن لَهُ ُم َ‬
‫ين العُلَما‬ ‫سبي َل النا ِّسك َ‬ ‫واتْبَ ْع َ‬

الدرس 12

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

الدرس 12

Uploaded by

Copyright:

Available Formats

‫‪#12‬‬

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

‫‪Web Design – html Course‬‬

‫الدرس ‪ – 12‬القوائم غير المرتبة والقوائم الوصفية‬

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

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

‫لكتابة جميع الكود الخاص ب ‪ 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‬‬

‫لتحديد شكل الرمز في القوائم الغير مرتبة‬ ‫‪type = “ ” -52‬‬

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

‫إلضافة عنصر أساسي موصوف في قائمة وصفية‬ ‫‪<dt> </dt> -54‬‬

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

You might also like