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

مقدمة

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

تعلم لغة HTML

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

ملف HTML يحتوي على أكواد تُعرف باسم "الوسوم" (Tags)، وهي تتيح لنا توجيه المتصفح لتنفيذ أوامر معينة، مثل كيفية عرض النصوص أو تنظيم الصفحة.

ما هي HTML؟ فهم أساسيات الترميز والوسوم للمبتدئين

في HTML، يتم الترميز باستخدام نصوص ذات دلالة خاصة تُسمى "وسوم". تظهر معظم الوسوم بشكل معين،

<Opening-Tag> نص معين </Closing-Tag>

حيث يُحاط النص برموز أقل من < وأكبر من >. على سبيل المثال، وسم <strong> يُستخدم لجعل النص بداخله بارزًا.

<strong>Bold Text</strong>

وهذا مثال آخر لوسم يُستخدم للتأكيد على النص، ويُسمى <em>. هذا الوسم يجعل النص المضمن مائلاً ليعبر عن أهميته، كما في:

<em>Italic Text</em>

إستخدام الوسوم فى HTML

شرح بنية الوسوم في HTML

يبدأ كل عنصر بوسم بداية (Opening Tag) وينتهي بوسم إغلاق (Closing Tag). على سبيل المثال، وسم البداية <em> يتبعه وسم الإغلاق </em>، حيث يتميز الأخير بشرطة مائلة /.

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

هذا الأسلوب يساعد على بناء بنية سليمة للمحتوى، وهو مفهوم أساسي في لغات البرمجة.

العنصر مقابل الوسم: فهم الفرق

في HTML، يُطلق على الوحدة الكاملة التي تحتوي على وسم البداية ووسم الإغلاق، بالإضافة إلى المحتوى بداخلها، "عنصر" (Element).

العنصر والوسم فى HTML

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

التعامل مع الفواصل والعناصر الفارغة في HTML: ما تحتاج معرفته

في HTML، قد تلاحظ أن المتصفح يعامل الفواصل والفراغات البيضاء بطريقة مختلفة عن محرر النصوص.

تعامل المتصفح مع الفواصل والفقرات

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

يقصد بالفراغات البيضاء المسافات الفارغة وفواصل الأسطر التي نضيفها داخل الكود لجعله منظمًا.

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

وسم br (Break Line) - كسر السطر

وسم br فى لغة HTML

وسم <br> هو مثال جيد على كيفية التحكم بتنسيق النصوص؛ فهو يكسر السطر ويبدأ سطرًا جديدًا دون الحاجة إلى وسم إغلاق،

نظرًا لأنه لا يحتوي على محتوى داخلي. مثل هذه الوسوم تُسمى "عناصر فارغة" أو "عناصر خالية" لأنها تؤدي وظائف بسيطة دون الحاجة لإضافة محتوى بين الوسمين.

إلى جانب <br>, هناك أيضًا وسم <img> المستخدم لإدراج الصور، والذي يعتبر أيضًا عنصرًا فارغًا سنستعرضه لاحقًا.

كيفية إنشاء الفقرات في HTML لتنظيم محتوى الويب

رغم أن وسم <br> مفيد لإضافة فواصل أسطر، إلا أن تنظيم محتوى الويب يتطلب أحيانًا تقسيم النص إلى فقرات واضحة ومنسقة، خاصة عند كتابة مقالات أو قصص.

في HTML، يُستخدم عنصر <p> لإنشاء فقرة جديدة. هذا الحرف اختصار لكلمة "فقرة" (Paragraph) ويعتمد على وسم افتتاحي ووسم إغلاق أيضا كما فى المثال.

<p>New Paragraph</p>

لنقم بتحويل هذه النصوص إلى فقرات.

إستخدام الفقرات فى HTML

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

استخدام عناصر <p> لتنظيم الفقرات يساعد المتصفح على فهم بنية النص وليس فقط عرضه بصريًا. ستتعلم لاحقًا كيفية تخصيص مظهر الفقرات باستخدام CSS للتحكم الكامل في تنسيق النص.

الفرق بين الفواصل والفقرات في HTML: فهم أساسي لتنسيق المحتوى

في HTML، لدينا طريقتان لتقسيم النص إلى أسطر: وسم <br>, ووسم الفقرة <p>. بينما يعمل <br> كعنصر فارغ لإضافة فاصل أسطر فقط، فإن عنصر <p> يُستخدم لإنشاء فقرة تحتوي على نص كامل.

