البحث في الموقع

كانت الويب في بداياتها مجرد نصوص عدَّها الكثيرون مملةً، ولحسن الحظ لم يتأخر استخدام الصور -وغيرها من المحتوى الأكثر إمتاعًا- كثيرًا ضمن صفحات الويب، كما هناك الكثير من أنواع الوسائط المتعددة التي يمكن التفكير بها، لكن من المنطقي أن نبدأ مع العنصر المتواضع <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 مع ذلك محبّذًا، فله مشاكل عدة تتعلق بالوصول السهل وتتمركز حول حقيقة أنّ دعم قارئات الشاشة لها غير متوقع، ولن تعرضها معظم المتصفحات ما لم تمرر مؤشر الفأرة فوقها، لذا من الأفضل إدراج معلومات داعمة مثل هذه ضمن نص المقالة الرئيسية في الصفحة بدلًا من ربطها بالصورة. تطبيق: إدراج صورة حان دورك في تجربة الأمر، إذ سيحاول هذا التمرين تحفيزك على تجربة إدراج صورة، لهذا سيزودك بالعنصر <img> وعليك إدراج الصورة الموجودة على العنوان: https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg تذكَّر أننا أشرنا سابقًا إلى عدم قانونية إدراج الصور عبر روابط ساخنة، لكننا سنتغاضى هذه المرة عن الأمر كونه تمرين تدريبي. حاول إذا استطعت أيضًا: إضافة نص بديل، ثم التحقق من أنه يعمل بكتابة عنوان URL للصورة بشكل خاطئ. ضبط الارتفاع height والعرض width الصحيحَين للصورة (تلميح: أبعاد الصورة 200 بكسل عرضًا و 171 ارتفاعًا)، ثم اختبار قيم مختلفة للطول والعرض لرؤية التأثيرات. وضْع عنوان title للصورة. إذا ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر إعادة الضبط Reset، في حين إذا وجدت نفسك تائهًا كليًا، فانقر على زر أظهر الحل Show solution لترى الحل الصحيح. استخدام عنصري الشكل <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>- صورةً حصرًا، فهو حاوية مستقلة يمكن أن: تعبِّر عما تعنيه بطريقة مختصرة وسهلة الفهم. تتواجد في أماكن عدة ضمن تسلسل العناصر السطرية في الصفحات. تزوّد الصفحة بمعلومات أساسية تدعم النص الرئيسي لها. قد يضم الشكل عدة صور أو شذرات (مقاطع) من الشيفرة أو ملفات فيديو أو ملفات صوتية أو جداول أو غير ذلك. تطبيق: إنشاء شكل سنأخذ في هذا التمرين الشيفرة الجاهزة للتمرين التطبيقي السابق ونحولها إلى شكل: غلِّف الشيفرة داخل العنصر <figure>. انسخ النص الموجود داخل السمة title وضَعه داخل العنصر <figcaption> تحت الصورة واحذف بعد ذلك السمة title. إذا ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر إعادة الضبط Reset، في حين إذا وجدت نفسك تائهًا كليًا، فانقر على زر أظهر الحل Show solution لترى الحل الصحيح. إدراج صور للخلفية باستخدام 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، إذ يغطي مفاهيم مثل الصفوف والأعمدة والخلايا والترويسات وكيفية ضبط الخلايا لتمتد على عدة أعمدة وصفوف، كما يعلمك طريقة تجميع الخلايا في العمود نفسه لتنسيقها معًا. ما هو الجدول؟ الجدول هو بنية لهيكلة البيانات على صورة صفوف rows وأعمدة column -أي بيانات مجدولة- لتسهيل عملية البحث عن القيم التي تبدي ترابطًا فيما بينها مثل ربط الأشخاص بأعمارهم أو بالأيام التي يعملون فيها أسبوعيًا أو بأيام التدريب في النادي. استُخدِمت الجداول بكثرة ومنذ زمن بعيد، وتقدِّم الصورة التالية دليلنا على ذلك، فهي مستند لعملية إحصاء في الولايات المتحدة يعود إلى عام 1800: وبالتالي ليس غريبًا أن يهتم مخترعو HTML بإيجاد وسائل لهيكلة بيانات الويب على هيئة جداول. كيف يعمل الجدول؟ الغاية من الجدول واضحة، إذ يسهِّل استخدام الجداول تفسير المعلومات بالربط البصري بين ترويسة عمود وترويسة صف، ولنلق نظرةً على الجدول التالي باحثِين عن كوكب غازي ضخم شبيه بالمشتري Jovian له 62 قمرًا، إذ يمكنك إيجاد الكوكب المطلوب بالربط بين العمود الصحيح و الصف الصحيح. عندما تُنجز الجداول في HTML بالصورة الصحيحة، سيسهل على تقنيات الوصول السهل مثل قارئات الشاشة التعامل مع المحتوى الذي تقدِّمه، أي ينبغي أن يُحسِّن استخدام الجداول تجربة الأشخاص ذوي الإعاقة البصرية وسليمي البصر على حد سواء. تنسيق الجداول ألق نظرةً على الجدول السابق نفسه لكن من خلال مثال مباشر على جيت-هاب، ولاحظ أنّ هذا الأخير أسهل قراءةً من الجدول الذي عرضناه في المقال، وذلك لأننا طبقنا أدنى درجات التنسيق عند بنائه موازنةً بنسخة جيت-هاب. لا نخفيك سرًا أنّ الجداول التي تتمتع بمستوى تنسيق CSS رفيع أنها أكثر تأثيرًا في الويب، لهذا لا بد من الاهتمام جيدًا بهيكلة البيانات في جداول HTML بالإضافة إلى التنسيق الجيد، لكننا سنركز في سلسلة المقالات هذه على الجزء المتعلق بلغة HTML فقط، إذ سنزود الجداول في هذه السلسلة بالحد الأدنى من تنسيقات CSS التي تُسهِّل قراءة محتوياتها موازنةً بالجداول غير المنسقة، كما يمكنك تنزيل ملف CSS و قالب HTML الذي يُستخدم لتطبيق التنسيقات من المستودع المخصص على جيت-هاب، إذ سيمنحك هذان الملفان نقطة انطلاق جيدة عند العمل على جداول HTML. ما الحالات التي لا ينبغي فيها استخدام جداول HTML؟ تُستخدَم الجداول لعرض البيانات القابلة للجدولة فهمي مصممة لهذا الغرض، كما يستخدِمها البعض أيضًا في تخطيط صفحات الويب مثل أن يضم أحد الصفوف الترويسة وآخر يضم أعمدة المحتوى الرئيسي وآخر للتذيل، وهذا أمر خاطئ كليًا، وقد استُخدمت هذه الطريقة في تخطيط الصفحات فيما مضى عندما كان دعم تنسيق CSS في المتصفحات المختلفة متفاوتًا وسيئًا، لكنها أقل انتشارًا في أيامنا هذه، إلا أنك قد تراها بين الفينة والأخرى. إذًا نختصر فنقول: يُعَدّ استخدام تخطيط الجداول بدلًا من تقنيات تخطيط CSS فكرةً سيئةً، وإليك الأسباب الرئيسية: يؤثر تخطيط الجدول على سهولة وصول ذوي المشاكل البصرية: تفسِّر قارئات الشاشة التي يستخدمها فاقدِي البصر وسوم العناصر الموجودة في صفحة HTML وتقرأ محتوياتها، وطالما أنّ الجدول ليس الأداة الصحيحة لتخطيط الصفحة وأنّ توصيفه أكثر تعقيدًا من تقنيات تخطيط CSS، فسيربك مستخدِميها ما تنطقه تلك القارئات. ينتج عن الجداول وسومًا مختلطةً: تضم الجداول هيكليةً أعقد من تلك المستخدَمة عادةً في تخطيط الصفحة، وقد يزيد ذلك من صعوبة كتابة الشيفرة وصيانتها وتنقيحها. الجداول غير متجاوبة تلقائيًا: إذا استخدمت العناصر المناسبة مثل <header> أو <article> أو <div> أو <section>، فسيكون عرضها 100% من عرض العنصر الأب تلقائيًا، ويقاس في المقابل عرض الجداول افتراضيًا وفقًا لحجم محتواها، لذلك يحتاج الأمر إلى قياسات أخرى ليعمل تخطيط الصفحة جيدًا على الأجهزة المختلفة. تطبيق: إنشاء جدول تحدثنا طويلًا عن المفهوم النظري وحان الوقت لنبني جدولًا بسيطًا: انسخ الملفين blank-template.html و minimal-table.css إلى حاسوبك وضعهما في مجلد جديد. يُوضع محتوى كل جدول بين وسمَي البداية والنهاية للعنصر <table>، لذلك ضع عنصرَي الجدول داخل جسم ملف HTML. تُعَدّ الخلية أصغر حاوية ضمن الجدول وننشئها باستخدام العنصر <td> اختصارًا لبيانات جدول table data، ولنضف الشيفرة التالية داخل العنصر <table>: <td>Hi, I'm your first cell.</td> انسخ الشيفرة السابقة ثلاث مرات إضافية إذا أردت تكوين صف من أربعة خلايا: <td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> <td>I'm your fourth cell.</td> يمثِّل كل عنصر <td> خليةً واحدةً، وتمثِّل هذه العناصر بمجموعها الصف الأول الذي يكبر بإضافة عناصر جديدة، ولإنهاء الصف الأول والانتقال إلى الصف الثاني نستخدِم العنصر <tr> اختصارًا لصف جدول table row: ضع الخلايا الأربعة التي أنشأتها سابقًا ضمن وسمَي البداية والنهاية للعنصر <tr>: <tr> <td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> <td>I'm your fourth cell.</td> </tr> نكون بهذا الشكل قد أنشأنا الصف الأول، ولا بدّ من تغليف خلايا جديدة <td>ضمن عنصر <tr> جديد: نتيجة العمل لا بدّ أن يظهر الجدول كما يلي: ملاحظة: يمكنك إيجاد المثال السابق بصيغته النهائية ضمن المستودع المخصص له على جيت-هاب. عناصر ترويسة جدول لنركِّز الآن على ترويسات الجدول، وهي خلايا خاصة تلاحظها في بداية الصف أو العمود وتحدد طبيعة البيانات التي يضمها كما في الخليتين Person و Age في مثالنا الأول، ولتوضيح فائدة الترويسات سنلقي نظرةً على هذا المثال: <table> <tr> <td>&nbsp;</td> <td>Knocky</td> <td>Flor</td> <td>Ella</td> <td>Juan</td> </tr> <tr> <td>Breed</td> <td>Jack Russell</td> <td>Poodle</td> <td>Streetdog</td> <td>Cocker Spaniel</td> </tr> <tr> <td>Age</td> <td>16</td> <td>9</td> <td>10</td> <td>5</td> </tr> <tr> <td>Owner</td> <td>Mother-in-law</td> <td>Me</td> <td>Me</td> <td>Sister-in-law</td> </tr> <tr> <td>Eating Habits</td> <td>Eats everyone's leftovers</td> <td>Nibbles at food</td> <td>Hearty eater</td> <td>Will eat till he explodes</td> </tr> </table> يصيّر المتصفح الشيفرة السابقة إلى الجدول التالي: إنّ المشكلة في هذا الجدول هي صعوبة الوصول إلى البيانات المطلوبة كما ينبغي، على الرغم من وضوح الغاية منه، لكن إذا برزت ترويسات الأعمدة والصفوف بصورة ما، فسيتحسن الوضع. تطبيق: ترويسات الجداول سنحاول في هذا التطبيق تحسين الجدول السابق: احفظ نسخةً عن الملفين dogs-table.html و minimal-table.css في مجلد جديد على حاسوبك، إذ يحتوي ملف HTML على المعلومات ذاتها التي يعرضها الجدول السابق. استخدم العنصر <th> -اختصارًا لترويسة جدول table header- لتمييز الخلية الأولى على أنها ترويسة دلاليًا وبصريًا، إذ يعمل هذا العنصر بالطريقة نفسها التي يعمل بها العنصر <td> إلا أنه يعرِّف ترويسةً وليس خليةً عاديةً. انتقل إذًا إلى ملف HTML واستبدل العناصر <th> بكل العناصر <td> التي تحيط بخلايا الترويسة. احفظ التغييرات التي أجريتها على ملف HTML ثم حمّله في المتصفح وستلاحظ كيف ستبدو الخلايا الأولى على أساس ترويسات. ملاحظة: يمكنك الاطلاع على الملف بشكله النهائي على جيت-هاب، كما يمكنك الاطلاع على شيفرته المصدرية. ما هي فوائد الترويسات؟ جاوبنا بالفعل على جزء من هذا السؤال، إذ يسهِّل استخدامها استخلاص المعلومات ويحسِّن مظهر الجدول عمومًا. ملاحظة: تمتلك ترويسات الجداول تنسيقًا افتراضيًا محددًا، إذ تُكتَب بخط ثخين وتتوضَّع في مركز الخلية حتى ولو لم تطبق بنفسك أية تنسيقات، وذلك لتمييزها. تمتلك الترويسات فوائدًا إضافيةً، إذ يسمح لك استخدام السمة scope -التي سنتعرف إليها لاحقًا- بدعم الوصول السهل، وذلك بربط كل ترويسة بكل البيانات التي يضمها الصف نفسه أو العمود، إذ ستتمكن عندها قارئات الشاشة من قراءة كامل الصف أو العمود، وهذا بالطبع أكثر فائدةً. تمكين الخلايا من الامتداد على عدة صفوف أو خلايا قد نرغب أحيانًا في تمديد الخلايا لتشمل عدة صفوف أو أعمدة، ولنأخذ مثلًا الجدول التالي الذي يعرض بعض أسماء الحيوانات، فقد نرغب في بعض الحالات بعرض أسماء الإناث والذكور إلى جانب النوع وقد لا نرغب بذلك، وفي كلتا الحالتين نريد أن يمتد اسم الحيوان على كامل الجدول، وإليك الشيفرة الأولية: <table> <tr> <th>Animals</th> </tr> <tr> <th>Hippopotamus</th> </tr> <tr> <th>Horse</th> <td>Mare</td> </tr> <tr> <td>Stallion</td> </tr> <tr> <th>Crocodile</th> </tr> <tr> <th>Chicken</th> <td>Hen</td> </tr> <tr> <td>Rooster</td> </tr> </table> لكن لا يعطي الخرج النتيجة التي نريدها تمامًا: نريد مثلًا أن يمتد "Hippopotamus" أو "Crocodile" مقدار عمودين، وأن يمتد Horse" و "Chicken" مقدار صفين، إذ تمتلك ترويسة الجدول لهذه الغاية السمتَين colspan و rowspan اللتين تقبلان قيمًا بلا واحدة تدل على عدد الصفوف أو الأعمدة التي نريد أن تمتد الترويسة عليهما، لذا ستسمح القيمة "2"=colspan مثلًا لترويسة عمود أن تمتد بمقدار عمودين، إذًا لنستخدِم هاتين السمتين لتحسين مظهر الجدول السابق: احفظ نسخةً عن الملفين animals-table.html و minimal-table.css في مجلد جديد على حاسوبك، إذ يحتوي ملف HTML على المعلومات ذاتها التي يعرضها الجدول السابق. استخدم السمة colspan لتجعل الخلايا "Animals" و "Hippopotamus" و "Crocodile" تمتد بمقدار عمودَين. استخدم السمة rowspan لتجعل الخلايا "Horse" و "Chicken" تمتد بمقدار صفَّين. احفظ التغيرات التي أجريتها على الملف ثم حمّله في المتصفح لترى النتيجة. ملاحظة: يمكنك إيجاد المثال السابق بصيغته النهائية ضمن المستودع المخصص له على جيت-هاب. تزويد الأعمدة ببعض التنسيقات تقدِّم HTML طريقةً لتنسيق محتوى عمود بأكمله (عناصر <col> وعناصر <colgroup>)، وقد وُجِدت هذه الطريقة لأنّ عملية تنسيق كل عنصر <td> أو <th> على حدة في عمود ستكون مزعجةً وغير فعّالة وسيكون الأمر كذلك عند استخدام محدِّد تنسيق معقَّد مثل nth -child:. ملاحظة: تنسيق العمود بهذه الطريقة مخصص لبعض السمات فقط، وهي:border و background و width و visibility، فإذا احتجت لاستخدام خصائص أخرى، فلا بدّ من تنسيق كل عنصر <td> أو <th> على حدة، أو استخدام محدد تنسيق معقّد مثل nth -child:. لنلق نظرةً على هذا المثال: <table> <tr> <th>Data 1</th> <th style="background-color: yellow">Data 2</th> </tr> <tr> <td>Calcutta</td> <td style="background-color: yellow">Orange</td> </tr> <tr> <td>Robots</td> <td style="background-color: yellow">Jazz</td> </tr> </table> ستكون النتيجة كما يلي: إنّ الطريقة المتبعة في الشيفرة السابقة ليست ملائمةً، إذ علينا كتابة التنسيق في كل خلية من خلال العمود، فمن السهل في هذه الحالة -إن كنا نعمل على مشروع واقعي- استخدام السمة class وتحديد التنسيق المطلوب مرةً واحدةً ضمن ملف تنسيق منفصل، وبدلًا من ذلك يمكننا تحديد معلومات التنسيق هذه مرةً واحدةً فقط ضمن عنصر <col> يقع داخل العنصر <colgroup> الذي يُدرج مباشرةً أسفل وسم بداية الجدول <table>، وإليك الطريقة: <table> <colgroup> <col> <col style="background-color: yellow"> </colgroup> <tr> <th>Data 1</th> <th>Data 2</th> </tr> <tr> <td>Calcutta</td> <td>Orange</td> </tr> <tr> <td>Robots</td> <td>Jazz</td> </tr> </table> عرّفنا عمودين اثنين، الأول فارغ ولا يحتوي على أي تنسيق لكنه ضروري لكي لا يتغير تنسيق العمود الثاني المطبق، وإذا أردت تنسيق كلا العمودَين، فاكتف بعنصر <col> واحد يحمل التنسيق المطلوب شرط استخدام السمة span: <colgroup> <col style="background-color: yellow" span="2"> </colgroup> تأخذ هذه السمة قيمًا على صورة أرقام بلا واحدة مثل سمة colspan وسمة rowspan التي تدل على عدد الأعمدة التي سيطبَّق عليها التنسيق. تطبيق: تنسيق أعمدة ترى في الجدول التالي برنامجًا زمنيًا لمواعيد مدرِّسة لغات، ولدى هذه المدرّسة صفًا جديدًا لتعليم الهولندية Dutch يوم الجمعة بأكمله، وتدرِّس الألمانية German على فترات يومَي الثلاثاء والخميس، وتريد المدرّسة تلوين أعمدة الأيام التي تُدرِّس فيها: أعد إنشاء الجدول السابق متبعًا الخطوات التالية: احفظ نسخةً عن الملف timetable.html في مجلد جديد على حاسوبك، إذ يحتوي ملف HTML على المعلومات ذاتها التي يعرضها الجدول السابق ما عدا معلومات تنسيق الأعمدة. أضف العنصر <colgroup> إلى العنصر <table> وتحت وَسم البداية مباشرةَ، ثم أضف إلى هذا العنصر عناصر <col> لإضافة تنسيقات إلى الأعمدة. لا تغيِّر تنسيق أول عمودين. أضف لونًا إلى خلفية العمود الثالث بضبط قيمة السمة style على ;background-color:#97DB9A. استخدم عرضًا مختلفًا للعمود الرابع بضبط قيمة السمة style على ;width: 42px. أضف لونًا إلى خلفية العمود الخامس بضبط قيمة style على ;background-color:#97DB9A. أضف لونًا مختلفًا وإطارًا إلى العمود السادس لتشير إلى أنه يوم مميز، إذ ستبدأ بتدريس لغة جديدة، ولذلك اضبط قيمة style على ;background-color:#DCC48E; border:4px solid #C1437A إذا وجدت نفسك عالقًا أمام مشكلة ما أو أردت التحقق من عملك، فيمكنك مراجعة النسخة النهائية للمثال على جيت-هاب. خلاصة عرضنا في هذا المقال أساسيات إنشاء جداول في HTML، إذ سنلقي نظرةً في المقال التالي على ميزات أكثر تقدمًا، مع الأخذ بالحسبان سهولة وصول ذوِي الإعاقة البصرية. للمزيد من التفاصيل، ارجع إلى توثيق الجداول في موسوعة حسوب. ترجمة -وبتصرَّف- للمقال HTML table basics. اقرأ أيضًا كيفية إنشاء جدول أنيق بـ HTML و CSS جداول html ذات رأسية وأعمدة ثابتة باستخدام jQuery الجداول (Tables) في CSS

