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

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

مقاطع الصوت والفيديو في الويب

أراد مطورو الويب استخدام المقاطع الصوتية والفيديوهات منذ بداية هذا القرن -القرن الحادي والعشرين- مع ازدياد سرعة الاتصال بالإنترنت وزيادة عرض حزم التراسل بشكل كاف لدعم أنواع من مقاطع الفيديو (ملفات الفيديو أكبر حجمًا من النصوص والصور)، ولم تتمكن التقنيات الأساسية للويب مثل HTML في البدايات من إدراج الفيديوهات ومقاطع الصوت في صفحات الويب، لذلك ظهرت تقنيات مبنية على الإضافات plug-in مثل تقنية الفلاش Flash وبعدها سيلفرلايت Silverlight وكلاهما قد خرج من الخدمة الآن وقد تصدَّرتا الواجهة في عرض هذا النوع من المحتوى، كما عملت هذه التقنيات جيدًا لكن المشاكل سرعان ما واجتها مثل عدم توافق عملها مع ميزات HTML و CSS إضافة إلى مشاكل أمنية ومشاكل في سهولة الوصول.

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

ملاحظة: عليك أن تعرف قبل البدء هنا بوجود العديد من مزودِي خدمة الفيديو على الإنترنت online video providers -أو OVP اختصارًا- مثل اليوتيوب وديلي موشن وفيميو، بالإضافة إلى مزودِي خدمات الصوت مثل ساوند كلاود، إذ تقدِّم لك هذه الشركات طريقةً سهلةً لاستضافة وتشغيل الفيديوهات دون أن تلق بالًا لاستنزاف حجم حزمة التراسل، كما تزوّدك هذه الشركات بشيفرة جاهزة لإدراج مقاطع الفيديو أو الصوت في صفحاتك، فإذا قررت استخدام هذا المسار، فيمكنك الابتعاد عن الكثير من النقاط الصعبة التي نناقشها في هذا المقال، إذ سنناقش هذا النوع من الخدمات لاحقًا.

العنصر <video>

يتيح لك هذا العنصر إدراج الفيديوهات بكل سهولة، وإليك مثالًا بسيطًا:

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>

تجدر ملاحظة الميزات التالية:

• src: سمة مشابهة تمامًا لتلك الموجودة في العنصر <img>، وتضم المسار إلى مقطع الفيديو الذي تريد إدراجه.
• controls: ينبغي أن يكون المستخدِم قادرًا على التحكم بتشغيل وإيقاف الفيديو، لذلك قد تستخدِم هذه السمة لإضافة الواجهة الخاصة بالمتصفح للتحكم بالفيديو، أو أن تبني الواجهة الخاصة بك باستخدام واجهة جافاسكربت برمجية مناسبة، ولا بدّ من ضم الواجهة آلية لبدء وإيقاف تشغيل المقطع على الأقل، وكذلك ضبط مستوى الصوت.
• الفقرة النصية داخل العنصر <video>: وُتدعى الخطة البديلة fallback، إذ يُعرَض محتواها إذا لم يدعم المتصفح المستخدَم العنصر <video>، مما يسمح بوجود بديل للمتصفحات القديمة، ولا يوجد أسلوب محدَّد لتنظيم الخطة البديلة، فقد زودنا المستخدِم في حالتنا برابط إلى ملف الفيديو لكي يتمكن من الوصول إليه بصرف النظر عن المتصفح الذي يستخدِمه.

سيبدو مقطع الفيديو بعد إدراجه مشابهًا للصورة التالية:

بإمكانك أيضًا تجريب الصفحة مباشرةً، وألق نظرةً على الشيفرة المصدرية.

استخدام تنسيقات مصدرية مختلفة لتحسين التوافقية

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

محتوى ملف الوسائط

لنلق نظرةً سريعةً أولًا على بعض المصطلحات، إذ تُدعى التنسيقات مثل MP3 و MP4 و WebM بالتنسيقات الحاوية أو المُغلِّفة container formats، كما تعرِّف هذه الحاويات هيكليةً لتخزين مسارات الفيديو أو الصوت بالإضافة إلى البيانات الوصفية التي تشرح هذه الوسائط والمرمزات التي تستخدَم في ترميز الأقنية وما شابه.

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

تحمل مسارات الفيديو والمسارات الصوتية داخل الحاوية بيانات بالتنسيق الذي يوافق المرمّز المستخدَم في ترميز هذه الوسائط، إذ تستخدَم عدة تنسيقات لتخزين مسارات الصوت لتتماشى مع مسارات الفيديو، كما يرمّز كل مسار صوتي باستخدام مرمِّز صوتي وترمّز مسارات الفيديو باستخدام مرمِّز فيديو، كما تدعم المتصفحات المختلفة تنسيقات فيديو مختلفة وتنسيق حاويات مختلف مثل MP3 و MP4 و WebM والتي تحتوي بدورها على تنسيقات مختلفة للفيديو والصوتيات، فعلى سبيل المثال:

• تحزِم حاوية WebM تقليديًا مسارات الصوت بتنسيق Vorbis أو Opus مع مسارات فيديو بتنسيق VP8 و VP9، كما تدعم كل المتصفحات الحديثة هذه التنسيقات، لكنها قد لا تعمل مع المتصفحات القديمة.
• تحزِم حاوية MP4 عادةً مسارات الصوت بتنسيق MP3 و AAC مع مسار فيديو بتنسيق H.246، كما تدعم كل المتصفحات الحديثة هذه التنسيقات كما يدعمها إنترنت إكسبلورر.
• تميل حاويات Ogg إلى حزم مسارات الصوت بتنسيق Vorbis مع مسار فيديو بتنسيق Theora، كما تدعم هذه الحاوية متصفحات فايرفوكس وكروم، لكن تُستبدل بحاويات WebM ذات الجودة الأعلى.

تظهر بعض الحالات الخاصة التي تُخزّن فيها بيانات المرمز الصوتي لبعض المسارات الصوتية دون حاوية أو ضمن حاوية بسيطة. مثل المرمزات FLAC التي تُخزّن البيانات عادةً في ملفات بامتداد FLAC. وهي مجرد مسارات خام لبيانات هذا المرمز.

توجد حالة أخرى وهي ملفات MP3 دائمة الشعبية وهي المسار أو الطبقة الصوتية الثالثة لتنسيق MPEG-1 مخزّنةً ضمن حاوية MPEG أو MPEG-2، وتظهر أهمية الأمر عندما نعرف أن معظم المتصفحات لا تدعم ملفات الوسائط بتنسيق MPEG من خلال العنصرين <video> و <audio>، لكنها قد تستمر بدعم MP3 نظرًا لشعبيته.

تميل مشغلات الصوت إلى تشغيل المسارات الصوتية مثل MP3 و Ogg مباشرةً دون الحاجة إلى الحاويات في هذه الحالة.

دعم ملفات الوسائط المتعددة في المتصفحات

ملاحظة: ما الذي خلق مشكلة التوافق؟ الجواب هو وجود تنسيقات شعبية مثل MP3 و MP4/H.246 التي تتمتع بأداء ممتاز لكنها خاضعة لبراءات الاختراع التي تغطي بعضًا من التكنولوجيا التي تستند إليها أو كلها، فقد غطت براءة الاختراع MP3 حتى عام 2017 وستغطِّي H.246 حتى 2027 على الأقل، ونظرًا لوجود براءات الاختراع، فلا بد من دفع المتصفحات ضرائب كبيرة إذا أرادت إضافة دعم لهذه المرمزات، بالإضافة إلى ذلك، يفضِّل الكثيرون تحاشي القيود على البرمجيات واستخدام التنسيقات مفتوحة المصدر، ولهذه الأسباب قد يضطر المطورون إلى دعم تنسيقات مختلفة للوصول إلى جمهور أوسع.

وجدت المرمزات التي أشرنا إليها سابقًا لضغط الفيديو والصوتيات ضمن ملفات قابلة للإدارة، نظرًا لكون بيانات الفيديو والبيانات الصوتية الخام كبيرة الحجم، في حين يدعم كل متصفح صنفًا من المرمّزات مثل Vorbis أو H.264 التي تستخدَم في تحويل الفيديوهات والصوتيات المضغوطة إلى بيانات ثنائية وبالعكس، كما يملك كل مرمز إيجابياته وسلبياته وتملك كل حاوية إيجابياتها وسلبياتها أيضًا، مما سيؤثِّر على قرارك في الاختيار.

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

ملاحظة: تعرَّف على طريقة اختيار حاوية الوسائط المناسبة بالاطلاع على المقال تنسيقات حاويات الوسائط المتعددة، وطريقة اختيار المرمز الصوتي المناسب في مقال دليلك إلى مرمزات الملفات الصوتية في الويب، وطريقة اختيار مرمز الفيديو المناسب في مقال دليلك إلى مرمزات الفيديو في الويب.

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

إذًا كيف سننجز الأمر؟ لنلق نظرةً على المثال التالي، ويمكنك تجريبه مباشرةً أيضًا:

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

لقد أخرجنا في الشيفرة السابقة السمة src من العنصر <video> ووضعناها داخل عنصر مستقل هو <source> الذي يشير إلى موارد خاصة به، إذ سينتقل المتصفح في هذه الحالة إلى مجموعة العناصر <source> ويشغِّل المورد في أول عنصر يمتلك مرمزه، وبوجود الحاويتين WebM و MP4 ستضمن تشغيل ملفك على معظم المنصات والمتصفحات الموجودة حاليًا.

يمتلك كل عنصر <source> السمة type وهي اختيارية لكننا ننصح باستخدامها، كما تتضمن هذه السمة نوع الوسائط المتعددة MIME للملف الذي يحدده العنصر <source>، إذ يستخدِمها المتصفح لتجاوز الفيديوهات التي لا يفهمها، فإذا لم تُحدد قيمة لهذه السمة، فسيحمِّل المتصفح كل ملف ويحاول تشغيله حتى يجد الملف الذي يعمل، وهذا ما يستغرق وقتًا ويسبب هدرًا في استخدام الموارد.

ملاحظة: عُد إلى مقال دليلك إلى أنواع ملفات الوسائط وتنسيقاتها لاختيار أنسب مرمز وأنسب حاوية لاستخداماتك ولتتعرف أيضًا على أنواع الوسائط المتعددة MIME التي تعرِّف كل حاوية.

ميزات أخرى

هنالك عدد من الميزات التي يمكنك إضافتها عند عرض فيديوهات HTML، وإليك مثالًا كما يلي:

<video controls width="400" height="400"
       autoplay loop muted preload="auto"
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

ستبدو نتيجة تنفيذ هذه الشيفرة للمستخدِم كما يلي:

لنلق نظرةً على الميزات الجديدة:

• width و height: يمكنك التحكم بأبعاد الفيديو باستخدام هاتين السمتَين أو من خلال تنسيقات CSS، إذ يحافظ الفيديو في كلتا الحالتين على النسبة الأصلية للعرض إلى الطول أو كما تسمى النسبة الباعية أو نسبة البُعدَين aspect ratio، فإذا لم تتحقق هذه النسبة عندما تضبط بنفسك الطول والعرض، فسيغطي الفيديو الصفحة أفقيًا وتُملأ المنطقة غير المشغولة بالفيديو بخلفية ملونة مستمرة.
• autoplay: تسبب تشغيل الفيديو أو الصوت مباشرةً، في حين لا تزال بقية المحتوى قيد التحميل، كما لا ننصحك باستخدام هذه السمة للفيديو أو ملفات الصوت ضمن موقعك لأنه أمر مزعج لكثير من المستخدِمين.
• loop: تسبب تشغيل الفيديو او الصوت عند انتهائه، وقد يكون الأمر مزعجًا، لذا لا تستخدِمه إلا إذا كان ذلك ضروريًا.
• muted: تشغّل مقطع الفيديو افتراضيًا بدون صوت.
• poster: تضم عنوان URL للصورة التي تُعرَض قبل تشغيل الفيديو، وهي معدَّة للاستخدام مع الشاشات التمهيدية splash screen أو الشاشات الدعائية.
• preload: تستخدَم للتخزين المؤقت للملفات الضخمة، كما تأخذ أحد القيم الثلاث التالية: "none" وتعني لا تخزين مؤقت، أو "auto" وتعني ضرورة التخزين المؤقت للملف، أو "metadata" لتخزين البيانات الوصفية فقط للملف.

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

العنصر <audio>

