HTML هيا إختصار لي HyperText Markup Language وتعني لغة ترميز النص التشعبي. إنها لغة ترميز قياسية لإنشاء صفحات الويب. يسمح بإنشاء وهيكل الأقسام والفقرات والروابط باستخدام عناصر HTML (اللبنات الأساسية لصفحة الويب) مثل العلامات والسمات.
لغة HTML لها الكثير من مجالات الاستخدام ، وهي:
- تطوير الشبكة: يستخدم المطورون كود HTML لتصميم كيفية عرض المستعرض لعناصر صفحة الويب ، مثل النص والارتباطات التشعبية وملفات الوسائط.
- التنقل عبر الإنترنت: يمكن للمستخدمين التنقل بسهولة وإدراج الروابط بين الصفحات والمواقع ذات الصلة حيث يتم استخدام HTML بكثرة لتضمين الارتباطات التشعبية.
- توثيق الويب: يتيح HTML تنظيم المستندات وتنسيقها ، على غرار Microsoft Word.
من الجدير بالذكر أيضًا أن HTML لا تعتبر لغة برمجة حيث لا يمكنها إنشاء وظائف ديناميكية. تعتبر HTML الآن معيار الويب الرسمي. يحافظ اتحاد شبكة الويب العالمية (W3C) على مواصفات HTML ويطورها ، إلى جانب توفير تحديثات منتظمة.
ستتناول في هذه المقالة أساسيات HTML ، بما في ذلك كيفية عملها وإيجابياتها وسلبياتها وكيفية ارتباطها بـ CSS و JavaScript.
كيف تعمل HTML؟
متوسط موقع الويب يتضمن عدة صفحات HTML مختلفة. على سبيل المثال ، تحتوي الصفحة الرئيسية وصفحة حول وصفحة جهة اتصال على ملفات HTML منفصلة.
مستندات HTML هي ملفات تنتهي بامتداد .html أو .htm. يقرأ مستعرض الويب ملف HTML ويعرض محتواه حتى يتمكن مستخدمو الإنترنت من مشاهدته.
تحتوي جميع صفحات HTML على سلسلة من عناصر HTML ، تتكون من مجموعة من العلامات والسمات. عناصر HTML هي اللبنات الأساسية لصفحة الويب. تخبر العلامة متصفح الويب بمكان بداية العنصر ونهايته ، بينما تصف السمة خصائص العنصر.
الأجزاء الثلاثة الرئيسية للعنصر هي:
- علامة الفتح : تُستخدم للإشارة إلى مكان بدء تأثير العنصر. يتم تغليف العلامة بأقواس زاوية الفتح والإغلاق. على سبيل المثال ، استخدم علامة البداية <p> لإنشاء فقرة.
- المحتوى : وهو ما يراه المستخدمون الآخرون.
- علامة الإغلاق : هي نفسها علامة الفتح ، ولكن بشرطة مائلة للأمام قبل اسم العنصر. على سبيل المثال ، <p/> لإنهاء فقرة.
سيؤدي الجمع بين هذه الأجزاء الثلاثة إلى إنشاء عنصر HTML، وهو المسؤل عن انشاء فقرة:
<p>HTML هكذا يمكنك انشاء فقرة بوسطة</p>جزء مهم آخر من عنصر HTML هو السمة الخاصة به attribute، والتي تتكون من قسمين – الاسم وقيمة السمة. يحدد الاسم المعلومات الإضافية التي يريد المستخدم إضافتها ، بينما تعطي قيمة السمة مواصفات إضافية.
على سبيل المثال ، سيبدو عنصر النمط الذي يضيف اللون الأرجواني وعائلة الخطوط “verdana”بالشكل التالي:
<p style="color:purple;font-family:verdana">HTML هكذا يمكنك انشاء فقرة بوسطة</p>سمة أخرى ،class هي الأكثر أهمية للتطوير والبرمجة. تضيف سمة class معلومات النمط التي يمكن أن تعمل على عناصر مختلفة بنفس قيمة الفئة.
على سبيل المثال ، سنستخدم نفس النمط لعنوان والفقرة . يشتمل النمط (style )على لون الخلفية ولون النص والحدود والهامش والمساحة المتروكة ضمن الفئة “مهم”. لتحقيق نفس النمط بين
و ، أضف 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>تحتوي معظم العناصر على علامة فتح وعلامة إغلاق ، لكن بعض العناصر لا تحتاج إلى علامات إغلاق للعمل ، مثل العناصر الفارغة. لا تستخدم هذه العناصر علامة نهاية لأنها لا تحتوي على محتوى:
<img src="/" alt="Image">تحتوي علامة الصورة هذه على سمتين – سمة src مسار الصورة، وسمة alt النص الوصفي. ومع ذلك ، لا يحتوي على محتوى ولا علامة نهاية.
أخيرًا ، يجب أن يبدأ كل مستند HTML بإعلان لإعلام متصفح الويب بنوع المستند. باستخدام HTML5 ، سيكون الإعلان العام لـHTML HTML:
<!DOCTYPE html>علامات HTML وعناصر HTML الأكثر استخدامًا
حاليًا ، هناك 142 علامة HTML متاحة تسمح بإنشاء عناصر مختلفة. على الرغم من أن المتصفحات الحديثة لم تعد تدعم بعض هذه العلامات ، فإن تعلم جميع العناصر المختلفة المتاحة لا يزال مفيدًا.
سيناقش هذا القسم علامات HTML الأكثر استخدامًا وعنصرين رئيسيين – عناصر مستوى الكتلة (block-level) والعناصر المضمنة (inline elements).
عناصر مستوى الكتلة (block-level)
يشغل عنصر على مستوى الكتلة عرض الصفحة بالكامل. يبدأ دائمًا سطرًا جديدًا في المستند. على سبيل المثال ، سيكون عنصر العنوان في سطر منفصل عن عنصر الفقرة.
تستخدم كل صفحة HTML هذه العلامات الثلاث:
- <html> علامة هي العنصر الجذر الذي يحدد مستند HTML بأكمله.
- <head> تحتفظ العلامة بالمعلومات الوصفية مثل عنوان الصفحة ومجموعة الأحرف.
- <body> تتضمن العلامة كل المحتوى الذي يظهر على الصفحة.
<html>
<head>
<!--المعلومات الوصفية -->
</head>
<body>
<!-- كل المحتوى الذي يظهر على الصفحة -->
</body>
</html>تشمل العلامات الشائعة الأخرى على مستوى الكتلة ما يلي:
Heading tags: هذه تتراوح من <h1> إلى <h6>، حيث يكون العنوان h1 أكبر حجمًا ، وتصغر كلما انتقلت إلى h6.
Paragraph tags: كلها محاطة باستخدام العلامة <p>.
List tags: لها اختلافات مختلفة. استخدم علامة <ol> لقائمة مرتبة ، واستخدم لقائمة <ul> غير مرتبة. ثم قم بتضمين عناصر قائمة فردية باستخدام العلامة <li>.
العناصر المضمنة (inline elements).
يقوم العنصر المضمن بتنسيق المحتوى الداخلي لعناصر مستوى الكتلة ، مثل إضافة الروابط والسلاسل المحددة. تُستخدم العناصر المضمنة بشكل شائع لتنسيق النص دون كسر تدفق المحتوى.
على سبيل المثال ،تعرض <strong> العلامة عنصرًا بخط غامق ، في حين أن العلامة <em> ستعرضه بخط مائل. الروابط التشعبية هي أيضًا عناصر مضمنة تستخدم علامة <a> وسمة href للإشارة إلى وجهة الرابط:
<a href="https://example.com/">Click me!</a>تطور HTML – ما الذي يختلف بين HTML و HTML5؟
يتكون الإصدار الأول من HTML من 18 علامة. منذ ذلك الحين ، جاء كل إصدار جديد بعلامات وسمات جديدة مضافة إلى الترميز. كان التحديث الأكثر أهمية للغة حتى الآن هو إدخال HTML5 في عام 2014.
يتمثل الاختلاف الرئيسي بين HTML و HTML5 في أن HTML5 يدعم أنواعًا جديدة من عناصر التحكم في النموذج. قدمت HTML5 أيضًا العديد من العلامات الدلالية التي تصف المحتوى بوضوح ، مثل <article> و <header> و <footer> .
إيجابيات وسلبيات HTML
تمامًا مثل أي لغة كمبيوتر أخرى ، فإن لغة HTML لها نقاط قوتها وقيودها. فيما يلي مزايا وعيوب HTML:
الايجابيات:
سهل التعلم: يحتوي HTML على ترميز نظيف ومتسق ، بالإضافة إلى منحنى تعليمي ضحل.
مدعوم: يتم استخدام اللغة على نطاق واسع ، مع وجود الكثير من الموارد ومجتمع كبير وراءها.
غير مقيد: إنه مفتوح المصدر ومجاني تمامًا. يعمل HTML أصلاً في جميع متصفحات الويب.
مرن: يمكن دمج HTML بسهولة مع لغات الواجهة الخلفية مثل PHP و Node.js.
سلبيات:
ثابتة: تُستخدم اللغة بشكل أساسي لصفحات الويب الثابتة. للحصول على وظائف ديناميكية ، قد تحتاج إلى استخدام JavaScript أو لغة خلفية مثل PHP.
صفحة HTML منفصلة: يجب على المستخدمين إنشاء صفحات ويب فردية لـ HTML ، حتى لو كانت العناصر هي نفسها.
توافق المتصفح: تعتمد بعض المتصفحات ميزات جديدة ببطء. في بعض الأحيان ، لا تعرض المتصفحات القديمة العلامات الأحدث دائمًا.
كيف ترتبط HTML و CSS و Javascript
يستخدم HTML لإضافة عناصر النص وإنشاء بنية المحتوى. ومع ذلك ، لا يكفي إنشاء موقع ويب احترافي وسريع الاستجابة. لذلك ، يحتاج HTML إلى مساعدة Cascading Style Sheets (CSS) و JavaScript لإنشاء الغالبية العظمى من محتوى موقع الويب.
CSS مسؤولة عن الأنماط مثل الخلفية والألوان والتخطيطات والتباعد والرسوم المتحركة. من ناحية أخرى ، تضيف JavaScript وظائف ديناميكية مثل الانزلق والنوافذ المنبثقة ومعارض الصور. هذه اللغات الثلاث هي أساسيات تطوير الواجهة الأمامية.
تعلم HTML وتحسين معارف HTML الخاصة بك
يعد التعرف على HTML خطوة أولى رائعة للمهتمين بتطوير الويب.
هناك الكثير من الدورات التدريبية المتاحة عبر الإنترنت لتعلم البرمجة ، لكننا قمنا بإدراج ثلاثة من أفضل قواعد البيانات التعليمية لـ HTML:
- W3Schools: لديه موارد وأمثلة وتمارين للمساعدة في تعلم HTML الأساسي مجانًا. هناك أيضًا برنامج تعليمي HTML ذاتي السرعة يكلف 95 دولارًا ويوفر شهادة رسمية.
- Codecademy: يقدم دورات تمهيدية مجانية مع دروس تعليمية تفاعلية. يستخدم Codecademy شاشة مقسمة تعرض تلقائيًا نتيجة الترميز على ملف HTML. هناك محتوى حصري متاح مقابل 19.99 دولارًا في الشهر.
- Coursera: تقدم دورات متنوعة تقدم تفسيرات متعمقة مع أمثلة من واقع الحياة. سعر الاشتراك هو 49 دولارًا شهريًا ، وهناك إصدار تجريبي مجاني لمدة 7 أيام للبدء.
خاتمة
HTML هي لغة الترميز الأساسية الموجودة على الإنترنت. تحتوي كل صفحة HTML على سلسلة من العناصر التي تنشئ بنية المحتوى لصفحة ويب أو تطبيق.
HTML هي لغة صديقة للمبتدئين مع الكثير من الدعم وتستخدم بشكل أساسي لصفحات مواقع الويب الثابتة. يعمل HTML بشكل أفضل مع CSS للتصميم وجافا سكريبت للوظائف. يمكنك التحقق من كيفية ربط CSS و HTML على مدونتنا.
لقد أظهرنا لك أيضًا بعضًا من أفضل الدورات التدريبية المتاحة عبر الإنترنت والتي ستساعد إما في تحسين معرفتك بـ HTML أو توفير فهم أساسي لها.
أخبرنا في قسم التعليقات إذا كان لديك أي موارد أخرى مفضلة لتعلم HTML بها. حظ سعيد.
تعليقات