‫نظرة على مفهوم ‪HTML‬‬

‫ما هي لغة ‪HTML‬؟‬

‫لغة ‪ HTML‬هي طريقة لكتابة وهيكلة صفحات الويب‪ ،‬والتعتبر ‪ HTML‬لغة برمجية بالمعنى الفعلي بل هي لغة وصفيّة‪ ،‬أي أنها تستخدم‬
‫لوصف الصفحة وتوزيع وترتيب محتواها من نصوص وروابط وصور ومقاطع فيديو وما إلى ذلك‪ ،‬وهي المكون الرئيسي ألي موقع ويب‪،‬‬
‫تستخدم ‪ HTML‬مايسمى بالوسوم أو ‪ Tags‬وهي عبارة عن رموز لكل منها مهمة‪ G‬خاصة يقوم بها‪ ،‬فمنها ما يقوم بعرض العنوان ومنها ما يقوم‬
‫بعرض النصوص ومنها ما يقوم بعرض الصور أو الروابط أو مقاطع الفيديو وهكذا‪ G،‬والمتصفح يفهم هذه الرموز‪ G‬أو الوسوم ويعرضها بالشكل‬
‫المحدد والمطلوب‪.‬‬

‫األجزاء الرئيسية للوسم‬

‫وسم الفتح أو البداية‪:‬‬ ‫‪‬‬

‫يتكون من عالمتي أصغر من وأكبر من وبداخلهما اسم الوسم‪ ،>tag< ‬ويحدد وسم الفتح بداية العنصر‪ ،‬أو بداية التأثير الذي يُضيفه‪.‬‬

‫وسم اإلغالق أو النهاية‪:‬‬ ‫‪‬‬

‫يتكون من عالمتي أصغر من وأكبر من وبداخلهما عالمة مائلة‪ / ‬ثم اسم الوسم‪ .>/tag< ‬ويحدد وسم اإلغالق نهاية الوسم‪.‬‬

‫المحتوى‪:‬‬ ‫‪‬‬

‫هو عبارة عن النص أو المحتوى الذي نريد عرضه أو إضافته للوسم‪ ،‬وتتم كتابته بين وسم الفتح ووسم اإلغالق‪ >tag< ‬المحتوى‪.>/tag< ‬‬

‫العنصر‪:‬‬ ‫‪‬‬

‫هو الكيان ككل ويشمل وسم الفتح‪ ،‬ووسم اإلغالق‪ ،‬والمحتوى‪.‬‬

‫أنواع الوسوم‬

‫وسم عرضي‪:‬‬ ‫‪‬‬

‫هو عبارة عن وسم يتم عرض محتواه مباشرة على صفحة الويب‪.‬‬

‫وسم وصفي‪:‬‬ ‫‪‬‬

‫هو عبارة عن وسم يصف مابداخله من نصوص‪.‬‬

 ‫النصوص*******‬ ‫*******مقدمة في‬

‫مقدمة في كتابة العناوين باستخدام ‪ H1‬إلى ‪H6‬‬

‫للعناوين أهمية كبيرة في الصفحة سواء لفهم محتوى الصفحة أو تنظيم هيكلة الصفحة‪ ،‬في هذا الدرس سنتعرف على العناوين وأهميتها وعلى‬
‫األشياء التي يجب مراعاتها عند كتابة العناوين‪ ،‬وتستخدم الوسوم ‪ h1‬إلى ‪ h6‬لتحديد عناوين ‪ HTML‬تنازليًا من األكثر أهمية إلى األقل أهمية‬
‫وهكذا‪.‬‬

‫أهمية العناوين‬

‫تأثير العناوين على المستخدم‬

‫العناوين من أهم عناصر الصفحة وهي أول ما تقع عليه العين ألن لها تأثير كبير على طريقة تصفح المستخدم للصفحة حيث يعتمد المستخدم‬
‫اعتمادًا كبي ًر ا على العناوين أثناء تصفحه‪ ،‬فمن خاللها يتم فهم محتوى الصفحة وتحديد الجزء المناسب والمراد قراءته‪.‬‬

