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

ستتناول في هذه المقالة أساسيات HTML ، بما في ذلك كيفية عملها وإيجابياتها وسلبياتها وكيفية ارتباطها بـ CSS و JavaScript

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

لا تعتبر HTML لغة برمجة لأنها لا تستطيع إنشاء وظائف ديناميكية. ولكن ، باستخدام HTML ، يمكن لمستخدمي الويب إنشاء وهيكلة أقسام وفقرات وروابط باستخدام العناصر والعلامات والسمات.

فيما يلي بعض الاستخدامات الأكثر شيوعًا لـ HTML:

1- تطوير الشبكة. يستخدم المطورون كود HTML لتصميم كيفية عرض المستعرض لعناصر صفح الويب، مثل النص والارتباطات التشعبية وملفات الوسائط.


2- التنقل عبر الإنترنت. يمكن للمستخدمين التنقل بسهولة وإدراج الروابط بين الصفحات والمواقع ذات الصلة حيث يتم استخدام HTML بكثرة لتضمين الارتباطات التشعبية.  

                 
3- توثيق الويب. يتيح HTML تنظيم المستندات وتنسيقها، مثل .Microsoft Word    

من الجدير بالذكر أيضًا أن HTML تُعتبر الآن معيارًا رسميًا للويب. يحافظ اتحاد شبكة الويب    العالمية (W3C) على مواصفات HTML ويطورها ، إلى جانب توفير تحديثات منتظمة.

كيف تعمل لغة HTML


يتضمن متوسط ​​موقع الويب عدة صفحات HTML مختلفة. على سبيل المثال، تحتوي الصفحة الرئيسية(Home page) وصفحة حولabout)) وصفحة جهة اتصال(contact ) على ملفات HTMLمنفصلة.

مستندات HTML هي ملفات تنتهي بامتداد .html أو .htm يقرأ مستعرض الويب ملف HTML ويعرض محتواه حتى يتمكن مستخدمو الإنترنت من مشاهدته.

تحتوي جميع صفحات HTML على سلسلة من عناصر HTML ، تتكون من مجموعة من العلامات والسمات. عناصر HTML هي اللبنات الأساسية لصفحة الويب. تخبر العلامة(tag ) متصفح الويب بمكان بداية العنصر ونهايته ، بينما تصف السمة(attribute  ) خصائص العنصر.

الأجزاء الثلاثة الرئيسية للعنصر هي:

1-علامة الفتح (opining tag ) – تُستخدم للإشارة إلى مكان بدء تأثير العنصر. يتم تغليف العلامة بأقواس زاوية ( > ) الفتح والإغلاق. على سبيل المثال، استخدم علامة البداية <p> لإنشاء فقرة.
2-المحتوى – هذا هو الناتج الذي يراه المستخدمون الآخرون.
3-علامة الإغلاق (</  ) – هي نفسها علامة الفتح ، ولكن بشرطة مائلة للأمام قبل اسم العنصر. على سبيل المثال، / p لإنهاء فقرة.
سيؤدي الجمع بين هذه الأجزاء الثلاثة إلى إنشاء عنصر HTML:

<p>This is how you add a paragraph in HTML.</p>

جزء مهم آخر من عنصر HTML هو السمة الخاصة به، والتي تتكون من قسمين – الاسم وقيمة السمة. يحدد الاسم المعلومات الإضافية التي يريد المستخدم إضافتها ، بينما تعطي قيمة السمة مواصفات إضافية.

على سبيل المثال ، سيبدو عنصر النمط الذي يضيف اللون الأرجواني وعائلة الخطوط verdana بالشكل التالي:

<p style="color:purple;font-family:verdana">This is how you add a paragraph in HTML.</p>

سمة أخرى ، فئة HTML ، هي الأكثر أهمية للتطوير والبرمجة. تضيف سمة الفئة معلومات النمط التي يمكن أن تعمل على عناصر مختلفة بنفس قيمة الفئة.

