الدرس 10

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

‫موضوعات الدرس‬
‫• هندرس النهاردة موضوع مهم جدا وهو كيفية‬
‫إنشاء الجداول باستخدام لغة ‪ Html‬فقط وهو‬
‫سندرس اآلتي‪:‬‬
‫موضوع غاية في األهمية وبسيط جدا ويسهل‬
‫• إنشاء الهيكل العام للجدول‬
‫تخمين كل أوامره من اللغة اإلنجليزية ببساطة‬
‫• إضافة سطر العنواين‬
‫ولكن الزم تفهم إن في الشغل الحقيقي محدش‬
‫• إضافة خاليا البيانات‬
‫بيعمل جداول على صفحة الويب فقط باستخدام‬
‫• وضع عنوان للجدول‬
‫لغة ‪ Html‬ولكن الزم عشان يطلع شكل‬
‫• التعديل على خصائص الجدول‬
‫الجدول كويس وجميل إننا نستخدم لغة ‪CSS‬‬
‫• دمج خانات الجدول‬
‫فاحنا دلوقتي هنتعلم األساس بتاع ‪Html‬‬
‫وقدام هنطور عليه جدا باستخدام ‪CSS‬‬
‫إنشاء جدول له عنوان وعناصر وعناواين‬
‫• إلضافة جدول بشكل عام البد ان تكتب األمر العام إلعالم المتصفح بأنك تريد إنشاء‬
‫جدول وهو أمر >‪ <table> </table‬وبداخلها نكتب كل العناصر التي نريدها وذلك‬
‫عن طريق إنشاء عدد من السطور األفقية ‪ Rows‬وذلك عن طريق األمر >‪<tr> </tr‬‬
‫والذي يرمز لكلمة ‪ table row‬أي صف في الجدول‪ ,‬وبعد إنشاء الصف يمكننا إضافة‬
‫عناصر له وتحديد ما إذا كان هذا العنصر المضاف هو عنوان أم قيمة عادية وذلك عن‬
‫طريق األمر >‪ <th> </th‬والذي يرمز لكلمة ‪ table header‬إذا كانت القيمة عنوانًا‬
‫واألمر >‪ <td></td‬والذي يرمز لكلمة ‪ Table data cell‬إذا كانت القيمة المدخلة‬
‫هي قيمة عادية من بيانات الجدول كما سنرى بالمثال القادم‬
‫• إلضافة عنوان عام للجدول ككل يمكنك استخدام األمر>‪<caption> </caption‬‬

‫ولكن يشترط أن يكون في أول أمر الجدول‬
‫مثال توضيحي هام‬
‫ناتج تنفيذ المثال‬
‫التعديل على خصائص الجدول الثالثة‬
‫• للتعديل على خواص الجدول وإعطائه بعض السمات التي تحسن من‬
‫مظهره لدينا ثالثة خصائص أساسية يمكننا التعديل عليها في رأس األمر‬
‫الخاص بالجدول وهو أمر ‪Table‬وهي خاصية ‪ Border‬إلضافة‬
‫الحدود للجدول والخاليا كلها عن طريق تحديد سمك اإلطار الموضوع‬
‫بال ‪ Pixel‬وكذلك توجد خاصية االرتفاع والعرض ‪Width and‬‬
‫‪ height‬والتي يمكن من خاللها تحديد أبعاد الجدول الذي نقوم بإنشائه إما‬
‫بقيمة بال ‪ Pixel‬أو بنسبة مئوية من شاشة العرض كما سنرى‬
‫• نفس المثال ولكن وضعنا‬
‫الطول والعرض بال ‪Pixel‬‬
‫وليس نسبة مئوية من الشاشة‬
‫دمج خاليا بداخل الجدول‬
‫• يمكنك دمج الخاليا أو األماكن بداخل الجدول إما عن طريق دمج خليتين‬
‫أفقيتين أو أكثر (على حسب رغبتك) وذلك عن طريق الخاصية‬
‫‪( colspan‬والتي تعني تمديد الخاليا) وذلك بإعطائها قيمة تساوي عدد‬
‫الخاليا التي تريد دمجها‪.‬‬
‫• وكذلك يمكنك دمج خليتين رأسيتين أو أكثر عن طريق الخاصية‬

‫‪ rowspan‬وإعطائها قيمة تساوي عدد الخاليا المراد دمجها‪.‬‬
‫لتعريف المتصفح بأنه كود ‪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‬‬
‫‪13‬‬
‫إلدراج نص بالشكل المناسب‬ ‫‪<p> </p> -7‬‬
‫إلدراج نص كما تم إدخاله‬ ‫‪<pre> </pre> -8‬‬
‫للنزول لسطر جديد‬ ‫‪<br> -9‬‬
‫إلضافة مسطرة أفقية‬ ‫‪<hr> -10‬‬
‫لتوسيط ما يوضع بداخلها‬ ‫‪<center> </center> -11‬‬
‫إلضافة تعليق‬ ‫‪ -12‬‬
‫‪<h1> <h1> -13‬‬

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

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

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

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

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

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

الدرس 10

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

الدرس 10

Uploaded by

Copyright:

Available Formats

‫‪#10‬‬

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

‫‪Web Design – html Course‬‬

‫الدرس ‪ – 10‬إنشاء الجداول‬

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

‫• إلضافة عنوان عام للجدول ككل يمكنك استخدام األمر>‪<caption> </caption‬‬

‫• وكذلك يمكنك دمج خليتين رأسيتين أو أكثر عن طريق الخاصية‬

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

You might also like