بعد أن تعلمنا أساسيات التعامل مع الجداول في HTML في المقال السابق، نلقي الضوء في هذا المقال على بعض الميزات المتقدمة لجداول HTML مثل الشروحات captions والملخصات summaries وتجميع الصفوف لتشكيل ترويسة أو جسم أو تذييل، كما يمر المقال على مفهوم سهولة الوصول accessibility لذوي المشاكل البصرية إلى محتوى الجداول. إضافة شرح إلى الجدول يمكنك إضافة شروحات إلى الجداول باستخدام العنصر <caption> بعد وضعه تحت وَسم البداية للعنصر <table> مباشرةً: <table> <caption>Dinosaurs in the Jurassic period</caption> ... </table> يُستخدَم الشرح -كما يوحي المثال السابق- لإضافة وصف لمحتوى الجدول، إذ يساعد القراء على تقدير فائدة هذا المحتوى عندما يتصفحون الموقع وخاصة للمستخدِمين المكفوفين، فبدلًا من قراءة خلايا عديدة لمعرفة الغاية من الجدول، فسيعتمد المستخدِم على شرح الجدول ليقرر الاستمرار في القراءة أم لا. ملاحظة: يمكن استخدام السمة summary التي يملكها العنصر <table> لإضافة وصف يمكن لقارئات الشاشة الوصول إليه وقراءته، لكننا نفضِّل استخدام العنصر <caption> بدلًا منها لأنها أُلغيَت في مواصفات HTML5، ولا يمكن رؤيتها من قبل المستخدِمين صحيحِي البصر لأنها لن تعرض على الصفحة. تطبيق: إضافة شرح إلى جدول لنلق نظرةً ثانيةً إلى مثال برنامج التدريس اليومي الذي طرحناه في المقال السابق: عُد إلى البرنامج اليومي لمدرّسة اللغات الذي ستجده على جيت-هاب واحفظ نسخًا منه على حاسوبك الشخصي. أضف شرحًا مناسبًا إلى محتوى الجدول. احفظ التعديلات التي أجريتها ثم حمِّل الملف ضمن المتصفح لترى النتيجة. ملاحظة: يمكن إيجاد الملف بصورته النهائية على جيت-هاب. إضافة هيكلية للجدول باستخدام <thead> و <tfoot> و <tbody> عندما تتعقد هيكلية الجداول نوعًا ما، فلا بدّ من تحديد هذه الهيكلية بصورة أوضح، ولتنفيذ ذلك تُستخدَم العناصر <thead> و <tfoot> و <tbody> التي تسمح لك بتوصيف ترويسة وتذييل وجسم للجدول. لن تحسّن هذه العناصر إمكانية الوصول السهل لمستخدِمي قارئات الشاشة، ولن تحسّن في المظهر المرئي للجدول أيضًا، ولكنها مفيدة جدًا لتخطيط الجدول وتنسيقه، إذ تعمل هذه العناصر على أساس خطافات لإضافة تنسيقات CSS إلى الجداول، ففي حالة الجداول الطويلة التي تمتد على صفحات مثلًا يمكنك تكرار الترويسة والتذييل في كل صفحة تطبعها، كما يمكنك عرض جسم الجدول بأكمله على صفحة واحدة ومن ثم تصفح محتوياته باستخدام شريط تمرير للأعلى والأسفل، ولتفعل ذلك اتبع ما يلي: استخدِم العنصر <thead> لتغليف الجزء الذي يمثّل ترويسة الجدول، وهو عادةً الصف الأول الذي يضم ترويسات جميع الأعمدة لكن ليس دائمًا، فإذا كنت تستخدِم عنصرَي تجميع خلايا العمود <colgroup> و <col>، فضع ترويسة الجدول بعدها مباشرةً. استخدِم العنصر <tfoot> لتغليف الجزء الذي يمثل تذييل الجدول، فقد يكون هذا الجزء هو الصف الأخير من الجدول وقد جمعت فيه قيم الأسطر السابقة مثلًا، وبإمكانك وضع عنصر التذييل في آخر الجدول كما تتوقع أو تحت ترويسة الجدول مباشرةً لأن المتصفح سيصيّره في المكان الصحيح. استخدِم العنصر <tbody> لتغليف بقية الأجزاء، فقد يأتي جسم الجدول تحت الترويسة أو تحت التذييل تبعًا للطريقة التي تنويها في تنظيم الجدول. ملاحظة: إن العنصر <tbody> هو دائمًا جزء من الجدول سواءً صرَّحت عن ذلك أم لا، ولكي تتحقق من ذلك افتح أيًا من أمثلة الجداول التي لا تحتوي على <tbody> ثم تفحص شيفرة باستخدام أدوات مطوري ويب وستجد أنّ المتصفح قد أضاف هذا العنصر تلقائيًا، وقد تتساءل إذًا لِمَ عليّ إضافته أصلًا، والجواب هو أنه سيمنحك تحكمًا أكبر بهيكلية الجدول وتنسيقه. تطبيق: هيكلة جدول لنحاول تجربة العناصر التي تهيكل الجدول: ابدأ بحفظ نسخ عن الملفين spending-record.html وminimal-table.css في مجلد جديد على حاسوبك. افتح ملف HTML في المتصفح وسترى أنّ الجدول واضح مع إمكانية لتحسينه قليلًا، إذ يبدو الصف "SUM" الذي يضم مجموع النفقات في المكان الخاطئ، كما قد تلاحظ بعض التفاصيل المفقودة في الشيفرة. ضع الصف الذي يمثّل الترويسة داخل عنصر <thead> والصف "SUM" ضمن عنصر <tfoot> وبقية الجدول ضمن عنصر <tbody>. احفظ التعديلات وحمّل الملف من جديد، ثم لاحظ كيف انتقل الصف إلى أسفل الجدول. استخدِم السمة colspan لتمتد الخلية "SUM" على الأعمدة الأربعة الأولى كي يظهر المبلغ تحت العمود "Cost". أضف بعض التنسيقات البسيطة إلى الجدول لترى فائدة تطبيق تنسيق CSS، لذا ضع الشيفرة التالية داخل العنصر <style> الموجود داخل العنصر <head> في ملف HTML: tbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; } احفظ التعديلات ثم حمّل الملف من جديد وشاهد نتيجة عملك، فإذا لم يكن العنصران <tbody> و <tfoot> في مكانهما الصحيح، لكان عليك كتابة شيفرة تنسيق أكثر تعقيدًا للحصول على النتيجة ذاتها. ستبدو نتيجة العمل كما يلي: ملاحظة: يمكنك الاطلاع على النسخة النهائية من المثال على جيت-هاب. الجداول المتداخلة يمكن وضع جدول ضمن آخر شرط أن تكون هيكلية الجدول مكتملة بما في ذلك العنصر <table>، ولا ننصح عادةً بمثل هذا التداخل لأنه سيعقد من توصيف الجداول ويصعّب وصول قارئات الشاشة إلى محتوياتها، كما يُعَدّ إدراج خلايا أو صفوف أو أعمدة جديدة إلى الجدول المطلوب هو الأجدى في كثير من الحالات، لكنك قد تضطر أحيانًا إلى إدراج جدول ضمن آخر خاصةً إذا أردت إدراج محتوى من مصدر خارجي دون تعقيدات إضافية على سبيل المثال، وتعرض الشيفرة التالية جدولين بسيطين متداخلين: <table id="table1"> <tr> <th>title1</th> <th>title2</th> <th>title3</th> </tr> <tr> <td id="nested"> <table id="table2"> <tr> <td>cell1</td> <td>cell2</td> <td>cell3</td> </tr> </table> </td> <td>cell2</td> <td>cell3</td> </tr> <tr> <td>cell4</td> <td>cell5</td> <td>cell6</td> </tr> </table> ستبدو نتيجة تنفيذ الشيفرة كما يلي: جداول خاصة بذوي المشاكل البصرية لنراجع باختصار استخدامات الجداول، إذ تُعَدّ الجداول أداةً مفيدةً تساعدنا في الوصول السريع إلى البيانات والبحث عن القيم المختلفة فيها، وبنظرة سريعة مثلًا على الجدول الذي نعرضه تاليًا ستتمكن من معرفة عدد الخواتم Rings التي بيعت في جينت Gent شهر 8 عام 2016، إذ نربط بصريًا بين المعلومات الواردة في الجدول مع ترويسة الصف والعمود لنجد المطلوب. table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } Clothes Accessories Trousers Skirts Dresses Bracelets Rings Belgium Antwerp 56 22 43 72 23 Gent 46 18 50 61 15 Brussels 51 27 38 69 28 The Netherlands Amsterdam 89 34 69 85 38 Utrecht 80 12 43 36 19 لكن ما الحل إذا لم تتمكن من رؤية الجدول؟ كيف ستتمكن من قراءته؟ يستخدِم أصحاب المشاكل البصرية قارئات الشاشة التي تقرأ المعلومات الواردة في صفحات الويب، إذ ستعمل هذه التقنية بسهولة عند قراءة نص صرف، لكن يُعَدّ تفسير محتوى جدول أمرًا مختلفًا ويمثِّل تحديًا للمكفوفين، ومع ذلك يمكننا الاستغناء عن الارتباطات البصرية والاستعاضة عنها بارتباطات برمجية عند استخدام العناصر الصحيحة، وسنعرض تاليًا بعض التقنيات التي تسهّل الوصول إلى الجداول قدر المستطاع. ملاحظة: يوجد حوالي 253 مليون شخص كفيف أو يعاني من مشاكل بصرية وفقًا لمنظمة الصحة العالمية WHO في عام 2017. استخدام ترويسات الأعمدة والصفوف تستخدِم قارئات الشاشة الترويسات في الارتباطات البرمجية بينها وبين الخلايا المتعلقة بها، إذ يعرِّف ويفسر ضمّ ترويسات الصفوف والأعمدة بيانات كل خلية وبذلك ستتمكن القارئات من إيصال هذا التفسير إلى المكفوف. استخدام السمة scope تُضاف هذه السمة إلى العنصر <th> -أي ترويسة جدول- لتدل قارئات الشاشة على الخلايا التي تمثلها ترويسة معينة (هل هي ترويسة صف أم عمود مثلًا؟)، وبالعودة إلى مثال التطبيق السابق الذي طرحناه سابقًا، سترى كيف تُميَّز ترويسة العمود لأنها ستبدو على الصورة التالية: <thead> <tr> <th scope="col">Purchase</th> <th scope="col">Location</th> <th scope="col">Date</th> <th scope="col">Evaluation</th> <th scope="col">Cost (€)</th> </tr> </thead> وترويسة كل صف ستبدو أيضًا كما يلي إذا أضفنا ترويسات صفوف بالإضافة إلى ترويسات الأعمدة: <tr> <th scope="row">Haircut</th> <td>Hairdresser</td> <td>12/09</td> <td>Great idea</td> <td>30</td> </tr> تستطيع قارئات الشاشة التعرُّف على هذا التوصيف، وبالتالي ستقرأ كامل الصف أو العمود مباشرةً على سبيل المثال. تأخذ السمة scope أيضًا القيمتين colgroup و rowgroup وتستخدمان لتوصيف الترويسات التي تقع فوق عدة أعمدة أو صفوف، فإذا عدت إلى الجدول السابق "حول مبيعات شهر 8 عام 2016"، فستجد أنّ الخلية "Clothes" هي ترويسة للخلايا "Trousers" و "Skirts" و "Dresses"، وينبغي الإشارة إلى جميع هذه الخلايا على أنها ترويسات (<th>)، ولهذا لا بدّ من أن نزوّد الخلية "Clothes" بالسمة "scope="colgroup، في حين ستأخذ بقية الترويسات التي تقع تحتها مباشرة السمة "scope="col. استخدام السمتين id و headers يمكننا استخدام السمتين id و headers على أساس بديل عن scope في الارتباطات بين الترويسات والخلايا، ويجري الأمر كما يلي: زوّد كل عنصر <th> (عنصر الترويسة) بسِمة id تحمل قيمة فريدة. زوّد كل عنصر <td> (عنصر الخلية) بسِمة headers تضم قائمةً بمعرِّفات جميع الترويسات التي تُعَدّ ترويسةً مباشرةً لهذه الخلية تفصل بينها مسافةً فارغةً. يعطي هذا الأسلوب جدوّل HTML تعريفًا صريحًا لموقع كل خلية بترويسة (أو ترويسات) العمود والصف الذي تشكل جزءًا منه، ولا بدّ من الإشارة إلى ضرورة استخدام ترويسات للصفوف والأعمدة معًا إذا أردت استخدام هذه الطريقة. لاحظ طريقة تطبيق هذا الأسلوب على مثال التطبيق السابق السابق: <thead> <tr> <th id="purchase">Purchase</th> <th id="location">Location</th> <th id="date">Date</th> <th id="evaluation">Evaluation</th> <th id="cost">Cost (€)</th> </tr> </thead> <tbody> <tr> <th id="haircut">Haircut</th> <td headers="location haircut">Hairdresser</td> <td headers="date haircut">12/09</td> <td headers="evaluation haircut">Great idea</td> <td headers="cost haircut">30</td> </tr> ... </tbody> ملاحظة: تُعَدّ هذه الطريقة دقيقةً جدًا في ارتباط خلايا البيانات مع الترويسات، لكنها تتطلب عملًا أكثر لا يحتمل أية أخطاء، ولهذا يُعَدّ استخدام السمة scope كافيًا لمعظم الجداول. تطبيق: استخدام السمتين scope و headers احفظ نسخةً عن الملفين items-sold.html و minimal-table.css في مجلد جديد على جهازك. حاول استخدام السمة scope لتحسين طريقة عرض هذا الجدول. حاول حفظ نسخة أخرى عن الملفين السابقين في مجلد آخر على جهازك ثم استخدم السمتين scope و headers لدعم فكرة سهولة الوصول إلى الجدول. ملاحظة: يمكنك التحقق من صحة عملك بموازنته مع النسخة النهائية باستخدام scope وباستخدام headers على جيت-هاب. خلاصة على الرغم من وجود بعض الأفكار الأخرى التي يمكنك تعلمها عن الجداول في HTML، إلا أننا زودناك بكل ما تحتاجه حاليًا، ولا بدّ الآن من التوجه نحو تعلّم طريقة تنسيق ملفات HTML باستخدام لغة التوصيف CSS. للمزيد من التفاصيل، ارجع إلى توثيق الجداول في موسوعة حسوب. ترجمة -وبتصرُّف- للمقال HTML table advanced features and accessibility. اقرأ أيضًا أساسيات بناء الجداول في HTML كيفية إنشاء جدول أنيق بـ HTML و CSS جداول html ذات رأسية وأعمدة ثابتة باستخدام jQuery الجداول (Tables) في CSS