على سبيل المثال ، سنستخدم نفس النمط للعنوان h1 والفقرة p. يشتمل النمط على لون الخلفية ولون النص والحدود والهامش والمساحة المتروكة ضمن الفئة ‘مهم’. لتحقيق نفس النمط بين h1 و p ، أضف class = ‘important’ بعد كل علامة بداية:

<html>
   <head>        
     <style>                     
        .important {                       
        background-color: blue;                          
        color: white;                 
        border: 2px solid black;                 
        margin: 2px;                 
                     padding: 2px;
      }         
     </style>        
   </head>
 <body>     
   <h1 class="important">This is a heading</h1>          
   <p class="important">This is a paragraph.</p>         
 </body>     
</html>

تحتوي معظم العناصر على علامة فتح وعلامة إغلاق ، لكن بعض العناصر لا تحتاج إلى علامات إغلاق للعمل ، مثل العناصر الفارغة(empty tags). لا تستخدم هذه العناصر علامة نهاية لأنها لا تحتوي على محتوى، مثل:

<img src="/" alt="Image">

تحتوي علامة الصورة هذه على سمتين – سمة src وهو مسار الصورة وسمة alt وهو النص الوصفي. ومع ذلك، لا يحتوي على محتوى ولا علامة نهاية(closed tag)

أخيرًا ، يجب أن يبدأ كل مستند HTML بإعلان <DOCTYPE!> لإعلام متصفح الويب بنوع المستند. مع HTML5 ، سيكون هو الإعلان العام .

علامات HTML وعناصر HTML الأكثر استخدامًا. 

Most Used HTML Tags and HTML Elements.

حاليًا ، هناك 142 علامة HTML متاحة تسمح بإنشاء عناصر مختلفة. على الرغم من أن المتصفحات الحديثة لم تعد تدعم بعض هذه العلامات ، فإن تعلم جميع العناصر المختلفة المتاحة لا يزال مفيدًا.

