وصف موجز للغة HTML. HTML: أساسيات للمبتدئين ما هو الغرض من لغة ترميز html

تحتوي أساسيات HTML على القواعد الأساسية للغة HTML، ووصفًا لبنية صفحة HTML، والعلاقات في بنية مستند HTML بين عناصر HTML.

مستند HTML هو مستند نصي عادي يمكن إنشاؤه إما في محرر نص عادي (Notepad) أو في محرر متخصص مع تمييز التعليمات البرمجية (Notepad++، Visual Studio Code، وما إلى ذلك). يحتوي مستند HTML على ملحق .html.

يتكون مستند HTML من شجرة من عناصر HTML والنص. يتم تعريف كل عنصر في المستند المصدر بواسطة علامة البداية (الفتح) وعلامة النهاية (الإغلاق) (مع استثناءات نادرة).

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

لا يمكن للعلامات الفردية تخزين المحتوى مباشرة؛ فهي مكتوبة كقيمة سمة، على سبيل المثال، ستنشئ العلامة زرًا يحتوي على النص "زر" بداخله.

يمكن أن تتداخل العلامات داخل بعضها البعض، على سبيل المثال،

نص

. عند الاستثمار عليك اتباع الترتيب الذي يتم به إغلاقها (مبدأ "ماتريوشكا")، على سبيل المثال، الإدخال التالي سيكون غير صحيح:

نص

.

يمكن أن تحتوي عناصر HTML على سمات (عالمية، مطبقة على كافة عناصر HTML، وسمات خاصة بها). تتم كتابة السمات في العلامة الافتتاحية للعنصر وتحتوي على اسم وقيمة محددة في تنسيق السمة name = "value" . تسمح لك السمات بتغيير خصائص وسلوك العنصر الذي تم تعيينها له.

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

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

تبدأ عملية التفسير (التحليل) قبل تحميل صفحة الويب بالكامل في المتصفح. تقوم المتصفحات بمعالجة مستندات HTML بشكل تسلسلي، من البداية، أثناء معالجة CSS وربط أوراق الأنماط بعناصر الصفحة.

تتكون وثيقة HTML من قسمين - الرأس - بين العلامات ... وجزء المحتوى - بين العلامات ....

هيكل صفحة الويب 1. هيكل مستند HTML

يتبع HTML القواعد الموجودة في ملف تعريف نوع المستند (تعريف نوع المستند، أو DTD). DTD هو مستند XML يحدد العلامات والسمات وقيمها الصالحة لنوع HTML معين. كل إصدار من HTML له DTD الخاص به.

DOCTYPE مسؤول عن العرض الصحيح لصفحة الويب بواسطة المتصفح. لا يحدد DOCTYPE إصدار HTML (على سبيل المثال html) فحسب، بل يحدد أيضًا ملف DTD المقابل على الإنترنت.

...

تشكل العناصر الموجودة داخل العلامة شجرة مستند، ما يسمى بنموذج كائن المستند، DOM (نموذج كائن المستند). في هذه الحالة، العنصر هو العنصر الجذر.


أرز. 1. أبسط بنية لصفحة الويب

لفهم التفاعل بين عناصر صفحة الويب، من الضروري النظر في ما يسمى "العلاقات العائلية" بين العناصر. يتم تصنيف العلاقات بين العناصر المتداخلة المتعددة إلى الوالدين والطفل والأخت.

السلف هو عنصر يحتوي على عناصر أخرى. في الشكل 1، الجد لجميع العناصر هو . وفي الوقت نفسه، يعتبر العنصر هو سلف جميع العلامات التي يحتوي عليها: ,

، ، إلخ.

السليل هو عنصر يقع ضمن نوع واحد أو أكثر من أنواع العناصر. على سبيل المثال، هو سليل، والعنصر

هو سليل كل من و .

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

هو الوالدين فقط ل .