يشابه العنصر <[video](https://wiki.hsoub.com/HTML/video)> مع بعض الاختلافات كما سنوضح لاحقًا، وإليك مثالًا عن استخدام العنصر:

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

تمثل الصورة التالية نتيجة تنفيذ الشيفرة:

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

يحتل العنصر مساحةً أقل من المساحة التي يحتلها مشغل الفيديو نظرًا لعدم وجود مكوّن مرئي، فكل ما تحتاجه هو عرض مجموعة التحكم لتشغيل المقطع الصوتي، وتتلخص بقية الاختلافات عن عنصر الفيديو بما يلي:

• لا يدعم العنصر <audio> السمتين width و height لعدم وجود مكوّن مرئي، وبالتالي لا حاجة إلى تحديد طول أو عرض.
• لا يدعم أيضًا السمة poster.

ما عدا ذلك، يدعم العنصر <audio> جميع الميزات التي يدعمها العنصر <video>.

عرض المسارات النصية لفيديو

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

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

من الجيد في حالات مثل هذه وجود نص يعرض ما يُقال في الفيديو أو المقطع الصوتي، وهذا ما يتيحه العنصر <video> في HTML، ولإنجاز الأمر، سنستخدِم ملفًا بتنسيق WebVTT والعنصر <track>.

يُعَدّ WebVTT هو تنسيق لكتابة ملفات نصية تضم إضافةً إلى المقاطع النصية بيانات وصفية مثل توقيت عرض كل عبارة نصية ومعلومات محدودة عن موقع وتنسيق تلك العبارات النصية.

تُدعى العبارات النصية بالأنساق Cues وتُصنَّف وفق أنواع مختلفة تخدم غايات مختلفة:

• الترجمات Subtitles: وذلك للمقاطع التي تتحدث بلغات مختلفة لا يستطيع فهمها من لا يجيد اللغة.
• شروحات (تعليقات) captions: نصوص تتزامن مع حوار أو وصف لأصوات ملفتة لكي تساعد من لديه صعوبة في السمع على فهم ما يجري.
• شروحات متزامنة timed descriptions: نصوص يلفظها مشغل الوسائط المتعددة لتصف مشاهد لذوي المشاكل البصرية أو فاقدي البصر.

سيبدو ملف WebVTT نمطيًا كما يلي:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

لكي تعرض محتويات هذا الملف مع مشغِّلات الوسائط التي تقدمها HTML سنحتاج إلى:

1. حفظ الملف بالامتداد vtt..
2. ربط الصفحة بملف vtt. مستخدِمًا العنصر <track> الذي ينبغي وضعه ضمن العنصر <video> أو العنصر <audio> لكن بعد جميع العناصر <source>.
3. استخدام السمة kind للعنصر <track> لتحديد نوع الأنساق إذا كانت "subtitles" أو "captions" أو "descriptions".
4. استخدام السمة srclang لإخبار المتصفح عن اللغة التي يجب أن يعرض بها الأنساق، واستخدام السمة label لمساعدة المستخدِم في تحديد اللغة التي يبحث عنها.

إليك مثالًا:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish">
</video>

ستكون النتيجة مقطع فيديو مع الترجمة كما يلي:

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

تطبيق: إدراج مقطع الفيديو أو الصوت الخاص بك

نشجعك في هذا التمرين على الخروج وتسجيل مقطع فيديو أو مقطع صوتي لما يجري في محيطك، إذ يمكنك ببساطة استخدام هاتفك المحمول لسهولة استخدامه في التصوير وفي نقل المقاطع المسجلة إلى الحاسوب، وقد تضطر إلى تحويل الملفات المسجلة لتصبح حاويات MP4 أو WebM في حال سجلت مقطع فيديو، و MP3 أو Ogg في حال تسجيلك لمقطع صوتي، كما ستجد الكثير من البرمجيات التي تساعدك في إنجاز الأمر دون عناء كبير مثل Miro Video Converter و Audacity.

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

نطلب منك:

1. حفظ ملفات الفيديو والصوت في مجلد جديد على حاسوبك
2. إنشاء ملف HTML جديد في المجلد نفسه باسم index.html.
3. أضف العنصرين <video> و <audio> إلى الصفحة واجعلهما يعرضان أدوات التحكم الافتراضية للمتصفح.
4. أضف السمة source إلى كل منهما لكي تجد المتصفحات التنسيق الصوتي الذي تدعمه، ولا بد في هذه الحالة من استخدام السمة type أيضًا.
5. أضف صورة بداية poster إلى العنصر <video> كي تعرض قبل تشغيل المقطع.

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

خلاصة

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

ترجمة -وبتصرُّف- للمقال Video and audio content.

اقرأ أيضًا

• إعداد صور متجاوبة
• إضافة الصور في صفحات HTML
• إضافة مقاطع الفيديو عبر العنصر <video> في HTML5

كانت الويب في بداياتها مجرد نصوص عدَّها الكثيرون مملةً، ولحسن الحظ لم يتأخر استخدام الصور -وغيرها من المحتوى الأكثر إمتاعًا- كثيرًا ضمن صفحات الويب، كما هناك الكثير من أنواع الوسائط المتعددة التي يمكن التفكير بها، لكن من المنطقي أن نبدأ مع العنصر المتواضع <img> الذي يُستخدَم في إدراج صور بسيطة في الصفحة، إذ سنطلع في هذا المقال على طريقة استخدام العنصر بتفاصيل أكثر بما في ذلك الأساسيات وطريقة إدراج شرح للصورة باستخدام العنصر <figure> وكيفية ربطه بصور الخلفية في CSS.

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

كيف تضع صورة في صفحة ويب

نستخدِم العنصر <img> لإدراج صورة في موقع ويب، إذ يُعَدّ هذا العنصر فارغًا، أي لا يضم أيّ محتوى نصي أو وسم نهاية، كما يتطلب على الأقل سمةً واحدةً لكي يعمل بصورة صحيحة وهي src وتُقرأ source، كما تحتوي قيمة هذه السمة على المسار الذي يدل على موقع الصورة التي تريد إدراجها في الصفحة والذي قد يكون عنوان URL نسبيًا relative أو مطلقًا absolute ومشابهةً تمامًا لقيمة السمة href الخاصة بالعنصر <a>.

ملاحظة: عليك الاطلاع على مقال أساسيات عنوان URL وأنواعه وخاصة فقرة "عناوين URL المطلقة والنسبية" لتتذكَّر مفهومَي العنوان المطلق والعنوان النسبي قبل المتابعة.

إذا كان اسم صورتك dinosaur.jpg مثلًا وتتواجد في المجلد نفسه الذي يوجد فيه ملف HTML، فستدرِج صورتك كما يلي:

<img src="dinosaur.jpg">

أما إذا كانت الصورة في مجلد فرعي يُدعى images يتواجد في المجلد نفسه الذي يوجد فيه ملف HTML، فستدرِج صورتك كما يلي:

<img src="images/dinosaur.jpg">

وهكذا.

ملاحظة: تقرأ محركات البحث أسماء ملفات الصور ويؤثر ذلك من ناحية تحسين محركات البحث سيو SEO، لهذا السبب لا بدّ من تسمية الصور بأسماء وصفية معبرة، فالاسم dinosaur.jpg أفضل بالتأكيد من image835.png.

بإمكانك إدراج الصورة أيضًا باستخدام عنوان URL مطلق، وإليك مثالًا كما يلي:

<img src="https://www.example.com/images/dinosaur.jpg">

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

تحذير: تمتلك معظم الصور حقوق نشر، فلا تعرض صورةً على موقع ما لم:

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

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

ستعطي الشيفرة السابقة النتيجة التالية:

ملاحظة: يُشار أحيانًا إلى العنصرين <img> و <video> بأنهما عنصران قابلان للاستبدال Replaced elements، لأن ما يُعرِّف محتواهما وحجمهما هي موارد خارجية مثل ملف صورة أو ملف فيديو، وليس من قِبَل محتواهما مباشرةً.

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

النص البديل

ما سنتحدث عنه الآن هو السمة alt، ومن المفترض أن تكون قيمة هذه السمة نصًا يُظهر وصفًا للصورة وذلك لاستخدامه في الحالات التي لا تُعرض فيها، أو الحالات التي تستغرق فيها الصورة وقتًا طويلًا حتى يصيّرها المتصفح نظرًا لبطء الاتصال بالإنترنت، كما يمكن مثلًا تعديل الشيفرة التي عرضناها سابقًا لتصبح كما يلي:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

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

لماذا إذًا ستحتاج إلى النص البديل؟ إليك بعض الأسباب:

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

ما الذي ينبغي كتابته ضمن السمة alt؟ يعتمد الأمر على سبب استخدامك للصورة، أو بمعنى آخر ما الذي ستخسره إذا لم تُعرض الصورة؟:

• ديكور للصفحة: عليك استعمال صور الخلفية في CSS لأغراض الديكور، لكن إذا كان عليك استخدام HTML، فأضف السمة فارغةً " "=alt، فإذا لم تكن الصورة جزءًا من المحتوى، فلن تهدر قارئات الشاشة الوقت في نطقها.
• محتوى ضمن الصفحة: إذا قدَّمت الصورة معلومات هامةً، فعليك إضافة المعلومات نفسها لكن بإيجاز إلى السمة alt أو إلى النص الرئيسي للصفحة كي يراه الجميع وهذا هو الحل الأفضل، ولا تكتب نصًا بديلًا مكررًا عن المحتوى الرئيسي فالأمر مزعج بالنسبة للمستخدِم صحيح البصر، فإذا كانت الصورة مشروحةً شرحًا وافيًا ضمن النص الرئيسي، فأضف سمة النص البديل فارغةً " "=alt.
• رابط إلى محتوى آخر: إذا وضعت صورةً ضمن العنصر <a> لكي تحوِّل الصورة إلى رابط، فلا بدّ أن تزوِّد الرابط بنص واضح، وفي هذه الحالة يمكنك كتابته ضمن العنصر <a> أو على أساس قيمة للسمة alt العائدة للعنصر <img> أيًا ما يخدم حالتك.
• محتوى نصي: لا يجب وضع نص ضمن صورة، فإذا احتجت لأن تعرض ظلًا لعنوانك الرئيسي مثلًا، فاستخدم تنسيقات CSS بدلًا من وضع النص ضمن الصورة؛ أما إذا كنت مضطرًا كثيرًا، فضع النص داخل السمة alt.

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

أبعاد الصورة

يمكن استخدام السمتَين width و height لتحديد بُعدَي الصورة أي العرض والارتفاع، كما بإمكانك معرفة هذين البعدين بطرق عديدة، إذ يمكنك مثلًا الضغط على المفتاحين I+Cmd في ماك لعرض المعلومات عن ملف الصورة، وبالعودة إلى مثالنا السابق يمكن كتابة التالي:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341">

لن يغير ذلك كثيرًا في طريقة عرض الصورة ضمن الظروف الاعتيادية، لكن إذا لم تظهر الصورة عندما ينتقل المستخدِم إلى الصفحة التي تعرضها ولم تحمل هذه الصورة بعد على سبيل المثال، فستجد أنّ المتصفح سيترك فراغًا له أبعاد محددة لكي تُعرَض الصورة ضمنه:

سيفيدك هذا الأمر في تحميل الصفحة بسرعة وأكثر سلاسةً.

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

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

عناوين الصور

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

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

سيعرِض ذلك نص العنوان الذي اخترته عندما تمرر مؤشر الفأرة فوق الصورة.

لا يُعَدّ استخدام السمة title مع ذلك محبّذًا، فله مشاكل عدة تتعلق بالوصول السهل وتتمركز حول حقيقة أنّ دعم قارئات الشاشة لها غير متوقع، ولن تعرضها معظم المتصفحات ما لم تمرر مؤشر الفأرة فوقها، لذا من الأفضل إدراج معلومات داعمة مثل هذه ضمن نص المقالة الرئيسية في الصفحة بدلًا من ربطها بالصورة.

استخدام عنصري الشكل <figure> والشرح <figcaption> مع الصور

هنالك طرق عدة لإضافة شروحات إلى الصورة، وإليك مثالًا كما يلي:

<div class="figure">
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

تُعَدّ هذه الطريقة مقبولةً باستخدام العنصر <div>، فهي تعرض المحتوى الذي تحتاجه بطريقة يمكن تنسيقها باستخدام CSS، لكن المشكلة هنا هي عدم وجود ربط دلالي semantical بين الصورة وشرحها مما سيسبب المشاكل عند استخدام قارئات الشاشة، فعند وجود 50 صورة مثلًا مع شروحها، فلا يمكن تمييز أيّ شرح لأيّ صورة.

الطريقة الأفضل هي استخدام العنصرين <figure> و <figcaption>، وهما عنصران خاصَّان بالنسخة 5 من HTML، فقد ظهرت هذه العناصر خصيصًا لهذا الغرض، أي لإيجاد حاضنة دلالية للأشكال تربط جليًا بين الصورة وشرحها، ويمكن كتابة المثال السابق على سبيل المثال كما يلي:

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

يخبر العنصر <figcaption> المتصفح والتقنيات المساعدة أنّ الشرح الذي يضمَّه سيكون مخصصًا للصورة التي يضمها العنصر <figure>.

ملاحظة: لكل من النص البديل alt والشروحات captions دورًا مختلفًا من وجهة نظر الوصول السهل. إذ يستفيد جميع المستخدِمين من الشروحات بمن فيهم من يراها، لكن تقتصر رؤية محتوى السمة alt التي تؤدي المهمة ذاتها على الحالة التي لا تُعرض فيها الصورة، لهذا يجب ألا يتشابه محتوى الشرح ومحتوى النص البديل لأنّ كلاهما سيظهر عند غياب الصورة، لذا حاول أن تمنع متصفحك من عرض الصور وراقب ما سيحدث.

لا حاجة ليكون الشكل -أي العنصر <figure>- صورةً حصرًا، فهو حاوية مستقلة يمكن أن:

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

قد يضم الشكل عدة صور أو شذرات (مقاطع) من الشيفرة أو ملفات فيديو أو ملفات صوتية أو جداول أو غير ذلك.

إدراج صور للخلفية باستخدام CSS

يمكنك أيضًا استخدام CSS في إدراج الصور ضمن صفحات الويب وشيفرة جافاسكربت أيضًا، لكنه موضوع مختلف، إذ تُستخدّم الخاصية background-image وغيرها من خواص الخلفية background-image التي تبدأ بالكلمة *-background للتحكم في موضع خلفية الصفحة، فإذا أردت مثلًا وضع الخلفية لكل فقرة نصية، فكل ما عليك فعله هو كتابة ما يلي:

p {
  background-image: url("images/dinosaur.jpg");
}

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

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

خلاصة

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

ترجمة -وبتصرُّف- للمقال Images in HTML.

اقرأ أيضًا

• المقال السابق: تنقيح شيفرة HTML
• إعداد صور متجاوبة
• إضافة مقاطع الفيديو عبر العنصر <video> في HTML5

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

عليك قبل البدء في قراءة هذا المقال الاطلاع على أساسيات HTML التي أوردناها في مقال تعرَّف على HTML وكذلك هيكلة النصوص في HTML وطريقة إنشاء الروابط التشعبية في HTML.

تنقيح الشيفرة ليس أمرا صعبا

تبقى الأمور عند كتابة شيفرة واضحةً وسلسةً حتى يقع خطأ ما، فقد ارتكبت خطأً ما فجاةً، ولم تَعُد تعمل الشيفرة إطلاقًا أو لم تَعُد تعمل بالطريقة المطلوبة، ويُظهِر الشكل التالي مثالًا عن خطأ يظهر عند ترجمة برنامج بسيط مكتوب بلغة رست Rust.

يسهل فهم الخطأ الذي يظهر في الصورة وهو نص بين مزدوجتين غير مغلقتين unterminated double quote string، فإذا نظرت إلى قائمة الأخطاء، فسترى الشيفرة التالية:

println!(hello, world!");

يفتقد فيها النص !hello, world إلى إشارة تنصيص البداية، لكن ستتعقد هذه الرسائل وسيصعب فهمها عندما يكبر البرنامج، إذ ستبدو الحالات البسيطة مخيفةً لشخص لا يعرف شيئًا عن لغة Rust.

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

تنقيح اللغة HTML

ليست عملية تنقيح HTML بتعقيد تنقيح Rust، فلن تُترجم إلى صورة أخرى قبل أن يفسرها المتصفح ويعرض النتائج، فهي لغة مفسَّرة interpreted وليست مصرَّفة compiled، كما تُعَدّ عناصر HTML أوضح من ناحية الصيغة والكتابة بصورة أو بأخرى موازنةً بلغة برمجة حقيقية مثل Rust أو جافاسكربت أو بايثون، كما أنّ أسلوب التفسير المتساهل الذي تستخدِمه المتصفحات موازنةً ببقية لغات البرمجة له ميزات إيجابية وأخرى سلبية.

شيفرة متساهلة

ماذا نعني بالمتساهل permissive إذًا؟ ما يحصل عادةً عند ارتكاب أخطاء في الشيفرة هو ظهور نوعَين من رسائل الخطأ:

• أخطاء الصياغة syntax error: تنتج عن أخطاء في كتابة التعليمات أو علامات الوصول في الشيفرة مما يتسبب في إيقاف تنفيذ البرنامج كما في الخطأ الذي عرضناه في برنامج Rust السابق (نسيان إشارة تنصيص)، إذ تُعَدّ هذه الأخطاء سهلة الحل إذا كنت ملمًا بقواعد اللغة المستخدَمة وما تعنيه رسائل الخطأ.
• الأخطاء المنطقية logical errors: لا تقع عند حدوث أخطاء صياغة، لكن عندما لا تعطيك الشيفرة النتيجة المطلوبة، بمعنى ان البرنامج يعمل بطريقة غير صحيحة، فهذه الأخطاء صعبة الحل نظرًا لعدم وجود رسالة خطأ توجهك إلى مصدره.

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

ملاحظة: يعود تفسير HTML بصورة متساهلة إلى بدايات الويب، إذ اتخذ قرار عندها بأنّ إيصال المحتوى إلى المستخدِم أكثر أهميةً من صحة الصياغة، وربما لم تغدو الويب بهذه الشعبية الآن إذا كانت أكثر تشددًا في بداياتها.

تطبيق: دراسة شيفرة متساهلة

حان الوقت لدراسة الطبيعة المتساهلة التي تُفسَّر بها شيفرة HTML.

نزّل أولًا ملفات مثال التنقيح التجريبي واحفظها على جهازك، إذ كُتِب المثال ليضم قصدًا أخطاءً لكي نستكشفها، ونقول عندها بأنّ شيفرة HTML سيئة التوصيف badly-formed على نقيض أن تكون حسنة التوصيف well-formed.

افتح الملف بواسطة المتصفح، إذ ستبدو لك النتيجة كما يلي:

ستلاحظ مباشرةً أنّ المشهد ليس جيدًا، فلنلق نظرةً إذًا على الشيفرة لنرى إذا كان بإمكاننا فعل شيء ما.

<h1>HTML debugging examples</h1>

<p>What causes errors in HTML?

<ul>
  <li>Unclosed elements: If an element is <strong>not closed properly,
      then its effect can spread to areas you didn't intend

  <li>Badly nested elements: Nesting elements properly is also very important
      for code behaving correctly. <strong>strong <em>strong emphasized?</strong>
      what is this?</em>

  <li>Unclosed attributes: Another common source of HTML problems. Let's
      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
      homepage</a>
</ul>

لنبحث عن المشاكل:

• لا توجد وسوم نهاية لعنصر الفقرة <p> ولعناصر القائمة <li>، لكن بالنظر إلى النتيجة، سنجد أنها لم تؤثر سلبًا على تصيير الشيفرة، وذلك لأنّ المتصفح سيستدِل بسهولة على نهاية كل عنصر وبداية الآخر.
• لا يوجد وسم نهاية لأول عنصر <strong>، وهذا قد يسبب مشكلةً لأنه من الصعب أن يقرِّر المتصفح متى سينتهي تأثير هذا العنصر، ولاحظ أنّ بقية النص قد كُتب بصورة بارزة.
• لاحظ التوصيف السيئ للقسم التالي للشيفرة، إذ لا يمكن أبدًا توقُّع كيف سيعرض المتصفح هذه الشيفرة نظرًا لمشكلة التداخل السابقة.

  <strong>strong <em>strong emphasized?</strong>
  what is this?</em>

• تفتقد قيمة الصفة href للرابط في نهايتها إلى إشارة تنصيص مزدوجة، وهذا ما يبدو أنه المسبب الأكبر للمشكلة فلم يُصيّر الرابط أبدًا.

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

سترى الشيفرة التي صيّرها المتصفح ضمن فاحص DOM:

دعونا نتفحَّص الشيفرة الموجودة في نافذة فاحص DOM لنرى كيفية تعامل المتصفح مع الأخطاء، وقد راجعنا الشيفرة باستخدام فايرفوكس، وينبغي أن يكون الأمر مماثلًا في جميع المتصفحات الحديثة:

• أضاف المتصفح وسوم نهاية للفقرات ولعناصر القائمة.
• من غير الواضح أين سينتهي أول عنصر <strong>، لذلك غلَّف المتصفح كل كتلة نصية منفصلة ضمن عنصر <strong> منفصل حتى نهاية المستند.
• حلّ المتصفح مشكلة التداخل الخاطئ للعناصر كما يلي:

     <strong>strong
       <em>strong emphasized?</em>
     </strong>
     <em> what is this?</em>

• أما الرابط الذي تنقصه إشارة تنصيص مزدوجة، فقد حذفه المتصفح بالكامل، وأصبح آخر عنصر في قائمة العناصر كما يلي:

     <li>
       <strong>Unclosed attributes: Another common source of HTML problems.
       Let's look at an example: </strong>
     </li>

التحقق من شيفرة HTML

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

إنّ أفضل استراتيجية قد تبدأ بها هي استخدام خدمة التحقق من شيفرة HTML المعروفة باسم Markup Validation Service التي ابتكرتها وتصونها منظمة W3C المسؤولة عن تعريف مواصفات HTML و CSS وغيرها من تقنيات الويب، إذ تُعَدّ هذه الخدمة تطبيق ويب يقبل ملف HTML في الدخل ثم يتفحص محتواه ثم يعطيك تقريرًا بما هو خاطئ:

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

تطبيق: التحقق من ملف HTML

لنحاول استخدام الملف البسيط الذي ناقشناه سابقًا:

1. حمِّل خدمة التحقق من التوصيف في المتصفح إذا لم تكن قد فعلت ذلك.
2. انتقل إلى نافذة التحقق من دخل مباشر Validate by Direct Input.
3. انسخ شيفرة الملف بالكامل ثم الصقها في مربع النص الكبير الظاهر في النافذة.
4. انقر الزر "تحقق Check".

من المفترض أن تظهر قائمة من الأخطاء بالإضافة إلى معلومات أخرى.

تفسير رسائل الخطأ

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

• Consider adding a `lang` attribute to the `html` start tag to declare the language of this document

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

• End tag `li` implied, but there were open elements

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

• Unclosed element `strong`

أي عنصر strong غير مغلق: الرسالة واضحة، ويشير رقمَي السطر والعمود مباشرةً إلى مكان الخطأ.

• End tag `strong` violates nesting rules

أي يخالف وسم نهاية العنصر strong قواعد التداخل: تشير الرسالة إلى تداخل خاطئ للعناصر، ويشير رقمَي السطر والعمود مباشرةً إلى موقع المشكلة.

• End of file reached when inside an attribute value. Ignoring tag

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

• End of file seen and there were open elements

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

example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html>

ملاحظة: قد ينتج عن سمة لم تغلق بإشارة تنصيص عنصر مفتوح لأنّ بقية المستند ستفسر على أنها محتوى لقيمة السمة.

• Unclosed element `ul`

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

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

ستعرف أنك أصلحت جميع الأخطاء عندما تشاهد الشريط التالي في خرج الخدمة:

خلاصة

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

ترجمة -وبتصرُّف- للمقال Debugging HTML.

اقرأ أيضًا

• تنقيح أخطاء شيفرة جافاسكربت في Chrome
• اختبار الوحدات وأدوات تنقيح الشيفرات وتصحيح الأخطاء في Cpp

تقدِّم HTML إضافةً إلى العناصر التي تحدد أجزاءً مستقلةً في الصفحة -مثل الفقرات النصية والصور- عددًا من العناصر الكتلية Block elements لتحدد مناطق كاملة ضمن صفحة ويب مثل ترويسة الصفحة Header أو قوائم التنقل Navigation menu أو أعمدة المحتوى الأساسي main content columns، إذ سيبحث هذا المقال في كيفية التخطيط لوضع هيكلية بسيطة لموقع ويب وكتابة شيفرة HTML المناسبة.

عليك قبل البدء في قراءة هذا المقال الاطلاع على أساسيات HTML التي أوردناها في مقال تعرَّف على HTML وكذلك هيكلة النصوص في HTML ومقال طريقة إنشاء الروابط التشعبية.

الأقسام الأساسية لصفحة ويب

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

• الترويسة Header: يظهر عادة على أساس شريط واسع أعلى الصفحة يضم عنوانًا عريضًا وشعارًا، كما يبقى هذا القسم نفسه في كل صفحات الموقع على الأغلب.
• شريط التنقل Navigation bar: يرتبط بالأقسام الرئيسية للموقع ويُعرض على هيئة أزرار أو روابط أو نوافذ ضمنية tabs، كما يبقى عادةً محتوى هذا الشريط كما هو في جميع صفحات الموقع تمامًا مثل محتوى الترويسة، فعدم وجود هذا الشريط في صفحة ما سيربك المستخدِم ويدفعه إلى ترك الموقع، كما يعتقد الكثير من المصممين أنّ أشرطة القوائم لا بد وأن تكون جزءًا من الترويسة، لكنها تبقى مجرد رؤية غير ملزمة، لأن البعض يجادل أيضًا في أفضلية وجودهما مستقلين من منظور سهولة الوصول أو الشمولية accessibility، إذ يمكن لقارئات الشاشة أن تقرأهما بصورة أفضل في حال كانا منفصلين.
• المحتوى الرئيسي main content: يُعَدّ منطقةَ واسعةَ منتصف الصفحة تتضمن المحتوى الخاص بصفحة الويب، مثل الفيديو الذي تريد مشاهدته أو القصة التي تريد قراءتها أو الخرائط التي تريد رؤيتها أو عناوين الأخبار أو غير ذلك، وهذا القسم بالتحديد سيختلف بكل تأكيد من صفحة لأخرى.
• الشريط الجانبي sidebar: يضم بعض المعلومات على أطراف الصفحة مثل الروابط أو الاقتباسات أو الإعلانات وغيرها، يتعلق محتوى هذا القسم بما يرد في المحتوى الرئيسي عادةً، فقد تجد في الشريط الجانبي لمحةً عن صاحب الصفحة أو روابط إلى مواضيع مشابهة، كما قد تجد أحيانًا بعض العناصر الاحتياطية مثل قوائم تنقل إضافية.
• تذييل الصفحة footer: شريط يمتد أسفل الصفحة ويضم عادة رسومات دقيقة وملاحظات عن حقوق النشر أو معلومات التواصل، ويُستخدَم هذا القسم لإدراج معلومات عامة كما هو حال الترويسة، لكن هذه المعلومات ليست حيويةً أو مكملة لما يعرضه الموقع، كما يُستخدَم التذييل أحيانًا لأغراض تحسين محركات البحث Search Engine Optimization، إذ يعرض أحيانًا روابط سريعة للوصول إلى محتوى ذو شعبية كبيرة على الويب.

قد يُبنى هيكل موقع ويب نموذجي مشابه لما تعرضه الصورة التالية:

استخدام HTML في هيكلة المحتوى

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

لا يخبرك ما تراه على الصفحة كل شيء، إذ تُستخدَم الخطوط والألوان للفت انتباه المستخدِم إلى الأقسام الأكثر فائدةً في الصفحة مثل قوائم التنقل والروابط المتعلقة بها، لكن ماذا لو أردنا الانتباه إلى الأشخاص ذوي المشاكل البصرية؟ فلن يهتم هؤلاء باللون الزهري أو بالخط الكبير.

ملاحظة: يُقدَّر عدد المصابين بعمى الألوان من الذكور بحدود 8% ومن النساء بحدود 0.5%، أي رجل من بين 12 وامرأة من بين 200، في حين ويمثِّل المصابون بالعمى وأصحاب المشاكل البصرية الجادة نسبة 4-5% من تعداد البشر، وقد كان عددهم قرابة 285 مليون عالميًا عام 2012 عندما كان تعداد سكان الأرض سبعة مليارات.

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

تقدِّم لك HTML مجموعةَ من العناصر لإنجاز هيكلية دلالية تعكس وظيفة كل قسم منها:

• الترويسة header: يمثلها العنصر <header>.
• شريط التنقل navigation bar: يمثله العنصر <nav>.
• المحتوى الرئيسي main content: يمثله العنصر <main>، بالإضافة إلى العديد من العناصر التي تمثل أقسامًا فرعيةً للمحتوى الرئيسي مثل <section> و <div>.
• الشريط الجانبي sidebar: يمثله العنصر <aside>.
• التذييل footer: يمثله العنصر <footer>.

تطبيق: فهم شيفرة الصفحة النموذجية السابقة

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>My page title</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

    <!--الدلالية في النسخ HTML5 الأسطر الثلاث التالية هي طريقة لتعمل عناصر 
    الأقدم من متصفح إنترنت إكسبلورر-->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- الترويسة الرئيسية التي ستستخدم في جميع صفحات الموقع -->

    <header>
      <h1>Header</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our team</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

       <!-- استمارة بحث وهو أسلوب غير مباشر للتنقل عبر الموقع -->

       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value="Go!">
       </form>
     </nav>

    <!-- المحتوى الرئيسي للموقع -->
    <main>

      <!-- يتضمن مقالة-->
      <article>
        <h2>Article heading</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h3>Subsection</h3>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

        <h3>Another subsection</h3>

        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>

      <!-- يمكن للمحتوى الجانبي أن يتداخل مع المحتوى الرئيسي -->
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">Oh I do like to be beside the seaside</a></li>
          <li><a href="#">Oh I do like to be beside the sea</a></li>
          <li><a href="#">Although in the North of England</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well...</a></li>
        </ul>
      </aside>

    </main>

    <!-- التذييل الرئيسي الذي سيستخدم في جميع صفحات الموقع -->

    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>

  </body>
</html>

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

تفاصيل عناصر تخطيط HTML

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

• العنصر <main>: يستخدَم لإدراج المحتوى الفريد للصفحة، وينبغي استخدام هذا العنصر مرةً واحدةً في الصفحة، كما يوضَع مباشرةً ضمن العنصر <body>، ولا يجب أن يتداخل هذا العنصر مع عناصر أخرى.
• العنصر <article>: يغلِّف كتلًا من المحتوى المترابط القائم بذاته والذي لا يتعلق بمحتوى بقية الأقسام مثل المنشورات المستقلة.
• العنصر <section>: يشابه العنصر <article> لكنه يستخدَم لتحضير جزء من الصفحة ليقدّم وظيفةً بمفرده مثل خريطة صغيرة أو مجموعة من العناوين أو الملخصات لمقالات أو ليقدم موضوعًا محددًا، كما يُعَدّ استخدام عناصر العناوين في بداية كل عنصر <section> ممارسةً جيدةً، وتجدر الملاحظة أنه بالإمكان تجزئة محتوى العنصر <article> إلى أقسام مختلفة وتجزئة القسم <section> إلى مقالات مختلفة وفقًا للسياق.
• العنصر <aside>: يضم محتوًى لا يتعلق مباشرةً بالمحتوى الرئيسي للصفحة لكنه يزوِّد الصفحة بمعلومات إضافية مثل مدخلات مختصرة أو سيرة ذاتية للمؤلف أو روابط متعلقة بالمحتوى وغيرها.
• العنصر <header>: يضم محتوًى تعريفيًا للصفحة، فإذا كان هذا العنصر ابنًا للعنصر <body>، فسيمثل الترويسة العامة للصفحة، في حيم إذا كان ابنًا للعنصر <section>، فسيمثل ترويسةً خاصةً بهذا القسم، وحاول عدم الخلط بين الترويسة وعنوان صفحة والعناوين الأخرى.
• العنصر <nav>: يؤمن وظيفة التنقل الأساسية في الصفحة، ولا يضم روابط ثانوية وما شابهها.
• العنصر <footer>: يضم محتوًى مناسبًا لتذييل الصفحة.

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

عناصر غير دلالية

قد لا تجد في بعض الأحيان عنصرًا دلاليًا مناسبًا لتغليف محتوى معيّن، وقد ترغب في أحيان أخرى ضم مجموعة من العناصر مع بعضها لكي تتعامل معها على أساس كيان واحد عند استخدام CSS أو جافاسكربت، إذ تقدِّم HTML في حالات مثل هذه العنصر <div> الذي يُفضَّل استخدامه مع السمة class لكي تعطيه تسميةً محددةً فيسهل استهدافه، كما يُعَدّ العنصر <span> عنصرًا سطريًا غير دلالي ينبغي استخدامه فقط إذا لم تجد عنصرًا دلاليًا مناسبًا لتغليف المحتوى المطلوب أو لم ترد إعطاء معنى محدد لهذا المحتوى، وإليك مثالًا كما يلي:

<p>، دخل الملك إلى غرفته مترنحًا في الواحدة ليلًا لم يساعده الدواء كثيرًا وجر نفسه عبر الباب <span class="editor-note">[ملاحظة للمحرر: في هذه اللحظة ينبغي تخفيض الأضواء]</span>.</p>

يُفترَض في هذه الحالة أن تقدِّم ملاحظة المحرر الموسومة بالصنف "editor-note" توجيهات إضافيةً للقارئ بما أنها لا تحمل أي دلالة إضافية، ويمكن حل هذا الموضوع ببساطة باستخدام CSS أيضًا، وذلك بإزاحة الملاحظة قليلًا عن النص الرئيسي.

يُعَدّ العنصر <div> عنصرًا كتليًا غير دلالي ينبغي استخدامه فقط إذا لم تجد عنصرًا دلاليًا كتليًا مناسبًا لتغليف المحتوى المطلوب أو لم ترد إعطاء معنى محدد لهذا المحتوى، فتخيل على سبيل المثال قائمة تسوّق يمكنك طلبها في أيّ وقت من موقع تجاري:

<div class="shopping-cart">
  <h2>Shopping cart</h2>
  <ul>
    <li>
      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/thumb.png" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Total cost: $237.89</p>
</div>

لا تُعَدّ هذه القائمة محتوىً جانبيًا <aside> في الواقع، فقد لا تتعلق بالضرورة بالمحتوى الرئيسي للصفحة وتريدها أن تظهر في أيّ مكان ضمن الموقع، كما ليس من المجدي استخدام العنصر <section> لكونها لا تمثل جزءًا من المحتوى الرئيسي، وبالتالي يكون استخدام العنصر <div> في هذه الحالة مناسبًا، كما استخدمنا معه عنوانًا لمساعدة قارئات الشاشة على إيجاده.

تنبيه: يُعَدّ استخدام العنصر <div> مريحًا وسهلًا للغاية، فهو لا يحمل أيّ معنى دلالي، وإنما يُجمّع شيفرة HTML ضمن كيان واحد، ولكن انتبه إلى استخدامها فقط عندما لا تجد عنصرًا دلاليًا مناسبًا، وحاول التقليل من استخدامه إلى الحد الأدنى كي لا تعاني في صيانة الموقع لاحقًا.

بادئات الأسطر الجديدة والخطوط الأفقية

يوجد عنصران ستستخدمهما في مناسبات عدة ولا بد من الاطلاع عليهما:

• عنصر الانتقال إلى سطر جديد <br>: يدرِج هذا العنصر سطرًا جديدًا ضمن فقرة نصية، ويُعَدّ هذا العنصر الأسلوب الوحيد لتقسيم كتلة نصية أو بنية محددة إلى سلسلة من الأسطر القصيرة مثل حالة عنوان بريدي أو قصيدة شعرية، وإليك مثالًا كما يلي:

<p>There once was a man named O'Dell<br>
Who loved to write HTML<br>
But his structure was bad, his semantics were sad<br>
and his markup didn't read very well.</p>

سيُصيَّر أو يُعرَض النص في الفقرات على صورة خط طويل دون استخدام العنصر <br>، أما بوجوده، فسيصيِّر المتصفح الفقرة النصية على الصورة التالية:

• عنصر إدراج سطر أفقي <hr>: يُنشئ العنصر خطًا أفقيًا في الصفحة لكي يعرض تغيرًا في سمة النص مثل تغير الموضوع أو المشهد، وإليك مثالًا كما يلي:

<p>Ron was backed into a corner by the marauding
   netherbeasts. Scared, but determined to protect his friends, he raised his
   wand and prepared to do battle, hoping that his distress call had made it through.</p>
<hr>
<p>Meanwhile, Harry was sitting at home, staring at his royalty statement
  and pondering when the next spin off series would come out, when an enchanted
  distress letter flew through his window and landed in his lap. He read it
  hazily and sighed; "better get back to work then", he mused.</p>

إذ سيصيَّر كما يلي:

التخطيط لموقع ويب بسيط

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

1. تذكّر أنه لديك مجموعة من العناصر التي ستتكرر في معظم -إن لم يكن في كل- الصفحات مثل قوائم التنقل والمحتوى الموجود في تذييل الصفحة، فمن الجيد مثلًا -إذا كان موقعك لإدارة عمل ما- وضع معلومات للتواصل في تذييل جميع الصفحات، ولهذا ينبغي عليك تدوين ما الذي تريده أن يكون مشتركًا في صفحاتك.
2. ارسم لوحة بسيطة لما تتوقع أن يكون عليه هيكل الصفحة (فقد تريدها أن تبدو مماثلة للموقع النموذجي الذي عرضناه في الأعلى). دوّن ما سيكون عليه كل جزء.
3. فكِّر الآن بما تريده من المحتوى غير المشترك بين الصفحات لتضعه في موقعك، ودوِّن ذلك في قائمة.
4. حاول تصنيف عناصر المحتوى الذي تختاره في مجموعات لكي تتشكل لديك أفكار عن المجموعات التي يمكن أن تقع في الصفحات نفسها.
5. حاول بعد ذلك وضع خريطة للموقع على هيئة فقاعات لكل صفحة ثم صل بخطوط بينها لتوضيح طبيعة التواصل بينها، إذ ستكون الصفحة الرئيسية في المنتصف وسترتبط بمعظم الصفحات، وينبغي أن ترتبط كل الصفحات في المواقع البسيطة بالصفحة الرئيسية مع وجود بعض الاستثناءات، كما عليك أيضًا تدوين بعض الملاحظات عن كيفية عرض الأشياء، وهذا أمر مشابه لتقنية تُدعى تصنيف البطاقات.

تطبيق: أنشئ خريطة موقع خاصة بك

حاول إنشاء خريطة لموقعك، ما الذي تريده من موقعك؟

ملاحظة: احفظ عملك في مكان مناسب، فقد تحتاج إليه لاحقًا.

خلاصة

من المفترض أنك كوَّنت صورةً واضحةً عن هيكلة صفحة أو موقع ويب، وسنناقش في المقال التالي كيف ننقح الأخطاء في HTML.

ترجمة -وبتصرُّف- للمقال Document and website structure.

اقرأ أيضا

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

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

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

قوائم الوصف Description lists

تعلمنا في مقالات سابقة طريقة إنشاء قوائم HTML بسيطة، لكننا لم نذكر النوع الثالث الذي قد نصادفه أحيانًا وهي قوائم الوصف description lists، إذ يُعَدّ الغرض الرئيسي لهذه القوائم هو تعداد مجموعة من العناصر وإدراج وصف لها أيضًا مثل المصطلحات وتعريفاتها أو الأسئلة وأجوبتها، وإليك مثالًا عن مجموعة من المصطلحات وتعريفها:

soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information

تُغلَّف عناصر هذه القائمة داخل عنصر قوائم مختلف وهو <dl>، كما يُغلَّف كل من عناصرها بالعنصر <dt>، في حين يوضَع وصف أو تعريف كل عنصر ضمن العنصر <dd> بعده مباشرةً.

مثال عن قائمة وصف

سنستخدِم قائمة الوصف لتنسيق النص السابق:

<dl>
  <dt>soliloquy</dt>
  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
  <dt>monologue</dt>
  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
  <dt>aside</dt>
  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
</dl>

يعرض المتصفح قائمة الوصف افتراضيًا بحيث ينزاح فيه وصف أو تعريف العنصر قليلًا عن مستوى المصطلح.

تعريفات متعددة لمصطلح واحد

يُسمح في قوائم الوصف وجود أكثر من وصف أو تعريف لمصطلح، وإليك مثالًا:

<dl>
  <dt>aside</dt>
  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
  <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
</dl>

الاقتباسات Quotations

تتيح لغة HTML عناصر للدلالة على الاقتباسات quotations، ويختلف العنصر المُستخدَم لإنشاء اقتباس إذا كنت توصِّف اقتباسًا مأخوذًا من عنصر كتلي Block أو سطري Inline.

الاقتباسات الكتلية

إذا اقتُبس جزء من محتوى عنصر كتلي مثل فقرة نصية أو عدة فقرات أو قائمة من مكان ما، فلا بد من تضمينه داخل العنصر <blockquote> لإظهاره على أساس فقرة وإضافة عنوان URL إلى مصدر الاقتباس بواسطة السمة cite، ويعرض المثال التالي محتوًى مأخوذًا من صفحة العنصر <blockquote> على شبكة مطورِي موزيللا MDN:

<p>
  The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
  <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an
  extended quotation.
</p>

علينا كتابة ما يلي لتحويل هذا المحتوى إلى اقتباس عن عنصر كتلي:

<p>Here is a blockquote:</p>
<blockquote
  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote">
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

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

الاقتباس السطري

يعمل بطريقة مماثلة للاقتباس عن عنصر كتلي إلا أنه يستخدِم العنصر <q>، إذ يعرض المثال التالي محتوًى مأخوذًا من صفحة العنصر <q> على شبكة مطورِي موزيللا وحوّلناه إلى اقتباس سطري:

<p>
  The quote element — <code>&lt;q&gt;</code> — is
  <q
    cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q">
    intended for short quotations that don't require paragraph breaks.
  </q>
</p>

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

الاقتباسات المرجعية Citations

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

<p>
  According to the
  <a href="/en-US/docs/Web/HTML/Reference/Elements/blockquote">
    <cite>MDN blockquote page</cite></a>:
</p>

<blockquote
  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote">
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

<p>
  The quote element — <code>&lt;q&gt;</code> — is
  <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q">
    intended for short quotations that don't require paragraph breaks.
  </q>
  — <a href="/en-US/docs/Web/HTML/Reference/Elements/q"><cite>MDN q page</cite></a>.
</p>

تُعرَض الاقتباسات المرجعية افتراضيًا بخط مائل.

الاختصارات

تُعَدّ الاختصارات Abbreviations عناصر شائعة الاستخدام نوعًا ما في ويب وتميزها بالوسم <abbr>، إذ تستخدَم للدلالة على اختصارات لمصطلحات أو نحوت من عدة كلمات، فالنحت هو الأخذ بأوائل الحروف في كلمات جملة، كما تعطي الاختصارات وصفًا للمصطلح عند تمرير مؤشر الفأرة فوقه عند استخدام السمة title.

مثال عن الاختصارات

لنلق نظرةً على المثال التالي:

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>

ستكون النتيجة مشابهةً للتالي:

ملاحظة: دعمَت النسخ الأولى من HTML العنصر <acronym>، لكنه حُذِف ليحل محله <abbr> الذي يُستخدَم للدلالة على الاختصارات والنحوت معًا.

الدلالة على معلومات التواصل

يُستخدَم العنصر <address> في لغة HTML لإدراج معلومات التواصل مع مسؤول الصفحة أو الموقع، إليك مثالًا كما يلي:

<address>
  Chris Mills, Manchester, The Grim North, UK
</address>

يمكن احتواء العنصر على عناصر أخرى أو نموذج للتواصل لإدراج معلومات أكثر، وإليك مثالًا كما يلي:

<address>
  <p>
    Chris Mills<br>
    Manchester<br>
    The Grim North<br>
    UK
  </p>

  <ul>
    <li>Tel: 01234 567 890</li>
    <li>Email: me@grim-north.co.uk</li>
  </ul>
</address>

يمكنك تنظيم المعلومات ضمن العنصر <address> بالصورة التالية أيضًا:

<address>
  Page written by <a href="../authors/chris-mills/">Chris Mills</a>.
</address>

ملاحظة: يجب ألا يستخدَم العنصر <address> سوى لإدراج معلومات التواصل في الصفحة أسفل أقرب عنصر مقال <article> أو أسفل جسم الصفحة <body>، ومن الصحيح أيضًا وضعه في تذييل الصفحة لتُعرض معلومات التواصل في جميع صفحات الموقع، أو داخل عنصر المقال لعرض معلومات التواصل مع مؤلفه، لكن لا تستخدِمه لإدراج قائمة من العناوين التي لا تتعلق بمحتوى الصفحة.

إزاحة الكتابة أعلى النسق أو أسفله

نحتاج أحيانًا إلى رفع بعض الاحرف إلى أعلى نسق الكتابة أو أسفلها عندما نتعامل مع تواريخ مثلًا أو صيغ المواد الكيميائية أو المعادلات الرياضية لكي تشير إلى المعنى الحقيقي، إذ يُستخدم العنصران <sup> و <sub> لإنجاز الأمر، وإليك مثالًا كما يلي:

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

سيعرِض المتصفح النتيجة على الصورة التالية:

إدراج شيفرة برمجية

تقدِّم HTML مجموعةً من العناصر لعرض الشيفرات البرمجية بطريقة مميزة:

• العنصر <code>: للدلالة على أن المحتوى هو مقتطفات من شيفرة برمجية.
• العنصر <pre>: الذي يُبقي على المسافات الفارغة الزائدة في المحتوى والتي قد تكون إزاحةً للشيفرة، إذ يتجاهل المتصفح المسافات الفارغة الزائدة في النصوص العادية، لكن عند تغليف النص داخل هذا العنصر، فسيعرضه المتصفح كما هو تمامًا دون إهمال أيّ شيء.
• العنصر <var>: ويستخدَم للدلالة على المتغيرات على وجه الخصوص.
• العنصر <kbd>: ويستخدَم للدلالة على مدخلات لوحة المفاتيح أو غيرها من المدخلات إلى الحاسوب.
• العنصر <samp>: ويستخدَم للدلالة على خرج برنامج حاسوبي.

لنلق نظرةً على بعض الأمثلة، كما عليك التجريب بنفسك، ولهذا ننصح بتنزيل نسخة من الملف other-semantics.html.

<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>You shouldn't use presentational elements like <code><font></code> and <code><center></code>.</p>

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>

<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

ستُعرض الشيفرة السابقة في المتصفح كما يلي:

الدلالة على الوقت والتاريخ

تقدِّم لغة HTML العنصر <time> لتوصيف الوقت والتاريخ بطريقة يمكن للآلة قراءتها، وإليك مثالًا كما يلي:

<time datetime="2016-01-20">20 January 2016</time>

ما الفائدة من هذا العنصر؟ يستخدِم البشر طرقًا مختلفةً لكتابة التاريخ، فقد يُكتب التاريخ في المثال السابق على الصورة:

• 20 January 2016
• 20th January 2016
• Jan 20 2016
• 20/01/16
• 01/20/16
• The 20th of next month
• 20e Janvier 2016
• 20 كانون الثاني 2016
• وغير ذلك.

لكن لا تستطيع الحواسب التمييز بسهولة بين طرق الكتابة تلك، فماذا إذا أردت الحصول تلقائيًا على تواريخ جميع المناسبات في صفحة ويب وإضافتها إلى التقويم الخاص بك؟ لهذا السبب، يُستخدَم العنصر <time> لإضافة تنسيق للوقت والتاريخ، بحيث يكون مفهومًا بالنسبة إلى الحواسيب وغيرها من الآلات، كما يعرض لك المثال السابق تاريخًا بسيطًا يمكن للآلة فهمه، لكن هناك خيارات عدة أخرى، وإليك بعض الأمثلة:

<!-- تاريخ بسيط بصيغة معيارية -->
<time datetime="2016-01-20">20 January 2016</time>
<!--فقط السنة و الشهر-->
<time datetime="2016-01">January 2016</time>
<!-- فقط الشهر و اليوم -->
<time datetime="01-20">20 January</time>
<!-- الوقت فقط، ساعات ودقائق -->
<time datetime="19:30">19:30</time>
<!-- يمكنك إضافة الثواني وأجزاء الثواني -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- الوقت والتاريخ -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- الوقت والتاريخ مع إزاحة زمنية حسب خطوط الزمن-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- استدعاء أسبوع محدَّد من السنة وفق رقمه -->
<time datetime="2016-W04">The fourth week of 2016</time>

خلاصة

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

ترجمة -وبتصرف- للمقال Advanced text formatting.

اقرأ أيضًا

• HTML و CSS للمبتدئين: مقدمة إلى تنسيقات CSS
• تنسيق نصوص صفحات الويب باستخدام CSS
• تنسيق النصوص وتحليلها في PHP
• كيفية تنسيق النصوص في بايثون 3

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

ما هو الرابط التشعبي؟

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

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

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

تشريح الرابط التشعبي

ننشئ الرابط بأبسط أشكاله بتغليف نص أو محتوى معيَّن داخل العنصر <a>، ثم نستخدِم السمة href التي تُعرَف أيضًا باسم مرجع النص التشعبي أو الهدف، والتي تحتوي على العنوان الوجهة.

<p>سينقلك هذا الرابط إلى
<a href="https://academy.hsoub.com">أكاديمية حسوب</a>.
</p>

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

إضافة معلومات داعمة من خلال السمة title

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

<p>سينقلك هذا الرابط إلى 
<a href="https://www.mozilla.org/en-US/"
   title="أكاديمية حسوب هو موقع تعليمي عربي يهدف إلى توجيه المهتمين العرب بمجال البرمجة و التقنية إلى 
مادة علمية صحيحة و باللغة العربية" >أكاديمية حسوب</a>.
</p>

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

تطبيق: إنشاء رابط خاص بك

أنشئ ملف HTML باستخدام القالب الذي نزّلته في مقال تعرف على لغة HTML ومحرِّر الشيفرة على حاسوبك، ثم نفّذ التعديلات التالية:

1. أضف فقرةً نصيةً <p> أو أكثر داخل العنصر <body>، أو غير ذلك من العناصر التي تعلمتها.
2. حوّل أجزاءً من المحتوى إلى روابط.
3. أضف عناوين إلى هذه الروابط باستخدام السمة title.

تحويل العناصر البنائية إلى روابط

يمكن تحويل كما ذكرنا سابقًا أيّة عناصر إلى روابط حتى العناصر البنائية Block elements، فإذا أردت مثلًا تحويل صورة إلى رابط، فاستخدم العنصر <a> ثم العنصر <img> للدلالة على الصورة.

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>

جولة سريعة على عناوين URL والمسارات

ستحتاج إلى استيعاب عناوين URL ومسارات الملفات لكي تفهم تمامًا وجهة الروابط التشعبية، وهذا ما سنفعله في هذه الفقرة.

يُعَدّ محدد موقع المورد Uniform Resource Locator أو URL اختصارًا- سلسلةً نصيةً تُحدِّد مكان تواجد غرض ما على ويب، فالصفحة الرئيسية لموقع حسوب موجودة على العنوان https://www.hsoub.com، إذ تستخدِم عناوين URL المسارات لإيجاد الملفات، في حين تحدد المسارات الموقع الذي يوجد فيه الملف ضمن نظام الملفات، ولنلق نظرةً على هيكلية مجلد:

يُدعى المجلد الجذري creating-hyperlinks.

سيقع الموقع بأكمله ضمن مجلد واحد عندما نعمل محليًا على موقع ويب، إذ ستجد ضمن المجلد الجذري الملفَين index.html و contacts.html، بحيث سيمثل الملف index.html في موقع الويب الحقيقي الصفحة الرئيسية أو صفحة الهبوط، أي الصفحة التي تُعَدّ نقطة البداية لموقع ويب أو لقسم محدد منه.

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

• ملفات في المجلد نفسه: إذا أردت وضع رابط ضمن index.html الأول -أي الأعلى مستوى- يشير إلى الملف contacts.html، فضع اسم هذا الملف فقط لأن كلاهما يعود إلى المستوى نفسه ضمن نظام ترتيب الملفات، وسيكون عنوان URL المستخدم هو contacts.html:

<p>Want to contact a specific staff member?
Find details on our <a href="contacts.html">contacts page</a>.</p>

• ملفات في مجلدات فرعية: إذا أردت وضع رابط ضمن index.html الأول -أي الأعلى مستوى- يشير إلى الملف projects/index.html، فعليك الانتقال أولًا إلى المجلد projects ثم الإشارة إلى الملف الذي تريد إنشاء رابط إليه، ويكون ذلك بتحديد اسم المجلد يليه المحرف / ثم اسم الملف، وسيكون عنوان URL الصحيح في هذه الحالة هو projects/index.html:

<p>Visit my <a href="projects/index.html">project homepage</a>.</p>

• ملفات في المجلدات الآباء: إذا أردت وضع رابط ضمن الملف projects/index.html يشير إلى الملف pdfs/project-brief.pdf، فعليك الانتقال إلى المستوى الأعلى مباشرةً ثم الانتقال ثانيةً إلى داخل المجلد pdfs، واستخدم نقطتين متتاليتين .. للانتقال إلى مستوى واحد أعلى، وسيكون العنوان الصحيح هو pdfs/project-brief.pdf/..:

<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

ملاحظة: يمكنك الدمج بين الطرق السابقة لكتابة عناوين URL مركّبة عند الحاجة مثل:

../../../complex/path/to/my/file.html

الانتقال إلى قسم من صفحة HTML

يمكن أن تستهدف من خلال الرابط التشعبي جزءًا محددًا من صفحة HTML -أو ما يعرف بتجزئة الصفحة document fragment- بدلًا من الانتقال إلى أعلى الصفحة، ولإنجاز الأمر لا بد من استخدام السمة id في العنصر الذي ستنتقل إليه في الصفحة المستهدَفة، ومن المنطقي أن تنشئ رابطًا إلى عنصر عنوان مثلًا، إذ سيبدو ذلك قريبًا من التالي:

<h2 id="Mailing_address">Mailing address</h2>

نضع بعد ذلك قيمة id للعنصر الذي سننتقل إليه في نهاية عنوان URL للصفحة المستهدَفة مسبوقًا بالمحرف #:

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

يمكن أيضًا استخدام الأسلوب ذاته في الانتقال إلى جزء مختلف من الصفحة نفسها:

<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

عناوين URL المطلقة والنسبية

ستصادف أثناء تجوالك في ويب مصطلحَي عنوان URL مطلق absolute URL وعنوان URL نسبي relative URL.

عنوان URL مطلق

يشير إلى موقع محَّدد عن طريق مساره المطلق أو الكامل بما في ذلك الجزء الذي يحدد البروتوكول واسم النطاق. فلو كان الملف index.html ضمن المجلد projects الموجود ضمن المجلد الجذري لموقع ويب التالي:

https://www.example.com

فسيكون العنوان المطلق إلى هذا الملف هو:

https://www.example.com/projects/index.html

أو يمكن أن يُكتب فقط على الصورة التالية:

https://www.example.com/projects/

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

عنوان URL نسبي

يشير العنوان النسبي إلى موقع ملف بالنسبة إلى الملف الذي تنوي ربطه به، فإذا أردت الربط بين الملف الذي رابطه:

https://www.example.com/projects/index.html

والملف project-brief.pdf الذي يقع في المجلد نفسه، فسيكون العنوان النسبي هو اسم الملف الهدف كما هو، في حين إذا كان هذا الملف في مجلد فرعي يُدعى pdfs ضمن المجلد نفسه project، فسيكون العنوان النسبي له pdfs/project-brief.pdf، ولاحظ أن المسار المطلق لنفس الملف هو:

https://www.example.com/projects/pdfs/project-brief.pdf

كما تشير العناوين النسبية إلى مواقع مختلفة تبعًا لموقع الملف الذي سيرتبط بها، فإذا نقلت الملف index.html في مثالنا السابق إلى المجلد الجذري، فسيشير عنوان URL النسبي pdfs/project-brief.pdf إلى الملف الموجود على العنوان التالي:

https://www.example.com/pdfs/project-brief.pdf

وليس إلى الملف الموجود على العنوان التالي:

https://www.example.com/projects/pdfs/project-brief.pdf

لم يتغير بالطبع موقع الملف project-brief.pdf ولا موقع المجلد pdfs عندما نقلنا الملف index.html، لكن كل ما هنالك أنّ العنوان النسبي سيشير في هذه الحالة إلى المكان الخاطئ ولن يعمل الرابط عند النقر عليه، فعليك الحذر إذًا.

أفضل الممارسات لإنشاء الروابط التشعبية

توجد بعض الممارسات الممتازة التي يجدر بك تعلمها لكتابة روابط تشعبية جيدة، لنلق نظرةً عليها.

استخدم كلمات واضحة تدل على الرابط

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

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

الرابط التالي جيد مثلًا:

<p><a href="https://firefox.com/">
  Download Firefox
</a></p>

أما هذا، فسيّئ:

<p><a href="https://firefox.com/">
  Click here
</a>
to download Firefox</p>

تلميحات أخرى:

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

الارتباط بمورد مختلف عن صفحات HTML

عند الارتباط بمورد قابل للتنزيل مثل ملف PDF أو وورد، أو بمورد يُتابع مباشرةً مثل ملفات الفيديو والصوت، أو قد يُظهر تأثيرات غير متوقعة مثل فتح نافذة منبثقة أو تحميل مقطع فلاش، فلا بد في هذه الحالات من اختيار كلمات مناسبة للرابط منعًا لأيّ التباس، وإليك بعض الأمثلة:

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

لنلق نظرةً على أمثلة لنصوص يمكن استخدامها في هذه الحالات:

<p><a href="https://www.example.com/large-report.pdf">
(PDF ، 10MB) حمل تقرير المبيعات
</a></p>

<p><a href="https://www.example.com/video-stream/" target="_blank">
(HD سيُعرض في نافذة منفصل وبدقة)‎ شاهد الفيديو
</a></p>
<p><a href="https://www.example.com/car-game">
(يتطلب مشغل فلاش‎) ‎‎شغِّل لعبة السيارة‎
</a></p>

استخدم السمة download عندما ترتبط بمورد لتنزيله

يمكن استخدام السمة download عندما تحاول إنشاء رابط إلى مورد لكي يُنزَّل بدلًا من أن يُفتَح في المتصفح، وذلك لكي تزوّد المستخدِم باسم لحفظ الملف، وإليك مثالًا عن رابط لتحميل آخر إصدارات فايرفوكس لنظام التشغيل ويندوز:

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
   download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

تطبيق: إنشاء قائمة للتنقل

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

عليك تخزين نسخ من الملفات التالية على حاسوبك وفي المجلد نفسه، كما يمكنك الحصول على جميع هذه الملفات من مستودع جيت-هاب المخصص للتمرين:

• index.html.
• projects.html.
• pictures.html.
• social.html.

عليك:

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

سيبدو الحل عندما تنتهي منه قريبًا من الصفحة التالية:

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

روابط البريد الإلكتروني

من الممكن إنشاء روابط أو أزرار تَفتح عند النقر عليها نموذجًا أو تطبيقًا لكتابة رسالة بريد إلكتروني بدلًا من الانتقال إلى مورد معين. يُستخدم العنصر <a> لهذه الغاية بالإضافة إلى بروتوكول mailto:‎، إذ يشير البروتوكول :mailto في أكثر الحالات بساطةً وشيوعًا إلى عنوان البريد الإلكتروني للمستقبِل:

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

يُعَدّ عنوان البريد الإلكتروني اختياريًا في واقع الأمر، فإذا أزلت العنوان وأبقيت على البروتوكول :mailto فقط، فستظهر لك نافذة عميل البريد الإلكتروني المثبت على جهازك لإنشاء بريد إلكتروني جديد دون تحديد المستقبِل، ولهذه الميزة فوائدها في روابط المشاركة Share التي يمكن للمستخدِمين النقر عليها لإرسال بريد إلكتروني إلى عناوين من اختيارهم.

تحديد بعض التفاصيل

يمكن إضافة معلومات أخرى إلى عنوان البريد الإلكتروني، إذ يمكن إضافة أية حقول مستخدَمة في ترويسة البريد الإلكتروني إلى :mailto، وأكثر هذه المعلومات شيوعًا هي الموضوع Subject ونسخة إلى cc وجسم الرسالة body الذي لا يمثل حقلًا فعليًا لنص الرسالة، لكن بالإمكان استخدامه لكتابة محتوى قصير للرسالة، كما يُحدَّد كل حقل مع قيمته بأسلوب الاستعلام، وإليك مثالًا كما يلي:

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

ملاحظة: ينبغي أن تكون القيم في كل حقل مكتوبةً وفق ترميز عنوان URL، أي دون محارف لا تطبع شيئًا مثل محارف السطر الجديد والجدولة ودون فراغات، ولاحظ أيضًا استخدام إشارة الاستفهام ? في الفصل بين عنوان URL الرئيسي عن قيم الحقول والمحرف & للفصل بين الحقول، إذ تُعَدّ هذه الرموز رموزًا معياريةً لاستعلام URL، وإليك بعض الأمثلة عن عناوين :mailto بسيطة أخرى:

mailto:
mailto:nowhere@mozilla.org
mailto:nowhere@mozilla.org,nobody@mozilla.org
mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject

خلاصة

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

ترجمة -وبتصرف- للمقال Creating hyperlinks.

اقرأ أيضًا

• مفهوم الروابط التشعبية في مواقع الويب
• كيفية إنشاء الارتباطات التشعبية (Hyperlinks) والإجراءات (Actions) في Microsoft PowerPoint
• ترويسة الصفحة والبيانات الوصفية في HTML

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

لا بدّ قبل الشروع في القراءة من الاطلاع على أساسيات لغة HTML التي يغطيها المقال تعرَّف على لغة HTML

التعامل مع الأساسيات: العناوين الرئيسية والفقرات

تتكون معظم النصوص المهيكلة من عناوين وفقرات سواء أكان النص قصة أو صحيفة أو كتاب جامعي أو مجلة.

تسهل النصوص المهيكلة تجربة القراءة وتزيد المتعة، وتُنظَّم النصوص ضمن فقرات في لغة HTML بتغليف النص داخل عنصر الفقرة النصية <p> كما يلي:

<p>أكتب حاليًا فقرة نصية</p>

بينما لا بد من استخدام عنصر عنوان مثل العنوان الرئيسي <h1> لإبراز النص على أساس عنوان للمحتوى الذي تعرضه الصفحة:

<h1>هذا عنوان المقال</h1>

تقدّم لغة HTML ستة مستويات للعناوين ابتداءً من الأعلى مستوى <h1> وانتهاءً بالأدنى<h6>، إذ يمثِّل العنصر <h1> العنوان الرئيسي ويمثِّل <h2> العناوين الفرعية للعنوان الرئيسي و<h3> العناوين الفرعية للعناوين الفرعية وهكذا، انظر توثيقها -العناصر h1-h6- في موسوعة حسوب.

إنجاز الهيكلية المتدرجة لمحتوى صفحة HTML

سنستخدِم في القصة التي نراها تاليًا العنصر <h1> ليمثل عنوان القصة و<h2> ليمثل عنوان كل فصل، بينما سيمثل العنصر <h3> الأقسام الفرعية لكل فصل.

<h1>The Crushing Bore</h1>

<p>By Chris Mills</p>

<h2>Chapter 1: The dark night</h2>

<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>

<h2>Chapter 2: The eternal silence</h2>

<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>

<h3>The specter speaks</h3>

<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>

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

• يفضَّل استخدام عنوان رئيسي <h1> واحد في كل صفحة، فهو العنوان ذو المستوى الأعلى وتتدرج تحته بقية العناصر.
• تأكد من استخدام عناصر العناوين بالترتيب الصحيح في الهيكلية المتدرجة للصفحة، فلا تستخدِم مثلًا <h3> ليشير إلى عنوان فرعي ثم تستخدم بعده <h2> ليمثل عنوانًا فرعيًا لعنوان فرعي، فهذا أمر غير منطقي وسيقود إلى نتائج غريبة.
• حاول عدم استخدام أكثر من ثلاثة مستويات في كل صفحة إلا إذا كان الأمر ضروريًا، فقد قَلَّ انتشار المستندات التي تعتمد هيكلية ذات مستويات عميقة نظرًا لصعوبة التنقل بين مستوياتها، ويفضل في حالات مثل هذه توزيع المحتوى ضمن صفحات عدة.

ما فائدة إعطاء الصفحة هيكلية معينة؟

للإجابة على هذا السؤال، دعنا نلقي نظرةً على الملف text-start.html الذي سيكون نقطة انطلاق في تطبيقات هذا المقال (وصفة حمُّص جيدة)، لذلك انسخ هذا الملف وضعه على حاسوبك لأنك ستحتاجه لاحقًا، كما يحتوي جسم المستند محتوًى مكوّنًا من أجزاء مختلفة لم تُنظَّم بعد في هيكلية محددة، لكنها مفصولة عن بعضها بمحارف الأسطر الجديدة، فعندما تفتح الملف عبر المتصفح، فستجد أنّ النص قطعة واحدة كبيرة.

السبب في ذلك هو عدم وجود أيّة عناصر لهيكلة هذا النص، فلن يميّز المتصفح بين العناوين أو الفقرات، بالإضافة إلى ذلك:

• يستعرض الزائر النص بسرعة بحثًا عن المحتوى الأساسي ويكتفي عادةً بقراءة العناوين ليختار نقطة البداية، إذ يقضي المستخدِم عادةً فترةً قصيرةً جدًا ضمن صفحة الويب، فإذا لم يستطع الزائر إيجاد أيّ شيء واضح أو مفيد خلال ثوان معدودة، فعلى الغالب سيتوقف عن القراءة ويغادر الصفحة.
• تفهرِس محركات البحث الصفحات آخذةً بالحسبان محتوى العناوين على أنها كلمات مفتاحية مهمة تؤثِّر على ترتيب نتائج البحث، فدون العناوين إذًا لن تُعَدّ صفحتك جيدةً وفق معايير السيو SEO أو تحسين محركات البحث Search Engine Optimization.
• لا يقرأ الزوار ذوو المشاكل البصرية الحادة صفحات ويب بأنفسهم، وإنما يستمعون إلى محتواها عن طريق برمجيات تُدعى قارئات الشاشة، إذ تتيح هذه البرمجيات الوصول السريع إلى محتوى نصي محدد، وتجري هذه العملية بطرق عدة منها تحديد خطوط عريضة للمحتوى بقراءة العناوين، مما يسمح للمستخدِم بإيجاد المعلومات التي يريدها بسرعة، فإذا لم تكن العناوين موجودةً، فسيضطر المستخدِم إلى الاستماع إلى النص بأكمله.
• إذا أردت تنسيق الصفحة باستخدام CSS أو جعلها تفاعليةً أكثر عن طريق جافاسكربت، فلا بد من تغليف المحتوى المطلوب بواسطة عناصر HTML لكي تستهدفه شيفرات CSS أو جافاسكربت بفعالية أكبر.

لهذه الأسباب وغيرها سنحتاج إلى هيكلة محتوى الصفحة.

لماذا نحتاج إلى الدلالات؟

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

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

<h1>This is a top level heading</h1>

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

<span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?</span>

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

القوائم

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

القوائم غير المرتبة

تستخدَم القوائم غير المرتبة Unordered list لوصف مجموعة عناصر لا أولوية لترتيبها ضمن القائمة، ومن الأمثلة عليها قائمة التسوق:

milk
eggs
bread
hummus

تبدأ القائمة غير المرتبة بالعنصر <ul> الذي يغلف جميع العناصر:

<ul>
milk
eggs
bread
hummus
</ul>

وينبغي أن نغلف عناصر القائمة بالعنصر <li>:

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

القوائم المرتبة

تستخدَم القوائم المرتبة ordered list لوصف مجموعة عناصر ينبغي ترتيبها ضمن القائمة، ومن الأمثلة عليها الاتجاهات التي يجب أن تسلكها لتصل إلى مكان معيَّن:

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

توصَّف القائمة المرتبة بأسلوب القوائم غير المرتبة نفسه باستثناء العنصر المستخدَم في تغليف العناصر الذي سيكون في هذه الحالة <ol> بدلًا من <ul>:

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

القوائم المتداخلة

من الممكن جدًا أن تتداخل القوائم، فقد تحتاج إلى قائمة فرعية تحت أحد عناصر قائمة أخرى، ولنأخذ القائمة الثانية من مثال وصفة الطعام:

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
  <li>If you want a smooth hummus, process it for a longer time.</li>
</ol>

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

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.
    <ul>
      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
      <li>If you want a smooth hummus, process it for a longer time.</li>
    </ul>
  </li>
</ol>

عُد إلى التطبيق السابق وحاول تعديل القائمة الثانية كما فعلنا هنا.

إبراز النص والإشارة إلى أهميته

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

إبراز محتوى

عندما نريد إبراز أو تفخيم عبارة في الكلام المحكي نشدِّد على كلمات محدَّدة لكي نغيّر عمدًا دلالة ما نقول، وهذا ما نفعله أيضًا أثناء الكتابة، إذ نميل إلى التشديد على الكلمات بكتابتها على نحو مائل، وتحمل الجملتين التاليتين على سبيل المثال دلالتين مختلفتين:

• سعيد لأنك لم تتأخر
• سعيد لأنك لم تتاخر

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

نستخدِم في HTML العنصر <em> لتوصيف حالات مثل هذه وزيادة المتعة أثناء قراءة النص، كما تُميِّز قارئات الشاشة هذه العناصر وتنطقها بنبرة صوتية مختلفة، وتعرض المتصفحات محتوى هذا العنصر بخط مائل افتراضيًا، لكن انتبه إلى استخدام العنصر لمجرد عرض النص مائلًا، وعليك عندها استخدام العنصر <i> أو أن تطبق تنسيق CSS مع عنصر بصنف محدد.

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

إظهار أهمية محتوى

لإبراز أهمية بعض الكلمات، فإننا نشدِّد عليها عند لفظها أو نكتبها بخط ثخين Bold مثل هذا السائل عالي السميّة.

نستخدِم في HTML العنصر <strong> لإظهار أهمية الكلمات، إذ يعرض المتصفح محتوى هذا العنصر بخط ثخين افتراضيًا، كما تميزه قارئات الشاشة وتنطقها بنبرة صوتية مختلفة، ولا تحاول أيضًا استخدام العنصر لمجرد عرضه بخط ثخين، وعليك عندها استخدام العنصر <b> أو تطبيق تنسيق CSS مع عنصر بصنف محدد.

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

يمكنك أيضًا المزج بين العنصرين <strong> و <em>.

<p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <em>die</em></strong>.</p>

خط مائل أو ثخين أو تحته سطر

تتميز العناصر التي تحدثنا عنها سابقًا بدلالات معنوية محددة، لكن حالة العناصر <b> و <i> و <u> أعقد قليلًا، فقد وضعت هذه العناصر كي يكتب الأشخاص كلمات محددة بخط ثخين أو مائل أو ليظهر تحتها سطر، وذلك في حقبة لم تكن تنسيقات CSS مدعومة أو كانت محدودة الدعم، إذ تؤثر هذه العناصر على طريقة العرض وليس على الدلالة، وتُعرف حاليًا بعناصر العرض presentational elements، كما لا ينبغي استخدام هذه العناصر حاليًا لأنها غير دلالية، وقد رأينا أهمية الدلالات على أصعدة مختلفة مثل سهولة الوصول accessibility وتحسين محركات البحث أو سيو SEO.

أعادت HTML5 تعريف هذه العناصر مانحةً إياها دلالات قد تبدو مربكةً نوعًا ما، وإليك قاعدة مهمة جدًا: قد يكون استخدام العناصر <b> أو <i> أو <u> ملائمًا لإيصال معنى محدد يمكن إيصاله تقليديًا بإمالة الخط أو تثخينه أو وضع سطر تحته إذا لم توجد عناصر أخرى مناسبة، لكن عليك أن تبقي في حساباتك مفهوم سهولة الوصول أو الشمولية accessibility، فليس استخدام الخط المائل في غير سياقه مفيدًا لمستخدمِي قارئات الشاشة أو للأشخاص الذين يستخدِمون أبجديات مختلفة عن اللاتينية.

• <i>: يُستخدَم لإيصال معنى يمكن إيصاله تقليديًا بخط مائل مثل كلمات أجنبية، مرادفات، تصميم، مصطلحات تقنية، أفكار…
• <b>: يُستخدَم لإيصال معنى يمكن إيصاله تقليديًا بخط ثخين مثل كلمات مفتاحية، أسماء منتجات، جملة افتتاحية..
• <u>: يُستخدَم لإيصال معنى يمكن إيصاله تقليديًا بخط تحته سطر مثل الأخطاء الإملائية والنحوية.

ملاحظة: يربط الناس جدًا بين الكلمات التي تحتها سطر والروابط التشعبية، لذلك يفضَّل في صفحات الويب أن لا تضع سطرًا تحت محتوى ما لم يكن رابطًا، واستخدم <u> عندما تجد أنّ دلالته صحيحة، وفكّر دائمًا باستخدام CSS لتغيير المحتوى الذي تحته سطر إلى شكل أكثر ملاءمةً لويب، كما يشرح المثال التالي ما يمكن فعله:

<!-- مصطلحات علمية -->
<p>
  الطنان ياقوتي الحنجري (<i>Archilochus colubris</i>)
  هو الطنان الأكثر انتشارًا في أمريكا الشمالية.
</p>

<!-- كلمات أجنبية -->
<p>
  كانت القائمة بحرًا من الكلمات الغريبة <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> و <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- أخطاء إملائية غير معروفة -->
<p>
  Someday I'll learn how to <u style="text-decoration-line: underline; text-decoration-style: wavy;">spel</u> better.
</p>

<!-- تظليل كلمات عند عرض إرشادات -->
<ol>
  <li>
    <b>شرِّح</b> قطعتين من الخبز
  </li>
  <li>
    <b>أدخل</b> شريحة طماطم وورقة خس بين شريحتي الخبز
  </li>
</ol>

خلاصة

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

ترجمة -وبتصرف- للمقال HTML text fundamentals.

اقرأ أيضًا

• هيكلة وتوزيع محتوى صفحات الويب
• HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك
• ترويسة الصفحة والبيانات الوصفية في HTML

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

لا بد قبل متابعة القراءة أن تطلع على أساسيات HTML التي ذكرناها في مقال تعرّف على لغة HTML.

ما هي ترويسة صفحة HTML

لنراجع صفحة HTML البسيطة التي عرضناها في المقال السابق:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

الترويسة هي محتوى العنصر <head>، ولا تُعرض محتويات الترويسة على خلاف محتوى العنصر <body> الذي يعرضه المتصفح، لأن وظيفتها هي احتواء معلومات وصفية عن الصفحة، كما إنّ محتوى الترويسة في المثال السابق قليل كما نرى:

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

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

إضافة عنوان للصفحة

رأينا سابقًا عمل العنصر <title> والذي يُستخدَم لإضافة عنوان إلى مستند HTML، لكنك قد تخلط بينه وبين العنوان الرئيسي <h1> الذي يُستخدَم في إضافة عنوان رئيسي لمحتوى الصفحة المرئي ضمن العنصر <body>، كما يُدعى العنصر <h1> أحيانًا باسم عنوان الصفحة، وتتلخص الاختلافات بما يلي:

• يظهر العنصر <h1> على صفحة الويب عند تحميلها ضمن المتصفح، ومن المفترض أن يُستخدَم مرةً واحدةً في الإشارة إلى العنوان الرئيسي لمحتوى الصفحة، أي عنوان قصة أو عنوان رئيسي لنشرة إخبارية وغير ذلك.
• يُعَدّ العنصر <title> عنصرًا وصفيًا يمثل عنوان مستند HTML برمته وليس عنوان المحتوى المرئي للصفحة.

تطبيق: تفحص مثال بسيط

لتبدأ العمل عليك تنزيل نسخة عن الملف "title-example.html" من المستودع المخصص على جيت-هاب بإحدى الطريقتين التاليتين:

1. انسخ محتوى الملف ثم الصقه ضمن ملف نصي جديد باستخدام محرِّر النصوص المتوفر لديك، ثم احفظه في مكان مناسب.
2. اضغط الزر "Raw" في صفحة جيت-هاب لتظهر الشيفرة (ربما في نافذة جديدة للمتصفح)، ثم اختر ملف File ثم حفظ الصفحة باسم Save Page As، واختر بعد ذلك مكانًا مناسبًا لتخزين الملف.

افتح بعد ذلك الملف باستخدام المتصفح وسيبدو بالصورة التالية:

من الواضح الآن أين سيظهر عنوان الصفحة <h1> وعنوان المستند <title>.

جرب بعدها أيضًا فتح الشيفرة ضمن المحرِّر النصي وتعديل محتوى هذين العنصرين، ثم حدّث المحتوى المعروض ضمن المتصفح.

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

عنصر البيانات الوصفية

تعتمد HTML طريقةً رسميةً في إضافة البيانات الوصفية metadata إلى المستند من خلال العنصر <meta>، كما يمكن أن تُعدَّ بقية الأمور التي نتحدث عنها في هذا المقال بيانات وصفية أيضًا، فهنالك أنواع عديدة للبيانات الوصفية تُضاف إلى جانب <meta> داخل ترويسة الصفحة <head>، لكننا لن نشرحها في هذه المرحلة لأنها ستربكك كثيرًا، وبدلًا من ذلك سنوضِّح عدة أمور قد تشاهدها كثيرًا وذلك لتأخذ فكرةً عنها.

تحديد مجموعة المحارف المستخدمة في صفحتك

ستجد في مثالنا السابق سطرًا يبدو كما يلي:

<meta charset="utf-8">

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

قد لا تُعرض الصفحة بالصورة الصحيحة إذا استخدمت مجموعة المحارف ISO-8859-1 مثل مجموعة المحارف الخاصة بالأبجدية اللاتينية:

ملاحظة: تصحِّح بعض المتصفحات -مثل كروم- هذه الأخطاء تلقائيًا، لذلك قد لا ترى هذه المشكلة في بعض المتصفحات، ومع ذلك يُفضّل استخدام مجموعة المحارف utf-8 لتلافي أيّ مشاكل محتمَلة في المتصفحات المختلفة.

تطبيق: اختبار مجموعات المحارف

عُد إلى قالب HTML الذي عملنا عليه قبل قليل في فقرة "إضافة عنوان للصفحة"، وحاول تغيير قيمة السمة charset للعنصر <meta> إلى ISO-8859-1 وستدخِل المحارف اليابانية إلى صفحتك:

<p>Japanese example: ご飯が熱い。</p>

إضافة اسم المؤلف ووصف للصفحة

قد يحتوي العنصر <meta> على سمات مثل name و content:

• name: يحدِّد نوع البيانات التي يعرضها العنصر <meta>.
• content: يحدِّد المحتوى الفعلي للعنصر.

تساعدك الصفتين السابقتين على إضافة مؤلف الصفحة وتزودك بوصف مناسب لمحتواها، وإليك مثالًا كما يلي:

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs Learning Area aims to provide complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

يساعدك تحديد اسم المؤلف في نواح عدة منها الحصول على أجوبة عن نقاط في المحتوى أو التواصل معه، كما تتيح بعض أنظمة إدارة المحتوى إمكانية الاستخراج التلقائي لمعلومات مؤلف الصفحة لكي تستخِدمها لاحقًا للاستفسار عن المحتوى أو التواصل، ومن الجيد أيضًا أن تقدِّم وصفًا لصفحتك يضم كلمات مفتاحيةً تتعلق بطبيعة المحتوى الذي تقدمه، فقد يزيد ذلك من فرصة تصدُّر صفحتك لنتائج محركات البحث، إذ يُدعى هذا الأمر تحسين محركات البحث Search Engine Optimization أو SEO اختصارًا.

تطبيق: استخدام وصف الصفحة في محركات البحث

يُستخدَم وصف الصفحة أيضًا في نتائج محركات البحث، وسنوضِّح ذلك من خلال المثال التالي:

1. انتقل إلى الصفحة الرئيسية لموقع حسوب.
2. اعرض الشيفرة المصدرية للصفحة بالنقر عليها بالزر اليميني للفأرة ثم اختر "عرض الشيفرة المصدرية للصفحة View Page Source" من القائمة.
3. ابحث عن البيانات الوصفية التي تحدِّد وصفًا للصفحة، وستبدو لك كما يلي:

<meta name="description" content="في مهمة لتطوير العالم العربي. نعمل لنمكّن الشباب ونفتح مزيدًا من الفرص أمامهم. نحن حسوب.">

4. ابحث الآن عن "حسوب" باستخدام محرك البحث جوجل وستلاحظ كيف استخدم عنوان المستند <title> والبيانات الوصفية <meta> في إظهار نتيجة البحث.

ملاحظة: قد تلاحظ في جوجل صفحات فرعيةً مرتبطةً بنتيجة البحث مرتبةً في قائمة أسفل رابط الصفحة الرئيسية، إذ تُدعى هذه الصفحات باسم الروابط الداخلية siteLink ويمكن إدارتها من خلال الأداة Google's webmaster tools لتبدو نتائج البحث أفضل.

ملاحظة: لم تعُد بعض البيانات الوصفية مستخدَمةً حاليًا مثل الكلمات المفتاحية "keywords":

<meta name="keywords" content="fill, in, your, keywords, here">

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

أنواع أخرى من البيانات الوصفية

قد تصادف في رحلتك ضمن عالم ويب أنواع أخرى من البيانات الوصفية، والكثير من الميزات التي ستراها في مواقع الويب هي ملكية إبداعية خاصة صُمِّمت لتزويد بعض المواقع بمعلومات محددة مثل مواقع التواصل الاجتماعي، فقد طوّرت الفيسبوك مثلًا بروتوكول بيانات وصفية يُدعى Open Graph Data لكي يقدّم بيانات وصفيةً غنيةً عن موقع ما، فإذا اطلعت على الشيفرة المصدرية لموقع "MDN Web Docs"، فستجد التالي:

<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

سيظهر الرابط مزوّدًا بصورة ووصف للموقع عندما تضع رابطًا إلى موقع "MDN Web Docs" على فيسبوك، مما يزيد غنى تجربة المستخدِم:

يستخدِم تويتر بروتوكولًا وصفيًا مماثلًا يُدعى Twitter Cards يقدِّم محتوًى غنيًا عن عنوان URL محدد عندما يُعرض على twitter.com، وإليك مثالًا كما يلي:

<meta name="twitter:title" content="Mozilla Developer Network">

إضافة أيقونات مخصصة إلى صفحتك

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

1. احفظ الأيقونة المطلوبة باللاحقة ico. في المجلد نفسه الذي يحتوي على الصفحة index.html، وقد تدعم بعض المتصفحات لواحق أخرى مثل gif. أو png.، لكن يضمن لك استخدام اللاحقة السابقة العمل على أيّ متصفح رجوعًا إلى إنترنت أكسبلورر 6.
2. أضف السطر التالي إلى ترويسة ملف HTML:

<link rel="icon" href="favicon.ico" type="image/x-icon">

إليك مثالًا عن أيقونة مفضلة إلى جانب علامة مرجعية:

ستجد أيضًا الكثير من أنواع الأيقونات حاليًا، فإذا فتحت الشيفرة المصدرية لموقع "MDN Web Docs"، فستجد التالي:

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
<!-- basic favicon -->
<link rel="icon" href="https://developer.mozilla.org/static/img/favicon32.png">

تستخدَم الأيقونات السابقة لإظهار أيقونات عالية الدقة عندما يُحفظ موقع ويب على الشاشة الرئيسية لجهاز آيباد.

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

ملاحظة: في حال استخدمت سياسة خصوصية المحتوى Content Security Policy أو CSP اختصارًا في موقعك، فستُطبق هذه السياسة على أيقونة المفضلة favico، فإذا لم يُحمّل المتصفح هذه الأيقونة، فتأكد من أنّ التوجيه img-src العائد للترويسة Content-Security-Policy لا يعيق الوصول إلى الأيقونة.

تطبيق تنسيقات CSS وشيفرة جافاسكربت على لغة HTML

تستخدِم معظم المواقع في أيامنا هذه لغة CSS لتحسين مظهر الصفحة وجافاسكربت لإكساب الصفحة قدرات تفاعلية مع المستخدِم مثل مشغلات الفيديو والخرائط والألعاب وغيرها، إذ تُطبَّق هذه الأمور على الصفحات باستخدام العنصر <link> والعنصر <script>:

• <link>: ينبغي وضع هذا العنصر ضمن ترويسة الملف <head> ويمتلك صفتين هما "rel="stylesheet والتي تشير إلى أنّ الرابط سيستخدَم لتنسيق الصفحة، والسمة href التي تحدد مسارًا إلى ملف التنسيق:

<link rel="stylesheet" href="my-css-file.css">

• <script>: ينبغي أن يكون أيضًا ضمن الترويسة، كما ينبغي أن يمتلك السمة src التي تحتوي على مسار ملف جافاسكربت الذي تريد استخدامه، بالإضافة إلى السمة defer التي تدفع بالمتصفح إلى تحميل ملف الشيفرة بعد الانتهاء من تفسير شيفرة لغة HTML، وللأمر أهميته في ضمان تحميل كل عناصر لغة HTML قبل تشغيل شيفرة جافاسكربت، وبالتالي لن تقع أخطاء نتيجة محاولة جافاسكربت الوصول إلى عناصر لغة HTML غير موجودة بعد في الصفحة، وهناك طرق عدة للتحكم بتحميل شيفرة جافاسكربت ضمن الصفحات، لكنه الأسلوب الأكثر فعاليةً واستخدامًا في المتصفحات الحديثة:

<script src="my-js-file.js" defer></script>

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

تطبيق: استخدام لغة CSS ولغة جافاسكربت في صفحتنا

1. لبدء العمل على هذا التطبيق، أحضر نسخًا عن الملفات meta-example.html و script.js و style.css وخزِّنها على حاسوبك في المجلد نفسه، ثم تأكد من حفظها تمامًا بالأسماء واللواحق -أي الامتدادات- السابقة.
2. افتح ملف HTML في المتصفح وفي محرِّر النصوص معًا.
3. أضف العنصر <link> إلى شيفرة HTML لكي تشير إلى ملفَي CSS وجافاسكربت كلًا على حدة كما فعلنا سابقًا.

إذا نجحت في تنفيذ الأمر، فسترى أنّ الأمور قد تغيرت ليعرض المتصفح بعد تحديثه ما يلي:

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

ملاحظة: لو وجدت نفسك تائهًا في هذا التمرين ولم تتمكن من إحضار ملفات CSS وجافاسكربت، فحاول التحقق من الملف css-and-js.html.

ضبط اللغة الرئيسية للصفحة

لابد أخيرًا من الإشارة إلى إمكانية وضرورة تحديد لغة الصفحة، فيمكن إنجاز الأمر من خلال السمة lang للعنصر الجذري <html>:

<html lang="en-US">

للأمر فوائد عدة منها فهرسة موقعك بفعالية من قِبَل محركات البحث، إذ يسمح ذلك بظهور الموقع في النتائج المرتبطة بهذه اللغة مثلًا، كما يساعد ذلك كثيرًا الأشخاص ذوي الإعاقات البصرية الذين يستخدِمون قارئات الشاشة، فالكلمة "six" مثلًا موجودة في الفرنسية والإنكليزية لكنها تلفظ بصورة مختلفة، كما يمكنك أيضًا تحديد أجزاء من صفحتك لتعرض بلغة مختلفة، إذ يمكنك مثلًا اختيار اللغة لقسم فقط من الصفحة كما يلي:

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

ملاحظة: تُحدَّد رموز اللغات بواسطة المعيار ISO 639-1.

خلاصة

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

ترجمة -وبتصرف- للمقال What’s in the head? Metadata in HTML.

اقرأ أيضًا

• HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك
• HTML و CSS للمبتدئين: مقدمة إلى تنسيقات CSS
• خمسة أشياء عليك معرفتها عن HTML5
• مدخل إلى البيانات الوصفية (microdata) في HTML5

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

ما هي لغة HTML؟

لا تمثِّل لغة توصيف النص التشعبي Hypertext Markup Language أو لغة HTML اختصارًا لغة برمجة، وإنما لغةً وصفيةً تساعد المتصفحات على هيكلة صفحات الويب التي تزورها، وقد تكون الصفحات بسيطةً جدًا أو معقدةً جدًا وفقًا لرؤية مطور ويب.

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

My cat is very grumpy

إذا أردت أن يكون المحتوى فقرةً نصيةً مستقلةً بذاتها، فيمكن إحاطتها بوسمَي بداية ونهاية عنصر الفقرة النصية <p>:

<p>My cat is very grumpy</p>

ملاحظة: لا تُعَدّ وسوم لغة HTML حساسةً لحالة الأحرف، أي من الممكن كتابتها بحروف كبيرة أو صغيرة، إذ يمكن كتابة العنصر <title> مثلًا بالصورة <TITLE> أو <Title> أو <TiTlE> وسيعمل، لكن كتابة الوسوم بأحرف صغيرة هي ممارسة تطبيقية جيدة تسهِّل قراءة الشيفرة وتُظهر استمرارية في أسلوب الكتابة.

تشريح عنصر HTML

لنلق نظرةً أعمق على عنصر الفقرة <P>:

يتكوَّن العنصر من:

1. وسم البداية Opening tag: يتكون من اسم العنصر -أي p في حالتنا- محاطًا بقوسَي زاوية، كما يشير هذا الوسم إلى النقطة التي يبدأ عندها العنصر أو التي يبدأ تأثيره عندها (بداية الفقرة النصية في حالتنا).
2. وسم النهاية Closing tag: يشابه وسم البداية لكنه يبدأ بشرطة أمامية / قبل اسم العنصر، ويشير هذا الوسم إلى نهاية العنصر -أي نهاية الفقرة في حالتنا-، ويُعَدّ إغفال وسم النهاية من أكثر الأخطاء التي يرتكبها المبتدئون وقد تفضي إلى نتائج غريبة بالفعل.
3. المحتوى Content: يشير إلى المحتوى الفعلي للعنصر وهو في حالتنا نص فقط.
4. العنصر Element: يتكون من وسمَي البداية والنهاية وبينهما المحتوى.

تطبيق: إنشاء أول عنصر في لغة HTML

استخدم منطقة تحرير الشيفرة Editable code في المحرِّر المضمّن التالي لتغليف السطر المكتوب في تلك المنطقة وذلك بإضافة الوسم <em> قبل السطر والوسم <em/> بعده، إذ سيؤدي ذلك إلى ظهور السطر مكتوبًا بأحرف مائلة، وسترى نتيجة عملك في منطقة الخرج المباشر Live Output"، فإذا ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر إعادة ضبط Reset، في حين إذا وجدت نفسك تائهًا كليًا، فانقر على زر "أظهر الحل Show solution" لترى الحل الصحيح.

عناصر متداخلة

يمكن وضع عناصر داخل عناصر أخرى أيضًا وهذا ما يُعرَف بالتداخل nesting، فإذا أردنا إظهار الكلمة "very" في الفقرة "My cat is very grumpy" بخط سميك، فيمكن تغليف هذه الكلمة داخل العنصر <strong> كما يلي:

<p>My cat is <strong>very</strong> grumpy.</p>

لكن عليك أن تتأكد دومًا من تداخل العناصر بصورة صحيحة، فقد فتحنا في المثال السابق العنصر <p> أولًا ثم <strong>، وبالتالي توجَّب علينا إغلاق العنصر الثاني على الصورة <strong/> ثم إغلاق الأول <p/>، وبالتالي يكون التداخل التالي غير صحيح:

<p>My cat is <strong>very grumpy.</p></strong>

لا بدّ من فتح وإغلاق العناصر بالصورة الصحيحة لكي تظهر بوضوح داخل أو خارج عنصر آخر، فإذا تداخلت بالصورة التي عرضناها في الشيفرة السابقة، فسيحاول المتصفح أن يخمّن بأفضل صورة ما تحاول قوله، مما قد يسبب بظهور نتائج غير متوقعة، فلا تفعل ذلك.

دورة تطوير واجهات المستخدم

ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة

اشترك الآن

العناصر الكتلية والعناصر السطرية

تصنَّف عناصر لغة HTML ضمن مجموعتين مهمتين هما مجموعة العناصر الكتلية Block elements والسطرية inline elements:

• العناصر الكتلية: تشكل كتلةً مرئيةً ضمن الصفحة، كما تظهر في سطر جديد بعد العنصر الذي يسبقها، أي لا يمكن أن يقع على سطر آخر مع عنصر آخر، وسيظهر العنصر الذي يليه في سطر جديد أيضًا، كما تُعَدّ العناصر الكتلية في الصفحة عناصر هيكلة وتنظيم، فقد تمثِّل فقرةً نصيةً أو عناوين أو قوائم تعداد أو قوائم تنقل أو حواشي سفلية، وتجدر الإشارة إلى أنّ العناصر الكتلية لا توضَع ضمن عناصر سطرية لكنها قد تتداخل مع بعضها.
• العناصر السطرية: تقع داخل العناصر الكتلية وتحيط بأجزاء صغيرة من المحتوى، أي جزء من فقرة نصية أو مجموعة من بنود قائمة، ولا تسبب هذه العناصر ظهور سطر جديد في المستند، أي لا تشغل بنفسها السطر بالكامل، كما تُستخدَم هذه العناصر مع النصوص غالبًا، إذ ينشئ العنصر <a> مثلًا رابطًا تشعبيًا، في حين يميِّز العنصران <em> و <strong> أجزاءً من النص.

انظر إلى المثال التالي:

<em>first</em><em>second</em><em>third</em>

<p>fourth</p><p>fifth</p><p>sixth</p>

لاحظ أنّ <em> هو عنصر سطري، وكما ترى في النتيجة، ستقع العناصر الثلاث الأولى على السطر ذاته دون أية فراغات بينها، لكن من ناحية أخرى سيظهر العنصر الكتلي <p> في سطر جديد، بحيث يسبقه فراغ ويليه فراغ، وهذه الفراغات هي نتيجة لتطبيق تنسيق CSS الافتراضي لعنصر الفقرة النصية <p>.

ملاحظات:

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

العناصر الفارغة

لا تتقيد جميع العناصر بالنمط المؤلف من وسم البداية والمحتوى ثم وسم النهاية، إذ لا تحتوي بعض العناصر سوى على وسم بداية وتستخدَم عادةً في إدراج شيء ما في الصفحة، كما يُدرَج العنصر <img> على سبيل المثال على أساس صورة في الصفحة:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

ستكون نتيجة تنفيذ الشيفرة كما يلي:

ملاحظة: تُدعى العناصر الفارغة أحيانًا بالعناصر الخالية void elements ولاحاجةً إلى وضع المحرف / قبل إغلاق الوسم، أي بالشكل <‎img ="cat.jpg" alt="cat" /‎> إلا في حالات خاصة مثل التوافق مع صيغة XML.

السمات في لغة HTML

يمكن أن تحمل عناصر لغة HTML سمات، وتبدو السمات كما يلي:

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

ينبغي أن تُكتب السمة بحيث تراعي ما يلي:

• توجد مسافة فارغة بينها وبين اسم العنصر، كما ينبغي أن تفصل مسافة فارغة بينها وبين السمة التي تليها إذا وجدت.
• تلي اسم السمة إشارة مساواة =.
• توضع قيمة السمة بين إشارتي تنصيص مزدوجتين " ".

تطبيق عملي: إضافة سمات إلى عنصر HTML

يُدعى العنصر <a> بعنصر المربط anchor الذي يحوّل النص الموجود ضمنه إلى رابط تشعبي، كما يمكن أن تحمل المرابط سمات عدة منها:

• href: إن قيمة هذه السمة هي عنوان ويب للرابط التشعبي مثل "href="https://www.mozilla.org.
• title: تستخدَم لإدراج معلومات إضافية عن الرابط مثل وصف الصفحة التي سينقلنا إليها، أي مثل title="The Mozilla homepage"، كما تظهر هذه المعلومات على أساس تلميح فوق الرابط عندما تمرِّر مؤشر الفارة فوقه.
• target: تستخدَم لتحديد طريقة عرض الصفحة التي ينقلنا إليها الرابط مثل "target="_blank، إذ سيعرض لك المتصفح الآن الصفحة في نافذة جديدة، في حين سيعرض المتصفح هذه الصفحة في النافذة نفسها ما لم تستخدم هذه السمة.

سنحاول تحويل السطر الموجود في منطقة تحرير الشيفرة إلى مربط كما يلي:

1. أضف الوسم <a>.
2. أضف الصفتين href و title.
3. حدد طريقة عرض صفحة الرابط من خلال السمة target.

سترى نتيجة عملك في منطقة عرض النتيجة، ومن المفترض أن ترى رابطًا يعرض قيمة السمة titleعندما تمرِّر المؤشر فوقه، وينقلك عند النقر عليه إلى الصفحة التي حددتها في السمة href، وتذكَّر أن تضع مسافة فارغة بين اسم العنصر والسمات.

<a href=https://www.mozilla.org/ title=The Mozilla homepage "target="_blank>favorite website</a>

السمات المنطقية

قد تلاحظ أحيانًا سمات دون قيم، وتُدعى هذه السمات بالسمات المنطقية Boolean، إذ تمتلك هذه السمات قيمةً واحدةً وعادةً ما تكون هذه القيمة مطابقةً لاسم السمة، ونضرب مثلًا على ذلك السمة disabled التي تضاف إلى عنصر الإدخال النصي، بحيث تمنع المستخدِم من الكتابة ضمن مربع النص الذي يبدو رماديًا:

<input type="text" disabled="disabled">

يمكن أن نكتب السمة المنطقية بصيغة مختصرة كما يلي:

<!-- لمنع المستخدم من الكتابة ضمن المربع النصي disabled استخدام السمة -->
<input type="text" disabled>

<!-- لا يضم عنصر الإدخال النصي هذه السمة ويمكن للمستخدم الكتابة ضمنه -->
<input type="text">

تعطيك الشيفرة في فقرة "السمات المنطقية" النتيجة التالية عند تنفيذها:

حذف إشارتي التنصيص المحيطتين بقيمة السمة

ستلاحظ خلال متابعتك لشيفرات العديد من المواقع وجود بعض الأساليب الغريبة في كتابة الشيفرة، منها وجود سمات لا توُضع قيمها بين إشارتَي تنصيص، إذ يُسمح بهذا الأمر في حالات محددة وقد يُضِر شيفرتك في أخرى، كما يمكن مثلًا كتابة السمة href في مثال المربط السابق كما يلي:

<a href=https://www.mozilla.org/>favorite website</a>

لكن ستظهر المشاكل عندما نطبِّق الأمر نفسه على السمة title:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

سيخطئ المتصفح في تفسير المطلوب وسيفهم السمة title على أنها ثلاث سمات الأولى هي title وقيمتها "The" وسِمتان منطقيّتان هما Mozilla و homepage، إذ يسبب هذا الأمر أخطاءً غير متوقعة أو سلوكًا غير متوقع لهذا السبب، يجب أن تضع قيمة السمات ضمن إشارتَي تنصيص دومًا لتجنب مشاكل مثل هذه ولتسهِّل قراءة الشيفرة.

استخدام إشارتي تنصيص مزدوجتين أو مفردتين

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

<a href="https://www.example.com">A link to my example.</a>

<a href='https://www.example.com'>A link to my example.</a>

انتبه إلى عدم المزج بين إشارتَي التنصيص، إذ سيقود المزج الذي سنعرضه في مثالنا التالي إلى أخطاء:

<a href="https://www.example.com'>A link to my example.</a>

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

<--! "" ضع قيمة السمة بين مزدوجتين title لتضع الإشارة ' ضمن قيمة السمة -->
<a href="https://www.example.com" title="Isn't this fun?">A link to my example.</a>

استخدم كيانات HTML لتضع إشارة تنصيص ضمن إشارتَي تنصيص من النوع نفسه -أي مفردة ضمن مفردتين مثلًا-، إذ تُعَدّ الكتابة التالية خاطئةً:

<a href='https://www.example.com' title='Isn't this fun?'>A link to my example.</a>

عليك استخدام كيان HTML الذي يعطي المحرف ' وهو مجموعة المحارف ;apos&:

<a href='https://www.example.com' title='Isn&apos;t this fun?'>A link to my example.</a>

تشريح مستند HTML

لا فائدة كبيرة من عناصر لغة HTML بمفردها، وإنما عليك تعلّم كيفية تنظيمها لتبني صفحة ويب بأكملها:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

إليك الطريقة:

• أولًا: استخدم العنصر:

<!DOCTYPE html>

لقد كانت الغاية من هذا العنصر في الأيام الأولى (1991/1992) أن يعمل على أساس رابط إلى مجموعة من القواعد التي ينبغي أن تحققها صفحة مكتوبة بلغة HTML لكي تُعَدّ صفحةً جيدةً، إذ يبدو هذا العنصر كما يلي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

يُستخدَم حاليًا هذا العنصر في بداية المستند حتى يعمل كل شيء بالطريقة الصحيحة، إذ تمثل الشيفرة

<!DOCTYPE html>

أقل مجموعةً من المحارف كي يكون هذا العنصر صالحًا.

• ثانيًا: استخدم العنصر <html></html> الذي يضم محتوى الصفحة بأكمله، ويعرف أحيانًا بالعنصر الجذري.
• ثالثًا: استخدم العنصر <head></head> الذي يعمل على أساس حاوية لكل ما تريد وضعه في صفحة HTML دون أن يكون جزءًا من المحتوى المعروض للزائر، ويتضمن ذلك الكلمات المفتاحية ووصف الصفحة الذي يظهر في نتائج محركات البحث وملفات تنسيق CSS ومجموعة المحارف الكتابية المستخدَمة وغيرها.
• رابعًا: استخدم العنصر <"meta charset="utf-8> الذي يضبط مجموعة المحارف التي تستخدِمها في الصفحة، وهنا اخترنا المجموعة UTF-8 التي تضم محارف الأغلبية الساحقة من اللغات المكتوبة، إذ تستطيع هذا المحارف أن تعرض الآن أيّ محتوى نصي بأي لغة قد تضعه في صفحتك، ولا مبرر لعدم ضبط مجموعة المحارف المستخدَمة، كما ستساعدك على تحاشي الكثير من الأخطاء لاحقًا.
• خامسًا: استخدم العنصر <title></title> الذي يضبط عنوان صفحتك أعلى المتصفح عند تحميل الصفحة، كما يُستخدَم لوصف الصفحة عندما تضيفها إلى قائمة الصفحات المفضلة.
• سادسًا: استخدم العنصر <body></body> الذي يضم المحتوى الذي تريد عرضه على زائرِي صفحتك بأكمله، سواءً كان نصًا أو صورًا أو فيديو أو ألعاب أو أيّ شيء آخر.

المسافات الفارغة في HTML

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

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

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

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

كيانات لغة HTML: إضافة محارف خاصة

تُعَدّ المحارف < و > و " و ' و & في HTML محارف خاصة لكونها جزءًا من الصياغة القواعدية للغة، فكيف سنتمكن إذًا من إضافة هذه المحارف إلى محتوى العناصر؟ وكيف سنضع مثلًا إشارة "أكبر من" دون أن تؤثر على تفسير الشيفرة؟ يمكن ذلك من خلال مراجع إلى تلك المحارف، والمراجع هي رموز خاصة تمثِّل محرفًا محددًا يمكن استخدامه في هذه الحالة، كما يبدأ كل مرجع بالمحرف & وينتهي بالمحرف ;.

يمكن تذكر المرجع إلى المحرف الخاص بسهولة لأن النص الذي يشير إلى إشارة أصغر مثلًا ;lt& يمكن أن يُفهم من المصطلح الذي أخذ منه أي Less Than، والأمر مشابه لبقية المراجع.

ستجد في المثال التالي فقرتين نصيتين:

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

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

ملاحظة: لا حاجة إلى استخدام مراجع إلى كيانات الرموز الأخرى، لأن المتصفحات الحديثة ستتعامل مع جميع الرموز جيدًا إذا كانت UTF-8 هي مجموعة محارف المستخدَمة في ترميز HTML.

التعليقات في لغة HTML

زوِّدت لغة HTML بآلية لإدراج تعليقات ضمن الشيفرة يتجاهلها المتصفح عند تصيير الصفحة ولا تُعرض للزائر، والغاية من التعليقات هي إضافة ملاحظات إلى الشيفرة بغية شرحها أو توضيح منطق العمل، كما تظهر فائدة التعليقات عندما تضطر إلى العمل على شيفرة أنجزتها قبل فترة من الزمن ولم تَعُد تتذكر تفاصيل العمل بأكمله، كما تظهر أهميتها عندما يعمل على تغيير الشيفرة وتحديثها مجموعة من الأشخاص، ولإدراج تعليق، ضعه ضمن الوسمين <-- و --!> كما في المثال التالي:

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

لاحظ أنّ ما سيعرضه المتصفح هو الفقرة الأولى فقط.

خلاصة

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

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

ترجمة -وبتصرف- للمقال Getting started with HTML.

اقرأ أيضًا

• نحو فهم أعمق لتقنيات HTML5
• مكونات الويب: عناصر HTML المخصصة وقوالبها
• HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك

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

ما هي HTML؟

تُعَدّ HTML بأنها لغة توصيفية تُعرِّف هيكلية المحتوى الذي تقدِّمه الصفحة، وتتألف اللغة من سلسلة من العناصر التي تستخدِمها لتضمين أو تغليف الأجزاء المختلفة من المحتوى لتظهر بطريقة محددة أو لتعمل بطريقة محددة، كما يمكن أن تربط الوسوم المغلقة enclosing tags كلمةً أو صورةً بمكان آخر، أو يمكنها عرض الكلمات عرضًا مائلًا أو تكبّر خط الكتابة أو تصغّره وهكذا، وإليك على سبيل المثال المحتوى التالي الذي لا يتعدى السطر:

My cat is very grumpy

إذا أردنا أن يظهر السطر كما هو، فيمكننا أن نجعله فقرةً نصيةً بتضمينه داخل وسمَي فقرة، أي <p> </p>:

<p>My cat is very grumpy</p>

تشريح عنصر HTML

دعونا نستكشف عنصر الفقرة السابق بصورة أعمق:

إن الأجزاء الرئيسية من العنصر هي:

1. وسم البداية Opening tag: يشير هذا الوسم إلى النقطة التي يبدأ عندها العنصر أو التي يبدأ تأثيره عندها (بداية الفقرة النصية في حالتنا)، ويتكوّن من اسم العنصر (p في حالتنا) محاطًا بقوسَي زاوية.
2. وسم النهاية Closing tag: يشير هذا الوسم إلى نهاية العنصر (نهاية الفقرة في حالتنا)، ويشبه وسم البداية لكنه يبدأ بشرطة أمامية / قبل اسم العنصر، كما يُعَدّ إغفال وسم النهاية من أكثر الأخطاء التي يرتكبها المبتدئون، وقد تفضي إلى نتائج غريبة بالفعل.
3. المحتوى Content: يشير إلى المحتوى الفعلي للعنصر، وهو في حالتنا مجرد نص.
4. العنصر Element: ويتكون من وسمَي البداية والنهاية والمحتوى معًا.

يمكن أن تمتلك العناصر سمات attributes تبدو شبيهةً كما يلي:

تتضمن السمات معلومات إضافية عن العنصر لا تريدها أنت أن تظهر مثل جزء من المحتوى الفعلي، فالكلمة class في الشكل السابق هي اسم السمة وقيمتها هي editor-note، إذ تسمح لك السمة class بإعطاء العنصر معرِّفًا عامًا يمكن استخدامه لتطبيق معلومات تنسيق على هذا العنصر أو أي عنصر تحمل السمة class فيه القيمة نفسها أو غيرها.

لكتابة السمة لا بد من:

1. مسافة فارغة بينها وبين اسم العنصر، أو بينها وبين السمة التي تسبقها في حال امتلك العنصر سمتَين أو أكثر.
2. اسم السمة تليها إشارة المساواة =.
3. قيمة السمة بين إشارتَي تنصيص.

ملاحظة: يمكنك عدم وضع قيمة السمة بين إشارتي تنصيص إذا لم تتضمن رمز ASCII الخاص بالمسافة الفارغة أو أيّ من المحارف " أو ' أو ` أو = أو < أو >، لكن يفضَّل وضع قيمة السمة دائمًا داخل إشارتَي التنصيص لأنها تجعل الشيفرة واضحةً ومفهومةً.

دورة تطوير واجهات المستخدم

ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة

اشترك الآن

العناصر المتداخلة

يمكن وضع عناصر داخل عناصرأخرى أيضًا وهذا ما يُعرف بالتداخل nesting، فإذا أردنا أن تظهر الكلمة "very" في الفقرة "My cat is very grumpy" بخط سميك، فيمكن تغليف هذه الكلمة داخل العنصر <strong></strong> كما يلي:

<p>My cat is <strong>very</strong> grumpy.</p>

لكن عليك التأكد دومًا من أنّ العناصر متداخلة بصورة صحيحة، فقد فتحنا في المثال السابق العنصر <p> أولًا ثم <strong>، وبالتالي توجَّب إغلاق العنصر الثاني آخر من فتح على الشكل <strong/> ثم إغلاق الأول <p/>، أي أنّ التداخل التالي غير صحيح:

<p>My cat is <strong>very grumpy.</p></strong>

لا بد من فتح وإغلاق العناصر بالصورة الصحيحة لكي تظهر بوضوح داخل أو خارج عنصر آخر، فإذا تداخلت بالشكل الذي عرضناه في الشيفرة السابقة، فسيحاول المتصفح أن يخمّن بأفضل شكل ما تحاول قوله، مما قد يتسبب بظهور نتائج غير متوقعة، فلا تفعل ذلك.

العناصر الفارغة

تُدعى بعض العناصر التي لا تحمل أيّ محتوى بالعناصر الفارغة Empty elements مثل العنصر <img> الذي استخدمناه سابقًا:

<img src="images/firefox-icon.png" alt="My test image">

إذ يمتلك العنصر سمتَين ولا يمتلك وسم نهاية <img/> أو محتوى، والسبب أن عنصر الصورة لا يغلِّف محتوًى لكي يتأثر بوجود أو عدم وجود وسم النهاية، فوظيفته هي إدراج صورة في صفحة HTML في المكان الذي يظهر فيه.

تشريح مستند HTML

سنشرح الآن الطريقة التي نجمّع بها عناصر HTML المفردة لنشكِّل صفحةً كاملةً، فلنعُد قليلًا إلى الشيفرة التي وضعناها في الملف index.html والذي رأيناه أول مرة في المقال السابق:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

لدينا هنا الأشياء التالية:

• <DOCTYPE html!>: وهو عنصر تمهيدي مطلوب، فقد كانت الغاية من هذا العنصر في الأيام الأولى (1991/1992) أن يعمل على أساس رابط إلى مجموعة من القواعد التي ينبغي أن تحققها صفحة HTML لكي تُعَدّ صفحةً جيدةً بما في ذلك الاكتشاف التلقائي للأخطاء وغيرها من النقاط المفيدة، وليس لهذا العنصر في أيامنا هذه وظيفةً سوى التأكد من سلوك المستند للسلوك المطلوب، وهذا كل ما عليك معرفته حاليًا.
• <html></html>: يضم هذا العنصر كامل محتوى الصفحة، ويُدعى أحيانًا بالعنصر الجذري root element.
• <head></head>: يعمل على أساس حاوية لتضع فيها كل الأشياء التي تريدها في صفحتك ولكنها لا تمثِّل محتوًى تريد إظهاره لمتابعيك مثل الكلمات المفتاحية ووصف الصفحة الذي تريد إظهاره عندما يعرضها محرك البحث على أساس نتيجة وقواعد CSS لتنسيق محتوى الصفحة ونوع المحارف التي تستخدمها في الصفحة وغيرها الكثير.
• <"meta charset="utf-8>: يضبط هذا العنصر مجموعة المحارف التي تستخدِمها في الصفحة، وهنا اخترنا المجموعة UTF-8 التي تضم محارف الأغلبية الساحقة من اللغات المكتوبة، إذ تستطيع هذا المحارف أن تعرض الآن أيّ محتوى نصي بأيّ لغة قد تضعه في صفحتك، ولا مبرر لعدم ضبط مجموعة المحارف المستخدَمة، كما ستساعدك على تحاشي الكثير من الأخطاء لاحقًا.
• <title></title>: يضبط هذا العنصر عنوان صفحتك الذي يظهر أعلى المتصفح عند تحميل الصفحة، كما يُستخدم لوصف الصفحة عندما تضيفها إلى قائمة الصفحات المفضلة.
• <body></body>: يضم المحتوى الذي تريد عرضه على زائري صفحتك بأكمله، سواءً كان نصًا أو صورًا أو فيديو أو ألعاب أو أيّ شيء آخر.

الصور

لنعُد إلى العنصر <img> مجددًا:

<img src="images/firefox-icon.png" alt="My test image">

يُدرِج هذا العنصر صورةً ضمن الصفحة في المكان الذي تضعه فيه، إذ نحدِّد الصورة المعروضة بكتابة عنوانها على أساس قيمة للسمة src -أي مصدر source-، كما يمتلك عنصر الصورة أيضًا سمةً أخرى تُدعى alt -أي بديل alternative-، إذ تُستخدَم هذه السمة لعرض نص بديل عن الصورة للأشخاص الذين لا يستطيعون رؤيتها لأسباب عديدة منها:

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

ما يهم فعلًا في النص البديل هو أن يكون وصفيًا تمامًا لمحتوى الصورة، إذ ينبغي أن يزوِّد النص القارئ بمعلومات كافية ليكوِّن فكرةً جيدةً عن محتوى الصورة، فالنص البديل "My test image" في مثالنا غير جيد على الإطلاق، وسيكون الأنسب لشعار فايرفوكس هو "Firefox logo: a flaming fox surrounding the Earth" وبالعربية "شعار فايرفوكس: ثعلب ملتهب يحيط بالكرة الأرضية"، أي حاول إذًا ابتكار نصوص بديلة جيدة تصف الصورة.

توصيف محتوى صفحات HTML

يغطي هذا القسم من المقال عناصر HTML الأساسية لتوصيف محتوى الصفحات.

العناوين

تساعدك العناوين Headings على عرض أجزاء من محتوى الصفحة على أساس عناوين رئيسية أو فرعية، وكما هو حال الكتب التي تحمل عنوانًا رئيسيًا وعناوين للفصول وعناوين فرعية في كل فصل، تحمل صفحة HTML الميزة ذاتها، إذ تضم اللغة عناوين تتدرج إلى مستويات ستة من <h1> إلى <h6>، وغالبًا ما ستستخدِم ثلاث إلى أربع مستويات كحد أقصى.

<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

ملاحظة: كل ما يرد بين الوسمين <-- و --!> في صفحة HTML هو تعليق سيتجاهل المتصفح محتواه عندما يصيّر الشيفرة ولن يُعرَض على الشاشة، إذ تساعدك التعليقات في وضع ملاحظات مفيدة عن مقطع محدَّد من الشيفرة أو عن منطق معيّن اعتمدته.

حاول الآن وضع عنوان فرعي في صفحة HTML التي نبنيها فوق العنصر <img> مباشرةً.

ملاحظة: تملك العناوين من المستوى الأول تنسيقًا ضمنيًا خاصًا، لذلك لا تستخدِمها لتكبير النص أو جعله سميكًا Bold لأنها تُستخدَم لغايات أخرى مثل سهولة الوصول أو لأسباب أخرى مثل تحسين محركات البحث، لذا حاول أن تعطي تدرجًا منطقيًا للعناوين في صفحتك دون تجاوز أيّ مستوى إلى ما دونه مثل الانتقال من 4 إلى 2 مباشرةً دون المرور بالمستوى 3.

الفقرات النصية

يحتوي العنصر <p> كما شرحنا سابقًا مقطعًا نصيًا، وستستخدمه بكثرة عندما ترمز المحتوى النصي في الصفحة:

<p>This is a single paragraph</p>

يمكنك على سبيل التجربة إضافة عينة من نص ما على هيئة فقرة نصية أو أكثر تحت العنصر <img> في الصفحة التجريبية التي نبنيها.

القوائم

تُصنَّف كمية لا بأس بها من محتوى ويب على صورة قوائم Lists وتمتلك HTML القدرة على ذلك، إذ تتضمن القائمة عنصرين على الأقل، وأكثر القوائم شيوعًا هي القوائم المرتبة Ordered وغير المرتبة Unordered:

1. القوائم المرتبة: توضع بنود هذه القائمة ضمن العنصر <ol>، وتُستخدَم لعرض القوائم التي يهمنا فيها ترتيب العناصر مثل وصفات تحضير الطعام أو ترتيب فِرق دوري لكرة القدم وغيرها.
2. القوائم غير المرتبة: توضع بنود هذه القائمة ضمن العنصر <ul>، وتُستخدَم لعرض القوائم التي لا نهتم فيها لترتيب العناصر مثل قائمة التسوق.

يوضع كل بند من بنود القائمة ضمن العنصر <li> -أي بند من قائمة list item-، فإذا أردنا مثلًا تحويل جزء من الفقرة النصية التالية إلى قائمة:

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

فيمكننا تعديل توصيف محتوى الفقرة ليصبح كما يلي:

<p>At Mozilla, we’re a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

الروابط

تُعَدّ الروابط العنصر الأكثر أهميةً، فهي ما تجعل من الويب شبكةً حقيقيةً، إذ نستخدِم العنصر البسيط <a> لإنشاء رابط، وهو اختصار للكلمة "anchor"، ولتجعل جزءًا من الفقرة النصية السابقة رابطًا اتبع الخطوات التالية:

1. اختر جزءًا من النص وليكن "Mozilla Manifesto".
2. ضَع هذا الجزء ضمن الوسمَين <a></a> كما يلي:

<a>Mozilla Manifesto</a>

3. زوّد الرابط بعنوان للانتقال إليه من خلال السمة href كما يلي:

<a href="">Mozilla Manifesto</a>

4. اكتب العنوان المطلوب بين علامَتي تنصيص السمة href كما يلي:

<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

قد تصل إلى نتيجة غير متوقعة إذا حذفت بداية العنوان الذي يُدعى بروتوكول، أي //:https أو ://http، لذلك تحقق من وصولك إلى المكان المطلوب عند النقر على الرابط.

ملاحظة: قد يبدو اختيار اسم السمة href غامضًا في البداية، فإذا صعُب عليك الأمر، تذكر أنه مشتق من كلمتَي "مرجع إلى نص تشعبي hypertext reference"

خلاصة

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

إذا لم تجد عملك صحيحًا، فيمكنك دائمًا موازنة ما فعلته مع النسخة الجاهزة على جيت-هاب.

ترجمة -وبتصرف- للمقال HTML Basics.

اقرأ أيضًا

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

اقتباس

تعلم لغة HTML هو الخطوة الأولى من خطوات تعلم البرمجة للدخول إلى عالم تطوير الويب.

هل فكرت يومًا خلال تصفحك لموقع ما أن تخزّن إحدى الصفحات على حاسوبك لجودة المحتوى أو لأهمية المعلومات التي قرأتها؟ فهل لاحظت -إن فعلت ذلك- أن امتداد هذا الملف (آخر ثلاث أو أربعة أحرف من اسم الملف) من الشكل html أو htm؟ هل وصلك بريد إلكتروني من شركة أو من مجلة إلكترونية أو حتى من صديق ووجدته مميزًا يضم صورًا وعناوين وكل ما اعتدت أن تفعله هو كتابة بضعة أسطر توجز فيها ما تريد ثم ترسل بريدك؟ هل دخلت يومًا إلى منتدى إلكتروني وأردت أن تكتب تعليقًا وقرأت عبارة "يُسمح باستخدام أكواد HTML" وتساءلت ما هي أكواد HTML؟ هل فكّرت أخيرًا وأنت تتصفح الإنترنت، أنّ جميع المواقع دون استثناء تتشابه في هيكليتها؟ فجميعها يضم شكلًا من قوائم التنقل وأقسامٍ أعلى وأدنى الصفحات تبقى كما هي عند التنقل بين صفحات الموقع نفسه، ونماذج لتعبئتها وعناوين رئيسية وفرعية وروابط لتنظيم المحتوى وتسهيل الوصول إلى المعلومات المطلوبة. إن الوصفة السحرية خلف كل ذلك هي لغة ترميز النص التشعبي Hyper Text Markup Language واختصارًا لغة HTML.

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

جدول المحتويات

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

• ما هي لغة HTML؟
• الفرق بين اللغات التوصيفية ولغات البرمجة
• تاريخ وتطور لغة HTML
• أهمية تعلم لغة HTML
• ما الذي أحتاج إليه لأبدأ العمل مع لغة HTML
• استخدامات لغة HTML
• أساسيات لغة HTML
  • السمات في لغة HTML
  • الوسوم البنائية والعناصر السطرية
  • الوسوم الأساسية في لغة HTML
• إيجابيات وسلبيات لغة HTML
• مصادر تعلم لغة HTML

ما هي لغة HTML؟

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

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

الفرق بين اللغات التوصيفية ولغات البرمجة

لغة HTML كما أشرنا هي من اللغات التوصيفية markup languages ولا تعد لغة برمجة programming language ويكثر الخلط بينهما ويظن حديث العهد بمجال علوم الحاسوب أن تعلمه لغة HTML يعني دخوله للمجال واحترافه للبرمجة وهذا خلط وخطأ، ويجب التفريق بين لغة التوصيف ولغة البرمجة.

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

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

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

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

دورة تطوير واجهات المستخدم

ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة

اشترك الآن

تاريخ وتطور لغة HTML

قد لا تتوقع إطلاقًا أين ولدت لغة HTML! وهذا دليل إضافي على صحة مقولة "الحاجة أم الاختراع". لقد أراد مهندس الحاسوب تيم بيرنرز لي Tim Berners-Lee الذي يعمل في قسم خدمات الحاسب في مؤسسة CERN لفيزياء الجزيئات أن يُمكّن الزملاء في مختلف المواقع داخل وخارج المؤسسة من تبادل الدراسات والأوراق البحثية وربطها مع بعضها بدلًا من تحميل نسخ عن جميع هذه الأوراق والأبحاث على كل حاسوب. أي بكلمات أخرى، سيتمكن أي باحث أثناء قراءته لمقال ما أن ينتقل إلى مقال آخر أو يستعرض معلومات أخرى جرى ذكرها في المقال الذي يقرأه دون أن يُضطر إلى إغلاق مقاله ثم البحث من جديد في أرشيف المقالات عن الموضوع الذي صادفه ثم العودة إلى المقال الأصلي.

لا أعتقد أن بيرنرز-لي قد توقع من فكرته الثورية ميلاد تقنية شبكة الويب بأكملها فقد أثبتت هذه الفكرة قدرتها على التوسع لبناء شبكة عنكبوتية من الصفحات المترابطة التي تتيح لك التنقل فيما بينها جيئةً وذهابًا. لقد اعتمد بيرنرز-لي على لغة توصيف موجودة بالفعل ومحط اتفاق بين جميع العاملين في مجال الحواسب وهي لغة الترميز المعياري العام SGML فبدون أساس متين تستند عليه لم يكن ليُكتب البقاء لهذه اللغة.

إذًا اعتمد بيرنرز-لي على فكرة الوسوم التي تُستخدم في SGML وهي مفاتيح تحيط بنص معين في بدايته ونهايته ليكون لهذا النص دلالة معينة وفقًا لنوع الوسم مثل <p/>...نص ما هنا...<p>، لكنه أضاف وسمًا جديدًا للمساهمة في الربط بين الصفحات وهو وسم المربط أو المرساة <a>.

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

اقتباس

السير تيم بيرنرز-لي Sir Tim Berners-Lee‏ ولد في عام 1955 هو مهندس وعالم حاسوب إنجليزي، اشتهر بسبب اختراعه للشبكة العنكبوتية العالمية والتي تعرف بالويب ويلقب أحيانًا بلقب "أبو الويب" وهو الآن أستاذ في علوم الحاسوب في جامعة أوكسفورد في بريطانيا.

شجّع بيرنرز-لي المهتمين بلغة HTML على كتابة برمجيات لتحليل هذه اللغة وعرضها على الشاشة كما اخترع بنفسه بروتوكولًا لنقل وتوزيع النصوص التشعبية سماه بروتوكول HTTP أي بروتوكول نقل النصوص التشعبية HyperText Transfer Protocol.

لا زلنا حتى اللحظة في عام 1991 لكن مع ظهور فكرة أسماء النطاقات DNS (دُعيت حينها خدمة الأسماء الموزّعة) وعناوين إنترنت IP أمكن الربط بين الحواسب بطريقة أسهل وأكثر أمانًا وأصبح كل شيء مهيئًا لولادة الويب.

تصاعد اهتمام الباحثين والعاملين في مجال الحواسب بلغة HTML لاحقًا من خلال عدة اجتماعات ومراسلات لتظهر للعلن أولى نسخ لغة HTML الرسمية عام 1993 وهي HTML 1.0.

مع زيادة اهتمام الفعاليات بهذه اللغة أضيفت وسوم وميزات جديدة لها وبدأت الكثير من الشركات بالعمل على إنتاج المتصفحات فظهرت النسخة HTML 2.0 وتلاها ظهور متصفحات معروفة مثل نتسكيب Netscape وإنترنت إكسبلورر Internet Explorer.

قدم ديفيد راغيت David Raggett نسخة HTML+‎ عام 1993 وأضافت هذه النسخة الكثير من الميزات إلى اللغة مثل الجداول ونماذج إرسال البيانات، والتي اعتمدت أغلبها لاحقًا في نسخة HTML 3.0 عام 1995 لكنها سببت في بطء المتصفحات مما دفع لاعتماد نسخة جديدة محسّنة هي HTML 4.0 عام 1999 ثم تلتها النسخة HTML 4.01 في وآخر العام ذاته وكانت بالفعل أكثر نجاحًا.

تبنت منظمة W3C وهي رابطة الشبكة العالمية World Wide Web Consortium التي أسسها بيرنرز-لي اعتماد معايير لغة HTML وتطويرها منذ عام 1996 ثم تكونت لاحقًا مجموعة WHATWG عام 2004، وضمت الكثير من الشركات المهتمة بصناعة تقنيات الويب آنذاك وقد أخذت على عاتقها تطوير نسخة HTML 5 لتصدر رسميًا عام 2015، وتُعد HTML 5 امتدادًا لسابقتها والأكثر اعتمادًا حاليًا وتقدم الكثير من الميزات المتقدمة مثل الموقع الجغرافي ودعم الفيديو والصوتيات ضمنيًا واستخدام لوحات الرسوم الديناميكية من خلال من خلال العنصر Canvas وكذلك العمل مع مقابس ويب web sockets وغيرها، وصدرت بعد ذلك نسختي HTML 5.1 و HTML 5.2 في عامي 2016 و 2017 تباعًا.

لن تكون هناك نسخة HTML 6 في المدى المنظور بل سيستمر العمل على تطوير HTM 5 بما يتناسب مع التطور التكنولوجي وفقًل لتقارير تصدرها مجموعة WHATWG ومن يدري في النهاية، فالويب متطور بسرعة رهيبة وقد تنقلب الموازين وتتغير الأحكام.

أهمية تعلم لغة HTML

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

• لغة HTML هي مدخلك الرئيسي إلى علوم الحاسب عمومًا وإلى تصميم مواقع وتطبيقات ويب خصوصًا: فإن شبهنا موقع ويب بالمنزل فستكون لغة HTML بمثابة هيكل المنزل من أعمدة وأسقف وجدران.
• لغة HTML بسيطة التعلم: كل ما عليك فعله بداية هو تذكر وسوم لغة HTML ودلالاتها ثم استخدام هذه الوسوم وفق تسلسل منطقي لتكوين الصفحة فالوسم <title> مثلًا لإضافة عنوان للصفحة والوسم <p> لإضافة فقرة نصية والوسم <img> لإدراج صورة وهكذا.
• لا يحتاج تعلم لغة HTML واستخدامها إلى أدوات معقدة: يمكنك استخدام أي محرر نصي بسيط لكتابة أكواد HTML ثم حفظ الملف بالامتداد html ليتحول إلى صفحة HTML ساكنة يستطيع أي متصفح تحليلها. مع ذلك قد تستفيد من محررات متقدمة لتسريع وتيرة عملك والتأكد من عدم وجود أخطاء.
• لغة HTML لغة مرنة: ارتكب ما تشاء من الأخطاء وسيحاول المتصفح جاهدًا فهم ما تريده. يشجعك ذلك غالبًا على الانطلاق في العمل، فرؤية نتاج ما فعلته أمر محفز، بينما ستحبطك بالتأكيد قائمة بعشرات الأخطاء لا تعرف معها أين اخطأت وكيف تتجاوز تلك الأخطاء.

فإن شجعتك النقاط السابقة على البدء في تعلّم لغة HTML، تابع القراءة معنا لتتعرف على أساسيات لغة HTML وأين وكيف تُستخدم.

ما الذي أحتاج إليه لأبدأ العمل مع لغة HTML

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

• محرر نصي: مثل المفكرة Notepad إن كنت من مستخدمي ويندوز أو محرر النصوص الافتراضي تكست Text أو كايت Kate إن كنت تستخدم إحدى توزيعات لينكس. إذ ستكتب أكواد HTML كما تكتب أي نص ثم تحفظ عملك تحت اسم معبّر ينتهي بالامتداد html، وهذا كبداية.
• متصفح ويب: لن يخلو حاسوبك من هذه البرامج طالما أنك تستخدم الإنترنت. يُفضّل مع ذلك استخدام إحدى المتصفحات الحديثة مثل غوغل كروم أو موزيللا فايرفوكس أو مايكروسوفت إيدج أو غيرها، وبإمكانك تنزيلها مجانًا. يحلل المتصفح أكواد HTML ويعرض محتوى الصفحة وفقًا لأكواد HTML التي استخدمتها.

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

استخدامات لغة HTML

رأينا أن لغة HTML هي لغة توصيفية أي توصِّف النصوص لذا تُستخدم مع النصوص عمومًا لتنسيقها وهيكلتها ولكن شاع استخدامها مع نصوص صفحات الويب خصوصًا (التي هي نصوص في النهاية) وبالتالي تعتبر وسيلة يستخدمها مصممو ويب في:

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

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

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

اقتباس

هذه المقالة التي تقرؤها الآن هي عبارة عن صفحة HTML ويمكنك تصفحها مباشرة والاطلاع عليها عمليًا وعلى الوسوم والعناصر المكونة منها عبر الضغط على الاختصار Ctrl + U أو الضغط بزر الفأرة الأيمن واختيار view page source طبعًا إن كنت تقرأ المقال هذا على حاسوبك وليس على الجوال.

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

أساسيات لغة HTML

تعتمد لغة HTML على مفهوم الوسم tag وهو مفتاح دلالي يحيط بنص ليعطيه مظهرًا أساسيًا ودلالة محددة. لنلق نظرة على المثال التالي:

<h1> HTML مرحبا بك إلى </h1>
<p> هي لغة توصيفية تُستخدم لهيكلة صفحات ويب HTML لغة </p>

لو كتبت هذه الشيفرة في محرر نصي (يمكنك نسخها ولصقها أيضًا) ثم حفظت التغييرات بالاسم test.html ونقرت على هذا الملف الجديد سيستدعي نظام التشغيل المتصفح الافتراضي ليعرض النتيجة التالية:

عرض المتصفح عبارة "مرحبًا بك إلى HTML" بخط ذو حجم كبير وثخين لأنه أحيط بالوسم <h1> والذي يُعرف بأنه وسم عنوان من المستوى الأول ويدلّ على أن النص الذي يغلّفه هو عنوان لفقرة ما. بينما عرض العبارة الأخرى التي أحيطت بالوسم <p> في سطر جديد وبالشكل الاعتيادي كما يعرضه أي محرر نصي. يُدعى وسم HTML هذا بوسم الفقرة النصية ويدل على أن النص الذي يُغلّفه هو فقرة نصية سردية تورد محتوى معينًا.

يتألف عنصر HTML من الأجزاء التالية:

1. وسم البداية Opening tag: وتتكون من اسم العنصر (p أو h1 في مثالنا) محاطًا بقوسي زاوية <>. ويشير هذا الوسم إلى النقطة التي يبدأ عندها العنصر.
2. وسم النهاية Closing tag: يشابه وسم البداية لكنه يبدأ بشرطة أمامية / تسبق اسم العنصر. ويشير هذا الوسم إلى نهاية العنصر (<p/> و <h1/>).
3. المحتوى Content: ويشير إلى المحتوى النصي الموجود بين وسمي البداية والنهاية. وقد لا يغلف وسمي البداية والنهاية أي محتوى، فيُدعى العنصر في هذه الحالة عنصرًا فارغًا empty element.

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

لا تُعد لغة HTML لغة ًحساسة لحالة الأحرف عند كتابة الوسوم، فالوسمين <p> أو <P> مثلًا متطابقين ويعطيان النتيجة ذاتها.

السمات في لغة HTML

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

وتتكون السمة من اسم السمة يليها إشارة مساواة ثم قيمة السمة ضمن إشارتي تنصيص مزدوجتين (" ") أو مفردتين (' ').

ولا بد من وجود فراغ بين السمة واسم العنصر وبين السمة والسمة التي تليها إن وجدت. إليك مثالًا عن عرض صورة باستعمال الوسم <img>:

<h1>جمال الطبيعة</h1>
<img src="nature.jpg" width="300px" alt="صورة من الطبيعة">

وضعت صورة بجانب صفحة text.html باسم nature.jpg وأشرت إليها في الخاصية src التي يأخذها عنصر الصورة ولاحظ أنني حددت عرضها عبر الخاصية width واسم بديل للصورة إن لم تُعرض لأي سبب عبر الخاصية alt، والنتيجة:

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

ملاحظة: إن وجدت سمة HTML بلا قيمة أو كانت قيمتها نفس اسمها مثل "disabled="disabled تُدعى حينها بالسمة المنطقية وتُنفّذ ما يوحي به اسمها.

الوسوم البنائية والعناصر السطرية

تصنف وسوم HTML ضمن مجموعتين مهمتين هما مجموعة الوسوم الكتلية أو البنائية Block elements والسطرية inline elements وسنشرح الفرق بينهما.

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

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

<h1> أنا وسم كتلي</h1>
<p>عندما لا أقع على سطر خاص بي <em>وسمًا سطريًا </em> وأكون </p>

الوسوم الأساسية في لغة HTML

إليك قائمة بأهم وسوم لغة HTML ودلالاتها:

عنصر الفقرة p

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

عناصر عناوين الفقرات h

يُضاف إلى الوسم أرقام من 1 إلى 6 لتحديد مستوى العنوان Header لتصبح على الشكل <h1> و <h2> وهكذا حتى <h6>. إليك مثالًا:

<hgroup>
  <h1>عنوان من المستوى الأول</h1>
  <h2>عنوان من المستوى الثاني</h2>
  <h3>عنوان من المستوى الثالث</h3>
  <h4>عنوان من المستوى الرابع</h4>
</hgroup>

ستكون النتيجة كالتالي:

عنصر القائمة ol/ul

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

<ol>
  <li>أفرغ محتويات ظرف الكريمة ضمن وعاء نظيف</li>
  <li>أسكب كوبًا من الماء البارد وحرك المزيج بلطف حتى التجانس</li>
  <li>استخدم خفاقة كهربائية لخفق المزيج بشدة من 4 إلى 5 دقائق</li>
  <li>ضع الكريمة في البراد حتى يحين وقت استخدامها</li>
</ol>

ستكون النتيجة كما يلي:

وهذا مثال عن قائمة غير مرتبة:

<ul>
  <li>C++</li>
  <li>Python</li>
  <li>Java</li>
  <li>PHP</li>
</ul>

ستكون النتيجة كما يلي:

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

عنصر الرابط a

يولد عنصر <a> رابطًا إلى صفحة HTML أخرى أو إلى قسم آخر ضمن صفحة HTML نفسها ويأخذ سمة href التي تحوي رابط الوجهة المطلوبة:

<a href="https://academy.hsoub.com/">
  أكاديمية حسوب
</a>

يسمى النص بعد تحويله إلى رابط بالمربط anchor ومن هنا جاءت تسمية العنصر <a> اختصارًا لأول حرف.

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

إيجابيات وسلبيات لغة HTML

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

إيجابيات لغة HTML

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

سلبيات لغة HTML

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

مصادر تعلم لغة HTML

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

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

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

نضيف إلى ما سبق المنشورات التي تنشرها أكاديمية حسوب ومنها:

1. كتاب نحو فهم أعمق لتقنيات HTML5 وهو كتاب يخص إصدار HTML 5 وما فيه من ميزات وتقنيات أضيفت للغة HTML.
2. قسم لغة HTML: وتُنشر فيه دروس ومقالات عن لغة HTML عمومًا بمختلف المواضيع وفيه ما يزيد عن 80 مقال ودرس عملي تطبيقي ننصح بالإطلاع عليه دوريًا ومتابعته.

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

خاتمة

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

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

اقرأ أيضًا

• دليلك الشامل إلى تعلم البرمجة
• المدخل الشامل لتعلم تطوير الويب 
• ما هي فوائد تعلم البرمجة؟
• المرجع الشامل إلى تعلم لغة بايثون
• دليلك الشامل للتحضير للعمل كمستقل عندما تكون مبرمجا تعلم البرمجة بنفسه

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

تسهيل وصول جميع المستخدمين إلى مواقع ويب

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

المبادئ العامة لسهولة الوصول

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

سهولة الوصول في عالم ويب

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

لنتأمل مقطع فيديو:

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

تتضمن أساسيات سهولة الوصول في ويب أشياءً مثل:

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

وهذه النقاط هي البداية فقط.

أدارت منظمة W3C منذ عام 1999 مجموعة عمل تُدعى "مبادرة سهولة الوصول على الويب Web Accessibility Initiative" لتطوير معايير إمكانية الوصول من خلال الإرشادات والمواد الداعمة والموارد على المستوى العالمي، ويمكنك الاطلاع على المزيد من خلال موقع المبادرة WAI، كما قد تجد بعض الأفكار في مقالات أكاديمية حسوب.

تصميمات موجهة لجميع المستخدمين

عندما تشرع في تصميم موقع ويب ينبغي علينا التفكير أولًا بتصميم شمولي Universal Design للموقع يلائم جميع مستخدِميه بغض النظر عن أية إعاقات قد يعانونها أو أية قيود تقنية أو ثقافية أو مكانية.

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

التلاؤم اللوني

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

تُحدِّد منظمة W3C التلاؤم اللوني من خلال خوارزمية تحسب نسبة السطوع luminosity ratio بين الخلفية والواجهة، وقد تكون هذه الحسابات معقدةً، لكن بعض الأدوات الجاهزة قد تساعدنا في إنجاز الأمر.

اقتباس

ملاحظة: ستجد الكثير من الأدوات التي تحدِّد التلاؤم اللوني مثل Color Contrast Analyser التي تتيحها مجموعة Paciello، أو Color Contrast Checker التي تتيحها WebAIM، ونقترح عليك استخدام أدوات تضم منتقي ألوان مدمج معها يساعدك على انتقاء اللون من الشاشة مباشرةً.

اختُبر التلاؤم اللوني لصفحة المقال الأصلي في الصورة السابقة وأعطى نتيجة 8.30:1 وهذا الرقم أعلى بكثير من الحد الأدنى المقبول الذي يقدَّر بالنسبة 4.5:1 وبالتالي لا بد أن يساعد التلاؤم اللوني للصفحة الكثيرين من ذوي الإعاقة البصرية في قراءتها.

حجم خط الكتابة

يمكنك تحديد حجم خط الكتابة في موقع ويب بوحدات قياس نسبية relative أو مطلقة absolute.

وحدات القياس المطلقة

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

body { font-size:16px; }

فأنت تطلب من المتصفح أن يكون حجم الخط 16 بيكسل دائمًا، وقد تلتف بعض المتصفحات الحديثة على هذه القاعدة متظاهرةً أن حجم الخط سيكون 16 بكسل عندما يكون معامل تكبير الصفحة 100%، أي الحجم الطبيعي، ومع هذا وعلى امتداد سنوات عدة فقد عرض إنترنت إكسبلورر عمدًا الخطوط التي ضُبط حجمها على 16 بكسل مثلًا بالحجم 16 بكسل تمامًا بغض النظر عن معامل التكبير وصولًا إلى النسخة 8 التي لا بد من الانتباه لها لأنها لاتزال مستخدَمة.

وحدات القياس النسبية

تُحسَب هذه الأحجام نسبةً إلى العنصر الأب، وهي أكثر وضوحًا فيما يخص سهولة الوصول لأنها تحترم الإعدادات الخاصة بنظام المستخدِم، كما يُعبَّر عن الوحدات النسبية بالرموز em و% وrem:

• الحجم المبني على النسبة المئوية %: تخبر هذه الوحدة المتصفح أنّ حجم الخط في العنصر هو نسبة مئوية من حجم الخط في العنصر الأب الذي حُدِّد فيه حجم الخط، فإذا لم يكن للعنصر أب، فستجري الحسابات بالنسبة إلى حجم الخط الافتراضي للمتصفح (16 بكسل عادةً).
• الحجم المبني على الوحدة Em: تُحسَب اعتمادًا على أسلوب النسبة المئوية ذاته لكن على أساس أجزاء من 1 وليس 100، كما يُقال أن "em" هو عرض الحرف الأبجدي "M" على أساس حرف كبير (إذ يمكن وضعه ضمن مربع بصورة تقريبية).
• الحجم المبني على الوحدة rem: تُحسَب على أساس نسبة من حجم الخط للعنصر الجذري، ويعبَّر عنها على أساس أجزاء من 1 كما هو حال Em.

لنفترض أننا نريد حجمًا أساسيًا للخط مقداره 16 بكسل وحجمًا مقداره 32 بكسل لعنصر العنوان الرئيسي h1، فإذا وجدنا ضمن العنصر h1 الوسم span الذي يطبق تنسيق الصنف subheading، فيجب تصيير ما داخل span أيضًا بالنسبة إلى حجم الخط الافتراضي (16 بكسل عادة)، وإليك شيفرة HTML لتوضيح الفكرة:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font size experiment</title>
</head>
<body>

    <h1>This is our main heading
        <span class="subheading">This is our subheading</span>
    </h1>

</body>
</html>

أما شيفرة CSS المبنية على النسبة المئوية:

‫/* 100% من حجم الخط الأساسي للمتصفح والذي يكون عادة 16 بكسل */
body { font-size:100%; }
/* أي حوالي 32 بكسل body ضعفي حجم المحدد */ 
h1 { font-size:200%; } 
/* أي العودة إلى القياس 16 بكسل h1 نصف  */
span.subheading { font-size:50%; } 

سنواجه المشكلة نفسها عند استخدام وحدة القياس Em:

‫ /* 1em = 100% من قياس الخط الأساسي الذي يكون عادة 16 بكسل*/
body { font-size:1em; } 
/*أي حوالي 32 بكسل body ضعفي حجم المحدد */
h1 { font-size:2em; } 
/* أي العودة إلى القياس 16 بكسل h1 نصف */
span.subheading { font-size:0.5em; } 

لاحظ كيف ستغدو الحسابات مزعجةً إذا أردت ملاحقة العنصر الأب ثم أب الأب وهكذا، كما تُنفّذ معظم التصاميم على برمجيات تستخدِم البكسل، لذلك من الأفضل أن تجري الحسابات من قِبَل الشخص الذي كتب شيفرة CSS

تقاس الوحدة rem بالنسبة إلى حجم العنصر الجذري وليس لأيّ عنصر أب، لذلك يمكن كتابة تنسيق CSS كما يلي:

‫/* 1em = 100% من قياس الخط الأساسي الذي يكون عادة 16 بكسل*/
body { font-size:1em; } 
/*أي حوالي 32 بكسل body ضعفي حجم المحدد */
h1 { font-size:2rem; }
/*الحجم الأصلي*/
span.subheading { font-size:1rem; } 

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

اقتباس

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

لماذا قد أستخدم وحدات القياس النسبية

لأنك لا تعرف متى سيرفض المتصفح تكبير أو تصغير حجم النص الذي يعتمد البيكسل على أساس وحدة قياس، كما أنّ موقعك قد يتلقى زيارات ممن يستخدِمون متصفحات قديمةً، لذلك سنقدِّم لك النصائح التالية:

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

اقتباس

ملاحظة: قد تختلف وحدات القياس التي تستخدِمها، لكن إذا أردت دعم المتصفحات القديمة، فعليك استخدم وحدة em، ولا بد عندها من بعض الحسابات الإضافية.

حجم السطر

هنالك جدل طويل قائم حول طول الأسطر في ويب، وإليك القصة كاملةً.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font size experiment</title>
</head>
<body>

<div class="container">
    <h1>This is our main heading
        <span class="subheading">This is our subheading</span>
    </h1>

    <p>[lengthy text that spans many lines]</p>
</div>

</body>
</html>

لدينا عنصر div له صنف التنسيق container، إذ يمكننا تنسيق div بضبط عرضه باستخدام الخاصية width أو من خلال ضبط عرضه الأعظمي لكي لا يزداد كثيرًا باستخدام الخاصية max-width، فإذا أردت موقعًا مرنًا أو متجاوبًا ولم تكن تعرف العرض الافتراضي الذي يأخذه المتصفح، فيمكنك استخدام الخاصية max-width لكي تضبط عدد المحارف في السطر بحدود 70 محرفًا لا أكثر:

div.container { max-width:70em; }

النصوص البديلة عن الصور والمقاطع الصوتية ومقاطع الفيديو

تضم مواقع الويب أشياء أخرى غير النصوص، ولا بد من الانتباه إليها:

الصور

قد تكون الصور لمجرد العرض وتدعى بالصور الاستعراضية أو قد تحتوي على معلومات، لكن لا ضمانة بأن يراها المستخدِم لأسباب منها:

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

أما الصور الاستعراضية Decorative، فتُستخدَم لتزيين الصفحات ولا توصل أية معلومات حقيقة، كما يمكن استبدالها في معظم الحالات بصورة خلفية، وتأكد من وضع نص فارغ على أساس قيمة للسمة alt في عنصر الصورة كي لا يتجاهل المتصفح عرض النص البديل.

<img src="deco.gif" alt="">

وأما الصور التي تحتوي على معلومات Informative، فتُستخدَم لإيصال معلومات محددة، مثل عرض رسم بياني أو وجه أحد ما أو أية معلومات أخرى، إذ عليك أن تقدِّم على الأقل نصًا بديلًا في هذه الحالة (السمة alt)، فإذا أمكن وصف الصورة جيدًا، فيكفي استخدام النص البديل، وإلا عليك تقديم محتوى الصورة تقديمًا آخرًا في الصفحة نفسها مثل أن تعرض بالإضافة إلى الرسم البياني جدولًا يضم المعلومات نفسها، أو الجأ إلى السمة longdesc التي تحمل عنوان URL يشير إلى مصدر يشرح صراحةً محتوى الصورة.

اقتباس

ملاحظة: إنّ استخدام longdesc أو وجود هذه السمة أصلًا هو محط خلاف منذ زمن، وننصحك بالعودة إلى توثيقات W3C عن هذه السمة لتطَّلع على شرح أوسع مع أمثلة عن الاستخدام.

الصوت والصورة

لابد أن تقدِّم بديًلا عن الوسائط السمعية والبصرية أيضًا.

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

ضغط الصور

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

• برمجيات تُثبَّت على جهازك: ستجد ImageOptim على ماك، وستجد PNGcrush على دوس ولينوكس ويونكس، بينما يعمل OptiPNG على كل المنصَّات.
• أدوات على الإنترنت: مثل smushit!‎ من ياهو Yahoo و Online Image Optimizer من Dynamic Drive، إذ يحوِّل هذا الأخير الصور تلقائيًا من تنسيق إلى آخر إذا كان أكثر فعاليةً فيما يخص تخفيض استهلاك حزمة تراسل البيانات.

نظرة إلى ميزات HTML التي تدعم سهول الوصول

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

التنقل عبر المفتاح TAB

يمكن للزائرين الذين لا يمتلكون أجهزة تأشير مثل الفأرة، أو لا يستطيعون استخدامها التنقل عبر الروابط من خلال استخدام المفتاح TAB، إذ ينبغي أن تكون الروابط مرتبةً بطريقة منطقية لاستخدام هذه الميزة، لذلك تقدِّم HTML السمة tabindex التي تحدِّد الترتيب، فإذا كانت شيفرة HTML المكتوبة خطيةً ومتتابعةً كما ينبغي، فستظهر الروابط وفق الترتيب المنطقي تلقائيًا.

<ul>
  <li><a href="here.html" tabindex="1">Here</a></li>
  <li><a href="there.html" tabindex="3">There</a></li>
  <li><a href="anywhere.html" tabindex="2">Anywhere</a></li>
</ul>

تعرض الشيفرة السابقة التي قدمناها لمجرد توضيح الفكرة ترتيب استخدام TAB من "Here" إلى "Anywhere" إلى "There".

عناوين الروابط

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

<p>I'm really bad at writing link text. <a href="inept.html" title="Why I'm rubbish at writing link text: An explanation and an apology.">Click here</a> to find out more.</p>

مفاتيح الوصول

تزوِّد مفاتيح الوصول Access keys المستخدِم بطريقة سهلة للتنقل بتعيين اختصار إلى الرابط عبر لوحة المفاتيح، إذ يتلقى الرابط التركيز عندما يضغط المستخدِم Ctrl أو Alt مع مفتاح الوصول، وتختلف مجموعة الأزرار التي تُضغَط معًا من نظام لآخر.

<a href="somepage.html" accesskey="s">Some page</a>

روابط التجاوز

تعمل روابط التجاوز Skip Links على أساس رديف للتنقل عبر المفتاح TAB، إذ تسمح بالقفز إلى جزء محدَّد من الصفحة، فقد يرغب أحد الزوار بتجاوز الكثير من الروابط إلى المحتوى الرئيسي بدلًا من التنقل من رابط لآخر حتى الوصول إلى المطلوب.

<header>
  <h1>The Heading</h1>
  <a href="#content">Skip to content</a>
</header>

<nav>
  <!-- navigation stuff -->
</nav>

<section id="content">
  <!--your content -->
</section>

ترجمة -وبتصرف- للمقال ?What is accessibility، والمقال ?How can we design for all types of users، والمقال ?What HTML features promote accessibility.

اقرأ أيضا

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

سنخطط في هذا المقال بنية تطبيق TodoMVC في إطار العمل Ember، وسنضيف توصيف HTML له، ثم سنقسّم بنية HTML إلى مكونات.

• المتطلبات الأساسية: الإلمام بأساسيات لغات HTML وCSS وجافاسكربت JavaScript، ومعرفة استخدام سطر الأوامر أو الطرفية. يُعَد فهم ميزات جافاسكربت الحديثة مثل الأصناف Classes والوحدات Modules وما إلى ذلك مفيدًا للغاية، لأن إطار العمل Ember يستخدِمها بكثرة.
• الهدف: تعلّم كيفية إنشاء بنية تطبيق Ember، ثم تقسيم هذه البنية إلى مكونات.

التخطيط لتصميم تطبيق TodoMVC

أنشأنا في المقال السابق مشروع Ember جديد ثم أضفنا وضبطنا أنماط CSS، وسنضيف الآن توصيف HTML وسنخطط بنية ودلالات تطبيق TodoMVC.

يُعَدّ توصيف HTML لصفحة هبوط تطبيقنا مُعرَّفًا في المسار app/templates/application.hbs، وهو موجود مسبقًا وتبدو محتوياته حاليًا كما يلي:

‏{{!-- يعرض المكون التالي رسالة ترحيب‫ Ember الافتراضية. --}}
<WelcomePage />
{{!-- لا تتردد في إزالتها --}}

{{outlet}}

المكوّن <WelcomePage /‎> هو مكون توفّره إضافة Ember التي تصيِّر Render صفحة الترحيب الافتراضية التي رأيناها في المقال السابق عندما انتقلنا لأول مرة إلى الخادم على المضيف المحلي localhost:4200، لكننا لا نريد ذلك، وإنما نريد أن يحتوي هذا المكون على بنية تطبيق TodoMVC، لذلك احذف محتويات الملف application.hbs واستبدلها بما يلي:

<section class="todoapp">
  <h1>todos</h1>
  <input
    class="new-todo"
    aria-label="What needs to be done?"
    placeholder="What needs to be done?"
    autofocus
  >
</section>

اقتباس

ملاحظة: توفِّر السمة aria-label عنوانًا أو تسميةً توضيحيةً label للتقنيات المساعِدة مثل قارئات الشاشة للاستفادة منها، وهذا مفيد في مثل الحالات التي يُستخدَم فيها العنصر <input> مع عدم وجود نص HTML مقابل له يمكن تحويله إلى عنوان label.

احفظ الملف application.hbs، إذ سيَعيد خادم التطوير الذي شغّلته سابقًا بناء التطبيق وتحديث المتصفح تلقائيًا، أي يجب أن يبدو الخرج المُصيَّر الآن كما يلي:

لا يتطلب الأمر كثيرًا من الجهد لجعل توصيف HTML يبدو مثل تطبيق قائمة مهام كامل الميزات.

عدِّل الملف application.hbs مرةً أخرى ليكون محتواه على النحو التالي:

<section class="todoapp">
  <h1>todos</h1>
  <input
    class="new-todo"
    aria-label="What needs to be done?"
    placeholder="What needs to be done?"
    autofocus
  >

  <section class="main">
    <input id="mark-all-complete" class="toggle-all" type="checkbox">
    <label for="mark-all-complete">Mark all as complete</label>

    <ul class="todo-list">
      <li>
        <div class="view">
          <input
            aria-label="Toggle the completion of this todo"
            class="toggle"
            type="checkbox"
          >
          <label>Buy Movie Tickets</label>
          <button
            type="button"
            class="destroy"
            title="Remove this todo"
          ></button>
        </div>

        <input autofocus class="edit" value="Todo Text">
      </li>

      <li>
        <div class="view">
          <input
            aria-label="Toggle the completion of this todo"
            class="toggle"
            type="checkbox"
          >
          <label>Go to Movie</label>
          <button
            type="button"
            class="destroy"
            title="Remove this todo"
           ></button>
        </div>

        <input autofocus class="edit" value="Todo Text">
      </li>
    </ul>
  </section>

  <footer class="footer">
    <span class="todo-count">
      <strong>0</strong> todos left
    </span>

    <ul class="filters">
      <li>
        <a href="#">All</a>
        <a href="#">Active</a>
        <a href="#">Completed</a>
      </li>
    </ul>

    <button type="button" class="clear-completed">
      Clear Completed
    </button>
  </footer>
</section>

يجب أن يكون الخرج المُصيَّر الآن على النحو التالي:

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

إذا نظرنا إلى الشيفرة الموجودة بجوار تطبيق المهام المُصيَّر في الشكل التالي، فهناك طرق متعددة يمكن من خلالها تحديد كيفية تقسيم واجهة المستخدِم UI، ولكن لنخطّط الآن لتقسيم توصيف HTML إلى المكونات التالية:

مجموعات المكونات هي كما يلي:

• حقل الإدخال الرئيسي new-todo: باللون الأحمر في الشكل السابق.
• الجسم Body الذي يحتوي على قائمة المهام والزر الذي يضع علامة على جميع المهام المكتملة mark-all-complete: باللون الأرجواني في الشكل السابق.
  • الزر mark-all-complete المميز بوضوح للأسباب التي سنوضّحها لاحقًا: باللون الأصفر في الشكل السابق.
  • كل مهمة هي مكوّن لوحده: باللون الأخضر في الشكل السابق.
• التذييل Footer: باللون الأزرق في الشكل السابق.

لاحظ أنّ مربع الاختيار mark-all-complete المميَّز باللون الأصفر يُصيَّر بجوار حقل الإدخال new-todo أثناء وجوده في القسم main لأن تنسيقات CSS الافتراضية تضع مربع الاختيار والعنصر label بقيم سالبة للإحداثيات العلوية واليسارية لتحريكهما بجوار حقل الإدخال، عوضًا عن وضعهما في القسم main.

استخدام واجهة سطر الأوامر CLI لإنشاء المكونات

نريد إنشاء أربعة مكونات لتمثيل تطبيقنا وهذه المكونات هي:

• الترويسة Header.
• القائمة List.
• عنصر المهمة Todo.
• التذييل Footer.

استخدِم الأمر ember generate component متبوعًا باسم المكوّن لإنشائه، ولننشئ مكوّن الترويسة أولًا باتباع الخطوات التالية:

1. أوقف تشغيل الخادم بالانتقال إلى الطرفية والضغط على الاختصار Ctrl + C.
2. أدخِل الأمر التالي في الطرفية:

ember generate component header

سينشئ هذا الأمر بعض الملفات الجديدة، كما هو موضّح في ناتج الطرفية النهائي التالي:

installing component
  create app/components/header.hbs
  skip app/components/header.js
  tip to add a class, run `ember generate component-class header`
installing component-test
  create tests/integration/components/header-test.js

يُعَدّ الملف header.hbs بأنه ملف القالب الذي سيتضمّن بنية HTML لمكوّن الترويسة فقط، وسنضيف لاحقًا الوظائف الآلية المطلوبة مثل روابط البيانات والاستجابة لتفاعل المستخدِم وما إلى ذلك.

اقتباس

ملاحظة: الملف header.js -الموضح على أنه يجب تخطيه- مخصَّص للاتصال بالصنف الداعم للمكوّن Glimmer الذي لا نحتاجه في الوقت الحالي، لأنه مُخصَّص لإضافة التفاعل ومعالجة الحالة، كما يولّد الأمر generate component افتراضيًا مكونات القالب فقط التي تشكّل غالبية المكونات في التطبيقات الكبيرة.

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

لننشئ شيفرة مساعِدة Scaffolding للمكوّنات الأخرى قبل إضافة أيّ شيفرة مكوّن، وبالتالي أدخِل الأوامر التالية في طرفيتك واحدًا تلو الآخر:

ember generate component todo-list
ember generate component todo
ember generate component footer

سترى الآن ما يلي في المجلد todomvc/app/components:

بما أنه أصبح لدينا الآن جميع ملفات بنية المكونات، فيمكننا قص ولصق توصيف HTML لكل مكوّن من الملف application.hbs إلى كل مكوّن من هذه المكوّنات، ثم تعديل الملف application.hbs ليمثّل تجريداتنا الجديدة.

أولًا، يجب تعديل الملف header.hbs ليحوي ما يلي:

<input
  class="new-todo"
  aria-label="What needs to be done?"
  placeholder="What needs to be done?"
  autofocus
>

ثانيًا، كما يجب تعديل الملف todo-list.hbs ليحوي ما يلي:

<section class="main">
  <input id="mark-all-complete" class="toggle-all" type="checkbox">
  <label for="mark-all-complete">Mark all as complete</label>

  <ul class="todo-list">
    <Todo />
    <Todo />
  </ul>
</section>

اقتباس

ملاحظة: العنصر الوحيد الذي ليس عنصر HTML في الملف todo-list.hbs الجديد هو استدعاء المكوّن <Todo /‎>، إذ أنّ استدعاء المكوّن في Ember مشابه للتصريح عن عنصر HTML ولكن يبدأ بحرف كبير، والأسماء مكتوبة بحالة الجَمل للأحرف الكبيرة Upper Camel Case، كما سترى مع العنصر <TodoList /‎> لاحقًا، وستحل محتويات الملف todo.hbs الآتية محل المكوّن <Todo /‎> في الصفحة المُصيَّرة أثناء تحميل تطبيقنا.

ثالثًا، أضف ما يلي إلى الملف todo.hbs:

<li>
  <div class="view">
    <input
      aria-label="Toggle the completion of this todo"
      class="toggle"
      type="checkbox"
    >
    <label>Buy Movie Tickets</label>
    <button
      type="button"
      class="destroy"
      title="Remove this todo"
    ></button>
  </div>

  <input autofocus class="edit" value="Todo Text">
</li>

رابعًا، يجب تعديل الملف footer.hbs بحيث يحوي ما يلي:

<footer class="footer">
  <span class="todo-count">
    <strong>0</strong> todos left
  </span>

  <ul class="filters">
    <li>
      <a href="#">All</a>
      <a href="#">Active</a>
      <a href="#">Completed</a>
    </li>
  </ul>

  <button type="button" class="clear-completed">
    Clear Completed
  </button>
</footer>

خامسًا، أخيرًا، يجب تعديل محتويات الملف application.hbs بحيث تُستدَعى المكونات المناسبة كما يلي:

<section class="todoapp">
  <h1>todos</h1>

  <Header />
  <TodoList />
  <Footer />

</section>

سادسًا، شغِّل الأمر npm start في الطرفية مرةً أخرى بعد إجراء هذه التعديلات، ثم توجَّه إلى المضيف المحلي http://localhost:4200 للتأكد من أنّ تطبيق المهام لا يزال يبدو كما كان قبل إعادة البناء.

لاحظ كيف يعرض كلا عنصري المهام العبارة "Buy Movie Tickets" بسبب استدعاء المكوّن نفسه مرتين، ونَص المهمة ثابت فيه.

الخلاصة

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

ترجمة -وبتصرّف- للمقال Ember app structure and componentization.

اقرأ أيضًا

• المقال السابق: مقدمة إلى إطار العمل Ember

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

ما هي لغة HTML؟

يَرمز HTML إلى اختصار لغة ترميز النص الفائق، وهذا يعني أنها لا تنتمي إلى لغات البرمجة. لا تنفِّذ HTML أوامر برمجية في الحاسوب باستخدام برنامجٍ نصي، بل تضع علامات على النص الموجود في صفحة الإنترنت، مثل: مائل، غامق، المحاذاة، الحجم، وغير ذلك. تمنحك HTML أيضًا القدرة على تضمين الصور والروابط. ومع آخر إصدار HTML5، بات عرض النص والوسائط يتمّ بطرائق جديدة ومثيرة.

تُضمّن رموز HTML داخل وسوم، ومن السهل جدًا قراءتها. قد تبدو صفحة HTML البسيطة كما يلي:

<html dir="rtl" lang="ar">
  <head>
    <title>يكتب عنوان الصفحة هنا.</title>
  </head>
  <body>
    <h1>هذا عنوان الصفحة الذي يراه المستخدمون</h1>
      <p>محتوى الصفحة</p>
      <p>المزيد من المحتوى</p>
      <p>المزيد من المحتوى </p>
    <h2>عنوان فرعي</h2>
      <p><img src="https://bit.ly/3OhDvUC"></p>
      <p><a href="https://academy.hsoub.com/">رابط أكاديمية حسوب</a></p>
  </body>
</html>

عند معالجة هذه الرموز داخل المتصفح، ستظهر الصفحة كما يلي:

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

العريض

عندما تضع وسم <strong> حول النص، فأنت تطلب من المتصفح أن يجعل النص عريضًا. يمكنك أيضًا استخدام وسم <b> ببساطة، لكنّ استخدام وسم <strong> أكثر أمانًا؛ بسبب تفضيل جوجل ومحركات البحث الأخرى للعناصر الدلالية المشابهة له.

يمكنك جعل هذا <strong> النص عريضًا </strong> باستخدام هذا الوسم.

المائل

يُستخدم وسم <Em> للتوكيد، ويمثل أيضًا الطريقة الدلالية في HTML لاستخدام الخط المائل. كما يمكنك استخدام <i> بدلًا من ذلك.

يمكنك وضع النص <em> بخط مائل <em> باستخدام هذا الوسم.

التسطير

يُستخدم وسم <u> لتسطير النص. عامةً، لا يُستخدم التسطير بكثرة، وذلك لأن الروابط تكون مسطّرة افتراضيًا؛ مما جعل استخدام النص المسطّر العادي مرتبطًا بتجربة المستخدم السيئة، بسبب عدم قدرة المستخدمين على النقر على النص المسطّر العادي.

يمكنك <u> تسطير النص </u> باستخدام هذا الوسم.

العناوين

ربما تكون وسوم العناوين هي الوسوم الأكثر استخدامًا من بين جميع رموز HTML الأساسية. تُستخدم وسوم <h1> و<h2> و<h3> و<h4> و<h5> و<h6> لتقسيم المحتوى إلى أقسام.

احرص فقط على استخدام العناوين بترتيبٍ هرمي. تُوجِّهكَ جوجل إلى إدراج العناوين أسفل بعضها، لذا، تأكد من استخدام <h2> فقط أسفل <h1>، وليس أسفل <h3>.

على الرغم من أن معظم الصفحات ستحتوي على <h1> واحد فقط، إلا أن جوجل لن تعاقبك على وجود المزيد. فقط ضع في حسبانك أن استخدام <h1> مرةً أخرى سيعيد تعيين التداخل في الصفحة (أو على الأقل في قسمٍ معيّن من الصفحة).

<h2> إن عنوان H2 هو العنوان الأكثر استخدامًا </h2>

لاحظ أن أغلب العناوين الواردة في هذا المقال هي H2.

الصور

يُعَد إدراج الصور أحد أكثر الأشياء المفيدة التي يمكنك فعلها باستخدام لغة HTML الترميزية، فقد أَخرجت هذه الميزة الإنترنت من أساليب عرض المحتوى النمطية إلى أخرى أكثر حيوية، كالتي نراها اليوم؛ وكل ما عليك فعله هو الحصول على عنوان URL للصورة التي تريدها، واستخدام وسم <img src> (الذي يشير اختصارًا إلى عبارة مصدر الصورة Image Source) مرةً واحدةً فقط، كما يلي:

<img src="https://bit.ly/3OhDvUC" alt="صورة شعار أكاديمية حسوب">

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

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

الروابط

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

<a href="https://academy.hsoub.com/">رابط أكاديمية حسوب، وهذا هو النص الذي سيكون قابلًا للنقر عليه</a>

يُغلق وسم الرابط ببساطة باستخدام وسم </a>، ويمكنك استخدام أي نص تريده بينهما. سيكون هذا هو نفسه الرابط القابل للنقر، ويسمى نص الرابط Anchor Text.

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

<a href="https://academy.hsoub.com/"><img src="https://bit.ly/3OhDvUC" alt="صورة شعار أكاديمية حسوب">

المزيد من خصائص الروابط

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

• توضح خاصية rel نوع العلاقة بين الرابط والصفحة الحالية، مثل استخدام noreferrer لمنع تتبّع حركة الإحالة إليك.
• تخبر خاصية target المتصفح بكيفية فتح الرابط، مثل استخدام _blank لفتح الرابط في علامة تبويب جديدة.
• تتوافق خاصية nofollow مع rel، وتخبر محركات البحث أنك لا تريدها أن تتبع موقعك رجوعًا عند الذهاب إلى الرابط المستهدف. هذا أمر جيد عند الربط بمحتوى مثير للجدل أو ما شابه ذلك، كما أنه يمنع الأشخاص من وضع روابط غير مرغوب فيها في التعليقات في موقعك. ومن خلالها، سيكون محتوى موقعك غير متحيّز؛ نظرًا لأنك لا تسمح بأيّ تتبع (روابط خلفية) تفيد المواقع بخلاف استضافتها في موقعك والنقر لفتحها.

توجد المزيد من هذه الخاصيات، ولكنّ ما سبق ذكره سيشكّل غالبية ما ستحتاجه.

<a href="https://academy.hsoub.com/" rel="nofollow" target="_blank">رابط موقع أكاديمية حسوب مع تفعيل وضع عدم التتبع والفتح في تبويب جديد</a>

نص يتوسطه خط

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

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

تستطيع استخدام هذا الوسم من أجل إنشاء <del> نص يتوسطه خط </del> في لغة HTML.

القوائم

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

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

لإنشاء القوائم، ضع حولها وسم <ul>، أو وسم <ol> للقوائم غير المرتبة أو المرتبة على التوالي، وحول كل عنصر في القائمة وسم <li>.

<ul>
<li> عنصر من قائمة غير مرتبة  </li>
<li> عنصر آخر  </li>
</ul>

<ol>
<li> عنصر من قائمة مرتبة مرقمة   </li>
<li><a href="https://academy.hsoub.com/">رابط داخل عنصر بقائمة</a></li>
<li><strong> هذا النص غامق </strong> وهذا لا </li>
</ol>

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

الاقتباس

ستحتاج في مرحلة ما من حياتك المهنية في الووردبريس إلى اقتباس شيءٍ ما ضمن محتواك، ولهذا الأمر يمكنك استخدام وسم <blockquote>. الصق النص الذي نسخته بين وسمي فتح وإغلاق من وسم الاقتباس، وستحصل على نصٍ مقتبس بين علامتي تنصيص.

<blockquote>سيظهر هذا النص بتصميمٍ مختلف لتمييزه على أنه نص مقتبس</blockquote>

الفقرات

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

<p>هذه فقرة أولى</p>
<p>هذه فقرة ثانية</p>

الخطوط الفاصلة والسطر الجديد

قد تحتاج إلى فواصل أخرى بين الفقرات والأقسام، ومن أجل ذلك، يمكنك استخدام وسم <hr> لفصل الفقرات عن بعضها بسطر، ووسم <br/> لنزول سطر جديد.

<hr> يُستخدم هذا الوسم لرسم خط على طول السطر الفاصل بين الفقرة والتي تليها.

أما وسم <br/>، فهو مخصصٌ لنزول سطرٍ جديد، حيث يمكنك استخدامه في منتصف فقرة <p> لنزول سطر دون الخوض في فقرة جديدة، والحفاظ على التصميم والتنظيم. إن وسم <br/> ذاتي الإغلاق، أي لا يمكن أن يحوي أيّ نصٍ داخله، ويُعرف ذلك بالشرطة المائلة في نهاية الوسم.

بالرغم من أن هدف وسمي <hr> و<br/> هو فصل النص عن بعضه، إلا أنه لا يُنصح باستخدامهما، فعندما تصبح أكثر خبرة في استخدام HTML وCSS وJavaScript، ستلاحظ أن استخدام وسم <p> أسهل في استخدام عناصر التصميم معه.

الخاتمة

إن لغة HTML الترميزية مهمة جدًا في شبكة الإنترنت، ويستخدمها الجميع بنفس الطريقة، سواء كانوا مبتدئين في تصميم وإنشاء مواقع الويب، أم مخضرمين، فما زالت رموز HTML الأساسية مستخدمة في جميع المواقع. مهما كان موقعك رائعًا وذا ميزات متطورة، ستحتاج إلى معرفة كل من <href> و<strong> لحل أيّة مشكلة في الروابط، أو جعل النص غامقًا عند موضعٍ معين بسهولة.

ترجمة -وبتصرّف- للمقال How to Create a Custom WordPress User Registration Page لصاحبه B.J. Keeton.

اقرأ أيضًا

• كيفية استخدام مكون HTML مخصص في ووردبريس
• مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس
• كيف تحوِّل قالب HTML ساكِن إلى قالب ووردبريس متجاوب: تخصيص الموقع

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

توفير أيقونات رائعة

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

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

للتأكد من توافق موقعك مع كل المتصفحات، سيتوجب عليك إضافة بعض الوسوم في داخل العنصر <head> الموجود في كل صفحة من صفحات الموقع.

 <!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">

<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">

<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">

متصفحي كروم وأوبرا

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

ملاحظة: يجب أن تكون أحجام الأيقونات من مضاعفات الحجم 48px على سبيل المثال 48px، أو 96px، أو 144px، أو 192px.

متصفح سفاري

يستخدم متصفح سفاري الوسم <link> مع الخاصية rel والتي قيمتها apple-touch-icon للإشارة إلى أيقونة الشاشة الرئيسية.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

تعد الأيقونات مربعة الشكل شفافة اللون ذات الحجم 180px أو 192px والامتداد png مثاليةً للاستخدام مع apple-touch-icon.

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

متصفح انترنت اكسبلورر ونظام التشغيل ويندوز فون

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

<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">

عناصر ألوان المتصفح

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

تتيح المتصفحات (Coast و Chrome و Firefox OS و Safari و Internet Explorer و Opera) للمستخدم تخصيص ألوان عناصر المتصفح وحتى عناصر من النظام الأساسي باستخدام الوسم meta.

تخصيص ألوان القالب في متصفحي أوبرا وكروم

لضبط ألوان القالب الخاص بمتصفح كروم في نظام التشغيل أندرويد استخدم عنصر meta الخاص بألوان القالب.

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">

تخصيص تنسيق متصفح سفاري

يسمح متصفح سفاري بتنسيق شريط الحالة وتخصيص صورة بدء التشغيل.

تحديد صورة بدء التشغيل

يعرض متصفح سفاري افتراضيًا شاشةً فارغةً أثناء وقت التحميل وبعد عدة تحميلات للموقع يعرض لقطة شاشة لآخر حالة في التطبيق، من الممكن منع هذا من خلال إجبار متصفح سفاري على عرض صورة بدء تشغيل بشكل صريح، من خلال إضافة وسم link مع الخاصية rel=apple-touch-startup-image انظر للمثال التالي:

<link rel="apple-touch-startup-image" href="icon.png">

يجب أن تكون الصورة بحجم محدد يلائم شاشة الجهاز المستهدف وإلا فلن يستخدمها، للحصول على مزيد من التفاصيل راجع العنوان التالي Safari Web Content Guidelines.

على الرغم من ندرة التوثيقات المقدمة من شركة آبل لهذا الموضوع، إلا أن مجتمع المطورين توصل إلى طريقة يستطيع من خلالها دعم الأجهزة المختلفة وذلك باستخدام media queries لتحديد الجهاز من ثم تحديد الصورة المناسبة له، يمكنك الاطلاع على هذا المثال لتتضح الصورة أكثر tfausak's gist.

تغيير مظهر شريط الحالة

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

<meta name="apple-mobile-web-app-status-bar-style" content="black">

لقطة شاشة للون الأسود نصف شفاف

لقطة شاشة للون الأسود

ترجمة وبتصرف للمقال Icons & Browser Colors developers.google من موقع developers.google.

اقرأ أيضًا

• أفضل 12 أداة انتقاء للألوان لمصممي الويب

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

أدى اعتماد هيكلية تطبيقات الصفحة الواحدة Single Page App، واختصارًا SPA، مع خدمة الواجهة البرمجية API لتصيير التطبيقات إلى صعوبات، من بينها التعامل مع ردود JSON للواجهة البرمجية، وإدارة حالة التطبيق بين طبقتين، ما يؤدي لزيادة كلفة وقت التطوير، ويبطئ إصدار النسخ الجديدة، ويعيق عجلة التطوير.

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

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

قد يكون إطار عمل روبي أون ريلز Ruby on Rails أفضل إطار يركز على توفير وقت التطوير، كما يمكنك تطوير العروض ضمن بنية MVC باستخدام مكونات العروض ViewComponents، وكذلك الاستعانة بمكتبتي CableReady و StimulusReflex لإضافة التفاعلية لتطبيقاتك، وسنتحدث عن إطار ريلز لاحقًا.

البداية من أطر العمل

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

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

استخدمت جافاسكريبت في كل شيء

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

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

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

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

الكلفة المضاعفة للتحسن الضئيل

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

كنا نظهر نفس المكون السابق عن طريق توفير عدة نجوم في صور GIF للمستخدم، ولكل منها رابط يشير لنفس المسار، مع اختلاف قيمة معامل التقييم لكل منها، وعلى طرف الخادم كنا نأخذ القيمة المرسَلة ونحفظها ضمن قاعدة البيانات، ونعيد إرسال صفحة HTML كاملة للمتصفح ليعيد تصييرها، حتى أنه كان بالإمكان استخدام أجاكس AJAX لإتمام هذه العملية في الخلفية دون الحاجة لإعادة تحديث الصفحة بالكامل، وإذا فرضنا أن الطريقة السابقة تكلف المطور قيمة x زمنيًا وماديًا، ولن نذكر كلفة الفرص الضائعة نتيجة التأخير في إطلاق المزايا الجديدة، فستكلف الطريقة التي تعتمد Ajax في التحديث x+n، حيث n كلفة برمجة وإدارة هذه الطريقة باستخدام جافاسكريبت، وستزيد كلما اعتمد تطبيقنا على جافاسكريبت أكثر، وكلما زاد تعقيده.

نكتب جافاسكريبت في طرف الخادم حاليًا في تطبيقات الصفحة الواحدة، ونستخدم قوالب JSX وHandlebar لتصيير المكونات، ونستخدم شيفرةً لحفظ حالة التطبيق في مستودع الواجهة الأمامية، ثم نرسل طلب PUT إلى واجهة برمجة التطبيق API، حيث سنكتب شيفرةً مسؤولةً عن معالجة الطلب، وطبقةً لتحويل JSON إلى سلاسل (ربما مع الشيرة الوهمية للنموذج) لتحزيم الرد، وشيفرةً في الواجهة الأمامية لتحديث -إعادة تصيير- المكون بعد تلقي الرد، وبعض منطق التفريع للتراجع وإعادة تصيير تغير الحالة من طرف العميل عند فشل الواجهة الخلفية، وسيزيد كل هذا من كلفة وقت وأجرة المطور أكثر من x+n، وإذا تكوّن فريق العمل من فريق للواجهات الأمامية وآخر للواجهات الخلفية، فستضاعف هذه الكلفة فورًا في الحالات التي ستحتاج فيها لعدة أشخاص لإنهاء التضمين، وستكون كل هذه المشاكل التي تأتي مع تطبيقات الصفحة الواحدة على حساب هدف العمل في السباق للتواجد في السوق، وتوفير منتجات تهمّ الأشخاص المحتاجين إليها.

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

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

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

مقابس الويب WebSockets

بدأت المتصفحات الحديثة بدعم مقابس الويب عام 2011، وهي الآن مدعومة في كل المتصفحات، ويمكنك الحصول على اتصال مزدوج عبر المقبس بين المتصفح والخادم بالاستعانة بالقليل من جافاسكريبت بجهة العميل، حيث يمكن للبيانات المرور بكلا الاتجاهين، ويمكن دفعها من كلا الطرفين في أي وقت، دون الحاجة لتدخل المستخدم، كما تطورت صناعة الألعاب، وذهبت باتجاه الألعاب السحابية، ولن يكون مستقبل تطبيقات الويب في الذهاب أكثر باتجاه نموذج خادم/عميل، بل على العكس سيذهب باتجاه جعل العميل يعمل مثل طرفية بطبقة رقيقة، تُصيِّر حالة التطبيق بترميز مفهوم للبشر، وتوفر مقابس الويب طبقة اتصال سهلةً وسريعةً، تتجه فيها البيانات من الخادم إلى البشر مباشرةً.

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

HTML عبر مقابس الويب

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

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

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

يمكننا أيضًا تنفيذ مكونات ضمن طريقة الاعتماد على مقابس الويب، إذ يمكن أن ننظر إليها على أنها تجعل الخادم طبقةً كبيرةً والعميل طبقةً خفيفةً، وكذلك مكوناتنا، وكما كنا نفعل في السابق يمكننا جعل المكون جذابًا، وينفذ الكثير من الأمور المفيدة للمستخدم باستخدام جافاسكريبت، ثم نطلب من الخادم ترميز HTML بعد التحديث، ونغير شجرة DOM وفقًا لذلك، دون الحاجة لإدارة مخزن الحالة في طرف العميل لحالة المكونات، حيث أصبحت المكونات تٌُصيّر نفسها لتظهر تمامًا كما حددها الخادم، وسيُرسل الخادم لنا ترميز HTML فلا حاجة لاستخدام قوالب JSX أو Handlebar أو أي قوالب طرف عميل أخرى، فالمتحكم هو الخادم دومًا، حيث يُصيِّر حالة المكونات الأولية، ويحدّث شكلها مع كل تغيير في الحالة، وكل ذلك عبر المقبس.

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

هل هذه الطريقة معقدة أو مكلفة أو تحتاج لبنية تحتية ما؟

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

انتشرت هذه الطريقة وأنشئت لها إضافات ومكتبات وإعدادات لمختلف اللغات وأطر العمل، فمثلًا يوجد Socketpuppet لإطار ديجانغو Django، وLiveView لإطار فونكس Phoenix، ويمكنك البحث عن مكتبات توفر دعمًا للاتصال عبر مقابس الويب لإطار العمل المفضل لديك، مما سيغير طريقة تفكيرك حول هيكلية التطبيقات، ثم حاول بناء تطبيق صغير بواسطة ذلك، وستشعر بمتعة وسرعة إرسال أجزاء HTML عبر المقبس، وستحتاج لعقلية جديدة وميزات منفَّذة جيدًا لنجاح شركتك الناشئة.

إطار عمل روبي أون ريلز Ruby on Rails

عند إضافة آخر إصدار كل من Turbolinks وStimulus وStimulusReflex وCableReady وViewComponent إلى إطار العمل روبي أون ريلز ستتمكن من العمل على تطبيق تفاعلي يشعرك أنك تبني تطبيق ريلز كلاسيكيًا وأكثر عصريةً، بالإضافة إلى مكونات تطبيقات الصفحة الواحدة ضمن مستودع واحد لكل التطبيقات، ومزايا التصيير من طرف الخادم، والتخزين المؤقت لقطع HTML، وتحسين محركات البحث، وكافة مزايا الأمان، وما يماثلها من مزايا، وستجد العديد من الأدوات التي ستخدمك لبناء مزايا كنت سابقًا تبتعد عنها لصعوبة بنائها.

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

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

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

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

يشاركنا أوبي فرناندز Obie Fernandez صاحب كتاب "على طريقة روبي The Ruby Way" ذلك الرأي، ويؤمن راس هانيمان Russ Hanneman أن تلك الطريقة مع استخدام StimulusReflex هي المستقبل، وقدّم الأشخاص في بيزكامب Basecamp (مؤسسو ريلز الأوائل) وجهة نظرهم عن تلك الطريقة Hotwire.

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

يجب عليه الاطلاع على ريلز التفاعلي مع StimulusReflex وباقي المكتبات التي ستتيح مساحةً من التطبيقات الجديدة كليًا، لكل من يعاني مع مسارات JSON على الخادم أو مع JSX.

ترجمة -وبتصرف- للمقال "The Future of Web Software Is HTML-over-WebSockets" لصاحبه Matt E. Patterson.

اقرأ أيضًا

• كيفية كتابة تطبيقات الويب
• تطبيقات الويب التي تعمل دون اتصال – الجزء الأول
• التخزين المؤقت (Cache) ومقابس الويب (Webscockets) في PHP
• دليل: تعلم لغة HTML

تعد بنية هيكل التطبيق App Shell هي إحدى الطرق المستعملة لبناء تطبيقات الويب التقدمية Progressive Web App -تختصر إلى PWA- والتي تعمل بكفاءة وسرعة على شاشات المستخدمين، تمامًا مثل تلك التطبيقات التي بنيت بلغات نظام التشغيل الأصيلة native application.

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

يعد هيكل التطبيق هو تطوير على تطبيقات الويب أحادية الصفحة single-page applications التي يتم تشغيلها باستخدام أكواد كبيرة من جافاسكربت، ويعتمد هيكل التطبيق على تخزين هيكل التطبيق الأساسي في الذاكرة المؤقتة باستخدام عامل الخدمة service worker ليشغل التطبيق، ثم بعد ذلك نحصل على المحتوى الخاص بكل صفحة في التطبيق باستخدام جافاسكربت، ويتلخص الهدف الأساسي من استخدام التطبيقات الهيكلية في الحصول على بنية "HTM" الأساسية الخاصة بالتطبيق.

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

متى يستخدم نموذج هيكل التطبيق

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

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

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

مزايا استعمال نموذج هيكل التطبيق

استخدام هيكل التطبيق مع عامل الخدمة سيوفر هذه المزايا:

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

بنية هيكل التطبيق يجب أن تكون مثاليةً وتوفر:

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

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

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

كيفية بناء هيكل تطبيق

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

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

مثال لهيكل تطبيق

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

تُخزَّن البنية الأساسية وواجهة التطبيق في الذاكرة المحلية باستخدام عامل خدمة service worker، لذا سيحمل التطبيق فقط المكونات الجديدة أو التي حصل عليها تغيير في التحميلات القادمة بدلًا من تحميل كل شيء.

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

• شيفرات HTML و CSS والتي تشكل الواجهة والبنية الأساسية للتطبيق، وكامل آليات التنقل بين مكونات التطبيق، والمكان المخصص للمحتويات التي ستعرض داخل التطبيق.
• ملف جافا سكريبت الخارجي app.js والذي من مهامه إدارة آليات التنقل في واجهة التطبيق، ويعمل على معالجة البيانات القادمة من الخادم من خلال إدارة عمليات العرض والتخزين من خلال تخزين البيانات محليًا باستخدام إحدى آليات التخزين مثل IndexedDB.
• ملف "web app manifest" ومحمل عامل الخدمة service worker لتمكين خدمات التطبيق في وضع عدم الاتصال، فيوفر ملف web app manifest بيانات عن تطبيق الويب التقدمي بصيغة JSON، والتي يحتاجها المتصفح لمعرفة كيفية التصرف مع التطبيق عند تثبيته على الحواسيب أو الهواتف المحمولة الخاصة بالمستخدمين.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>App Shell</title>
  <link rel="manifest" href="/manifest.json">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="styles/inline.css">
</head>

<body>
  <header class="header">
    <h1 class="header__title">App Shell</h1>
  </header>

  <nav class="nav">
  ...
  </nav>

  <main class="main">
  ...
  </main>

  <div class="dialog-container">
  ...
  </div>

  <div class="loader">
    <!-- Show a spinner or placeholders for content -->
  </div>

  <script src="app.js" async></script>
  <script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  }
  </script>
</body>
</html>

تخزين هيكل التطبيق

يمكن تخزين هيكل التطبيق باستخدام عامل خدمة service worker مكتوب يدويًا أو باستخدام إحدى الأدوات الثابتة التي توفر إنشاء عامل خدمة مثل أداة sw-precache (أصبحت أداة قديمة ومؤرشفة).

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

تخزين هيكل التطبيق يدويا

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

var cacheName = 'shell-content';
var filesToCache = [
  '/css/styles.css',
  '/js/scripts.js',
  '/images/logo.svg',
  '/offline.html',
  '/',
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

تخزين هيكل التطبيق باستخدام sw-precache

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

يوضح المثال التالي استخدام "sw-precache" بصفته جزءًا من شيفرة "gulp" المسؤولة عن عملية البناء.

gulp.task('generate-service-worker', function(callback) {
  var path = require('path');
  var swPrecache = require('sw-precache');
  var rootDir = 'app';

  swPrecache.write(path.join(rootDir, 'service-worker.js'), {
    staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif}'],
    stripPrefix: rootDir
  }, callback);
});

ملاحظة: تكمن فائدة عامل خدمة التخزين المسبق sw-precache في التخزين المؤقت لموارد تطبيقك الثابتة في وضع عدم الاتصال، أما خلال تشغيل البرنامج والتعامل مع الموارد الديناميكية في التطبيق فمن المفضل استعمال المكتبة المتكاملة sw-toolbox.

الخلاصة

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

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

ترجمة وبتصرف للمقال The App Shell Model developers.google من موقع developers.google.

اقرأ أيضًا

• ميزات تطبيق الويب التقدمي PWA
• نماذج اقتراحات تثبيت تطبيقات الويب التقدمية PWA
• توفير تجربة تثبيت مخصصة داخل تطبيق الويب التقدمي PWA
• جعل تطبيق الويب التقدمي PWA يبدو كتطبيق أساسي في نظام التشغيل

تعرفنا في المقال السابق مكونات الويب: عناصر HTML المخصصة وقوالبها على عناصر HTML المخصصة وكيفية إنشائها وسنكمل التعرف على موضوع مهم في هذا الصدد وهو شجرة DOM الخفية Shadow DOM -والتي تترجم أيضًا إلى ظل شجرة DOM- تستخدَم للتغليف encapsulation، والتي تسمح لكل مكوِّن ويب مخصص أن يمتلك شجرةً خفيةً لا يمكن للمستند الرئيسي الوصول إليها صدفةً، وقد تمتلك قواعد تنسيق خاصة وغير ذلك من الخواص.

شجرة DOM الخفية

هل لديك فكرة عن مدى تعقيد إنشاء وتنسيق أدوات تحكم المتصفح؟

لنفترض وجود العنصر <"input type="range> مثلًا:

يستخدم المتصفح ضمنيًا DOM/CSS لرسم أدوات التحكم، ولا تظهر بنية شجرة DOM لنا عادةً، لكن يمكننا رؤيتها باستخدام أدوات التطوير بتفعيل الخيار Show user agent shadow DOM من إعدادات أدوات المطور Dev Tools تحديدًا قسم Elements في المتصفح Chrome مثلًا.

ستبدو الشجرة DOM للعنصر السابق كالتالي:

ما نراه تحت العنوان shadow-root# يسمَّى شجرة DOM المخفية، ولا يمكن الحصول على عناصر شجرة DOM المخفية المضمنة باستخدام استدعاءات JavaScript النظامية أو المحددات selectors، فهذه العناصر ليست أبناءً نظاميةً، بل هي تقنية تغليف متقدمة.

سنرى في المثال السابق السمة المفيدة pseudo، وهي سمة غير قياسية وموجودة لأسباب تاريخية، حيث يمكننا استخدامها لتنسيق العناصر الفرعية باستخدام CSS كالتالي:

<style>
/* make the slider track red */
input::-webkit-slider-runnable-track {
  background: red;
}
</style>

<input type="range">

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

الشجرة الخفية Shadow tree

يمكن لكائن DOM أن يمتلك نوعين من الأشجار الفرعية:

1. شجرة ظاهرة Light tree: وتمثل شجرةً فرعيةً نظاميةً مكوّنةً من عناصر HTML أبناء، وجميع الأشجار التي رأيناها في المقال السابق من هذا النوع.
2. شجرة خفية Shadow tree: شجرة DOM فرعية لا تظهر على صفحة HTML، بل تكون مخفيةً من الظهور والرؤية.

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

يمكن استخدام الشجرة الخفية في العناصر المخصصة لإخفاء المكوّنات الداخلية وتطبيق تنسيق خاص بالمكوِّن.

يخفي العنصر <show-hello> على سبيل المثال شجرة DOM الداخلية ضمن شجرة خفية:

<script>
customElements.define('show-hello', class extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `<p>
      Hello, ${this.getAttribute('name')}
    </p>`;
  }
});
</script>