‫أهمية العناوين لهيكلة الصفحة‬

‫من المعتاد أن تكون العناوين أول العناصر التي يُبدأ فيها عند كتابة الصفحة ألن لها تأثير مباشر على هيكلة الصفحة فمن خاللها يتم فهم وتقسيم‬
‫الصفحة‪ ،‬كما أن العناوين تلعب دو ًرا أساسيًا في التأثير على ‪ search engines‬لفهم محتوى الصفحة فهي كأهمية المعالم في الخريطة والفهرس‬
‫في الكتاب سواء للمستخدم أو ‪.search engines‬‬

‫أمور يجب مراعاتها عند كتابة العناوين‬

‫الحجم‬

‫تختلف أهمية العنوان باختالف حجمه حيث أنه كلما ازداد حجمه ازدادت أهميته‪ ،‬بحيث يكون العنوان الرئيسي هو األكبر ومن ثم العنوان الفرعي‬
‫التابع للرئيسي وهكذا‪ G،‬بحيث اليكون العنوان الفرعي أكبر من العنوان الرئيسي الذي هو في داخله‪.‬‬

‫المعنى‬

‫العناوين تلعب دو ًرا أساسيًا لجذب القارئ ألنها هي المسؤولة عن وصف المحتوى فلذلك يجب أن تكون ذات معنى وسهلة الفهم بحيث تصف‬
‫المحتوى وصفًا دقيقًا وكافيًا‪.‬‬

‫التسلسل‬

‫تسلسل العناوين يسهل على المستخدم فهم الصفحة بحيث تكون متسلسلة بشكل منطقي باستخدام الترتيب والحجم المناسبين‪.‬‬

‫العناوين في ‪html‬‬

‫هناك ستة أحجام للعنوان في ‪ html‬بداية من ‪ h1‬األكبر وينتهي عند ‪ h6‬وهو األصغر ‪ .‬مالحظة‪ :‬التكتب أكثر من ‪ h1‬في الصفحة‪ .‬في األسطر‬
‫التالية سيتم تغير المثال بحيث يراعي األشياء التي يجب مراعاتها عند كتابة العناوين حيث ‪ h1‬للعنوان الرئيسي و ‪ h2‬للعنوان الفرعي التابع‬
‫للعنوان الرئيسي وهكذا‪.‬‬

‫انتباه! عندما تريد تكبير الخط ال تستخدم الـ ‪ tags‬المخصصة للعناوين بل استخدم ‪.b tags‬‬
 ‫الخاتمة‪ :‬تعرفنا في هذا الدرس على أهمية العناوين وعلى األمور التي يجب مراعاتها عند كتابتها‪ ،‬كما تعرفنا على كيفية كتابة العناوين‬
‫واستخدامها في صفحة الويب‪.‬‬

‫مقدمة في إنشاء فقرة نصية باستخدام ‪P‬‬

‫يستخدم الوسم‪  >p< ‬لتمثيل فقرة نصية‪ ،‬فهو يقوم بفصل ما يكتب داخله عما قبله وبعده‪ ،‬ويتم ذلك بتنسيق وترتيب معين‪.‬‬

‫طريقة استخدام‪>p< ‬‬

‫تتم إضافة النص المراد جعله فقرة نصية مستقلة بداخل الوسم‪ >p< ‬على الشكل الموضح في المثال التالي‪:‬‬

‫<‪>p>HTML stands for Hypertext Markup Language</p‬‬

‫الحظ كيف قمنا بكتابة النص داخل الوسم‬

‫واآلن أصبح هذا النص عبارة عن فقرة نصية صغيرة مفصولة عما بعدها وما قبلها‪ ،‬وسيتم عرض هذا النص في المتصفح على النحو التالي‪:‬‬
‫‪HTML stands for Hypertext Markup Language‬‬