سنتحدث في هذا المقال عن مفهوم الصور المتجاوبة responsive images التي تُعرَض عرضًا يلائم كل الأجهزة مع اختلاف قياس شاشة العرض ودقتها والميزات الأخرى المتعلقة بذلك، كما سنبحث في الأدوات التي تقدمها HTML لإنجاز العمل، ويساعدك ذلك في تحسين الأداء على مختلف الأجهزة، فهي جزء من مفهوم التصميم المتجاوب الذي يُعَدّ أحد مواضيع تنسيقات CSS الذي لا بدّ من الاطلاع عليه في مرحلة ما. لا بدّ قبل المتابعة في قراءة هذا المقال أن تكون على دراية بأساسيات HTML وطريقة إدراج الصور الساكنة في صفحات ويب. لماذا تستخدم الصور المتجاوبة؟ سنعرض حالةً نموذجيةً لإيصال الفكرة، فقد يحتوي موقع ويب نمطي على صورة تمثِّل خلفية ترويسة صفحاته، بالإضافة إلى صور في الأقسام الأخرى، ومن المحتمل امتداد صورة الترويسة لتشغل عرض الترويسة بأكمله، في حين تُدرَج بقية الصور ضمن أعمدة المحتوى، وإليك مثالًا كما يلي: سيعمل الموقع جيدًا ضمن الشاشات الواسعة كما في الحواسب المحمولة أو المكتبية، وبإمكانك متابعة هذا المثال مباشرةً ضمن مخزن جيت-هاب الخاص به، كما يمكنك الاطلاع على شيفرته المصدرية. ضُبط عرض جسم المحتوى ليكون 1200 بكسل، إذ سيبقى هذا العرض كما هو في نوافذ العرض viewports الأكبر، كما سيضبط جسم المحتوى نفسه في منتصف المساحة المخصصة له؛ أما في نوافذ العرض الأضيق، فسيشغل المحتوى 100% من العرض الذي تتيحه نافذة العرض. ضُبط موقع صورة الترويسة لينطبق مركزها على مركز الترويسة بصرف النظر عن عرض الترويسة، فإذا عُرض الموقع على شاشة ضيقة، فسيُرى من الصورة تفاصيلها المهمة -أي الأشخاص- وستختفي بقية التفاصيل من الطرفين؛ أما الارتفاع، فسيبقى 200 بكسل. ضُبطت الصورة الموجودة في عمود المحتوى بحيث يتقلص حجمها تلقائيًا لتبقى دائمًا ضمن العمود إذا قلّ عرضه بدلًا من تجاوز حدوده. مع ذلك، ستظهر المشاكل عندما تحاول عرض الموقع على الأجهزة ذات الشاشات الضيقة، إذ تظهر الترويسة في الصورة التالية جيدًا، لكنها ستمتد في أجهزة الهاتف المحمول لتشغل مقدارًا أكبر من ارتفاع الشاشة، كما ستصعب رؤية الأشخاص في أول صور المحتوى وهي بهذا الحجم. يمكن تحسين الوضع بعرض نسخة مجتزأة من الصورة تضم التفاصيل المهمة فقط عندما تُعرَض الصورة ضمن شاشة ضيقة، كما يمكن استخدام صورة مجتزأة أخرى تناسب الشاشات متوسطة العرض مثل شاشات الأجهزة اللوحية، في حين تظهر المشكلة عندما تحاول تقديم تلك الصورة المجتزأة بالطريقة التي ذكرناها في مختلف التخطيطات، وتُعرف هذه المشكلة بمشكلة الرؤية الفنية art direction problem. بالإضافة إلى ذلك، لا حاجة إلى إدراج صور بهذا الحجم في الصفحة إذا كانت ستُعرَض على شاشة هاتف محمول، كما ستبدو الصور النقطية في المقابل خشنة إذا عُرضت على شاشات أوسع، فالصور النقطية هي شبكة من البكسلات الطولانية والعرضية، وتُدعى هذه المشكلة بمشكلة تبدّل الدقة resolution switching problem. ليس ضروريًا أيضًا عرض الصور الكبيرة على شاشات أصغر حجمًا، فقد يسبب ذلك هدرًا في الحجم المتاح لتراسل البيانات وخاصةً لمستخدِمي الهواتف المحمولة الذين لا يرغبون بالطبع في تنزيل صورة كبيرة مخصصة لمستخدِمي الحواسب المكتبية مثلًا إذا وجدت صور تناسب أجهزتهم، لذا لا بدّ من استخدام صور بدقات مختلفة على أساس حل مثالي، ثم يختار المتصفح الصورة ذات الدقة الأنسب وفقًا لأبعاد الشاشة التي تعرضها، ولنزيد الطين بلِّة، سنجد أنّ بعض الأجهزة تتمتع بشاشات عالية الدقة وتحتاج إلى صور أكبر حجمًا كي تُعرض جيدًا، إذًا نحن أمام المشكلة السابقة نفسها لكنها في سياق مختلف. قد تعتقد بأن حل المشكلة سيكون استخدام الصور الشعاعية، وهي بالفعل حل إلى حد ما، فهي صغيرة الحجم و قابلة لتغيير الحجم دون تشوهات ويجدر بك استخدامها إذا أمكن ذلك، لكن هذه الصور غير مناسبة لكل الحالات، إذ يمكن استخدام هذه الصور لعرض الرسومات البسيطة والأنماط وعنصر الواجهات وغيرها، لكن من الصعب إنشاء صورة شعاعية بتفاصيل عالية الدقة مثل التي تجدها مثلًا في الصور الشخصية، إذ تبقى الصور النقطية مثل JPEG أكثر ملائمةً في حالات مثل هذه. لم تظهر هذه المشاكل في بدايات الويب، ففي بداية تسعينات القرن الماضي لم تعمل المتصفحات سوى على الحواسب المكتبية والمحمولة، ولم يكن على مطورِي المتصفحات حينها التفكير بإيجاد حلول لهذه المشاكل، فقد استخدمت تكنولوجيا الصور المتجاوبة مؤخرًا لحل المشاكل التي قدّمنا لها وذلك باستخدام عدة ملفات للصورة نفسها لكن بأحجام مختلفة على المتصفح لحل مشكلة تبدّل الدقة، أو صور مختلفة ملائمة للمساحات المختلفة لحل مشكلة الرؤية الفنية. سنناقش في هذا المقال بعض الميزات التي تدعمها معظم المتصفحات الحديثة المستخدَمة في الحواسب وأجهزة الهاتف المحمول بما في ذلك مايكروسوفت إيدج لكن دون مايكروسوفت إكسبلورر وهي <srcset> و <sizes> و <picture>. كيفية إنشاء صور متجاوبة؟ سنلقي نظرةً أقرب في هذا القسم على المشكلتين اللتين تحدثنا عنهما سابقًا وسنعرض بعض الحلول باستخدام صور HTML المتجاوبة مركِّزين على العنصر <img>، وسنستعمل صور HTML ونترك موضوع صور CSS إلى وقت لاحق على الرغم من أنّ صورة الترويسة في المثال السابق هي للديكور فقط وأنها أدرجت باستخدام خلفيات CSS، إذ يعدّ البعض CSS أكثر قدرة على إدارة الصور المتجاوبة من HTML. تبدل الدقة والأحجام المختلفة ما هي المشكلة التي تواجهنا عند تبدّل الدقة؟ نريد إظهار محتوى الصورة نفسه لكن بحجم أكبر أو أصغر وفقًا للجهاز الذي يعرضها، ونجد هذه الحالة في الصورة الموجودة في المحتوى الرئيسي للموقع النمطي الذي عرضناه سابقًا، إذ يتيح لك العنصر <img> الإشارة إلى ملف مصدري واحد: <img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"> سنستخدِم السمتَين الجديدتَين <srcset> و <sizes> في تزويد هذا العنصر بصور مصدرية إضافية مع تلميحات تساعد المتصفح في انتقاء المناسبة منها، ويمكنك الاطلاع مباشرةً على هذا الأسلوب في المثال الموجود على جيت-هاب، كما يمكنك الاطلاع على الشيفرة المصدرية. <img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"> قد تبدو السمتان <srcset> و <sizes> معقدتين، لكن فهمهما ليس بهذه الصعوبة إذا كتبتهما وفقًا للتنسيق الذي اتبعناه في الشيفرة، وذلك بجعل كل قيمة تأخذها السمة في سطر مستقل، إذ تحتوي كل قيمة على قائمة من الخيارات تفصل بينها فاصلةً ,، ويتكون كل قسم من أقسام هذه القائمة من ثلاثة أجزاء، ولنلق نظرةً على محتوى كل قسم: السمة srcset يعرِّف مجموعةً من الصور التي نريد من المتصفح اختيار الأنسب منها وحجم كل صورة، كما يفصل بين معلومات كل مجموعة بفاصلة، وتضم كل مجموعة المعلومات التالية: اسم ملف صورة مثل elva-fairy-480w.jpg. فراغ. العرض الأصلي للصورة بالبكسل (480w، ولاحظ استخدام الواحدة w وليس البكسل px)، كما إن الحجم الأصلي للصورة هو الحجم الحقيقي الذي تجده عندما تفحص ملف الصورة على حاسوبك، إذ يمكنك مثلًا اختيار الصورة في ماك أو إس ثم الضغط على المفتاحين Cmd+I لعرض معلومات الصورة على الشاشة. السمة sizes يعرِّف مجموعةً من الشروط لعرض الوسائط مثل عرض الشاشة، ويشير إلى أفضل حجم للصورة يمكن اختياره عندما يتحقق أحد شروط العرض، ويتكون كل شرط مما يلي: طبيعة الشرط (max-width:600px): يصف بصورة مبسطة إحدى الحالات التي يمكن أن تكون عليها الشاشة، إذ نقول في هذه الحالة أنّ اتساع نافذة العرض هو 600 بكسل أو أقل. فراغ. عرض المقر slot الذي تشغله الصورة عندما يتحقق الشرط (480px). ملاحظة: بدلًا من تحديد عرض المقر التي ستشغلها الصورة بمقياس مطلق (تحديده بدقة 480px)، يمكنك تحديده بالنسبة إلى نافذة العرض viewport المستخدَمة (50vw مثلًا) لكن ليس على أساس نسبة مئوية، وربما قد لاحظت أنّ عرض المقر الأخير لا يرتبط بشرط على الوسائط لأنه سيكون الخيار الافتراضي عندما لا يتحقق أيّ من هذه الشروط. وبالتالي، ما سيفعله المتصفح عند استخدام هذه السمات هو ما يلي: النظر إلى عرض الجهاز. يتحقق من قائمة شروط الوسائط الموجودة في السمة sizes ليجد أول شرط محقق. ينظر إلى قياسات مقر العرض الذي مُرر إلى استعلام إيجاد الصورة المناسبة. يحمّل الصورة التي يُشار إليها من قائمة عناصر السمة srcset والتي تتطابق أبعادها مع أبعاد المقر الذي ستُعرَض ضمنه، وإذا لم تكن هناك صورة مطابقة، فأول صورة أكثر اتساعًا من قياس المقر المُختار. إذا حمَّل متصفح نافذة عرضه المتاحة هي 480px صفحة الويب، فسيكون الشرط (max-width: 600px) محققًا، وبالتالي سيختار المتصفح المقر الذي اتساعه 480px، وسيحمل أيضًا الصورة elva-fairy-480w.jpg لأن قياسها هو الأقرب لقياس المقر، كما إنّ حجم الصورة التي عرضها 800 بكسل هو 128 كيلو بايت، بينما حجم الصورة التي عرضها 480 بكسل هو 63 كيلو بايت ومقدار التوفير سيكون 65 كيلو بايت، وتخيل الآن وجود عدة صورة في الصفحة، كم سيوفر ذلك على مستخدِمي الهاتف المحمول من ناحية حجم بيانات التراسل. ملاحظة: إذا كنت تختبر هذا الأسلوب على متصفح حاسوب مكتبي وأخفق في تحميل الصور الأقل عرضًا عندما تضبط نافذة العرض على أقل عرض ممكن، فيمكنك حينها إلقاء نظرة على قيمة نافذة العرض باستخدام طرفية جافاسكربت بكتابة الشيفرة التالية: document.querySelector('html').clientWidth ملاحظة: تختلف المتصفحات في القيم الدنيا لاتساع نافذة العرض، فلا يمكنك تصغيرها إلى ما دونها، وقد تكون هذه القيم أكثر اتساعًا مما تتوقع، ولكي تختبر ذلك عبر متصفح هاتف محمول، فيمكنك استخدام أدوات مثل الصفحة about:debugging في متصفح فايرفوكس لتفحص الصفحة التي تُحمَّل على الهاتف المحمول باستخدام أدوات مطورِي الويب الخاصة بمتصفحات الحواسب المكتبية، ولتميز الصور التي حمّلها المتصفح عند تحميل الصفحة استخدم أدوات مطورِي ويب مثل نافذة مراقب الشبكة Network Monitor. ستتجاهل المتصفحات القديمة التي لا تدعم الميزات السابقة كل ذلك وتتوجه مباشرةً إلى السمة src لتحمل الصورة التي تشير إليها قيمة هذه السمة. ملاحظة: ستجد داخل العنصر <head> في شيفرة المثال السابق السطر التالي: <meta name="viewport" content="width=device-width"> ملاحظة: تجبر هذه الشيفرة متصفحات الهواتف المحمولة على استخدام نافذة العرض الحقيقية لها لتحميل صفحات ويب، فقد لا تطلعك بعض المتصفحات على الاتساع الحقيقي لنافذة عرضها، و ستحمِّل صفحات تحتاج إلى نافذة عرض أوسع ثم تقلصها، وهذا أمر سلبي من منظور الصور المتجاوبة أو التصميم المتجاوب. تبدل الدقة: الحجم نفسه ودقة مختلفة قد تحاول دعم قيم مختلفة للدقة لتناسب أجهزة متنوعة، لكن النتيجة على الشاشة هي الصورة نفسها بأبعادها الحقيقية، إذ يمكنك في هذه الحالة دفع المتصفح إلى اختيار الصورة ذات الدقة الأنسب باستخدام العنصر srcset مع التوجيه x- دون استخدام العنصر sizes، كما يمكنك الاطلاع مباشرةً على هذا الأسلوب في المثال الموجود على جيت-هاب، كما يمكنك الاطلاع على الشيفرة المصدرية: <img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"> إليك نتيجة التنفيذ: طبّقنا في هذا المثال شيفرة CSS التالية على الصورة كي يصبح اتساع الصورة 320 بكسل على الشاشة، وتُدعى بكسلات CSS أيضًا: img { width: 320px; } لا حاجة في هذه الحالة إلى استخدام السمة sizes، إذ سيحدِّد المتصفح دقة العرض ويستخدِم أفضل صورة تشير إليها السمة srcset، فإذا كان للجهاز الذي يُحمّل الصفحة حدًا معياريًا أو حدًا أدنى لدقة العرض، ومثَّل كل بكسل من بكسلات الجهاز بكسل CSS واحد، فسيحمّل المتصفح الصورة elva-fairy-320w.jpg مطبِّقًا القيمة 1x للتوجيه ولا حاجة لذكر هذه الحالة؛ أما إذا كانت دقة الجهاز أعلى بحيث يمثل كل بكسلين من الجهاز بكسل CSS واحد على سبيل المثال، فسيحمّل المتصفح الصورة elva-fairy-640w.jpg، ولاحظ أنّ حجم الصورة التي عرضها 640 بكسل هو 93 كيلو بايت، بينما حجم الصورة التي عرضها 320 بكسل هو فقط 39 كيلو بايت. مشكلة الرؤية الفنية قلنا بأن هذه المشكلة ستظهر عندما نحاول تغيير الصورة لتلائم مختلف القياسات المستخدَمة لعرضها، ولنفرض مثلًا أنّ صفحة الويب ستعرض صورةً كبيرةً لمنظر طبيعي وسطه شخص على متصفح حاسوب مكتبي، وعندما تُعرض الصورة نفسها على متصفح هاتف محمول، فستتقلص هذه الصورة لتجعل الشخص الموجود في الصورة صغيرًا جدًا ومن الصعب رؤيته، فمن الأفضل إذًا في هذه الحالة اختيار صورة أصغر تركِّز على الشخص، ويسمح لنا العنصر <picture> بإنجاز هذا النوع من الحلول. نلاحظ وجود صورة تحتاج بشدة إلى رؤية فنية مختلفة بالعودة إلى المثال الأصلي غير المتجاوب. <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> لنصلح الأمر باستخدام العنصر <picture> الذي يمثّل غلافًا لعدة عناصر <source> تؤمِّن مصادر مختلفةً يختار المتصفح أنسبها ويليها العنصر <img>، كما ستبدو شيفرة المثال المتجاوب كما يلي: <picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> </picture> تحتوي العناصر <source> على السمة media التي تحوي بدورها شروطًا على الوسائط، كما في المثال الأول الذي يشرح السمة srcset، إذ تُعَدّ هذه الشروط اختبارات لاختيار الصورة التي ستعرض، بحيث ستُعرض أول صورة يعيد شرطها القيمة الصحيحة True، فإذا كان اتساع نافذة العرض 799 بكسل في الشيفرة السابقة أو أقل، فسيتحقق الشرط داخل العنصر <source> الأول وستعرض الصورة التي يشير إليها، بينما إذا كان الاتساع هو 800 بكسل أو أكثر، فسيختار المتصفح العنصر الثاني. تحتوي السمة srcset على المسار الذي يقود إلى الصورة، ويمكن لأيّ عنصر <source> امتلاك هذه السمة التي تحتوي على مراجع إلى عدة صور، كما يمتلك هذا العنصر السمة sizes أيضًا، وبالتالي ستتمكن من تقديم عدة صور للمتصفح من خلال العنصر <picture> مع إمكانية تزويده بقيم مختلفة لدقة كل صورة، وفي واقع الأمر لن تضطر إلى استخدام هذا الحل إلا قليلًا. وفي شتى الحالات، لا بدّ من وجود العنصر <img> مع سمتَيه src و alt قبل وسم النهاية <picture/> مباشرةً، وإلا فلن تعرض أية صورة، كما يمثِّل هذا العنصر الحالة الافتراضية التي سيعرضها المتصفح إذا لم يتحقق أيّ شرط من شروط الوسائط إذ تستطيع حذف العنصر <source> الثاني فهو موجود على أساس خطة بديلة في حال لم يدعم المتصفح العنصر <picture>. تسمح لك هذه الشيفرة بعرض الصورة المناسبة على كلتا الشاشتين العريضة والضيقة، كما تعرض الصور التالية: ملاحظة: ينبغي عدم استخدام السمة media إلا في الحالات التي تتطلب رؤية فنية، ولا تضع شروطًا على الوسائط ضمن السمة sizes عندما تستخدِم السمة media. لماذا لا نستخدم CSS وجافاسكربت لحل المشكلة؟ سيحمِّل المتصفح الصور عندما يبدأ بتحميل الصفحة قبل أن تبدأ عملية تحميل وتفسير ملفات تنسيق CSS وملفات جافاسكربت، ولهذه الآلية فوائدها في تقليل زمن تحميل الصفحة، لكنها ستؤثر سلبًا على الصور المتجاوبة التي تستخدِم حلولًا مثل srcset التي تضم قائمةً بمجموعة من الصور، فلن تستطيع مثلًا تحميل العنصر <img> ثم التحقق من أبعاد نافذة العرض مستخدمًا جافاسكربت وتغيّر بعدها الصورة المصدرية إلى النسخة الأصغر آليًا إذا كانت هي الأنسب، وذلك لأنّ المتصفح سينهي تحميل الصورة الأصلية قبل انتهاء هذه العملية وستكون قد حملّت أيضًا الصورة الأصغر وهذا هو الأسواء من وجهة نظر الصور المتجاوبة. استخدام التنسيقات الحديثة للصور تعطي بعض التنسيقات الجديدة للصور مثل WebP و AVIF حجمًا أصغر وجودةً عاليةً في الوقت ذاته، كما زاد دعم المتصفحات لها بصورة واسعة في هذه الفترة. يمكنك توفير الدعم للمتصفحات الأقدم باستخدام العنصر <picture> عن طريق تزويد المتصفح بنوع الصورة من خلال السمة type وسيرفض مباشرةً الأنواع أو التنسيقات غير المدعومة: <picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> </picture> انتبه إلى النقاط التالية: لا تستخدِم السمة media إلا في حال احتجت إلى حل مشكلة الرؤية الفنية. لا يمكنك الإشارة في العنصر <source> إلا إلى صورة من النوع نفسه الذي تحدده السمة type. استخدِم قائمةً تفصل بينها "," عند استخدام srcset و sizes. تطبيق: العمل على صور متجاوبة خاصة بك نطلب إليك في هذا التمرين استخدام رؤية فنية مناسبة لتجهِّز صورتين إحداهما عريضة والأخرى ضيقة باستخدام العنصر <picture> بالإضافة إلى إمكانية تبديل الدقة مستخدمًا السمة srcset: اكتب شيفرة HTML المناسبة للتمرين، كما يمكنك استخدام الملف not-responsive.html على أساس بداية. اعثر على صورة جميلة واسعة مع بعض التفاصيل المميزة، ثم اصنع منها نسخةً مناسبةً للويب باستخدام أيّ محرر صور تراه مناسبًا، واقتطع منها جزءًا يركِّز على تلك التفاصيل المميزة واصنع منه صورةً أخرى (اجعل عرضها 480 بكسل فهو مناسب للتمرين). استخدم العنصر <picture> لإنجاز مبدِّل الصور. أنشئ ملفات صور مختلفة الأبعاد لكنها تعرض الصورة ذاتها. استخدم السمتَين srcset و size لإنجاز مبدّل دقة إما لتقديم صور بالأبعاد نفسها لكن بدقة مختلفة أو بأبعاد مختلفة لتناسب نوافذ عرض مختلفة. خلاصة ناقشنا في هذا المقال نقطتين هامتين عن الصور المتجاوبة: الرؤية الفنية: وهي مشكلة تظهر عندما تريد استخدام صور مجتزأة تركِّز على تفاصيل محددة من صورة أصلية لتلائم التخطيطات المختلفة لصفحة مثل عرض صورة واسعة لمنظر طبيعي على متصفح حاسوب مكتبي ثم اجتزاء صورة أصغر منها تركز على تفاصيل مميزة لعرضها ضمن متصفحات الهواتف المحمولة، ورأينا كيف يُستخدَم العنصر <picture> في حل المشكلة. تبدّل الدقة: وهي مشكلة تظهر عندما تحتاج إلى صور ضيقة كي تعرضها ضمن شاشات ضيقة دون الحاجة إلى صور واسعة مثل تلك التي تعرض على الشاشات الواسعة مثل شاشات الحواسب المكتبية، كما تظهر عندما تريد استخدام صور بالأبعاد ذاتها لكن بدقة مختلفة لكي تعرض عرضًا مناسبًا على الشاشات عالية أو منخفضة الدقة، كما يمكنك استخدام الرسوم الشعاعية مثل SVG أو استخدام السمَتين srcset و size. ترجمة -وبتصرُّف- للمقال Responsive images. اقرأ أيضًا إعداد صور متجاوبة الصور في تصميم صفحات الويب المتجاوب مدخل إلى التصميم المتجاوب والتصميم المتكيف أساسيات تصميم الويب المتجاوب

