HTML5 Book Netparadis PDF

‫ | ﻧت ﭘﺎرادﯾس‬www.netparadis.
com
HTML5 ‫ﮐﺗﺎب آﻣوزش‬
‫ﻧت ﭘﺎرادﯾس‬
www.netparadis.com
www.netparadis.com | ‫ﻧت ﭘﺎرادﯾس‬

‫‪ | www.netparadis.com‬ﻧت ﭘﺎرادﯾس‬
‫فهرست‬
‫مقدمه ‪6 ................................................................................................................‬‬
‫‪7 .............................................................................................................. HTML5‬‬
‫چرا ‪ HTML5‬مهم است؟ ‪7 ..............................................................................................‬‬
‫چه وقت؟‪8 ...........................................................................................................‬‬
‫اعالم نوع داکیومنت در ‪8 ...................................................................................... HTML5‬‬
‫صدا در ‪01 .................................................................................................... HTML5‬‬
‫ویژگی های >‪01 ............................................................................................ <audio‬‬
‫ویدئو در ‪01 .................................................................................................. HTML5‬‬
‫چگونه؟ ‪01 ..........................................................................................................‬‬
‫نکات ‪06 .............................................................................................................‬‬
‫ویژگی های ویدئو ‪06 .................................................................................................‬‬
‫‪ canvas‬چیست؟ ‪08 ...................................................................................................‬‬
‫آموزش ‪01 ............................................................................................. Rectangle‬‬
‫چطور سایه بیندازیم ‪11 .................................................................................................‬‬
‫چگونه یک مسیر بکشیم ‪12 ............................................................................................‬‬
‫بوم نقاشی‪ :‬تصویر ‪12 ..................................................................................................‬‬
‫بوم نقاشی‪ :‬متن ‪17 ....................................................................................................‬‬
‫آموزش ‪11 ................................................................................................ Web form‬‬
‫ویژگی های ورودی جدید ‪11 ..........................................................................................‬‬
‫انواع ورودی های جدید ‪21 ...........................................................................................‬‬
‫جستجو ‪21 ........................................................................................................‬‬
‫اتربیوت ‪21 ............................................................................................. Placeholder‬‬
‫آموزش ‪21 ................................................................................................ Autofocus‬‬
‫آموزش ‪21 ........................................................................................... Required field‬‬
‫آموزش اتریبیوت ‪22 ........................................................................................ DataList‬‬
‫آموزش ‪26 .................................................................................................... search‬‬
‫آموزش ایمیل‪ ،‬شماره تلفن و وب سایت ‪28 .............................................................................‬‬
‫‪4‬‬
‫ﻧت ﭘﺎرادﯾس | ‪www.netparadis.com‬‬

‫ | ﻧت ﭘﺎرادﯾس‬www.netparadis.com
11 ..................................................................................... Input Type : Range ‫آموزش‬
12 ................................................................................... Input Type : Number ‫آموزش‬
16 ................................................................................................... ‫ تاریخ‬:‫نوع ورودی‬
18 ................................................................................ (<input type=”date” />) ‫تاریخ‬
18 .............................................................................. (<input type=”week” />) ‫هفته‬
11 ................................................................................ (<input type=”time” />) ‫زمان‬
21 ............................................................. (<input type=”date and time” />) ‫تاریخ و زمان‬
21 ...................................................... (<input type=”datetime-local” />) ‫زمان و تاریخ محلی‬
21 ...................................................................................................... Color ‫آموزش‬
21 ................................................................................................. ‫به سمت وب معنایی‬
21 ....................................................................... ‫من رویایی برای وب دارم که دو بخش است‬
22 .................................................................................. ‫معنا شناسی جدید در سطح متن‬
22 ............................................................................................. ‫عناصر انسداد جدید‬
26 .......................................................................................... Semantic mark ‫آموزش‬
26 ........................................................................................... Semantic time ‫آموزش‬
28 ......................................................................................... Semantic meter ‫آموزش‬
61 ..................................................................................... Semantic progress ‫آموزش‬
61 ....................................................................................... Semantic section ‫آموزش‬
62 ............................................................................................... ‫تقسیم بندی محتوا‬
61 ....................................................................................... Semantic header ‫آموزش‬
66 ........................................................................................ Semantic footer ‫آموزش‬
61 ........................................................................................... Semantic nav ‫آموزش‬
71 ........................................................................................ Semantic article ‫آموزش‬
71 ......................................................................................... Semantic aside ‫آموزش‬
72 ................................................................................................ W3C ‫ویژگی های‬
71 ..................................................................................... ‫عناصری که نباید استفاده کنید‬
72 ................................................................................. ‫ویژگی هایی که نباید استفاده کنید‬

‫‪HTML5‬‬
‫من معتقدم ‪ HTML5‬دستاورد بزرگی خواهد بود (بسیاری از مردم هم چنین اعتقادی دارند‪ .).‬این برنامه‬
‫ممکن است روش لباس پوشیدن و غذا خوردن ما را تغییر ندهد‪ ،‬اما مطمئنا روش توسعه ی برنامه های وب و‬
‫طراحی صفحات وب را در ‪ 01‬سال آینده تغییر خواهد داد‪ .‬به هرحال این صفحه آموزش ‪ HTML‬نمی باشد‪.‬‬
‫‪ HTML5‬چیز کامال جدیدی نمی باشد‪ .‬بسیاری از ویژگی های ‪ HTML5‬از ‪ HTML4‬یا ‪ HTML1.0‬گرفته شده‬
‫اند‪ .‬با زمان و انرژی محدودم می توانم فقط آنچه را در ‪ HTML5‬جدید است و تمرینات قدیمی که دیگر مورد‬
‫استفاده نیستند را پوشش دهم‪.‬‬
‫این یک سایت ‪ HTML5‬می باشد‪ .‬هنگامی که در حال کشف و یادگیری ‪ HTML5‬هستم‪ ،‬امیدوارم بتوانم آنچه‬
‫را که یاد گرفته ام با شما به اشتراک بگذارم‪.‬‬
‫" دو نوع انگیزه وجود دارد که با دونوع هدف منطبق می شود‪ .‬انگیزه های سلطه گرایی هستند که هدف آنها‬
‫رسیدن به متعلقات شخصی می باشد که نمی توان به اشتراک گذاشت و در مرکز انگیزه ی مادی قرار می‬
‫گیرند‪ .‬انگیزه های خالقانه نیز وجود دارند که هدف آنها آوردن اموالی است که در آنها هیچ گونه تملک و یا‬
‫شخصی بودنی وجود ندارد‪.‬‬
‫بهترین زنگی‪ ،‬آن زندگی میباشد که انگیزه های خالقانه بیشترین نقش را داشته و انگیزه های مالی کمترین را‪".‬‬
‫برتراند راسل (‪)0171 – 0871‬‬
‫با توجه به این نوشته ‪ HTML5‬یک نسخه ی در حال کار می باشد‪ .‬به عبارت دیگر ‪ HTML5‬هنوز یک کار در‬
‫حال پیشروی می باشد‪ .‬ویژگی های آن در ‪ W3C‬منتشر شده و روز به روز تغییر می کند‪.‬‬
‫چرا ‪ HTML5‬مهم است؟‬
‫احتماال تاکنون در مورد ‪ HTML5‬شنیده اید‪ ،‬فکر می کنم محبوب ترین برنامه ای که فیلم را بدون ‪Adobe‬‬
‫‪ Flash‬اجرا می کند‪ ،‬باید از آقای استیو جابز برای تبدیل آن به یک فن آوری معروف تشکر کرد‪.‬‬
‫‪7‬‬

‫عالوه بر این ممکن است در مورد ایجاد انیمیشن بدون پالگین‪ ،‬کنترل ورودی غنی مانند دیت پیکر‪ ،‬کالرپیکر‪،‬‬
‫اسالیدر بدون جاوااسکریپت و در انتها ذخیره ی داده ی برون خطی (آفالین) نیز شنیده باشید‪ .‬به هرحال این‬
‫هم فقط بخشی از ‪ HTML5‬می باشد‪.‬‬
‫چه وقت؟‬
‫‪ WC3‬در فوریه ی ‪ 1100‬اعالم کرد که جوالی ‪ 1101‬تاریخی است که ‪ HTML5‬پیشنهاد رسمی برای استاندارد‬
‫وب می شود‪.‬‬
‫زمان را فراموش کنید‪:‬‬
‫واقعیت این است که جدول زمانی پیشنهادی از طرف ‪ WHATWG‬واقعا اتفاق نیفتاد‪ .‬توسعه ی وب در دستان‬
‫دو گروه از مردم واقع شده است‪.‬‬
‫اولین گروه کمپانی های مرورگر معروفی مانند ‪ ،Mozilla‬مایکروسافت‪ ،‬اپل‪ ،‬گوگل و اپرا می باشند‪ .‬گروه دوم‬
‫نیز طراحان و توسعه دهندگان وب در این زمینه می باشند‪ .‬ضعف‪ HTML1.1‬و ‪ HTML 2‬خیلی ساده است‪،‬‬
‫کمپانی های مرورگر فکر می کردند که ایده ی احمقانه است‪ ،‬بنابراین درهای خود را به روی آن بستند‪.‬‬
‫امروزه بسیاری از مرورگرها به شدت تمایل دارند که از ‪ HTML5‬پشتیبانی کنند‪ .‬حتی اینترنت اکسپلورر که‬
‫درآهستگی تطبیق استانداردهای جدید شهرت دارد‪ ،‬در ‪ IE9‬خود از‪ HTML5‬پشتیبانی می کند‪ ،‬و این بدین‬
‫معناست که ‪ HTML5‬قرار است بزرگ و حقیقی باشد‪.‬‬
‫از آنجایی که مایکروسافت اعالم کرده که هیچ طرحی برای آزاد کردن ‪ IE9‬برای کاربرهای ویندوز ‪ XP‬ندارد‪ ،‬اگر‬
‫تمایل دارید از ‪ IE9‬استفاده کنید‪ ،‬باید از ویندوز ‪ vista sp2‬یا ‪ 7‬استفاده کنید‪.‬‬
‫هیچ دلیلی وجود ندارد که طراحان تحت تاثیر ‪ HTML5‬قرار نگیرند‪ ،‬زیرا که زندگی را از همیشه برای ما آسانتر‬
‫کرده است‪.‬‬
‫اعالم نوع داکیومنت در ‪HTML5‬‬
‫اعالم نوع داکیومنت در ‪ HTML5‬هم ساده و هم جالب می باشد‪ .‬این کار به سادگی زیر میباشد‪:‬‬
‫‪8‬‬

<!DOCTYPE html>
:‫ که با آن آشنا هستیم‬HTML4 ‫ و‬HTML1 ‫ در‬doctype ‫بر خالف‬
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "HTTP>

/www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "HTTP>

/www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "HTTP>

/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP>

/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
‫ این اولین دلیلی است که نشان می دهد کار طراحان وب با‬.‫برخی از آنها حتی در یک خط نوشته نمی شوند‬
:‫ می تواند به سادگی زیر باشد‬HTML5 ‫ یک صفحه ی‬.‫ راحت تر شده‬HTML5
<!DOCTYPE html>
<html>
<head>
<title>HTML5 is rocks!</title>
</head>
<body>
<h1>HTML5 Rocks!</h1>
</body>
</html>
‫ و باز‬،‫ را مشخص می کنیم‬CSS ‫ جاوااسکریپت و مسیر فایل‬،‫ نوع محتوا‬،‫اغلب اوقات در تیتر صفحات وب خو‬
.‫ ساده تر شده است‬HTML5 ‫هم زندگی با‬
‫ می توان فقط از دستور‬HTML5 ‫در‬ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">‫به جای‬

:‫زیر استفاده کرد‬
<meta charset="UTF-8">
‫ در عمل فقط اسکریپت بخش کاربر‬،‫"دیگر الزم نیستند‬type=text/javascript" ‫ اطالعت حشو‬HTML5 ‫در‬
.‫روشن می باشد‬
<script src="jquery.js"></script>
9

‫مشابها ‪ CSS‬هم مانند جاوا اسکریپت‪ ،‬پردازش شهروند درجه ی یک را دریافت می کند‪ .‬شما از هم اکنون می‬
‫توانید "‪ "type=text/css‬را فراموش کنید‪.‬‬
‫>"‪<link rel="stylesheet" href="html-my.css‬‬
‫اگر روت >‪ <html‬شما این شکلی است‪:‬‬
‫>"‪<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en‬‬
‫می توانید آن را به شکل زیر ساده کنید‪:‬‬
‫>" "‪<html lang="en‬‬
‫صدا در ‪HTML5‬‬
‫اجازه بدهید در شروع یک سرگرمی داشته باشیم‪ .‬قرار است در مورد مرورگری صحبت کنیم که فایل صدا را در‬
‫حالت طبیعی خود پشتیبانی می کند‪ ،‬درست همانطور که برچسب >‪ <img‬از ‪ 0111‬پشتیبانی می شود‪HTML .‬‬
‫‪ 5‬قرار است به صدای پالگین )‪ (plug-in‬مانند مدیاپلیر‪ ،‬سیلورالیت‪ ،‬اپل کویک تایم‪ ،‬و ‪ Adobe Flash‬بد نام‬
‫خاتمه دهد‪.‬‬
‫اگر در باال کنترل اجرا کننده ی صدا نمی بینید‪ ،‬احتماال مرورگر شما برچسب صدا را پشتیبانی نمی کند‪.‬‬
‫در باال یک گالری از پخش کننده های صدا را‪ ،‬توسط مرورگرهای مهم می بینید‪ .‬همانطور که می بینید اندازه‬
‫کنترل پخش کننده ها با یکدیگر متفاوت هستند‪ .‬پخش کننده ی ‪ IE9‬در مقایسه با پخش کننده ی ‪safari‬‬
‫بسیار بزرگ می باشد‪ .‬این مسئله برای طراح وب می تواند یک مشکل بزرگ باشد‪.‬‬
‫اگر برای ویندوز از ‪ safari‬استفاده می کنید‪ ،‬اما بدون ‪ ،Quick Time‬برنامه ی ‪ Safari‬شما قرار نیست از‬
‫برچسب مدیا (هم در حالت صوتی و هم در حالت تصویری) پشتیبانی کند‪ .‬تصور می کنم که برنامه ی ‪Safari‬‬
‫برای اجرای فایل های مدیا‪ ،‬به کدک ‪ Quick Time‬اتکا دارد‪.‬‬
‫چگونه؟‬
‫برای اینکه صفحه ی وب شما موسیقی اجرا کند‪ ،‬کد ‪ html‬شما می تواند به سادگی زیر باشد‪:‬‬
‫>‪<audio src="vincent.mp3" controls></audio‬‬
‫‪10‬‬

‫متاسفانه محبوب ترین فرمت صدا )‪ MPEG3 (mp3‬یک استاندارد باز نیست‪ ،‬بلکه یک اختالل عمومی است‪،‬‬
‫و این بدین معنا که مرورگرها برای رمزگشایی آن باید مقداری پول پرداخت کنند و این ممکن است از لحاظ‬
‫اقتصادی برای شرکت ها و سازمان های کوچکتر عملی نباشد‪ .‬همانطور که در جدول زیر مشاهده می کنند تنها‬
‫سران بزرگ ثروت کافی برای رمزگشایی ‪ MP3‬را دارند‪ Opera .‬و ‪ firefox‬تنها فرمت )‪ vorbis (ogg‬را‬
‫پشتیبانی می کنند که یک استاندارد باز می باشد‪.‬‬
‫از طرف دیگر ‪ Vorbis‬توسط ‪ Safari‬و ‪ IE9‬پشتیبانی نمی شود‪ ،‬در حالیکه همیشه داشتن ‪ ogg‬و ‪ MP3‬در کنار‬
‫هم خوب است‪.‬‬
‫‪Browser‬‬ ‫‪mp3. wav. ogg.‬‬
‫‪Mozzila Firefox 3.6‬‬ ‫✓‬ ‫✓‬
‫‪Opera 10.63‬‬ ‫✓‬ ‫✓‬
‫‪Google Chrome 8.0‬‬ ‫✓‬ ‫✓‬ ‫✓‬
‫‪)Apple Safari 5.0.3 (with QuickTime‬‬ ‫✓‬ ‫✓‬
‫‪Microsoft IE 9 Beta‬‬ ‫✓‬ ‫✓‬
‫با استفاده از‬
‫"‪and Audio() Support Tester‬‬
‫‪href="http://www.happyworm.com/jquery/jplayer/HTML5.Audio.Support/">HTML5‬‬
‫‪<audio> and Audio() Support Tester‬‬
‫امتحان کنید که مرورگر شما تا چه حد صدا را پشتیبانی می کند‪.‬‬
‫آنچه که می توانید انجام دهید در زیر ارائه شده است‪:‬‬
‫‪11‬‬

‫>‪<audio controls‬‬
‫>‪<source src="vincent.mp3" type="audio/mpeg" /‬‬
‫>‪<source src="vincent.ogg" type="audio/ogg" /‬‬
‫>‪</audio‬‬
‫ارائه کردن یا نکردن نوع )"‪ MIME (type="audio/mpeg‬برای مرورگر انتخابی می باشد‪ .‬مدرنترین‬
‫مرورگرها به اندازه ی کافی هوشمند هستند تا نوع محتوا را از طریق خود آن مشخص کنند‪ .‬به هرحال کمک‬
‫کننده بودن برای مرور گر همیشه خوب است‪ ،‬چرا که باعث می شود مرورگر شما سریعتر و بهتر کار کند‪.‬‬
‫ویژگی های >‪<audio‬‬
‫ویژگی‬ ‫مقدار‬ ‫‪Description‬‬
‫‪controls‬‬ ‫‪*Boolean attribute‬‬ ‫شما برای ظاهر شدن اجرا کننده ی داخلی به این ویژگی احتیاج‬
‫دارید‪ .‬در غیر اینصورت باید از ‪ DOM‬برای کنترل عنصر صدا‬
‫برای اجرای موسیقی خود هستید‪.‬‬
‫‪autoplay‬‬ ‫‪*Boolean attribute‬‬ ‫اگر این ویژگی وجود داشته باشد‪ ،‬مرورگر فقط آواز یا صحبتتان‬
‫را بدون پرسیدن اجازه از ویزیتور شما پخش خواهد کرد‪.‬‬
‫‪loop‬‬ ‫‪*Boolean attribute‬‬ ‫موسیقی خود را تکرار کنید‪.‬‬
‫‪src‬‬ ‫‪url‬‬ ‫‪ URL‬فایل صدای شما‬
‫‪preload‬‬ ‫‪none | metadata | auto‬‬ ‫این ویژگی قبال با نام ‪ autobuffer‬معروف بود و یک ویژگی‬
‫‪ Boolean‬مانند کنترل ها بود‪.‬‬
‫متادیتا‪ -‬فقط متادیتای مربوط به فایل صدا را بافر می کند‪.‬‬
‫‪ -Auto‬فایل صدا را قبل از اجرا بافر می کند‪.‬‬
‫‪12‬‬

