البرمجة

ما هي لغة HTML؟

ما هي لغة HTML؟ 

ما هي لغة HTML؟

  • ما هي لغة ترميز HTML؟

  • HTML هي اختصار HyperText Markup Language ، وهي ليست لغة برمجة بالمعنى التقليدي للغات البرمجة ، ولكنها تعتبر لغة لوصف محتوى صفحات الويب للمواقع على المتصفحات مثل كروم، لأنه يجب أن يعرف أي برنامج متصفح ويب محتوى الصفحة من العناوين والنصوص والصور والروابط والمكونات الأخرى لصفحة الويب لي يتمكن من نشرها بشكل صحيح ، بحيث يمكنك عرضها بشكل صحيح وتعتبر لغة ترميز HTML اللغة الأساسية لأي موقع ويب أو صفحة على الإنترنت بالاضافة الى لغة CSS.
  • مكونات صفحة الويب عبارة  عن مجموعة من العناصراو العلامات. كل علامة مكتوبة في (أقواس مربعة) أو تسمى أيضًا علامة أقل من >وعلامة أكبر من <.
  •  هذه العلامات لاتظهر على متصفح الويب ، ولكن يعرض محتوى هذه الصفحة ، وهناك نوعان من العلامات.

  • ما هي أنواع الوسوم؟

  • النوع الأول: علامة يتم عرض محتواها مباشرة على صفحة الويب ، على سبيل المثال <img /> و <input />.
  • النوع الثاني: علامة تصف النصوص الموجودة بداخلها ، على سبيل المثال <p> النص داخل العلامة </ p> ، وقد تحتوي هذه العلامة على علامة أخرى بداخلها كعنصر فرعي لهذه العلامة. على سبيل المثال ، <p> النص <italic>> </p> ستلاحظ في هذا النوع أن كل علامة تتكون من جزأين (علامة البداية) و (علامة النهاية) وبينهما المحتوى المعروض في المتصفح.
  • ستلاحظ من هذا المثال أن كل عنصر (من النوع الثاني) من عناصر لغة HTML يتكون من علامة البداية والنهاية ،حيث أن اسم علامة النهاية هو نفس اسم العلامة من البداية ولكن مسبوقة بالعلامة (/)  ، وبينها محتوى العنصر يظهر هذا في متصفح الويب ، وسنستخدم أيضًا وصف (سمة) للعلامة ، و يحتوي كل وصف على اسم وقيمة جزئين وبينهما علامة (=). في المثال السابق ، اسم الوصف هو href والقيمة هي عنوان موقع ويب ، وكل ما سبق (باستثناء محتوى العلامة) لا يظهر في متصفح الويب ، ولكنه يأمر متصفح الويب عبر ارتباط تشعبي (ارتباط) بالقيمة الموجودة في محتوى العلامة ، وعند الضغط عليه ، يتم تحديث الصفحة إلى عنوان موقع الويب في قيمة الوصف (بين علامتي الاقتباس) و يمكن استبدال عنوان الموقع باسم صفحة أخرى.
  • لا يمكنك استخدام Microsoft Word أو WordPad لكتابة رموز HTML ، ولكن يجب عليك استخدام برنامج يدعم كتابة نص عادي أو نص عادي أو استخدام برنامج تحرير نصوص (برنامج محرر نص) ، ولكن لتبسيط الأمور ، سنستخدم برنامج المفكرة الموجود في نظام تشغيل Windows..

  • كيفية إنشاء صفحة ويب

  • نبدأ أولاً بفتح برنامج المفكرة ، ثم من خلال قائمة “ملف” ، نقوم بحفظ الملف عن طريق اختيار الأمر “حفظ باسم” ، ثم تظهر نافذة نكتبها في حقل (اسم الملف) ، وهذا هو أي أي اسم تختاره ، على سبيل المثال test.html واسم الملف يجب أن يكتب بملحق الملف وكتابة رموز HTML ، يجب أن يكون امتداد الملف (.html أو .htm) وفي نافذة حقل الحفظ كنوع ، سنحدد جميع الملفات وفي حقل (التشفير) سنختار UTF-8 بحيث يدعم الملف الكتابة باللغة العربية ، ثم انقر فوق حفظ ، الرقم يوضح ما يلي الخطوات بالتفصيل.
  • بعد إنشاء الملف ومعرفة المكونات الأساسية لعنصر HTML ، سنبدأ بكتابة الرموز الأساسية لإنشاء صفحة ويب (أو يمكنك نسخ محتوى المربع التالي من الملف) ثم سوف يشرح كل عنصر بالتفصيل.
  • ستلاحظ استخدام <! DOCTYPE html> الغرض من هذا الأمر هو تحديد إصدار HTML حتى يقوم متصفح الويب بترجمة الأوامر وعرضها بشكل صحيح (الإصدار المستخدم في المثال هو HTML5).
  • بعد ذلك ، استخدمنا علامة <html lang = “en”> ووظيفتها هي وصف المتصفح الذي يستخدمه البرنامج بلغة HTML. أما بالنسبة للغة الوصف ، إذا كان المحتوى باللغة العربية، فيمكن أن تكون قيمة الوصف باللغة العربية”ar”. نضع علامة الافتتاح في بداية الكود وفي نهاية الكود كتبنا علامة الإغلاق ، ثم سنقسم الصفحة إلى قسمين رئيسيين ، الأول هو علامة <head> ومحتوى هذه العلامة لا يظهر في المستعرض ، ولكنه يحتوي على معلومات حول الصفحة وكيفية عرض محتوى الصفحة باستخدام عنصري <meta /> و <title>. القسم الثاني من صفحة الويب هو استخدام علامة <body> وكل ما يكتب داخل هذه العلامة هو ما يتم عرضه وتنسيقه عبر المتصفح. يوضح الشكل التالي المزيد من مكونات كل جزء في هذا المثال.
  • في المثال السابق ، استخدمنا العلامة <img /> لعرض صورة ، وهي من النوع الأول غير موجود ، والنهاية تحظى بتقدير المحتوى الموصوف للمتصفح عبر وصف العلامة (السمات) ) ، استخدمنا الوصف src ، وهو اختصار للكلمة المصدرsource  ووظيفتها هي تحديد الصورة المطلوبة المعروضة في المتصفح ، كما استخدمنا الوصف alt ، وهو اختصار للكلمة alternative ، و الوظيفة هي كتابة الكلمة البديلة للصحة في حالة عدم إمكانية الوصول إليها أو قراءة الجملة المكتوبة كبديل للصورة في حالة الأشخاص ذوي الاحتياجات الخاصة الذين يعانون من إعاقة بصرية.
  • واستخدمنا أيضًا العلامة <p> ، وهي اختصار لكلمة فقرة ، تُستخدم لعرض النصوص وتنسيقها. وهي أيضًا من النوع الثاني حيث يجب وضع محتوى النصوص بين علامة البداية وعلامة النهاية.
  • أما بالنسبة لعلامة <title> ، كما هو موضح في الشكل السابق ، فهي تحدد عنوانًا للمتصفح.
  • من ما سبق ، سوف نستنتج أن HTML هي شجرة تتفرع منها العلامات ، ويمكن توضيح ذلك على النحو التالي:



    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

    إغلاق