العنصر الفرعي هو عنصر تابع مباشرة لعنصر آخر على مستوى أعلى. في الشكل 1 هناك عناصر فقط،،

وهم أبناء .

العنصر الشقيق هو عنصر له عنصر أصل مشترك مع العنصر المعني، ما يسمى بالعناصر من نفس المستوى. في الشكل 1 وهي عناصر من نفس المستوى، وكذلك العناصر و

إنهم أخوات لبعضهم البعض.

1.1. العنصر 1.2. عنصر

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

1.2.1. عنصر

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

1.2.2. عنصر

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

يمكن تحديد وصف محتوى الصفحة والكلمات الرئيسية في وقت واحد بعدة لغات، على سبيل المثال، باللغتين الروسية والإنجليزية:

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

لإعادة تحميل الصفحة تلقائيًا بعد فترة زمنية محددة، يلزمك استخدام قيمة التحديث:

سيتم إعادة تحميل الصفحة خلال 30 ثانية. لإعادة توجيه الزائر إلى صفحة أخرى، تحتاج إلى تحديد عنوان URL في معلمة url:

. تُسبق علامة النهاية، إذا كانت مطلوبة في بناء جملة اللغة، بشرطة مائلة للأمام: .

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

الإطارات الموجودة على الصفحة (تسمى هذه الصفحة صفحة الإطار أو مجموعة الإطارات).

النموذج عبارة عن مساحة من مستند النص التشعبي الضروري لتنظيم التعليقات من زوار الموقع.

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

البرنامج النصي هو برنامج مضمن في صفحة ويب لتوسيع قدراته.

يتم استخدام UpLoad - نسخ مستند من كمبيوتر العميل إلى خادم ويب - عند إنشاء صفحة الويب الخاصة بك (أي عند نشرها).

البكسل هو أصغر نقطة لون على شاشة العرض.

الهيكل العام لوثيقة HTML بسيطة

الهيكل العام لمستند HTML البسيط هو:

تعليق

< TITLE >اسم الوثيقة

< BODY >

هذا هو المكان الذي يوجد فيه نص مستند HTML نفسه.

دعونا نشرح العلامات المحددة لمستند HTML.

< COMMENT >- التعليق على الوثيقة. غير مطلوب.

< HTML >- معرف الكتلة الكاملة لأوامر HTML.

< HEAD >- معرف رأس مستند HTML.

< TITLE >- معرف عنوان منفذ العرض.

< BODY >- معرف أوامر HTML للمستند المراد عرضه.

ثلاث علامات رئيسية< HTML >, < HEAD >و< BODY >تزويد المتصفح بالمعلومات الأساسية لتحديد المستند وتنظيمه.

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

- يتم استخدام علامة غير مقترنة للإشارة إلى معلومات مفصلة حول المستند.

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

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

إنشاء مستند HTML

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

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

لغة HTML هرمية. أي أن هناك بنية خاصة لمستند HTML. ما هو؟ دعونا ننظر إليها أدناه من أجل الوضوح.

هيكل وثيقة HTML. مثال

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

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

بنية مستند HTML - العلامات الرئيسية:

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

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

القسم الرئيسي

يوضح الشكل أدناه النقطة 3 قسم الرأس. يحتوي هذا القسم على معلومات الخدمة. على سبيل المثال، يمكنك تحديد الترميز (البند 4) وعنوان الصفحة (البند 5).

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

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

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

ربط الأنماط

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

الملف متصل على النحو التالي.

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

خيار آخر هو تحديد الأنماط مباشرة في قسم الرأس.

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

إذا كان الفصل الذي تقوم بإنشائه سيتم استخدامه في صفحة واحدة فقط، فهذا الخيار مناسب لك.

ربط البرامج النصية

ترتبط البرامج النصية على النحو التالي.

هناك سمتان مطلوبتان هنا: type وsrc. في الأول نشير إلى أن هذا ملف جافا سكريبت، والثاني - حيث يوجد الملف. إذا قمت بخطأ مطبعي، فلن ينجح شيء.

