باللغة العربية HTML5 دورة

anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
دورة Html5
تقديم: أنيس حكمت أنيس أبوحميد
ايميل: Anees_hikmat@yahoo.com
ملاحظة: هذا العمل مجان خالص لوجه الله تعالى, لا جٌوز ب عٌه او احتكاره....

مقدمة
الحمد لله الذي بحمده تتم النعم, الحمد لله رب العالم نٌ, بفضل من الله تعالى
سنبدأ بدورة html5 , ح ثٌ س تٌم التطرق لما هو جد دٌ عن ال html ,
راج اًٌ من الله تعالى أن وٌفقنا لخ رٌ العمل و جٌز نٌا وا اٌكم خ رٌ الجزاء, وأن
نٌفع بنا وبكم امتنا الاسلام ةٌ, وأن جٌعلنا عزا للاسلام والمسلم نٌ.. اللهم
آم نٌ.
*( ملاحظة: اخوان هذا العمل مثله مثل أي عمل بشري, صٌ بٌ الانسان به,
وقد خٌطئ, فإن أصبنا فبفضل من الله تعالى, وإن أخطئنا فمن أنفسنا ..
نسأل الله تعالى التوف قٌ ل ولكم ولشباب المسلم نٌ ..
ملاجظة: حاول أن لا تتعجل وأنت تستعرض الشرائح ... قم بكتابة كل مثال ...جرب ..ثم انطلق..ا ضٌا هناك
دروس تعتمد على سابقاتها ..لذلك ..تسلسل باسلوب منهج ...

الفهرس 1 ) هذا الفهرس يستعرض فقط العناويين الرئيسية, وكل عنوان رئيسي
قد يحتوي من 0 الى 13 عنوان فرعي أكثر أو أقل(

الفهرس ) هذا الفهرس يستعرض فقط العناويين الرئيسية, وكل عنوان رئيسي قد
يحتوي من 0 الى 13 عنوان فرعي أكثر أو أقل( 2

1 ) لا يه ام html5 ؟
Html5 عبارة عن مع اٌر جد دٌ لل html ....
والسبب ف ظهورها هو التطور الكب رٌ الذي حصل على شبكة الانترنت,
ومع انها حتى هذه اللحظة -لحظة كتابة هذا الشرح البس طٌ- تٌم العمل
لتطو رٌها الى أن الكث رٌ من الخصائص تم اضافتها للمتصفحات الرئ سٌ ةٌ,
ولكن لا وٌجد متصفح قد دعم جم عٌ هذه الخصائص بشكل كامل حتى الآن,
لذلك عند ذكرنا خاص ةٌ مع نٌة لل html5 , سنقوم باذن الله تعالى بذكر ما
ه المتصفحات الت تدعمها من المتصفحات الرئ سٌ ةٌ...

2 ) نع اهملعن نا بيج صئاصخ html5
 ال html5 تعتمد على html, JavaScript,css .
 ال html5 قامت بتقل لٌ الحاجة الى الاضافات الخارج ةٌ ) (plug-in مثل
الفلاش...
 ال html5 أفضل ف معالجة للاخطاء.
 ال html5 تقلل من بعض الكود عن طر قٌ اضافة tag جد دٌة, تقوم بنفس
العمل.

الإنسان المبدع هو الذي يصنع المجسمات الجميلة
من أكوام القمامة ..

HTML5 NEW TAGS
لنبدأ بإذن الله ..
اختصارات:
Internet Explorer 9+: I9+
F : Firefox
Opera:O
Chrome:C
Safari:S

canvas

<canvas>
<canvas> هو tag تم تصم مٌه خص صٌا ليحتوي على الرسومات
الؽراف كٌ ةٌ ثنائ ةٌ البعد 2D , ومكننا الرسم داخله عن طر قٌ استخدام
السكربت, وف الؽالب كٌون جافا سكربت.
 من الأمور الت سٌتط عٌ احتوئها ال canvas ه الخطوط, المربعات,
دوائر, الأحرؾ...
 المتصفحات الت تدعم هذه الخاص ةٌ .) I9+,O,F,C,S )
طر قٌة كتابة ال canvas ..

والآن طريقة الرسم داخل ال canvas
أولا: Rect

ثانيا: رسم Path

ثالثا: رسم curve path

رابعا: Line Join Path

خامسا: رسم صورة (image)
بهذه الص ؽٌة أستط عٌ تحد دٌ حجم
الصورة أ ضٌا ...

سادسا: رسم نص ) (Fill Text

سابعا:رسم نص ) Stroke Text

اللهم إنا نسألك زيادة في الدين وبركة في العمر وصحة في الجسد
وسععععععععععععععععععععععععععة فعععععععععععععععععععععععععي العععععععععععععععععععععععععرز وتوبعععععععععععععععععععععععععة بعععععععععععععععععععععععععل المعععععععععععععععععععععععععوت
وشعععهادة نعععد المعععوت ومالعععرة بععععد المعععوت و لعععوا نعععد الحسعععا وأمانعععا معععن الععععذا
ونصععععععععععععععيبا مععععععععععععععن الجنععععععععععععععة وارز نععععععععععععععا الن ععععععععععععععر إلعععععععععععععع وجهععععععععععععععك الكععععععععععععععريم
اللهععععععم ارحعععععععم موتانعععععععا وموتعععععععا المسععععععلمين واشعععععععلي مر عععععععانا ومر عععععععا المسعععععععلمين
اللهععععم اللععععر للمسععععلمين والمسععععلمات والمععععامنين والمامنععععات ا حيععععا مععععنهم وا مععععوات
اللهععععععم ارز نععععععي بععععععل المععععععوت توبععععععة و نععععععد المععععععوت شععععععهادة وبعععععععد المععععععوت جنععععععة
اللهم ارز ني حسن الخاتمة

