HTML، أو لغة ترميز النص التشعبي، هي لغة إنشاء صفحات الويب، وتُعد من تقنيات الواجهة الأمامية. تتضمن النصوص، الجداول، القوائم، الصور، الفيديو، الصوت، النماذج، وغيرها. في صفحات الويب الحديثة، تُحدد HTML هيكلة الصفحة، ويتألف هيكلها من رأس يحتوي على تعليمات العرض (مثل JavaScript و CSS) وبيانات التعريف وعنوان الصفحة، وجسم يحتوي على المحتوى الظاهر للمستخدم. HTML لغة ترميز تعتمد على العلامات، معظمها بعلامة افتتاحية وإغلاقية (مثال: <tag_name>المحتوى هنا</tag_name>)، مع مراعاة مبدأ LIFO في التداخل. تستخدم السمات لتحديد سلوك العلامات (مثل id, class, style, و title). يُفضل استخدام محرر نصوص مثل Notepad أو Visual Studio Code لكتابة الكود وحفظه بامتداد .html، مع التحقق من صحته عبر أدوات مثل https://html5.validator.nu/. تُعد "ورقة الغش" مرجعًا سريعًا للمطورين (مثال: https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf). تتضمن صفحات HTML مكونات أساسية: النصوص (باستخدام <p>, <div>, <span>, <pre>)، العناوين الستة (

إلى

)، الرموز الخاصة (باستخدام كيانات HTML)، الصور باستخدام <img> (بمسار مطلق أو نسبي أو رابط، مع سمات src, title, alt, width, height)، الروابط بـ<a> وسمة href و target، القوائم المُرتبة <ol>, غير المُرتبة <ul>, وقوائم التعريف <dl> (مع استخدام <li> للعناصر)، الجداول بـ<tr> و<td> وسمتي rowspan وcolspan، والنماذج بسمة action وعناصرها بسمات type, name, value، مع أنواع إدخال جديدة في HTML5 (مثل email, number). كما توفر HTML5 <video> و<audio> ووسومًا دلالية جديدة.

إليك ترجمة النص بالكامل بدون النقاط الأساسية:

HTML تعني لغة ترميز النص التشعبي. وهي اللغة الرئيسية المستخدمة لإنشاء صفحات الويب. HTML تعتبر من تقنيات الواجهة الأمامية. قد تشمل HTML النصوص والجداول والقوائم والصور والفيديو والصوت والنماذج، وغيرها. في صفحات الويب الحديثة، تعد HTML مسؤولة عن هيكلة صفحة الويب.

هيكل صفحة الويب في HTML يتكون من قسمين رئيسيين: الرأس والجسم. قسم الرأس يحتوي على تعليمات من مُنشئ الصفحة حول كيفية عرض الصفحة مثل تحميل أكواد JavaScript وCSS وبيانات التعريف وعنوان الصفحة. أما القسم الخاص بالجسم فهو يحتوي على المحتوى الذي يراه المستخدم.

HTML ليست لغة برمجة، بل هي لغة ترميز. ما يميز HTML أنها تعتمد على العلامات. معظم العلامات تحتوي على علامة افتتاحية وأخرى إغلاقية، ولكن بعض العلامات لا تحتاج إلى علامة إغلاق مثل علامة . في HTML، يتم تضمين المحتوى بين العلامة الافتتاحية والعلامة الإغلاقية بهذه الطريقة: المحتوى هنا.

العلامات في HTML تكون غالبًا متداخلة. القاعدة الرئيسية هنا هي أنه عند تضمين علامات بداخل بعضها، يجب أن تغلق آخر علامة تم فتحها أولاً (مبدأ LIFO الذي يعني "آخر داخل، أول خارج").

HTML تستخدم السمات لتحديد كيفية عمل العلامة. السمة هي زوج من المفتاح والقيمة. تُضاف السمات إلى العلامات الافتتاحية بهذه الطريقة: المحتوى هنا. هناك ثلاث سمات رئيسية يتم استخدامها مع جميع العلامات وهي (id وclass وstyle). سمة id تُستخدم لإعطاء العلامة معرفًا فريدًا، ولا يمكن استخدام نفس المعرف لأكثر من علامة واحدة. سمة class تُستخدم لتطبيق فئة CSS على العلامة. سمة style تُستخدم لإضافة أسلوب CSS مضمن.