<show-hello name="John"></show-hello>

ستظهر النتيجة في أدوات تطوير متصفح بالشكل التالي، حيث تكون جميع المحتويات تحت "shadow-root#":

يُنشئ الاستدعاء ({...:elem.attachShadow({mode شجرةً مخفيةً أولًا، لكن توجد عقبتان:

1. يمكن إنشاء جذر مخفي واحد لكل عنصر.
2. يجب أن يكون العنصر عنصرًا مخصصًا، أو أحد العناصر التالية:
   • "article".
   • "blockquote".
   • "body".
   • "div".
   • "footer".
   • "h1…h6".
   • "header".
   • "main".
   • "nav".
   • "p".
   • "section".
   • "span".

ولا يمكن لغير هذه العناصر استضافة شجرة خفية.

يضبط الخيار mode مستوى التغليف، ويمكن أن يحمل إحدى القيمتين:

• "open": يمكن أن نحصل على الجذر الخفي من خلال elem.shadowRoot، ويمكن لأي شيفرة الوصول إلى الشجرة الخفية لــ elem.
• "closed": ويعيد الأمر elem.shadowRoot القيمة null دائمًا.

يمكن الوصول إلى شجرة DOM الخفية عن طريق المرجع الذي يعيده attachShadow فقط، ومن الممكن أن يكون مخفيًا ضمن صنف، وتكون الأشجار الخفية الأصلية المتعلقة بالمتصفح -مثل <input type="range"‎>- من النوع المغلق، ولا يمكن الوصول إليها، ويشابه الجذر الخفي shadow root الذي يعيده attachShadow العناصر، ويمكن إظهاره باستخدام innerHTML أو توابع DOM مثل append.

يُدعى العنصر الذي يمتلك جذرًا خفيًا بمضيف الشجرة الخفية shadow tree host، ويتاح للاستخدام ضمن الخاصية host للجذر الخفي:

//  لن يعيد شيئًا elem.shadowRoot وإلا {mode: "open"} بافتراض أن 
alert(elem.shadowRoot.host === elem); // محقق

التغليف Encapsulation

تفصَل شجرة DOM الخفية عن المستند الرئيسي:

1. لا تكون عناصر شجرة DOM الخفية مرئيةً للتابع querySelector من شجرة DOM الظاهرة، وقد تمتلك عناصر شجرة DOM الخفية معرفات id تتعارض مع تلك الموجودة في شجرة DOM الظاهرة، فهي فريدة ضمن الشجرة الخفية فقط.
2. لشجرة DOM الخفية أوراق تنسيق خاصة بها، إذ لا تُطبق قواعد التنسيق الخارجية عليها.

إليك مثالًا:

<style>
  /*(1)  #elem  لن يطبق التنسيق على الشجرة الخفية للعنصر*/
  p { color: red; }
</style>

<div id="elem"></div>

<script>
  elem.attachShadow({mode: 'open'});
    // (للشجرة الخفية تنسيقها الخاص (2
    elem.shadowRoot.innerHTML = `
    <style> p { font-weight: bold; } </style>
    <p>Hello, John!</p>
  `;

  // مرئية فقط للاستعلامات التي تجري داخل الشجرة <p>  (3)
  alert(document.querySelectorAll('p').length); // 0
  alert(elem.shadowRoot.querySelectorAll('p').length); // 1
</script>

تشير (1) و(2) و(3) أعلاه إلى الآتي:

• (1) لا يؤثر تنسيق الصفحة على تنسيق الشجرة الخفية.
• (2) يؤدي التنسيق داخل الشجرة عمله بطريقة صحيحة.
• (3) للحصول على العناصر من الشجرة الخفية، لا بدّ من الاستعلام عنها من داخل الشجرة.

تقليم شجرة DOM الخفية وعملية التركيب

تحتاج العديد من المكوّنات إلى محتوىً لتصييره، مثل النوافذ ومعارض الصور والقوائم وغيرها، ويتوقع العنصر المخصص <custom-tabs> محتوى نافذة ليمرَّر إليه، على غرار العناصر الأصلية المضمنة في المتصفح مثل <select> -عدا عناصر <option>-، ويحتاج العنصر <custom-menu> كذلك إلى محتوى على شكل عناصر قائمة.

قد تبدو الشيفرة التي تستعمل العنصر <custom-menu> كالتالي:

<custom-menu>
  <title>Candy menu</title>
  <item>Lollipop</item>
  <item>Fruit Toast</item>
  <item>Cup Cake</item>
</custom-menu>

سيتمكن بعدها مكوّننا من تصيير المحتوى بصورة صحيحة، على شكل قائمة جميلة لها عنوان وعناصر ومعالجات لأحداث القائمة وغيرها، ولكن كيف سننجز ذلك؟ يمكننا أن نحاول تحليل محتوى العناصر وأن ننسخ أو نعيد ترتيب عقد DOM ديناميكيًا، لكن إذا كنا سننقل عناصر إلى شجرة DOM الخفية shadow DOM، فلن يُطبَّق تنسيق CSS الموجود ضمن المستند عليها، وبالتالي سنفقد التنسيق المرئي، وسيحتاج ذلك إلى كتابة بعض الشيفرة، ولحسن الحظ ليس علينا فعل ذلك، إذ تدعم شجرة DOM الخفية عناصر <slot> التي تُملأ تلقائيًا بالمحتوى الموجود في شجرة DOM الظاهرة وشبهنا هذه العملية بعملية "التقليم" التي تجرى على الأشجار من قص وإنشاء فتحة في الشجرة ووضع فرع في الفتحة من شجرة أو نوع آخر لذلك أطلقنا عليها هذا الاسم وسنستعمل اسم "فتحة" المقابل للكلمة الأجنبية slot (اسم العنصر) للسهولة.

الفتحات المسماة Named slots

لنلق نظرةً على طريقة عمل التقليمات في هذا المثال البسيط، حيث توفر شجرة DOM الخفية للعنصر المخصص <user-card> فتحتين تُملآن من شجرة DOM الظاهرة:

<script>
customElements.define('user-card', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <div>Name:
        <slot name="username"></slot>
      </div>
      <div>Birthday:
        <slot name="birthday"></slot>
      </div>
    `;
  }
});
</script>

<user-card>
  <span slot="username">John Smith</span>
  <span slot="birthday">01.01.2001</span>
</user-card>

يعرّف العنصر <"slot name="X> في شجرة DOM الخفية نقطة إدراج، وهو المكان الذي تُصيَّر فيه العناصر التي تعرف فيها الخاصية "slot="X، ثم ينفِّذ المتصفح عملية تركيب composition، إذ يأخذ عناصر من شجرة DOM الظاهرة، ويصيّرها ضمن الفتحات الملائمة ضمن شجرة DOM الخفية، وهكذا سنحصل في نهاية الأمر على مكوِّن يمكن ملؤه بالبيانات، وهذا ما نريده.

إليك بنية الشجرة DOM بعد تنفيذ السكربت مهملين عملية التركيب:

<user-card>
  #shadow-root
    <div>Name:
      <slot name="username"></slot>
    </div>
    <div>Birthday:
      <slot name="birthday"></slot>
    </div>
  <span slot="username">John Smith</span>
  <span slot="birthday">01.01.2001</span>
</user-card>

لقد أنشأنا شجرة DOM خفيةً، وسنجدها تحت ‎#shadow-root. سيمتلك العنصر الآن شجرتي DOM الظاهرة والخفية.

سيبحث المتصفح -لأغراض التصيير- عن السمة "..."=slot لكل <"..."=slot name> التي لها نفس الاسم في شجرة DOM الظاهرة، وستُصيَّر هذه العناصر ضمن الفتحات.

وعندها ستسمى النتيجة شجرة DOM المسطّحة flattened DOM.

<user-card>
  #shadow-root
    <div>Name:
      <slot name="username">
        <!-- slotted element is inserted into the slot -->
        <span slot="username">John Smith</span>
      </slot>
    </div>
    <div>Birthday:
      <slot name="birthday">
        <span slot="birthday">01.01.2001</span>
      </slot>
    </div>
</user-card>

لقد أوُجِدت شجرة DOM المسطحة لأغراض التصيير ومعالجة الأحداث، قد تبدو الطريقة التي تُعرض بها الأمور افتراضيةً نوعًا ما، لكن لن تُنقَل العقد في المستند فعليًا، فمن السهل التحقق من أنّ العقد لا تزال في مكانها بتنفيذ الأمر querySelectorAll.

alert( document.querySelectorAll('user-card span').length ); // 2

تُشتقّ شجرة DOM المسطحة من شجرة DOM الخفية بإدراج الفتحات، حيث يصيّرها المتصفح ويستخدمها في وراثة التنسيق وانتقال الأحداث -وهو ما سنوضّحه لاحقًا-، لكن نظرتها لن تغير JavaScript إلى المستند قبل الوصول إلى الشجرة المسطحة.

ملاحظة: يمكن للأبناء من المستوى الأعلى فقط امتلاك السمة "…"=slot، إذ يمتلك الأبناء المباشرون للمضيف الخفي -وهو العنصر <user-card> في مثالنا- السمة "..."=slot فقط، بينما ستُهمل هذه السمة للعناصر الداخلية. وسيتجاهل المتصفح في المثال التالي العنصر <span> الثاني، فهو ليس ابنًا مباشرًا للعنصر <user-card>:

<user-card>
  <span slot="username">John Smith</span>
  <div>
    <!-- invalid slot, must be direct child of user-card -->
    <span slot="birthday">01.01.2001</span>
  </div>
</user-card>

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

<user-card>
  <span slot="username">John</span>
  <span slot="username">Smith</span>
</user-card>

إليك مثالًا عن شجرة DOM مسطحة تمتلك عنصرين ضمن الفتحة <"slot name="username>:

<user-card>
  #shadow-root
    <div>Name:
      <slot name="username">
        <span slot="username">John</span>
        <span slot="username">Smith</span>
      </slot>
    </div>
    <div>Birthday:
      <slot name="birthday"></slot>
    </div>
</user-card>

المحتوى الابتدائي للعنصر slot

إذا وُضع محتوًى ما ضمن الفتحة <slot>، فسيصبح هو المحتوى الافتراضي حيث سيعرضه المتصفح إذا لم يوجد محتوىً مناسب ضمن شجرة DOM الظاهرة لملء الفتحة. عندها ستكون نتيجة تصيير هذا الجزء مثلًا من شجرة DOM الخفية هي Anonymous إذا لم توجد فتحة باسم "slot="username في شجرة DOM الظاهرة.

<div>Name:
  <slot name="username">Anonymous</slot>
</div>

الفتحة الافتراضية هي أول فتحة بلا اسم

ستكون أول فتحة <slot> في شجرة DOM الخفية غير مالكة لاسم هي الفتحة الافتراضية، وستحصل على كل العقد في شجرة DOM الظاهرة التي لم تُدرج في أي فتحة أخرى. لنضف في المثال التالي فتحةً افتراضيةً للعنصر المخصص <user-card> الذي سيخفي كل معلومات المستخدم غير المدرجة في فتحات:

<script>
customElements.define('user-card', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
    <div>Name:
      <slot name="username"></slot>
    </div>
    <div>Birthday:
      <slot name="birthday"></slot>
    </div>
    <fieldset>
      <legend>Other information</legend>
      <slot></slot>
    </fieldset>
    `;
  }
});
</script>

<user-card>
  <div>I like to swim.</div>
  <span slot="username">John Smith</span>
  <span slot="birthday">01.01.2001</span>
  <div>...And play volleyball too!</div>
</user-card>

سيوضع محتوى شجرة DOM الظاهرة غير المُدرج في المثال السابق ضمن العنصر <fieldset> الذي يحمل تسمية Other information، حيث ستُدرج العناصر ضمن الفتحة واحدًا تلو الآخر، ولذا ستُدرج قطعتا المعلومات معًا ضمن الفتحة الافتراضية.

وستبدو شجرة DOM المسطحة كالتالي:

<user-card>
  #shadow-root
    <div>Name:
      <slot name="username">
        <span slot="username">John Smith</span>
      </slot>
    </div>
    <div>Birthday:
      <slot name="birthday">
        <span slot="birthday">01.01.2001</span>
      </slot>
    </div>
    <fieldset>
      <legend>Other information</legend>
      <slot>
        <div>I like to swim.</div>
        <div>...And play volleyball too!</div>
      </slot>
    </fieldset>
</user-card>

مثال القائمة

لنعد الآن إلى العنصر المخصص الذي أشرنا إليه سابقًا في هذا المقال، حيث يمكن استخدام الفتحات لتوزيع العناصر، إليك ترميز HTML للعنصر المخصص <custom-menu>:

<custom-menu>
  <span slot="title">Candy menu</span>
  <li slot="item">Lollipop</li>
  <li slot="item">Fruit Toast</li>
  <li slot="item">Cup Cake</li>
</custom-menu>