Drag and Drop

Drag and Drop
 لا ًف html5 أصبح بامكاننا عمل سحب عنصر مع نٌ ووضعه ف مكان آخر, وهذا
سٌمى drag and drop .
 المتصفحات الت تدعم هذه الخاص ةٌ .) I9+,O,F,C,S )
 شرح الدوال لهذه الخاص ةٌ :
أولا: نضع draggable="true“ لل بدنا نسحبو ..وهاي شؽلة مهمة
ثان اٌاا: dataTransfer.setData("Text",ev.target.id) وهااذا مااا ساا حٌدث عنااد باادأ
عمل ةٌ السحب, لك قٌوم باخذ نوع الب اٌنات والق مٌة الخاصة بها
ثالثا: preventDefault() وهذه الدالة ه الت تمنع المتصفح من التعامال الطب عٌا ماع
الب اٌنات.)لك تستط عٌ تأد ةٌ عمل ةٌ السحب بنفس الصفحة مثلا, ماش اٌروح فٌاتح صافحة
ثان ةٌ...الخ(
رابعااا: dataTransfer.getData("Text"); هااذه الدالااة هاا التاا تسااتقبل الب اٌنااات عنااد
اسقاطها ..
خامساا: appendChild وتساتخدم هاذه الدالاة لاضاافة الب اٌناات الاى العنصار الاذي قمناا
باخت اٌره .

<video></video>
 لا مسا tag لا حٌتاج لتوض حٌ ^_^, هذا عبارة عن tag سٌمح بتضم نٌ
مكان لعرض الف دٌ وٌ داخل الصفحة.
 هذا ال tag دٌعم 3 ص ػٌ للف دٌ وٌ) MP4,Ogg,WebM .)
 المتصفحات الت تدعم هذا ال Tag وما ه الص ػٌ المدعومة لها
لاحظ أنه عند استخدامك لص ؽٌة Ogg(audio) & MP4 للف دٌ وٌ تضمن
عمل ال tag على جم عٌ المتصفحات

الطريقة القديمة لكتابة كود تضمين الفيديو..

طريقة استخدام الفيديو في html5
لاحظ طر قٌة تضم نٌه ما أبسطها... نقوم فقط بفتح tag من نوع ف دٌ وٌ ..
<source هااذه تحاادد الف اٌاد وٌ الااذي ساا عٌمل وعنااد تكرراهااا ..فأنااا قماات بتحد اٌاد الصاا ؽٌة
..الأولااى mp4 والثان اٌاة ogg ..لكاا أضاامن أان تعماال علااى جم اٌاع المتصاافحات )لا تنسااى
الاصدارات( ..

بعض الدوال التي يمكن استخدامها مع الفيديو..

لم العليم و قل العا ل اختللا
اي الذي منهما د احرز الشرفا
فالعلم ال انا احرزت لايته
والعقل ال انا الرحمن بي رفا
فأفصح العلم افصاحا و ال له
بأينا الله في فر انه اتصلا
فبان للعقل ان العلم سيده
فقبل العقل رأس العلم وانصرفا

<audio></audio>
 هذه الخاص ةٌ ^__^, بعرؾ سهلة ^_^, هذه الخاص ةٌ تسمح لنا بتضم نٌ
مقطع صوت داخل الصفحة, ولا تحتاج أ ضٌا plug-in .
 المتصفحات الت دٌعمها هذا ال tag مع الص ػٌ ...

Input Type
 الآن مع ال Html5 توفرت مجموعة من الخصائص ا ضٌا الت مٌكن ان نستخدمها
مباشرة لادخال نوع محدد من الب اٌنات, دون استخدام السكربت مثلا, وسنتكلم باذن الله
تعالى عن:
color
date
datetime
datetime-local
email
month
number
range
tel
time
url
week

color
 من اسم هذه الخاص ةٌ, نستنتج أنها تتعلق بالألوان, وفعلا هذه الخاص ةٌ تقوم بتوف رٌ زر حٌتوي
على مجموعة الألوان , بح ثٌ ظٌهر لنا على الزر اللون الذي قمنا باخت اٌره, وبإمكاننا
طبعا ارسال ق مٌة اللون والتعامل معه .....
 المتصفحات الت تدعمها هذه الخاص ةٌ ) (C,O ملاحظة: قد تتطور المتصفحات الأخرى وتدعم
هذه الخاص ةٌ, لذلك هذه المتصفحات لحظة كتابة هذا الشرح البس طٌ ...
هذه هي طريقة استخدام هذا التاغ, وهو يشبه الطريقة التقليدية لكتابة التاغ...
ملاح ة: ستعراض هذا المثال ل شكل ملي, ارسال واستقبال يم ليك باخذ الصلحة وو عها داخل
السيرفر مثل xampp, zendserver, wampserver أو أي اشي آخر...)اسم الصلحة
14.php وموجودة داخل مجلد اسمه PHP )
أو استعرضها على شكل صفحة html فقط ...

Date
 هذه الخاص ةٌ تت حٌ للمستخدم اخت اٌر تار خٌ مع نٌ من تقو مٌ.
 المتصفحات الت تدعمها ) C,S,O .)
ملاح ة: ستعراض هذا المثال ل شكل ملي, ارسال واستقبال يم ليك باخذ الصلحة وو عها داخل السيرفر
مثل xampp, zendserver, wampserver أو أي اشي آخر...)اسم الصلحة 15.php وموجودة داخل
مجلد اسمه PHP )
أو استعر ها ل شكل صلحة html فقط ...

