القائمة الرئيسية

الصفحات

ماهي لغة html ؟ و في ماذا تستخدم ؟ إليك شرح مبسط لأساسيات لغة html

ماهي لغة html

ماهي لغة html 

قد يتساءل بعض الإخوة و خاصة المبتدئين في مجال البرمجة و بناء مواقع الويب ماهي لغة html ؟ . 
تحمل الإسم الكامل (hypertext markup language) يمكن ترجمتها ترجمة حرفية للغة العربية (لغة ترميز النصوص التشعبية) , إبتكر اللغة العالم الفيزيائي الإنجليزي تيم بيرنرز لي (Tim Berners-Lee) في أواخر ثمانينيات القرن الماضي , لكن أول إصدار لها ظهر في يونيو 1993 بإسم HTML1.0 و توالت الإصدارات بعدها بهدف تحسين اللغة و تطويرها و كان آخر إصدار بإسم HTML5 في سنة 2012 , الهدف من إبتكارها هو تسهيل مشاركة المستندات على شبكة الأنترنت , و تعتبر اليوم أداة لبناء صفحات الويب , بل و أصبح إسمها لصيقا بمجال الويب رفقة لغات أخرى مثل CSS و JavaScript . لكن كلمة بناء لا نقصد بها تصميم و إنما تقتصر على إنشاء العناصر داخل الصفحة ( كالنصوص و الصور و العناوين و القوائم و مربعات البحث و غيرها... ) سنوضح ذلك بشكل مفصل فيما تبقى من هذا المقال .
لغة html ليست لغة برمجية كما قد يخيل للبعض بل لغة توصيف النص (markup language) , تتم كتابتها بواسطة وسوم منها ماهو أساسي و منها ماهو فرعي .
نود إخبارك بداية أن لغة html سهلة جدا للتعلم و لا تتطلب أية خبرات سابقة سواء في ما يتعلق بمجال الويب أو غيره . و هي لغة من أبسط ما قد تتعلمه في مجال الويب و الكمبيوتر بشكل عام .
و هذا ما يدفعنا للقول أنه عند قراءتك لهذا المقال بتمعن و تركيز ( عدة مرات إذا تطلب الأمر ذلك ) ستدرك عند نهاية القراءة ماهي html و ستكون قادرا على بناء هيكل صفحة الويب و إنشاء كافة العناصر بشكل سلس و منظم .

مكونات لغة html 

في الحقيقة أردنا أن يكون هذا المقال عبارة عن درس تطبيقي و ليس مجرد معلومات جافة لا تضيف أي قيمة حقيقية للقارئ .
لذلك سنشرح كل نقطة و نحاول إعطاء أمثلة عنها . فبعد أن أجبنا عن السؤال : ماهي لغة html ؟
الآن كيف نبدأ بإستخدام اللغة ؟
أول خطوة هي تحميل المحرر الذي سنكتب اللغة بداخله و للعلم يمكن إستعمال محرر الويندوز notpad لكن يفضل تحميل محرر إحترافي أكثر مثل ++notpad أو brackets الذي سنستخدمه في شرح اليوم أو visual studio .
يمكنك تحميل برنامج brackets من الموقع الرسمي من هنا .
أولا نفتح المحرر ثم ننشأ مشروع جديد بالضغط على ctrl + n ونحفظه مباشرة بالضغط على ctrl + s لكن قبل ذلك يجب إختيار مكان الملف في سطح المكتب ببساطة و ننزل إلى خانة إسم الملف نسميه index.html أي أن الملف بإمتداد html كما هو مبين في الصورة .
index html
ثم قم بنسخ الكود التالي و لصقه في المحرر إذا كنت تود التطبيق مباشرة لديك :

الوسوم أو (Tags):

