HTML هي اختصار لـ "لغة ترميز النص التشعبي" . وهي لغة خاصة تُستخدم لبناء صفحات الويب. عند زيارة موقع ويب، يقرأ الكمبيوتر HTML لعرض الكلمات والصور والروابط. تخيّل HTML كعناصر بناء موقع الويب. فكما نستخدم قطع الليغو لبناء منزل أو سيارة، نستخدم علامات HTML لبناء صفحة ويب.
HTML هو الكود الذي يُرشد الحاسوب إلى كيفية عرض النصوص والصور ومقاطع الفيديو والروابط على صفحة الويب. يشبه الأمر إعطاء تعليمات لصديق يرسم لك صورة. يستخدم HTML كلمات بين أقواس زاوية، تُسمى الوسوم ، لتحديد بداية ونهاية جزء من صفحة الويب.
كل موقع إلكتروني تزوره يستخدم HTML بطريقة ما. بدون HTML، لن تجد صفحات ويب. تساعد HTML في تنظيم المحتوى وتُرشد الحاسوب إلى كيفية عرض الصفحة. إنها أول ما يتعلمه المرء في تطوير الويب، لأنها تُسهّل عمل الإنترنت!
لمستند HTML بنية خاصة. يبدأ بإعلان يُسمى <code><!DOCTYPE html></code> يُخبر الحاسوب أن الصفحة تستخدم HTML. ثم يُقسم المستند إلى جزأين رئيسيين: الرأس والنص.
يبدو مستند HTML البسيط جدًا على النحو التالي:
<code><!DOCTYPE html>
<html>
<الرأس>
<title>صفحتي الأولى على الويب</title>
</head>
<الجسم>
<p>مرحبا بالعالم!</p>
</body>
</html> </code>
في هذا المثال، يوفر قسم <head> عنوان الصفحة، وقسم <body> هو المكان الذي تضع فيه المحتوى الذي يظهر على الشاشة.
يستخدم HTML الوسوم لتمييز أجزاء مختلفة من صفحة الويب. الوسم هو كلمة بين قوسين معقوفين. على سبيل المثال، <code><p></code> يُخبر الحاسوب أن ما يليه فقرة. عند إنهاء الفقرة، يُستخدم وسم الإغلاق <code></p></code> للإشارة إلى نهايتها.
يتكون العنصر في HTML من وسم افتتاحي، وبعض المحتوى، ووسم إغلاق. على سبيل المثال:
<code><p>هذه فقرة.</p></code>
يقوم كل علامة بإرشاد متصفح الويب حول كيفية عرض المحتوى.
هناك العديد من الوسوم في HTML. من أشهرها:
تُقدّم السمات معلومات إضافية حول عنصر HTML. تُضاف إلى وسم الفتح داخل أقواس زاوية الوسم. أكثر السمات شيوعًا هي src و alt المُستخدمة مع وسم الصورة.
على سبيل المثال، لإضافة صورة، يمكنك أن تكتب:
<code><img src="picture.jpg" alt="صورة جميلة"></code>
هنا، يخبر الأمر src المتصفح بمكان وجود ملف الصورة، ويقدم الأمر alt وصفًا للصورة إذا لم يكن من الممكن عرضها.
يتم تقسيم مستند HTML إلى قسمين:
تتيح لك الروابط الانتقال من صفحة إلى أخرى. في HTML، ننشئ روابط باستخدام وسم <a> . تُخبر الخاصية href داخل الوسم المتصفح بوجهة الرابط.
على سبيل المثال:
<code><a href="https://www.example.com">قم بزيارة Example.com</a></code>
عند الضغط على هذا الرابط سيقوم المتصفح الخاص بك بفتح موقع الويب example.com .
تُضفي الصور رونقًا على صفحة الويب وتجعلها أكثر تشويقًا. لإضافة صورة، استخدم وسم <img> . تذكّر أن وسم <img> لا يحتوي على وسم إغلاق.
إليك كيفية إضافة صورة:
<code><img src="sunflower.jpg" alt="عباد الشمس الساطع"></code>
يُرشد هذا الكود المتصفح لعرض صورة عباد الشمس. تُشير السمة src إلى موقع الصورة، بينما تُقدم السمة alt وصفًا لها.
تُنظّم القوائم المعلومات بتنسيق مُرتّب. هناك نوعان رئيسيان من القوائم في HTML:
فيما يلي مثال لقائمة غير مرتبة:
<code><ul>
<li>أبل</li>
<li>الموز</li>
<li>الكرز</li>
</ul> </code>
وهنا مثال لقائمة مرتبة:
<code><ol>
<li>الأول</li>
<li>ثانيا</li>
<li>ثالثًا</li>
</ol> </code>
تساعد الجداول على عرض المعلومات في صفوف وأعمدة. وهي مفيدة عند الحاجة إلى مقارنة البيانات أو عرض عناصر القائمة في شبكة.
فيما يلي مثال بسيط لجدول HTML:
<code><table border="1">
<تر>
الاسم
العمر
</tr>
<تر>
<td>أليس</td>
<td>10</td>
</tr>
</table> </code>
في هذا الجدول، يحدد <tr> صف الجدول، ويُستخدم <th> لرأس الجدول (نص غامق)، ويُستخدم <td> لبيانات الجدول (الخلايا).
يتيح لك HTML أيضًا إضافة وسائط متعددة، مثل الصوت والفيديو. باستخدام وسم <audio> ، يمكنك تضمين ملفات صوتية. باستخدام وسم <video> ، يمكنك تضمين مشغلات فيديو في صفحتك الإلكترونية.
فيما يلي مثال على كود تضمين الفيديو:
<code><video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</فيديو> </code>
يُنشئ هذا الكود مُشغّل فيديو بأزرار للتشغيل، والإيقاف المؤقت، وضبط مستوى الصوت. تُوجّه سمة "التحكمات" المتصفح لإظهار هذه الأزرار.
جميع مواقع الإنترنت مبنية باستخدام HTML. تخيل أنك تزور موقع مدرستك، أو موقعًا لألعاب ترفيهية، أو تقرأ قصة على الإنترنت. تعمل HTML في الخلفية لترتيب النصوص والصور وغيرها من المحتويات بحيث يمكنك رؤيتها بوضوح.
على سبيل المثال، عندما ترى صورة لشخصية الرسوم المتحركة المفضلة لديك عبر الإنترنت أو تنقر على رابط لقراءة المزيد حول موضوع ممتع، فإن HTML موجود لجعل ذلك يعمل.
لنلقِ نظرة على مشروع بسيط. تخيل أنك تريد إنشاء صفحة ويب صغيرة عن حيوانك المفضل، مثل قطة. يمكنك إضافة عنوان، وفقرة عن القطط، وصورة، وحتى رابط لموقع إلكتروني يحتوي على حقائق ممتعة عن القطط.
قد يبدو كود HTML الخاص بك على النحو التالي:
<code><!DOCTYPE html>
<html>
<الرأس>
<title>حيواني المفضل</title>
</head>
<الجسم>
كل شيء عن القطط
القطط مرحة وناعمة. تحب النوم والخرخرة. كثير من الناس يحبون اقتناء القطط كحيوانات أليفة.
<img src="cat.jpg" alt="قطة لطيفة">
<a href="https://www.catfacts.com">تعرف على المزيد عن القطط</a>
</body>
</html> </code>
يستخدم هذا المشروع العناوين والفقرات والصور والروابط. يُظهر كيفية استخدام HTML لبناء صفحة ويب كاملة متعددة الأجزاء.
في حين أن HTML يبني بنية صفحة الويب، هناك أدوات أخرى تجعل مواقع الويب تبدو وتتصرف بطرق ممتعة.
على الرغم من أننا نتعلم اليوم عن HTML، فإن معرفة CSS وJavaScript تساعدنا على فهم كيفية إنشاء مواقع الويب.
أثناء استكشافك لـ HTML، ستجد العديد من الوسوم الأخرى. إليك بعض الوسوم الإضافية التي يجب معرفتها:
تمنحك هذه العلامات مزيدًا من التحكم في كيفية ظهور المحتوى الخاص بك على صفحة الويب.
لقد تغيّرت لغة HTML كثيرًا منذ إنشائها. أُضيفت إليها العديد من الوسوم والميزات الجديدة مع مرور الوقت. يُسهّل كل إصدار جديد من HTML إنشاء مواقع ويب معقدة وجميلة. اليوم، تعمل HTML مع CSS وJavaScript لبناء مواقع ويب حديثة ممتعة الاستخدام وذات مظهر رائع.
يعني هذا التطور أن HTML سهل التعلم وقوي بما يكفي لإنشاء كل شيء من صفحات الويب البسيطة إلى تطبيقات الويب المعقدة.
مع أن تعلم HTML ممتع، إلا أنه من المهم دائمًا الحفاظ على سلامتك على الإنترنت. عند زيارة مواقع الويب أو تصفح المحتوى الإلكتروني، تذكر دائمًا طلب المساعدة من شخص بالغ إذا كنت غير متأكد من أمر ما. سلامتك هي الأولوية، ويجب أن يكون تعلم HTML تجربة ممتعة وآمنة دائمًا.
دعونا نلقي نظرة على بعض المصطلحات المهمة التي تعلمتها اليوم:
يُستخدم HTML في العديد من المجالات العملية. إليك بعض الأمثلة:
تظهر هذه الأمثلة كيف أن HTML أداة مفيدة للغاية في العديد من جوانب الحياة اليومية.
تعلمنا اليوم أن HTML اختصار لـ Hypertext Markup Language (لغة ترميز النص التشعبي) . وهي اللغة الأساسية المستخدمة لإنشاء صفحات الويب. إليك بعض النقاط الأساسية التي يجب تذكرها:
HTML هو أساس كل موقع إلكتروني تراه على الإنترنت. باستخدام عناصر بناء بسيطة كالوسوم والسمات، يمكنك إنشاء صفحات ممتعة وتفاعلية. مع استمرارك في التعلم، ستدرك كيف يُضفي HTML الحيوية على صفحات الويب، مما يجعل الإنترنت مكانًا مفيدًا ومثيرًا للاستكشاف.
