M.G.

E – HTML ‫تعلم‬
M.G.E – HTML ‫تعلم‬

‫فهرس الكتاب‬

‫رقم الصفحة‬ ‫الدرس‬

1 HTML introduction – HTML ‫ مقدمة‬- 1

4 tags & elements and – ‫الصفات‬/‫ الوسوم والعناصر والسمات‬- 2

attributes

5 Comments – ‫ التعليقات‬- 3

5 Headings – ‫ العناوين‬- 4

6 Paragraph – ‫ الفقرة‬- 5

6 Text formatting – ‫ تنسيق النصوص‬- 6

8 Links – ‫ اللينكات‬- 7

9 Images – ‫ الصور‬- 8

10 Self-closing – ‫ وسوم ذاتية الاغلاق‬- 9

10 Block level and Inline level - 10

11 Class and Id - 11

12 Lists – ‫ القوائم‬- 12

12 Tables – ‫ الجداول‬- 13

14 Website sections – ‫ اقسام الموقع‬- 14

15 Forms – ‫ النماذج‬- 15

16 Input – ‫ الادخال‬- 16

18 Important other HTML tags – ‫ وسوم اخري مهمة‬- 17

21 Notes – ‫ ملاحظات‬- 18

22 W3schools ‫ اسئلة واجابات موقع‬- 19

28 Interviews Questions – ‫ اسئلة الانترفيو‬- 20

‫تعلم ‪M.G.E – HTML‬‬

‫بسم هللا الرحمن الرحيم‬

‫‪ -‬قالوا سبحانك لا علم لنا إلا ما علمتنا إنك أنت العليم الحكيم (البقرة ‪)32‬‬
‫‪ -‬اقرأ باسم ربك الذي خلق * خلق الإنسان من علق * اقرأ وربك الأكرم * الذي علم بالقلم *‬
‫علم الإنسان ما لم يعلم (العلق ‪)5-1‬‬

‫وفي فضل طلب العلم كلام كثير و الانسان الذي يطلب العلم خير وافضل عند هللا من‬
‫الجاهل ‪ ..‬واذكر هنا مقولة من مقولات د‪.‬مصطفي محمود‬
‫"إذا نزل مؤمن وكافر إلى البحر فلا ينجو إلا من تعلم السباحة ‪ ،‬فاهلل لا يحابي الجهلاء‬
‫فالمسلم الجاهل سيغرق والكافر المتعلم سينجو"‬

‫فأدعو هللا ان يستفيد بهذا الكتاب البسيط كل طالب علم و ان يوفق كل إنسان لما يحبه‬
‫ويرضاه واذا تعلمت يا صديقي اي شئ فعلمه لغيرك حتي ولو بمقابل بسيط فلا تأخذ العلم‬
‫فخيرا لك ان تعلم غيرك بما تعلمته‪.‬‬
‫ً‬ ‫معك إلي قبرك فلن ينفعك‬

‫نقاط مهمة قبل البدء في تعلم البرمجة عموما‬

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

‫‪ -‬لا تعتمد علي اي كتاب في العالم بأنه سيقدم او يشر ح لك كل شئ ‪ %100‬عليك بالبحث‬
‫المتواصل لتري الحقائق والتحديثات التي ظهرت في هذا الموضوع‪.‬‬
‫‪ -‬تم اعداد هذا الكتاب بطر يقة بسيطة وخالية من اي حشو او اشياء اكاديمية بحتة‬
‫ومعظم‪/‬كل ما يحتويه هذا الكتاب ستستخدمه في عملك المستقبلي بإذن هللا ‪ ..‬وتم اعداده‬
‫بتجميع وتلخيص المحتوي من مصادر عربية واجنبيه‬
‫ورجاءا يا صديقي لا تقم ببيع هذا الكتا ب او التعديل عليه‬
‫ً‬ ‫امرا‬
‫فضلا وليس ً‬
‫فقط يمكنك نشر او طباعة هذا الكتاب بالمجان وفي اي مكان تر يد‪.‬‬

‫‪ -‬الكتاب يحتوي علي شر ح لــ ‪( HTML‬باللغة العربية) ثم اسئلة علي ما تم دراسته‬

‫(من موقع ‪ ) w3schools‬ثم اسئلة المقابلات الشخصية (باللغة الانجليز ية)‪.‬‬

‫‪ -‬اذا وجدت اي اخطاء بالكتاب لا تترد في مراسلتي علي ايميلي الشخصي هنا ‪.‬‬

‫اصدار سنة ‪2022‬‬

‫تعلم ‪M.G.E – HTML‬‬

‫‪ -1‬مقدمة ‪HTML Introduction - HTML‬‬

‫اولا وقبل الدخول في موضوع ‪ HTML‬لابد ان نتعرف علي موضوع هام‬

‫إذا اردنا ان نصنع موقع لابد من توافر ‪ 3‬اشياء اساسية ‪-:‬‬

‫• الدومين – ‪Domain‬‬
‫وهو لينك‪/‬رابط موقعك علي الانترنت وكل دومين يكون فر يد في اسمه وليس له اي شبيه‬
‫ويكون بإمتدادات مختلفة ‪ ..‬والصورة التالية توضح ما هو الدومين‬

‫(الصورة من موقع ‪)MOZ‬‬

‫• الاستضافة – ‪Hosting‬‬

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

‫• قالب الموقع‪/‬ملفات الموقع‬

‫هذا هو اساس ما سندرسه في المواضيع القادمة ويتم مرور صنع قالب الموقع بمراحل‬
‫تبدأ بمرحلة التصميم ثم تحويل التصميم إلي اكواد لكي يظهر لنا الموقع بشكله الحالي‬
‫علي شبكة الانترنت سواء كان موقع ذو محتوي ثابت ‪ Static Website‬او محتوي ذو محتوي‬
‫يتم التفاعل معه ‪. Dynamic Website‬‬

‫• الادوات المستخدمة في الكورس‬

‫‪ -‬محرر الاكواد برنامج ‪ visual studio code‬وهو البرنامج الذي سنستخدمه لكتابة‬
‫ملفات ‪ .. HTML‬توجد محررات اخري ولكن هذا البرنامج من افضل المحررات‪.‬‬
‫‪ -‬اضافات في برنامج‪ VS code‬مثل ‪ Live Server‬واضافات اخري سيتم ذكرها‬
‫لاحقا‬
‫‪ -‬متصفح ‪ Google chrome‬او متصفح ‪ Firefox‬او متصفح ‪ Safari‬لعرض ملف‬
‫‪HTML‬‬

‫‪1‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫نأتي الان لندرس الــ ‪HTML‬‬

‫‪ HTML‬هو اختصار لــــــ ‪Hyper Text Markup Language‬‬

‫باللغة العربية هي لغة توصيف صفحات الموقع وتوز يع محتوياتها من نصوص وروابط‬
‫وصور وفيديوهات وعناصر اخري علي صفحات الانترنت او كما هو التعر يف علي موقع‬
‫ويكيبيديا فهي لغة ترميز النص الفائق ‪ ( ..‬رغم ان بعض الاشياء في البرمجة ليست لها‬
‫ترجمة حرفية في اللغة العربية ولكن يجتهد الانسان ليوصل لاقرب معني للغة العربية )‪.‬‬
‫وما يهمنا ان ‪ HTML‬هي طر يقة لكتابة وهيكلة صفحات الويب ‪ ..‬ورغم ان مكتوب انها لغة‬
‫ولكن هي ليست لغة برمجية فكما قلنا هي لغة وصف هيكلة المواقع ‪.‬‬

‫• للعلم بالشئ اي لغة برمجية لابد انها تحتوي علي بعض الاساسيات التي تتشابه مع‬
‫بعضها البعض مثل الجمل الشرطية والتكرار علي سبيل المثال‬
‫وسندرس ‪ HTML‬و ‪ CSS‬وهما ليسوا لغات برمجة اما ‪ JavaScript‬و ‪ PHP‬لغات‬
‫برمجة‪.‬‬

‫• الـــ ‪ HTML‬عبارة عن وسوم‪ Tags/‬بيتم كتابتهم علي حسب وظيفة عمل كل‬
‫وسم‪Tag/‬‬

‫ونستعرض الشكل العام لــــ‪HTML‬‬

‫<‪>!DOCTYPE html‬‬
‫<‪>html‬‬
‫<‪>head‬‬
‫<‪>title> my first website </title‬‬
‫<‪>/head‬‬
‫<‪>body‬‬
‫< ‪>h1> What’s your name? </h1‬‬
‫<‪>p> My name is Muhammad </p‬‬
‫<‪>/body‬‬
‫<‪>/html‬‬

‫‪2‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫شر ح سر يع للشكل العام‬

‫> وسم البداية<‬ ‫•‬

