في هذا الدرس سنناقش لغة ترميز النص التشعبي Hypertext Markup Language لغة ترميز النص التشعبي أو HTML هي اللغة الأساسية المستخدمة على الإنترنت تم تقديم هذه اللغة في أوائل التسعينيات من قبل السير تيم بيرنرز لي وتضمنت ميزات مثل الارتباطات التشعبية التي نأخذها كأمر مسلم به اليوم سنلقي نظرة على HTML واثنين من الاصطلاحات الجديدة التي ظهرت خلال السنوات القليلة الماضية سأحذف HTML الموجود لدينا هنا وسنبدأ من جديد مع نوع المستند DOC TYPE يمكننا بالفعل البدء بـ HTML الآن، إذا بدأنا باستخدام HTML فقط كما ترى عنصر HTML على الصفحة الآن وبالمناسبة، غالبًا ما تسمع عناصر HTML تسمى العلامات أو وسوم Tags واحدة من طرق التفكير بعناصر HTML هي كونها مجموعة كاملة من العلامات في هذه الحالة، إذا وضعنا فقرة وأرفقناها مع علامتي P أو علامات الفقرة فسيكون لدينا عنصر فقرة يمكن اعتبار بعض العناصر أشياء مثل العنوان والتذييل ورأس العنوان وأشياء أخرى داخل HTML في هذه الحالة، سننظر في عناصر HTML وعلامات HTML لتكون مترادفة سنستخدم العلامات أحيانًا، وأحيانًا نستخدم العناصر لنبدأ باستخدام بعض العلامات أولاً، سنبدأ بإعلان DOCTYPE سنمضي قدمًا في إدخال علامة تعجب DOCTYPE HTML وهذا يخبرنا أننا نستخدم شيئًا ما بعد عام 2000 في HTML ستؤدي كتابة HTML بمفردها إلى عرض المستند الخاص بك بطريقة ملتوية سيكون ذلك شيئًا مثل تقديم المستندات في التسعينيات الآن هذا ليس سيئًا يمكنك بالفعل كتابة كل HTML الخاص بك بمعيار اليوم واستخدم HTML في الأعلى وسيكون ذلك على ما يرام ومع ذلك، هناك بعض العلامات وبعض العناصر التي لم يتم دعمها في التسعينيات ويمكنك أن ترى كيف يمكن أن يصبح ذلك محيرًا ولتجنب ذلك، نستخدم علامة التعجب الذي يسميها الناس بانج وDOCTYPE HTML بعد الإعلان الأولي عن استخدام DOCTYPE HTML سنمضي قدمًا ونبدأ ترميز HTML الخاص بنا الآن أولاً مع HTML سيكون لدينا ما كنت ستحصل عليه عادةً في المستند لذلك في ظل HTML سيكون لدينا قسم رئيسي وسيكون لدينا أيضًا قسم للمحتوى لذا دعونا نمضي قدما سأجعل قسم المحتوى أو الجسم مثل هذا لذا سيكون لدينا قسم رأس وقسم للمحتوى الآن سأغلق كل من هذه العلامات وكل من هذه العناصر وهنا بالمحتوى سترى عملية الأغلاق فقط بشرطة مائلة لذلك لدينا رأس HTML ومحتوى تمامًا مثل ذلك ويمكننا إغلاق HTML الخاص بنا الآن المحرر الذي أستخدمه يضع النص في الجدول الأيمن أو التباعد الأيمن من الجانب، وهذا مناسب حقًا وسيبحث محررونا في المستقبل في كود visual studio وهذا كود VS سيوفر لك خيارات أكثر بكثير مما تراه هنا على الشاشة ما نكتبه على الشاشة هو HTML مبسط وهذه هي بالضبط الطريقة التي يتم بها إنشاء المستند يجب أن أشير إلى أن DOCTYPE غير مطلوب ليكون بأحرفًا كبيرة هنا، يمكننا فعلاً جعلها بالأحرف الصغيرة، وهي أسهل كثيرًا وستجدها عندما تكتب ثم تحت قسم الرأس يمكننا بالفعل وضع عنوان صفحتنا لذلك سأحفظ ذلك بسرعة كبيرة ودعنا نرى ما لدينا حتى الآن لدينا الآن مستند فارغ إذا نظرت إلى هذا لدينا الكثير من التعليمات البرمجية لمستند فارغ ولكن لدينا مستند فارغ بعنوان صفحة الويب. لذلك إذا نظرنا إلى الأعلى هنا سنرى أن صفحة الويب هي بالفعل العنوان في الأعلى ثلاثة من العناصر أو العلامات التي سنستخدمها اليوم هي عنوان وفقرة وفاصل أسطر ومصدر الصورة ورابط URL لذلك سيكون هذا رابط إلى موقع ويب آخر تريد الذهاب إليه من خلال هذا الرابط وقائمة غير مرقمة، وأخيرا جدول لنرى كيف يبدو هذا دعنا نمضي قدمًا ونذهب إلى محتوانا سنمضي قدمًا وننشئ فقرة لذا فإن P هو علامة للفقرة وستقول هذه فقرة الآن بمجرد أن نكتب هذه هي فقرة This is a paragraph لا تحتاج إلى مسافات مثل بعد هذا العنصر هناك لذا يمكننا حفظ ذلك تأكد من حفظه في الخادم قبل إعادة تحميله وسترى أن هذه الفقرة ستظهر حسنًا، قبل فقراتك عادة سيكون لديك عناوين لننتقل إلى المحتوى هنا ونلقي نظرة على H1 الآن H1 هو العنوان الأكبر إذا قمت بإنشاء مستند من قبل وهذا ليس أي نوع من معالج الكلمات أنت تعلم أن لديك عنوان المستند ثم تحت العنوان سيكون لديك العنوان الأول وستكتب في بعض الأحيان سيكون لديك عنوان فرعي وعنوان فرعي تابع وما إلى ذلك حسنًا، هذا هو نفس الشيء هنا يمكننا القول أن هذا هو العنوان الأول وسأذهب وأقوم بعمل H1 مثل هذا تأكد من حفظه وتحديثه سترى لدينا العنوان الأول، وهذه فقرة حسنًا، دعنا نمضي قدمًا ونضع العنوان الثاني هناك سننزل هنا H2 وسنطلق على هذا الأمر بشكل مثير للاهتمام سوف نسمي هذا العنوان 2 heading 2 كما أنه يساعد في رؤيته على الشاشة لذا فإن العنوان 2 بهذا الشكل وأريد أن أجعله 2 ليس 1، لذا نرى العنوان 2 دعنا نحفظ ذلك ونعيد تحميله هنا على الشاشة وسترى أن لدينا العنوان الأول والعنوان الثاني وهذه فقرة أسفل ذلك