منذ بداية الإنترنت، كانت لغة HTML أمراً حاسماً لجعل شبكة الويب العالمية تعمل وتظهر بالطريقة التي نريدها. دعنا نلقي نظرة على ماهية لغة HTML وكيف تتحول إلى الصفحات التي تراها كل يوم.
العمود الفقري للإنترنت:
ترمز لغة HTML إلى لغة ترميز النص التشعبي. إنها لغة تشفير تُستخدم لإنشاء صفحات يمكن لمتصفح الويب عرضها.
يتم تخزين معظم صفحات الويب التي تجدها على الإنترنت، بما في ذلك الصفحة التي تقرأ فيها هذه المقالة الآن، كملف HTML.
مواقع الويب هي مجموعة من صفحات HTML ذات الصلة المخزنة على خادم في مكان ما. هذا هو السبب في أن اللغة كثيراً ما يطلق عليها العمود الفقري للإنترنت.
عندما تنتقل إلى صفحة ما على الإنترنت، فأنت تطلب بشكل أساسي ملف HTML مخزن على الخادم. بعد ذلك، سيقوم المتصفح الذي تستخدمه، مثل كروم Chrome أو فايرفوكس Firefox، بتحليل لغة HTML وعرضه لك بالطريقة التي تقصدها.
إن عالمية وتعدد استخدامات لغة HTML تجعلها أكثر لغة ترميزية شيوعاً في العالم. يبدأ معظم مطوري واجهات الويب بتعلم كيفية البرمجة بلغة HTML.
تتم ترجمة أدوات السحب والإفلات ومحررات WYSIWYG في النهاية إلى لغة HTML بحيث يمكن للمتصفحات تحليلها.
كيف تعمل لغة HTML:
مثل أي لغة برمجة، تبدو لغة HTML كمجموعة من الأوامر وكتل النص قبل أن تتحول إلى الواجهة المرئية. إذا كنت مهتماً بمعرفة شكل لغة HTML في هذه الصفحة المعينة وكنت على سطح مكتب أو كمبيوتر محمول، فحاول النقر بزر الماوس الأيمن في أي مكان على هذه الصفحة واختر عرض مصدر الصفحة أو بالإنكليزية View Page Source (قد يختلف الخيار وفقاً لمتصفحك ).
يجب أن يأخذك هذا الأمر إلى صفحة ضخمة من التعليمات البرمجية.
يتم إنشاء معظم لغة HTML باستخدام كتل العناصر Element blocks، وهي مقتطفات من تعليمات HTML البرمجية التي تفصل بين العناصر المختلفة في الصفحة.
على سبيل المثال، نص هذه المقالة عبارة عن كتلة عناصر، مثل القائمة والتوصيات أدناه وتذييل الصفحة. يتم ترميز هذه العناصر بطريقتها الخاصة، حيث قد تتصرف بشكل مختلف.
يعد استخدام ما يسمى بـ Cascading Style Sheets أو اختصاراً (CSS) جزءاً مهماً من إنشاء صفحات HTML.
إنها التي تحدد الشكل الذي يجب أن تبدو عليه عناصر معينة من الصفحة. على سبيل المثال، كيف يجب أن تكون الصور كبيرة، وما هي الخطوط التي يجب أن تظهر على الصفحة، وكيف يجب أن تستجيب صفحة الويب عند تغيير حجمها أو توسيعها.
هذه كلها ضرورية لإنشاء مواقع ويب جذابة ومتماسكة وأنيقة. إذا كنت قد لاحظت أن مواقع الويب بدأت في الظهور بشكل أفضل في العقد الماضي، فإن الاستخدام المتزايد لـ CSS هو السبب الأكبر. يمكنك قراءة المزيد عن CSS هنا.
أحد أفضل الأشياء في لغة HTML هو قدرتها على تشغيل البرامج النصية الديناميكية عبر JavaScript أو JS. يمكن لهذه البرامج النصية إنشاء عناصر ديناميكية.
على سبيل المثال، في مواقع ويب معينة، سيسمح لك التمرير فوق صورة بتكبيرها. يمكنك تحقيق هذا التأثير عن طريق برمجة عنصر JavaScript.
أساسيات لغة HTML:
على الرغم من أن لغة HTML لغة معقدة إلى حد ما مع العديد من العلامات tags والكتل المختلفة، إلا أن هناك عدداً قليلاً من أكواد لغة HTML التي قد تكون مفيدة أثناء تصفح الويب. فيما يلي بعض علامات لغة HTML الأساسية التي قد تواجهها.
<a href="https://syriantech.com">SyrianTech</a>
يمكنك استخدام الأمر <a> لإنشاء رابط. عنوان URL هو المكان الذي سيشير إليه الرابط، والنص SyrianTech هو كيف سيظهر للمستخدم النهائي.
<b>غامق</b> <i>مائل</i> <u>مسطّر</u>
غامق مائل مسطّر
يمكنك استخدام <b> و <i> و <u> لتطبيق خيارات تنسيق النص القياسية: نص غامق ومائل ونص تحته خط.
<img src="picture.jpg">
تُستخدم علامة <img> لتضمين صورة في الصفحة. يمكنك أيضاً تخصيصها ببعض السمات الإضافية، مثل تغيير الحجم والنص البديل.
<h1>heading 1</h1> <p>paragraph</p>
ما سبق هو علامات tags للعناوين والفقرات. على غرار الطريقة التي يسمح بها مايكروسوفت وورد Microsoft Word لك بفرز النص إلى عناوين ونص أساسي، يمكن لـ لغة HTML أيضاً تنسيق النص استناداً إلى خيارات العناوين والفقرات الافتراضية.
يتم تعريف هذه التنسيقات باستخدام CSS.
<p style="color:edr;">red paragraph</p>
يمكنك أيضاً استخدام علامة style لتخصيص النص بإعدادات نمط مختلفة، مثل لون النص ولون الخلفية وحجم الخط.
إذا كنت مهتماً بمعرفة المزيد من خيارات تنسيق لغة HTML، فاطلع على دروس W3Schools المجانية. ستجد قائمة كاملة بعلامات لغة HTML التي يمكنك استخدامها لبدء إنشاء صفحات الويب.