Input Type: datetime-local
 هذه الخاص ةٌ تت حٌ للمستخدم اخت اٌر التار خٌ والوقت من خلال تقو مٌ .
 المتصفحات الت تدعمها ) C,S,O .)
ملاح ة: ستعراض هذا المثال ل شكل ملي, ارسال واستقبال يم ليك
باخذ الصلحة وو عها داخل السيرفر مثل xampp, zendserver, wampserver أو أي اشي آخر...)اسم الصلحة 16.php وموجودة
داخل مجلد اسمه PHP )

email
 تستخدم هذه الخاصة لتعر ؾٌ حقل س حٌتوي على ا مٌ لٌ, وهذا عٌن انه جٌب
ان رٌاع ص ؽٌة الا مٌ لٌ المعروفة, والا فس خٌرج رسالة تحذ رٌ تف دٌ بوجود
خطأ...
 المتصفحات الت تدعم هذه الخاص ةٌ ) F,C,O .)

month
 تسمح لنا هذه الخاص ةٌ الاخت اٌر من تقو مٌ مع نٌ )الشهر والسنة فقط( ..
 المتصفحات الت تدعم هذه الخاص ةٌ ) S,C,O .)

number
 ةعبرأ هل دجوٌو ماقرلأا عم لماعتٌ لقح ؾٌرعتل ةٌصاخلا هذه مدختست
خصائص رئ سٌ ةٌ ) (min,max,step,value .
 عٌمل على المتصفحات ) O,S,C .)
اسم الصلحة ك PHP ( 19.php ( واذا أردت راية المثال ك Html ..ا اط هنا ..

Range
 هل دجوٌو ماقرلأا نم ىدم عم لماعتٌ لقح ؾٌرعتل ةٌصاخلا هذه مدختست
أربعة خصائص أ ضٌا وه ) (min,max,step,value .
 عٌمل على المتصفحات ) O,S,C .)

يقععععععععول الشععععععععافعي فععععععععي تجاهععععععععل السععععععععليه و ععععععععدم الععععععععرد ليععععععععه:
يخععععععاطبني السععععععليه بكععععععل ععععععبح........فععععععأكره أن أكععععععون لععععععه مجيبععععععا.
يزيعععععععد سعععععععلاهة فأزيعععععععد حلمعععععععا...........كععععععععود زاده ا حعععععععرا طيبعععععععا.
ويقعععععععععععععععععععععععععععععععععول معععععععععععععععععععععععععععععععععرو بعععععععععععععععععععععععععععععععععن لعععععععععععععععععععععععععععععععععي:
ادا نطعععععع السعععععععليه فعععععععلا تجبعععععععه......فخيعععععععر معععععععن اجابتعععععععه السعععععععكوت.
سكت ن السليه ف ن أني..... ........ ييت ن الجوا وما ييت.

tel
 تستخدم هذه الخاص ةٌ لتعر ؾٌ حقل قٌبل ص ؽٌة لأرقام الهواتؾ.
 حتى لحظة كتابة هذه الشراح )ل سٌ مدعوما بعد من المتصفحات الرئ سٌ ةٌ(

time
 تقو لكش ىلع نٌعم لقح دٌدحتل ةٌصاخلا هذه مدختست ...
 دٌعم هذه الخاص ةٌ المتصفحات ) C,S,O .)

url
 تستخدم هذه الخاص ةٌ لتعر ؾٌ حقل سٌتقبل روابط.. http://anything…etc
 دٌعم هذه الخاص ةٌ المتصفحات ) F,C,O .)

week
 هذه الخاص ةٌ تعط كٌ رقم الأسبوع الذي اخترته مع العام ...^_^
 دٌعم هذه الخاص ةٌ المتصفحات ) C,S,O .)

Form Elements
<datalist>
<keygen>
<output>

<datalist>
 لا اذه مدختسٌ tag لإظهار كلمات متوقعة بشكل تلقائ عند كتابتك ش ءً
مع نٌ, أو ظٌهر لك عدة اخت اٌرات حسب ما تم حفظه داخل القائمة )شب هٌا
تقريبا بفكرة الؽوؼل –من ح ثٌ المظهر-(
 دٌعم هذا ال tag من المتصفحات ) F,C,O

<keygen>
 لا اذه مدختسٌ tag ل زٌ دٌ من مقدار الأمان والتحقق من صلاح ةٌ الوصول
للأعضاء, عن طر قٌ تشف رٌ الب اٌنات المرسلة باستخدامه, ومبدأ عمله قٌوم على
انشاء مفتاح نٌ الأول محم )ً private ( والثان عام ) public (, والمقصود
بمحم أي تٌم تخز نٌ هذا المفتاح بشكل محل بدون ارساله الى الس رٌفر, والعام
قٌوم بارسال المفتاح الى الس رٌفر, و مٌكننا من خلال هذا المفتاح العام التأكد ف المستقبل أنه تٌوافق مع المفتاح الخاص أم لا , اذا نعم عٌن أن الأمور تس رٌ
بالشكل الصح حٌ. ^_^
 دٌعم هذا ال tag المتصفحات ) C,F,S,O .)
اسم الصلحة ك PHP ( 26.php ( واذا أردت راية المثال ك Html .)لن ي هر ناتج(.ا اط هنا ..

<output>
 لا اذه tag وظ فٌته ارجاع ناتج عمل ةٌ حساب ةٌ مباشرة ^^.
 المتصفحات الت تدعم هذا ال tag ه ) C,F,S,O .)