تمتلك الرسوم الشعاعية vector graphics أهميةً واضحةً في حالات عديدة، إذ تتميز بحجم منخفض وقدرة كبيرة على تغيير أبعادها دون أن تتشوه عند تصغيرها أو تكبيرها، ونستعرض في مقالنا كيفية إضافة رسوميات مثل هذه إلى صفحات الويب وخاصةً صور SVG. لا بدّ قبل متابعة القراءة أن تكون على دراية بأساسيات HTML وبكيفية إدراج الصور في صفحاتك. ملاحظة: لا نهدف في هذا المقال إلى تعليمك إنشاء رسوميات SVG، وإنما فقط كيفية إدراجها في صفحات الويب. ما هي الرسوميات الشعاعية؟ ستتعامل خلال مسيرتك في عالم الويب مع نوعين من الصور: الصور النقطية Raster images: تعرَّف على صورة شبكة من البكسلات، إذ يحتوي ملف الصورة النقطية على معلومات تعرض موقع كل بكسل في الصورة واللون الدقيق لكل بكسل، ومن أكثر تنسيقات الصور النقطية انتشارًا على الويب هي بِت-ماب bmp. و png. و jpg. و gif.. الصور الشعاعية vector images: تُعرَّف باستخدام خوارزمية، إذ يحتوي ملف الصورة الشعاعية على تعريفات للشكل والمسار اللذين يستخدِمهما الحاسوب في عرض الصورة بالطريقة الصحيحة عندما يصيرها على الشاشة، ومن أمثلتها صور SVG التي تساعدك في إنشاء رسوم شعاعية مناسبة جدًا للاستخدام في الويب. حتى تدرك الفرق بين النوعين سنعرض عليك مثالًا يمكنك استعراضه مباشرة ضمن مستودع جيت-هاب المخصص، إذ يعرض الملف صورتان متطابقتان تمامًا لنجمتين حمراوين يحيط بهما ظل أسود إلى جوار بعضهما، وتكون الصورة اليمينية بتنسيق SVG واليسارية بتنسيق PNG، كما سيبدو الفرق واضحًا عندما تكبر الصورة في الصفحة، إذ تتشوه صورة PNG لأنها تحتوي على معلومات تحدِّد موقع كل بكسل بدقة كما تحدد لونه، فعندما تكبر هذه الصورة سيزداد حجم كل بكسل ليملأ حجمًا أكبر على الشاشة وستبدو الصورة مشوشةً، في حين لا يتغير شكل صورة SVG، لأن تغير أبعاد الصورة لن يؤثر في مظهرها نظرًا لاستخدام هذه الصور خوارزمية لعرض الشكل حتى بعد تضاعف حجمه. ملاحظة: إن كلتا الصورتين السابقتين في الواقع من نوع PNG (طريقة عرضهما في المقال)، إذ تمثِّل الصورة اليسارية صورةً نقطيةً، في حين تمثِّل الصورة اليمينية صورةً شعاعيةً. يُعَدّ حجم ملفات الصور الشعاعية أقل من مقابلاتها النقطية، لأنها ستحمل فقط عدة خوارزميات بدلًا من معلومات عن كل بكسل بمفرده. ما هي صور SVG؟ تُعَدّ SVG لغةً وصفيةً مبنيةً على أساس اللغة XML، وتشابه من حيث المبدأ لغة HTML، ما عدا أنها تضم عناصر مختلفة لتعريف الأشكال التي تريد عرضها في صفحتك والتأثيرات التي تريد تطبيقها على هذه الأشكال، فهي إذًا لغة لتوصيف الرسوم وليس المحتوى، وستجد عناصر إنشاء الأشكال البسيطة مثل الدائرة <circle> والمستطيل <rect> على أساس مثال عن أبسط العناصر، كما ستجد عناصر تعطي ميزات أكثر تقدمًا مثل <feColorMatrix> لتحويل الألوان باستخدام مصفوفة التحويل و <animate> لتحريك أجزاء من الرسم الشعاعي و <mask> لتطبيق قناع فوق صورتك. ستعطيك الشيفرة التالية على سبيل المثال صورةً لدائرة ومستطيل: <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="black" /> <circle cx="150" cy="100" r="90" fill="blue" /> </svg> وستكون النتيجة كما يلي: قد يراودك شعور أنّ كتابة شيفرات الصور الشعاعية هين كما في المثال السابق، وبالطبع يمكنك كتابة شيفرات أمثلة بسيطة مثل تلك، ولكن سرعان ما ستجد صعوبةً بالغةً عند تصميم الصور الأعقد، إذ يستخدِم معظم المصممين برامج تحرير خاصة لإنشاء صور مثل هذه مثل "إنكسكيب Inkscape" و "إليستريتور illustrator"، كما تساعدك هذه البرمجيات في إنشاء رسومات متنوعة باستخدام أدوات متنوعة للرسم وإنشاء أشكال تقريبية للصور مثل ميزة "تتبع الخريطة النقطية Trace Bitmap" التي يتيحها برنامج "إنك سكيب". تمتلك صور SVG ميزات متقدمةً إضافةً إلى ما ذكرناه سابقًا: يمكن الوصول إلى النصوص ضمن صور SVG والتعامل معها، ولهذا الأمر فوائده فيما يتعلق بالسيو SEO. يمكن أن تنقل جزءًا من صورة إلى أخرى لأنها مكوّنات مستقلة على هيئة عناصر، وبإمكانك أيضًا تنسيقها باستخدام CSS وكتابة شيفرة للتحكم بها باستخدام جافاسكربت. لماذا سيفضِّل المطورون إذًا استخدام الصور النقطية على صور SVG؟ السبب هو بعض المساوئ: يمكن أن تتعقد شيفرتها بسرعة، مما يعني أنّ حجمها قد يزداد، وقد يتطلب تصييرها زمنًا أطول من قِبَل المتصفح. قد يكون إنشاء هذه الصورة أصعب من الصور النقطية تبعًا لطبيعة الصور التي تنوي إنشاءها. لا تدعم المتصفحات القديمة هذه الصور، وبالتالي لن تكون مناسبةً إذا قررت دعم تلك المتصفحات مثل النسخ القديمة لإنترنت إكسبلورر فهي مدعومة ابتداءً من النسخة IE9. يرى البعض أنّ الرسوميات النقطية أفضل عند إنشاء صور معقدة عالية الدقة مثل الصور الفوتوغرافية، وذلك للأسباب التي شرحناها آنفًا. إضافة صور SVG إلى صفحات الويب سنعرض في هذا القسم الطرق المختلفة التي يمكن اتباعها لإضافة صور SVG الشعاعية إلى صفحة الويب. الطريقة السريعة: استخدام العنصر يُنفَّذ الأمر بالإشارة إلى ملف الصورة الشعاعية من خلال السمة src، كما تحتاج إلى ضبط قيمتي الطول والعرض من خلال السمتَين width و height وخاصةً إذا لم ترث صورة SVG نسبة البُعدين aspect ratio، لذا راجع مقال إضافة الصور في صفحات HTML إذا لم تفعل ذلك من قبل. <img src="equilateral.svg" alt="triangle with all three sides equal" height="87" width="100" /> الحسنات: طريقة سريعة، صياغة قواعدية مألوفة، ويمكن تزويدها ببديل نصي من خلال السمة alt. يمكن تحويلها إلى رابط بسهولة عن طريق وضعها ضمن العنصر <a>. يمكن أن يخزِّن المتصفح ملف SVG تخزينًا مؤقتًا، مما يزيد من سرعة تحميل الصفحة إذا أردت تحميلها مجددًا في المستقبل. السيئات: لا يمكن التلاعب بالصورة عبر جافاسكربت. ينبغي استخدام قواعد CSS سطرية inline CSS ضمن شيفرة ملف SVG لتتمكن من التحكم بمحتوى الصورة، إذ لن تؤثر ملفات التنسيق الخارجية التي يستدعيها ملف SVG. لا يمكن إعادة تنسيق الصورة باستخدام أصناف CSS المجردة مثل :focus. استكشاف الأخطاء ودعم المتصفحات عند استخدامك متصفحات لا تدعم SVG مثل IE8 ومتصفحات نظام أندرويد بنسخة تحت 2.3، فيمكنك الإشارة إلى صورة PNG أو JPG عبر السمة src ومن ثم استخدم السمة srcset التي تميزها المتصفحات الحديثة فقط للإشارة إلى صورة SVG، وفي هذه الحالة لن تشغل صورة SVG سوى المتصفحات الحديثة التي تدعمها وستشغل المتصفحات الأقدم الصورة النقطية: <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"> يمكنك استخدام صورة SVG على أساس خلفية من خلال تنسيقات CSS، إذ ستجد في الشيفرة التالية أنّ المتصفحات القديمة ستتعامل فقط مع الصورة النقطية التي تفهمها، في حين ستميز الحديثة صورة SVG: background: url("fallback.png") no-repeat center; background-image: url("image.svg"); background-size: contain; لا يمكن كذلك التلاعب بالخلفية SVG التي ندرجها من خلال تنسيقات CSS باستخدام جافاسكربت، وتخضع للقيود نفسها التي يخضع لها استخدام قواعد CSS مع صور SVG التي يدرجها العنصر <img>. كيفية إدراج صور SVG ضمن صفحات HTML يمكنك فتح ملف SVG باستخدام محرر نصي، كما يمكن نسخ شيفرته ولصقها في ملف HTML، إذ تُدعى هذه العملية بالإدراج المباشر SVG inline أو inlining SVG، بحيث تُضاف هذه الشيفرة إلى HTML بين وسمَي البداية والنهاية للعنصر <svg>، وإليك مثالًا بسيطًا كما يلي: <svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg> الحسنات: تقلل هذه العملية من طلبات HTTP، وبالتالي قد تقلل من زمن تحميل الصفحة. يمكنك استخدام السمة class والسمة id مع العنصر <svg>، كما يمكن تنسيقه باستخدام CSS ضمن العنصر ذاته أو في أيّ مكان تضع فيه قواعد تنسيق CSS الخاصة بملف HTML، وعمومًا يمكنك استخدام أي سمة وصفية للعنصر SVG على أساس خاصية من خواص CSS. يُعَدّ الإدراج المباشر لشيفرة SVG الطريقة الوحيدة التي تتيح لك استخدام قواعد CSS التفاعلية مثل الأصناف المجردة مثل :focus والرسوم المتحركة ضمن صور SVG، حتى ضمن صفحات التنسيق النمطية. يمكنك توصيف شيفرة SVG على أساس رابط بتغليفها داخل العنصر <a>. السيئات: تُعَدّ هذه الطريقة مناسبةً فقط إذا استخدمت SVG في مكان واحد، فالتكرار قد يسبب استخدامًا كثيرًا للموارد. سيزيد استخدام شيفرة SVG زائدة من حجم ملف HTML. لا يمكن للمتصفحات تخزين شيفرة SVG المباشرة كما تخزن شيفرة SVG المدرَجة ضمن الصور النمطية، وبالتالي لن تزيد سرعة تحميل الصفحات التي حُمِّلت سابقًا في هذه الحالة. بإمكانك تزويد صورة SVG بمحتوى بديل باستخدام العنصر <foriegnObject>، لكن ستنزل المتصفحات التي تدعم SVG أيضًا الصور البديلة أو الاحتياطية، ولهذا عليك التفكير مليًا في ضرورة دعم المتصفحات القديمة أو لا. إدراج صور SVG باستخدام العنصر <iframe> يمكنك أيضًا فتح صور SVG في متصفحك، وبالتالي يمكنك إدراج هذه الصورة في صفحتك باستخدام <iframe> على نحو مماثل تمامًا لما فعلناه في مقال آليات إدراج المحتوى والوسائط المتعددة في صفحة HTML، وإليك مراجعة سريعة: <iframe src="triangle.svg" width="500" height="500" sandbox> <img src="triangle.png" alt="Triangle with three unequal sides" /> </iframe> وبالطبع فهي ليست الطريقة الأفضل لإدراج SVG. السيئات: يملك لعنصر <iframe> آليةً لعرض محتوى بديل في حال حدثت مشكلة في عرضه، لكن ستعرض المتصفحات هذا المحتوى فقط إذا لم تدعم العنصر <iframe> بالكامل. إذا لم يكن لصفحتك وملف SVG أصلًا مشتركًا، فلن تتمكن من استخدام جافاسكربت في صفحتك الرئيسية للتلاعب بهذا الملف. تطبيق: العمل مع SVG سنحاول في هذا التطبيق العمل على بعض رسوميات SVG على سبيل التسلية، فلقد وضعنا في قسم المدخلات Input ضمن محرر الشيفرة في الأسفل بعض الأمثلة لتبدأ، كما يمكنك الاطلاع على عناصر SVG أخرى لتعمل عليها بالعودة إلى مرجع MDN إلى عناصر SVG، إذًا فهذا القسم لشحذ مهاراتك في البحث مع قليل من التسلية. إذا ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر إعادة الضبط Reset. خلاصة قدمنا لك في هذا المقال جولةً سريعةً على الرسوم الشعاعية وملفات SVG، كما بيّنا فائدتها وكيفية إدراج صور SVG في صفحات الويب، فلم يكن القصد من هذا المقال تزويدك بدليل لتعلم SVG، وإنما لتعريفك بهذه التقنية إذا صادفتها لاحقًا خلال رحلتك في تطوير الويب، فلا تقلق إذًا إذا لم تجد نفسك خبيرًا بعد. سنناقش في آخر مقالات هذه السلسلة مفهوم الصور المتجاوبة responsive images بشيء من التفصيل، وسنلقي نظرةً على أدوات HTML التي تتيح لك إدراج صور تُعرَض جيدًا على مختلف الأجهزة. ترجمة -وبتصرُّف- للمقال Adding vector graphics to the web. اقرأ أيضًا نصائح لإنشاء وتصدير رسومات SVG للويب إضافة الصور في صفحة HTML كيفية إنشاء أشكال بسيطة باستخدام SVG