‫ویژگی ‪ Boolean‬ویژگی می باشد که یا در برچسب نمایش داده می شود یا نه‪ .‬ویژگی ‪ Boolean‬فقط نام خود‬
‫را دارد و دارای مقدار نیست‪ .‬شما می توانید آن را از این طریق نیز به کار ببرید‪ ،‬هر مقداری که شما به ویژگی‬
‫‪ Boolean‬اختصاص دادید‪ ،‬فقط یک معنا دارد – ‪.TRUE‬‬
‫>‪<audio src="vincent.mp3" controls="true" loop="true" autoplay="true"></audio‬‬
‫این ترکیب کامال غیرضروری است‬
‫>‪<audio src="vincent.mp3" controls loop autoplay></audio‬‬
‫و این آن چیزی است که شما الزم دارید‪.‬‬
‫‪ HTML 5‬در واقع تکاملی از وب می باشد‪ ،‬نه انقالبی که فقط گذشته را نابود می کند‪ .‬به هرحال اجازه دهید‬
‫کمی به جلوتر برویم‪.‬‬
‫برای پشتیبانی مرورگری که اصال نمی داند >‪ <audio‬چیست‪ ،‬از قبیل ‪ IE8‬وپایین تر‪ ،‬با استفاده از برچسب‬
‫>‪ <object‬باید اجازه دهیم در همان روزهای قدیمی خود باقی بمانند‪.‬‬
‫>‪<audio controls‬‬
‫>‪<source src="vincent.mp3" type="audio/mpeg" /‬‬
‫>‪<source src="vincent.ogg" type="audio/ogg" /‬‬
‫>"‪<object type="application/x-shockwave-flash" data="media/OriginalMusicPlayer.swf" width="225" height="86‬‬
‫>‪<param name="movie" value="media/OriginalMusicPlayer.swf" /‬‬
‫>‪<param name="FlashVars" value="mediaPath=vincent.mp3" /‬‬
‫>‪</object‬‬
‫>‪</audio‬‬
‫من در مثال باال از یک اجرا کننده ی ‪ flash mp3‬از ‪ PremiumBeat.com‬استفاده می کنم‪.‬‬
‫اگر مرورگر شما از ‪ HTML5‬پشتیبانی نمی کند اما شما فلش پالگین را دارید‪ ،‬احتماال چیزی را از دست نداده‬
‫اید‪.‬‬
‫اگر ‪ HTML5‬نه مرورگر و نه فلش را پشتیبانی می کند‪ ،‬ممکن است به کاربر اجازه بدهید فایل صدا را دانلود‬
‫کند و در گرفتن یک اجرا کننده برای اجرای آن‪ ،‬برای آن ها آرزوی خوش شانسی کنید‪.‬‬
‫‪13‬‬

<audio controls>
<source src="vincent.mp3" type="audio/mpeg" />
<source src="vincent.ogg" type="audio/ogg" />
<object type="application/x-shockwave-flash" data="media/OriginalMusicPlayer.swf" width="225" height="86">
<param name="movie" value="media/OriginalMusicPlayer.swf" />
<param name="FlashVars" value="mediaPath=vincent.mp3" />
</object>
<a href="vincent.mp3">Download this lovely song and wish you all the best!</a>
</audio>
‫ با استفاده از خالقیت خود می توانید برنامه ی خود را‬،‫به جای استفاده از مرورگر اجرای صدای استاندارد‬
.‫بنویسید‬
<audio id="player" src="vincent.mp3"></audio>

<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').volume += 0.1">Vol+ </button>
<button onclick="document.getElementById('player').volume -= 0.1">Vol- </button>
</div>
HTML5 ‫ویدئو در‬
‫ به‬.‫ تالش برای انجام چنین کاری به نیمه ی قرن بیستم برمی گردد‬،‫جریان ویدئو در اینترنت چیز تازه ای نیست‬
‫ در‬Youtube ‫ تا اینکه‬،‫ هیچ موفقیتی حاصل نشد‬،CPU ‫خاطر پایین بودن پهنای باند شبکه ها و قدرت پایین‬
.‫ آغاز به کار کرد‬1112 ‫سال‬
‫ عرض و پوستر‬،‫ طول‬.‫ قرار دهیم‬،<img> ‫ مانند‬،‫ می توانیم ویدئو را مانند یک عنصر داخلی‬،HTML5 ‫اکنون با‬
‫ طول و عرض سایز صفحه را مشخص می کنند و پوستر تنها یک فایل تصویر ثابت می باشد که قبل‬،‫وجود دارند‬
.‫از اجرای فیلم روی صفحه قرار گرفته است‬
‫چگونه؟‬
.‫ می تواند به سادگی خط زیر باشد‬،‫کد اجرای فیلم از صفحه ی وب شما‬
<video src="rain.mp4" controls width="480" height="360"></video>
14

