الطريق إلى تصميم صفحات الويب (الجزء الثالث)
نكمل -إن شاء الله- حديثنا عن تصميم صفحات الويب، وقد خصّصنا هذا الجزء للحديث عن لغة HTML التي سميّت بهذا اختصاراً ل(Hyper Text Markup language).
أولاً: نحبُّ أن نوضّح أنّ لغة html ليست لغة برمجة وإنّما هي لغة structure أي تشييد أو بناء، وكما وضّحنا في الجزء السابق أنّها أساس الموقع وعماده الذي يبنى عليه، ولها إصدارات تحدثت باستمرارٍ عن طريق المطوّرين القائمين على هذه اللُّغة وانتهت بآخر إصدار لها وهو HTML5، وهي لغة سهلة جداً من ناحية تعلُّمها، وتعتمد في سردها للعناصر داخل اللُّغة على نظام التدرّج الشجري، أي أنّ كلَّ عنصرٍ يحتوي على فروعٍ (أبناء) له، وكل فرعٍ (ابن) من هؤلاء الأفرع يحتوي على آخر داخله، وقد تمتد هذه السلسلة حتى 20 فرعاً أو أكثر ولا يوجد عدد محدّدٌ لذلك، وسنوضح ذلك بالصور؛ فتابعوا معنا.
ممّ تتكون لغةhtml ؟
تتكون بشكل أساسي من وسم أو عنصر<tag name> وكلّ عنصر داخل هذين القوسين يكون له عنصر متمم له أو عنصر النهاية له مثل: <tag></end of tag> وأيُّ موقع في العالم -حتى الفيس بوك وجوجل وغيرهم- لا بدّ أن يحتوي على هؤلاء العناصر الثلاثة داخل الhtml وهم على الترتيب الشجري (الأب والأبناء):
عنصر ال<html> كأب ويحتوي بداخله كأبناء العنصرين [<head>,<body>] ولا بُدَّ لأيِّ موقعٍ نراه بأعيننا على صفحات الإنترنت أن يحتوي على تلك العناصر الأساسية وأرجو منك هنا أن تلقي نظرةً على الصورة أسفل المقال لكي تتضح الفكرة أو الصورة في ذهنك.
ولكن هل يتوقّف الموضوع عند ذلك الحد؟ بالطبع لا!
فذلك هو الأساس فقط للموقع أو الأعمدة الرئيسية، وبالتالي إذا أردنا أن نضيف أيَّ عنصرٍ إلى الصفحة (كأن نضيف عنواناً إلى الصفحة) فسنضيف هذا العنوان عن طريق كتابة التالي:
</h2>هنا نقوم بكتابة العنوان الذي نريده<h2>
وإذا أردنا أن نضيف صورةً للصفحة فإن لها عنصراً مخصّص للصّور فقط، وللتوضيح نأخذ مثالاً:
<img src=”link of image” /> وكما لاحظتُم فإنّي لم أضع للعنصر img عنصراً آخر متمماً له مثل </img> وذلك لأنّ عنصر الصورة متمّم لنفسه ولا يحتاج إلى ذلك، ولكن لا تشتّت نفسك بالتفكير في ما له عنصر نهاية وما ليس له مثل العنصر السابق، كل هذا يأتي مع الخبرة والممارسة وعلى هذا المنوال، إذا أردنا أن نضيف أيّ عنصر (صورة، عنوان، رابط لموقع آخر، فقرة نصية، جدول مواعيد…) إلى الصفحة نقوم بوضعه داخل html عن طريق ال <tag> الخاص به فقط!
المصدر : في الجزء السابق
تحميل المقال كـ PDF عبر باتريون
التعليقات
الفريق الهندسي