هي الأوامر التي نستخدمها ضمن لغة html لوصف عناصر صفحات الويب و تكتب على الشكل <Tag> و نغلق الوسم على الشكل <Tag/> .
يتضمن أول سطر وسم  <DOCTYPE html!> و معناه document type html أي نوع الملف و اللغة التي نريد كتابتها في المحرر ليتمكن المتصفح من تفسيرها و قراءتها .
الوسم الأساسي في اللغة هو <html></html> و يجب كتابة كل الوسوم بداخله و يمكن أن نطلق عليه إسم الوسم الأب بإعتباره الحاوية التي تتضمن كل محتويات الملف . و بداخله وسمين :
وسم head يكتب على الشكل <head></head> و معناه رأس الصفحة و يتضمن العنوان و بعض الوسوم الأخرى التي لا تظهر بشكل مرئي في الصفحة . بداخل هذا الوسم يوجد :
title أي عنوان الصفحة و يكتب <title/><title>و من خلاله نتحكم في عنوان صفحة الويب الذي يظهر في نافذة المتصفح .
هنا سنعرف مفهوم جديد في اللغة و هو السمات أو attribute بحيث تكتب على الشكل "name="value  و يمكن إعتبارها جزء من الوسوم لأنها مكلمة لها وهي مهمة جدا في لغة html بحيث تمكننا من تقديم أوامر مهمة بداخل الوسوم .
و أهم السمات أو الـ attributes هي :
id و class هذان السمتان ببساطة وظيفتهما وضع إسم لعنصر معين في الصفحة بحيث تتم مناداته بلغة Css أو JavaScript و التعديل على شكله أو طريقة ظهوره أو غير ذلك . و يكمن الفرق بينهما في أن الـ id يتم وضعه لعنصر واحد فريد بينما الـclass يمكن كتابته لتعريف عدة عناصر من نفس النوع بإسم واحد .
src و نقصد به source و يتم إستخدامه لتحديد مصدر صورة و إضافة إمتدادها على الشكل jpg. أو png. أو صيغة مماثلة أو مقطع صوتي بصيغة mp3 أو مقطع فيديو بصيغة mp4 ....) . 
alt أو alternative و هو عبارة عن نص بديل عن الصورة يظهر إذا تعذر ظهور الصورة بسبب ضعف شبكة الأنترنت أو خطأ معين في إستدعاء الصورة أو لأي سبب كان .
rel أو relationship و هي سمة تحدد العلاقة بين ملف html و الملف المرتبط به مثل ملف CSS فتكتب على الشكل 
"rel="stylesheet .
href و تستخدم بداخل وسم <a> لإضافة عنوان الرابط .
width و تستخدم للتحكم في عرض العنصر مثل الصور أو أي عنصر آخر .
height و تستخدم للتحكم في عرض العنصر . 
style و تستخدم هذه الخاصية للتعديل على شكل العنصر تماما مثل ما يتم بلغة css بحيث نكتب نفس الكود مع تغييرات طفيفة .
الآن و قد عرفت ماهي الـ attribute نعود لنكمل شرح الوسوم .
وسم meta و يستخدم لكتابة البيانات الوصفية مثل ضبط الترميز .
وسم link الغرض منه ربط ملف اللغة الذي يحتوي على العناصر مع ملف CSS الذي يتضمن الشكل المراد أن تظهر عليه صفحة الويب . 
<script> و يستعمل لإدراج أكواد لغة JavaScript أو رابط ملف خارجي للغة و طبعا يمكن إستخدامه لإدراج أكواد أي مكتبة مبنية بجافا سكريبت مثل jquery أو react.js و باقي المكتبات . 
و على غير المألوف هذين الوسمين لا يتم إغلاقهما بوسم الإغلاق و إنما نضع فقط الرمز / في القوس الثاني على الشكل  </meta/> , <link> .
وسم body يكتب على الشكل <body></body> و هو جسم الصفحة و يتضمن كافة المحتويات من صور و قوائم و نصوص و غيرها . لا يمكننا ذكر كل الوسوم التي تكتب بداخله لكن سنذكر أهمها كالآتي :