‫در واقع زندگی آنطوری نیست که ما فکر می کردیم باید باشد‪ ،‬خط ساده ی کد باال تنها در ‪google‬‬
‫‪ chrome‬و ‪ apple safari‬کار می کند و حتی برای اجرای فیلم در‪ apple safari‬باید مطمئن شوید که ‪quick‬‬
‫‪ time‬در کامپیوتر شما نصب شده است‪.‬‬
‫مشابه گرفتاری صوتی‪ ،‬یک فرمت جهانی برای ویدئو نداریم که همه ی مرورگرهای وب از آن پشتیبانی کنند‪،‬‬
‫حداقل در زمان نگارش آن (‪ 02‬دسامبر ‪.)1101‬‬
‫در اینجا دوباره بازی پول مطرح می شود‪ H.264 .‬یک مشکل همگانی است‪ ،‬فایرفاکس و اپرا خرید امتیاز آزاد یک‬
‫کدک را پذیرفتند که ‪ Theora‬و ‪ WebM‬می باشد (کدک‪.)VP8‬‬
‫‪Browser‬‬ ‫‪H.264+‬‬ ‫‪WebM‬‬ ‫‪Theora‬‬
‫‪AAC+‬‬ ‫‪+Vorbis‬‬
‫‪MP4‬‬ ‫‪+Ogg‬‬
‫‪Mozzila Firefox 3.6‬‬ ‫✓‬ ‫✓‬
‫‪Opera 10.63‬‬ ‫✓‬ ‫✓‬
‫‪Google Chrome 8.0‬‬ ‫✓‬ ‫✓‬ ‫✓‬
‫)‪Apple Safari 5.0.3 (with QuickTime‬‬ ‫✓‬
‫‪Microsoft IE 9 Beta‬‬ ‫✓‬ ‫✓‬
‫گوگل در ژانویه ی ‪ 1100‬اعالم کرد که در ورژن آینده ی گوگل کروم از ‪ H.264‬پشتیبانی نمی کند‪ .‬به طور خالصه‬
‫کد تک خطی ساده‪ ،‬همانطور که در باال توضیح دادم‪ ،‬عملی نمی باشد‪ .‬شما حداقل باید دو منبع برای یک ویدئو‬
‫تامین کنید‪.‬‬
‫>"‪<video controls width="480" height="288‬‬

‫>‪<source src="media/html5iscool.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /‬‬
‫>‪<source src="media/html5iscool.ogv" type='video/ogg; codecs="theora, vorbis"' /‬‬
‫‪15‬‬

‫>‪<source src="media/html5iscool.webm" type='video/webm; codecs="vp8, vorbis"' /‬‬

‫>‪</video‬‬
‫نکات‬
‫برای اینکه فایل ویدئوی خود را در ‪ H.264‬رمزگشایی کنید‪ ،‬ممکن است تمایل داشته باشید ‪ HandBrake‬را‬
‫امتحان کنید‪ ،‬که یک ‪ GPL‬مناسب ویک ابزار منبع باز می باشد‪ .‬اگرمی خواهید تنها یک ویدئو را رمزگشایی کنید‬
‫و تمایلی به نصب برنامه ای دیگر روی ‪ OS‬تقریبا بسته ی خود ندارید‪ ،‬می توانید فیلم خود را‬
‫روی ‪ Youtube‬آپلود کنید‪ .‬سپس ‪ Youtube‬برنامه ی شما را به فرمت ‪ H.264‬آپلود کرده و شما می توانید آن‬
‫را از ‪ Youtube‬دانلود کنید‪.‬‬
‫همانطور که برای فرمت های ‪ WEBM‬و ‪ Theora‬ممکن است ‪ Firefogg‬را (یک فایرفاکس پالگین است که‬
‫حداقل دانلود را الزم دارد‪ ).‬امتحان کنید‪.‬‬
‫ویژگی های ویدئو‬
‫‪Attribute‬‬ ‫‪Value‬‬ ‫‪Description‬‬
‫‪controls‬‬ ‫اگر می خواهید کنترل اجرا کننده ی مرورگر داخلی در اطراف ویژگی ‪*Boolean‬‬
‫باشد‪ ،‬کنترل ها را مشخص کنید‪.‬‬
‫‪autoplay‬‬ ‫اگر این ویژگی وجود داشته باشد‪ ،‬مرورگر فیلم شما را بدون ویژگی ‪*Boolean‬‬
‫پرسیدن اجازه از ویزیتور‪ ،‬اجرا می کند‪.‬‬
‫‪loop‬‬ ‫ویژگی ‪*Boolean‬‬ ‫فیلم شما را تکرار می کند‪.‬‬
‫‪src‬‬ ‫‪url‬‬ ‫‪url‬فایل تصویری شما‬
‫‪16‬‬

‫این ویژگی پیش ازاین با عنوان ‪ autobuffer‬شناخته می شد و ‪preload none | metadata | auto‬‬
‫مانند کنترل ها یک ویژگی ‪ Boolean‬بود‪.‬‬
‫‪ – None‬فایل ویدئو را به طور خودکار بافر نکن‪.‬‬
‫‪ – Metadata‬فقط متادیتای فیلم را بافر کن‪.‬‬
‫‪ – Auto‬فایل فیلم را قبل از اجرا بافر کن‪.‬‬
‫‪width‬‬ ‫عرض به پیکسل‬ ‫عرض پخش کننده ی فیلم‪.‬‬
‫‪height‬‬ ‫طول به پیکسل‬ ‫طول پخش کننده ی فیلم‪.‬‬
‫‪poster‬‬ ‫اگر وجود داشته باشد‪ ،‬تا زمان دانلود شدن اولین فریم فیلم ‪ url‬یک فایل تصویر‬
‫تصویر پوستر را نشان می دهد‪.‬‬
‫مرورگرهایی که در مورد ‪ HTML5‬دارای معلومات کمتری هستند چطور؟‬
‫اگر فکر می کنید که اجرای ویدئو برای سه دفعه سخت است‪ ،‬به مدت کمی طوالنی تر نفس خود را نگه دارید‪،‬‬
‫زیرا قرار است برای تامین کاربرهای بیشتر که از مرورگرهای قدیمی تری مانند ‪ internet explorer 8‬و یا پایین‬
‫تراستفاده می کنند‪ ،‬بیشتر اذیت شوید‪.‬‬
‫مایکروسافت ‪ internet explorer 9 Beta‬را در نوامبر ‪ 1101‬آزاد کرد که ‪ HTML5‬را نیز پشتیبانی می کند‪ .‬اما‬
‫برچسب >‪ <video‬به عنوان نگارش هنوز پشتیبانی می شود‪ .‬به هرحال شما مجبورید برای قرار دادن یک فلش‬
‫پلیر در >‪ <object‬به جلوتر بروید زیرا بیشتر کاربرها فلش پالگین را نصب کرده اند‪ .‬من معتقدم که‬
‫مایکروسافت در نهایت >‪ <video‬را پشتیبانی می کند‪ ،‬چرا که همیشه برای اکثر کاربرها رسیدن به آخرین ورژن‬
‫مرورگر زمان بر است‪.‬‬
‫>"‪<video controls width="320" height="240‬‬

‫>‪<source src="media/html5iscool.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /‬‬
‫>‪<source src="media/html5iscool.ogv" type='video/ogg; codecs="theora, vorbis"' /‬‬
‫‪17‬‬

‫>‪<source src="media/html5iscool.webm" type='video/webm; codecs="vp8, vorbis"' /‬‬

‫>"‪<object width="320" height="240" type="application/x-shockwave-flash" data="media/flowplayer-3.2.5.swf‬‬
‫>‪<param name="movie" value="media/flowplayer-3.2.5.swf" /‬‬
‫>‪<param name="allowfullscreen" value="false" /‬‬
‫"‪<param name="flashvars‬‬
‫>‪value='config={"clip": {"url": "html5iscool.mp4", "autoPlay":false, "autoBuffering":true}}' /‬‬
‫>‪</object‬‬
‫>‪</video‬‬
‫‪ canvas‬چیست؟‬
‫یکی از داغ ترین موضوعات ‪ HTML5‬موضوع ‪ canvas‬می باشد‪ ،‬اما دقیقا ‪ canvas‬چیست؟‬
‫‪ canvas‬یک پارچه ی ساده بافته شده ی سنگین می باشد که برای ساختن قایق‪ ،‬چادر‪ ،‬کوله پشتی‪ ،‬خیمه و‬
‫دیگر ابزاری که استحکام الزم دارند‪ ،‬استفاده می شود‪ .‬و همچنین توسط نقاشان به عنوان سطح نقاشی که روی‬
‫چارچوب چوبی نصب شده باشد‪ ،‬استفاده می شود‪.‬‬
‫شاید این جوابی که شما به دنبال آن بودید‪ ،‬نباشد‪.‬به هرحال ‪ canvas‬در ‪ HTML5‬از کاربرد آن توسط هنرمندان‬
‫تقلید می کند و بوم نقاشی نامیده می شود‪.‬‬
‫بوم نقاشی یک فضای خالی بدون رنگ ( حتی بدون سفید) است‪ ،‬که قرار است با مداد و قلم موی جاوااسکریپت‬
‫تبدیل به یک کار هنری شود‪.‬‬
‫البته که وجود بوم نقاشی تنها برای یک تصویر ثابت نیست‪ .‬تصویر ثابت می تواند به سادگی به وسیله ی عنصر‬
‫قدیمی ‪ img‬مورد بررسی قرار بگیرد‪ .‬با جاوااسکریپت به عنوان قلم موی خود‪ ،‬می توانید یک انیمیشن شاد و یا‬
‫حتی بازیهای تکرار شونده ایجاد کنید‪.‬‬
‫اگر قبال انیمیشن های درخشانی ایجاد کرده اید و امید دارید که یک ورژن ‪ HTML5‬ایجاد کنید‪ ،‬ابزاری وجود‬
‫دارند که در انجام آن به شما کمک می کنند‪ .‬یکی از آنها ‪ Flash to HTML5‬می باشد‪.‬‬
‫‪ HTML5‬مقوله ی خیلی بزرگی است‪ ،‬آنقدر بزرگ که می توانید در مورد آن یک کتاب بنویسید‪ .‬هدف من در این‬
‫آموزش تحت پوشش قرار دادن جزئیات مربوط به بوم نقاشی نیست‪ ،‬بلکه تنها معرفی مختصری از آن است‪ .‬به‬
‫یاد داشته باشد که این تنها شروع آن است‪.‬‬
‫‪18‬‬

‫برای ایجاد بوم نقاشی‪ ،‬کد ساده ی زیر الزم است‪.‬‬
‫>‪<canvas width="200" height="200"></canvas‬‬
‫به هرحال به یاد داشته باشید که مرز یک بوم نقاشی یک آبجکت ناپیداست‪ .‬این برنامه فضایی را می گیرد اما‬
‫شما آن را نمی بینید‪ .‬اجازه دهید یک سبک مرزی اضافه کرده و از ‪ ID‬برای مرجع استفاده کنیم‪ .‬هدف از ‪ ID‬این‬
‫است که با استفاده از ‪ (document object model) DOM‬آن را قابل دسترس کنیم‪ .‬بدون مرجع ‪ ،ID‬جاوا‬
‫اسکریپت‪ ،‬در این مورد قلم موی شما‪ ،‬هیچ ایده ای برای نقاشی روی بوم ندارد‪.‬‬
‫‪<canvas id="Canvas1" width="200" height="200" style="border:solid 1px‬‬
‫>‪#000000"></canvas‬‬
‫اگر در قسمت باال به جای یک تیره و مربع‪ ،‬یک جمجمه با دو استخوان ضربدری می بینیدبه این معناست که مرورگر‬
‫شما بوم نقاشی را پشتیبانی نمی کند‪ .‬ممکن است تمایل داشته باشید مرورگری دانلود کنید که با بوم نقاشی‬
‫کار کند‪ ،‬همانطور که در زیر می بینید‪.‬‬
‫‪Browsers‬‬ ‫‪Basic Canvas Support‬‬
‫)‪IE 7 ✓ (requires ExplorerCanvas‬‬
‫‪IE 9 Beta‬‬ ‫✓‬
‫‪Firefox 3.0‬‬ ‫✓‬
‫‪Safari 3.0‬‬ ‫✓‬
‫‪Chrome 3.0‬‬ ‫✓‬
‫‪Opera 10‬‬ ‫✓‬
‫آموزش ‪Rectangle‬‬
‫قبل از فکر کردن در مورد ایجاد بازی های کنشی ‪ ،HTML5‬اجازه دهید با اساس آن شروع کنیم‪.‬‬
‫‪19‬‬

‫ابتدا روی دکمه ی قرمز کلیک کنید‪ .‬اگر دکمه ی قرمز در بوم نقاشی نمی بینید‪ ،‬احتماال تمایل داشته باشید‬
‫مرورگر درستی برای ادامه بگیرید‪.‬‬
‫>‪<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas‬‬

‫>‪<button onclick="draw_square();return true;">Red Square</button‬‬
‫>‪<script‬‬
‫{ )(‪function draw_square‬‬
‫;)"‪var c1 = document.getElementById("c1‬‬
‫;)"‪var c1_context = c1.getContext("2d‬‬
‫;"‪c1_context.fillStyle = "#f00‬‬
‫;)‪c1_context.fillRect(50, 50, 100, 100‬‬
‫}‬
‫>‪</script‬‬
‫برای کشیدن هرچیزی در بوم نقاشی‪ ،‬چیزی بین برچسب ‪ opening‬و برچسب ‪ closing‬از >‪ <canvas‬قرار‬
‫ندهید‪ ،‬مرورگرهایی که بوم نقاشی را پشتیبانی می کنند‪ ،‬آن را نادیده خواهند گرفت‪ .‬شما می توانید فقط از‬
‫جاوااسکریپت برای انجام نقاشی خود استفاده کنید‪.‬‬
‫قانون شماره یک‪ ،‬عنصر بوم نقاشی شما باید دارای یک ‪ ID‬باشد‪ ،‬بنابراین می توانیم از جاوااسکریپت برای‬
‫قراردادن آن استفاده کنیم‪ .‬قانون شماره دو‪ ،‬هر بوم نقاشی دارای یک کانتکست می باشد‪ .‬در واقع کانتکست‬
‫بوم نقاشی آن چیزی است که قرار است روی آن نقاشی بکشیم‪ ،‬نه خود بوم‪.‬‬
‫;)"‪var c1 = document.getElementById("c1‬‬
‫;)"‪var c1_context = c1.getContext("2d‬‬
‫از لحاظ نگارش‪ ،‬نه تنها کانتکست های دو بعدی‪ ،‬بلکه سه بعدی آن نیز در دسترس می باشند‪ .‬به هرحال‬
‫کانتکست سه بعدی که ‪ webGL‬نامیده می شود‪ ،‬برای شما توسط ‪ W3G‬یا ‪ WHATWG‬آورده نمی شودبلکه‬
‫توسط یک شرکت غیرانتفاعی به نام ‪ Khronos Group‬ارائه می شود‪ .‬عالوه بر آن گوگل هم در دسامبر ‪1101‬‬
‫برای اطمینان بیشتر آینده ی این استاندارد‪ ،‬تولید شگفت انگیز ‪ Body Browser‬را آزاد کرد‪.‬‬
‫اجازه دهید از رنگ قرمز );"‪ (fillStyle="#f00‬استفاده کرده و یک مربع قرمز با اضالع ‪ 100px‬بکشیم‪.‬‬
‫;"‪c1_context.fillStyle = "#f00‬‬
‫;)‪c1_context.fillRect(50, 50, 100, 100‬‬
‫جدول زیر روش های کشیدن مستطیل را نشان می دهد‪.‬‬
‫‪20‬‬

Methods of "Context" Descriptions
fillStyle ‫ رنگ‬fillstyle ‫ پیش فرض‬.‫ الگو یا گرادیان داخل شکل‬،CSS ‫رنگ‬
.‫سیاه می باشد‬
strokeStyle .‫ از خطوط شکل‬CSS ‫رنگ یا روش‬
fillRect(x, y, width, height) ‫ شروع می شود و اندازه ی‬y ‫ و‬x ‫مسطتیلی بکشید که از نقطه ی‬
.‫ عرض باشد‬x ‫طول‬
strokeRect(x, y, width, .‫مستطیلی فقط با حاشیه های آن رسم کنید‬
height)
clearRect(x, y, width, height) ‫ طول را‬x ‫ و همچنین در عرض‬y ‫ و‬x ‫ناحیه مشخص شده در مختصات‬
.‫روشن کنید‬
<div>
<canvas id="Canvas2" width="200" height="200" style="border:solid 1px #000000;"></canvas>
<div>
<button onclick="blue_square_2();return true;">Blue Square</button>
<button onclick="red_stroke_2();return true;">Red Square</button>
<button onclick="clear_rect_2();return true;">Erase Everything</button>
</div>
</div>
<script>
var c2 = document.getElementById("c2");
var c2_context = c2.getContext("2d");
function blue_square_2() { //Blue color square
c2_context.fillStyle = "#00f";
c2_context.fillRect(50, 50, 100, 100);
}
function red_stroke_2() { //Red color edges
c2_context.strokeStyle = "#f00";
c2_context.strokeRect(45, 45, 110, 110);
}
function clear_rect_2() { //Clear all
c2_context.clearRect(40, 40, 120, 120);
21

}
</script>
‫چطور سایه بیندازیم‬
‫ احتماال تمایل داشته باشید با انداختن سایه آن را زیباتر‬،‫از آنجایی که اکنون می دانید چطور مستطیل بکشید‬
‫ اجازه‬.‫ الزم است که فقط چند خط بیشتر به کد برنامه خود اضافه کنید‬.‫ این کار خیلی راحت انجام می شود‬.‫کنید‬
.‫ نگاهی داشته باشیم‬،‫دهید اول به چند ویژگی که در انداختن سایه دخیل هستند‬
Context properties Descriptions
shadowOffsetX .‫( بین سایه و شکل در پیکسل‬x-axis) ‫فاصله ی افقی‬
shadowOffsetY .‫( بین سایه و شکل در پیکسل‬y-axis)‫فاصله ی عمودی‬
shadowBlur .‫تا چه اندازه می خواهید سایه شما محو باشد‬
shadowColor .‫واضح است که برای تنظیم رنگ سایه استفاده می شود‬
.‫و در ادامه می بینید‬
<div>
<canvas id="c8" width="200" height="200" style="border:solid 1px #000000;">
</canvas>
</div>
<script>
function draw_rectangle() {
c8_context.shadowOffsetX = 5;
c8_context.shadowOffsetY = 5;
c8_context.shadowBlur = 10;
c8_context.shadowColor = "DarkGoldenRod";
c8_context.fillStyle = "Gold";
c8_context.fillRect(20, 20, 100, 120);
}
window.onload = draw_rectangle();
</script>
22

‫ قبل از کشیدن سایه الزم است ویژگی های آن‬،‫ برای ترسیم یک شکل با سایه‬،‫همانطور که در کد باال می بینید‬
.‫را مشخص کنید‬
‫چگونه یک مسیر بکشیم‬
.‫ در اینجا چگونگی کشیدن خط قهوه ای به شما ارائه شده است‬.‫ابتدا باید یک خط بکشیم‬
<div>
<canvas id="Canvas2" width="600" height="200" style="border:solid 1px #000000;"></canvas>
<div>
<button onclick="Vertical_line();return true;">Click me to draw a brown vertical line</button>
</div>
</div>
<script>
function Vertical_line() {
c3_context.moveTo(300, 10);
c3_context.lineTo(300, 190);
c3_context.strokeStyle = "brown";
c3_context.stroke();
}
</script>
.strokeStyle ‫ و‬،stroke ،lineTo ، moveTo ‫ عبارتند از‬،‫روش هایی که واقعا در اینجا اتفاق می افتند‬
Context method Descriptions
moveTo(x,y) .y ‫ و‬x ‫حرکت به نقطه ی آغاز با مختصات‬
lineTo(x,y) .‫ مختصات باشند‬y ‫ و‬x ‫ دوباره‬.‫از نقطه ی شروع به این نقطه خطی بکشید‬
strokeStyle ‫ خط‬CSS ‫رنگ‬
stroke .‫روشی که در واقع باعث می شود جاوا اسکریپت خط بکشد‬
beginPath .‫ را فرا بخوانید‬beginPath ‫ باید‬،‫قبل از اینکه شروع به کشیدن خط جدید با رنگ متفاوت کنید‬
23

‫ خط قبلی را با‬stroke ‫ بدون آن آخرین‬.‫ نقش مهمی دارد‬beginPath ‫ که روش‬،‫نمایش آن را در زیر چک کنید‬
.‫ دوباره ترسیم می کند‬،‫ فراخوانده شده‬strokeStyle ‫آخرین رنگ‬
<div>
<canvas id="c4" width="600" height="200" style="border:solid 1px #000000;"></canvas>
<div>
<button onclick="Vertical_2px_Red();return true;">Vertical 2px Red line</button>
<button onclick="Vertical_1px_Blue();return true;">Vertical 1px Blue line</button>
<button onclick="Horizontal_2px_Green();return true;">Horizontal 2px Green line</button>
<button onclick="Clear_line();return true;">Erase Everything</button>
</div>
</div>
<script>
function Vertical_2px_Red() {
c4_context.beginPath();
c4_context.strokeStyle = "Red";
}
function Vertical_1px_Blue() {
c4_context.moveTo(350.5, 10);
c4_context.lineTo(350.5, 190);
c4_context.strokeStyle = "Blue";
}
function Horizontal_2px_Green() {
c4_context.strokeStyle = "Green";
}
function Clear_line() {
}
</script>
‫یکی خط یک‬.‫شاید متوجه شده باشید که در نمایش باال دو دکمه برای کشیدن خط عمودی به شما کمک می کنند‬
.‫ آنچه تفاوت ایجاد میکند مانند زیر است‬.‫پیکسلی و دیگری خط دو پیکسلی می کشد‬
24

‫;)‪c4_context.moveTo(300, 10‬‬
‫;)‪c4_context.lineTo(300, 190‬‬
‫و‬
‫;)‪c4_context.moveTo(300.5, 10‬‬
‫;)‪c4_context.lineTo(300.5, 190‬‬
‫برای کشیدن خطی با عرض یک پیکسل‪ ،‬مختصات را باید به سمت راست یا چپ به ‪ 1.2‬پیکسل تغییر دهید‪ .‬این‬
‫امر به خاطر این است که مقدار صحیح مختصات قرار است در حاشیه ی هر پیکسل درنظر گرفته شود‪ .‬کشیدن‬
‫خطدر لبه باعث خواهد شد که خط در سراسر دو پیکسل مجاور گسترده شود‪ .‬با تغییر مختصات ‪ 1.2‬پیکسل‪ ،‬خط‬
‫هنوز بین دو پیکسل گسترده شده اما نیمی از هر پیکسل را اشغال می کند‪.‬‬
‫بوم نقاشی‪ :‬تصویر‬
‫کشیدن خط یا اشکال ساده خسته کننده می باشد‪ ،‬اجازه بدهید چند تصویر طراحی کنیم‪.‬‬
‫در نمایش باال فقط از کانتکست روش )(‪ drawimage‬استفاده کردم‪ .‬به هرحال این روش می تواند ‪ 2 ،2‬و یا ‪1‬‬
‫استدالل داشته باشد‪ .‬من سه عملکرد دارم که عبارتند از ‪( draw dragon‬کشیدن اژدها)‪draw smaller ،‬‬
‫‪( dragon‬کشیدن اژدهای کوچکتر) و ‪( draw dragon head‬کشیدن سر اژدها) و هرکدام از آنها ‪ 2،2‬و ‪1‬‬
‫استدالل مربوطه را دنبال می کنند‪.‬‬
‫)(‪Overloading of drawImage‬‬ ‫‪Description‬‬
‫‪3 arguments‬‬ ‫‪ Img‬اساس تصویر می باشد‪ X .‬و‪ y‬مختصات هستند تا آبجکت تصویر را قرار‬
‫)‪drawImage (img,x,y‬‬ ‫دهند‪.‬‬
‫‪5 arguments‬‬ ‫‪ Img‬اساس تصویر می باشد‪ X .‬و‪ y‬مختصات هستند تا آبجکت تصویر را قرار‬
‫‪drawImage‬‬ ‫دهند‪ .‬طول و عرض اندازه ای می باشد که شما برای تصویر می خواهید‪ ،‬می‬
‫)‪(img,x,y,width,height‬‬ ‫توانید آن را طوری که می خواهید تغییر اندازه دهید‪.‬‬
‫‪25‬‬

9 arguments ‫ مکانی است که شما شروع‬crop-y ‫ و‬Crop-x .‫ اساس تصویر می باشد‬Img
drawImage (img, crop_x, crop_y, .‫به بریدن تصویر خود می کنید‬
crop_width, crop_height, x, y, ‫ اندازه ای است که می خواهید طبق آن تصویر‬crop-height ‫ و‬Crop-width
width, height) .‫را برش بزنید‬
‫ طول و عرض‬.‫ همچنان مختصاتی هستند تا آبجکت تصویر را قرار دهند‬y‫ و‬X
‫ می توانید آن را طوری که‬،‫اندازه ای می باشد که شما برای تصویر می خواهید‬
.‫می خواهید تغییر اندازه دهید‬
.‫در اینجا کد را مشاهده می کنید‬
<div>
<div>
<button onclick="draw_dragon();return true;">Draw Dragon</button>
<button onclick="draw_smaller_dragon();return true;">Draw smaller dragon</button>
<button onclick="draw_dragon_head();return true;">Draw Dragon Head</button>
<button onclick="Clear_image();return true;">Erase Everything</button>
</div>
</div>
<script>
var dragon = new Image();
dragon.src = 'images/chinese_dragon.png';
function draw_dragon() {
c5_context.drawImage(dragon, 100, 5);
}
function draw_smaller_dragon() {
c5_context.drawImage(dragon, 10, 5, 58, 100);
}
function draw_dragon_head() {
c5_context.drawImage(dragon, 0, 19, 69, 97, 300, 100, 103, 145);
}
function Clear_image() {
}
</script>
26

‫ متن‬:‫بوم نقاشی‬
‫چگونه متن را در بوم نقاشی اجرا کنیم؟‬
‫ و در‬TextBaseline ،Font ،Strokestyle ،Fillstyle ‫کلمات جادویی برای چاپ متن در بوم نقاشی عبارتند از‬
.stroketext ‫ و‬filltext ‫انتها‬
<div>
<div>
<button onclick="showFillText();return true;">Fill Text</button>
<button onclick="showStrokeText();return true;">Stroke Text</button>
<button onclick="Clear_text();return true;">Erase Everything</button>
</div>
</div>
<script>
function showFillText() {
c6_context.fillStyle = '#f00';
c6_context.font = 'italic bold 30px sans-serif';
c6_context.textBaseline = 'bottom';
c6_context.fillText('HTML5 is cool!', 50, 100);
}
function showStrokeText() {
c6_context.strokeStyle = "#003300";
c6_context.font = '40px san-serif';
c6_context.textBaseline = 'bottom';
c6_context.strokeText('HTML5 is cool?', 300, 100);
}
function Clear_text() {
}
</script>
Context method Description
fillText(text,x,y) .‫ مشخص می شود‬fillstyle ‫ رنگ متن توسط‬.‫متن را با رنگ داخل آن چاپ می کند‬
strokeText(text,x,y) ‫ رنگ متن‬.‫ متن چاپ می کند‬OutLine ‫متن را فقط با رنگ در‬
.‫ تنظیم میشود‬strokeStyle() ‫توسط‬
27

‫‪strokeStyle‬‬ ‫رنگ ‪ CSS‬برای متن که ‪ strokeText‬را فرا می خواند‪.‬‬
‫‪fillStyle‬‬ ‫رنگ ‪ CSS‬برای متن که ‪ fillText‬را فرا می خواند‪.‬‬
‫‪font‬‬ ‫فونت ‪ CSS‬مانند ‪san-serif ،10px ،bold‬‬
‫‪textBaseline‬‬ ‫توضیح این مورد کمی گیج کننده است و برای آن به نمایش دیگری احتیاج‬
‫خواهیم داشت‪ .‬مقداربرای این ویژگی میتواند‬
‫‪ ،ideographic ،alphabetic ،middle ،hanging ،top‬و ‪ bottom‬باشد‪.‬‬
‫مقدار پیش فرض ‪ alphabetic‬می باشد‪.‬‬
‫تصویری را که می بینید از ‪ WHATWG‬اقتباس کرده ام که توضیح کامل برای انواع خطوط پایه ی کتن می باشد‪.‬‬
‫آنچه را که باید مشاهده کنید این است که چگونه یک متن در ارتباط با آن خطوط پایه قرار می گیرد‪.‬‬
‫در اینجا یک خط خاکستری در ‪ y=100‬کشیده ام و قصد دارم هر لغت را در ‪ y=100‬قرار دهم‪ ،‬اما با استفاده‬
‫از ‪ textbaseline‬متفاوت‪.‬‬
‫در مورد نگارش‪ ،‬فایرفاکس هیچگونه پشتیبانی روی خط پایه ی ‪ hanging‬ندارد‪.‬‬
‫;"‪c7_context.textBaseline = "top‬‬
‫;)‪c7_context.fillText('Top', 5, 100‬‬
‫;"‪c7_context.textBaseline = "bottom‬‬
‫‪28‬‬

‫;)‪c7_context.fillText('Bottom', 80, 100‬‬

‫;"‪c7_context.textBaseline = "middle‬‬
‫;)‪c7_context.fillText('Middle', 200, 100‬‬
‫;"‪c7_context.textBaseline = "alphabetic‬‬
‫;)‪c7_context.fillText('Alphabetic', 300, 100‬‬
‫;"‪c7_context.textBaseline = "hanging‬‬
‫;)‪c7_context.fillText('Hanging', 400, 100‬‬
‫اگر قصد دارید چیزی را در بوم نقاشی گسترش دهید و تمایل به پشتیبانی کاربرهایی داشتید که از ‪ IE8‬یا پایین‬
‫تر استفاده می کنند‪ ،‬می توانید از یک جاوا اسکریپت با منبع آزاد به نام ‪ ExplorerCanvas‬استفاده کنید‪ .‬اما‬
‫در جریان باشید که وجود مسایل غیریکنواختی ممکن است باعث عصبانیت شما بشوند‪.‬‬
‫باز هم این معرفی مختصری از بوم نقاشی ‪ HTML5‬بود‪ .‬هنوز ویژگی های جالب دیگری در مورد این بوم نقاشی‬
‫وجود دارد که باید در مورد آنها بیشتر بدانید‪.‬‬
‫آموزش ‪Web form‬‬
‫تکامل ‪ HTML5‬برای ساختن یک دنیای بهتر از وب می باشد‪ .‬نوشتن کدهای کمتر (به ویژه جاوا اسکریپت)‬
‫خیلی خوب است‪ ،‬در انتهای روز کارهای تکراری توسعه دهندگان وب باید توسط مرورگرها گرفته شود‪ .‬پس از‬
‫همه ی اینها‪ ،‬این مهم ترین دلیل کشف ماشین توسط انسان است‪.‬‬
‫آنچه در زیر می بینید لیستی از ویژگی های ورودی های جدید و انواع ورودی ها می باشد که باید همه را تک به‬
‫تک بررسی کنیم‪.‬‬
‫ویژگی های ورودی جدید‬
‫>‪<input type="text" "new input attribute" /‬‬

‫§‬ ‫‪Placeholder‬‬
‫§‬ ‫‪Autofocus‬‬
‫§‬ ‫‪Required‬‬
‫§‬ ‫‪DataList‬‬
‫برای سالها فقط مشتی از انواعی به ما ارائه شد که در ‪ Input‬مورد استفاده قرار می گیرند‪ ،‬مانند متن‪ ،‬رادیو‪ ،‬چک‬
‫باکس‪ ،‬پسورد‪ ،‬فایل و سابمیت‪ .‬در ‪ HTML5‬با انواع جدید روی بلوک سرگرمی بیشتری خواهیم داشت‪.‬‬
‫‪29‬‬

‫انواع ورودی های جدید‬
‫>‪<input type="new input type" /‬‬
‫جستجو‬
‫ایمیل‪ ،URL ،‬تلفن‬ ‫‪‬‬
‫دامنه به عنوان اسالیدر‬ ‫‪‬‬
‫عدد به عنوان اسپینر‬ ‫‪‬‬
‫تاریخ و زمان‬ ‫‪‬‬
‫انتخاب کننده ی رنگ‬ ‫‪‬‬
‫اتربیوت ‪Placeholder‬‬
‫‪ Placeholder‬یک تکست باکس است که وقتی هیچ مقداری مشخص نشده و یا هیچ مرکزیتی وجود ندارد‪ ،‬متنی‬
‫را با سایه ی روشن تر نگه می دارد‪.‬‬
‫در زیر می بینید که اگر هیچ مقداری مشخص نشده باشد یک ‪ placeholder‬چگونه به نظر می رسد (آنچه شما‬
‫می بینید فقط یک تصویر است و نه یک ‪ placeholder‬واقعی‪ ،‬روی آن کلیک نکنید‪).‬‬
‫وقتی که تکست باکس روی چیزی تمرکز می کند‪ ،‬متن خاموش می شود و شما باید متن خود را در آن قرار دهید‪.‬‬
‫در اینجا کد مربوط به ‪ placeholder‬را می بینید‪ .‬دیگر الزم نیست که جاوا اسکریپت و ‪ CSS‬به ظاهر متن‬
‫رسیدگی کنند‪.‬‬
‫>"‪<label for="first_name">First Name</label> : <input id="first_name" placeholder="First name goes here‬‬
‫‪30‬‬

.‫ را پشتیبانی می کنند‬placeholder ‫اجازه بدهید ببینیم کدام مرورگرها‬
Browsers Placeholder Support
IE 10 ✓
Firefox 3.7 ✓
Safari 4.0 ✓
Chrome 4.0 ✓
Opera 11 ✓
‫ احتماال در مورد پشتیبانی مرورگرها به جز‬،‫ در صفحه ی وب شما فقط یک ویژگی خوب است‬placeholder ‫اگر‬
.‫ اذیت نخواهید شد‬،‫موارد باال‬
‫ را پشتیبانی‬placeholder ‫ ابتدا برای اینکه چک کنید مرورگر‬.‫در غیراینصورت مجبورید راه های اضافه ای بروید‬
‫ را پشتیبانی نمی کنند‬placeholder ‫ برای مرورگرهایی که‬.‫ از جاوا اسکریپت استفاده کنید‬،‫می کند‬
.‫ خود را ایجاد کنید‬placeholder ‫ استفاده کنید تا‬javascript+CSS ‫از‬
<label for="demo">Placeholder demo</label> : <input id="demo" placeholder="Support Placeholder" />

<script>
function testAttribute(element, attribute)
{
var test = document.createElement(element);
if (attribute in test)
return true;
else
return false;
}
if (!testAttribute("input", "placeholder"))
{
window.onload = function()
{
var demo = document.getElementById("demo");
var text_content = "No Placeholder support";
demo.style.color = "gray";
demo.value = text_content;
31

‫{ )(‪demo.onfocus = function‬‬
‫)"‪if (this.style.color == "gray‬‬
‫} "‪{ this.value = ""; this.style.color = "black‬‬
‫}‬
‫{ )(‪demo.onblur = function‬‬
‫)"" == ‪if (this.value‬‬
‫} ;‪{ this.style.color = "gray"; this.value = text_content‬‬
‫}‬
‫}‬
‫}‬
‫>‪</script‬‬
‫عملکرد ‪ testAttribute‬در باال برای امتحان کردن این است که آیا یک ویژگی از یک عنصر توسط یک مرورگر‬
‫پشتیبانی می شود‪ .‬در این مورد می خواهیم بدانیم که آیا مرورگر شما ویژگی ‪ placeholder‬مربوط به عنصر‬
‫ورودی را پشتیبانی می کند‪ .‬اگر ‪ placeholder‬پشتیبانی نمی شود‪ ،‬من مرورگر را به اجرای چند کد جاوااسکریپت‬
‫مجبور می کنم تا چیزی با عنوان ‪ placeholder‬ایجاد کند‪ .‬شما می توانید از جاوااسکریپت خود استفاده کنید‪.‬‬
‫‪Placeholder demo :‬‬
‫اگر از مرورگری استفاده می کنید که ‪ placeholder‬را پشتیبانی می کند‪ ،‬باید قار باشید عبارت ‪support place‬‬
‫‪ holder‬را در تکست باکس ببینید‪ .‬بالعکس اگر از مرورگری استفاده می کنید که ‪ placeholder‬را پشتیبانی‬
‫نمی کند‪ ،‬عبارت "‪ "No Placeholder Support‬را در تکست باکس خواهید دید‪.‬‬
‫آموزش ‪Autofocus‬‬
‫‪ Autofocus‬یک ویژگی ‪ Boolean‬از فیلد فرم می باشد که مرورگر را به تنظیم تمرکز روی آن‪ ،‬وقتی که یک‬
‫صفحه بارگذاری می شود‪ ،‬وامی دارد‪ .‬اگر هنوز متوجه نشدید که چیست‪ ،‬لطفا به گوگل رفته و بدون اینکه ابتدا‬
‫روی تکست باکس بزرگ کلیک کنید‪.‬‬
‫فقط رشته ی جستجوی خود را تایپ کنید‪ .‬این مسئله به این خاطر است که گوگل به طور خودکار روی آن تکست‬
‫باکس تمرکز دارد (منظور من این نیست که گوگل از ‪ autofocus‬مربوط به ‪ HTML5‬استفاده می کند‪ ).‬و با یک‬
‫کلیک ذخیره می شود‪.‬‬
‫در زیر کد انجام این کار را می بینید که خیلی ساده می باشد‪.‬‬
‫‪32‬‬