لا بد وأنك قد امتلكت فكرةً واضحةً عن مفهوم إدراج المحتوى في صفحات الويب بما في ذلك إدراج الصور والفيديو والصوتيات، إذ سنتخذ في هذا المقال خطوات جانبيةً لنلقي نظرةً على العناصر <object> و <embed> و <iframe> التي تسمح بإدراج محتويات متنوعة في صفحات الويب، إذ يُستخدَم <iframe> في إدراج صفحات الويب أخرى؛ أما العنصران الباقيان فيسمحان لك بإدراج ملفات PDF و SVG وحتى ملفات فلاش التي تُعَدّ في نهاياتها ومع ذلك قد تراها. لا بد قبل البدء بقراءة هذا المقال أن تكون على دراية بأساسيات عمل الحاسوب وطريقة تثبيت البرمجيات الأساسية ودراية بطريقة عمل الملفات، ولا بد أيضًا من الدراية بأساسيات اللغة HTML كما عرضناها في مقال تعرَّف على HTML، وطريقة إدراج الصور في صفحة HTML وطريقة إدراج المحتوى البصري والسمعي في صفحة HTML. لمحة موجزة عن تاريخ إدراج المحتوى زادت فيما مضى شعبية استخدام الإطارات frames لإنشاء مواقع الويب، وهي أجزاء صغيرة من موقع ويب مخزنة ضمن صفحات HTML مستقلة، وقد أدرجت هذه الأجزاء في ملف رئيسي دُعي مجمِّع الإطارات frameset يعطيك إمكانية التحكُّم بالمكان الذي يشغله كل إطار بصورة مشابهة نوعًا ما لتحديد أبعاد الصفوف والأعمدة في جدول، وقد عُدّ هذا الأسلوب الأكثر جمالًا في بداية تسعينات القرن الماضي، كما لوحظ أن تقسيم الصفحة إلى أجزاء أصغر سيزيد من سرعة تحميلها وخاصةً مع سرعات الاتصال المنخفضة في تلك الفترة، ولكن مع ذلك، فقد عانى هذه الأسلوب من مشاكل عدة ألغت معها إيجابية السرعة، فلم تَعُد تراها في أيامنا. ازدادت شعبية تقنية الإضافات plug-ins بعد فترة -أي أواخر التسعينات وبداية الألفية الجديدة- مثل جافا أبليت Java Applets وفلاش، مما يسمح لمطورِي الويب من إدراج محتوى غني في صفحات الويب مثل مقاطع الفيديو والرسوم المتحركة التي لم تكن متاحةً باستخدام HTML وحدها، وقد أدرجت هذه التقنيات باستخدام عناصر مثل <object> والعنصر الأقل استخدامًا <embed>، ولقد كانا شديدي الفائدة حينها، لكن سرعان ما خبى تألقهما لأسباب عديدة يتعلق بعضها بسهولة الوصول والأمان وحجم الملفات، وقد توقفت معظم المتصفحات الحديثة في أيامنا عن دعم هذه الإضافات مثل تقنية فلاش. ظهر أخيرًا العنصر <iframe> مع طرق أخرى لإدراج المحتوى مثل <canvas> و <video> الذي يتيح إمكانية إدراج صفحة ويب بأكملها ضمن أخرى كما لو كانت صورةً أو أيّ عنصر آخر، وتستخدَم كثيرًا حاليًا. لننتقل بعد هذا الدرس التاريخي لنرى كيف نستخدِم بعض هذه العناصر. تطبيق: الاستخدامات التقليدية لإدراج العناصر سنقفز مباشرةً في هذا المقال إلى التطبيق لكي نعطيك فكرةً واقعيةً عن فائدة تقنيات إدراج المحتوى في صفحات ويب، إذ يشتهر موقع اليوتيوب كثيرًا في عالم الويب، لكن لا يعلم الكثيرون عن إمكانيات المشاركة التي يتيحها، فلنلق نظرةً إذًا على الطريقة التي يسمح فيها اليوتيوب بإدراج فيديو في أيّ صفحة باستخدام العنصر <iframe>. انتقل إلى موقع اليوتيوب واختر الفيديو الذي تريد. ستجد تحت الفيديو زر مشاركة Share، انقر عليه لتعرض خيارات المشاركة. اختر زر إدراج Embed وستشاهد شيفرة تضم العنصر <iframe>. انسخ هذه الشيفرة والصقها في الصندوق Input لمحرر الشيفرة الذي تراه في الأسفل وراقب ما يحدث في منطقة الخرج output. حاول إدراج خريطة من خرائط جوجل لتكسب نقاطًا إضافيةً: انتقل إلى جوجل ماب وانتق خريطةً ما. انقر على أيقونة القائمة الرئيسية -أي أيقونة الخطوط المتلاحقة- في الزاوية العليا اليسارية من واجهة المستخدِم. اختر مشاركة أو إدراج خريطة Share Embed map. اختر إدراج خريطة Embed map والذي سيزوّدك بشيفرة تضم العنصر <iframe>، انسخها. الصقها في الصندوق Input لمحرر الشيفرة الذي تراه في الأسفل وراقب ما يحدث في منطقة الخرج output. إذ ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر إعادة الضبط Reset، في حين إذا وجدت نفسك تائهًا كليًا، فانقر على زر أظهر الحل Show solution لترى الحل الصحيح. العنصر iframe بالتفصيل لقد كان الأمر مسليًا وسهلًا حتى الآن، وقد صُمم العنصر <iframe> ليسمح بإدراج صفحات ويب خارجية ضمن صفحة الويب التي تعمل عليها، كما تقدِّم هذه التقنية فائدةً عظيمةً لإضافة محتوى مصدره طرف ثالث في الصفحة لا يمكنك التحكّم به مباشرةً ولا تريد في الوقت نفسه إدراج نسخة خاصة بك من هذا المحتوى مثل الفيديوهات التي تقدمها مزودات الفيديو على الإنترنت مثل يوتيوب أو أنظمة إدراج التعليقات مثل Disque أو الخرائط أو لوحات الإعلانات وغيرها، وما سنعمل عليه في مقالنا هو استخدام العنصر <iframe> في إدراج محتوى مثل هذا في صفحات ويب. لكن، هنالك بعض الهواجس الأمنية فيما يتعلق باستخدام <iframe> كما سنناقش لاحقًا، لكن هذا لايعني ألا تستخدِمه في مواقعك، وإنما لدفعك إلى القليل من التفكير المتأني، ولنتفحّص الشيفرة التالية بشيء من التفصيل، فلنقل أنك تريد إدراج "قائمة مصطلحات شبكة مطوري موزيللا MDN glossary"، إذ يمكنك محاولة العمل على الشيفرة التالية: <head> <style> iframe { border: none } </style> </head> <body> <iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" allowfullscreen sandbox> <p> <a href="/en-US/docs/Glossary"> Fallback link for browsers that don't support iframes </a> </p> </iframe> </body> يضم المثال السابق الأساسيات الضرورية لاستخدام <iframe>: border: none: إذا استخدمت هذه السمة، فسيُعرَض العنصر <iframe> دون إطار محيط به، وإلا فسيعرض المتصفح افتراضيًا إطارًا حوله. allowfullscreen: إذا استخدمت هذه السمة، فسيُعرَض العنصر <iframe> داخل شاشة كاملة، وذلك باستخدام الواجهة البرمجية التي تدير العرض على شاشة كاملة Fullscreen API. src: تشابه نظيرتها في العنصر <video> وتضم مسارًا يدل على عنوان URL الخاص بالمحتوى المُدرج. height و width: وهما سمتان تحددان طول وعرض المنطقة التي تعرض محتوى العنصر <iframe>. المحتوى الاحتياطي Fallback content: كما هو الحال مع العنصر <video>، إذ يمكنك إدراج محتوى احتياطي بين وسمَي البداية والنهاية للعنصر <iframe> سيظهر في حال لم يدعم المتصفح هذا العنصر، وقد زودنا المستخدِم في حالات مثل هذه برابط مباشر إلى الصفحة التي لم يتمكن المتصفح من إدراجها، لكن من غير المحتمل أن تصادف متصفحًا حديثًا لا يدعم <iframe>. sandbox: تعمل هذه السمة في متصفحات أكثر حداثةً مثل إنترنت إكسبلورر 10 موازنةً بغيرها من ميزات <iframe>، كما تتطلب إعدادات أمان متشددة أكثر، وسنتحدث عن ذلك في القسم التالي. ملاحظة: لتزيد من سرعة تحميل الصفحة يمكن إسناد قيمة السمة src باستخدام شيفرة جافاسكربت عند انتهاء تحميل المحتوى الرئيسي للصفحة، وبهذه الطريقة يمكن استخدام صفحتك مباشرةً ويقل زمن تحميلها الرسمي وهو معيار سيو SEO هام. اعتبارات أمنية لا نتوقع منك أن تفهم جيدًا جميع هذه الاعتبارات الأمنية من المرة الأولى التي تتعرف عليها، وإنما نريدك الانتباه إليها وأن يكون لديك مرجع لتعود إليه عندما تزداد خبراتك وتقرر استخدام العنصر <iframe> في أعمالك، ولا حاجة للخوف طبعًا من استخدام هذا العنصر وإنما لمزيد من الانتباه. لقد تعلم صانعِي المتصفحات ومطورِي الويب من تجاربهم المريرة أنّ النوافذ الضمنية المتمثلة بالعنصر <iframe> هي هدف شائع -أو ضحية هجوم Attack vectom بالتسمية الرسمية- لأشخاص سيئون على الويب والذين يطلَق عليهم اسم مختطفين hackers أو مخترقين crackers، وذلك كي يهاجموك من خلالها عندما يحاولون تعديل صفحتك بطريقة غير سليمة أو أن يخدعوا آخرين لفعل أمور لا يريدون فعلها مثل إفشاء معلومات حساسة مثل اسم المستخدِم أو كلمة السر، ولهذا السبب يحاول المهندسون المختصون ومطورو المتصفحات ابتكار آليات حماية متنوعة لجعل استخدام العنصر <iframe> أكثر أمانًا وإيجاد طرق عملية مثلى يجدر اتباعها وسنغطي بعضًا منها في هذا القسم. ملاحظة: يعد الاختطاف بالنقر هجومًا شائعًا يستهدف النوافذ الضمنية، إذ يُدرِج المخترق نافذةً غير مرئية في صفحتك أو يدرج صفحتك ضمن موقعه المشبوه، ثم يستخدِم ذلك في لفت انتباه المستخدِمين، وهي طريقة شائعة في تضليلهم أو لسرقة بياناتهم الحساسة. سنقدم لك مثالًا سريعًا: حاول تحميل المثال الذي عرضناه في الأعلى في متصفحك، إذ يمكنك إيجاده ضمن المستودع المخصص له على جيت -هاب، كما يمكنك أيضًا الاطلاع على الشيفرة المصدرية، ما سيحدث أنه بدلًا من أن يعرض لك الصفحة المطلوبة وهي "قائمة مصطلحات MDN"‘ فقد تشاهد رسالة من قبيل "لا يمكن فتح هذه الصفحة I can't open this page"، فإذا انتقلت إلى "الطرفية Console" ضمن أدوات مطورِي الويب المدمجة مع المتصفح، فستجد رسالةً تفسِّر لك سبب ما حدث، إذ سيكون نص هذه الرسالة في فايرفوكس مشابهًا للتالي: (إنّ فتح المورد "https://developer.mozilla.org/en-US/docs/Glossary" في إطار مرفوض لأن التوجيه "X-Frame-Options" قد ضُبط على القيمة DENY)، ويعود السبب إلى أنّ المطورين الذين بنوا "شبكة مطور موزيللا MDN" قد أضافوا إعدادًا إلى الخادم الذي يستضيف MDN يمنع إدراج هذه الصفحات ضمن نوافذ ضمنية <iframe>، ويُعَدّ الأمر منطقيًا، فمن غير الوارد إدراج صفحة كاملة من MDN ضمن صفحات أخرى ما لم تحاول وضعها في موقعك الخاص ثم تدعي ملكيتك لها، أو أن تحاول سرقة بيانات حساسة من خلال هجوم الاختطاف بالنقر، وكلاهما أمر سيء، وبالإضافة إلى ذلك، سيكلِّف هذا الفعل موزيللا مبالغ طائلة عندما يتخطى استهلاك الموقع عرض حزمة التراسل المعتمدة. لا تدرج ما ليس ضروريا قد يبدو معقولًا في بعض الحالات إدراج محتوى مصدره طرف آخر مثل فيديوهات يوتيوب أو خرائط جوجل، لكن وفِّر على نفسك الكثير من المشاكل ولا تدرج أيّ محتوى مصدره طرف ثالث ما لم يكن ذلك ضروريًا جدًا، وتذكَّر دائمًا قاعدة أمان أساسية في ويب تقول: "لا شيء يُدعى زيادةً في الحرص، تحقق مجددًا حتى لو فعلت ذلك، وإذا تحقق أحدهم، فافترض أنك في خطر حتى يثبت العكس". إضافة إلى عامل الأمان، لا بد من الانتباه إلى مواضيع الخصائص، إذ يتمتع المحتوى بمعظمه بحقوق نشر على الإنترنت أو خارجها حتى غير المتوقع منها مثل معظم صور ويكيميديا، لذلك لا تعرض محتوًى على صفحتك ما لم تمتلكه أو حصلت على إذن مكتوب وجلي، فعقوبات مخالفة حقوق النشر شديدة، ونقولها مجددًا: "لا شيء يُدعى زيادةً في الحرص"، فإذا كان المحتوى مرخصًا، فالتزم بشروط الرخصة، فمحتوى أكاديمية حسوب مثلًا مرخَّص بموجب الرخصة CC-BY-NC-SA، ويعني ذلك أنه عليك الإشارة إلى أكاديمية حسوب بصورة مناسبة عند اقتباس أيّ محتوى منها حتى لو أجريت تعديلات مهمة عليه واستعمال المحتوى بشكل غير تجاري. استخدم بروتوكول HTTPS يُعَدّ نسخةً مشفرةً من بروتوكول HTTP، وينبغي استخدامه ما أمكن في موقعك: يقلل استخدام HTTPS فرصة التلاعب بالمحتوى عن بعد أثناء نقله. يمنع HTTPS المحتوى الذي تُدرجه من الوصول إلى محتوى الصفحة الأساسية وبالعكس. يمكِّن بروتوكول HTTPS موقعك من طلب تثبيت شهادات أمان خاصة، إذ تقدِم الكثير من مزودات الاستضافة استخدام HTTPS دون الحاجة إلى أية إعدادات من طرفك لتثبيت شهادة أمان في مكانها، وإذا أردت أيضًا إعداد خدمات HTTPS بنفسك على موقعك، فستجد أدوات وإرشادات تقدِّمها منظمة Let's Encrypt لإنشاء وتثبيت الشهادات المطلوبة تلقائيًا مع دعم مدمج لمعظم خوادم الويب الأكثر استخدامًا مثل Apache و Nginx وغيرها، وقد صممت تلك الأدوات لتجعل العملية سهلة قدر الإمكان، فلا سبب يمنع استخدامها أو غيرها من وسائل دعم HTTPS على موقعك. ملاحظة: تدعم خدمة GitHub pages بروتوكول HTTPS افتراضيًا، فهي منتسبة إذًا لاستضافة المحتوى، فإذا كنت تستخدِم مزود استضافة آخر ولست واثقًا من دعمه للبروتوكول، فاسأله عن هذه التفاصيل. استخدم السمة sandbox دائما عليك منح المحتوى الذي تُدرجه في موقعك أقل مستوى من السماحيات التي تمّكنه من إنجاز عمله دون إعطاء فرصة للمخترقين بإحداث ضرر في موقعك، وينطبق الأمر أيضًا على المحتوى الخاص بك، كما تُدعى أي حاوية للشيفرات يمكن أن تُستخدَم فيها تلك الشيفرات بصورة ملائمة أو لأغراض اختبارية دون أن تسبب أذىً لبقية الشيفرة مصادفةً أو عمدًا بصندوق معزول أو محمي sandbox. يمكن لأيّ محتوى لا يقيده صندوق عزل فعل الكثير على صفحاتك مثل تنفيذ شيفرات جافاسكربت أو إرسال استمارات أو عرض نوافذ منبثقة، لذلك لا بد من استخدام كل التقييدات المتاحة باستخدام السمة sandbox دون أية معاملات -أي قيم- كما عرضناها في مثالنا السابق. لكن إذا كان الأمر ضروريًا، فتستطيع إضافة الأذونات واحدًا تلو الآخر داخل قيمة السمة ""=sandbox وسنتحدث عن هذه الأذونات تاليًا، كما تجدر الإشارة إلى عدم استخدام الخيارين allow-scripts و allow-same-origin معًا، فقد يلتف المحتوى الذي تُدرجه على الخيار allow-same-origin الذي يمنع المواقع من تنفيذ الشيفرة، ثم تُستخدم جافاسكربت في إلغاء عمل السمة sandbox كلها. ملاحظة: لا يمكن لصندوق عزل تأمين الحماية من المخترقين إذا خدعوا المستخدِمين ودفعوهم لزيارة مواقع مشبوهة مباشرةً خارج العنصر <iframe>، فإذا كان هناك احتمال أن يكون المحتوى الذي تريد إدراجه مشبوهًا مثل المحتوى الذي ينتج عن تفاعل مستخدِمين، فحاول تقديمه لمتابعيك من نطاق domain مختلف عن نطاق موقعك. تهيئة توجيهات سياسة أمن المحتوى CSP تؤمن سياسة أمن المحتوى مجموعةً من ترويسات بروتوكول HTTP وهي بيانات وصفية تُرسل مع صفحات ويب عندما يعيدها الخادم مصممة لتحسين مستوى أمان صفحات HTML؛ أما فيما يتعلق باستخدام العنصر <iframe>، فبإمكانك تهيئة الخادم ليعيد ترويسة تضم خيار ملائم للتوجيه X-Frame-Options، إذ سيمنع ذلك مواقع الويب الأخرى من إدراج المحتوى الخاص بك في صفحاتها والذي قد يمكِّن هجمات الاختطاف بالنقر وغيرها من الهجمات، وهذا ما فعله تمامًا مطورو MDN كما رأينا سابقًا. العنصران object و embed لهذين العنصرين وظيفتين مختلفتين عن العنصر <iframe>، فهما أداتان عامتان لإدراج محتوى خارجي مثل ملفات PDF، ومع ذلك لن تستخدِم هذين العنصرين كثيرًا، إذ يستحسن إذا أردت مثلًا عرض ملف PDF أن تربطه بصفحتك بدلًا من إدراجه. استُخدِم هذان العنصران تاريخيًا لإدراج محتوى تتعامل معه إضافات المتصفح plug-ins مثل أدوبي فلاش، لكنها تقنية في طريقها إلى الزوال حاليًا ولا تدعمها المتصفحات الحديثة، لكن إذا رأيت نفسك مضطرًا إلى إدراج إضافة، فإليك الحد الأدنى من المعلومات اللازمة لإنجاز الأمر: table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } <embed> <object> عنوان URL للمحتوى الذي ستدرجه src data النوع الدقيق لملف الوسائط الذي تدرجه type type طول وعرض بكسلات CSS الصندوق الذي تتحكم به الإضافة height ، width height ، width الأسماء والقيم التي تستخدمها الإضافة على أساس معامِلات استخدم عند الحاجة سمات بهذه الأسماء أو القيم استخدم عنصر <parm> مفرد ضمن العنصر <object> محتوى HTML مستقل على أساس خطة بديلة عند عدم توافر المورد غير مدعوم (العنصر <noembed> ملغي) يمكن إضافتها داخل العنصر <object> بعد <parm> لنلق نظرةً على مثال يستخدِم العنصر <object> لإدراج ملف PDF في صفحة ويب، كما يمكنك أيضًا تجريب المثال مباشرة والاطلاع على الشيفرة المصدرية: <object data="mypdf.pdf" type="application/pdf" width="800" height="1200"> <p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file. </a> </p> </object> تُعَدّ ملفات PDF خطوةً انتقاليةً هامةً بين الورقيات والعالم الرقمي، لكنها تعرض الكثير من التحديات المتعلقة بسهولة الوصول، وقد يعاني البعض من قراءتها ضمن شاشات صغيرة، ومازالت هذه الملفات شعبيةً ضمن بعض حلقات المستخدِمين، مع ذلك، يفضَّل ربطها بصفحاتك ليتمكن هؤلاء من تنزيلها أو قراءتها في صفحة مستقلة بدلًا من إدراجها في صفحتك. خلاصة حاولنا في مقالنا هذا تقديم مفهوم إدراج محتوى في صفحاتك بطريقة مبسطة، لأنّ موضوعًا مثل هذا قد يتعقّد بسرعة إذا خضنا فيه بطريقة غير ملائمة، ولهذا اعتمدنا أسلوبًا مألوفًا يبدو متعلقًا مباشرةً بمضمون سلسلة المقالات، ومع ذلك يحاول شرح بعض الميزات المتقدمة المتعلقة بالتقنيات المستخدَمة، كما ننصحك في البداية بعدم إدراج محتوى خارج نطاق المحتوى الذي يقدمه طرف ثالث مثل الفيديوهات والخرائط، وسرعان ما ستبدأ البحث عن استخدامات أخرى لعناصر الإدراج عندما تصبح أكثر تمرّسًا. ستجد الكثير من التقنيات المتعلقة بإدراج محتوى خارجي بالإضافة إلى ما ناقشناه، فقد رأينا بعضها في المقالات السابقة مثل العناصر <video> و <audio> و <img>، كما ستجد غيرها الكثير مثل <canvas> الذي يُستخدَم مع جافاسكربت لتوليد رسوميات ثنائية وثلاثية الأبعاد والعنصر <SVG> الذي يستخدَم في إدراج الرسوميات الشعاعية، وهذا هو موضوعنا في المقال القادم. لمزيد من التفاصيل حول عناصر HTML، ارجع إلى توثيق لغة HTML العربي في موسوعة حسوب. ترجمة -وبتصرُّف- للمقال From object to iframe - other embedding technologies. اقرأ أيضًا مكونات الويب: عناصر HTML المخصصة وقوالبها إضافة محتوى سمعي ومرئي في صفحة HTML إضافة الصور في صفحة HTML

