تيم برنرز - لي
منشئ لغة HTML

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

لغة البرمجة (لغة ​​ترميز النصوص التشعبية)- لغة ترميز النصوص التشعبية. يتم إنشاء مواقع الويب باستخدام لغة HTML.

مبتكر لغة HTML هو عالم بريطاني بارز - تيم برنرز - لي.

إصدارات HTML

قبل عام 1995، لم يكن هناك معيار رسمي للغة HTML، ولكن كان هناك العديد من الإصدارات غير القياسية للغة HTML. في 22 سبتمبر 1995، تم إنشاء أول معيار رسمي للغة HTML، وحصل على الفور على الرقم 2.0 (HTML 2.0).

وفي 14 يناير 1997، ظهر الإصدار HTML 3.2،
18 ديسمبر 1997 HTML 4.0،
24 ديسمبر 1999 HTML 4.01

في العقد الأول من القرن الحادي والعشرين، كان هناك أيضًا لغة ترميز XHTML(مثل HTML، ولكن مع بناء جملة أكثر صرامة). كان الهدف من XHTML هو إعداد مشرفي المواقع لقواعد الترميز الصارمة لغة XML. بفضل الترميز الصارم، يمكن للبرامج والخدمات المختلفة التي تفهم لغة XML معالجة البيانات الموجودة على المواقع المكتوبة بلغة XHTML بشكل فعال؛ كما تتمتع هذه اللغة أيضًا بالقدرة على تنفيذ SVG وMathML وCML ومشتقات لغة XML الأخرى.

كان XHTML موجودًا في ثلاثة إصدارات: صارم، وانتقالي، ومجموعة إطارات؛ وفي الإصدار الانتقالي، يمكنك استخدام العلامات القديمة مثل المركز أو الخط. حاليا التطوير لغة XHTMLمغلق.

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

لغة CSS وHTML

بدءًا من الإصدار 4 من لغة HTML، يوصى بتغيير مظهر علامات HTML فقط باستخدام لغة CSS. لذلك، يُنصح بدراسة لغات HTML وCSS بالتوازي. في هذا البرنامج التعليمي الخاص بـ HTML للمبتدئين، سنلقي أيضًا نظرة على الجوانب الأولية للغة CSS، ولكن لمواصلة التعلم، يمكنك قراءتها بنفسك

تاريخ HTML

تم إنشاء لغة HTML في عام 1991 من قبل العالم البريطاني تيم بيرنرز لي. في ذلك الوقت، كان تيم يعمل في CERN (المنظمة الأوروبية للأبحاث النووية) ولم تكن المواقع الإلكترونية موجودة بعد. كان العلماء العاملون في هذا المركز بحاجة إلى طريقة موثوقة وفعالة لتبادل المعلومات.

وقع الاختيار لغة اس جي ام ال، لكنه كان معقدًا للغاية، ثم قام تيم، استنادًا إلى SGML، بإنشاء نسخة مبسطة منه - لغة البرمجة، والتي بفضلها يمكن لأي عالم إنشاء وثيقة بسيطة تحتوي على معلومات، وتأطيرها بعلامات مختلفة: فقرات، وعناوين، وروابط، ونشرها على الإنترنت، وفي الوقت نفسه يمكن لعلماء آخرين قراءة هذه المعلومات.

في البداية، يمكن وضع معلومات نصية فقط في مستندات HTML (على صفحات الموقع)؛ ظهرت القدرة على إضافة ملفات الوسائط: الصور والفيديو والصوت في وقت لاحق قليلا.

في الوقت الحالي، الدعم والتطوير لغة HTMLمخطوب W3C (اتحاد شبكة ويب العالمية)- اتحاد شبكة ويب العالمية. يتكون W3C من مجموعات عمل مختلفة تعمل على تنفيذ وتطوير معايير وتقنيات الإنترنت.

جدول توزيع المتصفح

عادةً ما تحتوي ملفات HTML على ملحق ‎.html أو ‎.htm. ويمكن الاطلاع على هذه الملفات باستخدام متصفحات الإنترنت.

جدول أسماء المتصفحات وعدد توزيعاتها في العالم اعتبارا من يناير 2016 بالترتيب التنازلي.

من أجل فهم ما هو HTML ولماذا هو مطلوب، دعونا نفتح أي صفحة في المتصفح وننظر إلى كود المصدر الخاص بها.

على سبيل المثال، سأفتح صفحة محرك البحث Yandex.

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

لغة البرمجة– هذا هو الرابط بين صفحة الويب والتقنيات الإضافية التي سيتم استخدامها فيها.

في الأساس، جميع أوامر HTML التي تراها في الصورة أعلاه هي نص عادي يمكن كتابته في أي محرر نصوص. من خلال تغيير امتداد الملف النصي إلى *.html (سنتحدث عن كيفية القيام بذلك لاحقًا)، نحصل على صفحة ويب كاملة يمكن للمتصفح معالجتها.

الآن دعونا نلقي نظرة على التعريف نفسه ونفكر في ما يعنيه.

لغة البرمجةهي اختصار يرمز إلى HyperText Markup Language أو يُترجم إلى اللغة الروسية باسم "Hypertext Markup Language".

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

لغة.

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

مثل أي لغة، يحتوي HTML على كلمات (أوامر) وقواعد لكتابة هذه الكلمات (تركيب اللغة).

العلامات.

يرجى ملاحظة أن المهمة الرئيسية لـ HTML هي إعلام المتصفح بالمعنى الذي تحمله العناصر الموجودة على صفحة الويب.

