Html-Lesson 3

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

‫أساسيات لغة ‪html‬‬
‫• لغة ‪ html‬هدفها أن تتفاعل مع المتصفح الخاص بك لتعرض عليه العناصر التي تريدها‬
‫مثل النصوص والصور والفيديوهات والروابط واألزرار وغير ذلك وتتحكم في خصائص‬
‫كل عنصرمما سبق‬
‫• ليس المهم أن تحفظ كل األكواد الخاصة باللغة فهي جميعًا متوفرة على اإلنترنت ولكن األهم‬
‫أن تتعلم الطريقة األنسب في ترتيب األكواد والتنسيق بينها لتعطي صفحات مرتبة ومنظمة‬
‫تجذب المستخدم لها‬
‫• كما سبق وذكرنا فليس للغة ‪ html‬األشياء المعروفة في باقي لغات البرمجة مثل الحلقات‬
‫والشروط وغير ذلك ولكنها مجموعة من األوامر التي تعطى مباشرة للمتصفح ليقوم بعرضها‬
‫ووظيفتك هي أن تعرف كل أمر من هذه األوامر وطريقة استخدامه‬
‫‪1‬‬
‫• األوامر التي تعتمد عليها لغة ‪ html‬في األساس تسمى بالوسوم أو ال ‪ Tags‬وكل ‪ tag‬منهم‬
‫أمرا معينًا فمثال ‪ tag‬لكتابة النصوص و ‪ tag‬إلضافة الصور و ‪ tag‬إلضافة األزرار‬
‫يفعل ً‬
‫وهكذا‬
‫• تكتب ال ‪ tags‬بين قوسين >< ويوضع بينهم اسم ال ‪ tag‬وقد يكون نوع ال ‪ tag‬مفرد أو‬
‫زوجي يعني إما أن يكون مجرد قوسين مرة واحدة فقط أو يكون قوسين وقوسين آخرين‬
‫يوضع بينهم بعض السطور كما سنرى‬
‫• ويجب أن تعرف أن لغة ‪ html‬ليست حساسة لوضع الحروف ‪ capital or small‬يعني‬
‫سواء كتبت كدا أو كدا زي الفل ولكن داي ًما حاول تعمل الطرق المتعارف عليها عشان يبقى‬
‫الكود بتاعك سهل القراءة للغير‬
‫• قبل البدء في تعلم األوامر المختلفة يجب أن نفهم الهيكل العام الذي تكتب بداخله األوامر‬
‫والذي يخبر المتصفح بأن هذا هو كود ‪html‬‬
‫‪2‬‬
‫يجب ً‬
‫أوًل أن تعرف المتصفح بأنك ستكتب بلغة ‪ html‬فتكتب ال ‪ tag‬اآلتي‬
‫>‪ <!DOCTYPE html‬أي أنك تعرف النوع ‪ html‬أو تفعل له ‪declaration‬‬
‫‪1‬‬
‫بعد ذلك ستكتب كل األكواد التي تريدها بين اثنين من األقواس فيما يسمى ب ‪ Tag‬ال‬
‫‪ html‬ويكتب هكذا >‪ <html> </html‬وًلحظ أننا نضع عالمة ‪ /‬في نهاية‬
‫‪2‬‬
‫أي ‪ tag‬زوجي للدًللة على نهايته وهذا فقط إلنه شيء متعارف عليه ولو حذفتها مش‬
‫هيحصل حاجة‬
‫• بعد ذلك نجد األكواد مقسمة إلى قسمين‪ :‬إما شيء يراه المستخدم في صفحة الويب نفسها أو شيء‬
‫ًل يراه في هذه الصفحة مثل عنوان ال ‪ tab‬من فوق وال ‪ icon‬وغير ذلك مما هو خارج الصفحة‬
‫نفسها وبالتالي يجب أن نقسم مكان كتابة الكود إلى قسمين وفقًا لما ذكرنا ‪...‬قسم لما يراه المستخدم‬
‫في الصفحة نفسها وقسم لما ًل يراه‬
‫‪3‬‬
‫القسم الذي ًل يراه المستخدم في الصفحة نضعه بين ‪ tag‬يكتب هكذا‬
‫>‪<head> </head‬‬
‫‪3‬‬
‫والقسم الذي يراه المستخدم في الصفحة نضعه بين ‪ tag‬يكتب هكذا‬