‫> وسم النهاية‪</‬‬ ‫•‬
‫<‪ >!DOCTYPE html‬يتم كتابتها في اعلي ملف ‪ html‬لتعر يف المتصفح بأن هذا‬ ‫•‬
‫هو ملف ‪ html‬واخر اصدار وهو الاصدار الخامس ‪ HTML5‬ويمكن عدم كتابتها ولكن‬
‫من الممكن بعض الوسوم الحديثة لا تعمل بشكل صحيح‪.‬‬
‫<‪ > html></html‬اول الوسوم الاساسية لبداية ملف ‪html‬‬ ‫•‬
‫<‪ > head></head‬ثاني الوسوم الاساسية بعد وسم البداية <‪ >html‬وهو يكتب‬ ‫•‬
‫فيه معلومات عن الموقع او لربط ملفات خارجية بملف ‪ html‬ولا تظهر في محتوي‬
‫الموقع ولكن تساعد الموقع ومحركات البحث من خلال المعلومات المكتوبة‪.‬‬
‫<‪ >title></title‬وسم اساسي يكتب بين وسمي ‪ head‬وفيه نكتب اسم الموقع‬ ‫•‬
‫الذي سيظهر اعلي نافذة المتصفح في لسان‪ Tab/‬النافذة‪.‬‬
‫< ‪ > body></body‬هو ثالث الوسوم الاساسية بعد وسم النهاية <‪ >head/‬وفيه يتم‬ ‫•‬
‫كتابة محتوي الموقع ويظهر في المتصفح‪.‬‬
‫<‪ > h1></h1‬وسم مسئول عن العناوين‪.‬‬ ‫•‬
‫>‪ > p></p‬وسم مسئول عن كتابة النصوص‪.‬‬ ‫•‬
‫هنلاحظ في الشكل العام ان كل وسم بداية <> تم اغلاقه بوسم نهاية <‪ >/‬ومعظم‬ ‫•‬
‫وسوم ‪ html‬تبدأ بوسم البداية وتغلق بوسم النهاية ولكن يوجد بعض الوسوم ذاتية‬
‫الاغلاق او كما تسمي ‪ self-closing‬وهي عبارة عن وسم واحد ليس له وسم نهاية‬
‫ويغلق ذاتيا مثل <‪ >br‬او <‪ >hr‬او <‪ .. > img‬وسيتم شر ح وتوضيح هذه الوسوم‬
‫في مواضيع لاحقة‪.‬‬
‫يتم حفظ ملفات ‪ html‬بإمتداد ‪ html.‬او ‪htm.‬‬ ‫•‬

‫‪3‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫‪ - 2‬الوسوم والعناصر والسمات‪/‬الصفات – ‪Tags & Elements and Attributes‬‬

‫(الصورة من موقع ‪)mrsglover‬‬

‫الشكل السابق وضح الفرق بين الوسم‪ Tag/‬و العنصر‪ Element/‬و السمة او‬
‫الصفة‪Attribute/‬‬
‫• وسم البداية – ‪ Opening Tag‬كان <‪( >a‬بدون السمة‪/‬الصفة ولكن في المثال وسم‬
‫البداية يشمل الـــ‪.) Attribute‬‬
‫• الصفة‪/‬السمة ‪ Attribute -‬بتتحط في وسم البداية ووظيفتها انها بتضيف معلومات‬
‫للعنصر لتغير طبيعته كما بالمثال او استدعاءه في محتوي اخر ‪.‬‬

‫>‪<p style="color: blue"> Hello HTML</p‬‬

‫اللون الافتراضي هو الاس ود ولكن هنا وضعت سمة لكي اضيف معلومات تغير من‬
‫طبيعة العنصر ليظهر باللون الازرق بدل اللون الافتراضي الاسود‪.‬‬
‫• لكل سمة قيمة تسمي ‪ Attribute Value‬وهذه القيمة تتغير بتغير الصفة او بتغير‬
‫قيمة محددة يتم ضبطها من المبرمج‪.‬‬
‫• محتوي العنصر – ‪ Element Content‬يكتب ما بين وسمي البداية والنهاية‪.‬‬
‫• وسم النهاية – ‪ Closing Tag‬كان <‪.>a/‬‬

‫• إذا وجد وسم يغلق ذاتيا – ‪ Self-closing‬فأين يوضع ‪ Attribute‬؟‬

‫سنضع السمة‪/‬الصفة في الوسم وغالبا وسوم الاغلاق الذاتي ليس بها اي محتوي للوسم‬
‫ولكن السمة ستغير اشياء في طبيعة الوسم ‪ ..‬وسنري هذا في مواضيع لاحقة‪.‬‬

‫‪4‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫‪ - 3‬التعليقات – ‪Comments‬‬
‫التعليقات هدفها انها كملاحظات في الكود ولا يظهر التعليق في محتوي الموقع ولكن هو‬
‫يكون كمرجع للمبرمج حينما يتم التعديل علي الكود او الرجوع لسطر معين ‪ ..‬ويكون بهذا‬
‫الشكل‬

‫• تعليق سطر واحد‬

‫<‪>!-- Comment --‬‬

‫• تعليق لعدة اسطر‬

‫‪<!-- Comment1‬‬

‫‪Comment2‬‬

‫>‪Comment3 --‬‬

‫• لا يمكن وضع تعليق داخل تعليق اخر‪.‬‬

‫‪ - 4‬العناوين – ‪Headings‬‬

‫• هي ‪ 6‬وسوم تبدأ من ‪ h1‬إلي ‪ .. h6‬واكبرهم حجما في الخط ‪ h1‬و يتم النزول تنازليا‬
‫للوصول لاصغرهم حجما في الخط ‪h6‬‬
‫• هذه الوسوم مهمة في تحسين محركات البحث – ‪ SEO‬بالأخص ‪ h1‬و ‪h2‬‬

‫تدرب وقم بنسخ الاكواد ولصقها في محرر اكواد يناسبك وانظر النتيجة‪-:‬‬ ‫•‬

‫>‪<h1>Hello World</h1‬‬
‫>‪<h2>Hello World</h2‬‬
‫>‪<h3>Hello World</h3‬‬
‫>‪<h4>Hello World</h4‬‬
‫>‪<h5>Hello World</h5‬‬
‫>‪<h6>Hello World</h6‬‬

‫‪5‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫‪ - 5‬الفقرة – ‪Paragraph‬‬

‫يرمز لها بوسم البداية <‪ >p‬ووسم النهاية <‪>p/‬‬

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

‫‪ - 6‬تنسيق النصوص – ‪Text Formatting‬‬

‫• الوسم <‪ >b‬والوسم <‪>strong‬‬

‫يستخدموا لعرض النص بخط عر يض ولكن لكل منهما دلالة مختلفة‬
‫فمثلا وسم <‪ > b‬يعرض النص بخط عر يض ولكن لايؤثر علي اهمية او اولوية النص‬
‫في الصفحة اي ان دوره تنسيقي فقط‪.‬‬
‫>‪<b>Hello HTML</b‬‬
‫اما وسم <‪>strong‬‬
‫فهو يعرض النص بخط عر يض ولكن يدل استخدامه علي ان لهذا النص اهمية وتأثير‬
‫مثل عرض رسالة للتذكير بالموعد مثلا‪.‬‬
‫>‪ </strong></p‬يوم الاثنين>‪<strong‬لا تنسي موعدك>‪<p‬‬

‫يمكنك كتابة وسوم‪/‬عناصر متداخلة مع بعضها البعض ويسمي هذا ب‬ ‫•‬

‫‪ Nesting‬اي التداخل‪.‬‬

‫• الوسم <‪ >i‬والوسم <‪>em‬‬

‫يستخدموا لعرض النص بخط مائل ولكن لكل منهما دلالة مختلفة‬
‫فمثلا وسم <‪ > i‬يعرض النص بخط عر يض ولكن لايؤثر علي اهمية او او لوية النص‬
‫في الصفحة اي ان دوره تنسيقي فقط‪.‬‬
‫>‪<i>Hello HTML</i‬‬
‫اما وسم <‪>em‬‬
‫فهو يعرض النص بخط مائل ولكن يدل استخدامه علي ان لهذا النص اهمية في‬
‫غرض التأكيد‪.‬‬
‫>‪<p>Welcome to<em>HTML</em></p‬‬

‫‪6‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫• الوسم <‪>sub‬‬
‫يستخدم لكتابة نص علي مستوي منخفض من السطر ومكتوب بخط اصغر ويمكن‬
‫استخدامه في المعادلات الكيميائية‪.‬‬
‫>‪<p>H₂O</p‬‬
‫• الوسم <‪>br‬‬
‫يستخدم لاضافة سطر جديد او يمكننا القول انه يجعل اي شئ بعده يبدأ من سطر‬
‫جديد‪.‬‬
‫>‪<b>Hello World</b> <br> <p> Hello World</p‬‬

‫• الوسم <‪>sup‬‬
‫يستخدم لكتابة نص علي مستوي مرتفع من السطر وم كتوب بخط اصغر ويمكن‬
‫استخدامه في المعادلات الر ياضية‪.‬‬
‫>‪<p>2³</p‬‬

‫• الوسم <‪>hr‬‬
‫يستخدم لاضافة خط بعرض سطر كامل في الصفحة ويمكن استخدامه في فصل‬
‫فقرات المواضيع بعضها البعض علي سبيل المثال‪.‬‬

‫• الوسم <‪>u‬‬
‫يستخدم لوضع خط تحت الكلام ويمكن استخدامه لوضع خط تحت النصوص المهمة‪.‬‬

‫• الوسم <‪>mark‬‬
‫لتظليل النص باللون الاصفر وهذا هو اللون الافتراضي‪.‬‬

‫• الوسم <‪>s‬‬
‫لوضع خط في منتصف النص اي كأنه مشطوب عليه‪.‬‬

‫• الوسم <‪>q‬‬
‫لوضع الكلام بين علامتي تنصيص " "‪.‬‬

‫• الوسم <‪>code‬‬
‫لكتابة كود غير مفعل ويظهر في صفحة الموقع‪.‬‬

‫• الوسم <‪>tt‬‬
‫لجعل الخط يظهر كأنه مكتوب علي الآلة كاتبة‪.‬‬