هناك أيضًا سمة تسمى title والتي تقبلها معظم العلامات. تُستخدم هذه السمة لعرض نص عند المرور فوق مكان معين داخل الصفحة.

لكتابة صفحات HTML، تحتاج إلى استخدام محرر نصوص مثل Notepad أو أي محرر أكواد (وفي هذه الدورة، سنستخدم Visual Studio Code). اكتب الكود في الملف ثم احفظه بامتداد (html). على سبيل المثال (index.html). بعد ذلك، يمكنك فتح الملف في المتصفح لمعاينة العمل.

من المهم التحقق من صحة الكود HTML قبل البدء في العمل عليه، لأن المستخدمين المختلفين لديهم بيئات ومتصفحات مختلفة. يجب كتابة الكود ليعمل على معظم المتصفحات. للتحقق من صحة الكود، يمكنك استخدام أداة مثل (https://html5.validator.nu/).

ورقة الغش في HTML هي مصطلح شائع بين المطورين ويعني ورقة مرجعية لتكنولوجيا معينة. على سبيل المثال، يمكنك العثور على ورقة غش HTML على الإنترنت مثل: https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf. معظم المطورين يستخدمون ورقة الغش هذه لأنها توفر مرجعًا سريعًا.

صفحات HTML تتكون من عدة مكونات مثل النصوص والصور والروابط والقوائم والجداول والنماذج. النص هو من أكثر المكونات شيوعًا في صفحات الويب. يمكن إضافة النص باستخدام الوسم للفقرات، أو باستخدام وسم لتحقيق نفس الهدف. في بعض الأحيان قد ترغب في إضافة نص داخلي (ليس فقرة)، ويمكنك استخدام وسم لذلك. ولعرض نص مُنسق مسبقًا، يمكنك استخدام الوسم .

في HTML هناك ستة أنواع من العناوين. وسم هو الأكبر، بينما هو الأصغر.

في بعض الأحيان، قد ترغب في تضمين رموز خاصة في نصك مثل أكبر من أو أقل من. هذه الرموز لها معاني في HTML (مثل استخدام علامات في الوسوم)، لذا إذا تم استخدامها مباشرة قد تتسبب في مشاكل. بدلاً من ذلك، يمكنك استخدام الكيانات HTML لإضافة هذه الرموز.

الصور تعتبر جزءًا مهمًا في صفحات الويب الحديثة. لإضافة صورة إلى الصفحة، يتم استخدام الوسم . هذه العلامة هي علامة ذاتية الإغلاق، أي أنها لا تحتاج إلى وسم إغلاق. الوسم الأكثر شيوعًا الذي تستخدمه هو السمة src التي تحدد مكان الصورة.

يمكنك تضمين الصورة باستخدام أحد الأساليب التالية:

باستخدام المسار المطلق: وهو مكان الصورة على الخادم بدءًا من الجذر.
باستخدام المسار النسبي: وهو مكان الصورة بالنسبة للمجلد الحالي.
باستخدام رابط على الويب.
بالإضافة إلى سمة src، هناك سمات أخرى شائعة الاستخدام:

title: لعرض نص صغير عند المرور على الصورة.
alt: لعرض نص بديل إذا كانت الصورة غير موجودة.
width و height: لتحديد حجم الصورة.
الروابط هي أساس أي صفحة ويب. تُستخدم الروابط لربط صفحة بأخرى. الوسم المستخدم لإضافة رابط هو . هناك نوعان من الروابط، الأول رابط داخلي (يربط إلى جزء آخر في نفس الصفحة) والآخر رابط خارجي (يربط إلى صفحة أخرى غير الحالية). السمة الأساسية التي يحتاجها الوسم لتفعيل الرابط هي href، التي تحدد عنوان الصفحة التي تريد الربط إليها. سمة target تحدد سلوك الرابط، مثل فتح الرابط في نافذة جديدة أو في نفس النافذة (والسلوك الافتراضي هو نفس النافذة).