<label for="name">Your name goes here :</label><input id="name" type="text" autofocus /> <br />
<label for="mothername">Your dog's name goes here :</label><input id="mothername" type="text" />
.‫ می باشد و هیچ نیازی به تنظیم مقدار روی آن ندارد‬Boolean ‫ یک ویژگی‬Autofocus
.‫ را پشتیبانی نمی کنند‬autofocus ‫طبق معمول همه ی مرورگرها‬
Browsers Autofocus Support
IE 10 ✓
Firefox 4 ✓
Safari 4.0 ✓
Chrome 3.0 ✓
Opera 10 ✓
‫ با خطای کمتر باید دوباره از جاوااسکریپت استفاده کنید تا چک کنید آیا‬autofocus ‫برای اجرای یک‬
‫ اگر نه تمرکز‬،‫ را پشتیبانی می کند‬autofocus ‫مرورگر‬
.‫را فقط با جاوااسکریپت تنظیم کنید‬
‫ متوجه می شود که مکان نما در‬،‫ پشتیبانی کند‬autofocus ‫ اگر از‬.‫در زیر نمایش و همچنین یک تست میبینید‬
‫ تمرکز روی دومین تکست باکس‬،‫ و اگر مرورگر شما از آن پشتیبانی نمی کند‬.‫تکست باکس اول چشمک می زند‬
.‫قرار می گیرد‬
Support Autofocus :
No Autofocus Support :
<script>
function testAttribute(element, attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
}
33

else
return false;
}
window.onload = function() {
if (!testAttribute('input', 'autofocus'))
document.getElementById('Text2').focus();
//for browser has no autofocus support, set focus to Text2.
}
</script>
<label for="Text1">Support Autofocus :</label><input id="Text1" type="text" autofocus /> <br />
<label for="Text2">No Autofocus Support :</label><input id="Text2" type="text" />
Required field ‫آموزش‬
‫ این فیلد گاهی با عنوان‬.‫فیلد مورد نیاز فیلدی می باشد که باید قبل از ارائه ی یک فرم با یک مقدار پر شود‬
.‫( شناخته می شود‬compulsory or mandatory field) ‫فیلد اجباری‬
‫ لطفا به جدول زیر توجه‬.‫در مورد نگارش فقط اپرا و فایرفاکس تکست باکس این فیلد را پشتیبانی می کنند‬
.‫کنید‬
Browsers "Required" Support
IE 10 ✓
Firefox 4 ✓
Safari 5
Chrome 20 ✓
Opera 9 ✓
‫ به عنصر ورودی خود‬Boolean ‫ شما تنها باید یک ویژگی‬،‫تبدیل یک فیلد به فیلد مورد نیاز کامال ساده است‬
.‫اضافه کنید‬
<form>
<label for="movie">What is your favorite movie : </label>
<input name="movie" type="text" required />
<input type="submit" value="Submit" />
34

‫>‪</form‬‬
‫تصویر زیر به ما نشان می دهد که اگر یک فیلد دراجرا خالی باشد‪ ،‬چگونه فایرفاکس و اپرا در پر کردن مقدار آن‬
‫کاربر را به جلو می برند‪.‬‬
‫آموزش اتریبیوت ‪DataList‬‬
‫دیتا لیست به نظر می رسد شبیه پیشنهادهایی است که در هنگام تایپ در تکست باکس ارائه می شود‪ ،‬مانند‬
‫آنچه در جستجوی گوگل مشاهده می کنید‪ .‬البته که فقط به نظر شبیه می رسد‪ ،‬اما حتی نزدیک به آن هم نیست‪.‬‬
‫دیتا لیست مانند لیست رو به پایین انتخاب می باشد‪ ،‬اما کاربر عالوه برآنچه در لیست ارائه شده می تواند‬
‫آزادانه هرچه می خواهد در تکست باکس قرار دهد‪ .‬در مورد لیست انتخاب هر چیزی در قسمت کاربر قرار می‬
‫گیرد‪ .‬قبل از اینکه به کد و نمایش برسیم‪ ،‬اجازه بدهید ببینیم چه مرورگرهایی آن را پشتیبانی می کنند‪.‬‬
‫‪Browsers‬‬ ‫‪Datalist Support‬‬
‫‪IE 10‬‬ ‫✓‬
‫‪Firefox 4‬‬ ‫✓‬
‫‪Safari 5‬‬
‫‪Chrome 20‬‬ ‫✓‬
‫‪Opera 11‬‬ ‫✓‬
‫حاال ببینیم چطور یک دیتالیست ‪ HTML5‬را تکمیل می کنیم که کامال ساده است‪.‬‬
‫>‪<label for="country_name">Country : </label‬‬

‫>‪<input id="country_name" name="country_name" type="text" list="country" /‬‬
‫>"‪<datalist id="country‬‬
‫>"‪<option value="Afghanistan‬‬
‫>"‪<option value="Albania‬‬
‫>"‪<option value="Algeria‬‬
‫>"‪<option value="Andorra‬‬
‫>"‪<option value="Angola‬‬
‫>‪</datalist‬‬
‫خیلی راحت در دیتالیست نام کشور خود را وارد کنید‪.‬‬
‫‪35‬‬