<h1> و يقصد به heading يستخدم لكتابة العناوين أو الترويسات و للعلم فإنه كلما رفعنا العدد يقل حجم العنوان h3 , h2 إلى غاية h6 و هو الأقل حجما .
<p> و يقصد به paragraph و يستخدم لكتابة الفقرات في الصفحة .
وسم التعليق <--تعليق--!>  و يستخدم لكتابة تعليق بين أسطر الكود لكن لايظهر في الصفحة الغرض منه تنظيم الكود عن طريق عناوين أو كتابة ملاحظة عن أمر معين .
<div> و يقصد به division , و يعتبر حاوية يمكن من خلالها التحكم في مساحة معينة في صفحة الويب و هذه المساحة تحتوي على عدة عناصر مثال : كأن نصف div و بداخله نضع أيقونات مواقع التواصل الإجتماعي فإذا أردنا تغيير إتجاهها مثلا من اليسار إلى اليمين نتوجه إلى div . إذا فالغرض منه هو تجميع عدة عناصر و التحكم بها دفعة واحدة .
<span> يعتبر حاوية نصية للنصوص و هذا ما يميزه عن الوسم السابق بحيث يستخدم هذا الوسم للتحكم في مجموعة من العناصر النصية لتكون لها نسق واحد .
في السابق قبل ظهول html5 كانت تستخدم وسوم div و span للتحكم في جزء معين من الصفحة يتضمن عدة عناصر وللتمييز بين هذه العناصر يلجأ مطور الويب إلى تسمية الجزء المراد التحكم به بواسطة الحاوية بإسمه فينشأ <div></div> ثم يعرف بداخله class يعطيه إسم مثلا : header للتحكم في رأس الصفحة و القوائم العلوية  أو nav للتحكم في الإقسام أو التسميات أو footer للتحكم في تذييل الصفحة  أو الشريط السفلي في صفحة الويب .
لكن بظهور html5 ظهر ما يسمى semantics أي الوسوم التي لها دلالات مباشرة مثل <header> أو <article> أو <nav> أو <footer> هذا ما سنتناوله في السوم القادمة .
<header> و هو عبارة عن حاوية لا تختلف عن div من حيث الوظائف إلا أنها و كما يظهر من الإسم مخصصة للجزء العلوي من صفحة الويب و الذي يتضمن عادة شعار الموقع و الأقسام و غير ذلك من العناصر التي توضع في أعلى الصفحة .
<nav> و هي حاوية تختلف عن السابقة بحيث توضع بداخلها القائمة أو ما يسمى  navigation bar .
<article> أي المقال و يستعمل لإحتواء عناصر المقال مثل العنوان و المقال نفسه و صورة المقال و غير ذلك .
<section> لا يختلف كثيرا عن article و يستخدم للتحكم في جزء يضم فقرة و عنوان و صورة و غير ذلك .
<img> و يقصد به image و يستخدم لرفع الصور و هو من الوسوم التي لا تحتاج إلى وسم آخر للإغلاق بحيث يتم كتابته على الشكل </img> و لرفع أي صورة  نحدد مسارها من الجهاز بواسطة السمة src و كذلك نعطيها إسم من خلال alt
<ul> و بداخله <li> و تستخدم لإنشاء القوائم بحيث تمثل الأولى القائمة بأكملها أما الثانية فهي عدد الصفوف بداخل القائمة مثال
<a> و يستخدم لإنشاء الروابط بمجرد الضغط على عنصر معين و نضع الرابط بعد الوسم مباشرة بداخل السمة href .
<b> و تعني bold و يستخدم هذا الوسم لإضهار جزء معين في النص بخط خشن لما له من أهمية عن بقية النص .
<mark> يستعمل كذلك لتمييز جزء أو كلمة من النص عن بقية النص بإظهار خلفية ملونة حوله ويطلق على هذه
العملية (highlight) .
<form> و يعني نموذج و يتضمن عدة وسوم بداخله كل منها يصف نموذج إدخال يسمح للمستخدم بإدخال بيانات . سنتناول هذه الوسوم مع شرحها .
<input> و يستعمل لإنشاء عناصر إدخال يتفاعل معها مستخدم و يدخل المعلومات المطلوبة مثل حقوق إدخال البريد الإلكتروني أو كلمة السر و كذا نقاط التعليم على خيار معين مثلا الجنس (ذكر أو أنثى ) أو الخبرة (مبتدأ أو محترف ) و غير ذلك .
<button>  يستخدم لإنشاء الأزرار داخل الصفحة مثل تسجيل الدخول أو إقرأ المزيد و غيرها من الأزرار .
<textarea> و يمكن من خلال هذا الوسم إنشاء حقل لكتابة فقرة طويلة بحيث يمكن تمديد المساحة بإضافة قيمة إلى سمة الـ rows للعرض و سمة cols للطول .
<select> و بداخله <option> بحيث يستخدم الوسم الأول لإنشاء قائمة منسدلة و يستخدم الوسم الثاني لإنشاء الخيارات بداخل القائمة .
<optgroup> يستخدم هذا الوسم بهدف تقسيم القائمة المنسدلة ووضع عناوين بداخلها لترتيب العناصر المتشابهة بحيث يظهر العنوان بخط عريض و تظهر العناصر التي بداخله بخط عادي .
<fieldset> يسمح هذا الوسم بتجميع العناصر التي لها علاقة مع بعضها في نموذج واحد مع رسم إطار حوله .
في أعلى الإطار يقوم الوسم <legend> بتسمية النموذج بإسم معين .
<label> يستعمل هذا الوسم لتسمية نماذج الوسوم السابقة منها <input> و <button> و <textarea> ....) بحيث نكتب بداخله إسم النموذج مثلا (البريد الإلكتروني) ثم ننشأ نموذج <input> تحته أو بجانبه فيعرف المستخدم أن الحقل مخصص لإدخال البريد الإلكتروني .
<tr> و بداخله <td> و يستخدم لإنشاء الجداول بحيث يمثل الوسم الأول الجدول بينما الثاني يمثل عدد السطور في الجدول .
<br> لأخد سطر جديد أي عند كتابته ننتقل مباشرة إلى السطر الذي يليه .
<hr> و هو وسم مهم لإنشاء خط أفقي فاصل في الصفحة .
<audio> و هذا الوسم يستخدم لإدراج مقطع صوتي داخل صفحة الويب بصيغة mp3 . بحيث نكتب إسم المقطع المراد إدراجه داخل خاصية src مع الحرص على إضافة الصيغة mp3 .
<video> و يستخدم كذلك لإدراج مقطع فيديو في الصفحة بشكل لا يختلف عن الوسم السابق مع إضافة mp4 بدل mp3 . و توجد صيغة أخرى تسمى web.m .
<footer> و يقصد به تذييل الصفحة و هو مانجده في أي صفحة ويب بحيث يتضمن عادة عبارة ²جميع الحقوق محفوظة أو يتضمن بعض الأقسام مثل سياسة الخصوصية و إتصل بنا و غيرها .
<iframe> و يستعمل هذا الوسم لإستدعاء صفحة html أخرى بداخل صفحة الويب مثل خرائط جوجل أو مقطع يوتيوب أو أي موقع آخر .