قسم الجسم

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

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

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

العلامات الرئيسية

تتطلب بنية مستند HTML ترتيبًا إلزاميًا لعناصر الكتابة. يجب أن تكون العلامات دائمًا محاطة بأقواس عند الحواف. بدون هذا، لن يفهم المتصفح أن هذه علامة. قوس الفتح يتبعه دائمًا اسم العنصر (العلامة). إذا سمحت بمسافة بين< и именем, то браузер посчитает это текстом.

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

ترتيب السمات لا يهم. لكن كتابتهم (التصميم) مهمة جدًا. دائمًا ما يأتي اسم السمة أولاً، ثم علامة التساوي، ثم يتم كتابة قيمة السمة بين علامتي اقتباس. يمكن أن تكون القيمة مختلفة - رقمية أو نصية.

تشير سمة src في جميع العلامات إلى مسار الملف الذي يجب تحميله. تحدد السمة alt في جميع العناصر وصفًا قصيرًا. في هذه الحالة، يتم تحميل الصورة Bird.jpg مع وصف - صورة طائر.

بالإضافة إلى ذلك، يمكنك تحديد الأبعاد أو العرض أو الارتفاع فقط أو العنوان أو المحاذاة أو فئة النمط أو الحدود.

دعونا نلقي نظرة على العلامات الرئيسية الأخرى المحددة في قسم النص.

غاية

الصور

التفاف النص إلى سطر جديد

ظفري

شطب النص

نص تحته خط

كيف يمكنك أن تتخيل كل هذا في رأسك؟

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

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

لقد خضع HTML لبعض التغييرات منذ إنشاء الإصدار الأول. مثل العديد من الأشياء في عالم الكمبيوتر، تبين أن إصدارات أو مواصفات HTML أصبحت مرقمة. المواصفات 2.0 و 3.0 و 3.2 معروفة. يمكن دائمًا العثور على مواصفات HTML الحالية على خادم W3C.

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

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

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

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

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

تبدأ كافة علامات HTML بـ "" (قوس الزاوية اليمنى). عادةً ما يكون هناك علامة بداية وعلامة نهاية. على سبيل المثال، فيما يلي علامات العنوان التي تحدد النص الموجود داخل علامتي البداية والنهاية التي تصف عنوان المستند: عنوان المستند

HTML ليس حساسًا لحالة الأحرف، لذا قد يبدو المثال أعلاه كما يلي:

عنوان الوثيقة

تبدو علامة النهاية مثل علامة البداية، وتختلف عنها بشرطة مائلة للأمام قبل النص داخل الأقواس الزاوية. في هذا المثال، تخبر العلامة متصفح الويب باستخدام تنسيق العنوان، وتطلب العلامة انتهاء نص الرأس.

بعض العلامات مثل

(العلامة التي تحدد فقرة) لا تتطلب علامة نهاية، ولكن استخدامها يمنح النص المصدر للمستند إمكانية قراءة وبنية أفضل.

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

...نص الوثيقة...

رأس الوثيقة

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

قائمة الموظفين عنوان الوثيقة

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

تعليقات

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

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

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

جسم الوثيقة

يجب أن يكون نص المستند بين العلامات والعلامات. هذا هو جزء المستند الذي يتم عرضه كمعلومات نصية ورسومية (دلالية) لمستندك.

علامة الفقرة

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

إذا لم تقم بفصل الفقرات بالعلامة

سوف يظهر المستند الخاص بك كفقرة واحدة كبيرة.

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

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

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

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

هذه هي التقنية الأكثر استخدامًا في تصميم المستندات، وتسمى أحيانًا "الصورة المضمنة".

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

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

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

كيف تم استخدام HTML قبل CSS؟

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

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

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

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

لماذا نحتاج HTML الآن؟

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

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