سيناقش هذا القسم علامات HTML الأكثر استخدامًا وعنصرين رئيسيين – عناصر مستوى الكتلة والعناصر المضمنة (block-level elements and inline elements

عناصر مستوى الكتلةBlock-Level Elements-

يشغل عنصر على مستوى الكتلة عرض الصفحة بالكامل. يبدأ دائمًا سطرًا جديدًا في المستند. على سبيل المثال ، سيكون عنصر العنوان في سطر منفصل عن عنصر الفقرة.

تستخدم كل صفحة HTML هذه العلامات الثلاث:

 <html> العلامة هي العنصر الجذر الذي يعرّف مستند HTML بأكمله.

<img src="/" alt="Image">

 <head>تحتفظ العلامة بالمعلومات الوصفية مثل عنوان الصفحة ومجموعة الأحرف.

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

العناصر المضمنة(Inline Elements):

يقوم العنصر المضمن بتنسيق المحتوى الداخلي لعناصر مستوى الكتلة ، مثل إضافة الروابط والسلاسل المحددة. تُستخدم العناصر المضمنة بشكل شائع لتنسيق النص دون كسر تدفق المحتوى.

على سبيل المثال ، ستعرض العلامة <strong> tag عنصرًا بخط غامق ، في حين أن علامة <em> ستظهره بخط مائل. الروابط التشعبية هي أيضًا عناصر مضمنة تستخدم علامة وسمة href للإشارة إلى وجهة الرابط:

<a href="https://example.com/">Click me!</a>

تطور HTML – ما الذي يختلف بين HTML و HTML5؟

يتكون الإصدار الأول من HTML من 18 علامة. منذ ذلك الحين ، جاء كل إصدار جديد بعلامات وسمات جديدة مضافة إلى الترميز. كان التحديث الأكثر أهمية للغة حتى الآن هو إدخال HTML5 في عام 2014.

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

مثل: <article><header>, and <footer>

إيجابيات وسلبياتHTML 

تمامًا مثل أي لغة كمبيوتر أخرى ، فإن لغة HTML لها نقاط قوتها وقيودها. فيما يلي مزايا وعيوب HTML:

الايجابيات:

1- صديقة للمبتدئين:- يحتوي HTML على ترميز نظيف ومتسق ، بالإضافة إلى منحنى تعليمي ضحل.
2- الدعم:- يتم استخدام اللغة على نطاق واسع ، مع وجود الكثير من الموارد ومجتمع كبير وراءها.
3- يمكن الوصول:- إنه مفتوح المصدر ومجاني تمامًا. يعمل HTML أصلاً في جميع متصفحات الويب.
4- مرن:- يمكن دمج HTML بسهولة مع لغات الواجهة الخلفية مثل PHP و Node.js.

سلبيات:

1- ثابتة. يتم استخدام اللغة بشكل أساسي لصفحات الويب الثابتة. للحصول على وظائف ديناميكية ، قد تحتاج إلى استخدام JavaScript أو لغة خلفية مثل PHP.


2- صفحة HTML منفصلة. يجب على المستخدمين إنشاء صفحات ويب فردية لـ HTML ، حتى لو كانت العناصر هي نفسها.


3- التوافق المتصفح. تعتمد بعض المتصفحات ميزات جديدة ببطء. في بعض الأحيان ، لا تعرض المتصفحات القديمة العلامات الأحدث دائمًا.

كيف ترتبط HTML و CSS وJavascript

يستخدم HTML لإضافة عناصر نصية وإنشاء بنية المحتوى. ومع ذلك، لا يكفي إنشاء موقع ويب احترافي وسريع الاستجابة. لذلك ، يحتاج HTML إلى مساعدة Cascading Style Sheets (CSS) و JavaScript لإنشاء الغالبية العظمى من محتوى موقع الويب.

 CSSمسؤولة عن الأنماط مثل الخلفية والألوان والتخطيطات والتباعد والرسوم المتحركة. من ناحية أخرى ، تضيف JavaScript وظائف ديناميكية مثل المنزلق والنوافذ المنبثقة ومعارض الصور. هذه اللغات الثلاث هي أساسيات تطوير الواجهة الأمامية.

فهم HTML وتحسين معرفة HTML الخاصة بك


يعد التعرف على HTML خطوة أولى رائعة للمهتمين بتطوير الويب.

هناك الكثير من الدورات التدريبية المتاحة عبر الإنترنت لتعلم البرمجة ، لكننا قمنا بإدراج ثلاثة من أفضل قواعد البيانات التعليمية لـ HTML:

 :W3Schoolsلديه موارد وأمثلة وتمارين للمساعدة في تعلم HTML الأساسي مجانًا. هناك أيضًا برنامج تعليمي HTML ذاتي السرعة يكلف 95 دولارًا ويوفر شهادة رسمية.

. :Codecademyيقدم دورات تمهيدية مجانية مع دروس تعليمية تفاعلية.

كورسيرا – تقدم دورات متنوعة تقدم تفسيرات متعمقة مع أمثلة من الحياة الواقعية.

الخلاصة


HTMLهي لغة الترميز الأساسية الموجودة على الإنترنت. تحتوي كل صفحة HTML على سلسلة من العناصر التي تنشئ بنية المحتوى لصفحة ويب أو تطبيق.

HTMLهي لغة صديقة للمبتدئين مع الكثير من الدعم وتستخدم بشكل أساسي لصفحات مواقع الويب الثابتة. يعمل HTML بشكل أفضل مع CSS للتصميم وجافا سكريبت للوظائف.

لقد أظهرنا لك أيضًا بعضًا من أفضل الدورات التدريبية المتاحة عبر الإنترنت والتي ستساعد إما في تحسين معرفتك بـ HTML أو توفير فهم أساسي لها.

أخبرنا في قسم التعليقات إذا كان لديك أي موارد أخرى مفضلة لتعلم HTML بها. حظا سعيدا.

1 Comment

  1. السيد مرسي

    شكرا ي محمود ع المقال الجامد دا ♥

اكتب تعليقا

%d مدونون معجبون بهذه:
Ads Blocker Image Powered by Code Help Pro
انت تستخدم مانع الإعلانات

من فضلك قم بإيقاف مانع الإعلانات

اضغط هنا بعد ان تقوم بإيقاف مانع الإعلانات