New Form Attributes and New Input Attributes

autocomplete Attribute
 هذه الخاص ةٌ تقوم على تعبئة الحقول بشكل تلقائ مجرد رجوع ال وٌزر للصفحة,
أي أن الب اٌنات تم ادخالها بالأصل من قبل المستخدم.
 هذه الخاص ةٌ مٌكن وضعها لل form أو ضمن input tag ...وه حالتنان on
وتعن قم بالتعبئة التلقائ ةٌ, و off ..لا تقم بذلك.
 تدعم هذه الخاص ةٌ المتصفحات الرئ سٌ ةٌ جم عٌها باستثناء ال ) O .)

novalidateAttribute
 وه خاص ةٌ خاصة بال form , وتعن أنه ل سٌ من الضرورة التحقق من
صحة المعلومات المدخلة ف هذا ال form .
 دٌعم هذه الخاص ةٌ المتصفحات ) F,C,O .)

ال سعبحانه وتععال : ﴿الَّعيذي ن آ مونعوا و يملوعوا الصَّعالي حايت وطعو ب ل وهعسم ووحسسعون مع
]الر ععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععد: 29 .]
طوب لي من طا ل وه ال حديــــــــــوث *** ما يس توي ال طيِّو وال خبيـــــــــــــــــ وث

autofocus Attribute
 تستخدم هذه الخاص ةٌ لتحد دٌ عنصر ادخال مع نٌ مباشرة, أي مجرد تحم لٌ
الصفحة تٌم التأش رٌ عل هٌ ^_^.)من خصائص ال
input .)
 دٌعم هذه الخاص ةٌ المتصفحات )جم عٌ المتصفحات عدا I) .)

form Attribute <its for input tag>
 طبخلن ام ناشع لاوأ : Pp ... هذه خاص ةٌ اسمها form وه من خصائص ال
input ..
 تقوم هذه الخاص ةٌ على جعل أحد ال input tag الموجودة داخل الصفحة تابعة
لفورم مع نٌ, أو أكثر..
 دٌعم هذه الخاص ةٌ المتصفحات الرئ سٌ ةٌ جم عٌها ما عدا ) I .)
 ل عٌمل المثال بشكل صح حٌ وترى النتائج عل كٌ بتجربته على الس رٌفر ..اسم
الصفحة 31.php ...
أو انظر الى الكود ك html ....

formactionAttribute <its for input tag>
 رٌؼ ىرخأ ةحفص ىلا باهذلل نٌعم رصنع هٌجوت ىلع ةٌصاخلا هذه موقت
الصفحة المخصصة ف ال action الموجودة داخل الفورم...و قٌوم مبدأ عملها
على عمل override لل action الخاص بال form ب formaction
الخاص ةٌ الموجودة داخل ال input tag .
 مٌكن استخدام هذه الخاص ةٌ فقط لنوع نٌ من الحقول submit & image
 دٌعم هذه الخاص ةٌ جم عٌ المتصفحات الرئ سٌ ةٌ ما عدا ) I .)
رض ك html ستعراض النتائج ..اسم الصلحة .
..
32.php

formenctypeAttribute <its for input tag>
 تستخدم هذه الخاص ةٌ لتحد دٌ طر قٌة ترم زٌ الب اٌنات المرسلة عن طر قٌ
الفورم, مثل Multipart/form-data .. ح ثٌ مٌكننا الآن تحد دٌ عن
طر قٌ ربطها اما ) submit or image ( ولا تعمل هذه الخاص ةٌ الى على
هذان ال tags ... ^_^..
 لا تستط عٌ استخدام هذه الخاص ةٌ الا مع method=“post” ...
 دٌعم هذه الخاص ةٌ المتصفحات )جم عٌها عدا I .)

formmethodAttribute <its for input tag>
 ًه له تاناٌبلا لاسرا ةقٌرط دٌدحتل ةٌصاخلا هذه مدختست get or post
وبهذا نستط عٌ عن طر قٌها عمل override للطر قٌة المستخدمة بالفورم
وتحو لٌها الى ما تم تحد دٌه داخل ال input tag .
 مٌكن استخدام هذه الخاص ةٌ فقط داخل ال submit or image ...
 دٌعم هذه الخاص ةٌ جم عٌ المتصفحات عدا ) I .)
لتطبي المثال م ينسخ
الصلحتان 34.php and 34_0.php ال السيرفر
او اطلع على الكود ك
html ...

formnovalidateAttribute <its input tag>
 ًهو اقباس اهنع انملكت ةٌصاخ هبشت ةٌصاخلا هذه novalidate ..وكانت
تلك الخاص ةٌ على مستوى الفورم, والآن مٌكننا ان نربطها مع submit
بح ثٌ اذا قام بالضؽط على هذا الزر فانه س نٌفذ بدون validation ..
 تعمل هذه الخاص ةٌ فقط على submit ...
 دٌعم هذه الخاص ةٌ المتصفحات ) C,F,O .)

formtargetAttribute <its for input tag>
 ىلع ظعضلا دنع تاناٌبلا ضرع ةقٌرط دٌدحتل ةٌصاخلا هذه مدختست
الزر...
 دٌعم هذه الخاص ةٌ المتصفحات جم عٌها عدا ) I .)
 مٌكنك استخدام _blank or _self or _parent or _top ...
_blank : يقوم ل فتح نافذة جديدة ند ال اط
..وفي هذا المثال مت بو ع ال action = # لذلك
سيقوم بعرض نلس الصلحة ولكن بنافذة جديدة أي ا ..