‫‪7‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫‪ - 7‬اللينكات – ‪Links‬‬

‫• اذا اردنا ان ندر ج لينك موقع او مقال او قسم بمقال في صفحة الموقع سيكون من‬
‫خلال وسم <‪>a‬‬

‫>‪<a href=https://www.google.com> Google </a‬‬

‫علي الاغلب سيتشابه معظم الوسوم في هيكلهم ويختلفوا في السمات والمحتوي‬

‫المكتوب في العنصر فهنا سنجد ان وسم <‪ >a‬يأخذ السمة ‪ href‬ونضع الموقع في‬
‫قيمة السمة بين علامتي تنصيص وسنكتب المحتوي بين وسمي الفتح والاغلاق‬
‫وسيظهر هذا في صفحة الموقع‬
‫وعند الضغط علي ‪ Google‬سيفتح اللينك افتراضيا في نفس النافذة‪/‬اللسان‪Tab/‬‬

‫• سمة تسمي بـ ‪ target‬وقيمتها ستكون‬

‫_‪ blank‬سيتم فتح اللينك في ‪ tab‬اخر‬
‫_‪ top‬سيتم فتح صفحة اللينك في ملء الشاشة‪Fullscreen /‬‬

‫• اذا اردنا ان ندر ج ملف للتحميل عند النقر عليه ما علينا سوي كتابة اسم الملف‬
‫بإمتداده في قيمة السمة ‪href‬‬
‫>‪<a Href="download.rar"> download file </a‬‬

‫• اذا اردنا عند الضغط علي لينك يذهب بنا لارسال رسالة للايميل المكتوب في اللينك‬
‫الذي ضغطت عليه‬
‫>‪<a href=mailto:[email protected]>contact us </a‬‬

‫• اذا اردنا عند الضغط علي لينك يذهب بنا للاتصال تليفونيا بالرقم الموجود في اللينك‬
‫الذي ضغطت عليه‬
‫>‪<a href=tel:123456789> call us </a‬‬

‫‪8‬‬
‫تعلم ‪M.G.E – HTML‬‬

‫• اذا كنت تر يد وضع اهم عناوين الفقرات في بداية المقال وعندما يتم الضغط عليه‬
‫ينتقل للفقرة في ا لمقال وذلك تيسيرا علي القارئ ومعرفة عناوين فقرات المقال‬
‫>‪ </h1‬عنوان الفقرة>"‪<h1 id="head1‬‬
‫>‪ </p‬نص الفقرة >‪<p‬‬
‫>‪ </h1‬عنوان الفقرة>"‪<h1 id="head1‬‬
‫<‪ >/p‬نص الفقرة <‪>p‬‬

‫وقبل ذلك يكون مثل فهرس العناوين‬

‫>‪</a‬الفقرة الاولي >"‪<a href="#head1‬‬
‫>‪</a‬الفقرة الثانية >"‪<a href="#head2‬‬

‫• وسم >‪<link‬‬
‫يتم استخدامه بين وسمي >‪ <head‬ووظيفته هو لربط ملفات خارجية مثل ‪CSS‬‬
‫وملفات اخري بملف الـ ‪html‬‬
‫>"‪<link rel="stylesheet" href="style.css‬‬

‫‪ - 8‬الصور ‪Images -‬‬

‫• الشكل العام لوسم ادراج الصور‬

‫>"‪<img src="sky.png" alt="sky‬‬

‫• وسم >‪ <img‬هو وسم ذاتي الاغلاق‪ Self-closing /‬ويستخدم سمة‪Attribute/‬‬

‫تسمي ‪ src‬وقيمتها هي مسار الصورة ويكتب بين علامتي تنصيص‪.‬‬

‫• اذا كان المسار غير صحيح او تم حذف الصورة لن تظهر الصورة ولكن سيظهر‬
‫مساحة للصورة لذلك نستخدم السمة ‪ alt‬لإ خبار محركات البحث والزائر ين بأن هنا‬
‫كانت توجد صورة ولكن توجد مشكلة بها وقيمة ‪ alt‬يوكون وصف قصير للصورة‪.‬‬

‫• يمكننا التحكم في ابعاد الصورة (الطول والعرض) من خلال سمة ‪ width‬للعرض و‬

‫سمة ‪ height‬للطول وتكون القيم ارقام تكتب بين علامتي تنصيص‬

‫>"‪<img src="sky.png" alt="sky" width="500" height="300‬‬

‫وسيتم دراسة كيفية التحكم في الصور والابعاد في كورس ‪ CSS‬لاحقا‪.‬‬

‫‪9‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫‪ – 9‬وسوم ذاتية الاغلاق – ‪Self-closing‬‬

‫• تسمي الوسوم ذاتية الاغلاق بمسميات اخري مثل‬

‫‪Self-closing / Empty tags / Void elements‬‬

‫• تكلمنا سابقا بطر يقة سر يعة عنهم وشاهدنا وتدربنا علي وسم >‪ <img‬سنتكلم عنها‬
‫الان بإستفاضة‬
‫حيث انها وسوم ذات وسم بداية وليس لها وسم نهاية او بمعني ادق هي وسم وحيد‬
‫يغلق ذاتيا وهي وسوم معدودة علي الاصابع مثل‬
‫‪br / hr / img / input / meta / link / track / source‬‬
‫ه ولاء هم اشهر الوسوم الذي سوف تستخدمهم بإستمرار ويوجد وسوم ذاتية الاغلاق‬
‫اخري ولكن لن نتطرق إليهم حليا‪.‬‬

‫‪Block level and Inline level – 10‬‬

‫• معني ‪ Block level element‬هو ان العنصر عندما يكتب يأخذ كامل السطر في‬
‫الصفحة ولا يأخذ بجانبه اي عناصر اخري ومن اشهر هذه العناصر علي سبيل المثال‬

‫‪<h1>…<h6> / <p> / <div> / <hr> / <main> / <video> / <article> /‬‬

‫>‪<form> / <header> / <footer> / <nav> / <ol> / <ul> / <li‬‬

‫• معني ‪ Inline level element‬هو ان العنصر عندما يكتب لا يأخذ كامل السطر في‬
‫الصفحة ويمكن ان يأخذ بجانبه اي عناصر اخري ومن اشهر هذه العناصر علي سبيل‬
‫المثال‬
‫‪<a> / <input> / <i> / <label> / <q> / <strong> / <sub> / <sup> /‬‬
‫>‪<code> / <em> / <img> / <select> / <span> / <textarea‬‬

‫• غير متاح ان عنصر ‪ inline level‬يكون بداخله (التداخل) علي عنصر ‪block level‬‬

‫‪10‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫‪Class and Id - 11‬‬

‫• الاثنين من السمات‪ Attributes/‬الذين يستخدمون داخل وسوم البداية وقيمتهم‬

‫يكتبها المبرمج لتكون مرجعية تستخدم مرة اخري في ملفات اخري مثل ‪CSS‬‬

‫• الفرق بينهم ان الـ ‪ class‬يستخدم للقيم المتشابهة داخل العناصر‬

‫توضيح اكثر اننا يمكننا اعطاء قيمة ‪ class‬في وسم >‪ <p‬تسمي ‪hero‬‬
‫يمكننا اعطاء نفس قيمة ال ‪ class‬السابقة في وسم >‪ <div‬تسمي ‪ hero‬ايضا‬
‫وعند استدعاء قيمة ‪ class‬العنصر يتم التحكم في العنصر من الوان وابعاد في ‪CSS‬‬

‫• ‪ Id‬قيمته تكون فر يدة وليس لها مثيل في اي عنصر اخر ‪ ..‬مثال للتوضيح‬
‫يمكننا كتابة قيمة ‪ id‬في وسم >‪ <p‬تسمي ‪wall‬‬
‫يمكننا كتابة قيمة ‪ id‬في وسم >‪ <div‬تسمي ‪sky‬‬
‫لا يحبذ ان نستخدم قيمة الـ ‪ id‬مرة اخري في اي عنصر من العناصر‪.‬‬

‫• وسم >‪ <div‬هو من اشهر الوسوم استخداما لسمات ‪ class‬او ‪id‬‬

‫لان هذا الوسم يقال انه مأخوذ من اسم ‪ /deviation‬قسم وهو فعلا يقسم الصفحة‬
‫لاقسام نكتب بين وسميه النصوص والصور واي وسوم اخري وللتوضيح‬
‫>"‪<div id="topic1‬‬
‫>‪ </h1‬في ‪ 6‬خطوات كيف يمكنك تسر يع اعمالك>"‪<h1 class="m1‬‬
‫" في ‪ 6‬خطوات كيف يمكنك تسر يع =‪<img id="image" src="topic1.jpg" src‬‬
‫>اعمالك"‬
‫يمكنك تسر يع اعمالك من خلال خطوات سنسردها عليك الان>‪<p‬‬
‫يمكنك تسر يع اعمالك من خلال خطوات سنسردها عليك الان‬
‫يمكنك تسر يع اعمالك من خلال خطوات سنسردها عليك الان‬
‫يمكنك تسر يع اعمالك من خلال خطوات سنسردها عليك الان‬
‫>‪ </p‬يمكنك تسر يع اعمالك من خلال خطوات سنسردها عليك الان‬
‫>‪</div‬‬
‫هذا المثال هو صورة مصغرة من كيفية كتابة مقال في صفحة الويب‬
‫باستخدام ‪ html‬فقط ‪ ..‬ولكن يفضل دراسة ‪ CSS‬لاحقا بعد الانتهاء من دراسة ‪html‬‬
‫لكي يصبح المقال ذو مظهر جيد‪.‬‬

