تعليم جميع المفاهيم الأساسية وأهم النقاط والمميزات في برمجة HTML بلغة بسيطة وطلاقة مع أمثلة تشغيلية
ترمز HTML إلى "Hyper Text Markup Language" ، والتي تُستخدم لإنشاء صفحات الويب والتطبيقات. ما المقصود ب "لغة ترميز النص التشعبي" وصفحة الويب؟
ما هو HTML وكيف يعمل؟
"HTML" هو ملف نصي يحتوي على صيغة خاصة وملف واصطلاح تسمية يشير للكمبيوتر وخادم الويب إلى أنه "HTML" ويجب قراءته على هذا النحو. من خلال تطبيق اصطلاحات "HTML" هذه على ملف نصي في أي محرر نصوص تقريبًا ، يمكن للمستخدم كتابة وتصميم صفحة ويب أولية ثم تحميلها على الإنترنت.
أبسط عقد "HTML" هو تضمين إعلان نوع المستند في بداية الملف النصي ودائمًا في بداية المستند ، لأنه الجزء الذي يخبر الكمبيوتر بالتأكيد أن هذا ملف "HTML". يكون رأس المستند عادةً: "<! DOCTYPE html>".
يجب أن يكتب دائمًا على هذا النحو ، دون أي محتوى بداخله أو كسره. لن يتعرف الكمبيوتر على أي محتوى يسبق هذا الإعلان على أنه "HTML".
لا تُستخدم أنواع Doctypes مع HTML فقط ، ولكن يمكن استخدامها لإنشاء أي مستند يستخدم SGML (لغة التوصيف القياسية العامة). "SGML" هو معيار لتحديد لغة ترميز معينة يتم استخدامها. تعد "HTML" واحدة من عدة لغات ترميزية يتم تطبيق إشعارات "SGML" عليها و "نوع المستند".
من المتطلبات الهامة الأخرى لإنشاء ملف "HTML" حفظه بامتداد الملف ".html" أو ".htm". بينما يشير إعلان "DOCTYPE HTML" إلى الكمبيوتر من داخل الملف ، فإن امتداد الملف يشير إلى الكمبيوتر من خارج الملف. باستخدام كليهما ، يمكن للكمبيوتر التعرف على ملف "HTML" ، سواء كان يقرأ ملفًا أم لا. هذا مهم بشكل خاص عند تحميل الملفات على الويب ، لأن خادم الويب يجب أن يعرف ما يجب فعله بالملفات قبل أن يتمكن من إرسالها إلى نظام العميل لقراءة المحتويات الداخلية.
بعد كتابة "DOCTYPE" وحفظها كملف "HTML" ، يمكن للمستخدم تنفيذ أدوات أخرى لبناء جملة "HTML" لتخصيص صفحة ويب. عند الانتهاء ، من المحتمل أن يكون لدى المستخدمين العديد من ملفات "HTML" المتعلقة بصفحات الويب المختلفة. من المهم تحميل هذه الملفات في نفس التسلسل الهرمي الذي تم تخزينها فيه ، لأن كل صفحة تشير إلى مسارات ملفات الصفحات الأخرى وتمكن الارتباط بينها. سيؤدي تحميلها بترتيب مختلف إلى تعطل الروابط وفقدان الصفحات ، لأن مسارات الملفات المحددة لا تتطابق مع الصفحات.
ما هي علامات HTML وكيف تعمل؟
كما ترى في مثال علامة "HTML" في الصورة أعلاه ، لا يوجد العديد من المكونات. بشكل عام ، لدينا نوعان من العلامات هنا: 1- علامات الفتح / البداية ("علامة الفتح") و 2 - علامات الإغلاق / النهاية ("علامة الإغلاق").
تتضمن علامات فتح "HTML" علامة الاسم ("الاسم") وعلامة السمة ("السمة") ، والتي تشتمل جميعها ، مثل علامة العنوان ، على علامة تصنيف مفتوحة (">") ، واسم علامة ، وعلامة علامة التجزئة ("<") هي.
تتضمن العلامات المغلقة علامات "شرطة مائلة للأمام" وعلامات "اسم" مغلقة. كما ترى في الشكل ، تتضمن العلامات المغلقة علامة النجمة أو "الزاوية العريضة" (">") وعلامة الشرطة المائلة ("الشرطة المائلة للأمام") واسم العلامة وعلامة التصنيف أو الزاوية المغلقة ("<" ). بالنسبة للعلامات مثل "<img>" التي تعتبر علامات مغلقة ، فمن الأفضل إنهاءها بشرطة مائلة للأمام.
كما ذكرنا ، كل علامة بين علامة النجمة أو الزاوية المفتوحة (">") وكويكب أو زاوية مغلقة ("<") ويتم عرض كل شيء بين علامتي فتح وإغلاق. في المثال أعلاه ، تنشئ العلامة "<a>" ارتباطًا يسمى "Hello World" يشير إلى ملف "hope.html".
مثال HTML بسيط
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>وصف مثال HTML أعلاه
"<DOCTYPE!>": يحدد هذا الحقل نوع المستند أو يُعلم المتصفح بإصدار HTML.
"<html>": تخبر هذه العلامة المتصفح أن هذا مستند HTML. يصف النص الموجود بين علامة html وثيقة الويب. هذه العلامة هي حامل لعناصر HTML الأخرى باستثناء "<DOCTYPE!>" است.
"<head>": يجب أن تكون هذه العلامة العنصر الأول ضمن علامة "<html>" التي تحتوي على بيانات إضافية (معلومات المستند). يجب إغلاق علامة "<head>" قبل فتح علامة "<body>".
"<title>": كما يوحي الاسم ، يتم استخدامه لإضافة عنوان إلى صفحة HTML التي تظهر أعلى نافذة المتصفح. يجب وضعها داخل علامة "<head>" وإغلاقها على الفور. (هذه العلامة اختيارية.)
"<body>": النص الموجود بين علامتي "<body>" يصف محتوى الصفحة المرئي للمستخدم. تحتوي هذه العلامة على المحتوى الرئيسي لوثيقة HTML.
"<h1>": يشير النص الموجود بين علامات "<h1>" إلى رأس المستوى الأول لصفحة الويب.
"<p>": نص بين العلامات "<p>" يصف فقرة من صفحة الويب.
ما هو HTML 5
HTML5 هو إصدار محدث من HTML من HTML4 (يتبع XHTML إصدار ترقيم مختلف). يتبع HTML5 نفس قواعد HTML4 الأساسية ، لكنه يضيف بعض العلامات والميزات الجديدة التي تتيح معنى أفضل وعناصر ديناميكية باستخدام JavaScript. تتضمن العناصر الجديدة: <article>, <aside>;, <audio>, <bdi>, <canvas>, <datalist>, <details>, <embed>, <figure>, <figcaption>, <Footer>, <header>, <keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <rt>, <ruby>, <time>, <track>, <video>, <br>. هناك أيضًا أنواع جديدة من المدخلات للنماذج ، بما في ذلك الهاتف والبحث وعنوان URL والبريد الإلكتروني والتاريخ والشهر والأسبوع والوقت والتوقيت المحلي والرقم والنطاق واللون.
من خلال زيادة الحركة لإبقاء الهيكل والأسلوب منفصلين ، تمت إزالة بعض الأنماط المصممة ، جنبًا إلى جنب مع تلك التي واجهت مشاكل في الوصول أو كانت قليلة الاستخدام. يجب عدم استخدام العناصر التالية في HTML بعد الآن:
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>
الغرض الرئيسي من Html5 هو دعم أحدث تقنيات الوسائط المتعددة بحيث يسهل قراءتها ويمكن فهمها باستمرار بواسطة أجهزة الكمبيوتر ومتصفحات الويب والمحللين وغير ذلك.
مزايا وعيوب HTML
مزايا استخدام HTML هي:
- مقبولاً على نطاق واسع من قبل عدد كبير من المصادر المتاحة.
- يعمل أصلاً في أي متصفح.
- من السهل نسبيًا التعلم.
- شفرة مصدر نظيفة ومستقرة.
- مفتوح المصدر ومجاني الاستخدام.
- يمكن أن تتكامل مع لغات البرمجة الخلفية الأخرى مثل PHP.
المساوئ التي يجب مراعاتها هي:
- ليس لديها الكثير من الأداء الديناميكي وتستخدم بشكل أساسي لصفحات الويب الثابتة.
- يجب إنشاء جميع المكونات بشكل منفصل ، حتى لو كانت تستخدم نفس العناصر.
- قد يكون سلوك المتصفح غير متوقع. على سبيل المثال ، قد لا تتوافق المتصفحات القديمة مع الميزات الأحدث.
علامات HTML الشائعة
تحدد علامات HTML الهيكل العام للصفحة وكيفية عرض العناصر الموجودة بداخلها في المستعرض. علامات HTML الشائعة هي:
- "<h1>" الذي يصف عنوان المستوى الأعلى.
- "<h2>" الذي يصف عنوان المستوى الثاني.
- "<p>" يصف فقرة.
- "<table>" يصف البيانات الجدولية.
- "<ol>" الذي يصف قائمة بالمعلومات التي تم فرزها.
- "<ul>" الذي يصف قائمة غير مرتبة من المعلومات.
كما ذكرنا ، هناك علامات مفتوحة ومغلقة تحتوي على المحتوى الذي تريده. تبدو العلامة المفتوحة على النحو التالي: "<p>". علامة النهاية هي نفسها ، لكنها تحتوي على رد فعل عكسي يشير إلى نهاية علامة HTML. أغلق العلامات مثل هذا: "</p>".
كيفية استخدام وتنفيذ HTML
نظرًا لأن HTML مستند إلى النص بالكامل ، يمكن تحرير ملف HTML بسهولة عن طريق فتحه في تطبيقات مثل Notepad ++ أو Vi أو Emacs. يمكن استخدام أي محرر نصوص لإنشاء ملف HTML أو تحريره ، وطالما تم تسميته بامتداد ملف .html ، يمكن لأي مستعرض ويب مثل Chrome أو Firefox عرض الملف كصفحة ويب.
لمطوري البرامج المحترفين ، هناك العديد من محرري WYSIWYG لتطوير صفحات الويب. تقدم NetBeans و IntelliJ و Eclipse و Microsoft Visual Studio محررات WYSIWYG كمكونات إضافية أو مكونات تجعل HTML سهل الاستخدام والتنفيذ للغاية.
تتيح محررات WYSIWYG أيضًا استكشاف أخطاء HTML وإصلاحها ، على الرغم من أن متصفحات الويب الحديثة تحتوي غالبًا على مكونات إضافية لمطوري الويب تبرز مشكلات صفحات HTML ، مثل العلامات المفقودة أو كيف لا تبدو HTML جيدة.
يشتمل كل من Chrome و Firefox على أدوات تطوير HTML التي تتيح لك عرض ملف HTML لصفحة الويب على الفور ، بالإضافة إلى تحريره على الفور وإجراء تغييرات فورية على متصفح الويب الخاص بك.
HTML و CSS وجافا سكريبت
يتم استخدام HTML لإنشاء صفحات الويب ، ولكنها تواجه قيودًا على المكونات "سريعة الاستجابة". لذلك ، يجب استخدام HTML فقط لإضافة عناصر نصية وهيكلها إلى الصفحة. لمزيد من الميزات المعقدة ، يمكن دمجه مع (CSS) و JavaScript (JS).
يمكن ربط ملف HTML بملف CSS أو JS. عادةً ما يكون في الجزء العلوي من المستند مع مسار ملف معين يحتوي على معلومات حول الألوان المراد استخدامها والخطوط ومعلومات أخرى حول عناصر HTML. يسمح JavaScript أيضًا للمطورين بدمج وظائف أكثر ديناميكية مثل النوافذ المنبثقة وشرائح الصور في صفحة الويب. تُستخدم العلامات التي تسمى سمات الفئة لمطابقة عناصر HTML مع عناصر CSS أو JS الخاصة بها.
على سبيل المثال ، إذا أراد المستخدم أن يكون لون مقدار معين من النص باللون الأحمر ، فيمكنه كتابة التعليمات البرمجية في ملف CSS بسمة فئة تجعل النص أحمر. يمكنه بعد ذلك وضع سمة الفئة المرتبطة على جميع مقتطفات النص التي تريد أن تكون حمراء على صفحة HTML. ينطبق نفس المبدأ على علامات تبويب JS ذات الوظائف المختلفة.
يعد فصل المعلومات حول كيفية تنظيم الصفحة عن المعلومات المتعلقة بكيفية ظهور صفحة الويب عند تشغيلها في المستعرض نمطًا لتطوير البرامج ويُعرف أكثر بفصل الاهتمامات.
تاريخ وتطوير HTML
في الأيام الأولى لشبكة الويب العالمية ، كان وضع علامات على المستندات النصية باستخدام HTML كافيًا لتسهيل مشاركة الأوراق الأكاديمية والملاحظات الفنية. ومع ذلك ، مع انتشار الإنترنت إلى المنازل العامة ، كان هناك طلب متزايد على صفحات الويب من حيث التنسيق والتفاعل.
تم إصدار HTML 4.01 في عام 1999 ، عندما لم يكن الإنترنت معروفًا بعد ولم يتم توحيد HTML5 حتى عام 2014. خلال هذا الوقت ، تغير تدوين HTML من وصف مستند محتوى صفحة الويب إلى دور يشرح كيفية عرض صفحة الويب.
نتيجة لذلك ، غالبًا ما تحتوي العلامة الموجودة على صفحات الويب المستندة إلى HTML4 على معلومات مثل الخط المراد عرضه واللون الذي يجب استخدامه للخلفية وكيفية محاذاة المحتوى. يعتبر وصف كيفية ظهور عنصر ما على صفحة ويب في علامة نموذجًا مضادًا لـ HTML. يجب أن يصف HTML بشكل عام كيفية تنظيم المحتوى ، وليس كيفية عرضه وتصميمه في المتصفح. تعد لغات الترميز الأخرى أكثر ملاءمة لهذه المهمة.
يتمثل أحد الاختلافات الرئيسية بين HTML4 و HTML5 في أن نمط "فصل الاهتمامات" يتم تطبيقه بعناية في HTML5 أكثر من HTML4. مع HTML5 ، أصبحت علامات Balad و Italic قديمة. بالنسبة إلى علامات الفقرة ، تمت إزالة سمة "المحاذاة" تمامًا من مواصفات HTML.
إصدارات موسعة من HTML
فيما يلي قائمة بإصدارات HTML وسنوات إنشائها. تم إصدار عدة نسخ مكررة من كل إصدار بمرور الوقت. الغرض من هذه القائمة هو التركيز على التكرارات المهمة.
- HTML 1.0: تم إصداره في عام 1992. وقدراته محدودة للغاية وحوالي 20 عنصرًا.
- HTML 2.0: تم إصداره عام 1995. بدأ في دمج العناصر المتعلقة بالوظائف الرياضية.
- HTML 3.2: تم إصداره في عام 1996. ألغى مخطط الوظيفة الرياضية تمامًا وأزال التداخل بين المكونات الإضافية المختلفة الخاصة.
- HTML 4.0: تم إصداره في عام 1997. تم إدخال ثلاثة تغييرات اختلفت في عدد العناصر القديمة المسموح بها.
- HTML 4.01: تم إصداره عام 1999. كان مشابهًا جدًا لـ 4.0.
- HTML 5: تم إصداره في عام 2014. ظهر هذا الإصدار بعد توقف طويل في التحديث لأن المطور (W3C) كان يركز على لغة موازية أخرى تسمى XHTML.
- HTML 5.1: تم إصداره في عام 2016. بهدف تسهيل تكييف أنواع مختلفة من تضمين الوسائط مع العلامات الجديدة.
- HTML 5.2: تم إصداره في عام 2017. وكان الغرض منه أن يكون مفهوماً بشكل متساوٍ للبشر وأجهزة الكمبيوتر.
- HTML 5.3: لم تُنشر بعد. تعمل W3C مع WHATWG على الإصدار الجديد. بدأ هذا التعاون في عام 2019.
معايير بناء جملة HTML
لاحظ أنه عند تنفيذ مقتطف HTML هذا في مستعرض ، تؤثر علامات HTML على كيفية عرض كل عنصر HTML على الصفحة ، ولكن لا يتم عرض أي من علامات أو سمات HTML. يشرح HTML ببساطة كيفية تقديم المحتوى ولا يتم عرضه أبدًا للمستخدم النهائي.
يجب أن يكون كل عنصر HTML في علامة مفتوحة وعلامة مغلقة. بالإضافة إلى ذلك ، يجب إغلاق أي علامات جديدة تفتح في علامة أخرى قبل أن يتم إغلاق العلامة الأصلية.