‫‪Country :‬‬
‫اگر مرورگری ندارید که آن را پشتیبانی کند‪ ،‬در اینجا می توانید ببینید که در فایرفاکس چگونه به نظر می رسد‪.‬‬
‫آموزش ‪search‬‬
‫اطالعات وب هر ثانیه در حال رشد است‪ .‬از آنجایی که گوگل جستجو )‪ (search‬را در اواخر دهه ی ‪ 11‬دوباره‬
‫تعریف کرد‪ ،‬یافتن اطالعات از طریق مسیرهای سازماندهی شده از بین رفته است‪ .‬امروزه می توانیم یک سرچ‬
‫باکس )‪ (search box‬تقریبا در محتوای همه ی وب سایت های غنی قرار دهیم‪ ،‬این کار حتی در بالگ شخصی‬
‫هم محبوب می باشد‪.‬‬
‫در ‪ HTML5‬می توانیم یک تکست باکس را به عنوان سرچ باکس معرفی کنیم‪ .‬در واقع آنچه می توانید برای‬
‫سرچ باکس خود انجام دهید عبارت است از‬
‫>‪<input id="mysearch" type="search" /‬‬
‫با انجام چنین کاری ان تظار نداشته باشید که مرور گر به طور خودکار آن را با یک موتور جستجو ترکیب کند‪ .‬این‬
‫تقریبا مانند یک تکست باکس عادی می باشد>"‪ ،<input type="text‬اما مرورگر به طور خودکار کمی آن را‬
‫دستکاری می کند تا زیباتر شود‪.‬‬
‫در نگارش فقط ‪( apple safari‬آزمایش شده با ‪ )Safari 5‬و گوگل کروم (آزمایش شده با کروم ‪ )8‬این کار را‬
‫انجام می دهند‪.‬‬
‫‪Browsers‬‬ ‫?‪Tweak search box‬‬
‫‪IE 10‬‬ ‫✓‬
‫‪Firefox 13‬‬
‫‪36‬‬

‫‪Safari 5‬‬ ‫✓‬
‫‪Chrome 8‬‬ ‫✓‬
‫‪Opera 9‬‬
‫در اینجا یک نمونه ساده را می بینید‪.‬‬
‫‪search‬‬
‫همانطور که ممکن است متوجه شده باشید وقتی چیزی در سرچ باکس می نویسید‪ ،‬یک ضربدر آبی در در تکست‬
‫باکس ظاهر می شود‪ .‬وقتی روی این ضربدر کلیک کنید‪ ،‬رشته ی ورودی شما پاک شده و می توانید تایپ یک‬
‫رشته ی جدید را آغاز کنید‪.‬‬
‫می توانید ویژگی های بیشتری به آن اضافه کنید‪ ،‬مانند ‪ placeholder‬و ‪.autofocus‬‬
‫در اینجا کد مربوط به آن را مشاهده می کنید‪.‬‬
‫>‪<label for="mysearch2">Enter your search string here : </label‬‬

‫>"‪<input id="mysearch2" type="search" placeholder="search‬‬
‫‪37‬‬

‫آموزش ایمیل‪ ،‬شماره تلفن و وب سایت‬
‫ایمیل‪ ،‬شماره تلفن و وب سایت ‪ url‬از متداول ترین جزئیات تماس هستند که الگوهای ورودی خاص خود را‬
‫دارند‪ .‬ایمیل دارای عالمت @ می باشد و ‪ .net ،.com‬و یا چیز دیگری به پایان می رسد‪ .‬وب سایت حداقل‬
‫دارای یک دات در وسط است و اکثر آنها با ‪ .com‬به پایان می رسند و شماره تلفن هم فقط عدد است‪ ،‬بدون‬
‫هیچ حروف الفبایی‪.‬‬
‫گیج نشوید زیرا این انواع حداقل هنوز مربوط به اعتبار سنجی داده نیستند‪ .‬شما مجبور خواهید بود از همان‬
‫عبارت های متداول برای انجام آن استفاده کنید‪.‬‬
‫در جدول زیر می توانید ببینید چگونه به نظر می رسد‪ ،‬ممکن است سعی کنید در هر کدام از فیلدها چیزی وارد‬
‫کنید و در مقایسه با تکست باکس ساده‪ ،‬چیز خاصی نخواهید دید (>‪.)<input type="text" /‬‬
‫‪html-5.my demo‬‬
‫‪Email Address‬‬
‫‪Web Site‬‬
‫‪Phone Number‬‬
‫و دراینجا کد را می بینید که چگونه به نظر می رسد‪.‬‬
‫>‪<input id="email" type="email" /‬‬
‫>‪<input id="website" type="url" /‬‬
‫>‪<input id="phone" type="tel" /‬‬
‫به هرحال تفاوت هایی در چگونگی رفتار صفحه لمسی مرورگر محور با این فیلدها وجود دارد‪.‬‬
‫در زیر صفحه ی مربوط به ‪(iOS 4.2) iphone 4‬و ‪ (android 2.2) HTC Desire‬را در زمان تمرکز هر فیلد می‬
‫بینید‪.‬‬
‫‪38‬‬

‫همانطور که می بینید‪ ،‬وقتی روی فیلد شماره تلفن تمرکز می کنید‪ ،‬مرورگر به شما یک صفحه ی شماره گیر ارائه‬
‫می دهد‪ iphone ،‬حتی به جلوتر رفته تا قرار دادن ورودی ایمیل و وب ‪ url‬را ساده تر کند‪ ،‬هر ایمیل دارای یک‬
‫نشان @ می باشد و اکثر وب های ‪ url‬با ‪ .com‬به پایان می رسند‪.‬‬
‫از طرف دیگر ورودی صفحه کلید اندروید من به انداره ی آیفون کاربر پسند نیست‪.‬‬
‫‪39‬‬

‫در خاتمه اینکه دلیلی وجود ندارد که شما از اکنون از این انواع استفاده نکنید‪ ،‬چرا که مرورگرهایی که انواع‬
‫جدید را نمی شناسند با آنها مانند یک متن ساده رفتار می کنند‪.‬این امر صفحه ی شما را با کاربرهای موبایل‬
‫دوستانه تر می کند و برای ماشین خواناتر می کند‪ .‬این ویژگی وب معنایی می باشد‪.‬‬
‫آموزش ‪Input Type : Range‬‬
‫کنترل اسالیدر یک کاربر اینترفیس )‪ (user interface‬برای تنظیم یک عدد در یک دامنه بسیار مشهود می‬
‫باشد‪ .‬یک نمونه اسالیدر معموال در انتخاب گر رنگ )‪ (color picker‬یافت می شود‪ ،‬جایی که می توانیم پیکان‬
‫را به سمت راست یا چپ درگ کرده و مقدار ‪ RGB‬درست را انتخاب کنیم‪.‬‬
‫‪40‬‬

‫قبال برای ایجاد اسالیدر در صفحه ی وب بین جاوا اسکریپت یا فلش یکی را به عنوان راه حل انتخاب می‬
‫کردیم‪ HTML5 .‬برای ذخیره ی هزاران بایت در کد شما اینجاست‪ .‬با نوع جدید ورودی‪ ،‬کنترل اسالیدر‬
‫)>"‪ (<input type="range‬مانند لیست ‪ dropdown‬خواهد بود‪.‬‬
‫کد آن به سادگی زیر می باشد‪.‬‬
‫>‪<input id="test" type="range" /‬‬
‫طبق معمول طراحان هر مرورگر در اجرای کاربر اینترفیس سلیقه ی مربوط به خود را دارند‪ .‬مجددا تمایل دارم به‬
‫شما یک گالری از اسالیدهای متنوعی نشان دهم که مرورگرهای مختلف در ویندوزها اجرا می کنند‪.‬‬
‫‪41‬‬

‫مرورگرها >"‪ <input type="range‬را اجرا نمی کنند‪ ،‬طوریکه اسالیدر به سادگی آن را مانند یک تکست باکس‬
‫ساده اجرا خواهد کرد‪.‬‬
‫مرورگرهایی که >"‪ <input type="range‬را مانند اسالیدر اجرا می کنند در جدول زیر ارائه شده اند‪.‬‬
‫‪Browsers‬‬ ‫‪Render Range input as Slider‬‬
‫‪IE 10‬‬ ‫✓‬
‫‪Safari 5‬‬ ‫✓‬
‫‪Chrome 8‬‬ ‫✓‬
‫‪Opera 11‬‬ ‫✓‬
‫نوع دامنه دارای ویژگی های جالبی است که شاید تمایل داشته باشید یاد بگیرید‪:‬‬
‫‪Attribute‬‬ ‫‪Descriptions‬‬
‫مقدار یک ویژگی متداول از عنصر ورودی می باشد‪ .‬مقدار می تواند هر عدد ممیزی معتبری باشد‪value ،‬‬
‫نه اینکه لزوما عدد صحیح باشد‪ .‬مقدار پش فرض عبارت است از کمترین مقدار به اضافه ی نیمی‬
‫از بیشترین مقدار‪.‬‬
‫‪42‬‬

‫‪min‬‬ ‫کمترین مقدار دامنه‪:‬کمترین مقدار پیش فرض صفر می باشد‪.‬‬
‫‪max‬‬ ‫بیشترین مقدار دامنه‪ :‬بیشترین مقدار دامنه ‪ 011‬می باشد‪.‬‬
‫این فاکتور مقیاس گام اسالیدرمی باشد‪ :‬مقدار پیش فرض یک است و فقط اعداد صحیح مجاز ‪step‬‬
‫می باشند‪ ،‬مگر اینکه کمترین مقدار عدد غیر صحیح باشد‪.‬‬
‫لیست همان دیتالیست در فصل قبلی می باشد‪ .‬دیتالیست می تواند با نوع دامنه ی ورودی یکی ‪list‬‬
‫شود‪ ،‬به هرحال هیچ یک از مرورگرها این ویزگی را در نگارش اجرا نکرده اند‪.‬‬
‫همیشه درک این مطالب در نمایش آسانتر می باشد‪.‬‬
‫اجازه دهید بیشترین مقدار‪ ،‬کمترین مقدار و گام فاکتور را مشخص کنیم‪.‬‬
‫>‪<input id="slider1" type="range" min="100" max="500" step="10" /‬‬
‫تنظیم مقدار پیش فرض‬
‫>‪<input id="slider2" type="range" min="100" max="500" step="50" value="100" /‬‬
‫کار آن با اعداد ممیزی‬
‫>‪<input id="slider3" type="range" min="-2.5" max="3.0" step="0.1" /‬‬
‫آموزش ‪Input Type : Number‬‬
‫در ‪ HTML5‬می توانید عددی را به عنوان ‪ Spinner‬در فیلد ورودی داشته باشد که پیکان هایی به سمت باال و‬
‫پایی در قسمت راست تکست باکس وجود دارند که برای افزایش یا کاهش این عدد به کار می روند‪ .‬لطفا گالری‬
‫اسپینر را در زیر ببینید‪.‬‬
‫در امر نگارش مرورگرهایی که در ویندوز این کار را انجام می دهند اپرا و گوگل کروم می باشند‪.‬‬
‫‪Browsers‬‬ ‫‪Render "Number" input as Spinner‬‬
‫‪IE 9 Beta‬‬
‫‪43‬‬