‫‪11‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫‪ – 12‬القوائم – ‪Lists‬‬

‫• القائمة المرتبة – ‪Ordered list‬‬

‫هي قائمة مرقمة ومرتبة ويمكن استخدام تلك القائمة عندما يكون الترتيب مهما‬
‫بإستخدام وسم >‪ <ol‬وانشاء عناصرها من خلال وسم >‪<li‬‬
‫>‪<p> Fruits </p‬‬
‫>‪<ol‬‬
‫>‪<li> apples </li‬‬
‫>‪<li> oranges </li‬‬
‫>‪</ol‬‬

‫• القائمة الغير مرتبة – ‪Unordered list‬‬

‫هي قائمة عبارة عن نقاط ويمكن استخدام تلك القائمة عندما يكون الترتيب غير مهما‬
‫بإستخدام وسم >‪ <ul‬وانشاء عناصرها من خلال وسم >‪<li‬‬
‫>‪<p> Fruits </p‬‬
‫>‪<ul‬‬
‫>‪<li> apples </li‬‬
‫>‪<li> oranges </li‬‬
‫>‪</ul‬‬

‫‪ o‬في كورس الـ ‪ CSS‬سنتعرف علي كيفية تغيير ترقيم القوائم المرتبة وتغيير‬
‫نقاط القوائم الغير مرتبة واضافة اشياء اخري‪.‬‬

‫‪ - 13‬الجداول – ‪Tables‬‬

‫• يتم انشاء الجدول بإستخدام وسم >‪<table‬‬

‫• يتم انشاء روؤس الجدول بطر يقتين‬
‫‪ o‬من خلال وسم >‪ <thead‬ثم وسم >‪ <tr‬ثم العناصر من اليسار لليمين‬
‫بوسم >‪<th‬‬
‫‪ o‬من خلال وسم >‪ <tr‬والعناصر من اليسار لليمين بوسم >‪<th‬‬
‫• يتم إنشاء محتوي الجدول بطر يقتين‬
‫‪ o‬من خلال وسم >‪ <tbody‬ثم وسم >‪ <tr‬ثم العناصر من اليسار لليمين بوسم‬
‫>‪<td‬‬
‫‪ o‬من خلال وسم >‪ <tr‬والعناصر من اليسار لليمين بوسم >‪<td‬‬

‫‪12‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫• يتم إنشاء تذييل الجدول بطر يقتين‬
‫‪ o‬من خلال وسم >‪ <tfoot‬ثم وسم >‪ <tr‬ثم العناصر من اليسار لليمين بوسم‬
‫>‪<td‬‬
‫‪ o‬من خلال وسم >‪ <tr‬والعناصر من اليسار لليمين بوسم >‪<td‬‬

‫مثال علي الـ ‪tables‬‬

‫>‪<table‬‬

‫>‪<tr‬‬

‫>‪<td> Name </td‬‬

‫>‪<td> Age </td‬‬

‫>‪</tr‬‬

‫>‪<tr‬‬

‫>‪<td> Ahmed </td‬‬

‫>‪<td> 19 </td‬‬

‫>‪</tr‬‬

‫>‪<tr‬‬

‫>‪<td> Ali </td‬‬

‫>‪<td> 26 </td‬‬

‫>‪</tr‬‬

‫>‪</table‬‬

‫• يتم دمج الخانات سواء خانتين او اكثر عن طر يق سمة ‪ colspan‬وتكتب في وسم‬

‫>‪ <td‬هكذا‬
‫>"‪<td colspan="2‬‬
‫هنا عدد الخانات التي ستدمج هي اثنان فقط‬

‫توجد بعض السمات التي تعمل علي تنسيق الجدول ولكنها قليلة ولن يتم التطرق لها‬ ‫•‬
‫الان وسنتطرق إليها في كورس الـ ‪CSS‬‬

‫‪13‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫‪ – 14‬اقسام الموقع – ‪website sections‬‬

‫• يمكن تقسيم الموقع‪/‬المقال إلي عدة اقسام من خلال طر يقتين اولهما من خلال وسم‬
‫>‪ <div‬ويتم كتابة العناصر الاخري ب ين وسميه(وسم البداية ووسم النهاية لوسم‬
‫>‪ ) <div‬وقد تكلمنا سابقا عنه وقلنا انه ‪block level‬‬
‫• وسم >‪ <span‬ايضا يمكننا استخدامه لتقسيم الموقع‪/‬المقال لعدة اقسام‬
‫ولكن هو ‪inline level‬‬

‫• الفرق بين وسمي >‪ <div‬و >‪<span‬‬

‫ان وسم >‪ <div‬سنكون به مجموعة‪ group/‬كبيرة من معظم‪/‬كل العناصر التي‬
‫ستكتب بين وسميه اما وسم >‪ <span‬سنكون به ‪ group‬صغير من بعض العناصر‬
‫مثل ‪ paragraph‬وبعض العناصر القليلة التي تستخدم في عمل ‪style‬‬

‫• ‪Html5 semantic elements‬‬

‫في الاصدار الخامس لـ ‪ html‬تم ابتكار بعض الوسوم لتسهيل تقسيم الموقع‪/‬المقال‬
‫معني ‪ semantics‬اي ان العنصر يدل علي محتواه وان العنصر منطقي فأسمه يدل‬
‫علي ما يحتويه ‪ ..‬ونسرد الان اهم الوسوم الجديدة‬
‫وسم >‪ <header‬هو القسم العلوي في الموقع وفيه يكون وسم >‪ <nav‬التي نكون‬
‫فيه قائمة الموقع الرئيسية‪.‬‬
‫اما وسم >‪ <footer‬فهو يكون القسم السفلي في الموقع ويمكن ان يكون فيه روابط‬
‫سر يعة لاقسام الموقع او ازرار اتصل بنا وازرار روابط الشبكات الاجتماعية للموقع‪.‬‬
‫وسم >‪ <main‬يكون بين الوسمين السابقين وفيه يتم كتابة وسمي >‪<article‬و‬
‫>‪ .. <section‬ويمكن الاطلاع علي جميع وسوم تقسيم الموقع الجديدة اضغط هنا‪.‬‬

‫(الصورة من موقع ‪) w3schools‬‬

‫‪14‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫‪ – 15‬النماذج – ‪Forms‬‬

‫• يرمز لها بوسم البداية >‪ <form‬ووسم النهاية >‪</form‬‬

‫يستخدم لتجميع بيانات المستخدم مثل تسجيل الدخول‪ sign in/login/‬او ادخال‬
‫معلومات اخري ‪ ..‬مثال بسيط للتوضيح‬
‫>‪<form‬‬
‫>‪ </label‬اسم المستخدم >"‪<label for="name‬‬
‫>"‪<input type="text" id="name‬‬
‫>‪</form‬‬
‫هنا كتبنا نموذج لادخال اسم المستخدم فقط‬
‫سيتم التعرف لاحقا علي الوسوم بين وسم >‪<form> </form‬‬

‫• سمات‪ attributes/‬النموذج‪form/‬‬

‫‪ Action o‬يستخدم لربط صفحة ‪ php‬لارسال البيانات المدخلة إلي هذه الصفحة‬
‫‪ Autocomplete o‬لإخبار المتصفح انه يدخل البيانات المحفوظة لديه اتوماتيكا‬
‫للنموذج‬
‫‪ Method o‬لإخبار بروتوكول ‪ http‬ما هي الوسيلة التي سيتم استخدامها لإرسال‬
‫البيانات هل هي ‪ post‬او ‪get‬‬

‫>"‪<form action="sample-page.php" method="get‬‬

‫>‪ </label‬اكتب اسمك >"‪<label for="name‬‬
‫>"اكتب اسمك هنا"=‪<input type="text" id="name" placeholder‬‬
‫>"‪<input type="submit‬‬
‫>‪</form‬‬

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

‫‪15‬‬
‫تعلم ‪M.G.E – HTML‬‬

‫• الفرق بين وسائل ارسال البيانات ‪ post‬و ‪get‬‬

‫‪get‬‬ ‫‪post‬‬

‫‪ . 1‬القيمة الإفتراضية‪.‬‬ ‫‪ . 1‬ليست القيمة الإفتراضية‪.‬‬

‫‪ . 2‬اقل امانا‪.‬‬ ‫‪ . 2‬اكثر امانا في ارسال البيانات‪.‬‬

‫‪ . 3‬البيانات تظهر في لينك الموقع‪.‬‬ ‫‪ . 3‬البيانات لاتظهر في لينك الموقع‪.‬‬

‫‪ . 4‬اكثر تعرض للإختراق‪.‬‬ ‫‪ . 4‬اقل تعرض للإختراق‪.‬‬

‫‪ . 5‬لا يستخدم في ارسال بيانات‬ ‫‪ . 5‬يستخدم لإرسال بيانات مثل‬

‫حساسة مثل الباسورد او معلومات‬ ‫الباسورد او معلومات بنكية‪.‬‬
‫بنكية‪.‬‬

‫• ‪Form labels‬‬
‫وسم >‪ <label‬هو ‪ inline level‬واستخدامه الشائع هو لكتابة النصوص مع ‪inputs‬‬
‫>‪<label> I am a label </label‬‬
‫>"‪<input type="text‬‬

‫‪ – 16‬الادخال – ‪Input‬‬