يتيح لك كود HTML "تقسيم" صفحة الويب إلى عناصر فردية وإخبار المتصفح بالعنصر.

على سبيل المثال، نموذج التسجيل هذا:

يخبر المتصفح أنه يتعامل مع فقرة.

وهذا هو نموذج التسجيل:

عنوان

يشير إلى أن العنصر هو عنوان.

ويترتب على ذلك أن HTML ليست مسؤولة عن مظهر وتصميم المستند.

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

الصفحة التي تحتوي على أنماط التصميم:

نفس الصفحة، ولكن مع تعطيل الأنماط (يتم استخدام رمز HTML واحد فقط):

كما أن لغة HTML ليست لغة برمجة وليست مسؤولة عن إجراء العمليات المنطقية والبرمجية على الصفحة ومعالجة البيانات. يمكنك التحقق من ذلك بسهولة إذا قمت بتعطيل دعم لغة برمجة الويب الخاصة بالعميل في متصفحك.

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

نص تشعبي.

وأخيرًا، الكلمة الأخيرة في تعريف لغة HTML هي الارتباط التشعبي. هناك عنصر في صفحات الويب يجعل تلك الصفحات مميزة ويميزها عن النصوص العادية التي تحتوي على صور. هذا العنصر هو الروابط.

تعني البادئة "hyper" أنه عند النقر فوق رابط، قد يتم فتح مورد آخر (صفحة) على الإنترنت، والذي قد يكون موجودًا على خادم آخر.

HTML هي لغة تم تطويرها خصيصًا لإنشاء الصفحات التي تحتوي على ارتباطات تشعبية.

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

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

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

أود أن أشير على الفور إلى أن هذه ليست لغة برمجة، ولكنها لغة ترميزية.

لماذا من السهل تعلم HTML؟

لتتحدث الإنجليزية بطلاقة، لا تحتاج إلى معرفة كل الكلمات في اللغة الإنجليزية. إذن هنا، تحتاج فقط إلى تعلم بعض العلامات الأساسية ومعرفة كيفية التعامل معها. وبعد ذلك كل ما عليك فعله هو ممارسة المهارة وتطويرها.

لنبدأ بدراسة هذه التكنولوجيا الرائعة والبسيطة في نفس الوقت.

القليل من النظرية...

أي صفحة تتكون من العلامات. أي أن الصفحة لا تبدو فعليًا كما اعتدنا على رؤيته، ولكنها تتكون من العديد من العلامات، كل منها تلعب دورًا محددًا.

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

ولكن ما هي العلامة في HMTL؟

هذا عنصر صفحة HTML يؤثر بطريقة ما على عرض الصفحة وتخطيطها. من الصعب جدًا فهم ذلك بالكلمات، لذلك عليك أن تنظر على الفور إلى كل شيء عمليًا وأن تعتاد على الكود. انظروا إلى الصورة أدناه:

هذا هو هيكل أبسط صفحة. لكن هذه الكلمات المتكررة بين قوسين مثلثيين هي علامات. إذا قمت بفتح محرر النصوص الخاص بك وكتبت هذا الرمز، ثم قمت بحفظه بتنسيق HTML، فستحصل على صفحة HTML. ليس من الواضح بعد ما هو HTML؟ 🙂

من هذا الهيكل يمكنك رؤية تلك العلامات التي يجب أن تكون موجودة. هذه هي العلامات:

• والإغلاق
• والإغلاق
• والإغلاق

ولتوضيح الأمر أكثر، قمت بتسليط الضوء عليهم باللون البرتقالي في الصورة أدناه:

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

وإليك جميع العلامات التي سنكتبها بين العلامات واعتمادًا على الغرض منه، سيؤثر على بنية صفحة HTML الخاصة بنا.

حسنًا، هل أصبح من الواضح أكثر ما هو HTML؟ 😉 ولكننا لا نتوقف ونستمر..

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

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

دعونا نلقي نظرة على مثال لكيفية عدم إغلاق العلامات وبأي ترتيب يجب القيام بذلك. مثال على علامتين:

كود HTML الصحيح

ما تراه أعلاه هو هذا هو الترتيب الصحيح لكتابة علامات الإغلاق. ولكن قد يكون هناك مثل هذا الوضع

خطأ في كود HTML

علامات قريبة جدا ممنوع منعا باتا!

تدرب على فهم ما هو HTML...

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

هيا نبدأ. بعد فتح البرنامج ستظهر لك النافذة التالية:

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

لذلك، يجب أن تحصل على ما يلي:

بعد ذلك، تحتاج إلى حفظ هذه الصفحة بتنسيق HTML. للقيام بذلك، انقر على القائمة "ملف"، ثم انقر على "حفظ باسم...". أدخل اسم صفحة HTML. لقد أطلقت عليه اسم Index.html. ثم نقوم ببساطة بحفظه في مكان مناسب على جهاز الكمبيوتر الخاص بنا. بعد ذلك، سيتم تمييز علامات HTML، لأن محرر Notepad++ سوف يفهم أن هذا مستند HTML. والعمل مع الإضاءة الخلفية أكثر متعة.

لغة البرمجة(لغة ​​ترميز النص التشعبي) هي لغة ترميز خاصة للمستندات. من المهم ملاحظة أننا نتحدث هنا عن المستندات الإلكترونية وليست المطبوعة.

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

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

إنشاء مستند في HTML يشبه البرمجة. يأخذ مؤلف المستند نصًا عاديًا ويدرج رموزًا خاصة فيه (تسمى العلامات). عند عرض مستند، تعمل العلامات كأوامر. على سبيل المثال، إذا كانت هناك علامة في بداية الفقرة