البرمجة

ما هي لغة HTML؟

ما هي لغة HTML؟ 

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

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

هذه العلامات لاتظهر على متصفح الويب ، ولكن يعرض محتوى هذه الصفحة ، وهناك نوعان من العلامات.

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

النوع الأول: علامة يتم عرض محتواها مباشرة على صفحة الويب ، على سبيل المثال <img /> و <input />.

النوع الثاني: علامة تصف النصوص الموجودة بداخلها ، على سبيل المثال <p> النص داخل العلامة </ p> ، وقد تحتوي هذه العلامة على علامة أخرى بداخلها كعنصر فرعي لهذه العلامة. على سبيل المثال ، <p> النص <italic>> </p> ستلاحظ في هذا النوع أن كل علامة تتكون من جزأين (علامة البداية) و (علامة النهاية) وبينهما المحتوى المعروض في المتصفح.

ما هو HTML الدلالي؟

تعني HTML الدلالي أن علامات HTML الخاصة بك تنقل المعنى الفعلي لما يتم استخدامها من أجله.

كانت الدلالات جزءًا لا يتجزأ من HTML منذ إنشائها في أوائل التسعينيات. لكنها لم تكتسب أهمية خاصة حتى أواخر التسعينيات عندما بدأ CSS العمل في معظم المتصفحات.

باستخدام HTML الدلالي ، يمكن للعلامات المحايدة لغويًا مثل العلامات الوصفية الأكثر معنوية مثل <div>، ، ، ، ويمكن أن تفعل نفس الشيء الذي تفعله.<span><header><nav><main><section><footer><article>

تتمثل الميزة الملحوظة في استخدام العلامات الدلالية في أن برامج زحف الويب قادرة على فهرسة صفحة الويب أو موقع الويب بسهولة ، مما يؤدي إلى تحسين تحسين محركات البحث في المقابل.

بالإضافة إلى ذلك ، يصبح موقع الويب الذي يستخدم الدلالات أكثر إفادة وقابلية للتكيف ويمكن الوصول إليه من قبل أولئك الذين يستخدمون برامج قراءة الشاشة للوصول إلى مواقع الويب.

العلامات الدلالية الهامة وماذا يفعلون

لنلقِ نظرة على بعض علامات HTML الدلالية الأكثر استخدامًا:

<header><header>يحدد العنصر القسم التمهيدي لصفحة الويب. يحتوي على عناصر مثل الشعار والتنقل ومبدل السمات وشريط البحث.

<nav><nav>يحدد العنصر عناصر التنقل للصفحة مثل الصفحة الرئيسية ، جهة الاتصال ، حول ، الأسئلة الشائعة ، وما إلى ذلك.

<main><main>يتم التعامل مع العنصر بشكل تقليدي باعتباره تابعًا مباشرًا للعلامة. يحتوي على الأقسام الرئيسية من مستند HTML بصرف النظر عن <header>و <footer>. من الناحية المثالية ، يجب أن يكون هناك واحد فقط من هؤلاء في مستند HTML بأكمله.

<section><section>يحدد العنصر قسمًا معينًا من صفحة الويب. قد يكون هذا هو قسم العرض أو القسم أو قسم الاتصال أو غيره. يمكنك استخدام العديد من الأقسام في مستند HTML واحد.

<article><article>يمثل العنصر جزءًا معينًا من صفحة الويب التي تنقل بعض المعلومات المعينة. يمكن أن تكون هذه المعلومات عبارة عن مجموعة من النصوص والصور ومقاطع الفيديو والتضمينات. انظر إلى هذا العنصر على أنه منشور مدونة مستقل على صفحة تحتوي على مقتطفات حول منشورات مدونة أخرى.

<aside>: كما يوحي الاسم ، يمثل هذا الشريط الجانبي على صفحة الويب. عادة ما يكون جزءًا من صفحة الويب لا يرتبط مباشرة بالمحتوى الرئيسي.

<footer><footer>يستوعب العنصر عناصر مثل الروابط السريعة أو معلومات حقوق النشر أو أي بيانات أخرى تتعلق بالموقع أو صفحة الويب بأكملها.

لاحظ أنه نظرًا لأن العناصر الدلالية تنقل المعنى الفعلي وما يفعله بعض المحتوى المعين بالفعل (مثل navالتنقل asideوالشريط الجانبي وما إلى ذلك) ، لا يتم وضع هذه العناصر تلقائيًا في المكان الذي من المفترض أن تكون فيه. لا يزال يتعين عليك القيام بذلك باستخدام CSS.

يبدو مستند HTML الدلالية البسيط للغاية كما يلي:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Definition of HTML</title>
  </head>

  <body>
    <header>
      <h1 class="logo">LOGO</h1>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
          <li>FAQs</li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="about-me">
        <article>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
          est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
          nesciunt, nisi inventore assumenda earum repellat labore ratione
          architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
          soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
          voluptatem quam at officia beatae!
        </article>
      </section>
      <section class="contact-me">
        You can find me on
        <a href="https://twitter.com/koladechris">Twitter</a> You can find me on
        <a href="https://Instagram.com/koladechris">Instagram</a>
      </section>
      <aside class="address">My Address</aside>
    </main>
    <footer>© 2020 All Rights Reserved</footer>
  </body>
</html>

هذا ما يبدو عليه المتصفح:

الدلالي HTML-4

يمكنك أن ترى أن المحتوى الموجود داخل <aside>العلامة ليس في الشريط الجانبي وأن المحتوى الموجود داخل <nav>العلامة غير متاح تلقائيًا كشريط التنقل. هذا هو السبب في أنه لا يزال يتعين عليك جعلهم يبدون بالشكل الذي من المفترض أن ينظروا إليه باستخدام CSS.

  • ستلاحظ من هذا المثال أن كل عنصر (من النوع الثاني) من عناصر لغة 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 هي شجرة تتفرع منها العلامات ، ويمكن توضيح ذلك على النحو التالي:

خاتمة

آمل أن يكون هذا المقال قد ساعدك في تعلم أساسيات HTML وما يفعله. يمكنك الآن البدء في تعلم المزيد من التقنيات المتقدمة مثل CSS و JavaScript ، ثم البدء في تكوين مهنة قوية في تطوير الويب.

شكرا جزيلا للقراءة واستمتع بوقتك.

موقع ukirn يشكركم على زيارتكم

المراجع :

موضوع 

ويكيبيديا

freecodecamp

مقالات ذات صلة

زر الذهاب إلى الأعلى