‫• وسم >‪ <input‬له انواع كثيرة من خلال ‪ attribute‬الـ ‪ .. type‬وانواع قيمة السمة هي‬
‫‪ Text o‬لكتابة نص في حقل الادخال‪.‬‬
‫‪ Radio o‬لإختيار اختيار واحد فقط من اختيارات متعددة‪.‬‬
‫‪ Checkbox o‬لإختيار اختيار واحد او اكثر من اختيارات متعددة‪.‬‬
‫‪ password o‬لكتابة باسورد ويظهر النص مخفي علي شكل نجوم‪.‬‬
‫‪ Number o‬لكتبة رقم‪/‬عدد‪.‬‬
‫‪ Email o‬لكتابة ايميل‪.‬‬
‫‪ Tel o‬لكتابة رقم هاتف‪.‬‬
‫‪ url o‬لكتابة رابط موقع‪.‬‬
‫‪ Time o‬لإختيار وقت معين‪.‬‬
‫‪ Date o‬لإختيار تار يخ معين‪.‬‬
‫‪ Week o‬لإختيار رقم اسبوع معين (اسبوع‪/‬سنة)‪.‬‬
‫‪ Month o‬لإختيار شهر معين (شهر‪/‬سنة)‪.‬‬
‫‪ Color o‬لإختيا‪/‬معرفة اللون‪.‬‬

‫‪16‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫‪ File‬لإختيار ملف وعمل له رفع‪upload/‬‬ ‫‪o‬‬
‫‪ Datetime-local‬لإختيار تار يخ وو قت معين‪.‬‬ ‫‪o‬‬
‫‪ Hidden‬لإخفاء قيمة الـ ‪input‬‬ ‫‪o‬‬
‫‪ Range‬يستخدم لوضع مقياس (تكبير او تصغير ‪ /‬رفع او خفض الصوت)‪.‬‬ ‫‪o‬‬
‫‪ Search‬لعمل مربع بحث‪.‬‬ ‫‪o‬‬
‫‪ Submit‬لارسال البيانات الي صفحة الـ‪action‬‬ ‫‪o‬‬
‫‪ Reset‬لمسح كل المدخلات التي تم ادخالها‪.‬‬ ‫‪o‬‬
‫يوجد قيم اخري ولكن هؤلاء اشهرهم ويمكنك البحث عن جميع قيم‬ ‫‪o‬‬
‫‪ input type‬ان اردت معرفة المز يد عنهم‪.‬‬

‫• ‪Input attributes‬‬
‫‪ Autocapitalize o‬تجعل كل الحروف كبيرة‪capital/‬‬
‫‪ Autocomplete o‬لإخبار المتصفح انه يدخل البيانات المحفوظة لديه اتوماتيكا‬
‫لمربع الادخال هذا ولكن اذا كانت مفعلة للنموذج كله فلاداعي لكتابتها هنا‪.‬‬
‫‪ Value o‬تستخدم لتحديد القيمة الإفتراضية لمربع الادخال‪.‬‬
‫‪ Autofocus o‬للتركيز علي المربع عن الكتابة فيه‪.‬‬
‫‪ Disabled o‬لإلغاء تفعيل الكتابة في مربع الإدخال‪.‬‬
‫‪ Max o‬لتحديد اكبر قيمة تكتب‪.‬‬
‫‪ Min o‬لتحديد اصغر قيمة تكتب‪.‬‬
‫‪ Maxlength o‬لتحديد اكبر طول ما يكتب (نص او رقم)‪.‬‬
‫‪ Minlength o‬لتحديد اقل طول ما يكتب (نص او رقم)‪.‬‬
‫‪ Multiple o‬لتحديد اكثر من شئ (علي سبيل المثال تستخدم في رفع ملفات)‪.‬‬
‫‪ Name o‬لكتابة اسم الحقل‪/‬مربع الادخال والذي سيرسل مع البيانات للـ‪server‬‬
‫‪ Placeholder o‬لكتابة وصف للزائر ما سيكتب في مربع الادخال ويكون غير‬
‫مرئي عندما يكتب الزائر في حقل الادخال‪.‬‬
‫‪ Required o‬معناها ان مربع الادخال هذا مطلوب الإدخال فيه ولا تتركه فارغا‪.‬‬
‫‪ Spellcheck o‬لتصحيح الكلمات المكتوبة خطأ (الاخطاء الاملائية) من قبل‬
‫الزائر اذا كانت القيمة ‪ true‬اما القيمة ‪ false‬فلا يتم التحقق من الاخطاء‪.‬‬
‫‪ For o‬تكتب في وسم >‪ <label‬وتستخدم لربط الوسم بوسم ‪ input‬من خلال‬
‫كتابة ‪ for‬في وسم >‪ <label‬و ‪ id‬في وسم >‪ <input‬وتكون قيمهم واحدة‪.‬‬

‫‪17‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫‪ – 17‬وسوم اخري مهمة – ‪Important other html tags‬‬

‫• وسم >‪ <textarea‬يستخدم لكتابة نص في مربع قابل للز يادة او النقصان في الحجم‬
‫ومن ‪ attributes‬هذا الوسم‬
‫‪ Rows o‬لوضع عدد الصفوف‬
‫‪ Cols o‬لوضع عدد الاعمدة‬
‫‪ Placeholder o‬لكتابة وصف للزائر ما سيكتب في حقل الادخال‪.‬‬
‫"اكتب رسالتك =‪< textarea id="ta" raws="5" cols="30" placeholder‬‬
‫>‪></teaxtarea‬هنا‪"...‬‬

‫• وسم >‪ <iframe‬يستخدم لإدراج صفحة موقع اخر داخل موقعك او إدراج ملف مثل‬
‫ملف بصيغة ‪ pdf‬داخل موقعك ومن ‪ attributes‬هذا الوسم‬
‫‪ Src o‬وتكو ن قيمته هو رابط الموقع او الملف المراد ادراجه بموقعي‪.‬‬
‫‪ Scrolling o‬وتكون قيمته ‪ no‬اذا اردنا منع الزائر من عمل سكرول بالماوس داخل‬
‫‪ifram‬‬
‫‪ Frameborder o‬وهو المسئول عن اظهار واخفاء حدود‪/‬اطار الـ ‪ iframe‬وتون‬
‫قيمته الافتراضية هي ‪ 1‬وهي اظهار الاطار او اذا اردنا اخفاءه فنكتب ‪ 0‬كقيمة‪.‬‬
‫‪ Width o‬لتحديد عرض وسم ‪ iframe‬المعروض في الموقع‪.‬‬
‫‪ Height o‬لتحديد طول وسم ‪ iframe‬المعروض في الموقع‪.‬‬

‫• الوسائط (الصوت و الفيديو ) ‪Media (audio and video) -‬‬

‫يمكننا ادراج ملف صوتي او فيديو للموقع ويمكن ذلك عن طر يق وسم >‪<audio‬‬
‫لإدراج ملف صوتي ووسم >‪ <video‬لإدراج ملف فيديو‬
‫>‪<audio controls‬‬
‫>"‪<source src="morning.mp3" type="audio/mp3‬‬
‫>‪</audio‬‬
‫هذه الاكواد لادراج ملف صوتي وتم الاستعانة بوسم >‪ <source‬لوضع مسار الملف‬
‫وبالـ ‪ attributes‬مثل ‪ controls‬في وسم البداية لاظهار ازرار التحكم للملف من تشغيل‬
‫وايقاف وتكرار ‪ ..‬و ب ‪ src‬لوضع مسار الملف و ‪ type‬لإخبار المتصفح بنوع الملف‬
‫ويمكننا وضع نفس الملف بصيغ اخري لان بعض المتصفحات لاتتدعم الا صيغ معينة‪.‬‬

‫‪18‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫>‪<video controls‬‬
‫>"‪<source src="morning.mp4" type="video/mp4‬‬
‫>‪</video‬‬
‫هذه الاكواد لادراج ملف فيديو وتم الاستعانة بوسم >‪ <source‬لوضع مسار الملف‬
‫وبالـ ‪ attributes‬مثل ‪ controls‬في وسم البداية لاظهار ازرار التحكم للملف من تشغيل‬
‫وايقاف وتكرار ‪ ..‬و ب ‪ src‬لوضع مسار الملف و ‪ type‬لإخبار المتصفح بنوع الملف‬
‫ويمكننا وضع نفس الملف بصيغ اخري لان بعض المتصفحات لاتتدعم الا صيغ‬
‫معينة‪.‬وتوجد بعض السمات الاخري التي يمكن اضافتها في وسم البداية سواء لوسم‬
‫الصوت او وسم الفيديو مثل‬
‫‪ Width‬لوضع عرض الوسم و ‪ height‬لوضع طول الوسم بالصفحة‬
‫و ‪ Autoplay‬لتشغيل تلقائي للملف و ‪ loop‬لتكرار تشغيل الملف مرة اخري‬
‫و ‪ mated‬لعدم تشغيل الصوت في الملف‪.‬‬

‫• القائمة المنسدلة – ‪Dropdown list‬‬

‫لإدراج قائمة منسدلة يتم الاختيار من بين عناصرها‬
‫نستخدم فيها وسمين الوسم الرئيسي هو >‪ <select‬و عناصر القائمة تكتب من خلال‬
‫وسم >‪<option‬‬
‫>"‪<select id="fruits‬‬
‫>‪<option value="apple"> apple </option‬‬
‫>‪<option value="orange"> orange </option‬‬
‫>‪</select‬‬
‫لو اردنا اختيار اختيارات متعددة نستخدم ‪ attribute‬يسمي ‪ multiple‬بوسم >‪<select‬‬