‫>‪<body> </body‬‬
‫‪4‬‬
‫• ًلحظ أن جميع ال ‪ tags‬حتى اآلن يسهل جدا تخمينها من اللغة اإلنجليزية وهذا ما يسهل عليك‬
‫الحفظ إن أردت‬
‫• في نهاية كل حلقة سألخص لك كل ال ‪ Tags‬اللي تم شرحها في الدرس وفي بداية كل حلقة‬

‫سأراجع على كل ال ‪ tags‬اللي درسناها من أول الكورس‬
‫‪4‬‬
‫• دا الشكل اللي بيجمع كل اللي‬
‫شرحناه وهو الشكل اللي هتبدأ بيه‬
‫أي كود مكتوب بلغة ‪html‬‬
‫• يمكنك التحكم بالخصائص التابعة ألي‬

‫‪ tag‬عن طريقة كتابة اسم الخاصية أو ال‬
‫‪ attribute‬بداخل القوسين >< األولين‬
‫وبعدها = وبعدها قيمة الخاصية التي‬
‫تريد إعطائها موضوعة بين ” “‬
‫• يفضل تسمع الشرح في الفيديو‬
‫‪5‬‬
‫لكتابة عنوان للصفحة التي تقوم بعملها يمكنك استخدام ‪ tag‬يسمى ب ‪ tag‬العنوان أو ال‬
‫‪ Title‬بهذا الشكل >‪<title‬وتضع هنا اسم الصفحة الذي تريده >‪</title‬‬
‫‪5‬‬
‫لوضع ‪ icon‬تظهر بجانب اسم الصفحة يمكنك كتابة السطر التالي وسنقوم فيما بعد‬
‫بشرحه مرة أخرى‬
‫‪6‬‬
‫>” ‪<link rel = “icon” type = “image / x-icon” href = “img ref‬‬
‫‪6‬‬
‫لتعريف المتصفح بأنه كود ‪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‬‬
‫‪7‬‬
‫‪2022 / 7 / 12‬‬
‫اء‬
‫الرج ِّ‬ ‫ف على َّ‬ ‫ب الخ َْو َ‬ ‫وغ َِّل ِّ‬
‫موًلك بال ت َ ِّ‬
‫ناء‬ ‫َ‬ ‫و ِّس ْر ِّل‬
‫لألوزار‬
‫ِّ‬ ‫و َج ِّد ِّد الت َّ ْوبَةَ‬
‫س ْن ِّم ْن َرحم ِّة الغَفَّ ِّ‬
‫ار‬ ‫ًل تَيْأ َ َ‬
‫ش ُكورا‬ ‫و ُك ْن على آًلئِّ ِّه َ‬ ‫اقتباس‬
‫صبُورا‬ ‫و ُك ْن على بَال ِّئ ِّه َ‬
‫ضاء والق َد ْر‬ ‫َىء بالقَ ِّ‬ ‫و ُك ُّل ش ٍ‬ ‫لإلمام الكبير أحمد الدردير المالكي األزهري‬
‫ع ْنهُ َمفَ ْر‬ ‫قدور فَما َ‬ ‫و ُك ُّل َم ٍ‬
‫س ِّلما ً َكي ت َ ْسلَما‬ ‫ف ُك ْن لَهُ ُم َ‬
‫سبي َل النَّا ِّسكي َن العُلَما‬ ‫واتْبَ ْع َ‬
‫ب ِّم َن األ ْغ ِّ‬
‫يار‬ ‫ص القَ ْل َ‬ ‫وخ َِّل ِّ‬
‫ار‬‫يام باأل ْس َح ِّ‬ ‫بالج ِّد وال ِّق ِّ‬ ‫ِّ‬

Html-Lesson 3

Uploaded by

Document Information

Original Title

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

Html-Lesson 3

Uploaded by

Copyright:

Available Formats

‫‪#3‬‬

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

‫‪Web Design – html Course‬‬

‫الدرس ‪ – 3‬الهيكل العام للكود‬

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

‫والقسم الذي يراه المستخدم في الصفحة نضعه بين ‪ tag‬يكتب هكذا‬

‫• في نهاية كل حلقة سألخص لك كل ال ‪ Tags‬اللي تم شرحها في الدرس وفي بداية كل حلقة‬

‫• يمكنك التحكم بالخصائص التابعة ألي‬

‫• يفضل تسمع الشرح في الفيديو‬

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

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

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

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

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

You might also like