HTML5 - الدرس الأول
بسم الله الرحمن الرحيم
كل عام و أنتم بخير و كما وعدتكم نلتقى بأول دروس ال html5
مقدمة لابد منها :-
html هي اللغة الأساسية التى تخبر المتصفح عما يعرضه و فى البداية كان كل متصفح يفسر قواعد اللغة كما يحب و يضيف أليها عدد من التعليمات و المكتبات كما حدث مع إنترنت إكسبلورر
إلى أن تم إنشاء منظمةw3c فى أكتوبر عام 1994 لتقوم بتنظيم standards الخاصة بالويب
وتم إصدار عدد من إصدارات HTML حتى الإصدار ال4.1 عام 1999 وتم التركيز بعدها على XHTML وهى ببساطة دمج الHTML معXML
إلى أن فى هذا العام تم وضع درافت شبه كامل للغة الجديدة HTML5 وقرر فريق w3c أنهم سوف يتوقفون قريبا عن تطويرXHTML و التركيز على HTML5 لمرونتها الفائقة و بنيتها القوية
HTML5 ليست بعد مدعومة بالكامل من المتصفحات و ليست بعد من توصيات الw3c , لكن كل الدلائل تقول إنها مسئلة وقت فقط HTML5 ستدرج قريبا جدا فى جدول التوصيات و بإذن الله سنكون هذه المرة من أوائل من يستخدموا هذه التقنية
الكثير من المواقع بدأت تستخدم هذه التقنيةلا تصدقنى أدخل على
google.com , youtube.com/html5
HTML 5 هي مستقبل الويب الآن ,إذا كنت مقتنع بأهميتها فقم الآن و أنشأ فولدر جديد و أسميه HTML5
و أقرأ السطور القادمة بعناية فسننشأ معا أول تطبيق HTML5
1- التصريح عن التطبيق
تصريح ال doctype
يتم وضعه فى بداية تطبيق ال HTML دائما لتعريف المتصفح على أى نسخة سيتم العمل و بأى syntax
فى الماضى كنا نصرح كالآتى فى HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
و طبعا التصريح يختلف من ال
strict
لل
transtional
و كنا نصرح كالآتى فىXHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ويجب أيضا تعريف ال
xml
كالآتى
<html xmlns="http://www.w3.org/1999/xhtml">
ياااه
عملية متعبة حقا
فى إتش 5 هذا هو التصريح
<!DOCTYPE HTML>
ببساطة
هل تريد أن تعرف لماذا تصريح HTML 5 صغير و بسيط ؟
SGML قم بالبحث عن
منتظر نتائج بحثكم
ذا عرفنا ماذا سنكتب فى أول الملف ركزمعى جيدا
أنظر للشكل التالى
هذا تصميم بسيط
إذا كان المطلوب منك أن تقوم بتنفيذ هذا التصميم فى HTML 4 أوXHTML ستقوم بتحويله للآتى
بالضبط قمت بإستخدام وسمdiv ك Container
لكن لا أنت الآنHTML 5
سنقوم بتحويل ما سبق قليلا ليصبح كالآتى
هل تلاحظ شيئا
نعم : HTML 5 جاءت و بها الجديد و الجديد
هناك أكثر من Container يعملون بنفس فكرة ال div لكن كل منها تختص فى شئ
لو نظرت للتصميم أكثر ستجد أننا إستخدمنا 4 أوسمة جدد
header
يستخدم لتحديد عنوان او بداية صفحة او قسم داخل الصفحة
nav
يستخدم من أجل الروابط و القوائم داخل الصفحة
section
الصفحة فى HTML 5 تقسم إلى أقسام سيك
footer
يستخدم لتحديد نهاية الصفحة أو القسم
مللت من الشرح , هيا بنا إلى الكود
كود:<body> <header> <h1>this is a simple header</h1> </header> <nav id="top_menu"><a href=http://anonymouse.org/cgi-bin/anon-www.cgi/http://www.swalif.net/cgi-bin/anon-www.cgi/http://www.swalif.net/softs/"#">Simple Link1</a> <a href=http://anonymouse.org/cgi-bin/anon-www.cgi/http://www.swalif.net/cgi-bin/anon-www.cgi/http://www.swalif.net/softs/"#">Simple Link2</a> </nav> <section> this is simple content </section> <nav id="side_bar"><a href=http://anonymouse.org/cgi-bin/anon-www.cgi/http://www.swalif.net/cgi-bin/anon-www.cgi/http://www.swalif.net/softs/"#">Simple Link3</a> <a href=http://anonymouse.org/cgi-bin/anon-www.cgi/http://www.swalif.net/cgi-bin/anon-www.cgi/http://www.swalif.net/softs/"#">Simple Link4</a></nav> <footer> this is simple footer </footer> </body>
هذه هى البنية الأساسية لتصميمنا
ببساطة فى أول الصفحة ثم بعد ذلك قائمة عليا
وفى القسم الأوسط
القسم الرئيسي للمقالات و فى الجانب قائمة جانبية
و فى النهاية الفووتر
و يمكننا التعامل مع هذه الأوسمة ببساطة من خلال ال سى أس كما نتعامل مع أى وسم آخر
كالآتى على سبيل المثال
قمت بإضافة العرض و الطول لبعض العناصر حتى يتوافق التصميمكود:<style type="text/css"> body{ text-align:center; } header{ margin:10px 0; width:90%; border:1px solid #000000; display:block; } nav#top_menu{ display:block; width:90%; border:1px solid #000000; } section{ width:60%; float:left; min-height:500px; border:1px solid #000000; } nav#side_bar{ width:30%; float:left; min-height:500px; border:1px solid #000000; } footer{ clear:both; width:90%; display:block; border:1px solid #000000; } </style>
و الكود الكامل سيكون كالآتى
أنتظر تجاربكم عليه و أنتظر أسئلتكمكود:<!DOCTYPE HTML> <html> <head> <title>We Love HTML5</title> <style type="text/css"> body{ text-align:center; } header{ margin:10px 0; width:90%; border:1px solid #000000; display:block; } nav#top_menu{ display:block; width:90%; border:1px solid #000000; } section{ width:60%; float:left; min-height:500px; border:1px solid #000000; } nav#side_bar{ width:30%; float:left; min-height:500px; border:1px solid #000000; } footer{ clear:both; width:90%; display:block; border:1px solid #000000; } </style> </head> <body> <header> <h1>this is a simple header</h1> </header> <nav id="top_menu"><a href=http://anonymouse.org/cgi-bin/anon-www.cgi/http://www.swalif.net/cgi-bin/anon-www.cgi/http://www.swalif.net/softs/"#">Simple Link1</a> <a href=http://anonymouse.org/cgi-bin/anon-www.cgi/http://www.swalif.net/cgi-bin/anon-www.cgi/http://www.swalif.net/softs/"#">Simple Link2</a> </nav> <section> this is simple content </section> <nav id="side_bar"><a href=http://anonymouse.org/cgi-bin/anon-www.cgi/http://www.swalif.net/cgi-bin/anon-www.cgi/http://www.swalif.net/softs/"#">Simple Link3</a> <a href=http://anonymouse.org/cgi-bin/anon-www.cgi/http://www.swalif.net/cgi-bin/anon-www.cgi/http://www.swalif.net/softs/"#">Simple Link4</a></nav> <footer> this is simple footer </footer> </body> </html>
و إلى اللقاء فى الدرس القادم غدا بإذن الله
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة Al7aRbi 