‫• وسم >‪<head‬‬
‫تستخدم الوسوم بين وسمي >‪ <head></head‬لإضافة معلومات عن الموقع وغير‬
‫ظاهرة للزائر ولكن تفيد الموقع مثل‬
‫‪ o‬وسم >‪ <meta‬في محركات البحث عندما يبحث الزائر عن شئ ما فيظهر موقعنا‬
‫وهذا الوسم له قيمة كبيرة في تحسين محركات البحث او ما يسمي بــ ‪SEO‬‬
‫يمكنك البحث عن هذا المصطلح وستندهش عندما تعرف قيمته لموقعك‪.‬‬
‫‪▪ <meta name="viewport" content="width=device-width, initial-‬‬
‫>"‪scale=1.0‬‬
‫ن ضيف هذا السطر لكي يتوافق موقعنا مع كل الاجهزة سواء كمبيوتر او موبايل او‬
‫تابلت او اجهزة بشاشات مختلفة‪.‬‬

‫‪19‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫>"‪▪ <meta charset="UTF-8‬‬
‫نضيف هذا السطر لتحديد نوع ترميز الصفحة وهذا هو ترميز يدعم اللغة العربية‬
‫والانجليز ية ويظهرهم بطر يقة صحيحة ويوجد ترميزات اخري ولكن هذا اشهرهم‪.‬‬
‫>"‪▪ <meta name="description" content="First Web page‬‬
‫نضيف هذا السطر لوصف الموقع بكلمات تسهل من عملية العثور عليه عند البحث‪.‬‬
‫>"‪▪ <meta name="keywords" content="HTML, first web page‬‬
‫نضيف هذا السطر لوصف الموقع ولكن من خلال كلمات محددة وهي غير مفيدة‬
‫لمحرك البحث ‪ Google‬او ‪ Bing‬ولكن بعض محركات البحث الاخري تستخدمها‪.‬‬

‫• وسم >‪<title‬‬
‫وسم اساسي وفيه نكتب اسم الموقع الذي سيظهر اعلي نافذة المتصفح في‬
‫لسان‪ Tab/‬النافذة‪.‬‬

‫• وسم >‪<link‬‬
‫وظيفته هو لربط ملفات خارجية مثل ‪ CSS‬وملفات اخري بملف الـ ‪html‬‬

‫• يمكننا كتابة اكواد ‪ style‬من خلال وسم >‪ <style‬وهذا سنتكلم عنه في كورس الـ ‪CSS‬‬
‫ويمكننا ايضا كتابة اكواد ‪ JavaScript‬من خلال وسم >‪ <script‬وسنتكلم عنه في‬
‫كورس الجافا سكر يبت‪.‬‬

‫• وسمي >‪ <canvas‬و >‪<svg‬‬

‫وسم >‪ <canvas‬يستخدم لرسم الرسومات علي صفحة الويب‪.‬‬
‫>‪<canvas id="myCanvas" width="100" height="100"></canvas‬‬

‫وسم >‪ <svg‬يستخدم ايضا لرسم الرسومات علي صفحة الويب و لكن رسومات ‪vector‬‬
‫قابلة للتحجيم‬

‫(المثال من موقع ‪)w3schools‬‬ ‫المثال التالي لرسم دائرة‬

‫>"‪<svg width="100" height="100‬‬

‫"‪<circle cx="50" cy="50" r="40" stroke="green" strokewidth="4‬‬
‫>‪fill="yellow" /‬‬
‫>‪</svg‬‬

‫لمعرفة المز يد ودراسة ‪ Canvas‬اضغط هنا‬

‫لمعرفة المز يد ودراسة ‪ SVG‬اضغط هنا‬

‫‪20‬‬
‫تعلم ‪M.G.E – HTML‬‬
‫‪ – 18‬ملاحظات – ‪Notes‬‬
‫سنتكلم عن بعض الملاحظات الهامة في ‪HTML‬‬
‫• مسارات الملفات – ‪Files Paths‬‬
‫تكلمنا في الامثلة السابقة اذا اردنا ان ندر ج ملف او صورة لابد ان تركز في مسار‬
‫الملف هل هو في نفس مجلد‪ folder/‬او في مجلد اخر‬
‫اذا كان في نفس المجلد يتم ادراج صورة علي سبيل المثال هكذا‬

‫>"‪<img src="sky.png" alt="sky‬‬

‫اذا كان في مجلد اخر بإسم ‪ images‬مثلا فيتم الإدراج هكذا‬

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

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

‫• اذا اردنا كتابة بعض العلامات والاشكال المعينة مثل اكبر من واصغر من وغيرهم‬
‫هذه العلامات تسمي بـــ ‪Character Entites‬‬
‫‪ &nbsp; o‬لاعطاء مسافة بين كلمتين في نفس السطر‪.‬‬
‫‪ &lt o‬لإضافة علامة اصغر من‪.‬‬
‫‪ &gt o‬لإضافة علامة اكبر من‪.‬‬
‫‪ &copy o‬لإضافة علامة ©‬
‫‪ o‬إذا اردت القائمة الكاملة لهم اضغط هنا‪.‬‬

‫مبروك‬
‫انت حاليا خلصت معظم المسافة في تعلم ‪HTML‬‬

‫تعالي نبدأ بقي في اجابة الاسئلة التالية‬

‫وبعديها اسئلة الانترفيو‬

‫وبعديها تبدأ في تعلم الـ ‪CSS‬‬

‫وتصمم مواقع ثابتة‪ static/‬وتبدأ في كسب المال‬

‫ولا تكن كسولًا يا صديقي وانجز في تعلم الكورسات الاخري‬

‫‪21‬‬
M.G.E – HTML ‫تعلم‬
w3schools ‫ – اسئلة واجابات موقع‬19

1. What does HTML stand for?

o Hyperlinks and Text Markup Language
o Home Tool Markup Language
o Hyper Text Markup Language
2. Who is making the Web standards?
o The World Wide Web Consortium
o Mozilla
o Microsoft
o Google
3. Choose the correct HTML element for the largest heading:
o <heading>
o <head>
o <h1>
o <h6>
4. What is the correct HTML element for inserting a line break?
o <br>
o <lb>
o <break>
5. What is the correct HTML for adding a background color?
o <background>yellow</background>
o <body bg="yellow">
o <body style="background-color:yellow;">
6. Choose the correct HTML element to define important text
o <important>
o <strong>
o <i>
o <b>
7. Choose the correct HTML element to define emphasized text
o <italic>
o <i>
o <em>

22
M.G.E – HTML ‫تعلم‬
8. What is the correct HTML for creating a hyperlink?
o <a href="http://www.w3schools.com">W3Schools</a>
o <a>http://www.w3schools.com</a>
o <a name="http://www.w3schools.com">W3Schools.com</a>
9. Which character is used to indicate an end tag?
o <
o /
o ^
o *
10. How can you open a link in a new tab/browser window?
o <a href="url" target="new">
o <a href="url" target="_blank">
o <a href="url" new>
11. Which of these elements are all <table> elements?
o <thead><body><tr>
o <table><tr><tt>
o <table><head><tfoot>
o <table><tr><td>
12. Inline elements are normally displayed without starting a new line.
o True
o False
13. How can you make a numbered list?
o <ul>
o <dl>
o <ol>
o <list>
14. How can you make a bulleted list?
o <dl>
o <ol>
o <ul>
o <list>
15. What is the correct HTML for making a checkbox?
o <input type="checkbox">
o <input type="check">
o <check>
o <checkbox>

23
M.G.E – HTML ‫تعلم‬
16. What is the correct HTML for making a text input field?
o <input type="text">
o <textfield>
o <textinput type="text">
o <input type="textfield">
17. What is the correct HTML for making a drop-down list?
o <list>
o <input type="dropdown">
o <select>
o <input type="list">
18. What is the correct HTML for making a text area?
o <input type="textarea">
o <input type="textbox">
o <textarea>
19. What is the correct HTML for inserting an image?
o <img src="image.gif" alt="MyImage">
o <image src="image.gif" alt="MyImage">
o <img href="image.gif" alt="MyImage">
o <img alt="MyImage">image.gif</img>
20. What is the correct HTML for inserting a background image?
o <body bg="background.gif">
o <body style="background-image:url(background.gif)">
o <background img="background.gif">
21. An <iframe> is used to display a web page within a web page.
o True
o There is no such thing as an <iframe>
o False
22. HTML comments start with <!-- and end with -->
o True
o False
23. Block elements are normally displayed without starting a new line.
o False
o True

24
M.G.E – HTML ‫تعلم‬
24.Which HTML element defines the title of a document?
o <meta>
o <head>
o <title>
25. Which HTML attribute specifies an alternate text for an image, if the
image cannot be displayed?
o Title
o Src
o Alt
o Longdesc
26. Which doctype is correct for HTML5?
o <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN"
"http://www.w3.org/TR/html5/strict.dtd">
o <!DOCTYPE HTML5>
o <!DOCTYPE html>
27. Which HTML element is used to specify a footer for a document or
section?
o <bottom>
o <section>
o <footer>
28. In HTML, you can embed SVG elements directly into an HTML page.
o True
o False
29. What is the correct HTML element for playing video files?
o <movie>
o <media>
o <video>
30. What is the correct HTML element for playing audio files?
o <mp3>
o <sound>
o <audio>