min and max Attributes <its for input>
 لقد تكلمنا عن هذه الخاص تٌ نٌ بشكل ؼ رٌ مباشر..عندما تطرقنا الى موضوع ال
input=number كمثال ...والآن سنذكرهما بشكل أوسع .. مٌكن استخدام هذه الخاص تٌان لتحد دٌ
أقل أو أكبر )تار خٌ, رقم, مدى, شهر, أسبوع, وقت..(..وبهذا نكون استطعنا أن نحدد أقل ق مٌة
لادخال مع نٌ أو أكبرها بدون استخدام الوسائل الأخرى ....مثل js ...
 دٌعم هاتان الخاص تٌان ال C,S,O
انتبه ال نوع المتصلح الخاص
بك..

multiple Attribute <its for input>
 ^_^ ... ةلهس : Pp ...تستخدم هذه الخاص ةٌ لتفع لٌ امكان ةٌ اخت اٌر أكثر من
صورة او ملؾ معا وأ ضٌا وضع أكثر من ا مٌ لٌ ...وهذا عٌن أنها لن تعمل
الى على file & email ...
 دٌعم هذه الخاص ةٌ المتصفحات جم عٌها عدا ) -_- I .)

placeholder<its for input>
 تستخدم هذه الخاصية لو ع hint يقوم ل وصف مصار لما سيحتوي ال input , ويمكن استخدام هذه
الخاصية مع text,password,Email,url,tel,search ....
لما أن الملاح ة الصايرة هذه التي ست هر لن تاثر ل معلومات ا دخال...
 يد م هذه الخاصية جميع المتصلحات I9+ ..

Element Semantic

Element Semantic
 أولا سنبدأ بتعر ؾٌ هذا المصطلح, وتوض حٌ الفرق ب نٌه وب نٌ ال
NotSemantic ..
قٌصااد بااال Semantic أي ال tag التاا مٌكاان فهاام محتوهااا مباشاارة ماان
النظر ال هٌا عان طر اٌق المبارمج أو مباشارة مان المتصافح مثال <table> ,
أماااا not Semantic ف قٌصاااد بهاااا ماااا لا مٌكااان تخمااا نٌ محتاااواه مثااال ال
<span> أو <div> ..فقد تحتوي أكثر من محتوى ول سٌ ش ءً محدد ..
هذا الموضوع دٌعمه جم اٌع المتصافحات الرئ سٌا ةٌ) I9+,C,S,O,F ( ..علماا أن
I8 مٌكاان دعمااه عاان طر اٌاق اسااتخدام سااكربت .والاصااداراتت القد مٌااة ماان
المتصفحات الأخرى مٌكن ان ندعمها باستخدام طر قٌة مع نٌة.لكن الآن لتبقاى
هذه المعلومات ف تفك رٌك ولنبدأ على بركة الله ..

<time>
 ومن اسمه دٌل على وجود لاستخدام الوقت ...وبالحق قٌة هو كذلك, سٌتخدم
لمعرفة الأوقات والتوار خٌ كل على حدا أو معا ...
ح أنني استطعت القيام بتحديد الو ت لوحده أو
التاريخ لوحده أو ا ثنان معا..
ملاح ة: يمكننا استخدام اي ا
<time>2011-07-14</time>
وهذه الصياة تستخدم فقط ندما احتاجها فقط
هار القيمة ..

<meter>
 تستخدم هذه كمق اٌس مٌكن أن رٌاه المستخدم, و كٌون على شكل مدى Range ب نٌ
رقم نٌ لا تظهر ق مٌتهما..) ( , وؼالبا ما تستخدم لتوضح مدى
استؽلال قرص مع نٌ أو بدء وانتهاء عمل ةٌ مع نٌة ..الخ.
 لها 6 خصائص:
Value : وه الق مٌة الت وصل ال هٌا.
Min : أقل ق مٌة ممكنة للمدى.
Max : أكبر ق مٌة ممكنة للمدى.
High : بحدد عن طر قٌها النقطة الت ستعتبر نقطة قر بٌة للوصول للنها ةٌ
Low : عكس ال high ..
optimum: : اذا أحببت أن تضع نقطة ضمن المدى تكون ه النقطة الأمثل..
 ملاحظة: آخر 3 خ اٌرات اخت اٌر ةٌ.

<progress>
 تستخدم هذه لتحد دٌ نسبة المهام المنجزة بالنسبة لعمل ةٌ مع نٌة....مثل عمل ةٌ
تحم لٌ الملفات ...
 لها 3 خصائص min,max,value ...

<section>
 تستخدم هذه للاشارة على انها تحتوي جزء أو مقطع من ملؾ أو مستند..
 تعتبر هذه صورة مصؽرة عن div ولكن ذات معنى دلال او اشاري ..أي
مجرد النظر ال هٌا نعلم انها تحتوي جزء من ملؾ أو مستند..

<article>
 تستخدم هذه لتحد دٌ أن المحتوى جزء مستقل, مٌكن توز عٌه بشكل مستقل,
وأن كٌون المحتوى الخاص به كاف لإ صٌال فكرة مع نٌة...
 مثل:
Blog post
News story
Comment
Review
Forum post
لاحظ أنها أفكار تنظ مٌ ةٌ, للدلالة على
المحتوى الت بداخلها وهذه فكرة انشائها ..

<nav>
 تحتوي هذه على مجموعة من الروابط, بح ثٌ مٌكننا تنظ مٌ الروابط داخل
هذا ال nav ...مع العلم أنه ل سٌ بالضرورة أن تٌم وضع جم عٌ الروابط
الت بالصفحة داخله ..^_^

<header>
 تستخدم هذه لتحتوي ألمقدمة لأي محتوى أو صفحة ..و مٌكن أن تٌواجد أكثر
من header ف نفس الصفحة ...مثلا ف حالة وضعنا أكثر من section
بامكان أن أضع header لكل section ....

<footer>
 تستخدم هذه للدلالة على نها ةٌ أو خاتمة فثرة مع نٌة او صفحة .., و جٌب ان
تحتوي هذه على معلومات عن الصفحة او الفقرة ..., مثل اسم الناشر أو
حقوق الملك ةٌ, أو معلومات عن الصفحة أو روابط متصلة بالموضع ..الخ.

<aside>
 سٌتخدم هذا ل حٌتوي المعلومات الجانب ةٌ, أو الاضاف ةٌ لمحتوى مع نٌ, مثل
وضع نص, ومن ثم وضع معلومات جانب ةٌ عنه ....

<figure> and <figcaption>
figure تستخدم هذه للدلالة على احتوائها محتوى متكامل بذاته شٌرح
نفسه بنفسه تقر بٌا..مثل الصورة أو الجداول الب اٌن ةٌ ..الخ, و مٌكن ترق مٌها أو
ترت بٌها الواحدة تلو الأخرى باستخدام figcaption ... انظر الى أي كتاب
أو أي منهاج مدرس ^_^ مثلا الف زٌ اٌء *_* ...

دعم المتصفحات لهذه ال tags ..
 قلنا أن هذه ال tags مدعومة من المتصفحات الرئ سٌ ةٌ, باصداراتها
الجد دٌة, لكن الاصدارات القد مٌة, قد لا تستط عٌ دعمها, فهل هناك طر قٌة
تمكن المتصفحات القد مٌة من ان تدعم هذه ال tags ؟ الجواب نعم وٌجد
وه باضافة كود css الى style تضعه انت بصفحتك عٌن ) Css .)