‫‪Safari 5‬‬ ‫)‪✓ (in Mac OS, but not Windows‬‬
‫‪Chrome 8‬‬ ‫✓‬
‫‪Opera 11‬‬ ‫✓‬
‫>‪<label for="movie">How often you watch movie in week : </label‬‬

‫>‪<input id="movie" type="number" value="0" /‬‬
‫اگر شما از گوگل کروم ‪ 8‬استفاده می کنید یک مقدار غیر عددی مانند ‪ b ،a‬و یا ? را امتحان کنید‪ ،‬کروم به شما‬
‫اجازه چنین کاری نخواهد داد اما اجازه گذاشتن ‪ e‬را می دهد‪ ،‬چرا چنین است؟! زیرا ‪ e‬می تواند بخشی ازیک عدد‬
‫ممیزی شناور باشد‪ ،‬برای مثال ‪.5.34 e+12‬‬
‫از طرف دیگر اپرا به شما اجازه می دهد هرچه می خواهید در فیلد وارد کنید‪.‬‬
‫ما باید برخی ویژگی هایی را که می توانیم در نوع عدد ورودی داشته باشیم کشف کنیم‪.‬‬
‫‪Attributes‬‬ ‫‪Descriptions‬‬
‫‪value‬‬ ‫‪ Value‬مقدار پیش فرض جعبه ی ورودی است وقتی که یک صفحه بارگذاری می شود‪ .‬این‬
‫ویژگی متداول برای عنصر ورودی می باشد‪ ،‬بدون توجه به نوعی که استفاده می کنید‪.‬‬
‫‪min‬‬ ‫کمترین مقدار شما از عدد‪ :‬من باید کمترین مقدار را ‪ 1‬تعیین کنم چرا که عدد منفی در تعداد‬
‫دفعات تماشای فیلم در یک هفته بی معناست‪.‬‬
‫‪max‬‬ ‫واضح است که بزرگترین عدد قسمت ورودی را مشخص می کند‪.‬‬
‫‪step‬‬ ‫فاکتور مقیاس گام‪ :‬اگر این ویژگی مشخص نشده باشد مقدار پیش فرض ‪ 0‬می باشد‪.‬‬
‫اگر شما یک شرکت نرم افزار هستید و نرم افزار شما توسط تعدادی مجوز کاربر فروخته شده است‪ ،‬حداقل‬
‫مجوزهایی که فروخته اید ‪ 2‬می باشد و این عدد ‪ 2‬تا ‪ 2‬تا افزایش می یابد و بیشترین مجوزی که می توانید به‬
‫هر مشتری بفروشید ‪ 21‬است‪.‬‬
‫‪44‬‬

‫‪Number of user license‬‬
‫>‪<label for="user_lic">Number of user license : </label‬‬

‫‪<input id="user_lic" type="number" min="5" max="30" step="5" value="5" />d‬‬
‫اگر برای افزایش و یا کاهش مقدار از جاوااسکریپت استفاده کردید‪ ،‬راه حل آن اینجاست‪.‬‬
‫)‪ x - spinner.stepUp(x‬مقداری که می خواهید در فیلد افزایش دهید‪.‬‬ ‫‪‬‬

‫)‪ x - spinner.stepDown(x‬مقداری که تمایل دارید در فیلد کاهش دهید‪.‬‬ ‫‪‬‬
‫‪ –spinner.valueAsNumber‬مقدار ورودی را به جای یک رشته به عنوان عدد ممیزی شناور گزارش می دهد‪.‬‬ ‫‪‬‬
‫یک ‪ Spinner‬با پیکان های نسبتا کوچک رو به باال و پایین ممکن است زیاد برای لمس توسط انگشتان برای یک‬
‫عملکرد لمسی مناسب نباشند‪ .‬مرورگرهای آیفون و اندروید ‪ 1.1‬هردو >"‪<input type="number‬را به عنوان‬
‫یک تکست باکس نرمال اجرا می کنند اما به کاربرها یک صفحه کلید اعداد برای وارد کردن داده ها ارائه می‬
‫دهند‪.‬‬
‫صفحه ی آیفون در سمت چپ و صفحه ی )‪ HTC Desire (android 2.2‬در سمت راست ارائه شده است‪.‬‬
‫‪45‬‬

‫نوع ورودی‪ :‬تاریخ‬
‫فیلد تاریخ و زمان به راحتی به شکل های مختلف وب پیدا می شوند‪ .‬برنامه های نمونه مانند رزرو بلیط‪ ،‬تعیین‬
‫وقت مالقات‪ ،‬سفارش پیتزا و غیره‪.‬‬
‫متداول ترین راه استفاده برای ورودی تاریخ استفاده از چیننده ی تاریخ جاوااسکریپت می باشد‪ .‬باور می کنید؟‬
‫فقط چیننده ی تاریخ جاوااسکریپت گوگل‪ .‬بیشتر چیننده های تاریخ از یک تقویم استفاده می کنند تا به کاربر‬
‫اجازه انتخاب تاریخ مورد نظر را داده و آن را در تکست باکس مربوط به تاریخ قرار دهد‪.‬‬
‫در نگارش تنها مرورگری که کامال ورودی تاریخ و زمان را پشتیبانی می کند اپرا )‪ (v11‬و گوگل کروم )‪ (v20‬می‬
‫باشند‪ .‬در ‪ HTML5‬کار مرورگر این است که به کاربر اطمینان دهد که می تواند تنها یک رشته تاریخ معتبر در‬
‫تکست باکس ورودی قرار دهد‪.‬‬
‫انتخاب یک تاریخ از تقویم تنها راه وارد کردن تاریخ نیست‪ ،‬گرچه محبوبترین راه اجرا می باشد‪.‬‬
‫مشخصات ‪ HTML5‬چیزی در مورد نمایش یک تقویم برای ورودی تاریخ ذکر نکرده است‪.‬‬
‫‪46‬‬

‫‪Browsers‬‬ ‫‪Date Time Support‬‬
‫‪Chrome 20‬‬ ‫✓‬
‫‪Opera 11‬‬ ‫✓‬
‫اگر روی کامپیوتر خود اپرا ورژن ‪ 00‬و گوگل کروم ‪( 11‬و البته ورژن های باالتر دارید) در مورد چک کردن آن راحت‬
‫خواهید بود‪ .‬اگر مرورگری ندارید که آن را پشتیبانی کند‪ ،‬تصویر زیر آن چیزی است که به شما نشان داده خواهد‬
‫شد‪.‬‬
‫با پشتیبانی ‪ HTML5‬طراح وب برای داده ی پایه ی تاریخ نیازی به دانلود کنترل جاوااسکریپت ندارد‪ .‬دقیقا آنچه‬
‫الزم است انجام دهید >‪ <input type="date" /‬می باشد‪.‬‬
‫>‪<label for="meeting">Meeting Date : </label‬‬

‫>‪<input id="meeting" type="date" value="2011-01-13" /‬‬
‫‪47‬‬

‫یک بار دیگر ‪ HTML5‬زندگی مارا ساده تر کرده است‪ .‬شما فقط داده ی تاریخ وارد نمی کنید‪ ،‬داده های تاریخ و‬
‫زمان در ارتباط با هم هستند که می توانید با هم وارد کنید‪ .‬البته از زمانی که شرکت های مرورگر تصمیم گرفتند‬
‫این استاندارد را اجرا کنند‪ ،‬توپ در زمین آنهاست‪.‬‬
‫تاریخ )>‪(<input type=”date” /‬‬
‫واضح است که این مرورگر داخلی چیننده ی تاریخ می باشد‪ .‬شما می توانید تنها یک تاریخ خاص را از تقویم‬
‫انتخاب کنید‪.‬‬
‫هفته )>‪(<input type=”week” /‬‬
‫به جای انتخاب تاریخ می توانید یک هفته را انتخاب کنید‪ .‬لطفا به شماره هفته در سمت چپ تقویم توجه کنید‪.‬‬
‫‪48‬‬

‫شما حتی می توانید چیننده ی ماه هم داشته باشد‪ .‬در اینجا تقویمی را مشاهده می کند که به شما اجازه‬ ‫‪.2‬‬
‫می دهد یک ماه در سال را انتخاب کنید‪.‬‬
‫زمان )>‪(<input type=”time” /‬‬
‫یک چیننده ی زمان برای انتخاب ورودی زمان می باشد‪.‬‬
‫‪49‬‬

‫تاریخ و زمان )>‪(<input type=”date and time” /‬‬
‫می توانید تاریخ و زمان را با زمان محلی انتخاب کنید‪ .‬مقدار در زمان ‪ UTC‬نمایش داده می شود‪.‬‬
‫زمان و تاریخ محلی )>‪(<input type=”datetime-local” /‬‬
‫در مقایسه با زمان ‪ UTC‬مقدار ورودی زمان تاریخ را با زمان محلی نشان می دهد‪.‬‬
‫‪50‬‬

‫اجازه بدهید به ویژگی های مرتبط که احتماال استفاده می کنیم‪ ،‬نگاهی داشته باشیم‪.‬‬
‫‪ Value‬مقدار پیش فرض باکس ورودی می باشد زمانی که در ابتدا بارگذاری می شود‪ .‬این یک ‪value‬‬
‫ویژگی متداول برای عنصر >‪، <input‬بدون توجه به نوع مورد استفاده ی شما‪ ،‬می باشد‪.‬‬
‫‪min‬‬ ‫کمترین تاریخ یا زمان‬
‫‪max‬‬ ‫بیشترین تاریخ یا زمان‬
‫‪step‬‬ ‫فاکتور مقیاس گام‪ :‬انواع مختلف ورودی مقدار گام پیش فرض خود را دارد‪.‬‬
‫§تاریخ – پیش فرض یک روز می باشد‪.‬‬
‫§هفته – پیش فرض یک هفته می باشد‪.‬‬
‫§ماه – پیش فرض یک ماه می باشد‪.‬‬
‫§تاریخ زمان محلی – پیش فرض همچنین یک دقیقه می باشد‪.‬‬
‫‪51‬‬

‫آموزش ‪Color‬‬
‫در ‪ HTML5‬می توانیم به سادگی ورودی رنگ را با >"‪ <input type="color‬داشته باشیم‪ .‬تکست باکس فقط‬
‫باید مقدار رشته ی به اصطالح ‪( simple color‬رنگ ساده) را با حروف کوچک داشته باشد‪ ،‬به عنوان‬
‫مثال ‪ #ff0000‬برای رنگ قرمز‪ #000000 ،‬برای رنگ سیاه و ‪ #ffffff‬برای رنگ سفید‪.‬‬
‫در نگارش تنها مرورگری که ورودی رنگ را پشتیبانی می کند‪ ،‬اپرا ‪ 00‬می باشد‪.‬‬
‫‪Browsers‬‬ ‫‪Color input Support‬‬
‫‪Chrome 20‬‬ ‫✓‬
‫‪Opera 11‬‬ ‫✓‬
‫با نوع ورودی رنگ دیگر نیازی به چیننده ی رنگ پیچیده ی جاوااسکریپت ندارید‪ .‬یک خط ساده از کد مانند زیر‬
‫کار را انجام خواهد داد‪.‬‬
‫>‪<label for="background-color">Choose a calor for background :</label‬‬
‫>‪<input id="background-color" type="color" /‬‬
‫‪52‬‬

‫اگر به اندازه ی کافی خوش شانس باشید تا مرورگری داشته باشید که ورودی رنگ را پشتیبانی کند‪ ،‬لطفا در‬
‫امتحان آن راحت باشید‪.‬‬
‫‪Choose a color for background‬‬
‫‪You have chosen :‬‬
‫‪53‬‬

‫به سمت وب معنایی‬
‫زمانی (در سال ‪ ) 0111‬مردی به نام تیم برنرس لی دنیای پهناور وب را به وجود آورد که امروز همه ی ما آن را‬
‫دوست داریم‪ .‬اشتباه نکنید‪ ،‬او اینترنت را اختراع نکرد‪ ،‬اما ‪ HTML‬و پروتکل ‪ HTTP‬را چرا‪ .‬سال ها بعد او‬
‫کنسرسیوم ‪ WWW‬را با نام مستعار ‪ W3C‬تاسیس کرد‪ ،‬سازمانی که توسعه ی وب و برقراری‬
‫استاندارد ‪ HTML‬و چند تکنولوژی مربوط دیگر را نظارت می کرد‪ .‬او تا به امروز هنوز مدیر ‪ W3C‬می باشد‪.‬‬
‫بیشتر انسان های بزرگ با رویاهایشان حرکت می کنند‪ ،‬آقای تیم برنرس لی هم از این امر مستثنا نیستند‪ .‬او‬
‫هم رویای بزرگی دارد‪ ،‬که در اینجا به شما ارائه می شود‪.‬‬
‫من رویایی برای وب دارم که دو بخش است‬
‫در بخش اول وب ابزاری قوی تر برای همکاری بین انسان ها میشود‪ .‬من همیشه فضای اطالعات را جایی تصور‬
‫کرده ام که هرکسی به آن دسترسی سریع و شهودی دارد‪ ،‬که نه فقط آنها را فهرست کند بلکه ایجاد هم بکند‪.‬‬
‫نخستین برنامه ی ‪ worldwideweb‬تقریبا با یک صفحه ی خالی باز شد که برای یادداشت های کاربر آماده بود‪.‬‬
‫من و رابرت کایلو زمان زیادی را صرف آن کردیم‪ ،‬نه به خاطر اینکه به دنبال مطالب زیادی بودیم‪ ،‬بلکه به این‬
‫خاطر که ایده هایمان را می نوشتیم و به اشتراک می گذاشتیم‪ .‬عالوه بر این رویای ارتباط بین انسان ها از طریق‬
‫دانش مشترک باید برای همه ی گروه ها ممکن باشد‪ ،‬یک تعامل الکترونیکی آسان همانطور که اکنون با افراد به‬
‫طور مستقیم دارند‪.‬‬
‫در بخش دوم رویا‪ ،‬همکاری ها با کامپیوترها توسعه پیدا می کند‪ .‬ماشین ها قادر به تجزیه ی همه ی داده های‬
‫وب می شوند‪ ،‬محتوا‪ ،‬لینک ها و داد و ستد بین مردم و کامپیوترها‪ .‬یک وب معنایی )‪ (semantic web‬که باید‬
‫این امر را ممکن سازد هنوز باید ظهور کند‪ ،‬اما وقتی این اتفاق افتاد روز به روز مکانیزم های تجارت‪ ،‬ادارات و‬
‫زندگی روزانه ی ما توسط ماشین ها انجام می شود‪ ،‬صحبت کردن با ماشین ها و رها کردن انسان ها برای ارائه ی‬
‫الهام و شهود‪ .‬آنچه عوامل هوشمند برای سالها تعریف کردند سرانجام ظاهر می شود‪ .‬این ماشین قابل فهم وب‬
‫ازطریق اجرای مجموعه ای از پیشرفت های تکنیکی و توافق های اجتماعی که اکنون در حال آغاز هستند‪ ،‬اتفاق می‬
‫افتد‪.‬‬
‫‪54‬‬

‫زمانی که رویا عملی شود‪ ،‬وب مکانی خواهد بود که در آن هوس یک انسان با استدالل یک ماشین در همنشینی‬
‫با یکدیگر یک ترکیب ایده آل و قدرتمند را به وجود می آوررند‪ .‬برای عملی کردن یک رویا کارهای زیادی الزم‬
‫است‪ .‬وب یک رویای دور است و فقط یک وضعیت چند بخشی از یک ساختار می باشد که چگونگی رسیدن به رویا‬
‫در آن مهم نیست و باید قطعه به قطعه مهندسی شود‪.‬‬
‫خالصه اینکه هدف وب معنایی ساخت یک وب قابل فهم نه تنها توسط انسان بلکه توسط ماشین‪ ،‬میباشد (نه‬
‫ماشینی با هوش مصنوعی)‪ .‬با آن تبادل واشتراک اطالعات خیلی موثرتر خواهد بود‪.‬‬
‫‪ HTML5‬مشتی از عناصر درون خطی جدید را ( ازقبیل ‪ )abbr ،strong ،span‬به خانواده ی ‪ HTML‬معرفی می‬
‫کند‪ ،‬که در واقع دیگر عنصر درون خطی نامیده نمی شود بلکه معنا شناختی در سطح متن نامیده می شود‪.‬‬
‫معنا شناسی جدید در سطح متن‬
‫§‬ ‫>‪<mark‬‬
‫§‬ ‫>‪<time‬‬
‫§‬ ‫>‪<meter‬‬
‫§‬ ‫>‪<progress‬‬
‫عالوه بر عناصر در سطح متن‪ ،‬مجموعه ای از عناصر برای انسداد و عناصری برای تقسیم بندی محتوا وجود دارند‪.‬‬
‫با افزودن این عناصر جدید‪ ،‬هدف ساختن یک صفحه ی جدید پرمعناتر می باشد‪ ،‬به جای غرق شدن با گروه های‬
‫>"‪ <div class="header">....<div class="footer‬یا >"‪. <div class="article‬‬ ‫مختلف ازقبیل‬
‫عناصر انسداد جدید‬
‫§‬ ‫>‪<section‬‬
‫§‬ ‫>‪<header‬‬
‫§‬ ‫>‪<footer‬‬
‫§‬ ‫>‪<nav‬‬
‫§‬ ‫>‪<article‬‬
‫§‬ ‫>‪<aside‬‬
‫‪55‬‬

‫آموزش ‪Semantic mark‬‬
‫عالمت عنصر >‪ <mark‬اجرای متنی را در یک داکیومنت نشان می دهد که به هدف مرجع و با توجه به ارتباط آن‬
‫در یک کانتکست دیگر مشخص شده است‪.‬‬
‫اساسا برای معطوف کردن توجه خواننده به بخشی از متن استفاده می شود که خواننده ممکن است آن بخش را‬
‫نادیده بگیرد‪.‬‬
‫برای عالمت دار کردن بخشی از متن آن را بین >‪ <mark></mark‬قرار دهید‪.‬‬
‫در نگارش هر مرورگری >‪ <mark></mark‬را برای ‪ highlight‬متن اجرا نمی کند‪ ،‬برای اطمینان خاطر بیشتر بهتر‬
‫است عنصر ‪ mark‬را در ‪ CSS‬نیز طراحی کنید‪.‬‬
‫} ;‪mark { background-color:#ff9; color:#000; font-style:normal; font-weight:bold‬‬
‫آموزش ‪Semantic time‬‬

‫>‪Semantic <time‬‬
‫عنصر زمان یا یک ساعت را در ‪ 11‬ساعت نشان می دهد و یا یک تاریخ مشخص را در تقویم مسیحی (‪Gregorian‬‬
‫‪ )calendar‬با یک زمان و افست منطقه ی زمانی نشان می دهد‪.‬‬
‫برای نمونه شما می توانید این کار را انجام دهید تا یک تاریخ مشخص را نشان دهید‪.‬‬
‫‪We were celebrating our daugther's <time datetime="2004-07-13">birthday</time> in that seafood restaurant.‬‬
‫ما تولد >"‪ <time datetime="2004-07-13‬دخترمان را در آن رستوران دریایی جشن می گیریم‪.‬‬
‫از آنجایی که در مثال زیر زمان در فرمت ‪ 11‬ساعتی به کاربر نمایش داده شده است‪ ،‬ما ویژگی ‪ datetime‬را برای‬
‫بیشتر مشخص کردن مقدار زمان نیاز نداریم‪.‬‬
‫‪I usually go swimming at <time>20:00</time> every Saturday.‬‬
‫من معموال در ساعت >‪ <time>20:00</time‬هر شنبه به شنا می روم‪.‬‬
‫‪56‬‬

‫جمله ی باال با استفاده از تکنولوژی طراحی شده که طراحی دوباره ی زمان ها را پشتیبانی می کند‪ ،‬می تواند به‬
‫این شکل بیان شود‪.‬‬
‫من معموال در ساعت ‪ 8‬بعد از ظهر هر شنبه به شنا می روم‪.‬‬
‫یا‬
‫من معموال در ساعت ‪ 11:11‬هر شنبه به شنا می روم‪.‬‬
‫از یک طرف اگر مقدار زمان در فرمت ‪ 11‬ساعته مشخص نشده باشد باید ساعت آن را در ‪ 11‬ساعت مشخص‬
‫کنید‪.‬‬
‫ما از روز شنبه تا دوشنبه از ساعت >‪ <time datetime="08:00">8am</time‬تا ساعت >‪ <time datetime="18:00">6pm</time‬آزاد‬
‫هستیم‪.‬‬
‫برای یک زمان و تاریخ مشخص چگونگی کار در اینجا نشان داده شده است‪.‬‬
‫شما ممکن است کتاب های خود را در >"‪ 16 <time datetime="2011-01-16T06:00Z‬ژانویه ی ‪ 2011‬در >‪ 6pm</time‬جمع کنید‪.‬‬
‫یه طور مشابه شاید الزم باشد یک تاریخ و زمان درست را با منطقه ی زمانی نیز مشخص کنید‪.‬‬
‫سمینار در >"‪ 22 <time datetime="2011-02-22T09:00-4:00‬فوریه ی ‪ 2011‬در >‪ 9amEDT</time‬شروع خواهد شد‪.‬‬
‫مشخصه ی ‪ HTML5‬به ما می گوید که اگر تاریخ و زمان دقیق معلوم نیستند از عنصر زمان استفاده نکنیم‪ .‬به‬
‫عنوان مثال‪ ،‬من میدونم شما در تابستان گذشته چه کاری انجام دادید‪ .‬یا او را از ‪ 0181‬می شناختم‪.‬‬
‫ممکن است از خود بپرسید با استفاده از عنصر زمان در انتهای روز چه حاصل می شود‪ .‬بسیار خوب با همه ی این‬
‫تالش ها سعی می کنیم محتوای ماشین خود را قابل خواندن کنیم‪ .‬تصور کنید روزی بتوانیم ‪"February 22,‬‬
‫"‪ 2011 9am EDT‬تنها با یک کلیک را در تقویم خود ذخیره کنیم‪.‬‬
‫عالوه بر ویژگی ‪ datetime‬عنصر زمان دارای ویژگی های "‪ "pubdate‬و "‪ "valueAsDate‬می باشد‪.‬‬
‫‪57‬‬

‫مقدار زمان یا تاریخ و یا زمان تاریخ‪ .‬اگر وجود داشته باشد‪ ،‬تاریخ یا زمان را مشخص می ‪dateTime‬‬
‫کند‪ .‬در غیر اینصورت تاریخ یا زمان توسط عناصر محتوا ارائه می شوند‪.‬‬
‫تاریخ انتشار‪ .‬یک ویژگی ‪ Boolean‬می باشد که به این معناست که الزم نیست مقداری ‪pubDate‬‬
‫برای آن قرار دهید‪ .‬اگر مشخص باشد که یعنی تاریخ انتشار یک مقاله )>‪ ، (<article‬اگر‬
‫عنصر زمان در داخل بلوک مقاله نباشد به این معناست که این تاریخ‪ ،‬تاریخ انتشار کل‬
‫پرونده می باشد‪.‬‬
‫نکته‪ :‬شما باید فقط یک ‪ pubdate‬در یک مقاله و یا یک داکیومنت داشته باشید‪.‬‬
‫یک ویژگی ‪ readonly‬می باشد‪ ،‬و آبجکت تاریخ را که مشخص کننده ی تاریخ و زمان خاصی ‪valueAsDate‬‬
‫است‪ ،‬گزارش می دهد‪.‬‬
‫‪ Pubdate‬می تواند برای ورودی وبالگ و یا اخبار مقاله به کار رود‪ .‬برای مقاله ای که در ‪ 10‬ژانویه ی ‪ 1100‬منتشر‬
‫شده‪ ،‬کد آن مانند زیر می باشد‪.‬‬
‫‪<time datetime="2011-01-21" pubdate>January 21 2011</time‬‬
‫آموزش ‪Semantic meter‬‬
‫‪ Meter‬یک عنصر جدید در ‪ HTML5‬می باشد که مقدار یک دامنه ی شناخته شده را به عنوان وسیله ی اندازه‬
‫گیری نشان می دهد‪ .‬کلمه ی کلیدی در اینجا دامنه ی دامنه ی شناخته شده می باشد‪ ،‬که بدبن معناست که‬
‫شما فقط زمانی اجازه ی استفاده از آن را دارید که کامال از مقدار حداقل و مقدار حداکثر آگاه باشید‪.‬‬
‫‪58‬‬

‫عالوه بر این نباید از این مقیاس اندازه گیری برای نشان دادن یک پیشروی‪ ،‬مثال پیشروی ‪ 81‬درصد استفاده‬
‫کنید زیرا یک عنصر پیشروی در ‪ HTML5‬وجود دارد‪.‬‬
‫در نگارش فقط گوگل کروم ‪ 8‬و اپرا ‪ 00‬عنصر ‪ meter‬را در یک مقیاس انداره گیری قابل رویت اجرا می کنند‪.‬‬
‫بنابراین مشخص کردن مقدار متنی بین برچسب های ‪ meter‬مفید می باشد‪ ،‬و مرورگرها ‪ meter‬را به عنوان یک‬
‫مقیاس اندازه گیری که بتواند به سادگی مقدار را در یک متن ساده نشان دهد‪ ،‬اجرا نمی کنند‪.‬‬
‫بدون تالش شما برای مشخص کردن مقدار متنی بین برچسب های ‪ ،meter‬کاربر تنها یک فضای خالی در مرورگرها‬
‫خواهد دید که ‪ meter‬را پشتیبانی نمی کنند‪.‬‬
‫‪Browsers‬‬ ‫‪Render meter element as gauge‬‬
‫‪Chrome 8‬‬ ‫✓‬
‫‪Opera 11‬‬ ‫✓‬
‫‪59‬‬

‫عالوه بر ویژگی های ‪ min‬و ‪ max‬و ‪ value‬ویژگی های دیگری وجود دارند که می توانید برای اجرای وسیله ی‬
‫اندازه گیری خود استفاده کنید‪.‬‬
‫‪value‬‬ ‫نیاز است که برای استفاده از عنصر ‪ meter‬مقدار را به عدد مشخص کنید‪ .‬این یک امر الزم می‬
‫باشد‪ .‬عدد می تواند یک عدد صحیح یا ممیزی باشد‪.‬‬
‫‪min‬‬ ‫حداقل مقدار یک ‪ ،meter‬اگر مشخص نباشد‪ 1 ،‬خواهد بود‪.‬‬
‫‪max‬‬ ‫بیشترین مقدار یک ‪ ،meter‬اگر مشخص نباشد‪ 0 ،‬خواهد بود‪.‬‬
‫‪low‬‬ ‫این گزینه انتخابی است‪ ،‬مگر اینکه شما تمایل داشته باشید مقدار پایین دامنه را نشان دهید‪.‬‬
‫‪high‬‬ ‫این گزینه انتخابی است‪ ،‬مگر اینکه شما تمایل داشته باشید مقدار باالی دامنه را تعریف کنید‪.‬‬
‫‪optimum‬‬ ‫این گزینه کامال انتخابی است و برای مشخص کردن یک نقطه ی مطلوب در یک دامنه به کار می‬
‫رود‪.‬‬
‫آموزش ‪Semantic progress‬‬
‫عنصر جدید پیشروی به نظر می رسد شبیه به عنصر ‪ meter‬می باشد و برای نشان دادن پیشروی یک عمل ایجاد‬
‫شده است‪ .‬پیشروی می تواند مشخص باشد یا نا مشخص‪ .‬یعنی اینکه شما می توانید از عنصر پیشروی برای‬
‫نشان دادن یک پیشروی استفاده کنید که حتی نمی دانید چقدر از کار مربوط به آن باقی مانده است‪.‬‬
‫گیج کننده به نظر می رسد‪ ،‬چطور می توانید بدون اینکه بدانید پایان کجاست‪ ،‬میزان پیشروی را بگویید‪.‬‬
‫اولین امکان‪ ،‬کار هنوز حتی شروع هم نشده‪ ،‬بنابراین یا ‪ 1‬درصد است یا ‪ 1.1110‬درصد که اصال مطرح نیست‪.‬‬
‫دومین امکان اینکه‪ ،‬مقدار حقیقی پیشروی از طرف برخی سرورها یا فرایندهای آپدیت کردن آن در انتظار است‪.‬‬
‫یکی از استفاده های عنصر پیشروی‪ ،‬نشان دادن پیشروی فایل دانلود می باشد‪.‬‬
‫>‪<section‬‬
‫>‪<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p‬‬
‫>‪<script‬‬
‫‪60‬‬

‫;)'‪var progressBar = document.getElementById('p‬‬