حان الوقت لإدراج مشغلات الفيديو والصوتيات ضمن صفحات 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 سنحتاج إلى: حفظ الملف بالامتداد vtt.. ربط الصفحة بملف vtt. مستخدِمًا العنصر <track> الذي ينبغي وضعه ضمن العنصر <video> أو العنصر <audio> لكن بعد جميع العناصر <source>. استخدام السمة kind للعنصر <track> لتحديد نوع الأنساق إذا كانت "subtitles" أو "captions" أو "descriptions". استخدام السمة 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. إذا لم تشأ أن تسجِّل بنفسك، فلك كامل الحرية في اختيار عينات الفيديو والصوت التي جهزناها لهذا التمرين، كما يمكنك استخدام شيفرتنا المصدرية على أساس مرجع. نطلب منك: حفظ ملفات الفيديو والصوت في مجلد جديد على حاسوبك إنشاء ملف HTML جديد في المجلد نفسه باسم index.html. أضف العنصرين <video> و <audio> إلى الصفحة واجعلهما يعرضان أدوات التحكم الافتراضية للمتصفح. أضف السمة source إلى كل منهما لكي تجد المتصفحات التنسيق الصوتي الذي تدعمه، ولا بد في هذه الحالة من استخدام السمة type أيضًا. أضف صورة بداية poster إلى العنصر <video> كي تعرض قبل تشغيل المقطع. لكي تضع لنفسك نقاطًا إضافيةً، حاول الاطلاع أكثر على المسارات النصية وإضافة بعض الشروحات إلى الفيديو الخاص بك. خلاصة نكون هكذا قد وصلنا إلى نهاية المقال وقد اطلعنا على الأسلوب الدلالي في إدراج مقاطع الفيديو والمقاطع الصوتية في صفحتك، وسنتابع في المقال التالي موضوع إدراج محتوى من ويب ضمن صفحاتك باستخدام تقنيات مثل العنصر <iframe>. ترجمة -وبتصرُّف- للمقال Video and audio content. اقرأ أيضًا إعداد صور متجاوبة إضافة الصور في صفحات 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 لنحاول استخدام الملف البسيط الذي ناقشناه سابقًا: حمِّل خدمة التحقق من التوصيف في المتصفح إذا لم تكن قد فعلت ذلك. انتقل إلى نافذة التحقق من دخل مباشر Validate by Direct Input. انسخ شيفرة الملف بالكامل ثم الصقها في مربع النص الكبير الظاهر في النافذة. انقر الزر "تحقق 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> إذ سيصيَّر كما يلي: التخطيط لموقع ويب بسيط ستكون الخطوة المنطقية التالية حالما تنتهي من وضع خطط هيكلة موقعك البسيط هي العمل على تحديد المحتوى الذي يضمه الموقع وما الصفحات التي تحتاجها وكيف سترتبها وتربطها ببعضها لكي تقدِّم لمستخدِميك أفضل تجربة، وتُدعى هذه الخطوة بمعمارية المعلومات، وقد يحتاج الأمر في المواقع الضخمة والمعقدة إلى الكثير من التخطيط، لكن لموقع بسيط مثل الذي نشير إليه في هذا المقال، فالعملية أسهل وأكثر متعة. تذكّر أنه لديك مجموعة من العناصر التي ستتكرر في معظم -إن لم يكن في كل- الصفحات مثل قوائم التنقل والمحتوى الموجود في تذييل الصفحة، فمن الجيد مثلًا -إذا كان موقعك لإدارة عمل ما- وضع معلومات للتواصل في تذييل جميع الصفحات، ولهذا ينبغي عليك تدوين ما الذي تريده أن يكون مشتركًا في صفحاتك. ارسم لوحة بسيطة لما تتوقع أن يكون عليه هيكل الصفحة (فقد تريدها أن تبدو مماثلة للموقع النموذجي الذي عرضناه في الأعلى). دوّن ما سيكون عليه كل جزء. فكِّر الآن بما تريده من المحتوى غير المشترك بين الصفحات لتضعه في موقعك، ودوِّن ذلك في قائمة. حاول تصنيف عناصر المحتوى الذي تختاره في مجموعات لكي تتشكل لديك أفكار عن المجموعات التي يمكن أن تقع في الصفحات نفسها. حاول بعد ذلك وضع خريطة للموقع على هيئة فقاعات لكل صفحة ثم صل بخطوط بينها لتوضيح طبيعة التواصل بينها، إذ ستكون الصفحة الرئيسية في المنتصف وسترتبط بمعظم الصفحات، وينبغي أن ترتبط كل الصفحات في المواقع البسيطة بالصفحة الرئيسية مع وجود بعض الاستثناءات، كما عليك أيضًا تدوين بعض الملاحظات عن كيفية عرض الأشياء، وهذا أمر مشابه لتقنية تُدعى تصنيف البطاقات. تطبيق: أنشئ خريطة موقع خاصة بك حاول إنشاء خريطة لموقعك، ما الذي تريده من موقعك؟ ملاحظة: احفظ عملك في مكان مناسب، فقد تحتاج إليه لاحقًا. خلاصة من المفترض أنك كوَّنت صورةً واضحةً عن هيكلة صفحة أو موقع ويب، وسنناقش في المقال التالي كيف ننقح الأخطاء في 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> تطبيق: توصيف مجموعة من التعريفات حان الوقت لتجرّب بنفسك قوائم الوصف، لذلك أضف العناصر المناسبة إلى النص الموجود في حقل مدخلات محرر الشيفرة في الأسفل لكي يظهر على صورة قائمة وصف ضمن حقل المخرجات output field، كما يمكنك تجريب مصطلحات وتعريفات خاصة بك أيضًا. إذا ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر إعادة الضبط Reset، في حين إذا وجدت نفسك تائهًا كليًا، فانقر على زر أظهر الحل Show solution لترى الحل الصحيح. الاقتباسات Quotations تتيح لغة HTML عناصر للدلالة على الاقتباسات quotations، ويختلف العنصر المُستخدَم لإنشاء اقتباس إذا كنت توصِّف اقتباسًا مأخوذًا من عنصر كتلي Block أو سطري Inline. الاقتباسات الكتلية إذا اقتُبس جزء من محتوى عنصر كتلي مثل فقرة نصية أو عدة فقرات أو قائمة من مكان ما، فلا بد من تضمينه داخل العنصر <blockquote> لإظهاره على أساس فقرة وإضافة عنوان URL إلى مصدر الاقتباس بواسطة السمة cite، ويعرض المثال التالي محتوًى مأخوذًا من صفحة العنصر <blockquote> على شبكة مطورِي موزيللا MDN: <p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p> علينا كتابة ما يلي لتحويل هذا المحتوى إلى اقتباس عن عنصر كتلي: <p>Here below is a blockquote...</p> <blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> <p>The <strong>HTML <code><blockquote></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><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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/Element/blockquote"> <cite>MDN blockquote page</cite></a>: </p> <blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> <p>The <strong>HTML <code><blockquote></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><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended for short quotations that don't require paragraph breaks.</q> -- <a href="/en-US/docs/Web/HTML/Element/q"> <cite>MDN q page</cite></a>.</p> تُعرَض الاقتباسات المرجعية افتراضيًا بخط مائل. تطبيق: من صاحب القول؟ حان الوقت لتمرين آخر، انظر إلى النص الموجود في حقل مدخلات محرر الشيفرة في الأسفل وحاول: تحويل المقطع في المنتصف إلى اقتباس كتلي يتضمن السمة cite. تحويل الجملة "The Need To Eliminate Negative Self Talk" في المقطع الثالث إلى اقتباس سطري يتضمن السمة cite. تغليف عنوان كل مصدر داخل العنصر <cite> وتحويل العنوان إلى رابط، واستخدم المرجعين التاليين للربط: للاقتباس عن كونفوشيوس: http://www.brainyquote.com/quotes/authors/c/confucius.html. للجملة في المقطع الثالث: http://example.com/affirmationsforpositivethinking. إذا ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر إعادة الضبط Reset، في حين إذا وجدت نفسك تائهًا كليًا، فانقر على زر أظهر الحل Show solution لترى الحل الصحيح. الاختصارات تُعَدّ الاختصارات 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^th of May 2001.</p> <p>Caffeine's chemical formula is C₈H₁₀N₄O₂.</p> <p>If x² 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

