“تعرف على وسوم الروابط ، الصور، والقوائم في HTML: دليل شامل للمبتدئين”2024
 |
| “تعرف على وسوم الروابط ، الصور، والقوائم في HTML: دليل شامل للمبتدئين” |
مقدمة
في المقال السابق، تعرفنا على كيفية استخدام وسوم العناوين والنصوص ضمن وسم <body> في لغة HTML لتنسيق المحتوى النصي بطرق مختلفة وجذابة. اليوم، نستكمل رحلتنا التعليمية مع وسوم أخرى مهمة جدًا لأي مبتدئ يرغب في إتقان تصميم صفحات الويب، حيث سنتعرف على كيفية إدراج الصور والعناوين التكميلية، بالإضافة إلى إنشاء قوائم منظمة تجعل محتواك أسهل للقراءة وأكثر جاذبية.
سنقوم بشرح كل وسم بطريقة سهلة وبأسلوب عملي، يتضمن خطوات كتابة الكود مباشرة على محرر الأكواد VSCode، مما يسهل عليك الكتابة والتنظيم. وسنوضح كل خطوة بشكل مبسط، مثل الضغط على زر “Shift” مع “<” لإنشاء وسم، ليتسنى لك استخدام هذه التقنيات بمرونة وإبداع.
لنبدأ اليوم في استكشاف هذه الوسوم الرائعة التي ستضفي لمسة فنية وتنظيمية على صفحاتك الإلكترونية، مع توجيهات حول كيفية استخدامها لتحسين تجربة المستخدم وزيادة جاذبية موقعك لدى محركات البحث، بما يتماشى مع معايير السيو تابعنا وتعلم المزيد!
3-الروابط – <a>:
الوسم <a> يُعرف في HTML باسم “Anchor” أو رابط، وهو أداة أساسية لنقل المستخدم بين صفحات الموقع أو إلى مواقع خارجية. يمثل هذا الوسم وسيلة فعّالة لتوجيه الزوار إلى مصادر أو معلومات إضافية، كما يسهم في تحسين تجربة التنقل داخل الموقع.
كيفية استخدام الوسم <a>
عند كتابة الوسم <a>, نبدأ بكتابة وسم الفتح <a>، ثم نحدد الرابط أو الوجهة التي نريد الانتقال إليها باستخدام الخاصية href. على سبيل المثال، لربط نص معين بصفحة معينة، نضع الرابط في href بهذا الشكل:
<a href="https://example.com">Visit Example Site</a>خطوات كتابة الوسم في محرر الأكواد VS Code
للمبتدئين، يمكن كتابة الوسم في محرر الأكواد Visual Studio Code بسهولة. أولاً، اضغط على زر Shift مع زر الحرف < لفتح الوسم، ثم اكتب a وأضف خاصية href لتحديد الرابط. بعد ذلك، يمكنك إغلاق الوسم بالنص المطلوب بين وسم الفتح والإغلاق.
اختصارات مفيدة في Visual Studio Code
- زر TAB: يمكن استخدامه لإكمال الوسم تلقائيًا بعد كتابته جزئيًا.
- زر CTRL + S: لحفظ التعديلات وعرضها على المتصفح في الحال.
- كما يمكنك اختيار file فى محرر الاكواد vscode و اختار من القائمة auto save وسيتم حفظ التعديلات تلقائيا فى كل مرة يتم انشاء اكواد من خلال المحرر
أين يوضع الوسم <a> داخل HTML؟
يوضع هذا الوسم عادةً داخل وسم <body>.
4- الصور – <img>
في عالم الويب، تُعتبر الصور وسيلة مهمة لجذب الانتباه وتوضيح المحتوى، ويُستخدم وسم <img> لإضافة الصور في صفحات HTML. إدراج الصور لا يضيف فقط طابعًا بصريًا، بل يعزز تجربة المستخدم ويساهم في تحسين جودة المحتوى إذا تم استخدامها بطريقة صحيحة. وسم <img> يُعرف بـ”الوسم الذاتي الإغلاق” (self-closing tag)، بمعنى أنه لا يتطلب وسم إغلاق، ويعتمد بشكل أساسي على الخصائص التي يتم تحديدها له، مثل src وalt.
كيفية استخدام وسم الصور <img>
وسم <img> يحتاج إلى خاصية src التي تحدد مسار الصورة سواء من جهازك أو من الإنترنت. كذلك، يُستخدم الوصف النصي البديل (alt text) ضمن خاصية alt لتقديم وصف موجز للصورة. هذا الوصف مهم جدًا لمحركات البحث لأنه يساعدها في فهرسة الصور وفهم محتواها، وكذلك يدعم المستخدمين ذوي الاحتياجات الخاصة عبر شاشات القراءة.
إدراج صورة باستخدام محرر الأكواد VS Code
لإدراج وسم <img> في محرر الأكواد VS Code، قم بالخطوات التالية:
- افتح وسم الصورة عن طريق الضغط على Shift ثم <، ثم اكتب img.
- بعد كتابة
<img، اضغط على Space لكتابة الخصائص. - أضف
src="مسار الصورة"لتحديد مصدر الصورة، ثمalt="وصف الصورة".
مثلًا:
<img src="images/pic.jpg" alt="صورة توضيحية للموضوع">نصائح هامة عند استخدام الصور
- استخدام صور ذات جودة مناسبة مع حجم ملف صغير لتحسين سرعة التحميل.
- تسمية الصور بشكل وصفي ليسهل التعرف عليها من محركات البحث.
- استخدام وصف
altدقيق ليساعد في تحسين تصنيف الصفحة SEO.
موقع وسم <img> داخل HTML
عادةً ما يتم وضع وسم <img> داخل وسم <body>، لأنه عنصر يُعرض مباشرة للمستخدم.
5- القوائم في HTML
تُعد القوائم وسيلة ممتازة لتنظيم وعرض المحتوى بشكل مرتب ومنظم، سواء كنت ترغب في تقديم خطوات متتالية، سرد عناصر متشابهة، أو تجميع أفكار بشكل يسهل استيعابها. في HTML، تُستخدم القوائم بكثرة لتحسين وضوح المحتوى وتوجيه المستخدم بسهولة إلى المعلومات الهامة داخل الصفحة.
ما هي القوائم ولماذا تُستخدم؟
القوائم تتيح هيكلة المحتوى ضمن نقاط محددة، مما يجعلها مفيدة لعدة أهداف:
- توضيح خطوات أو إجراءات: مثلاً، إذا كان لديك سلسلة خطوات لإعداد شيء معين.
- عرض مجموعة من العناصر: مثل قائمة من المنتجات، الخدمات، أو المزايا.
- تنظيم الأفكار: لجعل المعلومات سهلة الوصول والفهم.
أنواع القوائم الأساسية
هناك نوعان رئيسيان من القوائم في HTML:
- القوائم المرتبة: يُستخدم فيها الترقيم لتسلسل العناصر، كأن تُعرض في شكل أرقام. تكون مثالية عند الحاجة إلى عرض خطوات بترتيب معين أو ترتيب الأولويات.
- القوائم غير المرتبة: تعتمد على النقاط (bullet points) بدلًا من الترقيم، وتُستخدم عندما يكون هناك مجموعة من العناصر التي لا تتطلب ترتيبًا معينًا.
إدراج القوائم باستخدام VS Code
يمكنك استخدام محرر الأكواد Visual Studio Code لإنشاء القوائم بسهولة، عبر كتابة الوسوم الخاصة بالقائمة. على سبيل المثال:
- اضغط Shift ثم < لفتح وسم القائمة، ثم أكمل بكتابة الوسم المطلوب.
- بعد إدراج وسم القائمة، يمكنك إضافة عناصر القائمة ضمنها.
أهمية القوائم لتحسين SEO وتجربة المستخدم
تنظيم المحتوى باستخدام القوائم يعزز من تجربة المستخدم، حيث يسهل عليه الوصول للمعلومة بسرعة، ويفيد SEO عبر تنظيم البيانات وجعلها واضحة لمحركات البحث.
القائمة غير المرتبة <ul> في HTML
القائمة غير المرتبة، أو Bulleted List، هي نوع من القوائم يُستخدم لعرض مجموعة من العناصر التي لا تحتاج إلى ترتيب معين. يتم تمييز كل عنصر داخل هذه القائمة بعلامة نقطة (bullet point) بدلًا من أرقام، مما يجعلها مثالية لسرد أفكار أو مميزات متعددة بشكل منسق وسهل الفهم.
لماذا نستخدم القائمة غير المرتبة <ul>؟
تساعد القوائم غير المرتبة في:
- عرض عناصر غير مترابطة بترتيب محدد، مثل عرض سمات المنتج أو الخدمات المقدمة.
- تحسين تجربة المستخدم، حيث تصبح المعلومات مرتبة وجذابة بصريًا.
- تحسين SEO، لأن استخدام القوائم يسهل فهم المحتوى لمحركات البحث.
طريقة كتابة <ul> في Visual Studio Code
يمكنك استخدام المحرر Visual Studio Code لإنشاء قائمة غير مرتبة بسهولة:
- ابدأ بكتابة وسم
<ul>عن طريق الضغط على Shift ثم <، ثم اكتب ul لتحديد بداية القائمة. - بعد كتابة وسم
<ul>، يمكنك إضافة العناصر باستخدام وسم<li>لكل عنصر. كل عنصر يوضع بين وسمي<li>و</li>سيكون نقطة مستقلة داخل القائمة. - عند الانتهاء، أغلق القائمة بوسم
</ul>.
مثال توضيحي:
وسم <ul> بسيط جدًا، لكنه فعّال جدًا في تنظيم العناصر داخل صفحة الويب. باستخدامه، يمكنك إنشاء قائمة غير مرتبة تنقل المعلومات بسهولة للمستخدم.
استخدام هذه القائمة بهذا الشكل سيضمن أن يكون المحتوى واضحًا وسهل الوصول، سواء كان للمبتدئين في HTML أو لمستخدم عادي يتصفح موقعك.
القائمة المرتبة <ol> في HTML
القائمة المرتبة، أو Numbered List، هي نوع من القوائم في HTML يُستخدم لعرض مجموعة من العناصر بترتيب معين، حيث يظهر كل عنصر برقم متسلسل، مما يساعد على توضيح خطوات أو مراحل مرتبة أو سرد معلومات تتابعية. يعد وسم <ol> مناسبًا عندما يكون الترتيب مهمًا، مثل عرض خطوات عمل معينة، أو مراحل تنفيذ مشروع.
لماذا نستخدم القائمة المرتبة <ol>؟
توفر القائمة المرتبة عدة فوائد، منها:
- إظهار ترتيب العناصر بشكل منطقي، مما يُسهل على المستخدم فهم تسلسل المعلومات.
- ترتيب المحتوى بطريقة مرقمة تساعد في إرشاد القارئ خطوة بخطوة.
- تحسين محركات البحث (SEO)، حيث تساعد محركات البحث على فهم هيكل المحتوى بوضوح، خاصةً في الشروحات التتابعية.
كيفية كتابة <ol> في Visual Studio Code
لإنشاء قائمة مرتبة في محرر الأكواد Visual Studio Code، يمكنك اتباع الخطوات التالية:
- افتح وسماً للقائمة المرتبة بكتابة
<ol>. يمكنك القيام بذلك بسهولة عبر الضغط على Shift ثم < لفتح الوسم، وكتابة “ol”. - بعد وسم
<ol>، ابدأ بكتابة عناصر القائمة باستخدام وسم<li>لكل عنصر. كل عنصر يوضع بين<li>و</li>سيكون عنصرًا مرقمًا داخل القائمة. - عند الانتهاء من كتابة العناصر، أغلق القائمة بوسم
</ol>.
مثال تطبيقي في Visual Studio Code
فيما يلي كيفية كتابة وسم <ol> في Visual Studio Code بشكل واضح:
- في البداية، قم بكتابة
<ol>. - أضف العناصر كالتالي:
<ol>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
</ol>- عند حفظ الملف باستخدام Ctrl + S، ستتمكن من رؤية النتيجة مباشرة على متصفح الويب.
نصيحة للمبتدئين
يمكنك استخدام زر TAB في Visual Studio Code لتحسين ترتيب الأكواد وجعلها أكثر سهولة في القراءة. تساعد هذه الخطوات في إبراز ترتيب العناصر وإعطاء ترتيب مرئي ومنطقي للخطوات التي ترغب في عرضها للمستخدمين.
الوسم <li>: عنصر داخل القائمة
يُعتبر وسم <li> في HTML عنصرًا أساسيًا داخل القوائم، سواءً كانت غير مرتبة <ul> أو مرتبة <ol>. وهو يُستخدم لتحديد كل عنصر مستقل ضمن القائمة، مثل نقاط أو خطوات تتابعية، حيث يظهر كجزء منفصل يساعد في تنظيم المحتوى بطريقة منظمة ومفهومة.
لماذا نستخدم <li>؟
يُعدّ وسم <li> مفيدًا بشكل خاص في:
- تنظيم العناصر داخل القائمة: يساعد على ترتيب العناصر ضمن قائمة واحدة، سواءً بنقاط أو أرقام.
- جعل النصوص أكثر ترتيباً: يسهم في تنظيم النصوص بطريقة تُسهل على المستخدم قراءة وفهم المحتوى.
- تحسين تجربة المستخدم: يوفر تجربة قراءة أفضل ويوضح القوائم والخطوات بشكل منطقي، مما يجذب انتباه القارئ ويشجعه على متابعة القراءة.
كيفية كتابة <li> في Visual Studio Code
لإضافة عنصر باستخدام <li> في محرر الأكواد Visual Studio Code، اتبع الخطوات التالية:
- ابدأ بفتح قائمة إما بوسم
<ul>للقائمة غير المرتبة، أو<ol>للقائمة المرتبة. - داخل وسم القائمة، اكتب
<li>لفتح العنصر، ثم أدخل النص الخاص بالعنصر الذي تريده. - أغلق العنصر بوسم
</li>. - كرر هذه الخطوات لكل عنصر جديد ترغب بإضافته إلى القائمة.
مثال تطبيقي في Visual Studio Code
إليك مثال عملي حول كيفية كتابة وسم <li> في Visual Studio Code:
<ol>
<li>الخطوة الأولى: إعداد الملف</li>
<li>الخطوة الثانية: كتابة الأكواد الأساسية</li>
<li>الخطوة الثالثة: تنسيق الصفحة</li>
</ol>عند حفظ الملف باستخدام Ctrl + S، يمكنك رؤية النتيجة على المتصفح حيث تظهر العناصر مرتبة بأرقام.
نصائح للمبتدئين
- زر TAB: استخدم زر TAB لترتيب الأكواد وكتابة العناصر بشكل متناسق وسهل القراءة.
- وسم
<li>: يتيح لك هذا الوسم كتابة العديد من العناصر داخل قائمة واحدة، مع الحفاظ على ترتيب واضح ومنظم، سواء كانت القائمة مرتبة أم غير مرتبة.
وسم <li> يساعد في تنظيم المحتوى ويجعل من السهل قراءته، ما يسهم في تقديم تجربة استخدام مريحة وجذابة للقراء.
خاتمة
في ختام هذا الدرس، تناولنا العناصر الأساسية في وسم <body> التي تتيح لنا تنسيق المحتوى بشكل أفضل على صفحات HTML، مثل العناوين، الصور، والقوائم. يمثل فهم هذه الوسوم خطوة حاسمة في رحلتك لتطوير مواقع احترافية، حيث تعزز من وضوح المحتوى وتجذب انتباه الزوار. استمر في متابعة السلسلة القادمة، حيث سنقوم بالاستفاضة في المزيد من وسوم <body> الهامة لجعل صفحاتك أكثر تفاعلية وجاذبية.
Comments