لا يمكننا ان ننكر أن هؤلاء الشباب قد أنجزوا عملاً رائعاً مع HTML5. لأول مرة سنشعر أننا نحتاج بالفعل لمن يتخصص فقط في HTML وحدها.
في هذا المقال, نستعرض عدداً من مميزات و خصائص HTML5 مساعدة اليك في بداية طريقك نحو هذه اللغة الرائعة
قديماً كان هذه هي بدايتك في صفحات الويب
|
1 2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
و الآن أصبحت باختصار, هكذا
|
1 |
<!DOCTYPE html> |
هل تجيد عمل القوائم ul أو ol ؟! ,, لما لا نجعلها قابلة للتعديل كوسيلة لتمكين المستخدم من اضافة خياراته الخاصة. فقط أضف الخاصية
contenteditable="true"
|
1 2 3 4 5 |
<ul contenteditable="true"> <li> ِAhmad </li> <li> Ali <li> Dina </li> </ul> |
لا تحتاج الى ” أو حتى ‘ .. نعم, يمكنك أن تبدأ بدونهم الآن
|
1 |
<div class=randomClass id=randomID> any words </div> |
هذه الخاصية تعتمد على المتصفحات الحديثة الداعمة بالكامل للـ HTML5 ,, و هي خاصية الـ input validation
قديماً, كنت تطلب من المستخدم البريد الالكتروني و رقم الهاتف و ما الى ذلك باستخدام
|
1 |
<input type='text' value='' /> |
فقط النوع text هو ما تستخدمه, ثم تستخدم أكواد javascript لتتمكن من عمل تقييم validation للقيمة المدخلة, الآن, فقط عليك ان تحدد نوع المدخل بدل من text ليقوم هو بباقي الأمر, جربها مثلاً مع اصدارات Google Chrome الحديثة
|
1 2 3 4 5 |
<form action=""> <label for="email">Your Email:</label> <input id="email" name="email" type="email" /> <button type="submit">OK</button> </form> |
يمكنك أيضاً أن تجبر المستخدم على ملء حقل, باستخدام الخاصية required
|
1 |
<input type="text" required="required"> |
حسناً, تريد بالماضي ان تضع قيمة افتراضية للمدخل input, و لكن اذا أراد المستخدم أن يعدل القيمة, عليه أن يحذف القيمة الافتراضية بالبداية قبل أن يدخل قيمته, مع Placeholder تريحك من هذا الأمر
|
1 |
<input type='text' placeholder='your default value' /> |
نحن نسع دائماً الى semantic web , او ما يدعى بالويب ذو الدلالة, من المهم ان تفهم محركات البحث معنى كل div و ماذا يقدم. هذا مثلاً header و هذا footer و هذه مقالة article و هذا nav ,, و هكذا.
في HTML5 يمكنك أن تبدأ باستخدام divs بأسامي ذات معنى لتطوير أفضل, مثال بدلاً ان تستخدم قديماً
|
1 2 3 4 5 |
<div id='header'> <div id='article'> any words !! </div> </div> |
ستستخدم
|
1 2 3 4 5 |
<header> <article> any words !! </article> </header> |
يمكنك الاطلاع على قائمة مبسطة للعديد من الوسوم ذات الدلالة هنا
هل يكفي ؟!
HTML5 مليئة بالمفاجآت, هذه نبذة ضئيلة عنها, و كما أنها بالاضافة الى شقيقتها CSS3 قادرتان على صنع العجائب, حاول مثلاً ان تستعرض هذه المشاريع البسيطة
مقال رائع جدا 🙂