25
M.G.E – HTML ‫تعلم‬
31. The HTML global attribute, "contenteditable" is used to:
o Return the position of the first found occurrence of content inside
a string
o Specify whether the content of an element should be editable or
not
o Specifies a context menu for an element. The menu appears when
a user right-clicks on the element
o Update content from the server
32. In HTML, onblur and onfocus are:
o Style attributes
o HTML elements
o Event attributes
33. Graphics defined by SVG is in which format?
o HTML
o XML
o CSS
34.The HTML <canvas> element is used to:
o draw graphics
o display database records
o create draggable elements
o manipulate data in MySQL
35. In HTML, which attribute is used to specify that an input field must be
filled out?
o Validate
o Formvalidate
o Required
o Placeholder
36. Which input type defines a slider control?
o Search
o Slider
o Range
o Controls

26
M.G.E – HTML ‫تعلم‬
37. Which HTML element is used to display a scalar measurement within a
range?
o <range>
o <gauge>
o <measure>
o <meter>
38. Which HTML element defines navigation links?
o <navigation>
o <nav>
o <navigate>
39. In HTML, what does the <aside> element define?
o A navigation list to be shown at the left side of the page
o The ASCII character-set; to send information between computers
on the Internet
o Content aside from the page content
40.Which HTML element is used to specify a header for a document or
section?
o <top>
o <section>
o <header>
o <head>

‫اجابات الاسئلة السابقة‬

‫الرقم التالي هو ترتيب الاجابة في اجابات السؤال‬

‫ اجابات‬10 ‫وسنكتب في كل صف‬

2 /2/1/3/2/3/1/3/1/3

2/1/3/3/1/1/3/3/1/4

3 /3/2/3/3/3/3/1/1/1

3 /3 /2/4/3/3/1/2/3/2