وسم <br> يقوم ببساطة بإنهاء السطر الحالي والانتقال إلى السطر التالي، بينما وسم <p> يُعطي الفقرة خاصية إضافية عبر إنشاء "كتلة" تحتوي النص.

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

تحسين تصميم النصوص في HTML باستخدام الوسوم الأساسية

وسوم sub & sup & mark فى HTML

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

لنبدأ بنص عادي. إذا حفظناه وفتحناه في المتصفح، سيظهر النص ببساطته. ولكن، ماذا لو أردنا إضافة تأثيرات للتأكيد؟ يمكننا استخدام وسم <em> أو <strong> لإبراز النص بشكل مائل أو بخط عريض كما رأينا مسبقاٌ، لكن هذه المرة سنتعرف على عنصر HTML آخر: <mark>. هذا الوسم يُستخدم لتظليل النص كما لو تم تمرير قلم ملون عليه.

This is a <mark>Highlight Text</mark>

عند تجربة الوسم في المتصفح، ستلاحظ أن النص يظهر مظللاً باللون الأصفر! يمكنك أيضًا تجربة عناصر أخرى مثل <sub> و<sup> التي تضيف رموزًا على شكل نص منخفض (أسفل النص العادي) أو نص مرتفع (أعلى النص العادي).

<p>H<sub>2</sub>O</p>
<p>2<sup>4</sup></p>

HTML: العناصر الكتلية مقابل العناصر السطرية – دليلك لفهم الفروق

مع التعمق في مشاريع HTML، ستواجه نوعين أساسيين من العناصر: العناصر الكتلية والعناصر السطرية. عنصر <p>، على سبيل المثال، يُعد "عنصر كتلة" لأنه يُنشئ مربعًا غير مرئي حول محتواه.

أما العناصر التي لا تنشئ كتلاً، مثل <em>, <mark>, و<br>, فتُعرف بـ "العناصر المضمنة". العناصر الكتلية، مثل القوائم، الجداول، والعناوين، تُنشئ مساحات منفصلة، حيث يقوم المتصفح بتخصيص مربع خاص لكل منها. في المقابل، العناصر المضمنة، مثل الروابط والصور، تتدفق ضمن النص ولا تشغل مساحة منفصلة.

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

التداخل في HTML: استخدام العناصر المدمجة بذكاء

التداخل فى لغة HTML

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

على سبيل المثال، يمكن أن تحتوي الفقرة على عناصر <em> بداخلها لتأكيد النص. هذا التداخل شائع في مستندات HTML؛ حيث توضع العناصر الكبيرة، مثل الفقرات و<div>, وتحتوي على عناصر أصغر لتنسيق النص.

يمكنك وضع عنصر <sup> داخل <em>، مثلاً، ليظهر النص مميزًا ومرتفعًا في آنٍ واحد.

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

عمومًا، هذه القواعد طبيعية ومنطقية، لكنها تسهم في تنظيم هيكل المستند بشكل أنيق وواضح.

دليل HTML: أهمية وسم <li> في إنشاء القوائم المنظمة

بعض عناصر HTML تُستخدم فقط داخل عناصر معينة أخرى؛ إذ لا تكون ذات معنى بمفردها. من أمثلة هذه العناصر عنصر القائمة <li>.

يعد <li> عنصرًا لقائمة تتضمن عناصر مثل قائمة تسوق، أو قائمة مهام، أو جدول محتويات. وهذا العنصر لا يمكن أن يظهر بمفرده؛ فهو يتطلب أن يكون ضمن قائمة مرتبة أو غير مرتبة.

أنواع القوائم في HTML

القوائم المرقمة وغبر المرقمة فى لغة HTML

هناك نوعان من القوائم التي يمكن أن تحتوي على عناصر <li>:

1. القائمة المرتبة <ol>: تُستخدم عندما تكون هناك حاجة لترتيب عناصر القائمة بأرقام أو أحرف تلقائيًا.
2. القائمة غير المرتبة <ul>: تُستخدم لإنشاء قوائم تعرض نقاطًا أو دوائر أمام كل عنصر، دون الحاجة لترتيب العناصر.

لماذا يجب أن تكون عناصر <li> داخل قوائم؟