‫لو قمنا بكتابة هذا النص في صفحة تحتوي على نصوص أخرى فستالحظ أن هذا النص يضيف مسافة متساوية بينه وبين جميع النصوص القريبه‬
‫منه من كل الجهات تعرفنا في هذا الدرس على طريقة إنشاء فقرة نصية في صفحة الويب الخاصة بنا باستخدام الوسم‬

‫مقدمة في مفهوم التعليقات‬

‫التعليقات هي عبارة عن مالحظات تتم كتابتها في المستند ويقوم المتصفح بتجاهلها وعدم عرضها‪ ،‬نقوم عادة بكتابة التعليقات في الملف لشرح‬
‫نقطة معينة أو لوضع مالحظة للتذكير أو التوضيح لفريق العمل‪ G،‬وهكذا‪.‬‬

‫نسيق النصوص | ‪Formatting‬‬

‫مقدمة في عرض النص بخط عريض باستخدام ‪ B‬و ‪Strong‬‬

‫يستخدم كل من الوسم‪ >b< ‬والوسم‪ >strong< ‬لعرض النص بخط عريض‪ ،‬ولكل منهما داللة مختلفة‪ ،‬وهذا ماسنتعرف عليه في النقاط‬
‫التالية‪.‬‬

‫طريقة استخدام الوسم‪>b< ‬‬

‫يستخدم الوسوم‪  >b< ‬لعرض النص المكتوب داخله بخط عريض‪ ،‬وهذا الوسم اليؤثر على أهمية أو أولوية النص في الملف‪ ،‬أي أن دوره تنسيقي‬
‫فقط‪ .‬وتتم كتابة النص أو الكلمة المراد أن تعرض بخط عريض داخل الوسم‪ >b< ‬وبالشكل الموضح في المثال التالي‪:‬‬

‫‪>p>Welcome‬‬ ‫<‪to <b>HTML</b></p‬‬

‫استخدمنا الوسم‪ >b< ‬هنا ألننا نريد عرض كلمة ‪ HTML‬بخط عريض أي تغيير تنسيقها فقط‪ ،‬فهي التشكل معنى مهم‪ G‬هنا واليوجد معنى نريد‬
‫التأكيد عليه‪.‬‬
 ‫طريقة استخدام الوسم<‪.>strong‬‬

‫يقوم هذا الوسم بعرض النص المكتوب داخله بخط عريض‪ ،‬ويدل استخدامه على أن لهذا النص أهمية وتأثير‪ ،‬فلنفترض أننا أردنا عرض رسالة‬
‫تذكير بموعد على صفحتنا‪ ،‬فيمكننا كتابة الرسالة بالشكل التالي‪:‬‬

‫‪>p>Your‬‬ ‫<‪appointment is on <strong>Monday</strong></p‬‬

‫الحظ كيف تمت كتابة الكلمة ‪ Monday‬داخل الوسم‪ >strong< ‬وذلك ألنها أهم كلمة في الجملة وهي يوم الموعد الذي نريد تذكير المستخدم‬
‫به‪،‬‬

‫ظاهريًا اليوجد أي اختالف في العرض بين الوسم‪ >b< ‬والوسم‪  >strong< ‬لكن لكل منهما معناه واستخدامه الخاص‪ ،‬للتنسيق فقط نستخدم‬
‫الوسم‪ >b< ‬وللتنسيق والتأكيد نستخدم الوسم‪.>strong< ‬‬

‫مقدمة في عرض النص بخط مائل باستخدام ‪ I‬و ‪Em‬‬

‫يستخدم كل من الوسم‪ >i< ‬والوسم‪  >em< ‬لعرض النص بشكل مائل‪ ،‬ولكل منهما معنى واستخدام خاص‪ ،‬وهذا ماسنتعرف عليه في النقاط‬
‫التالية‪.‬‬

‫طريقة استخدام الوسم‪>i< ‬‬