شرح xhtml 

هي دمج لغة html مع لغة xml فنتج عن ذلك لغة أكثر صرامة في الكتابة خاصة عند إغلاق الوسم بالرمز / , ففي الإصدارات السابقة يمكن كتابة الوسوم فقط بكتابة بوسم البداية <,,> دون إغلاقه بإضافة وسم الإغلاق , و كذلك الأمر إذا ما تحدثنا عن وسم البداية <DOCTYPE html!> الذي يعتبر إلزاميا في xhtml .
الهدف من دمج اللغتين هو الحصول على لغة تتضمن أهم مميزات اللغتين و مرونتهما و تكون لها قواعد صارمة لتجنب الكتابة العشوائية للوسوم بحيث تسهل عملية التعديل على الصفحات و فهم الكود .
الأمر أشبه باللغة الإنجليزية في بريطانيا نلاحظ أن المتحدث يحترم قواعد اللغة أما في الولايات المتحدة الأمريكية نجد المتحدث باللغة الإنجليزية يخرج عن قواعدها بعض الشيء . كان هذا شرح 


أنت الان في اول موضوع
هل اعجبك الموضوع :

تعليقات

تعليق واحد
إرسال تعليق
  1. If you're trying hard to burn fat then you have to get on this totally brand new tailor-made keto diet.

    To design this keto diet, certified nutritionists, personal trainers, and professional chefs have joined together to develop keto meal plans that are powerful, painless, cost-efficient, and delicious.

    Since their launch in early 2019, thousands of individuals have already completely transformed their body and well-being with the benefits a smart keto diet can give.

    Speaking of benefits: in this link, you'll discover 8 scientifically-certified ones offered by the keto diet.

    ردحذف

إرسال تعليق