2. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
بسم الله الرحمن الرحيم
HTML5 ف سطور
إعداد وشرح
ج ب ب ن ع بدالك ي رم
3. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
أولا ولبل كل ش عل نٌا ان نعرف ما ه ال html صح حٌ ان العد دٌ منكم لد عٌرفها لكن لا ضرر
ان نع دٌ تعر فٌها إذا ما ه ال html ؟
ه عبارة عن اختصار لكلمه ) hyper text markup language ( أي لغة ترم زٌ النصوص
التشعب ةٌ . وه ل سٌت لغة برمج ةٌ و إنما لغة توص فٌ ) Markup language ( ك فٌ لغة
توص فٌ أي أنها تصف صفحة الانترنت عن طر كٌ مجموعه من الوسوم أو ما سٌمى باللغة
الإنجل زٌ ة ي ال Tags أي انه لكتابه ملف أو صفحه انترنت بهذه اللغة جٌب عل نٌا معرفه وسومها ال
Tags الخاص بها و جٌب عل نٌا أ ضٌا ان نعرف الخصائص Attributes الخاصة بهذه الوسوم .
ثان اٌ ما هو الفرق ب نٌ ال Html و Html5 ؟
أجابه هذه السؤال بس طٌة جداً وهو إن ال Html5 ه عبارة عن الإصدار الجد دٌ للغة ال html ولكنة حٌتوي على أوسام Tags جد دٌة وخصائص Attributes مما سهل العمل على اللغة .
ما ه مم زٌات هذا الإصدار Html5 ؟
1 - اختصار الأكواد بشكل كب رٌ، مما سٌاعد على سرعة تحم لٌ الصفح.ة
2 - دعم للـ Audio ، Video لمراءة الف دٌ وٌ أو الصوت ف الصفحة دون الحاجة إلى لارئ خاص.
3 - تعامل كب رٌ مع الـ JavaScript .
4 - دعم أكثر لتخز نٌ الصفحات فى نمط عدم الاتصال Offline Storage .
5 - عناصر إدخال جد دٌة مثل Date ، url ، Email ، Search .
6 - حذف بعض الوسوم tags .
7 - إضافة خصائص Attributes جد دٌة لبعض الوسوم .
8 - دعم رسومات كلا من 2D/ 3D .
9 - دعم كامل لل CSS3 .
بهذه الممدمة أتمنى إن تكونوا لد اطلعتم وتعرفتم على ال html وعرفتم ما هو الفرق ب نٌها
وب نٌ الإصدار الذي سنتطرق إلى شرحه و فٌضل ان تكون على علم ب html ك تفهم
هذا الكتاب وحتى لا تكون هنان مفاه مٌ غامضة.
4. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
ألان سوف نبداء شرحنا لل html5 بالتعرف وشرح الوسوم الجد دٌة ف هذه اللغة وشرح عمل
كل وسم :-
1 - وسم ) canvas )
الوسم
الوصف
<canvas> وسم الرسم ف ال html عن طر كٌ الجافا سكربت
2 - وسوم الملت مٌ دٌ اٌ ) media )
الوسم
الوصف
<audio> وسم إضافة ملف صوت سوى كان mp3 أو wav أو ogg
<embed>
وسم إضافة عنصر تفاعلً
<source> وسم تعر فٌ مصادر الوسائط
<video>
وسم إضافة ملف ف دٌ وٌ .
3 - وسوم الحمول ( Form )
الوسم
الوصف
<datalist> وسم إنشاء لائمة منسدلة لتحد دٌ ب اٌنات محددة مسبما
<keygen>
وسم تول دٌ مفات حٌ
<output> وسم تٌم تول دٌ محتواه د نٌامك اٌ وأكثر استخداما هت ف العمل اٌت ألحساب هٌ
5. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
4 - وسوم إنشاء وتمس مٌ الصفحة ) Semantic / structurally )
الوسم
الوصف
<article> وسم إضافة ممالة
<aside>
وسم لمحتوى جانب من الصفحة
<details> وسم إظهار مز دٌ من التفاص لٌ عن الموضوع
<figure>
مٌثل هذا الوسم عدد للمحتوى مثل الصور او أي ش اخر
<figcaption> سٌتخدم هذا الوسم داخل الوسم <figure> لإدراج تعل كٌ او عنوان فرع <footer>
عٌتبر هذا الوسم بد لٌ div و سٌتخدم غالبا اسفل الصفحة ) ذ لٌ الصفحة (
<header> عٌتبر هذا الوسم بد لٌ div و سٌتخدم غالبا أعلى الصفحة ) رأس الصفحة (
<main>
وسم لمحتوى رئ سٌ <mark> وسم لعمل إشارة ضوئ ةٌ فوق النص
<meter>
وسم لعمل ممارنه بمم اٌس
<nav> لعمل الوصلات التشاعب ةٌ
<progress>
شر طٌ تمدم المهام
<section> لسم من الصفحة
<summary>
ملخص ترو سٌة العنصر
<time> وسم خاص با الولت و التار خٌ
وهذه الصورة تشرح أهم وسوم تمس مٌ الصفحات
6. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
5 - الوسوم الذي تم حذفها من اللغة ( Removed )
بعد أن عرفنا ما ه الوسوم الجد دٌة ف اللغة لا بد لنا من معرفة ما ه الوسوم الت تم
حذفها و الوسوم الت تم حذفها ف هذا الإصدار ه :-
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strikes>
<tt>
7. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
بعد أن انته نٌا تمر بٌا من شرح كافه الوسم الجد دٌة و الوسوم الت تم حذفها ف هذه اللغة الآن سوف
نتطرق إلى إعطاء أمثله وشرح بعض خصائص هذه الوسوم ونبتدئ بشرح وسوم الم دٌ اٌ وشرح
خصائصها :-
أولاً الوسم <video > كما ذكرنا سابما سٌتخدم هذا الوسوم لإدراج ف دٌ وٌ ف الصفحة
إذا ك فٌ تٌم استخدام هذا الوسم ؟؟ تٌم با الطر مٌة التال ةٌ :-
النت جٌه :
<html>
<head>
<title>
Test for Adding video
</title>
</head>
<body>
<video width="520" height="440" controls="controls">
<source src="video.mp4" type="video/mp4" />
للأسف !! متصفحن لا دٌعم الف دٌ وٌ
</video>
</body>
</html>
8. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
شرح الكود
خصائص الوسم <video>
رمز الخاصية
القيم
الوصف
Audio mute لكتم الصوت عند تشغ لٌ الف دٌ وٌ
Controls
controls
عرض شر طٌ التحكم بالف دٌ وٌ
Src مسار الملف ضٌاف إل هٌا مسار ملف الم دٌ وٌ
Height
ل مٌة بالبكسل
ارتفاع النافذة الت س تٌم العرض ف هٌا
Width ل مٌة بالبكسل عرض النافذة الت س تٌم العرض ف هٌا
Autoplay
autoplay
لتشغ لٌ الف دٌ وٌ تلمائ ا Loop loop لتكرار عرض الممطع تلمائ ا poster
رابط تشعب
رابط لصورة تظهر لبل ظهور ممطع الف دٌ وٌ
وهذه الأكواد تتضمن الخصائص
<video width="520" height="440" controls="controls">
// بدنا بكتابه الوسم لاستدعاء ف دٌ وٌ ولمنا بتحد دٌ طول وعرض شاشه عرض الف دٌ وٌ من خلال كلا من height و width ولمنا
بإظهار عرض شر طٌ التحكم عن طر كٌ الخاص ةٌ controls وه تحوي ل مٌة واحدة لا غ رٌ وه controls .
<source src="video.mp4" type="video/mp4" />
// لمنا ف الكود الثان بتحد دٌ مسار ملف الف دٌ وٌ عن طر كٌ الخاص ةٌ src= ومن ثم حدد مسار واسم الف دٌ وٌ و أ ضٌا حدداً نوع الملف
من خلال الخاص ةٌ type والذي حددنا ف هٌا نوع ملف الف دٌ وٌ .
ملاحظه :- وسم الف دٌ وٌ <video> مٌوم بتضم نٌ ف دٌ وٌ إلى الصفحة لكنه لا دٌعم جم عٌ ص غٌ الف دٌ وٌ فهو فمط دٌعم هذه الص غٌ
Mp4 , Ogg , Web
Autoplay <video controls autoplay> <source src=" مسار الفيديو " type="video/mp4"> Your browser does not support the video tag. </video> Mute <video controls muted> <source src=" مسار الملف " type="video/mp4"> Your browser does not support the video tag. </video>
9. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
- ثان اٌ وسم <audio> و سٌتخدم لإدراج صوت ف الصفحة و تٌم كتابه الكود كالتال :-
النت جٌة :
Poster <video controls poster=" مسار الصورة "> <source src=" مسار الفيديو " type="video/mp4"> Your browser does not support the video tag. </video> Loop <video controls loop> <source src="المسار " type="video/mp4"> Your browser does not support the video tag. </video>
<html>
<head>
<title>Test Add song </title>
</head>
<body>
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
للأسف !! متصفحن لا دٌعم هذا الوسم
</audio>
</body>
</html
10. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
شرح الكود :
خصائص الوسم <audio>
الخاصية
القيم
الشرح
Autopaly Autoplay لتشغ لٌ الممطع الصوت تلمائ اٌ
Controls
Controls
لإظهار شر طٌ التحكم
Loop Loop إعادة تشغ لٌ الملف الصوت بطر مٌة تلمائ ةٌ
muted
Muted
لكتم الصوت
Preload Auto Metadata None
تحم لٌ الملف الصوت عند تحم لٌ الصفحة بغض النظر عن
خاص ةٌ التشغ لٌ التلمائ وعن نمر المستخدم للزر التشغ لٌ
src
url
رابط مسار الملف الصوت وهذه أمثلة على خصائص الوسم :-
<audio controls="controls">
// بدانا بوضع الوسم لاستعداء الملف الصوت ومن ثم لمنا باضه الخاص ةٌ controls لإظهار شر طٌ التحكم با الملف اصوت <source src="song.mp3" type="audio/mp3" />
// لمنا هنا بتضم نٌ الخاص ةٌ src لتحد دٌ مسار الملف ولمنا بتحد دٌ نوع الملف عن طرق الخاص ةٌ type .
ملاحظة :- الملفات الصوت هٌ الذي دٌعمها هذا الوسم ه من الانواع mp3 , wav , ogg
Autopaly <audio controls autoplay> <source src=" مسار ملف الصوتي " type="audio/mpeg"> Your browser does not support the audio element. </audio>
controls <audio controls> <source src=" مسار الملف الصوتي " type="audio/mpeg"> Your browser does not support the audio element. </audio>
11. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
بهذه الأكواد نكون لد انته نٌا من شرح أكواد الملت مٌ دٌ اٌ media الجد دٌ ف اللغة وسوف ننتمل إلى
الأكواد الخاص با النماذج وإرسال الب اٌنات <form> وسنتطرق إلى شرح طرق الإدخال
والخصائص الجد دٌة.
loop <audio controls loop> <source src="src.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
Muted <audio controls muted> <source src="src.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
Preload <audio controls preload="none"> <source src="src.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
12. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
أولاً ما ه أنواع عناصر الإدخال الجد دٌة Input هنان عدة أنواع ظهرت ف ال html5 لعده
عناصر من وسائل الإدخال وه كالتال :-
العنصر
الوصف
Color عنصر إدخال ل مٌه للون مع نٌ
Date
عنصر لإدخال تار خٌ ) D/M/Y )
Datetime عنصر لإدخال الولت والتار خٌ
Datetime-local
عنصر لإدخال الولت والتار خٌ المحل Email عنصر خاص بإدخال البر دٌ الإلكترون Month
عنصر لإدخال التار خٌ بص غٌه ) M/Y )
Number عنصر لإدخال أرلام
Range
عنصر لإدخال ل مٌه محددة مسبما على شكل شر طٌ تمر رٌ
Search عنصر البحث وهو شٌبه ف عمل النوع text
Tel
عنصر لإدخال رلم هاتف
Time عنصر إدخال الولت (M/H)
url
عنصر إدخال الروابط التشاعب ةً
Week عنصر أخر لإدخال التار خٌ بالأساب عٌ
ك فٌ ةٌ إضافة هذه العناصر إلى الصفحة تٌم إدراج هذه العناصر الى الصفحة ضمن وسم <form> وف ما أٌت طرق إضافة كل وسم على حد :-
Color <form action="#"> Select your favorite color: <input type="color" name="favcolor"> </form>
Date <form action="#"> Birthday: <input type="date" name="bday"> </form>
14. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
search <form action="#"> Search Google: <input type="search" name="googlesearch"> </form>
Tel <form action="#"> Telephone: <input type="tel" name="usrtel"> </form>
Time <form action="#"> Select a time: <input type="time" name="usr_time"> </form>
Url <form action="#"> Add your homepage: <input type="url" name="homepage"> </form>
Week <form action="#"> Select a week: <input type="week" name="week_year"> </form>
15. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
وف ما لٌ وسم شامل لجم عٌ عناصر الإدخال الجد دٌة مع النت جٌة :-
<!DOCTYPE html>
<html>
<body>
<form action="#">
Select your favorite color: <input type="color" name="favcolor"><br /> Birthday: <input type="date" name="bday"><br /> Birthday (date and time): <input type="datetime" name="bdaytime"> <br /> Birthday (date and time): <input type="datetime-local" name="bdaytime"> <br/> E-mail: <input type="email" name="email"><br /> Birthday (month and year): <input type="month" name="bdaymonth"><br /> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"><br /> <input type="range" name="points" min="1" max="10"><br /> Search Google: <input type="search" name="googlesearch"><br /> Telephone: <input type="tel" name="usrtel"><br /> Select a time: <input type="time" name="usr_time"><br /> Add your homepage: <input type="url" name="homepage"><br /> Select a week: <input type="week" name="week_year"><br />
<input type="submit">
</form>
</body>
</html>
16. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
أما الأن سنتطرق إلى شرح الوسوم الجد دٌة الخاصة بالوسم <form> وه كما ثلاثة أوسام كما تم
ذكرها سابما :-
الوسم
الوصف
<datalist> وسم انشاء لائمة منسدله لتحد دٌ ب اٌنات محددة مسبما
<keygen>
وسم تول دٌ مفات حٌ ) مفتاح عموم – مفتاح خصوص (ً
<output> وسم تٌم تول دٌ محتواه د نٌامك اٌ وأكثر استخداما هت ف العمل اٌت ألحساب هٌ
و نبداء با الوسم <datalist> والذي شٌبه الوسم <select> وأ ضٌا حٌتوي على عل الخاص ةٌ
<option> كما ف الوسم <select> ح ثٌ سٌتخدم هذا الوسم ف إنشاء لائمة منسدلة تحوي ب اٌنات
معرفة مسبما وهذا مثال للمائمة المنسدلة :-
<!DOCTYPE html>
<html>
<body>
<form action="#" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
17. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
وستكون نت جٌة المائمة المنسدلة كالتال :-
شرح الكود :-
ألان ننتمل للوسم الثان من أوسام النماذج وهو <keygen> وهذا الوسم عٌتبر احد أهم وأفضل
الوسوم ف مجال الأمن ف ال html5 ح ثٌ إن هذا الوسم سٌتخدم ف عمل ةٌ تسج لٌ الدخول
والتحمك من المستخدم نٌ وذلن عبر تول دٌ زوج مفات حٌ رٌسل مع الطلب دون تدخل المستخدم و تٌم
استخدام هذا الوسم با الصورة التال ةٌ :-
<input list="browsers" name="browser">
// بدأنا ف هذه السطر بتعر فٌ وسم من النوع input ولد عرفناها بإسم browser
<datalist id="browsers">
// لمنا هنا با استدعاء الوسم <datalist> تحت المسمى الذي عرفناه مسبما browser
<option value="Internet Explorer">
// ثم أدخلنا الم مٌ المراد إظهارها عن طر كٌ الخاص ةٌ option و مٌكن أن تظمن أكثر من خ اٌر عبر هذه الخاص ةٌ فف المثال السابك
لم نض فٌ إلى خمسة خ اٌرات لكن انت بإمكانن ز اٌدتها أو تمل لٌها حسب احت اٌجن .
<form action=”#” method=”get”>
<keygen name=”security” />
</form>
18. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
وستكون نت جٌة الكود السابك أن مٌوم بعرض لائمة منسدلة تختار أنت منها احد الخ اٌر نٌ وهما طر مٌة
تول دٌ الكود كما هو موضح أدناه :-
و وٌجد لهذا الوسم العد دٌ من الخصائص Attributes وه التال ةٌ وسوف ألوم بطرح مثال لكل
خاص ةٌ لكن دون شرحه :-
الخاصية
القيمة
الوصف
Autofocus Autofocus هذه الخاص ةٌ خاصة بتول دٌ المفات حٌ تلمائ اٌ عند تحم لٌ الصفحة
Challenge
challenge
Disabled Disabled تعط لٌ خاص ةٌ تول دٌ المفات حٌ
Form
Form_id
Keytype Rsa Dsa Ec
نوع المفتاح وطر مٌة تول دٌ ح ثٌ وان كل طر مٌة تتبع لوغر تٌم
مع نٌ
Name
name
أسم المفتاح و لن الحر ةٌ ف اخت اٌر التسم ةٌ
وهذه أمثله لجم عٌ الخصائص Attributes الت تم ذكرها ف الجدول :-
Autofocus <form action="#" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security" autofocus> <input type="submit"> </form>
19. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
بهذا نكون لد انته نٌا من خصائص الوسم <keygen> ح ثٌ تم أعطى مثال لكل خاص ةٌ Attribute
Disabled <form action="#" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security" disabled> <input type="submit"> </form>
Form <form action="#" method="get" id="secureform"> Username: <input type="text" name="usr_name"> <input type="submit"> </form> Encryption: <keygen name="security" form="secureform">
Keygen <form action="#" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security" keytype="rsa"> <input type="submit"> </form>
Name <form action="#" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>
20. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
ألان ننتمل إلى العنصر أو الوسم الثالث من وسوم النماذج وهو وسم <output> و سٌتخدم هذا
الوسم ف عرض مخرجات لأنواع مختلفة منها العمل اٌت الحساب ةٌ عرض الب اٌنات المعادة من إحدى
التوابع لل java script وغر هٌا من عمل اٌت الإخراج و تٌم استخدام هذا الوسم با الطر مٌة التال ةٌ
وستكون نت جٌة الكود السابك كالتال ح ثٌ وانه لو لمنا بز اٌدة ل مٌة الشر طٌ
او عنصر الرلم ستزداد الم مٌة الناتجة
تلمائ اٌ ولهذا العنصر ثلاث خصائص
ه كالتال لكن اغلب المتصفحات لا
تدعهما
الخاصية
القيم
الوصف
For رلم العنصر تستخدم هذه الخاص ةٌ للربط ب نٌ النت جٌة والعنصر إثناء عمل ةٌ الجم ع
Form
رلم النموذج
تعرف هذه الخاص ةٌ النموذج الذي عٌود المخرج إل ه
name name الاسم العام للمخرج
أمثله على هذه الخصائص تم ذكر الخاص ةٌ for و الخاص ةٌ name ف المثال السابك لذلن لن
نذكر المثال مجدداً وسنموم بذكر الخاص ةٌ from
طبعا هذه الخاص ةٌ لا دٌعمها أي متصفح إلى الآن لكن لربما لر بٌا س تٌم دعمها .
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>
Form <form action="#" id="numform" oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" name="a" value="50">100 +<input type="number" id="b" name="b" value="50"> <br><br> <input type="submit"> </form> <output form="numform" name="x" for="a b"></output>
21. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
بهذا نكون لد انته نٌا من أوسمة النماذج <form> وسوف ننتمل الى وسم الرسم ال <canvas>
و عٌتبر من أهم الأوسمة الجد دٌة ف هذا الإصدار ح ثٌ
مٌكنن من رسم أشكال مربعة دائر ةٌ أو حتى كتابات
وذلن با الاعتماد على أكواد الجافا سكربت غالبا وذلن
جٌعلن تستغن عن الإضافات الخارج ةٌ كا الفلاش
ووسم ال <canvas> لا حٌتوي على خصائص
Attributes كث رٌة فهو حٌتوي فمط على خاص تٌ الطول والعرض height و ال width لتحد دٌ المساحة الت س تٌم الرسم ف هٌا والص غٌة العامة لوسم
canvas ه ح ثٌ تٌم فتح الوسم وإضافة أسمة ومن ثم نحدد المساحة الت س تٌم الرسم ف هٌا من خلال تحد دٌ
الطول والعرض height و ال width ومن ثم نغلك الوسم . وسوف نتطرق ألان إلى إعطاء أكثر
من مثال مع شرح كل مثال ولذلن لترس خٌ المعلومة ونبداء بعمل مربع ذو حواف سوداء عن طر كٌ
الكود التال :-
ح ثٌ الخاص ةٌ بوردر border خاصة بإظهار سمن الحواف
وتستط عٌ تغ رٌٌها حسب الم مٌة الت تراها مناس ة ب لن فبإمكان
جعلها 10 أو ألل أو أكثر وتستط عٌ ا ضٌا تغ رٌٌ اللون وذلن عبر
كتابة رمز هذا الكود فبمكانن استبدال #000000 ب أي كود
لون تراه مناسب لن وبإمكان ز اٌد المساحة المخصصة للرسم
وذلن كما ذكرنا سابما عن طر كٌ خاص تٌ الطول والعرض height و width .
<canvas id="myCanvas" width="200" height="100"> </canvas> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
22. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
المثال رلم 2 -:
وف ما لٌ تم كتابة كود الرسم ضمن وسم الجافا
سكربت وس تٌم شرح أكواد الجافا سكربت لك تفهم
ك فٌ تكتب الكود الخاص بن وما ه هذه الأكواد
المكتوبة نبداء با الكود الأول ح ثٌ وانه ف هذا
الكود لمنا بتحد دٌ أسم العنصر الذي س تٌم تطب كٌ
الكود عل هٌ وذلن عن طر كٌ معرف ID
ثم بعد ذلن لمنا باستعداء الكائن getcontext() ولمنا بته ئٌته للرسم 2D
ثم بعد ذلن لمنا باستدعاء الكائن الذي أنشانا باسم ctx ولمنا بإسناد ل مٌ الرسم إل هٌ
فا الم مٌة الأولى fillstyle حددنا ف هٌا اللون وهو الأحمر وتستط عٌ تغ رٌٌ اللون وف حاله عدم ذكر
اللون فان هذه الم مٌة تأخذ اللون الأساس الذي هو الأسود #000000 .
والم مٌة الثان ةٌ حددنا ف هٌا المستط لٌ و أبعادة وتحتسب الأبعاد با الطر مٌة التال ة
( 0.0.width.hieght . )
<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); </script> <canvas id="myCanvas" width="200" height="100”> </canvas>
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75);
23. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
أما ألان سنتعرف إلى ك فٌ ةٌ رسم كل من الخطوط والدوائر والنصوص نبداء برسم الخط :-
ولد لمنا ف الكود السابك بتحد دٌ الإحداث اٌت عبر
ctx.moveTo(0,0); ولمنا تحد دٌ مساحة الخط عن
طر كٌ ctx.lineTo(200,100); . ملاحظة مهمة انه
بدون إضافة ctx.stroke(); لن تٌم رسم أي خط فعل نٌا
عند رسم الخطوط إضافة هذه الخاص ةٌ .
- سنموم ألان برسم الدائرة وف رسم الدائرة نتبع الطر مٌة التال ةٌ arc(x,y,r,start,stop);
مثال :-
وستكون النت جٌة بهذا الشكل
<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> <canvas id="myCanvas" width="200" height="100”> </canvas>
<canvas id="myCanvas"> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script> </canvas>
24. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
أما ألان سننتمل إلى رسم الخطوط وف رسم الخطوط لد نٌا بعض النماط المهم للإشارة إل هٌا : -
- تٌم استخدام الخاص ةٌ font لضبط حجم ونوع الخط
- ف حال استخدام filltext(text,x,y) كٌون النص مملوء من الوسط
- ف حالة استخدام strokeText(text,x,y) كٌون النص مجوف من الوسط
وهذه ه الأمثلة :-
وستكون النت جٌة أن كلمه hello world كما هو
موضح مملئه من الوسط لأننا استخدمنا
filltext(text,x,y)
ولكن ف حالة استخدام strokeText(text,x,y) ستكون النت جٌة
<canvas id="myCanvas"> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50); </script> </canvas>
<canvas id="myCanvas"> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,50); </script> </canvas>
25. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
ألان سوف نموم بشرح بعض أكواد الجافا سكربت الذي تٌم استخدامها و إعطاء مثال لكل خاص ةٌ: -
الخاصية
الوظيفة
مثال
Fillstyle تحد دٌ اللون ctx.fillStyle = "#FF0000”;
Fillrect
رسم شكل مستط لٌ
ctx.fillRect(0,0,150,75); LineTo رسم الخط المستم مٌ ctx.lineTo(200,100);
MoveTo
إزاحة محور الإحداث اٌت
ctx.moveTo(0,0); DrawImage رسم صورة مع نٌة ctx.drawImage(img,10,10);
Creatlineargradient
عمل تدرج لون ctx.createRadialGradient(75,50,5,90,60,100); addColorStop إضافة لون للتدرج اللون ctx.addColorStop(0,"red");
الأمثلة :-
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); // كود رسم الصورة
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById(" أسم الصورة "); ctx.drawImage(img,10,10);
26. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
وف الأخ رٌ سنتحدث عن وسم الرسم SVG ما هو هذا الوسم ؟
SVG هو لغة لوصف أو شرح رسوم 2D ف ال xml . إذا كما كنا نستخدم ف ال canvas الجافا سكربت فإننا ف SVG نستخدم xml لعمل الرسومات لكن من ما مٌ زٌ ال SVG ان
خصائصها أكثر ح وٌ ةٌ وان الصور ف هٌا مٌكن أن تكبر إلى حد كب رٌ دون أي تغ رٌ ف دلتها ولمعرفه
ك فٌ ةٌ استخدام هذا الوسم فلننظر إلى الكود و نت جٌته :-
<!DOCTYPE html> <html> <body> <svg width="300" height="200"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> </body> </html>
27. ف سطور إعداد وشرح عبدالكر مٌ ن ج بٌ HTML5 -
وبهذا نكون لد انته نٌا من شرح معظم المستجدات فً HTML5 .
أمل أن أكون فد أفتكم وتعرفتم أكثر عن HTML5 .
للتواصل مع :
https://www.facebook.com/abdalkareem.najib
أو عبر الإ مٌ لٌ :
Najeeb1h67@gmail.com
تم الشرح بواسطة :
ج ب ب ن ع بدالك ي رم