‫تتم كتابة النص أو الكلمة المراد أن تعرض بشكل مائل داخل الوسم‪ ،>i< ‬كما هو موضح في المثال التالي‪:‬‬

‫‪>p>Welcome‬‬ ‫<‪to <i>HTML</i></p‬‬

‫استخدمنا الوسم‪ >i< ‬هنا ألننا نريد عرض كلمة ‪ HTML‬بخط مائل أي أننا نريد تغيير تنسيقها فقط‪.‬‬

‫طريقة استخدام الوسم‪>em< ‬‬

‫يقوم هذا الوسم بكتابة النص المكتوب داخله بشكل مائل‪ ،‬ويدل استخدامه على أن لهذا النص أهمية والخط المائل هنا لغرض التأكيد أو التشديد‬
‫على الكالم‪ .‬يستخدم الوسم‪ >i< ‬للتنسيق فقط بينما يستخدم الوسم‪ >em< ‬للتأكيد والتشديد على أهمية النص‪.‬‬

‫تعرفنا في هذا الدرس على الوسم‪ >i< ‬والوسم‪ >em< ‬وعلى طريقة استخدامهما لتغيير شكل خط النص إلى خط مائل‪ ،‬كما تعرفنا على الفرق‬
‫بينهما ومتى ولماذا يستخدم كل نوع‪.‬‬

‫مقدمة في كتابة نص على مستوى منخفض عن السطر ‪Sub‬‬

‫يستخدم الوسم‪ >sub< ‬لتمييز نص وجعله منخفض عن السطر ومكتوب بخط أصغر‪ G،‬ويمكن استخدام هذا الوسم لتمثيل المعادالت الكيميائية‪.‬‬

‫طريقة استخدام‪>sub< ‬‬

‫سنقوم في المثال التالي بتحديد جزء من النص باستخدام الوسم‪ >sub< ‬لعرضه تحت السطر أو على مستوى منخفض قلياًل عن مستوى بقية‬
‫النص‪ ،‬ويمكننا القيام بذلك على النحو التالي‪:‬‬

‫‪>p>The‬‬ ‫<‪basic formula for water is H₂0.</p‬‬

 ‫الحظ كيف ظهر الرقم ‪ 2‬بخط أصغر وعلى مستوى منخفض عن بقية النص‪.‬‬

‫مقدمة في كتابة نص على مستوى مرتفع عن السطر ‪Sup‬‬

‫يستخدم الوسم‪ >sup< ‬لتمييز نص وجعله مرتفع عن السطر قلياًل وبخط أصغر‪ ،‬ويمكن استخدام هذا الوسم لتمثيل المعادالت الرياضية‪.‬‬

‫طريقة استخدام الوسم‪>sup< ‬‬

‫سنقوم في المثال التالي بتحديد الرقم ‪ 3‬بالوسم‪ >sup< ‬لعرضه فوق السطر أو على مستوى أعلى قلياًل عن الرقم ‪ ،2‬ويمكننا القيام بذلك بكتابته‬
‫على النحو التالي‪:‬‬

‫<‪>p>2³</p‬‬

‫تعرفنا في هذا الدرس على طريقة تنسيق النصوص في ‪.HTML‬‬

‫لقوائم | ‪Lists‬‬

‫مقدمة في ‪list‬‬

‫نوع آخر شائع من العناصر النصية في ‪ HTML‬هو القائمة ‪ ،list‬هناك أنواع مختلفة من القوائم‪ ،‬مثل قائمة غير مرتبة ‪ unordered list‬وقائمة‬
‫مرتبة ‪ .ordered list‬سنلقي نظرة على كل نوع من هذه األنواع ومتى يستخدم‪.‬‬

‫طريقة استخدام ‪Unordered List‬‬