‫{ )‪function updateProgress(newValue‬‬
‫;‪progressBar.value = newValue‬‬
‫;‪progressBar.getElementsByTagName('span')[0].textContent = newValue‬‬
‫>‪} </script‬‬
‫>‪</section‬‬
‫برای مشخص کردن پیشروی‪ ،‬همیشه می توانید مقدار پیشروی را در قسمت ‪ value‬تنظیم کنید‪ .‬یک‬
‫ویژگی ‪ max‬وجود دارد که می توانید حداکثر مقدار پیشروی را نشان دهید‪ .‬در مقایسه با عنصر ‪،meter‬‬
‫ویژگی ‪ min‬وجود ندارد‪ ،‬چرا که همیشه حداقل میزان پیشروی ‪ 1‬می باشد‪.‬‬
‫>‪Progress of Task A : <progress value="60" max="100">60%</progress‬‬
‫در نگارش نیز فقط اپرا ‪ 00‬و گوگل کروم ‪ 8‬عنصر پیشروی را در قالب یک نوار پیشروی پشتیبانی می کنند‪.‬‬
‫‪Browsers‬‬ ‫‪Progress element support‬‬
‫‪Firefox 13‬‬ ‫✓‬
‫‪Chrome 8‬‬ ‫✓‬
‫‪Opera 11‬‬ ‫✓‬
‫اگر از مرورگری که پیشروی را پشتیبانی کند‪ ،‬استفاده نمی کنید‪ ،‬تصویر زیر نشان می دهد که پیشروی در گوگل‬
‫کروم ‪ 8‬چگونه به نظر می رسد‪.‬‬
‫‪61‬‬

‫آموزش ‪Semantic section‬‬
‫ویژگی های خوانده های ‪ - W3C‬عنصر بخش )‪ (section‬یک بخش کلی از یک داکیومنت یا یک برنامه را مشخص‬
‫می کند‪ .‬در این متن‪ ،‬بخش گروه بندی معنایی محتوا با یک تیتر می باشد‪.‬‬
‫در تصویر زیر قسمت های مشخص شده بهترین استفاده برای >‪ <section‬را نشان می دهند‪.‬‬
‫توجه داشته باشید که عنصر ‪ section‬در اینجا برای جایگزین کردن عنصر ‪ div‬به کار نمی رود‪.‬‬
‫شما نباید از عنصر بخش برای موارد زیر استفاده کنید‪.‬‬
‫‪ .0‬برای یک محتوای منسجم‪ :‬شما نباید از بخش برای محتوا در ‪ RSS feed‬استفاده کنید‪ .‬اگر درحال ایجاد وب‬
‫سایت وبالگ می باشید از عنصر ‪ section‬برای ورودی وبالگ خود استفاده نکنید‪ ،‬بلکه باید از عنصر ‪Article‬‬
‫استفاده کنید‪ .‬به هرحال یک عنصر ‪ Article‬می تواند دارای عناصر ‪ section‬نیز باشد‪.‬‬
‫‪ .1‬صرفا به هدف ‪ : Layout‬از عنصر >‪ <div‬به عنوان ظرف عمومی به هدف طراحی استفاده کنید‪.‬‬
‫>‪<h1>Application</h1‬‬
‫‪62‬‬

‫>‪<ul‬‬
‫>‪<li>Education</li‬‬
‫>‪<li>Entertainment</li‬‬
‫>‪<li>Family</li‬‬
‫>‪<li>Games</li‬‬
‫>‪<li>News and Weather</li‬‬
‫>‪</ul‬‬
‫شاید متوجه شده باشید که من از >‪ <h1‬برای عنوان در عنصر بخش استفاده میکنم‪ .‬عنصر بخش در واقع نوعی‬
‫تقسیم بندی محتوا در ‪ HTML5‬می باشد‪.‬‬
‫تقسیم بندی محتوا‬
‫همیشه زیرمجموعه ای از نزدیک ترین پیش گام آن مانند >‪ <article> ،<body‬یا یک عنصر >‪ <section‬دیگر‬ ‫‪‬‬
‫می باشد‪.‬‬
‫شما به استفاده از ‪ h1‬تا ‪ h6‬در داخل عنصر بخش تشویق می شوید‪ ،‬بدون اینکه در مورد آنچه در بیرون بخش‬ ‫‪‬‬
‫اتفاق افتاده اذیت شوید‪.‬‬
‫می توانند >‪ <hgroup> ،<header‬و >‪ <footer‬خود را داشته باشند‪.‬‬ ‫‪‬‬
‫بنابراین اگر آن را مانند زیر بنویسید بسیار خوب است‪ .‬درواقع شما برای انجام چنین کاری بسیار تشویق‬
‫می شوید‪.‬‬
‫>‪<body‬‬
‫>‪<h1>Apples</h1‬‬
‫>‪<p>Apples are fruit.</p‬‬
‫>‪<h1>Taste</h1‬‬
‫>‪<p>They taste lovely.</p‬‬
‫>‪<h1>Sweet</h1‬‬
‫>‪<p>Red apples are sweeter than green ones.</p‬‬
‫>‪<h1>Color</h1‬‬
‫>‪<p>Apples come in various colors.</p‬‬
‫>‪</body‬‬
‫‪63‬‬

‫اگر شما در حال طراحی داکیومنت ‪ HTML5‬می باشید‪ ،‬پیشنهاد می کنم ‪ HTML5 Outliner‬را مشاهده کنید‪،‬‬
‫که اگر ‪ Outline‬شما درست نباشد به شما می گوید‪.‬‬
‫آموزش ‪Semantic header‬‬
‫تقریبا همه ی وب سایت های مدرن یک بخش تیتر دارند که در باالی هر صفحه در داخل وب سایت نشان داده‬
‫می شود‪ .‬عنصر جدید ‪ header‬ابزاری برای آن می باشد‪.‬‬
‫در واقع آنچه گفتم یک شوخی بود‪ ،‬زیرا ‪ header‬ابزاری بیشتر از آن می باشد‪ .‬ما در استفاده از ‪ header‬برای‬
‫به اصطالح تیتر اصلی یک وب سایت تشویق می شویم‪ .‬به هرحال منظور من این نیست که ‪ New York Times‬از‬
‫عنصر ‪ header‬استفاده کرد‪ ،‬بلکه منظورم این است که ‪ New York Times‬می تواند از این عنصر استفاده‬
‫کند‪.‬‬
‫>‪<body‬‬
‫>‪<header‬‬
‫>‪<h1>Little Green Guys With Guns</h1‬‬
‫>‪<nav‬‬
‫>‪<ul‬‬
‫>‪<li‬‬
‫>‪<a href="/games">Games</a‬‬
‫>‪<li‬‬
‫>‪<a href="/forum">Forum</a‬‬
‫‪64‬‬

<li>
<a href="/download">Download</a>
</ul>
</nav>
</header>
<p>You have three active games:</p>

...
‫ می‬header ‫ بلکه‬.‫ فقط برای تیترهای اصلی وب سایت ها به کار می رود‬header ‫به هرحال نباید تصور کنیم که‬
‫ همان طور که هر مقاله ای تیتر‬،‫تواند به عنوان یک تیتر برای ورودی یک وبالگ یا یک مقاله ی خبری استفاده شود‬
.‫خود را دارد و هر زمان و تاریخ منتشر می شود‬
<article>
<header>
<h1>Military Offers Assurances to Egypt and Neighbors</h1>
Published : <time datetime="2011-02-13" pubdate>February 13 2011</time>)
</header>
<p>
CAIRO - As a new era dawned in Egypt on Saturday,
the army leadership sought to reassure Egyptians and
the world that it would shepherd a transition to civilian
rule and honor international commitments like the peace treaty with Israel.
</p>
</article>
65

‫نه تنها این مورد‪ ،‬بلکه آنچه در بخش قبل در مورد ‪ section‬بیان کردیم که هر ‪ section‬احتماال باید تیتر خود را‬
‫داشته باشد‪.‬‬
‫>‪<h1>Application</h1‬‬
‫>‪<h2>Paid iphone apps</h2‬‬
‫>‪</hgroup‬‬
‫>‪</header‬‬
‫>‪<ul‬‬
‫>‪<li>Education</li‬‬
‫>‪<li>Entertainment</li‬‬
‫>‪<li>Family</li‬‬
‫>‪<li>Games</li‬‬
‫>‪<li>News and Weather</li‬‬
‫>‪</ul‬‬
‫عنصر ‪ header‬معموال شامل عناصر دیگری هم می شود ( مانند ‪ h1‬و ‪ h2‬و ‪ )hgroup‬که به هرحال ضروری‬
‫نیست‪ ،‬گرچه متداوال تمرین شده است‪.‬‬
‫مشابه آنچه در قسمت ‪ section‬یاد گرفتیم‪ header ،‬هم دارای ‪Outline‬مربوط به خود می باشد‪ .‬شما می توانید‬
‫به راحتی ‪ h2 ،h1‬و ‪ h6 ...‬خود را تعریف کنید بدون اینکه نگران آنچه در مورد قبلی ها تعریف شده‪ ،‬باشید‪.‬‬
‫آموزش ‪Semantic footer‬‬
‫مشابه ‪ ،header‬عنصر ‪ footer‬نیز به پاورقی یک صفحه ی وب اشاره می کند‪ .‬اکثر اوقات ‪ footer‬می تواند به‬
‫عنوان آنچه ما در مورد آن فکر کردیم‪ ،‬استفاده شود‪.‬‬
‫به طور کل ‪ footer‬شامل اطالعاتی در مورد یک بخش است‪ ،‬اطالعاتی ازقبیل نویسنده ی متن‪ ،‬لینک های مربوط‬
‫به داکیومنت‪ ،‬اطالعات کپی رایت و غیر‪.‬‬
‫‪66‬‬

‫لطفا این تصور را نداشته باشید که برای هر وب فقط می توانید یک ‪ footer‬داشته باشید‪ .‬بلکه برای هر بخش یا‬
‫هر مقاله می توانید یک ‪ footer‬داشته باشید‪.‬‬
‫‪67‬‬

site wide ‫ هستند و یک عنصر‬footer ‫لطفا به مثال زیر دقت داشته باشید که در آن دو مقاله دارای‬
.‫ اصلی این داکیومنت محسوب می شود‬footer ‫ وجود دارد که به عنوان‬footer
<!DOCTYPE html>
<html>
<head>
<title>The Ramblings of a Scientist</title>
<body>
<h1>The Ramblings of a Scientist</h1>
<article>
<h1>Episode 15</h1>
<video src="/fm/015.ogv" controls preload>
<p><a href="/fm/015.ogv">Download video</a>.</p>
</video>
<footer>

<p>Published <time pubdate datetime="2009-10-21T18:26-07:00"></time></p>
</footer>
</article>
<article>
<h1>My Favorite Trains</h1>
<p>I love my trains. My favorite train of all time is a Kof.</p>
<p>
It is fun to see them pull some coal cars because they look so
dwarfed in comparison.
</p>
<footer>

<p>Published <time pubdate datetime="2009-09-15T14:54-07:00"></time></p>
</footer>
</article>
<footer>

<nav>
<p>
<a href="/credits.html">Credits</a>-
<a href="/tos.html">Terms of Service</a> -
<a href="/index.html">Blog Index</a>
</p>
</nav>
<p>Copyright ©2015 Tahlildadeh</p>
</footer>
</body>
</html>
68