مشكلة في متصفح Ie8- ..
 الطر قٌة الت ذكرناها, ستعمل ف المتصفحات القد مٌة الأخرى باذن الله,
ولكن ل سٌ مع ال ie8- ..
 مٌكن حل هذه المشكلة باستخدام التال :ً

HTML5 Web Storage

أولا: ال Cookies
 قبل البدأ بمفهوم ال Web Storge , عل نٌا أن نعلم أنها تشبه تقر بٌا فكرة ال
cookies , لكن مع بعض الاختلافات ..
 ال cookies تستخدم لحفظ بعض الب اٌنات على جهاز المستخدم, ل تٌم
استدعائها عند الحاجة ال هٌا عن طر قٌ الس رٌفر.
 من الأمثلة على استخدام ال cookies ... عمل ةٌ ”تذكرن “ً.
 مشكلة ال cookies : الحجم محدود للملؾ الذي حٌفظ ب اٌنات ال
cookies بسعة تقدر 4KB أي ما قٌدر ب 30 الى 50 cookies بكل
ملؾ.أ ضٌا مٌكن ان تشكل مشاكل تتعلق بالأمان أو الخصوص ةٌ, و مٌكن
أ ضٌا لل وٌزر حذؾ هذا الملؾ.

ثانيا: Web Storage
 تعد هذه أسرع وأكثر أمانا من ال cookies ..
 تمكننا تخز نٌ كم اٌت أكبر من الب اٌنات تصل الى 5 م ؽٌا و مٌكن ز اٌدة هذه السعة
من قبل المستخدم.
 المعلومات لا تكون متضمنة ف كل عمل ةٌ requset من الس رٌفر, ولكن فقط عند
الطلب تٌم تشؽ لٌها والعمل معها.
 تخزن الب اٌنات على شكل key/value ...و مٌكن لكل web page أن تقوم
باتدعائها بنقسها ..
 تٌم التعامل معها عن طر قٌ ال clintside سكربت, لذلك ه ل سٌت بحاجة
للتعامل مع الس رٌفر أو الداتا ب سٌ, أي تخلصنا من الطر قٌة التقل دٌ ةٌ..
 هناك نوعان مهمان منها :
الأول: Local Storage
والثان :ً Session Storage

قبل البدأ بتفصيل النوعين ) local and Session )
عل نٌا أن نقوم بفحص المتصفح ...هل دٌعم هذه الخاص ةٌ ؟؟؟؟ ^_^..

أولا: Local Storage
 قٌوم نوع التخز نٌ هذا على مبدأ )احفظ الب اٌنات بدون وجود وقت محدد