‫تعتبر القائمة غير المرتبة ‪ unordered list‬من أكثر القوائم شيوعًا‪ ،‬ويتم إنشاؤها باستخدام وسم ‪ ul‬وإنشاء عناصرها باستخدام وسم ‪ ،li‬يوضح‬
‫المثال التالي طريقة إنشاء قائمة غير مرتبة تحتفظ بثالث ألوان‪:‬‬

‫>‪<ul‬‬

‫>‪<li>red</li‬‬

‫>‪<li>green</li‬‬

‫>‪<li>blue</li‬‬

‫>‪</ul‬‬

‫كما ترا فإن هذه القائمة يمكن استخدامها لعرض البيانات التي اليكون ترتيبها مهم‪G.‬‬

‫طريقة استخدام ‪Ordered List‬‬

‫يمكن استخدام القائمة المرتبة ‪ ordered list‬عندما يكون الترتيب مه ًما‪ ،‬يتم إنشاؤها باستخدام وسم ‪ ol‬وإنشاء عناصرها باستخدام تاق ‪ ،li‬يوضح‬
‫المثال التالي طريقة إنشاء قائمة مرتبة تحتفظ بثالث عناصر مرتبة‪:‬‬

‫<‪>ol‬‬
‫‪>li>step‬‬ ‫<‪one</li‬‬

‫‪>li>step‬‬ ‫<‪two</li‬‬

‫‪>li>step‬‬ ‫<‪three</li‬‬

‫<‪>ol/‬‬

‫الروابط | ‪Links‬‬

‫مقدمة في إضافة الروابط باستخدام ‪Anchor‬‬

‫من أهم مايميز صفحات الـويب أن التنقل بين صفحاتها ليس معقد بل بغاية السهولة‪ ،‬ولالنتقال إلى صفحة جديدة أو االنتقال إلى جزء معين على‬
‫نفس الصفحة يمكن االستعانة بوسم يعرف بالوسم‪ >a< ‬وفي هذا الدرس سنتعرف على الوسم‪ >a< ‬أهم السمات فيه وكيفية كتابته‪ ،‬مالحظة‪:‬‬
‫األب للوسم‪ >a< ‬أي وسم باستنثاء وسم‪ >a< ‬آخر‪.‬‬

‫الوسم‪>a< ‬‬

‫يستخدم الوسم‪ >a< ‬إلنشاء رابط ينتقل بنا إلى صفحات ويب‪ ،‬ملفات‪ ،‬عناوين بريد الكتروني أو أماكن أخرى بنفس الصفحة‪ ،‬المفضل أن يكون‬
‫محتوى الوسم‪  >a< ‬وصف موجز ذو معنى‪ ،‬وذلك يعود بالفائدة لمحركات البحث في معرفة‪ G‬المحتوى‪ ،‬ويمكن أن يكون محتوى الوسم‪< ‬‬
‫‪ >a‬صورة او شي آخر‪ ،‬أي ليس مقتصر على النص‪ .‬مالحظة‪ :‬محتوى الوسم‪ >a< ‬هو الجزء المرئي من هذا الوسم‪.‬‬

‫كيفية كتابة الوسم‪>a< ‬‬

‫<‪>a‬‬

‫‪Definition of URI and URL‬‬

‫<‪>a/‬‬

‫الحظ في المثال أعاله تم إضافة النص ‪ Definition of URI and URL‬كمحتوى للوسم‪>a< ‬ولكن عند النقر عليه لن ينتقل بنا إلى أي مكان‬
‫آخر وذلك بسبب عدم تحديد أهم سمة في الوسم‪ >a< ‬والتي تعرف بالسمة ‪.href‬‬

‫السمة ‪href‬‬

‫تعتبر السمة ‪ href‬من أهم السمات في الوسم‪ ،>a< ‬قيمة هذه السمة تكون عبارة عن الصفحة أو المكان المراد الذهاب إليه عندما يقوم المستخدم‬
‫بالنقر على محتوى الوسم‪ .>a< ‬يمكن أن تكون قيم السمة ‪:href‬‬

‫عنوان ‪.URL‬‬ ‫‪‬‬