‫آموزش ‪Semantic nav‬‬
‫همانطور که از نام آن پیداست‪ ،‬عنصر جدید ‪ nav‬برای مسیریابی استفاده می شود‪ .‬عنصر ‪ nav‬وسیله ای است‬
‫برای منطقه ای با لینک های سایت های مختلف‪.‬‬
‫لینک های مسیریابی یک وب سایت‪ ،‬اکثرا در باال و یا نوارهای کناری سایت قرار گرفته اند و گاهی اوقات در‬
‫قسمت ‪ footer‬قرار دارند‪.‬‬
‫به هرحال همه ی گروه های لینک ها در یک صفحه الزم نیست در عنصر ‪ nav‬قرار بگیرند – تنها قسمت هایی‬
‫که دارای بلوک های مسیریابی مهمی هستند مناسب برای عنصر‪ nav‬می باشند‪ .‬به ویژه در مورد ‪ footer‬ها‬
‫متداول است که لیست مختصری از لینک های صفحات مختلف یک سایت داشته باشند‪ ،‬از قبیل ترم های‬
‫سرویس‪ ،‬صفحه ی اصلی و صفحه ی کپی رایت‪ .‬عنصر ‪ footer‬به تنهایی و بدون ‪ nav‬کافیست‪.‬‬
‫‪69‬‬

‫در زیر مثالی را می بینید که چگونگی استفاده از عنصر ‪ nav‬را توضیح می دهد‪ ،‬که معموال با عنصر ‪ ul‬برای لینک‬
‫های مسیریابی تودر تو شده است‪.‬‬
‫آموزش ‪Semantic article‬‬
‫امروزه وب دارای اقیانوسی از مقاالت خبری و مطالب وب می باشد‪ .‬که به ‪ W3C‬دلیل خوبی برای تعریف عنصری برای مقاله‬
‫به جای >"‪ <div class="article‬می دهد‪.‬‬
‫عنصر ‪ article‬وسیله ای برای مقاله ی یک وب می باشد‪ .‬داشتن بیشتر از یک مقاله در یک صفحه ی وب بسیار متداول‬
‫است‪.‬‬
‫آنچه در زیر می بینید یک صفحه ی وب می باشد که دارای بیشتر از یک مقاله می باشد‪ .‬به هرحال وقتی که روی عنوان‬
‫کلیک کنید صفحه ای با تنها یک مقاله باز خواهد شد‪.‬‬
‫‪70‬‬

‫ما باید از محتوای مقاله ای استفاده کنیم که فکر می کنیم قابل انتشار است‪ .‬درست مانند اخبار و مطالب وب که می‬
‫توانیم در ‪ RSS feed‬به اشتراک بگذاریم‪ .‬یک ‪ article‬می تواند در یک ‪ article‬دیگر قرار بگیرد‪ .‬مثالی از این نمونه‬
‫کامنت های ارسال شده ی کاربر در مورد عنوان یک وبالگ می باشد‪ .‬عناصر داخلی ‪ article‬نشان می دهند که مقاالتی که‬
‫در صدر هستند در اتباط با محتوای مقاالت بیرونی می باشند‪ .‬به عنوان مثال تیتر یک وبالگ در یک سایت که پذیرنده ی‬
‫کامنت های کاربرها می باشد به عنوان یک مقاله ی دیگر در داخل مقاله برای تیتر وبالگ قرار گرفته است‪.‬‬
‫منظور از یک مقاله فقط محتوای آن نمی باشد‪ .‬شما می توانید در یک مقاله ‪ header‬و ‪ footer‬نیز داشته باشید‪ .‬از‬
‫آنجایی که هر مقاله باید یک تیتر داشته باشد‪ ،‬داشتن عنصر‪ header‬بسیار متداول است‪.‬‬
‫>‪<body‬‬
‫>‪<h1>My blog</h1‬‬
‫>‪<article‬‬
‫>‪<h1>The Very First Rule of Life</h1‬‬
‫>‪<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p‬‬
‫‪71‬‬

‫>‪</header‬‬
‫>‪a<p‬‬
‫‪If there's a microphone anywhere near you, assume it's hot and‬‬
‫‪sending whatever you're saying to the world. Seriously.‬‬
‫>‪</p‬‬
‫>‪<p>...</p‬‬
‫>‪<footer‬‬
‫>‪<a href="?comments=1">Show comments...</a‬‬
‫>‪</footer‬‬
‫>‪</article‬‬
‫>‪<body‬‬
‫در ‪ HTML5‬داشتن ‪ h1‬تا ‪ h6‬در یک ‪ article‬بسیار خوب است‪ .‬از آنجایی که یک ‪ article‬تقسیم بندی محتوا می باشد‪،‬‬
‫بدین معناست که یک مقاله زیرمجموعه ای از موارد قبل از خود بوده است‪.‬‬
‫در مورد ما ‪ article‬زیرمجموعه ای از یک بدنه می باشد و می تواند ‪ Outline‬خود را داشته باشد‪ .‬با این توضیحات بهتر‬
‫این است داکیومنت وب خود را حفظ کنیم‪ ،‬زیرا الزم نیست به ‪ Outline‬آن خارج از مقاله فکر کنید‪.‬‬
‫آموزش ‪Semantic aside‬‬
‫عنصر ‪ aside‬بخشی است که تا حدی به محتوای اصلی مربوط می شود‪ ،‬اما می تواند از آن جدا شود‪ .‬در این آموزش‬
‫من از عنصر ‪ aside‬برای نکات مربوط به موضوع استفاده می کنم‪ .‬آنچه در بخش زرد رنگ بیان می شود‪ ،‬اطالعات‬
‫اضافه ای به خواننده ارائه می دهد‪ ،‬اما خواننده می تواند بدون خواندن بخش زرد رنگ به خواندن مطلب ادامه‬
‫دهد‪ .‬به تصویر زیر توجه کنید‪.‬‬
‫‪72‬‬

<article>
<p>
As of writing, the only web browser completely support date time input is Opera.
In HTML5, it is the job of web browser to ensure user can only enter a valid date time string
into the input textbox.
</p>
<aside>
Picking a date from Calendar is not the only way to input a date value even though it's the most popular
implementation.
HTML5 specifications does not mention anything about displaying a calendar for date input.
</aside>
</article>
W3C ‫ویژگی های‬
‫ بخشی از یک صفحه را نشان می دهد که شامل محتوایی است که به طور سطحی مربوط به‬aside ‫عنصر‬
‫ چنین بخش هایی معموال در فن چاپ به شکل‬.‫ می باشد و همچنان می تواند از آن متن مجزا باشد‬aside ‫محتوای‬
.‫نوار کناری نشان داده می شوند‬
‫ یا ستون های فرعی و برای‬،‫ مثال برای نقل قول ها‬،‫این عنصر می تواند برای افکت هایی در فن چاپ استفاده شود‬
.‫ و برای محتوایی که از متن مجزا قرار می گیرند‬nav ‫تبلیغ و برای گروه های عناصر‬
73

‫عناصری که نباید استفاده کنید‬
‫پس از معرفی عناصر و ویژگی های مختلف در بخش های گذشته‪ ،‬زمان آن رسیده تا در مورد آنچه باید‬
‫در ‪ HTML5‬از آن پرهیز کنید‪ ،‬صحبت کنیم‪ .‬از زمانی که ‪ CSS‬ابداع شد‪ ،‬توسعه دهندگان وب همیشه گفته‬
‫اند که طرح باید از محتوا تفکیک شود‪ CSS .‬از سبک ها و ‪ HTML‬از محتوا و ساختار صفحه ی شما محافظت می‬
‫کند‪.‬‬
‫در ‪ HTML5‬دوران عناصر زیر به سر رسیده و نقشی در بازی ‪ HTML5‬ندارند‪ ،‬زیرا ‪ CSS‬همه ی آنها را گرفته‬
‫است‪.‬‬
‫§‬ ‫>‪<basefont‬‬
‫§‬ ‫>‪<big‬‬
‫§‬ ‫>‪<center‬‬
‫§‬ ‫>‪<font‬‬
‫§‬ ‫>‪<strike‬‬
‫§‬ ‫>‪<tt‬‬
‫§‬ ‫>‪<u‬‬
‫عناصر زیر در طراحی هیچ نقشی ندارند اما در برنامه ریزی ‪ HTML5‬موارد بدی می باشند زیرا به خاطر خسارت‬
‫های قابلیت استفاده و در دسترس بودنشان مورد سرزنش هستند‪.‬‬
‫§‬ ‫>‪<frame‬‬
‫§‬ ‫>‪<frameset‬‬
‫§‬ ‫>‪<noframes‬‬
‫عناصر زیر در ‪ HTML5‬وارد نمی شوند‪ ،‬زیرا اغلب استفاده نشده اند و ایجاد سردرگمی می کنند و همچنین‬
‫ساختار آنها توسط عناصر دیگر به کار گرفته می شود‪.‬‬
‫>‪ <acronym‬رفته و به جای آن از >‪ <abbr‬برای مخفف ها استفاده می شود‪.‬‬ ‫‪‬‬
‫>‪ <applet‬به نفع آبجکت حذف شده است‪.‬‬ ‫‪‬‬
‫استفاده ی >‪ <isindex‬می تواند توسط استفاده فرم کنترل ها جایگزین شود‪.‬‬ ‫‪‬‬
‫‪74‬‬

‫>‪ <dir‬به خاطر >‪ <ul‬کنار گذاشته شده است‪.‬‬ ‫‪‬‬
‫در انتها عنصر >‪ <noscript‬فقط با ترکیب ‪ HTML‬منطبق می شود و وارد ترکیب ‪ xml‬نمی شود‪ ،‬چرا که استفاده‬
‫ی آن به یک تجزیه گر ‪ HTML‬وابسته است‪.‬‬
‫اگر شما هنوز به استفاده از این عناصر اصرار دارید‪ ،‬صفحه ی وب شما خراب نخواهد شد و مرورگر از آن‬
‫پشتیبانی خواهد کرد‪ .‬بنابراین هزینه ی انجام آن این است که صفحه ی شما ازارزیابی ‪ HTML5‬عبور نخواهد‬
‫کرد‪.‬‬
‫ویژگی هایی که نباید استفاده کنید‬
‫در ‪ HTML5‬هیچ کدام از ویژگی ها به هدف طراحی نباید استفاده شوند‪ .‬طراحی باید به وسیله ی ‪ CSS‬محافظت‬
‫شود‪ .‬منظور من از طراحی اندازه ی فونت‪ ،‬رنگ‪ ،‬حاشیه‪ ،‬نوع فونت و هرآنچه به هدف نمایش استفاده می شود‪،‬‬
‫می باشد‪.‬‬
‫شما باید از استفاده از ویژگی هایی که در جدول زیر ارائه شده‪ ،‬بپرهیزید‪.‬‬
‫‪Attributes‬‬ ‫‪Elements‬‬
‫‪align‬‬ ‫‪caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3,‬‬
‫‪h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.‬‬
‫‪alink, link, text and body‬‬
‫‪vlink‬‬
‫‪background‬‬ ‫‪body‬‬
‫‪bgcolor‬‬ ‫‪table, tr, td, th and body‬‬
‫‪border‬‬ ‫‪table and object‬‬
‫‪cellpadding‬‬ ‫‪and table‬‬
‫‪cellspacing‬‬
‫‪char and charoff‬‬ ‫‪col, colgroup, tbody, td, tfoot, th, thead and tr‬‬
‫‪clear‬‬ ‫‪br‬‬
‫‪75‬‬

compact dl, menu, ol and ul

frame table
frameborder iframe
height td and th
hspace and vspace img and object
marginheight and iframe
marginwidth
noshade hr
nowrap td and th
rules table
scrolling iframe
size hr
type li, ol and ul
valign col, colgroup, tbody, td, tfoot, th, thead and tr
width hr, table, td, th, col, colgroup and pre
.‫امیدواریم مطالب این کتاب ربای شما مفید بوده باشد‬،‫رد پایان ضمن تشکر از انتخاب شما‬
‫ و ھﻣﭼﻧﯾن ﭘروژه طراﺣﯽ ﯾﮏ ﻓروﺷﮕﺎه را دارد دﯾدن ﮐﻧﯾد‬flexbox ‫از دوره ﺣرﻓﮫ ای طراﺣﯽ ﮐﮫ ﻣﺳﺎﯾل واﮐﻧﺷﮕراﯾﯽ ﺑﺎ‬
http://netparadis.com/tutorials/web-design/
76

HTML5 Book Netparadis PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5 Book Netparadis PDF

Uploaded by

Copyright:

Available Formats

‫ | ﻧت ﭘﺎرادﯾس‬www.netparadis.

HTML5 ‫ﮐﺗﺎب آﻣوزش‬

www.netparadis.com | ‫ﻧت ﭘﺎرادﯾس‬

‫‪7 .............................................................................................................. HTML5‬‬

‫چرا ‪ HTML5‬مهم است؟ ‪7 ..............................................................................................‬‬

‫چه وقت؟‪8 ...........................................................................................................‬‬

‫اعالم نوع داکیومنت در ‪8 ...................................................................................... HTML5‬‬

‫صدا در ‪01 .................................................................................................... HTML5‬‬

‫ویژگی های >‪01 ............................................................................................ <audio‬‬

‫ویدئو در ‪01 .................................................................................................. HTML5‬‬

‫چگونه؟ ‪01 ..........................................................................................................‬‬

‫نکات ‪06 .............................................................................................................‬‬

‫ویژگی های ویدئو ‪06 .................................................................................................‬‬

‫‪ canvas‬چیست؟ ‪08 ...................................................................................................‬‬

‫آموزش ‪01 ............................................................................................. Rectangle‬‬

‫چطور سایه بیندازیم ‪11 .................................................................................................‬‬

‫چگونه یک مسیر بکشیم ‪12 ............................................................................................‬‬

‫بوم نقاشی‪ :‬تصویر ‪12 ..................................................................................................‬‬

‫بوم نقاشی‪ :‬متن ‪17 ....................................................................................................‬‬

‫آموزش ‪11 ................................................................................................ Web form‬‬

‫ویژگی های ورودی جدید ‪11 ..........................................................................................‬‬

‫انواع ورودی های جدید ‪21 ...........................................................................................‬‬

‫جستجو ‪21 ........................................................................................................‬‬

‫اتربیوت ‪21 ............................................................................................. Placeholder‬‬

‫آموزش ‪21 ................................................................................................ Autofocus‬‬

‫آموزش ‪21 ........................................................................................... Required field‬‬

‫آموزش اتریبیوت ‪22 ........................................................................................ DataList‬‬

‫آموزش ‪26 .................................................................................................... search‬‬

‫آموزش ایمیل‪ ،‬شماره تلفن و وب سایت ‪28 .............................................................................‬‬

‫ﻧت ﭘﺎرادﯾس | ‪www.netparadis.com‬‬

11 ..................................................................................... Input Type : Range ‫آموزش‬

12 ................................................................................... Input Type : Number ‫آموزش‬

16 ................................................................................................... ‫ تاریخ‬:‫نوع ورودی‬

18 ................................................................................ (<input type=”date” />) ‫تاریخ‬

18 .............................................................................. (<input type=”week” />) ‫هفته‬

11 ................................................................................ (<input type=”time” />) ‫زمان‬

21 ............................................................. (<input type=”date and time” />) ‫تاریخ و زمان‬

21 ...................................................... (<input type=”datetime-local” />) ‫زمان و تاریخ محلی‬

21 ...................................................................................................... Color ‫آموزش‬

21 ................................................................................................. ‫به سمت وب معنایی‬

21 ....................................................................... ‫من رویایی برای وب دارم که دو بخش است‬

22 .................................................................................. ‫معنا شناسی جدید در سطح متن‬

22 ............................................................................................. ‫عناصر انسداد جدید‬

26 .......................................................................................... Semantic mark ‫آموزش‬

26 ........................................................................................... Semantic time ‫آموزش‬

28 ......................................................................................... Semantic meter ‫آموزش‬

61 ..................................................................................... Semantic progress ‫آموزش‬

61 ....................................................................................... Semantic section ‫آموزش‬

62 ............................................................................................... ‫تقسیم بندی محتوا‬

61 ....................................................................................... Semantic header ‫آموزش‬

66 ........................................................................................ Semantic footer ‫آموزش‬

61 ........................................................................................... Semantic nav ‫آموزش‬

71 ........................................................................................ Semantic article ‫آموزش‬

71 ......................................................................................... Semantic aside ‫آموزش‬

72 ................................................................................................ W3C ‫ویژگی های‬

71 ..................................................................................... ‫عناصری که نباید استفاده کنید‬

72 ................................................................................. ‫ویژگی هایی که نباید استفاده کنید‬

www.netparadis.com | ‫ﻧت ﭘﺎرادﯾس‬

‫استفاده نیستند را پوشش دهم‪.‬‬

‫را که یاد گرفته ام با شما به اشتراک بگذارم‪.‬‬

‫شخصی بودنی وجود ندارد‪.‬‬

‫برتراند راسل (‪)0171 – 0871‬‬

‫چرا ‪ HTML5‬مهم است؟‬