HTML5 مستقبل الويب
بواسطة Developer | بتاريخ ديسمبر 14th, 2010
اكثر فى طيات هذه اللغه الترميزية الجميلة , سنبدأ بشرح نوع الوثيقة DOCTYPE , والجملة Syntax , وترميز الاحرف Character Encoding وشكل الصفحة والاختلاف بين HTML 5 وما قبلها .
نوع الوثيقة :
حاليا ودوما كنا نكتب نوع الوثيقة كالاتى :
HTML 4 Strict doctype:
view source
print?
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
وفى XHTML 1.0 :
view source
print?
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
view source
print?
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ولعدم سهولة حفظ كل هذه الكلمات كان لابد للاعتماد بشكل اساسي من قبل الكثير ان يستخدم البيئات التطويرية , حيث انها تنشأ نوع الوثيقة تلقائيا عند انشاء مستند او صفحة جديدة , لكن فى الـ HTML5 , يمكننا تذكرها بكل سهولة :
view source
print?
1 <!DOCTYPE html>
اليس كذلك ؟
ترميز الصفحة character encoding :
تحديد الترميز فى صفحة الـ HTML الخاصة بك شئ اساسي وتكتبه على النحو الاتى :
view source
print?
1 <META http-equiv="Content-Type" content="text/html; charset=utf-8">
وفى XHTML :
view source
print?
1 <?xml version="1.0" encoding="utf-8"?><meta http-equiv="Content-type" content="text/html; charset=utf-8" />
وهذا يربطنا اكثر بالبيئات التطويرية المتكاملة “IDE” مثل الدريم ويفر , ولكن انظر ماذا فعلت HTML 5 :
view source
print?
1 <meta charset=”utf-8”>
اذا HTML 5 توفر علينا الكثير وعلى المتصفحات بقلة كلمات Syntax مع وجود قوة وامكانيات اكثر فى النواة ولتتسع وتتطور مع الويب وتلبي احتياجاته
شكل الصفحة :
فى HTML 4 تكون الآتى :
اما الجديد للـ HTML 5 :
انا ارى انها اكثر نظاما وترتيبا للجميع بما سواء انت او انا او محركات البحث وايضا فى حجم الكود , ساقوم بشرح بعض الوسوم وفائدتها , تابع معى
العلامات Markup :
<header>
الجميع يعرفها بلاشك ؛ فهى مقدمة الصفحة …
view source
print?
1 <html>
2 <head></head>
3 <body>
4 <header>
5 <span style="color:red;font-style:italic;">Teeeest</span>
6 <hr>
7 <hgroup>
8 <h1>Drsni Network</h1>
9 <h2>To every one</h2>
10 </hgroup>
11 </header>
12 <article>
13 <p>Drsni.com New site , will be the first soon to every web developer .</p>
14 <p>and all users will support </p>
15 </article>
16 <footer>
17 <hr>
18 © 2009 drsni.com
19 </footer>
20 </body>
21 </html>
<footer>
زيل الصفحة او نهاية احد اقسام الصفحة ” Section ” , حيث يوضع فيها فى الغالب حقوق الموقع او اسم الكاتب …
view source
print?
1 <footer>
2 <hr>
3 © 2009 drsni.com
4 </footer>
<section>
تستخدم هذه لانشاء اقسام فى الصفحة , مثلا ويمكن وضع <header> و <footer> لها …
view source
print?
1 <article>
2 <header>
3 <h1>Hello</h1>
4 </header>
5 <section>
6 <h4>Web</h4>
7 <p>wwww E-mail Blogs ....</p>
8 </section>
9 <section>
10 <h4>PC</h4>
11 <p>HardDisk CD Mouse Keyboard </p>
12 </section>
13 <section>
14 <h4>Contact Us</h4>
15 <p>+9999999999999</p>
16 </section>
17 </article>
<nav>
تستخدم هذه للروابط التشعبية فى الموقع مثل : اتصل بنا | الرئيسية | المدونة …
view source
print?
1 <nav>
2 <a href="" target="_blank">Home</a> |
3 <a href="" target="_blank">Web</a> |
4 <a href="" target="_blank">WordPress</a> |
5 <a href="" target="_blank">Design</a>
6 </nav>
<article>
تستخدم هذه العلامه للإدلال على نص مقال او نص اخبار او مقال مدونة او منتدى وغيره …
view source
print?
1 <article>
2 <h4>Saudi Arabia</h4></div>
3 <div><p>The Kingdom of Saudi Arabia commonly known as Saudi Arabia is the largest Arab country of the Middle East.
4 </p>
5 </article>
<aside>
يستخدم هذا الوسم ليحتوى روابط لها علاقه بالمقال او بالصفحه , مثلا المرجع او اجزاء اخرى للصفحة وهكذا …
<command>
وهذا خاص بالازرار بانواعها ؛ Button , RadioButton , Checkbox.
<details>
لشرح المزيد من التفاصيل حول جزء معين من الصفحة .
<summary>
هذه العلامه تنتمى لـ <details> , وتستخدم للنصوص المختصرة .
<mark>
تستخدم لايضاح نص معين , وفى الغالب يضوع لهذا النص خلفية صفراء ليكون بارز .
view source
print?
1 <p>
2 The Kingdom of Saudi Arabia commonly known as <mark> Saudi Arabia </mark> is the largest Arab country of the Middle East
3 </p>
<meter>
وتستخدم هذه للقياسات .
<figure>
تستعمل لجمع الوصور او الفيديو مع شرح بسيط عنها فى محتوى مستقل .
<figcaption>
تستخدم لوضع عنوان فرعي لـ <figure> .
<hgroup>
view source
print?
1 <!DOCTYPE html>
اليس كذلك ؟
ترميز الصفحة character encoding :
تحديد الترميز فى صفحة الـ HTML الخاصة بك شئ اساسي وتكتبه على النحو الاتى :
view source
print?
1 <META http-equiv="Content-Type" content="text/html; charset=utf-8">
وفى XHTML :
view source
print?
1 <?xml version="1.0" encoding="utf-8"?><meta http-equiv="Content-type" content="text/html; charset=utf-8" />
وهذا يربطنا اكثر بالبيئات التطويرية المتكاملة “IDE” مثل الدريم ويفر , ولكن انظر ماذا فعلت HTML 5 :
view source
print?
1 <meta charset=”utf-8”>
اذا HTML 5 توفر علينا الكثير وعلى المتصفحات بقلة كلمات Syntax مع وجود قوة وامكانيات اكثر فى النواة ولتتسع وتتطور مع الويب وتلبي احتياجاته
شكل الصفحة :
فى HTML 4 تكون الآتى :
اما الجديد للـ HTML 5 :
انا ارى انها اكثر نظاما وترتيبا للجميع بما سواء انت او انا او محركات البحث وايضا فى حجم الكود , ساقوم بشرح بعض الوسوم وفائدتها , تابع معى
العلامات Markup :
<header>
الجميع يعرفها بلاشك ؛ فهى مقدمة الصفحة …
view source
print?
1 <html>
2 <head></head>
3 <body>
4 <header>
5 <span style="color:red;font-style:italic;">Teeeest</span>
6 <hr>
7 <hgroup>
8 <h1>Drsni Network</h1>
9 <h2>To every one</h2>
10 </hgroup>
11 </header>
12 <article>
13 <p>Drsni.com New site , will be the first soon to every web developer .</p>
14 <p>and all users will support </p>
15 </article>
16 <footer>
17 <hr>
18 © 2009 drsni.com
19 </footer>
20 </body>
21 </html>
<footer>
زيل الصفحة او نهاية احد اقسام الصفحة ” Section ” , حيث يوضع فيها فى الغالب حقوق الموقع او اسم الكاتب …
view source
print?
1 <footer>
2 <hr>
3 © 2009 drsni.com
4 </footer>
<section>
تستخدم هذه لانشاء اقسام فى الصفحة , مثلا ويمكن وضع <header> و <footer> لها …
view source
print?
1 <article>
2 <header>
3 <h1>Hello</h1>
4 </header>
5 <section>
6 <h4>Web</h4>
7 <p>wwww E-mail Blogs ....</p>
8 </section>
9 <section>
10 <h4>PC</h4>
11 <p>HardDisk CD Mouse Keyboard </p>
12 </section>
13 <section>
14 <h4>Contact Us</h4>
15 <p>+9999999999999</p>
16 </section>
17 </article>
<nav>
تستخدم هذه للروابط التشعبية فى الموقع مثل : اتصل بنا | الرئيسية | المدونة …
view source
print?
1 <nav>
2 <a href="" target="_blank">Home</a> |
3 <a href="" target="_blank">Web</a> |
4 <a href="" target="_blank">WordPress</a> |
5 <a href="" target="_blank">Design</a>
6 </nav>
<article>
تستخدم هذه العلامه للإدلال على نص مقال او نص اخبار او مقال مدونة او منتدى وغيره …
view source
print?
1 <article>
2 <h4>Saudi Arabia</h4></div>
3 <div><p>The Kingdom of Saudi Arabia commonly known as Saudi Arabia is the largest Arab country of the Middle East.
4 </p>
5 </article>
<aside>
يستخدم هذا الوسم ليحتوى روابط لها علاقه بالمقال او بالصفحه , مثلا المرجع او اجزاء اخرى للصفحة وهكذا …
<command>
وهذا خاص بالازرار بانواعها ؛ Button , RadioButton , Checkbox.
<details>
لشرح المزيد من التفاصيل حول جزء معين من الصفحة .
<summary>
هذه العلامه تنتمى لـ <details> , وتستخدم للنصوص المختصرة .
<mark>
تستخدم لايضاح نص معين , وفى الغالب يضوع لهذا النص خلفية صفراء ليكون بارز .
view source
print?
1 <p>
2 The Kingdom of Saudi Arabia commonly known as <mark> Saudi Arabia </mark> is the largest Arab country of the Middle East
3 </p>
<meter>
وتستخدم هذه للقياسات .
<figure>
تستعمل لجمع الوصور او الفيديو مع شرح بسيط عنها فى محتوى مستقل .
<figcaption>
تستخدم لوضع عنوان فرعي لـ <figure> .
<hgroup>
تُستخدم هذه العلامة لتجميع الترويسات h1 – h6 مع بعضها , فى حال تكرارها مثلا .
<progress>
تُستخدم هذه العلامة لعرض نسبة تقدم عمل معين يتم تنفيذه.
<time>
تستخدم للدلالة على ان هذا النص وقت او تاريخ.
view source
print?
1 <time>20/10/2020</time>
الجديد فى علامات الميديا والوسائط :
<audio>
للدلالة على ملف صوتي او موسيقي.
view source
print?
1 <audio src="/music.wav">
2 <p>If you are reading this, it is because your browser does not support the audio element.</p>
3 </audio>
<video>
تستخدم للإشارة الى ملف فيديو كمقطع او فيلم او اى ملف ميديا مرئي, وهذه الخاصية اكثر ما يجعل اجهزة الآيفون وغيرها مهتمه اكثر بتطوير HTML5 للتعويض عن الفلاش .
view source
print?
1 <video src="/video.avi" width="300" height="150" controls>
2 <p>If you are reading this, it is because your browser does not support the HTML5 video element.</p>
3 </video>
<source>
تستخدم للإشارة الى متحوى ميديا او وسائط متعدد مثلا فيديو وصوت معا .
<embed>
تستخدم للاشارة الى محتوى مضمن من مكان اخر او مثل الفلاش .
<canvas>
تستخدم للرسم بواسطة الجافا سكريبت JavaScript , هناك ادوات كثيرة لتساعدك فى الرسم بهذه التقنية , وقد تواجد ايضا منها على الويب , يمكنك استعمالها مباشرة مثل :
اضغط هنا
وسنوضحها اكثر فيما بعد .
انواع جديده لعناصر الادخال :
توضع فى type مثل :
<progress>
تُستخدم هذه العلامة لعرض نسبة تقدم عمل معين يتم تنفيذه.
<time>
تستخدم للدلالة على ان هذا النص وقت او تاريخ.
view source
print?
1 <time>20/10/2020</time>
الجديد فى علامات الميديا والوسائط :
<audio>
للدلالة على ملف صوتي او موسيقي.
view source
print?
1 <audio src="/music.wav">
2 <p>If you are reading this, it is because your browser does not support the audio element.</p>
3 </audio>
<video>
تستخدم للإشارة الى ملف فيديو كمقطع او فيلم او اى ملف ميديا مرئي, وهذه الخاصية اكثر ما يجعل اجهزة الآيفون وغيرها مهتمه اكثر بتطوير HTML5 للتعويض عن الفلاش .
view source
print?
1 <video src="/video.avi" width="300" height="150" controls>
2 <p>If you are reading this, it is because your browser does not support the HTML5 video element.</p>
3 </video>
<source>
تستخدم للإشارة الى متحوى ميديا او وسائط متعدد مثلا فيديو وصوت معا .
<embed>
تستخدم للاشارة الى محتوى مضمن من مكان اخر او مثل الفلاش .
<canvas>
تستخدم للرسم بواسطة الجافا سكريبت JavaScript , هناك ادوات كثيرة لتساعدك فى الرسم بهذه التقنية , وقد تواجد ايضا منها على الويب , يمكنك استعمالها مباشرة مثل :
اضغط هنا
وسنوضحها اكثر فيما بعد .
انواع جديده لعناصر الادخال :
توضع فى type مثل :
tel
عندما يكون المدخل رقم هاتف .
search
عندما يكون الحقل مخصص للبحث .
url
يعنى ان القيمة المدخلة ستكون عنوان موقع على الانترنت .
email
تعنى ان القيمة المدخلة هى عنوان بريد الكترونى .
datetime
القيمة هى تاريخ او وقت او كلاهما معاً .
number
عندما تكون القيمة المدخلة رقم .
range
عندما يكون رقم بين عدة قيمة عليا وصغرة ” كالتقييم مثلا ” مثل 3 “1-10″ .
color
المدخل هنا سيكون رقم سداسي يعبر عن لون معين مثل #FFFFFF .
تطبيقات HTML 5 توضح بعض ما يمكنك فعله عن طريقها :http://mrdoob.com/projects/chromeexperiments/ball_pool/
http://mrdoob.com/92/Google_Gravity_HTML5
http://www.benjoffe.com/code/
http://www.kesiev.com/akihabara/
http://craftymind.com/factory/html5video/CanvasVideo.html
http://jfd.github.com/wpilot/
http://html5demos.com/canvas-grad
http://alteredqualia.com/canvasmol/
http://extrafuture.com/code/mm2
اختبار للزوار :
حول هذا الكود الى HTML 5 لتتأكد من انك فهمت جيدا :
view source
print?
1 <html>
2 <body>
3 <div id="header">
4 <h1><a href="/">Blog</a></h1>
5 </div>
6 <div id="navigation">
7 <ul>
8 <li>Web</li>
9 <li>Wordpress</li>
10 ...
11 </ul>
12 </div>
13 <div id="content">
14 <h1>Welcome</h1>
15 <div><img src="some.jpg" alt="photo" /></div>
16 <p>Test Test Test Test Test Test </p>
17 </div>
18 <div id="footer">
19 <p>Copy Right 2010</p>
20 </div>
21 </body>
22 </html>
عندما يكون المدخل رقم هاتف .
search
عندما يكون الحقل مخصص للبحث .
url
يعنى ان القيمة المدخلة ستكون عنوان موقع على الانترنت .
تعنى ان القيمة المدخلة هى عنوان بريد الكترونى .
datetime
القيمة هى تاريخ او وقت او كلاهما معاً .
number
عندما تكون القيمة المدخلة رقم .
range
عندما يكون رقم بين عدة قيمة عليا وصغرة ” كالتقييم مثلا ” مثل 3 “1-10″ .
color
المدخل هنا سيكون رقم سداسي يعبر عن لون معين مثل #FFFFFF .
تطبيقات HTML 5 توضح بعض ما يمكنك فعله عن طريقها :http://mrdoob.com/projects/chromeexperiments/ball_pool/
http://mrdoob.com/92/Google_Gravity_HTML5
http://www.benjoffe.com/code/
http://www.kesiev.com/akihabara/
http://craftymind.com/factory/html5video/CanvasVideo.html
http://jfd.github.com/wpilot/
http://html5demos.com/canvas-grad
http://alteredqualia.com/canvasmol/
http://extrafuture.com/code/mm2
اختبار للزوار :
حول هذا الكود الى HTML 5 لتتأكد من انك فهمت جيدا :
view source
print?
1 <html>
2 <body>
3 <div id="header">
4 <h1><a href="/">Blog</a></h1>
5 </div>
6 <div id="navigation">
7 <ul>
8 <li>Web</li>
9 <li>Wordpress</li>
10 ...
11 </ul>
12 </div>
13 <div id="content">
14 <h1>Welcome</h1>
15 <div><img src="some.jpg" alt="photo" /></div>
16 <p>Test Test Test Test Test Test </p>
17 </div>
18 <div id="footer">
19 <p>Copy Right 2010</p>
20 </div>
21 </body>
22 </html>