فيما يلي بعض علامات HTML التي يمكن (وينبغي) استبدالها بأمان بأنماط CSS:

  • "تزيين"، سمات المحاذاة للعلامات (اللون، bgcolor، المحاذاة، وما إلى ذلك)؛
  • بطاقة شعار
(عند استخدامها لتخطيط صفحة ويب)؛
  • بطاقة شعار .
  • علامات HTML للهيكلة

    استخدم العلامات التالية لتنظيم صفحاتك:

    H1-H6 (عنوان) تهدف علامات h1-h6 إلى الإشارة إلى العناوين. تجعل هذه العلامات من السهل جدًا فصل النص. لفهم أفضل، تخيل كتابًا يحتوي على فصول وفصول فرعية. عنوان فصل الكتاب هو h1، والفصول الفرعية هي h2، وأجزاء الفصول الفرعية هي h3، وما إلى ذلك. ومن الأفضل وضع علامات العنوان بالتسلسل. علامة P (الفقرة).

    يستخدم للإشارة إلى فقرات النص. OL، UL (قائمة مرتبة، قائمة غير مرتبة) العلامات،

      - أداة ملائمة لوضع علامات على القوائم (روابط التنقل، النقاط في النص، القائمة المتسلسلة، إلخ). DL (قائمة التعريفات) علامة مقترنة بالعلامات، تستخدم لإنشاء قائمة التعريفات، حيث – اسم التعريف (مصطلح التعريف)، – وصف التعريف (وصف التعريف). DIV (التقسيم) DIV هو عنصر كتلة يمكن استخدامه لتمييز جزء من المستند، بالإضافة إلى الجمع بين عدة عناصر بشكل منطقي. باستخدام CSS، يمكنك إعطاء الكتلة المظهر والموضع المطلوب، ولكنها في حد ذاتها لا تغير مظهر المستند بأي شكل من الأشكال. SPAN (span) العلامة مشابهة في دورها لـ . ولكنه عنصر كتلة، وهو عنصر مضمن. على سبيل المثال، إذا كنت بحاجة إلى تغيير نمط كلمة واحدة داخل علامة

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

      عنصر

      لا يوجد HTML في إصدار واحد، ولكن في عدة إصدارات (HTML 4.01، HTML5، XHTML 1.0 وغيرها)، لذلك من أجل تفسير صفحة الويب بشكل صحيح، يحتاج المتصفح إلى معرفة إصدار اللغة الذي تستخدمه. يوصى بتحديد نوع المستند في بداية الصفحة (السطر الأول من الكود). إذا تجاهلت نوع المستند أو ارتكبت خطأ، فسيقوم المتصفح بفتح صفحة الويب في ما يسمى بوضع التوافق، مما قد يؤدي إلى عرض غير صحيح للمحتوى، بما في ذلك الأنماط. إن أبسط طريقة لوصف نوع المستند هي doctype لـ HTML5 (مناسب لأي متصفح ويعمل حتى لو لم يتم استخدام علامات HTML5):

      الاستنتاجات

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

      يعد HTML ضروريًا لتنظيم المعلومات على صفحات الويب ولا يتم استخدامه لتغيير مظهر المستند.

      CSS هي المسؤولة عن تصميم صفحات الويب.

      من المهم استخدام علامات الهيكلة مثل،

      و و و و، بالإضافة إلى علامات HTML5 الجديدة للحصول على دلالات أكبر للمستندات.

      حان الوقت لنسيان العلامة والسمات الزخرفية الأخرى، بالإضافة إلى استخدام العلامة

    لتخطيط الوثيقة.

    لكي تتمكن المتصفحات من عرض صفحة الويب بشكل صحيح، يجب عليك استخدام العنصر الموجود في السطر الأول من التعليمات البرمجية.

    في الفصل التالي، سوف نتعرف على بناء جملة CSS وربط الجداول بـ HTML، ونكتب أيضًا النمط الأول.