27
M.G.E – HTML ‫تعلم‬
Interviews Questions – ‫ – اسئلة الانترفيو‬20
)edureka( ‫من موقع‬

Q1. What is HTML?

HTML stands for Hyper Text Markup Language. It is a language of the World
Wide Web. It is a standard text formatting language which is used to create
and display pages on the Web. HTML makes the text more interactive and
dynamic. It can turn text into images, tables, links. HTML pages are saved by
adding .html or .html in web page name.

Q2. What is the difference between HTML elements and tags?

Elements Tags

The element is an individual It is the root of the HTML document

component of the HTML web page which is used to specify that the
or document. It represents semantics document is HTML. For example, the
or meaning. For example, the title Head tag is used to contain all the
element represents the title of the head element in the HTML file.
document.

Q3. What are Attributes and how do you use them?

Each tag has additional attributes that change the way the tag behaves or is
displayed. For example, a <input> tag has a type attribute, which you can use
to specify whether it’s a text field, checkbox, radio button or one of many more
options.
Attributes are specified directly after the name of the tag, inside the two
angled brackets. They should only ever appear in opening tags or in self-
closing tags. But, they can never be in closing tags.

28
M.G.E – HTML ‫تعلم‬
Example:

<!-- Text field -->

<input type="text" />

<!-- Checkbox -->

<input type="checkbox" />

<!-- Radio button -->

<input type="radio" value="on" />

Q4. What is the difference between a block-level element and an inline

element?

Block Inline

A block-level element is drawn as a Inline elements are drawn where

block that stretches to fill the full they are defined and only take up
width available to it i.e, the width of space that is absolutely needed. The
its container and will always start on easiest way to understand how they
a new line. work is to look at how text flows on
Elements that are block-level by a page.
default: <div>, <img>, <section>, Examples of elements that are inline
<form>, <nav>. by default: <span>, <b>, <strong>,
<a>, <input>.

Q5. When are comments used in HTML?

To understand the code easily, you can add code comments to your HTML
document. These are not displayed in the browser, but they help you in leaving
notes for yourself and other developers as to what a section of HTML is for.
The start of the comment is denoted by <!– and the end is marked by — >.
Anything in the middle will be completely ignored, even if it contains
valid HTML.

29
M.G.E – HTML ‫تعلم‬
For example:

<!-- This is a comment! -->

<!-- Comments can span multiple lines too -->

<!-- This part is ignored in the browser -->

Q6. What are the HTML tags used to display the data in the tabular form?

The list of HTML tags used to display data in the tabular form include:

Tag Description

<table> It defines a table

<tr> This tag defines a row in a table

<th> It defines a header cell in a table

<td> This is used to define a cell in a table

<caption> It defines the table caption

<colgroup> It specifies a group of one or more columns in a table for

formatting

<col> This is used with <colgroup> element to specify column

properties for each column

<tbody> This tag is used to group the body content in a table.

<thead> It is used to group the header content in a table

<tfooter> It is used to group the footer content in a table

30
M.G.E – HTML ‫تعلم‬
Q7. How to create a Hyperlink in HTML?

The HTML provides an anchor tag to create a hyperlink that links one page to
another page. These tags can appear in any of the following ways:

Unvisited link – It is displayed, underlined and blue.

Visited link – It is displayed, underlined and purple.

Active link – It is displayed, underlined and red.

The syntax of Hyperlink in HTML is:

<a href = "..........."> Link Text </a>

Q8. Name some common lists that are used when designing a page.
There are many common lists used for design a page. You can choose any or a
combination of the following list types:

Ordered list – The ordered list displays elements in a numbered format. It is

represented by <ol> tag.
Unordered list – The unordered list displays elements in a bulleted format. It is
represented by <ul> tag.

Definition list – The definition list displays elements in definition form like in a
dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

Q9. What is semantic HTML?

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the
semantics or meaning of the content. For example: In semantic HTML <b>
</b> tag is not used for bold statement as well as <i> </i> tag is used for
italic. Instead of these we use <strong></strong> and <em></em> tags.

31
M.G.E – HTML ‫تعلم‬
Q10. How to create a nested webpage in HTML?

The HTML iframe tag is used to display a nested webpage. In other words, it
represents a webpage within a webpage. The HTML <iframe> tag defines an
inline frame.

For example:

<!DOCTYPE html>

<html>

<body>

<h2>HTML example</h2>

Use the height and width attributes to specify the size of the
iframe:

<iframe src="<a
href="https://www.edureka.co/">https://www.edureka.co/</a>"
height="300" width="400"></iframe>

</body>

</html>

Q11. What is an image map?

An image map is used for linking many different web pages using a single
image. It is represented by <map> tag. You can define shapes in images that
you want to include as part of an image mapping.

Q12. Does a hyperlink only apply to text?

No, hyperlinks can be used both on texts and images. The HTML anchor tag
defines a hyperlink that links one page to another page. The “href” attribute is
the most important attribute of the HTML anchor tag.

Syntax:

<a href = "..........."> Link Text </a>

32
M.G.E – HTML ‫تعلم‬
Q13. What is a Style Sheet?

A style sheet is used to build a consistent, transportable, and well-

designed style template. You can add these templates on several different web
pages. It describes the look and formatting of a document written in the
markup language.

Q14. Explain the layout of HTML.

HTML layout specifies a way in which the web page is arranged. Every website
has a specific layout to display content in a specific manner. Following are
different HTML elements which are used to define the different parts of a
webpage:

<header>: It is used to define a header for a document or a section.

<nav>: This defines a container for navigation links

<section>: It is used to define a section in a document

<article>: This is used to define an independent, self-contained article

<aside>: It is used to define content aside from the content

<footer>: It is used to define a footer for a document or a section

33
M.G.E – HTML ‫تعلم‬
Q15. What is a marquee?

Marquee is used for the scrolling text on a web page. It scrolls the image or
text up, down, left or right automatically. You should put the text which you
want to scroll within the <marquee>……</marquee> tag.

Q16. What are the tags used to separate a section of texts?

There are three tags that can be used to separate the texts:

<br> tag – Usually <br> tag is used to separate the line of text. It breaks the
current line and conveys the flow to the next line

<p> tag – This contains the text in the form of a new paragraph.

<blockquote> tag – It is used to define a large quoted section. If you have a

large quotation, then put the entire text
within <blockquote>……….</blockquote> tag.

Q17. What is the difference between DIV and SPAN in HTML?

The difference between span and div is that a span element is in-line and
usually used for a small chunk of HTML inside a line,such as inside a paragraph.
Whereas, a div or division element is block-line which is equivalent to having a
line-break before and after it and used to group larger chunks of code.

Example:

<div id="HTML">

This is <span class="Web Dev">interview</span>

</div>

Q18. What is the purpose of using alternative texts in images?

The purpose of using alternative texts is to define what the image is about.
During an image mapping, it can be confusing and difficult to understand what
hotspots correspond to a particular link. These alternative texts come in action
here and put a description at each link which makes it easy for users to
understand the hotspot links easily.

34
M.G.E – HTML ‫تعلم‬
Q19. How to create a new HTML element?

You can create new elements for the document in the following way:

<script>

document.createElement )"myElement"(

</script>

It can be also be used in the HTML as:

<myElement>hello edureka!</myElement>

Q20. Is the <!DOCTYPE html> tag considered as a HTML tag?

No, the <!DOCTYPE html> declaration is not an HTML tag.

There are many type of HTML, such as, HTML 4.01 Strict, HTML 4.01
Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional,
XHTML 1.0 Frameset, XHTML 1.1 etc. So, <!DOCTYPE html> is used to instruct
the web browser about the HTML page.

Q21. Why is a URL encoded in HTML?

An URL is encoded to convert non-ASCII characters into a format that can be

used over the Internet because a URL is sent over the Internet by using the
ASCII character-set only. If a URL contains characters outside the ASCII set, the
URL has to be converted. The non-ASCII characters are replaced with a “%”
followed by hexadecimal digits.

Q22. What is the use of an iframe tag?

An iframe is used to display a web page within a web page.

Syntax:

<iframe src="URL"></iframe>

Example:

<iframe src="demo_iframe.html" width="200px" height="200px"></iframe>

Target to a link:

<iframe src="http://www.edureka.co" name="iframe_a"></iframe>

35
M.G.E – HTML ‫تعلم‬
Q23. What are the entities in HTML?

The HTML character entities are used as a replacement for reserved characters
in HTML. You can also replace characters that are not present on your
keyboard by entities. These characters are replaced because some characters
are reserved in HTML.

Q24. Can you create a multi-colored text on a web page?

Yes, we can create a multi-colored text on a web page. To create a multicolor
text, you can use <font color =”color”> </font> for the specific texts that you
want to color.

Q25. How to make a picture of a background image of a web page?

To make a picture a background image on a web page, you should put the
following tag code after the </head> tag.

<body background = "image.gif">

Here, replace the “image.gif” with the name of your image file which you want
to display on your web page.

Q26. What is the use of a span tag? Explain with example.

The span tag is used for following things:

For adding color on text

To add background on text

Highlight any color text

Example:

<span style="color:#ffffff;">

In this page we use span.

</span>

36
M.G.E – HTML ‫تعلم‬
Q27. What is the advantage of collapsing white space?

White spaces are a blank sequence of space characters, which is treated as a

single space character in HTML. Because the browser collapses multiple spaces
into a single space, you can indent lines of text without worrying about
multiple spaces. This enables you to organize the HTML code into a much
more readable format.

Q28. Is there any way to keep list elements straight in an HTML file?
By using indents, you can keep the list elements straight. If you indent each
sub nested list in further than the parent list, you can easily determine the
various lists and the elements that it contains.
Q29. Explain The Key Differences Between LocalStorage And SessionStorage
Objects.

The key differences between localStorage and sessionStorage objects are as

follows:
The localStorage object stores the data without an expiry date. However,
sessionStorage object stores the data for only one session.

In the case of a localStorage object, data will not delete when the browser
window closes. However, the data gets deleted if the browser window closes,
in the case of sessionStorage objects.
The data in sessionStorage is accessible only in the current window of the
browser. But, the data in the localStorage can be shared between multiple
windows of the browser.

Q30. When is it appropriate to use frames?

Frames can make navigating a site much easier. If the main links to the site are
located in a frame that appears at the top or along the edge of the browser,
the content for those links can be displayed in the remainder of the browser
window.

37
M.G.E – HTML ‫تعلم‬
Q31. How to insert a picture into a background image of a web page?

To insert a picture into the background image, you need to place a tag code
after the </head> tag in the following way:

<body background = “image.gif”>

Now, replace image.gif with the name of your image file. This will take the
picture and make it the background image of your web page.

Q32. What happens if you open the external CSS file in a browser?
When you try to open the external CSS file in a browser, the browser cannot
open the file, because the file has a different extension. The only way to use an
external CSS file is to reference it using <link/> tag within another HTML
document.

Q33. What is the hierarchy that is being followed when it comes to style
sheets?
If a single selector includes three different style definitions, the definition that
is closest to the actual tag takes precedence. Inline style takes priority over
embedded style sheets, which takes priority over external style sheets.
Q34. How do you create text on a webpage that allows you to send an email
when clicked?

To change the text into a clickable link to send an email, you need to use the
mailto command within the href tag. You can write it in the following way:

<a href=”mailto:youremailaddress”>text to be clicked</a>

Q35. How are active links different from normal links?

The default color for normal and active links is blue. Some browsers recognize
an active link when the mouse cursor is placed over that link. Whereas, others
recognize active links when the link has the focus. Those that don’t have a
mouse cursor over that link is considered a normal link.

38
M.G.E – HTML ‫تعلم‬

Q36. What are the different tags to separate sections of text?

The <br> tag is one way to separate the lines of text. There are other tags like
the <p> tag and <blockquote> tag that are also used to separate sections of
text.

Q37. Are there instances where the text will appear outside of the browser?

By default, the text is wrapped to appear within the browser window. However,
if the text is part of a table cell with a defined width, the text could extend
beyond the browser window.

Q38. Write an HTML table tag sequence that outputs the following:

50 pcs 100 500

10 pcs 5 50

The HTML Code for the above problem is:

<table>

<tr>

<td>50 pcs</td>

<td>100</td>

<td>500</td>

</tr>

<tr>

<td>10 pcs</td>

<td>5</td>

<td>50</td>

</tr>

</table>

39
M.G.E – HTML ‫تعلم‬

Q39. What is the advantage of grouping several checkboxes together?

The checkboxes don’t affect one another. But, grouping these checkboxes
together help to organize them. Checkbox buttons can have their name and do
not need to belong to a group. A single web page can have many different
groups of checkboxes.
Q40. What happens if there is no text between the tags? Does this affect the
display of the HTML file?

If there is no text present between the tags, there is nothing to format.

Therefore, no formatting will appear. Some tags, such as the tags without a
closing tag like the <img> tag, do not require any text between them.

Q41. What are the limits of the text field size?

The default size for a text field is around 13 characters. However, if you include
the size attribute, you can set the size value to be as low as 1. The maximum
size value will be determined by the browser width. Also, if the size attribute is
set to 0, the size will be set to the default size of 13 characters.

Q42. What is the relationship between the border and rule attributes?
Default cell borders, with a thickness of 1 pixel, are automatically added
between cells if the border attribute is set to a nonzero value. Similarly, If the
border attribute is not included, a default 1-pixel border appears when the
rules attribute is added to the <table> tag.

Q43. What is SVG?

HTML SVG is used to describe the two-dimensional vector and vector or raster
graphics. SVG images and their behaviors are defined in XML text files. So as
XML files, you can create and edit an SVG image with the text editor. It is
mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in
an X, Y coordinate system.

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />

</svg>

40
M.G.E – HTML ‫تعلم‬

Q44. What is button tag?

The button tag is used in HTML 5. It is used to create a clickable button within
the HTML form on the web page. This tag creates a “submit” or “reset” button.
The button tag code is as follows:

<button name="button" type="button">Click Here</button>

Q45. List the media types and formats supported by HTML.

HTML supports a wide range of media formats for sound, music, videos,
movies, and animations. Some of the extensions supported by each media
format are:

Images– png, jpg, jpeg, gif, apng, svg, bmp, BMP ico, png ico

Audio– MIDI, RealAudio, WMA, AAC, WAV, Ogg, MP3, MP4

Video– MPEG, AVI, WMV, QuickTime, RealVideo, Flash, Ogg, WebM, MPEG-4
or MP4

Q46. What is Cell Spacing and Cell Padding?

Cell Spacing is referred to as the space or gap between the two cells of the
same table. Whereas, Cell Padding is referred to as the gap or space between
the content of the cell and cell wall or cell border.

Example:

<table border cellspacing=3>

<table border cellpadding=3>

<table border cellspacing=3 cellpadding=3>

Q47. What is difference between HTML and XHTML?

The differences between HTML and XHTML are:

HTML is an application of Standard Generalized Markup Language. Whereas,
XML is an application of Extensible Markup Language.

The first one is a static Web Page whereas the later one is a dynamic Web
Page.

41
M.G.E – HTML ‫تعلم‬
HTML allows programmer to perform changes in the tags and use attribute
minimization whereas XHTML when user need a new markup tag then user can
define it in this.
HTML is about displaying information whereas XHTML is about describing the
information.

Q48. How many types of CSS can be included in HTML?

There are three ways to include the CSS with HTML:

Inline CSS: It is used for styling small contexts. To use inline styles add the style
attribute in the relevant tag.
External Style Sheet: This is used when the style is applied to many pages. Each
page must link to the style sheet using the <link> tag. The <link> tag goes
inside the head section.

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>
Internal Style Sheet: It is used when a single document has a unique style.
Internal styles sheet needs to put in the head section of an HTML page, by
using the <style> tag in the following way:

<head>

<style type="text/css">

hr {color:sienna}

p {margin-left:20px}

body {background-image:url("images/back40.gif")}

</style>

</head>

42
M.G.E – HTML ‫تعلم‬
Q49. What are logical and physical tags in HTML?

Logical tags are used to tell the meaning of the enclosed text. The example of
the logical tag is <strong> </strong> tag. When we enclose the text in the
strong tag, it tells the browser that enclosed text is more important than other
texts.

Physical tags are used to tell the browser how to display the text enclosed in
the physical tag. Some of the examples of physical tags are <b>, <big>, <i>.

Q50. Write your question here!

.‫إذا لم تكن تعرف اي جملة فقم بترجمتها وتعلم كلماتها‬

‫هذه معظم اسئلة الانترفيو ولكن يمكنك البحث عن اسئلة اكثر او اكثرهم استخداما في‬
.‫الانترفيو‬

‫مبروك‬
HTML ‫انت الان انتهيت من كتاب تعلم‬
CSS ‫سنبدأ الان في تعلم‬
‫وسم‬/tag ‫قم بالبحث والتدريب علي بعض الاكواد لكي لا تنسي اي‬

‫محمد جمال عيد‬

Muhammad Gamal Eid
2022

43