لانتهاء هذا التخز نٌ( ..أي لا وٌجد حد زمن لاحتواء الب اٌنات ..
 هذه الب اٌنات لا تخذؾ بعد اؼلاق المتصفح ..و مٌكن ان تكون متاحة
للاستخدام حتى وإن مضى عل هٌا وٌم او اسبوع أو شهر أوسنة ...الخ
 تخزن هذه المعلومات على شكل string (.. (key & value ....

ثانيا: Session Storage
 قٌوم نوع التخز نٌ هذا على تخز نٌ الب اٌنات بنفس طر قٌة ال local ولكن
الفرق الجوهري والرئ سٌ ..أن عمل ةٌ التخز نٌ ف هذا نوع تنته بانتهاء
ال session .. عٌن مثلا اذا اؼلقت المتصفح ..خلص بتروح الب اٌنات ..

مثال يوضح الفرق بين النوعين ^_^


أسلوب برمجي آخر لتخزين واسترجاع القيم ..

Application Cache

Application Cache
 ًف اهمادختسا نكمٌ ًتلاو ةعئارلا تاٌناكملاا نم هذه دعت html5 ..ولكن
ماذا قٌصد بها؟ .. مٌكننا القول بانها القدرة او الامكان ةٌ على تصفح موقع
مع نٌ حتى وان لم كٌن هناك اتصال ف الانترنت !!...ك ؾٌ هذا؟!
 مبدأ عملها: قٌوم مبدأ عملها بشكل مبسط على قائمة تحتوي الروابط
للصفحات الت داخل الموقع وما تحتو هٌ من ملفات html أو js أو أي من
المصادر الأخرى ..الآن الصفحة الرئ سٌ ةٌ تقوم على تحد دٌ هذه القائمة
وعمل لها استدعاء عن طر قٌ استدعاء ملؾ اسمه manifest ..
 ما طب عٌة عمل ملؾ ال manifest ؟ ...أولا هذا الملؾ عبارة عن txt ,
و قٌوم هذا الملؾ باخبار المتصفح ا شٌ ال بدي أعملوا cache وا شٌ ال ما انعملوا لسا ...

 قٌسم ملؾ ال manifest الى 3 أقسام ..
الأول: CACHEMANIFEST : هذه تحتوي على مجموعة الملفات الت س تٌم
تحم لٌها بعد عمل ةٌ التحم لٌ الأولى للموقع ..
مثال: لو وجد عندي تحت هذا القسم ملؾ css وملؾ js ..فانه عند تحم لٌ الصفحة
للملؾ ال manifest س قٌوم بتحم لٌ المتصفح هذان الملفان و ضٌعمها الى root
الخاص بالموقع ..
الثان :ً NETWORK : حٌتوي هذا الجزء على جم عٌ الملفات ال جٌب ان تتصل
بالس رٌفر لتعمل ..أي لا تٌم وضعها بال cache ..
مثال : لو فرضنا وجود صفحة تسج لٌ عضو ةٌ فان reg.php هذه الصفحة جٌب أن
لا تعمل الى بوجود س رٌفر ..فلذلك نقوم بوضعها هنا ...وبامكاننا وضع الرمز ال
* ..وهذا عٌن ان كل الصفحات جٌب ان تكون متصلة بالس رٌفر ؼ رٌ الذي ذكر
بالنقطة واحد..

الثالث: FALLBACK : وٌضع ف هذا الجزء صفحات تعمل ف حال فشل
وصول الى احدى الصفحات الت جٌب ان تكون ف ال cache ... عٌن تعمل عمل نسخة احت اٌط ةٌ لاسماء الملفات بداخلها بٌدأ باستدعاء النقطة
الأولى من هنا ..هناك تحم لٌ وهنا استدعاء للملفات لما نص رٌ ف حالة ؼ رٌ
متصل نٌ على الانترنت..وتحتوي هذه على جز ئٌ نٌ الجزء الأول العنوان
للملفات الأصل ةٌ والثان ف حالة عدم وجودها ذٌهب ال هٌ ...
هنا مثلا نضع صفحة نسم هٌا offline.html ف حال لم تٌم تحم لٌ الملفات
الت بال cache manifest بنجاح سٌتدع الصفحة الت اسمها
offline.html ..

طريقة انشاء ملف manifest
 أولا: نذهب الى .htaccess ( apache ( ..ونقوم باضافة
AddTypetext/cache-manifest .manifest
 ثان اٌ: قم بانشاء صفحة اسمها offline.manifest ..وكمثال سنضع داخلها:
CACHE MANIFEST #This is a comment CACHE: index.htmlstyle.cssNETWORK: search.phplogin.phpFALLBACK: /apioffline.html
ف حال لم كٌن المسار api موجود س ذٌهب الى offline.html ...

 ثالثا: الآن كٌون ملؾ ال manfestfile جاهز ..ولكن عل نٌا ان نقوم باضافة ال
manifest الى ال html ..
<html manifest="/offline.manifest">
 من دٌعم ال appCache من المتصفحات:
IE: No support
Firefox: 3.5+
Safari: 4.0+
Chrome: 5.0+
Opera: 10.6+
iPhone: 2.1+
Android: 2.0+

مثال على ال AppCache ...
قمت بتحم لٌ مثال بس طٌ على هذا الموضوع ..... بامكانك الاطلاع
عل هٌ ..قم أولا باسعراض صفحة ال index ..ثم انظر الى الكود
المكتوب بداخل ال indexandoffline.manifestandfallback ...
ملاحظة: قد تختلؾ حجم السعة
المخصصة لل cache من متصفح
لآخر ..وقد تكون ف بعض
المتصفحات الى حد 5 م ؽٌا

Web Worker
 لا web worker عبارة عن كود جافا سكربت .. عٌمل بالخفاء ودون
التأث رٌ على أداء الصفحة ...أي بامكانك الاستمرار بالتعامل الصفحة من
استخدام لمحتو اٌتها مثل الضؽط على الأزرار أو تحد دٌ ش ءً مع نٌ ..الخ,
وبنفس هذه اللحظة كٌون ال web worker عٌمل ..
 دٌعم هذه الخاص ةٌ جم عٌ المتصفحات الرئ سٌ ةٌ مع I10+ ...
 طر قٌة التعامل معه ..عل نٌا أن نقوم بتفقد المتصفح ..هل دٌعم هذه المز ةٌ؟

طريقة التعامل مع ال Web Worker ..
 أولا: انشاء ملؾ (file worker) ...وهذا الملؾ حٌتوي السكربت الذي
س عٌمل بالخفاء ...وهذا الملؾ س عٌمل له استدعاء عن طر قٌ الصفحة الت سٌتعرضها ال وٌزر ..وسأقوم بانشاء ملؾ اسمه اسمه 58.js ..
 ثان اٌ: بصفحة ال html ...نقوم بتعر ؾٌ أوبج كٌت ...من الملؾ 58.js ..
w=new Worker("58.js");  ثالثا: بدء عمل ال worker ...هذه تأخذ الق مٌة من صفحة ال 58.js
..وبترجعها داخل الفانكشن ...وهنا س قٌوم بطباعة الناتج على صفحة ال
html ..
w.onmessage=function (event) { document.getElementById("result").innerHTML=event.data;

 رابعا: w.terminate(); , هذه تستخدم لا قٌاؾ عمل ال web worker .
 خامسا: postMessage(i); هذه وضعتها داخل ال file worker ..وهذه
تقوم ه الت تقوم على ارجاع الق مٌة للنقطة رقم 3  الآن أصبح لد نٌا Web Worker ... الآن لنذهب ونرى المثال ف الصفحة
الثان ةٌ ..
ملاحظة: هذا الشرط وٌضع لفحص هل تم تعر ؾٌ الأبجكت قبل هذا ام
لا ..

مثال
ملاحظة: ل عٌمل هذا المثال ...قم بأخذ الصفحتان 58.js and 58.html وضعهم على الس رٌفر ومن ثم قم بتشؽ لٌ المثال ...
أو استعرض المثال على متصفح الكروم مع اعطائه صلاح ةٌ
الوصول الى الملفات المخزنة على الجهاز
(.. localhost/58.html )

Server-Sent Events (SSE)
 لل ةٌزملا هذه حمست web page بأخذ التحد ثٌات من الس رٌفر بشكل
تلقائ ,ً وهذه المز ةٌ تعتبر باتجاه واحد, أي من الس رٌفر الى ال web page .
 ال SSE صورة مصؽرة عن ال Web Sockets ..ولكن مع مراعاة ان
ال SSE فقط مٌكنه ارسال الب اٌنات من الس رٌفر الى المستخدم أما الو بٌ
سوكت فهو رٌسل و سٌتقبل المعلومات .وهناك أمور أخرى..) مٌكنك البحث
عن الفرق ب نٌهم(..
 دٌعم هذه المز ةٌ ..جم عٌ المتصفحات الرئ سٌ ةٌ باستثناء ال ) I .)

التحقق من دعم المتصفح ل SSE

سيرفر كود ..للصفحة التي سترسل البيانات الى المستخدم
لتنف ذٌ المثال ..قم بالدخول الى المجلد الذي اسمه PHP وقم بنسخ الصفحات 60.php and 60.html وقم بوضعهم داخل الس رٌفر ..ومن ثم قم بتشؽ لٌ الصفحة 60.html ..
Localhost/60.html ...وانظر الناتج

MathML
 لا هذه زكرٌ Tag على استعراض المعادلات الر اٌض ةٌ ..أي انها طر قٌة تمكنن من عرض المعادلة الر اٌض ةٌ كما ه برموز الر اٌض اٌت ول سٌ برموز الحاسوب
..
 لهذا ال tag مجموعة من الخصائص ألا وه :ً
<mi>x</mi> : هذه تحتوي على المتؽ رٌات ) x,y,z…..etc )
<mo>+</mo> : تحتوي هذه على العمل اٌت مثل ) +,-,* ...الخ(
<mn>2</mn> : تحتوي هذه على الأرقام.
<mrow> : هذه تدل على صؾ أفق من العناصر
<mfrac> : هذه للكسور.
<mfenced> : تدل علو وجود محتوى داخل أقواس مثلا ..الخ ...مثال:
المصفوفات.
 دٌعم هذه الخاص ةٌ F

أمثلة:
لا تنسى ..المتصفح التذي دٌعم هذا التاغ
ال
Firefox

نهاية الدورة
الحمد لله الذي بحمده تتم النعم ... الحمد لله رب العالم نٌ ..
بفضل من الله تعالى ورضوانه ..ومنه وعطائه عل نٌا ... استطعنا باذنه تعالى, أن نتعلم الكث رٌ عن
Html5 ...
اخوان هذا العمل كأي عمل بشري ...كما حٌتوي الصح حٌ مٌكن أن حٌتوي الخطأ ..لأن الكمال لله ...
حاولت قدر الامكان أن تكون المعلومات دق قٌة وبشكل سهل وسلس للفهم ...
أتمنى من الله تعالى ان تٌقبل منا عملنا هذا ..و ؽٌفر لنا ذنوبنا ...و رٌحمنا و هٌد نٌا الى الحق من عنده
...و رٌزقنا وإ اٌكم الرزق الحلال الط بٌ ...
وفقكم الله لكل خ رٌ ...وجزاكم الله خ رٌا
اللهم اؼفر ل ولوالدي وللمسلم نٌ أح اٌئهم وأمواتهم .. انك على كل ش ءً قد رٌ ...
أخوكم أن سٌ حكمت أبو حم دٌ ...
Anees_hikmat@yahoo.com
0785448030

دورات أخرى
 دورة دروبال 7 باللؽة العرب ةٌ للمبتئ نٌ
/____.html0_-shared.com/get/TRksS4http://www.
 دورة ج كو رٌي
H/l_j.html13shared.com/get/RriHx4http://www.

الحمد لله رب العالمين

باللغة العربية HTML5 دورة

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to باللغة العربية HTML5 دورة (20)

More from anees abu-hmaid (20)

Recently uploaded (14)

باللغة العربية HTML5 دورة