‫عنوان بريد الكتروني باستخدام ‪.mailto‬‬ ‫‪‬‬
‫رقم هاتف باستخدام ‪.tel‬‬ ‫‪‬‬
‫وسم معين في نفس المستند باستخدام قيمة ‪ id‬التابعة لذلك المستند‪.‬‬ ‫‪‬‬

‫لتوضيح الفكرة الحظ معي المثال التالي‪:‬‬

‫< ‪>"a href="../reference/uri-url.html‬‬

‫‪Definition of URI and URL‬‬

‫<‪>a/‬‬

‫في المثال أعاله قمنا بتعيين قيمة السمة‪ href ‬كعنوان ‪ URL‬وعند النقر على محتوى الوسم أعاله سينتقل بنا إلى رابط الصفحة الذي تم تعيينه‬
‫في السمة‪ .href ‬مالحظة‪ :‬إذا كان الوسم‪ >a< ‬اليحتوي على السمة‪ href ‬فلن يتم االنتقال إلى أي صفحة أو مكان عند النقر عليه‪.‬‬

‫الوسائط‬

‫لوسائط‬

‫مقدمة في عرض الصور و استخدام ‪img‬‬

‫يمكن للصور تحسين تصميم صفحة الويب ومظهرها‪ ،‬ولعرض الصور في صفحة الويب يمكننا استخدام الوسم‪.>img< ‬‬

‫طريقة استخدام ‪ src‬لتحديد مسار الصورة‬

‫لعرض الصورة داخل صفحة الويب يجب عليك استخدام‪ >img< ‬وتحديد مصدر الصورة المراد عرضها باستخدام ‪ src attribute‬حيث‬
‫أن‪ src ‬هي اختصار لـكلمة ‪ source‬والتي تعني المصدر الحظ معي المثال التالي‪:‬‬

‫< ‪> "img src="images/profile.png‬‬

‫في المثال السابق استخدام وسم‪ img ‬وتمرير قيمة "‪ "URL‬الخاص بمسار الصورة المراد عرضها‪.‬‬

‫طريقة استخدام ‪ alt‬لشرح محتوى الصورة‬

‫يمكن استخدام‪ alt ‬لتوفير نص بديل لصورة‪ ،‬الحظ معي المثال التالي‪:‬‬

‫< ‪>"img src="images/profile.pn" alt="user profile image‬‬

‫طريقة استخدام ‪ height‬و ‪ width‬لتحديد طول وعرض الصورة‬

‫يمكن تحديد طول الصورة باستخدام وسم‪ height ‬وكذلك لتحديد عرض الصورة يمكن استخدام وسم‪ width ‬الحظ معي المثال التالي‪:‬‬

‫<‪>"img src="images/profile.png" width="400" height="320‬‬

‫في المثال السابق تم تحديد طول وعرض الصورة باستخدام وسمي‪ height ‬و‪.width ‬‬

‫مقدمة في عرض المقاطع و طريقة استخدام‪video ‬‬

‫لتضمين محتوى فيديو في صفحة ويب يمكن استخدام‪.>video< ‬‬

‫يمكن أن تحتوي‪ >video< ‬على‪ >source< ‬واحدة أو أكثر وذلك ليتمكن المتصفح من اختيار المصدر المدعوم‪ G‬األول‪.‬‬
 ‫<‪>video‬‬

‫<‪>"source src="programming101.mp4" type="video/mp4‬‬

‫<‪>"source src="programming101.ogg" type="video/ogg‬‬

‫‪.Couldn't present the video in this browser‬‬

‫<‪>video/‬‬

‫طريقة استخدام ‪ width‬و ‪ height‬لتحديد طول وعرض المقطع‬

‫<‪>video width="400" height="320" controls‬‬

‫<‪>"source src="programming101.mp4" type="video/mp4‬‬

‫<‪>"source src="programming101.ogg" type="video/ogg‬‬

‫‪.Couldn't present the video in this browser‬‬