يغطِّي هذا المقال المبادئ الأكثر بساطة لتنطلق، إذ يعرِّف مفهوم العناصر 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>: يتكوَّن العنصر من: وسم البداية Opening tag: يتكون من اسم العنصر -أي p في حالتنا- محاطًا بقوسَي زاوية، كما يشير هذا الوسم إلى النقطة التي يبدأ عندها العنصر أو التي يبدأ تأثيره عندها (بداية الفقرة النصية في حالتنا). وسم النهاية Closing tag: يشابه وسم البداية لكنه يبدأ بشرطة أمامية / قبل اسم العنصر، ويشير هذا الوسم إلى نهاية العنصر -أي نهاية الفقرة في حالتنا-، ويُعَدّ إغفال وسم النهاية من أكثر الأخطاء التي يرتكبها المبتدئون وقد تفضي إلى نتائج غريبة بالفعل. المحتوى Content: يشير إلى المحتوى الفعلي للعنصر وهو في حالتنا نص فقط. العنصر 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.hsoub.com. title: تستخدَم لإدراج معلومات إضافية عن الرابط مثل وصف الصفحة التي سينقلنا إليها، أي مثل title="The Mozilla homepage"، كما تظهر هذه المعلومات على أساس تلميح فوق الرابط عندما تمرِّر مؤشر الفارة فوقه. target: تستخدَم لتحديد طريقة عرض الصفحة التي ينقلنا إليها الرابط مثل "target="_blank، إذ سيعرض لك المتصفح الآن الصفحة في نافذة جديدة، في حين سيعرض المتصفح هذه الصفحة في النافذة نفسها ما لم تستخدم هذه السمة. سنحاول تحويل السطر الموجود في منطقة تحرير الشيفرة إلى مربط كما يلي: أضف الوسم <a>. أضف الصفتين href و title. حدد طريقة عرض صفحة الرابط من خلال السمة target. سترى نتيجة عملك في منطقة عرض النتيجة، ومن المفترض أن ترى رابطًا يعرض قيمة السمة titleعندما تمرِّر المؤشر فوقه، وينقلك عند النقر عليه إلى الصفحة التي حددتها في السمة href، وتذكَّر أن تضع مسافة فارغة بين اسم العنصر والسمات، فإذا ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر "إعادة الضبط Reset"، في حين إذا وجدت نفسك تائهًا كليًا، فانقر على الزر "أظهر الحل Show solution" لترى الحل الصحيح. السمات المنطقية قد تلاحظ أحيانًا سمات دون قيم، وتُدعى هذه السمات بالسمات المنطقية 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 إذا أردت تجريب كتابة شيفرة HTML على جهازك، فيمكنك تنفيذ النقاط التالية: نسخ المثال السابق عن هيكلية صفحة HTML. إنشاء ملف نصي جديد باستخدام محرر النصوص لديك. لصق الشيفرة في الملف. حفظ الملف باسم index.html. ملاحظة: ستجد ايضًا قالب HTML الأساسي ضمن المستودع المخصص فريق مطوري موزيللا على جيت-هاب. افتح الملف باستخدام متصفحك لترى نتيجة تصيير الشيفرة، وعدّل الشيفرة كما تشاء وحدِّث ما يعرضه المتصفح لإظهار أيّة تغييرات، إذ ستبدو الصفحة بشكلها الأصلي كما يلي: يمكنك التعديل على الشيفرة في هذا التمرين على حاسوبك كما شرحنا سابقًا أو من خلال المحرر المدمج مع المقال والذي نعرضه بين الفينة والأخرى، كما يمكنك تعزيز مهاراتك بإنجاز المهام التالية: أضف عنوانًا رئيسيًا للصفحة تحت العنصر <body> مباشرةً، إذ يجب أن تضع العنوان بين وسم البداية <h1> ووسم النهاية <h1/>. عدِّل محتوى الفقرة النصية لتتضمن نصًا من اختيارك. أبرز الكلمات الهامة في نصك بتغليفها ضمن العنصر <strong>. أضف رابطًا ضمن الفقرة النصية بالطريقة التي شرحناها سابقًا. أضف صورةً إلى صفحتك تحت الفقرة النصية، إذ ستحصل على نقاط إضافية إذا تمكنت من إنشاء رابط إلى صورة أخرى على حاسوبك الشخصي أو على ويب. إذا ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر "إعادة الضبط Reset"، في حين إذا وجدت نفسك تائهًا كليًا، فانقر على الزر "أظهر الحل Show solution" لترى الحل الصحيح. المسافات الفارغة في HTML لاحظ استخدامنا للكثير من المسافات الفارغة في شيفرة الصفحة، وهذا أسلوب كتابة قد تعتمده، إذ سيعطي أسلوبَي كتابة الشيفرة التاليين النتيجة ذاتها: <p>Dogs are silly.</p> <p>Dogs are silly.</p> مهما أضفت من مسافات فارغة ضمن محتوى العنصر الذي قد يتضمن مسافات فارغة عدة وربما محرف الانتقال إلى سطر جديد، فسيختزِل محلل HTML كل سلسلة متلاحقة من المسافات الفارغة إلى مسافة فارغة واحدة، فلماذا إذًا نضيف فراغات أكثر؟ القضية تتعلق بسهولة القراءة. من السهل فهم ما فعلته أثناء كتابتك لشيفرة الصفحة إذا رتبتها جيدًا، فما نفعله عادةً أثناء كتابة الشيفرة هو إزاحة العناصر بمقدار مسافتين فارغتين عن العنصر الذي تقع داخله، ويعود الأمر إليك دائمًا في اختيار التنسيق الذي تراه مناسبًا لتنظيم الشيفرة، ومن الأفضل دائمًا تنسيقها. كيانات لغة HTML: إضافة محارف خاصة تُعَدّ المحارف < و > و " و ' و & في HTML محارف خاصة لكونها جزءًا من الصياغة القواعدية للغة، فكيف سنتمكن إذًا من إضافة هذه المحارف إلى محتوى العناصر؟ وكيف سنضع مثلًا إشارة "أكبر من" دون أن تؤثر على تفسير الشيفرة؟ يمكن ذلك من خلال مراجع إلى تلك المحارف، والمراجع هي رموز خاصة تمثِّل محرفًا محددًا يمكن استخدامه في هذه الحالة، كما يبدأ كل مرجع بالمحرف & وينتهي بالمحرف ;. table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } المحرف الخاص سلسلة الحروف المرجعية < ;lt& > ;gt& " ;quot& ' ;apos& & ;amp& يمكن تذكر المرجع إلى المحرف الخاص بسهولة لأن النص الذي يشير إلى إشارة أصغر مثلًا ;lt& يمكن أن يُفهم من المصطلح الذي أخذ منه أي Less Than، والأمر مشابه لبقية المراجع. ستجد في المثال التالي فقرتين نصيتين: <p>In HTML, you define a paragraph using the <p> element.</p> <p>In HTML, you define a paragraph using the <p> 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. ما هو الرابط التشعبي؟ تُعَدّ الروابط التشعبية واحدةً من أكثر الابتكارات أهميةً في عالم الويب، فهي من أولى ميزات الويب منذ انطلاقها وهي بالفعل ما يجعل الويب شبكةً حقيقيةً، إذ تسمح لنا الروابط التشعبية بربط الصفحات بصفحات أخرى أو بأجزاء محددة منها أو بغيرها من الموارد أو الوصول إلى تطبيقات موجودة على عنوان ويب محدَّد، كما يمكن لأيّ محتوى التحول إلى رابط ينقل المستخدِم عند النقر عليه إلى عنوان ويب آخر 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 ومحرِّر الشيفرة على حاسوبك، ثم نفّذ التعديلات التالية: أضف فقرةً نصيةً <p> أو أكثر داخل العنصر <body>، أو غير ذلك من العناصر التي تعلمتها. حوّل أجزاءً من المحتوى إلى روابط. أضف عناوين إلى هذه الروابط باستخدام السمة 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. عليك: إضافة قائمة غير مرتبة في المكان المطلوب في الصفحة التي تضم أسماء بقية الصفحات التي سترتبط بها، فقائمة التنقل هي عادةً قائمة من الروابط، وبالتالي هذا الأسلوب صحيح دلاليًا. تحويل اسم كل صفحة إلى رابط إلى تلك الصفحة. نسخ قائمة التنقل إلى جميع الصفحات. إزالة الرابط من كل صفحة والذي يتعلق بها، فوجوده أمر غير ضروري ومربك، كما يعطي عدم ظهوره تذكيرًا بصريًا بالصفحة التي نتواجد فيها. سيبدو الحل عندما تنتهي منه قريبًا من الصفحة التالية: ملاحظة: إذا لم تستطع المتابعة أو لم تكن واثقًا من عملك، فيمكن التحقق من الحل في المستودع المخصص للتمرين على جيت-هاب. روابط البريد الإلكتروني من الممكن إنشاء روابط أو أزرار تَفتح عند النقر عليها نموذجًا أو تطبيقًا لكتابة رسالة بريد إلكتروني بدلًا من الانتقال إلى مورد معين. يُستخدم العنصر <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 أو جافاسكربت بفعالية أكبر. لهذه الأسباب وغيرها سنحتاج إلى هيكلة محتوى الصفحة. تطبيق: هيكلة محتوى لننتقل مباشرةً إلى التطبيق العملي، إذ سنضيف عناصر إلى النص غير المنسق الموجود في حقل المدخلات Input field والذي يُعرض في حقل المخرجات Output field، فإذا ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر "إعادة ضبط Reset"، في حين إذا وجدت نفسك تائهًا كليًا، فانقر على الزر"أظهر الحل Show solution" لترى الحل الصحيح. لماذا نحتاج إلى الدلالات؟ نعتمد على الدلالات في كل مكان حولنا، فنحن نعتمد على تجاربنا السابقة لتدلنا على وظيفة كل الأغراض التي حولنا، فعندما نرى هذا الغرض نعرف تمامًا عمله، فنحن نتوقع مثلًا أن تعني إشارة المرور الحمراء التوقف والخضراء الحركة، لكن سنرتبك بالفعل إذا تغيّرت الدلالات أو طبقناها بصورة خاطئة. لا بد في السياق عينه أن نتأكد من استخدام العناصر الصحيحة لكي نعطي المحتوى المعنى والوظيفة والمظهر الصحيح، فوفقًا لهذه المقاربة، فإن العنصر <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> تطبيق: إنشاء قائمة مرتبة حاول استخدام محرر الشيفرة في الأسفل لإنشاء قائمة مرتبة خاصة بك: تطبيق: هيكلة وصفة الطعام في مثالنا السابق أصبحت في هذه المرحلة قادرًا على هيكلة الصفحة التي تتحدث عن وصفة الحمُّص في مثالنا السابق، إذ يمكنك تخزين نسخة عن الملف text-start.html على جهازك ثم تجري التعديلات عليه، أو تنفيذ الأمر مستخدمًا محرر الشيفرة في الأسفل، وقد يكون تنفيذ التمرين على حاسوبك أفضل لأنك ستتمكن من حفظ عملك، في حين لن تتمكن من ذلك إذا استخدمت محرر الشيفرة في المقال لأن التغييرات التي أجريتها ستختفي عند إغلاق الصفحة. إذا وجدت نفسك تائهًا، فانقر على الزر "أظهر الحل Show solution" لترى الحل الصحيح، أو تحقق من الملف text-complete.html الذي يحتوي على العمل بأكمله. القوائم المتداخلة من الممكن جدًا أن تتداخل القوائم، فقد تحتاج إلى قائمة فرعية تحت أحد عناصر قائمة أخرى، ولنأخذ القائمة الثانية من مثال وصفة الطعام: <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" من المستودع المخصص على جيت-هاب بإحدى الطريقتين التاليتين: انسخ محتوى الملف ثم الصقه ضمن ملف نصي جديد باستخدام محرِّر النصوص المتوفر لديك، ثم احفظه في مكان مناسب. اضغط الزر "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 اختصارًا. تطبيق: استخدام وصف الصفحة في محركات البحث يُستخدَم وصف الصفحة أيضًا في نتائج محركات البحث، وسنوضِّح ذلك من خلال المثال التالي: انتقل إلى الصفحة الرئيسية لموقع حسوب. اعرض الشيفرة المصدرية للصفحة بالنقر عليها بالزر اليميني للفأرة ثم اختر "عرض الشيفرة المصدرية للصفحة View Page Source" من القائمة. ابحث عن البيانات الوصفية التي تحدِّد وصفًا للصفحة، وستبدو لك كما يلي: <meta name="description" content="في مهمة لتطوير العالم العربي. نعمل لنمكّن الشباب ونفتح مزيدًا من الفرص أمامهم. نحن حسوب."> ابحث الآن عن "حسوب" باستخدام محرك البحث جوجل وستلاحظ كيف استخدم عنوان المستند <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 بكسل تشاهدها في أماكن عدة مثل عناوين نوافذ المتصفح وإلى جانب العلامات المرجعية للصفحات، كما يمكنك إضافة الأيقونة المفضلة على صفحتك كما يلي: احفظ الأيقونة المطلوبة باللاحقة ico. في المجلد نفسه الذي يحتوي على الصفحة index.html، وقد تدعم بعض المتصفحات لواحق أخرى مثل gif. أو png.، لكن يضمن لك استخدام اللاحقة السابقة العمل على أيّ متصفح رجوعًا إلى إنترنت أكسبلورر 6. أضف السطر التالي إلى ترويسة ملف 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 ولغة جافاسكربت في صفحتنا لبدء العمل على هذا التطبيق، أحضر نسخًا عن الملفات meta-example.html و script.js و style.css وخزِّنها على حاسوبك في المجلد نفسه، ثم تأكد من حفظها تمامًا بالأسماء واللواحق -أي الامتدادات- السابقة. افتح ملف HTML في المتصفح وفي محرِّر النصوص معًا. أضف العنصر <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