شارك هذا المقال:
هناك بعض الوسوم المضمنة في لغة HTML باصدارها الخامس لا يعلم الكثيرون بوجودها , لنتعرف عليها في هذا المقال !
لغة HTML هي لغة توصيفية (ليست لغة برمجة) تستخدم لتصميم مواقع الويب في المقام الأول , ولها استخدمات أخرى في تصميم تطبيقات الجوال و سطح المكتب الهجينة , ولتتعرف أكثر على التطبيقات الهجينة ننصحك بقراءة هذا المقال : التطبيقات الأصلية Native والتطبيقات الهجينة Hybrid , أيهما أفضل ؟
ترمز الحروف الى جملة Hyper Text Markup Language وتعني لغة ترميز النص الفائق , وتفتقر لغة HTML الى العديد من المزايا كالحلقات التكرارية و الدوال و المتغيرات , لذلك لا تعتبر لغة برمجة.
و يعد اتحاد شبكة الويب العاملة W3C هو المسؤول المباشر عن اللغة وتطويرها , وقام هذا الاتحاد في عام 2014 بتعميم الاصدار الخامس من HTML والذي يستخدمه النسبة الأكبر من مصممي الويب في وقتنا الحالي.
بعد أن تعرفنا على لغة HTML , سندخل الآن في موضوعنا الأساسي , سنعرفك على أقل وسوم HTML شهرة و فائدتها و كيفية استخدمها .
من الوسوم التي لا تستخدمها عادة مع أنها تسهل عليك العمل كثيراً , فبدلاً من انشاء فكرة ال Accordion باستخدام جافاسكريبت , يمكنك عملها بوسم HTML واحد !
يحدد الوسم
<details open><p>You can visit naqrah to show our awesome blog</p></details>
لا يستغرب أن هذا الوسم قليل الاستخدام , فهو ليس ذا فائدة كبيرة في الحقيقة , فكل ما يفعله هو انشاء مربع حوار , مثال :
<dialog open><p>Welcome do our website.</p></dialog>
قد يبدو من الوسوم المميزة , فيقوم هذا الوسم باضافة خلفية للنص لتعزيز ظهوره أمام المستخدمين , مثال :
<p>Credit card required at time of <mark>booking.</mark></p>
اذاً , تخيل مع بعض ال css الامكانيات الواردة لهذا الوسم ! الا يمكننا انشاء زر باستخدام css واستخدامه على وسم و من ثم تضمين جميع الروابط ضمن وسم لانشاء تصاميم مذهلة بوقت قصير ؟
<details><summary>Payment conditions</summary><p>Credit card required at time of booking.</p></details>
تستخدم للتعامل مع الوقت و التاريخ بشكل عام , وتقوم بعمل بعض التنسيقات للوقت و التاريخ في المتصفح , مثال :
<p>Breakfast buffet starts at<time>7.00 AM</time>at the restaurant.</p>
<p>Concert at the lobby in<time datetime="2018-06-20T19:00">June 20th 7.00 PM</time></p>
يجب استخدام هذا الوسم لتقليل أهمية النص أو المعلومات. تفسر المتصفحات هذا من خلال جعلها ذات حجم خط أصغر حجماً، وبالتالي يكون لها تأثير أقل وضوحاً. يقلل هذا الوسم حجم النصوص بنسبة 40% من حجم العنصر الأب له. (معلومة غير مؤكدة)
مثال :
<p>Cancelations must be canceled up to 48h, <small>to avoid penalty of one night per room.</small></p>
يعرض مؤشرا يوضح تقدم إنجاز المهمة، عادة ما يتم عرضه على أنه شريط التقدم. تستخدم الخاصية Value لتحديد عرض شريط التقدم , ولنتخيل هنا الامكانيات الواردة باستخدام هذا الوسم عند دمج تصميم مميز مع جافاسكريبت لاظهار شريط تقدم رفع الملفات مثلاً !
<progress value="70" max="100">70 %</progress>
ربما هذه هي أقل الوسوم استخداماً , ولكن كما شاهدنا بعض هذه الوسوم له أهمية ويضفي لمسة مميزة الى موقعك , بعضها الآخر مجرد بايتات لا داع لها بأي شكل من الأشكال , شاركنا برأيك , هل استخدمت أحد هذه الوسوم من قبل ؟