‫<‪>video/‬‬

‫مقدمة في عرض التسجيالت الصوتية واستخدام ‪audio‬‬

‫تُستخدم عالمة‪  >audio< ‬لتضمين محتوى صوتي في صفحة ويب‪ ،‬مثل البرودكاست والكتب الصوتية أو غيرها من أنواع المحتوى الصوتي‪.‬‬

‫فائدة وطريقة استخدام‪>source< ‬‬

‫يمكن أن تحتوي‪ >audio< ‬على‪ >source< ‬واحد أو أكثر وذلك ليتمكن المتصفح من اختيار المصدر المدعوم األول‪.‬‬

‫<‪>audio‬‬

‫<‪>"source src="myPodcast.mp3" type="audio/mpeg‬‬

‫<‪>"source src="myPodcast.ogg" type="audio/ogg‬‬

‫‪.Couldn't present the audio in this browser‬‬

‫<‪>audio/‬‬

‫سيتم عرض النص الذي يتم كتابته بين عالمتي‪ >audio< ‬و‪ >/audio< ‬فقط في المتصفحات التي التدعم العنصر‪.>audio< ‬‬

‫طريقة إضافة أدوات التحكم ‪controls‬‬

‫حتى يتم إضافة أدوات التحكم ‪ -‬التي تشمل تشغيل وإيقاف مقطع الصوت والعودة للوراء والتقدم إلى األمام وأداة التحكم بمستوى الصوت ‪ -‬نقوم‬
‫بإضافة تعبير‪ controls ‬إلى‪ >audio< ‬كما هو موضح بالشكل التالي‪:‬‬

‫<‪>audio controls‬‬
 ‫<‪>"source src="myPodcast.mp3" type="audio/mpeg‬‬

‫<‪>"source src="myPodcast.ogg" type="audio/ogg‬‬

‫‪.Couldn't present the audio in this browser‬‬

‫<‪>audio/‬‬

‫مقدمة في الجداول‬
‫مقدمة في إنشاء الجداول باستخدام ‪Table‬‬

‫تمكنك ‪ HTML‬من إضافة جداول في صفحة الويب الخاصة بك‪ ،‬باإلضافة إلى تنظيمها وتغيير حجمها ومحتواها‪ ،‬تساعدك الجداول في عرض‬
‫قوائم البيانات من نصوص وصور وما إلى ذلك‪.‬‬

‫طريقة استخدام ‪Table‬‬

‫إلنشاء جدول يتم استخدام الوسم‪ >table< ‬ويتم وضع الوسم‪ >tr< ‬والوسم‪ >th< ‬والوسم‪ >td< ‬بداخله والتي تقوم بإنشاء أعمدة‬
‫وصفوف الجدول‪.‬‬

‫مثال على إنشاء جدول‬

‫سنقوم اآلن بإنشاء جدول يتكون من خانتين رئيسيتين هما ‪ Name‬و ‪ Age‬ثم سنضيف له صفين ونضيف لهما بعض البيانات‬

‫<‪>table‬‬
‫<‪>tr‬‬
‫<‪>th>Name</th‬‬
‫<‪>th>Age</th‬‬
‫<‪>tr/‬‬
‫<‪>tr‬‬
‫<‪>td>Khalid</td‬‬
‫<‪>td>19</td‬‬
‫<‪>tr/‬‬
‫<‪>tr‬‬
‫<‪>td>Omar</td‬‬
‫<‪>td>17</td‬‬
‫<‪>tr/‬‬

‫<‪>table/‬‬
 ‫مقدمة في النماذج‬

‫مقدمة في كتابة النماذج باستخدام ‪Form‬‬

‫يعتبر الوسم<‪ >form‬من العناصر المهمة في ‪ HTML‬وذلك ألنه يضم بداخله عدة عناصر عن طريقها يستطيع المستخدم إرسال البيانات إلى‬
‫خادم المتصفح‪ ،‬ببساطة يمكنك اعتبار وظيفة الوسم‪  >form< ‬تكمن في تحديد البيانات المراد إدخالها من المستخدم‪.‬‬