السبب في عدم ظهور عناصر <li> بمفردها هو أن القوائم المرتبة وغير المرتبة تُعرض بشكل مختلف؛ فبدون إدراجها ضمن <ol> أو <ul>, لن يعرف المتصفح إذا كان ينبغي وضع رقم أو نقطة أمام العنصر. لذلك، تشترط HTML أن تكون عناصر <li> داخل إما <ol> أو <ul> لضمان ظهورها بالشكل المناسب.

التداخل في القوائم

يمكنك أيضًا تداخل القوائم ضمن قوائم أخرى. فمثلاً، قد تحتاج إلى قائمة مهام تحتوي على خطوات داخلية لتنفيذ بعض المهام. مثال على ذلك: "تعلم لغة HTML"، قد تحتوي على خطوات مثل "تعلم الوسوم"، ويكون ذلك العنصر <li> متداخلًا داخل عنصر <ul> داخل عنصر <li> آخر.

علامات إغلاق عناصر <li>

وسم الإغلاق فى عنصر القائمة غير ضرورى

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

تذكر أنه يجب دائمًا كتابة علامات إغلاق لعناصر <ul> و <ol>, لأن المتصفح يحتاج إلى هذه العلامات ليعرف متى تنتهي القائمة بشكل كامل ولا يقوم بإدراج أي محتوى إضافي ضمن القائمة بالخطأ.

فهم بنية عناوين الويب (URLs) لتصفح أفضل باستخدام HTML

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

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

كلما أضفت رابطًا في كود الـ HTML، ستستخدم هذه العناوين. في وسم <a>، هناك مصطلحات تقنية لهذه العناوين.

<a href="URL">Click here</a>

ما هو URL؟

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

هذا يعني ببساطة أنه عنوان يُخبر متصفحك بكيفية تحديد موقع مورد معين، مثل ملف، بطريقة موحدة. كلمة "موحد" هنا تعني ببساطة أنه متسق. هناك طرق مختلفة لكتابة URLs، وعندما يقرأ الناس هذه العناوين، سترى أحيانًا "http://" أو "https://" في المقدمة،

العنوان يتكون من عدة أجزاء أساسية:

• البروتوكول (http:// أو https://)
• اسم النطاق (مثل example.com)
• المسار (path)

الإستخدام الصحيح للروابط فى لغة HTML

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

أنواع URLs

الروابط المطلقة:

• تبدأ بـ (http:// أو https://)
• تستخدم للإشارة إلى مواقع خارجية
• مثال: https://example.com/page.html

الروابط النسبية:

• تستخدم للإشارة إلى ملفات في نفس الموقع
• لا تحتاج إلى كتابة النطاق كاملاً
• مثال: images/photo.jpg

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

ربما رأيتها من قبل، ولكن دعنا نستعرض شكلها المطلق. تبدأ عناوين الويب عادةً بـ http:// أو https://، مما يُخبر المتصفح ما إذا كان يجب استخدام تشفير آمن للاتصال بخادم الويب.

يبدأ URL لملف على محرك محلي (جهاز الكمبيوتر خاصتك) بـ file://.

"HTTP" و"HTTPS" و"file" هي جميعها بروتوكولات، أو طرق يمكن للمتصفح من خلالها الحصول على شيء ما. بعد البروتوكول، نرى دائمًا نقطتين وشرطتين تفصلان البروتوكول عن بقية URL.

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

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

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

إنشاء الروابط في HTML: خطوات فعالة باستخدام <a>

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

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

<a href="https://example.com">Visit Link</a>

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

لا يمكننا استخدام <a> بمفردها. هناك بعض الأشياء التي يجب أن يتضمنها عنصر <a> لإنشاء رابط: النص الذي ينقر عليه المستخدم لاتباع الرابط ورابط URL للصفحة المرتبطة. وإليك كيف سنقوم بذلك: تبدأ العلامة الافتتاحية لعنصر <a> مع جزء إضافي لم نره من قبل في نص HTML، وهو href="رابط URL".

هذا مثال على سمة HTML، وهي قطعة إضافية من البيانات تأتي مع العنصر وتمنحه معنى إضافيًا. الجزء الذي قبل علامة المساواة هو اسم السمة، والجزء الذي بعده في علامات اقتباس مزدوجة هو قيمة السمة. هنا الاسم هو href، والقيمة هي http://example.net.

href تعني "مرجع النص الفائق" وتُستخدم مع علامات <a> وبعض العلامات الأخرى التي ترتبط بآخرين. لن تراها أبدًا في علامة فقرة أو علامة تأكيد أو شيء من هذا القبيل.

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

سمات href دائمًا تكون في العلامة الافتتاحية في بداية العنصر. هذا هو كل ما يتعلق بإنشاء الروابط في HTML.

لقد أنشأت عنصرًا مع علامة بدء وعلامة إغلاق. تحتوي علامة البدء على سمة href مع علامة مساواة وبداخل علامات اقتباس مزدوجة رابط URL للصفحة التي نريد الربط بها، ومحتويات العنصر تكون النص الذي ينقر عليه المستخدم، ثم هناك علامة الإغلاق </a>.

كيفية إدراج الصور في HTML لجعل صفحاتك أكثر جاذبية

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

ومن المحتمل أن يفاجئك أنه يوجد عنصر HTML مخصص لذلك. هذا العنصر هو <img> للصورة، ويعمل بشكل مشابه لعنصر <a> للروابط، لكن مع بعض الاختلافات المهمة.

<img src="path/to/image.jpg" alt="وصف الصورة">

يستخدم عنصر <a> للروابط سمة واحدة تُسمى href، وقيمتها هي عنوان URL للصفحة التي تريد الربط بها. لكن عنصر <img> يستخدم سمتين: src و alt.

src تعني "المصدر"، وهي عنوان URL للصورة التي تريد ظهورها في صفحة الويب الخاصة بك. و

alt تعني "بديل"، وهي وصف نصي لتلك الصورة يظهر إذا لم يتم جلب الصورة بشكل صحيح. النص الذي يظهر هنا يُسمى عادة "نص البديل".

تحتاج إلى تضمين كلا السمتين عند كتابة HTML. سمة src تُخبر المتصفح من أين يحصل على الصورة، ومصدر الصورة، بينما سمة alt تُخبر المتصفح بالنص الذي يجب عرضه إذا لم يتمكن من عرض الصورة.

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

شيء يجب أن تضعه في اعتبارك هو أن وضع عنصر <img> في ملف HTML الخاص بك لا يُدخل ملف الصورة في ملف HTML، بل يُخبر المتصفح أين يجد ذلك الملف.

يجب أن يكون المصدر موجودًا في مكان ما، سواء كان على القرص المحلي الخاص بك أو على خادم.

عنصر <img> هو عنصر فارغ أو "بدون محتوى"، مثل <br>. ليس له نص كمحتوى، ولا توجد علامة إغلاق له. تذكر أن محتويات عنصر HTML ستكون نصًا بين علامة فتح وعلامة إغلاق، مثل عنصر <p>.

ولكن في حالة استخدامنا هنا، فإن src وalt في علامة الصورة ليست محتويات، بل هي سمات HTML لهذا العنصر.

وعنصر <img> هو عنصر سطري، يمكنك وضع صورة مباشرة في وسط قطعة من النص. إذا كانت الصورة أطول من النص المحيط بها، فسوف تؤثر على تنسيق النص

الروابط النسبية والمطلقة في HTML: الفرق وأفضلية الاستخدام

من موقع يسمى placebear.com الذي يحتوي على الكثير من صور الدببة. إذا كنت تريد صورة بحجم معين، مثل 800 × 600 بكسل، سيوفر لك placebear.com واحدة، طالما أنك موافق على أن تكون صورة قط. لوضع هذه الصورة في ملف testing.html, الخاص بي،

إدراج الصور من موقع PLACEBEAR

سأستخدم علامة <img> كما يلي، وعندما يفتح المتصفح هذا الملف HTML، سوف يذهب إلى خادم placebear.com ويجلب لك تلك الصورة ويضعها في الصفحة.

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

لماذا يعمل ذلك؟ حسنًا، ينظر المتصفح إلى سمة src هنا ولا يرى عنوان URL كامل. لا يبدأ بـ http:// أو file:// أو شيء من هذا القبيل. بالتحديد، لا يوجد :// في أي مكان.

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

حاليًا، ملف HTML الخاص بي على جهاز الكمبيوتر الخاص بي، ويراه المتصفح بعنوان URL مثل file:///C:/Users/Mahmoud/Downloads/testing.html. لذا عندما يشير هذا الملف إلى عنوان URL النسبي bear.jpg،

سيبحث عن ذلك الملف في نفس الدليل، حتى وإن كان يتعين علي كتابة bear.jpg فقط في HTML. سيقوم المتصفح بتحميل نفس عنوان URL كـ file:///C:/Users/Mahmoud/Downloads/bear.jpg.

الروابط النسبية

متى تختار الروابط النسبية أو الكاملة في تطوير صفحات HTML؟

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

حسنًا، فإن HTML نفسها لا تحتوي على ملف صورة الدببة. يجب أن أرسل لهم ملف الصورة أيضًا. ولكن إذا أرسلت هذا الملف إلى صديقى، فلن يظهر على جهاز الكمبيوتر الخاص به في مسار يسمى Users/Mahmoud/Downloads/.

إذا كانت لدي عناوين URL في HTML التي تتعلق بجهاز الكمبيوتر الخاص بي، فلن تعمل على جهاز كمبيوتر شخص آخر.

لذا كقاعدة عامة، إذا كنت تشير إلى صورة أو رابط على خادم ويب مثل placebear.com، فمن المعتاد استخدام عنوان URL كامل مثل https://[placebear.com](https://placebear.com)/800/600. إذا كنت تشير إلى صورة أو ملف آخر تتبادله مع ملف HTML الخاص بك، يجب أن تستخدم عناوين URL النسبية.

بالمناسبة، عناوين URL النسبية هي السبب وراء عدم تمكنك من إنشاء رابط <a> إلى Google بكتابة google.com داخل سمة href فقط في HTML.

على الرغم من أن google.com يعمل إذا كتبته مباشرة في متصفحك، فإن عنوان URL بدون :// يُعتبر دائمًا عنوان URL نسبي. لذا سينظر المتصفح إلى ملف يسمى google.com، وهو عادة ليس ما تريده.

لذلك إذا كنت تريد إنشاء رابط لموقع آخر، يجب عليك وضع http:// أو https:// في المقدمة.

بنية وثيقة HTML: العناصر الأساسية في كل وثيقة HTML

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

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

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

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

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

<!DOCTYPE html>

يجب أن تكتبها بالضبط بهذه الطريقة في كل مستند HTML تكتبه.

ماذا تفعل علامة DOCTYPE؟ إنها تُخبر المتصفح أننا نريد أن يُعالج هذا المستند كـ HTML حديث، بدلاً من واحد من تلك الإصدارات القديمة.

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

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

هيكل HTML: مكونات الرأس والجسم لتحقيق تصميم مثالي

<!DOCTYPE html>
<html>
<head>
    <title>عنوان الصفحة</title>
</head>
<body>
    <!-- المحتوى هنا -->
</body>
</html>

كل مستند HTML يتكون من جزئين. حتى الآن في هذه الدروس، عدا علامة DOCTYPE، كنت تعمل في الجزء الثاني من هذه الأجزاء، وهو جسم المستند. هنا يتم وضع محتويات المستند، مثل الفقرات، والصور، والقوائم، وأشياء أخرى ستظهر على الشاشة للمستخدم. الجزء الآخر من مستند HTML يُسمى الرأس.

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

العنوان: هو الجزء الوحيد المطلوب في الرأس، ويخبر المتصفح بعنوان الصفحة الذي يجب وضعه على علامة التبويب التي تعرض المستند. نضع العنوان داخل عنصر <title> مع علامة افتتاحية وأخرى إغلاق.

كيفية التحقق من صحة أكواد HTML لتحسين تجربة المستخدم

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

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

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

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

أشهر مدقق HTML هو validator.w3.org، الذي يديره الـ W3C (منظمة الويب العالمية). هذه المنظمة هي التي تكتب المعايير لـ HTML ومكونات الويب الأخرى، لذا فهي في وضع جيد لتخبرك ما إذا كانت HTML الخاصة بك صحيحة أم لا.

HTML Validation

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

عند القيام بذلك، ستحصل على رسالة مثل هذه تخبرك ما إذا كانت هناك أخطاء في HTML الخاصة بك. إذا كانت هناك أخطاء، فستحصل على رسالة مثل: عنصر <head> مفقود عنصر فرعي مطلوب وهو <title>. بسبب خطأ فى كتابة وسم العنوان.

هذه طريقة تقنية جدًا لقول إن مستند HTML الكامل يحتاج إلى عنصر <title> داخل عنصر <head>.

HTML Validation Error

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

HTML Validation Success

الخاتمة

وختامًا، تعلم لغة HTML هو خطوة مثيرة نحو بناء مهارات جديدة فى مجال تطوير الويب.

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

تعديل المقال