الطريق إلى تصميم صفحات الويب - الجزء الثالث

الطريق إلى تصميم صفحات الويب – الجزء الثالث

بواسطة : الباحثون المسلمون
عدد المشاهدات : 810

A Decrease font size. A Reset font size. A Increase font size.

نكمل -إن شاء الله- حديثنا عن تصميم صفحات الويب، وقد خصّصنا هذا الجزء للحديث عن لغة 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> الخاص به فقط!

وأخيراً، قد يتساءل البعض:

كيف سأقوم بربط ال HTML مع لغتي ال CSS and JavaScript ؟

توجد أكثر من طريقة لفعل ذلك، ولكن بشكل مبسّط عن طريق: عنصري <style></style> and <script></script> ونقوم بكتابة ال css داخل عنصر style ونقوم بكتابة الجافا سكريبت داخل عنصر script، لم يتبقّى إلا أن أذكّر حضرتكم أن هذه مجرد مقدّمة و إعطاء نبذة عن اللغة ولكن لكي تتعلّمها فعلياً لا بُدّ من التطبيق بيديك ومتابعة إحدى الدّورات على الإنترنت، وهي كثيرة ومجانية وسيتم إلحاق أفضل الدورات في التعليقات إن شاء الله، وأنصحك في حال بدأت بالتطبيق أن تقوم بتثبيت هذا المحرر على حاسوبك واسمه Brackets وهو مجانيٌّ ومتطورٌ جداً، ولم يتبقّى عليك إلا قليلٌ من العزيمة والمواصلة.

انتظرونا في الجزء القادم والممتع جداً وهو التصميم بال css.