‫سمات‪>form< ‬‬

‫عند كتابة الوسم‪  >form< ‬فإن هناك بعض الخصائص المهمة التي يجب تحديد قيمها مثل السمة ‪ method‬والسمة ‪.action‬‬

‫خاصية‪method ‬‬

‫تقوم هذ ِه الخاصية بتحديد نوع اإلجراء المراد تطبيقه على البيانات التي أدخلها المستخدم وهي إرسال البيانات‪ ،‬يستقبل هذا الحقل نوعين من القيم‬
‫وهما‪ get ‬و‪ .post ‬لتوضيح الفكرة الحظ المثال التالي‪:‬‬

‫>"‪<form method="get‬‬

‫>‪</form‬‬

‫>"‪<form method="post‬‬

‫>‪</form‬‬

‫الوسم‪>input< ‬‬

‫يستخدم الوسم<‪  >input‬لتحديد حقل إدخال يقوم باستقبال البيانات المدخلة ويمكن استخدام هذا الوسم بداخل الوسم‪ >form< ‬الستقبال بيانات‬
‫المستخدم‪ ،‬وهو المكان الذي تقوم فيه بإدخال البيانات المراد استقبالها‪ ،‬يعتبر الوسم‪ >input< ‬من أهم الوسوم في‪ >form< ‬ويحتوي هذا‬
‫الوسم على عدة أنواع من الحقول‪.‬‬

‫السمة‪type ‬‬

‫تعتبر السمة ‪ type‬من أهم السمات للوسم<‪ ،>input‬فهي تقوم بتحديد نوع الحقل‪،>input< ‬وبنا ًء على قيمة هذه السمة يتم تحديد شكل‬
‫وطريقة العمل للوسم‪ .>input< ‬لتوضيح الفكرة سنقوم بذكر أهم القيم للسمة ‪ type‬باإلضافة إلى شكل وعمل القيم‪.‬‬

‫القيمة ‪text‬‬

‫تعتبر القيمة‪ text ‬القيمة االبتدائية للحقل‪ type ‬فهي تمثل حقل إلدخال بيانات نصية ولتوضيح الفكرة الحظ المثال التالي‪:‬‬

‫>‪<form‬‬

‫>"‪<input type="text" name="name‬‬

‫>‪</form‬‬
 ‫القيمة‪submit  ‬‬

‫هذه القيمة تمثل زر يقوم بإرسال أو تسليم النموذج ولتوضيح الفكرة الحظ المثال التالي‪:‬‬

‫>‪<form‬‬

‫>"‪<input type="submit‬‬

‫>‪</form‬‬

‫القيمة‪radio  ‬‬

‫زر انتقاء يسمح باختيار قيمة من مجموعة‪ G‬خيارات تجعل القيمة ‪ radio‬يتشكل بشكل زر االنتقاء ويسمح باختيار قيمة واحدة فقط من مجموعة‬
‫خيارات ولتوضيح الفكرة الحظ المثال التالي‪:‬‬

‫>‪<form‬‬

‫>‪<p>Gender</p‬‬

‫>"‪<input type="radio" name="gender‬‬

‫>‪<label>Female</label‬‬

‫>"‪<input type="radio" name="gender‬‬

‫>‪<label>Male</label‬‬

‫>‪</form‬‬

‫الوسم‪>label< ‬‬

‫يستخدم العنصر‪ >label< ‬لتحديد المسمى للوسم‪ >input< ‬لتوضيح الفكرة الحظ المثال التالي‪:‬‬

‫>‪<form‬‬

‫‪<label for="fname">First‬‬ ‫>‪name:</label‬‬

‫>"‪<input type="text" id="fname‬‬

‫>"‪<input type="submit" value="Submit‬‬

‫>‪</form‬‬