# آموزش HTML 5

در بخش آموزش HTML5 ، که یکی از بخش های جدید سایت است به معرفی و آموزش ورژن جدید زبان استاندارد طراحی صفحات وب می پردازيم . HTML 5 دارای قابلیت ها و امکانات جدیدی است که کار را برای طراحان وب بسیار ساده می کند . از جمله این امکانات می توان به پخش فایل های صوتی و تصویری بدون نیاز به نرم افزار جانبی خاص و یا طراحی اشیا به صورت 2 بعدی اشاره کرد . در اين بخش سعی شده است ، تا با ارائه مثال های عملی همراه با کد اصلی برنامه و خروجی واقعی ، نحوه ايجاد يک وب سايت را تشريح کرد .

[h=2]مقدمه آموزش HTML 5 - معرفی ویژگی های جدید[/h] معرفی زبان HTML 5 :
HTML 5 ، ورژن جدید زبان طراحی صفحات وب یعنی HTML است . این زبان به عنوان جدیدترین استاندارد طراحی صفحات وب معرفی شده است .
قبلا در بخش آموزش HTML در همین سایت ، به معرفی و آموزش ورژن قدیمی تر این زبان یعنی HTML 4 پرداختیم . HTML 4 در سال 99 میلادی به دنیای وب معرفی شد ، ولی از آن زمان تاکنون دنیای وب و نیازهای اینترنتی تغییر زیادی کرده است . بنابراین این نیاز وجود داشت تا یک استاندارد جدید معرفی شود تا بتواند نیاز های جدید کاربران را بهتر پوشش دهد .
HTML 5 هنوز در حال بروز رسانی و ویرایش است و مرورگرهای مطرح در تلاشند تا نسخه های جدید آنها ، سازگاری بهتری با این زبان جدید داشته باشد .
در HTML 5 ، قابلیت ها و امکانات جدیدی قرار داده شده است که تا قبل از این برای انجام آنها نیاز به نرم افزارهای جانبی در مرورگر ها داشتیم . در این بخش به معرفی این ویژگی های جدید خواهیم پرداخت .

​

[HR][/HR] HTML 5 ، چگونه متولد شد :
HTMKL 5 ، حاصل همکاری و مشارکت دو نهاد اصلی استاندارد سازی وب یعنی W3C و the Web Hypertext Application Technology Working Group (WHATWG) است .
این دو نهاد به صورت مستقل در حال طراحی یک استاندارد برای وب بودند ، ولی در سال 2006 توافق کردند تا با همکاری هم HTML 5 را ایجاد نمایند .
در طراحی HTML 5 قوانین و راهکارهای زیر به صورت اجباری تعیین شد تا رعایت شوند :

1. تمام قابلیت های جدید باید بر پایه HTML , CSS و جاوا اسکریپت باشند .
2. باید نیاز به plugin ها و نرم افزارهای جانبی مثل فلش کاهش یابد .
3. سیستم عیب یابی و رفع نقص عیب HTML بهبود یابد .
4. سعی شود در طراحی صفحات وب نیاز کمتری به اسکریپت ها باشد .
5. HTML 5 باید در اجرا مستقل از سیستم و کامپیوتر باشد .

[HR][/HR] معرفی ویژگی های جدید در HTML 5 :
در HTML 5 ، ویژگی ها و قابلیت های فراوان جدیدی قرار داده شد است که کار را برای طراحان وب بسیار ساده می کند . تا پیش از این طراحان وب برای انجام این امور نیازمند استفاده از plugin ها و نرم افزارهای جانبی مختلفی بودند .
در لیست زیر برخی از این ویژگی های جدید را به صورت مختصر معرفی کرده ایم . سپس در هر بخش جدا به آموزش نحوه کارکرد و استفاده از آنها پرداخته ایم :

• اضافه شدن تگ < canvas > ، برای طراحی اشیا و اشکال به صورت 2 بعدی .
• اصافه شدن تگ < video > و < audio > برای اجرای فایل های صوتی و تصویری بدون نیاز به یک نرم افزار جانبی مثل Flash Player .
• کنترل های جدید فرم مثل calendar , email , date و time اضافه شده اند ، که طراحی و برنامه نویسی فرم ها را بسیار ساده می کند .
• امکان ذخیره اطلاعات بر روی مرورگر کاربر - این قابیلت تقریبا کار کوکی ها cookie را در صفحات HTML انجام می دهند .

[HR][/HR] نکاتی راجع به نحوه آموزش HTML 5 :
در این بخش آموزشی ، ابتدا به معرفی تگ ها و قابلیت های جدید پرداخته و سپس سعی شده تا با ارایه مثال های عملی و سورس کد آنها ، کاربردشان را به صورت اکتیو توسط مرورگر نشان دهیم .
تمامی مثال ها و مطاب این بخش بر اساس استاندارهای مرجع های آموزشی رسمی این زبان طراحی شده و با مرورگر های مطرح IE , Opera , FireFox و Chrome تست شده اند .
به این بخش یک قسمت جدید نیز اضافه کرده ایم که در آن پشتیانی یا عدم پشتیبانی مرورگرهای مطرح از خواص ذکر شده را بررسی کرده ایم .

 

پاسخ : # آموزش HTML 5

[h=2]آموزش HTML 5 - پخش فایل های تصویری در صفحات وب[/h] نمایش ویدیو در صفحات HTML :
بسیاری از صفحات وب به پخش و اجرای فایل های ویدیویی و فلش می پردازند . تا قبل از ارائه HTML 5 ، استاندارد خاصی برای نمایش فایل های ویدویی در صفحات وب وجود نداشت و طراحان وب برای نمایش اینگونه فایل ها از ابزارهای جانبی مثل falsh player استفاده می کردند .
این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل ویدویی را نمایش دهد .
اما HTML 5 ، یک استاندارد برای نمایش فایل های ویدویی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .
تگ جدید < video > ، برای نمایش فایل های ویدویی در صفحات وب به کار می رود .
در جدول زیر نحوه کلی استفاده از این تگ را به شما نمایش داده و سپس به توضیح موارد مطرح شده در آن می پردازیم :
[TABLE="class: ex"]
[TR]
[TD="class: prname"] شکل کلی استفاده از
< video > تگ [/TD]
[TD="class: prdes, align: left"] <video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video> [/TD]
[/TR]
[/TABLE]
در این بخش به تشریح کد بالا و مواردی که ممکن است برای شما سوال ایجاد کند می پردازیم :

1. خواص width و height : این خواص ابعاد فریم نمایش ویدیو را تعیین می کنند . تعیین این پارامترها اجباری نیست ، اما تعیین آنها از قبل ، این امکان را به مرورگر و طراح صفحه می دهد تا قبل از اجرای صفحه میزان فضای لازم برای این تگ را در نظر گرفته و طرح صفحه به هم نریزد . اگر مقدار این خواص تعیین نشوند ، فریم پخش ویدیو به اندازه سایز فایل ویدویی در خواهد آمد .
2. خاصیت controls : مقدار دهی خاصیت controls ، باعث می شود تا مرورگر دکمه های پخش ، توقف و تنظیم صدا را به کاربر نمایش دهد . در حالت پیش فرض این کنترل ها نمایش داده نمی شوند .
3. تعیین چند فرمت برای فایل ویدویی توسط تگ < source > : همانطور که متوجه شده اید ، چند فرمت مختلف از یک فایل یکسان را به وسیله تگ < source > در درون تگ < video > قرار داده ایم . این کار به این دلیل است که مرورگرهای مختلف از فرمت های خاص ویدویی پشتیانی می کنند که اسامی آنها در جدول زیر آمده است . هر مرورگر هنگامی که یه این کد می رسد ، فرمتی که خود می تواند اجرا کند را پخش می کند . این کار برای سازگاری با مرورگرهای مختلف است .

در حال حاصر 3 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در جدول زیر نمایش داده ایم :
[TABLE="class: ex"]
[TR]
[TD="class: header"] Ogg [/TD]
[TD="class: header"] WebM
[/TD]
[TD="class: header"] MP4 [/TD]
[TD="class: header"] نوع مرورگر [/TD]
[/TR]
[TR]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: body, align: center"] No [/TD]
[TD="class: header"] [/TD]
[/TR]
[TR]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: body, align: center"] No [/TD]
[TD="class: header"] [/TD]
[/TR]
[TR]
[TD="class: body, align: center"] No [/TD]
[TD="class: body, align: center"] No [/TD]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: header"] [/TD]
[/TR]
[TR]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: header"] [/TD]
[/TR]
[/TABLE]

 

پاسخ : # آموزش HTML 5

تگ های مربوط به پخش ویدیو در صفحات وب "

در لیست زیر تگ های اصلی و مهم مرتبط با پخش ویدیو در HTML 5 را به همراه توضیحات مختصری راجع به هر کدام ، قرار داده ایم . برای دریافت اطلاعات بیشتر بر روی نام آن تگ کلیک نمایید :
[TABLE="class: ex"]
[TR]
[TD="class: header"] شرح [/TD]
[TD="class: header"] تگ [/TD]
[/TR]
[TR]
[TD="class: body, align: right"] این تگ تگ اصلی پخش ویدیو در HTML 5 است ، که به وسیله آن کد لازم برای نمایش ویدیو را قرار می دهیم . [/TD]
[TD="class: header"] < video > [/TD]
[/TR]
[TR]
[TD="class: body, align: right"] این تگ آدرس و نوع فایل ویدیویی که می خواهیم نمایش دهیم را تعیین می کند . [/TD]
[TD="class: header"] < source > [/TD]
[/TR]
[/TABLE]

 

پاسخ : # آموزش HTML 5

مثال عملی استفاده از تگ < video > و نمایش ویدیو در صفحه :

مثال : در مثال زیر کاربرد تگ < video > را در عمل و نمایش یک ویدیو را به شما نمایش داده ایم :
نکته : اگر مرورگر شما از تگ < video > پشتیانی نکند ، پیام هشدار قرار داده شده در کد مثال نمایش داده خواهد شد .
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 3"] Example [/TD]
[/TR]
[TR]
[TD="class: body"] <video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>[/TD]
[/TR]
[/TABLE]

 

پاسخ : # آموزش HTML 5

مثال : در مثال دوم ، همان مثال قبل را بازنویسی کرده ایم ، با این تفاوت در آن خاصیت controls را مقدار د هی نکرده ایم . می بینید که ویدیو دکمه های پخش و توقف را ندارد :
نکته : اگر مرورگر شما از تگ < video > پشتیانی نکند ، پیام هشدار قرار داده شده در کد مثال نمایش داده خواهد شد .

[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 3"] Example [/TD]
[/TR]
[TR]
[TD="class: body"] <video width="320" height="240" >
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
[/TD]
[/TR]
[/TABLE]

 

پاسخ : # آموزش HTML 5

[h=2]آموزش HTML 5 - پخش فایل های صوتی در صفحات وب[/h] پخش صوت و آهنگ در صفحات HTML :
ممکن است در صفحات وب نیاز داشته باشید تا به پخش و اجرای فایل های صوتی و آهنگ بپردازید . تا قبل از ارائه HTML 5 ، استاندارد خاصی برای نمایش فایل های صوتی در صفحات وب وجود نداشت و طراحان وب برای پخش اینگونه فایل ها از ابزارهای جانبی مثلreal palyer و falsh player استفاده می کردند .
این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل صوتی را پخش کند .
اما HTML 5 ، یک استاندارد برای پخش فایل های صوتی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .
تگ جدید < audio > ، برای پخش فایل های صوتی در صفحات وب به کار می رود .
در جدول زیر نحوه کلی استفاده از این تگ را به شما نمایش داده و سپس به توضیح موارد مطرح شده در آن می پردازیم :
[TABLE="class: ex"]
[TR]
[TD="class: prname"] شکل کلی استفاده از
< audio > تگ [/TD]
[TD="class: prdes, align: left"] <audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support the audio elemet.
</audio> [/TD]
[/TR]
[/TABLE]
در این بخش به تشریح کد بالا و مواردی که ممکن است برای شما سوال ایجاد کند می پردازیم :

1. خاصیت controls : مقدار دهی خاصیت controls ، باعث می شود تا مرورگر دکمه های پخش ، توقف و تنظیم صدا را به کاربر نمایش دهد . در حالت پیش فرض این کنترل ها نمایش داده نمی شوند .
2. تعیین چند فرمت برای فایل صوتی توسط تگ < source > : همانطور که متوجه شده اید ، چند فرمت مختلف از یک فایل یکسان را به وسیله تگ < source > در درون تگ < audio > قرار داده ایم . این کار به این دلیل است که مرورگرهای مختلف از فرمت های خاص صوتی پشتیانی می کنند که اسامی آنها در جدول زیر آمده است . هر مرورگر هنگامی که یه این کد می رسد ، فرمتی که خود می تواند اجرا کند را پخش می کند . این کار برای سازگاری با مرورگرهای مختلف است .

در حال حاصر 3 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در جدول زیر نمایش داده ایم :
[TABLE="class: ex"]
[TR]
[TD="class: header"] Ogg [/TD]
[TD="class: header"] WebM [/TD]
[TD="class: header"] MP3 [/TD]
[TD="class: header"] نوع مرورگر [/TD]
[/TR]
[TR]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: body, align: center"] No [/TD]
[TD="class: header"] [/TD]
[/TR]
[TR]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: body, align: center"] No [/TD]
[TD="class: header"] [/TD]
[/TR]
[TR]
[TD="class: body, align: center"] No [/TD]
[TD="class: body, align: center"] No [/TD]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: header"] [/TD]
[/TR]
[TR]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: body, align: center"] Yes [/TD]
[TD="class: header"] [/TD]
[/TR]
[/TABLE]

 

پاسخ : # آموزش HTML 5

تگ های مربوط به پخش صوت و آهنگ در صفحات وب :

در لیست زیر تگ های اصلی و مهم مرتبط با پخش صوت در HTML 5 را به همراه توضیحات مختصری راجع به هر کدام ، قرار داده ایم . برای دریافت اطلاعات بیشتر بر روی نام آن تگ کلیک نمایید :
[TABLE="class: ex"]
[TR]
[TD="class: header"] شرح
[/TD]
[TD="class: header"] تگ [/TD]
[/TR]
[TR]
[TD="class: body, align: right"] این تگ ، تگ اصلی پخش صوت در HTML 5 است ، که به وسیله آن کد لازم برای نمایش صوت را قرار می دهیم . [/TD]
[TD="class: header"] < audio > [/TD]
[/TR]
[TR]
[TD="class: body, align: right"] این تگ آدرس و نوع فایل صوتی که می خواهیم پخش کنیم را تعیین می کند . [/TD]
[TD="class: header"] < source > [/TD]
[/TR]
[/TABLE]

 

پاسخ : # آموزش HTML 5

مثال عملی استفاده از تگ < audio > و نمایش ویدیو در صفحه :

مثال : در مثال زیر کاربرد تگ < audio > را در عمل و پخش یک آهنگ را به شما نمایش داده ایم :
نکته : اگر مرورگر شما از تگ < audio > پشتیانی نکند ، پیام هشدار قرار داده شده در کد مثال نمایش داده خواهد شد .
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 3"] Example [/TD]
[/TR]
[TR]
[TD="class: body"] <audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support the audio tag.
</audio>[/TD]
[/TR]
[/TABLE]

 

پاسخ : # آموزش HTML 5

مثال : در مثال دوم ، همان مثال قبل را بازنویسی کرده ایم ، با این تفاوت در آن خاصیت controls را مقدار دهی نکرده ایم . می بینید که پخش صوت دکمه های پخش و توقف را ندارد :
نکته : اگر مرورگر شما از تگ < audio > پشتیانی نکند ، پیام هشدار قرار داده شده در کد مثال نمایش داده خواهد شد .

[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 3"] Example [/TD]
[/TR]
[TR]
[TD="class: body"] <audio >
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support the audio tag.
</audio>[/TD]
[/TR]
[/TABLE]

 

پاسخ : # آموزش HTML 5

[h=2]آموزش HTML 5 - drag & drop عناصر در صفحات وب[/h] drag & drop عناصر در صفحات وب :
یکی از قابلیت های هیجان انگیز و جالب HTML 5 ، این است که شما می توانید کاری کنید عنصر مورد نظرتان در صفحه وب ، قابل جابه جا شدن باشد . به عبارت دیگر کاربر بتواند آن را از نقطه ای به نقطه دیگر drag & drop کند .
برای مثال شما می توانید کدی طراحی کنید تا کاربر بتواند یک عکس را از مکان اولیه آن به یک مکان دوم که تعیین نموده اید ، به وسیله موس بلند کرده و جابه جا کند .
این کار نیازمند کد نویسی و تعریف چند تابع است . برای اینکه درک بهتری از نحوه کار داشته باشید ، ابتدا نمونه کد لازم برای انجام این عملیات را به شما نشان می دهیم . سپس مرحله به مرحله اقدام به تشریح کد می کنیم .
کد لازم برای dargable ( قابل جابه جا بودن ) یک عکس و سپس انتقال آن در جدول زیر به شما نمایش داده شده است . به کد دقت کنید . در ادامه هر مرحله از کد را توضیح داده ایم :
[TABLE="class: ex"]
[TR]
[TD="class: prname"] نمونه کد [/TD]
[TD="class: prdes, align: left"] <head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
</body> [/TD]
[/TR]
[/TABLE]
ممکن است کد بالا در نگاه اول بسیار پیچیده باشه ، ولی در ادامه آن را جز به جز شرح داده ایم ، تا متوجه نحوه کار شوید .
[HR][/HR] مرحله اول - عنصر مورد نظر را قابل جا به جا کردن کنید :
در مرحله اول باید کاری کنید تا عنصر مورد نظرتان برای drag & drop کردن ، قابل جا به جا شدن باشد .
برای این منظور بایر مقدار خاصیت drggable آن را بر روی مقدار true تنظیم نمایید .
[TABLE="class: ex"]
[TR]
[TD="class: prname"] کد لازم [/TD]
[TD="class: prdes, align: left"] < img draggable = " true " /> [/TD]
[/TR]
[/TABLE]

[HR][/HR] مرحله دوم - تعیین عنصری که می خواهید جا به جا شود :
در مرحله دوم باید عنصری را که می خواهید جا به جا شود و همچنین اتفاقی که پس از darg کردن آن قرار است بیفتد را تعیین می کنید .
کد مربوط به این قسمت ، قطعه کد زیر است :
[TABLE="class: ex"]
[TR]
[TD="class: prname"] کد لازم [/TD]
[TD="class: prdes, align: left"] function drag ( ev )
{
ev.dataTransfer.setData ( " Text " , ev.target.id ) ;
} [/TD]
[/TR]
[/TABLE]
در کد بالا ، خاصیت ondragstart عنصر عکس تگ ( < img > ) ، رویداد ( drag ( event را فراخوانی می کند . این رویداد تعیین می کند چه عنصری می خواهد drag شود . این رویداد زمانی اتفاق می افتد که شما دکمه موس را بر روی عکس کلیک کرده و سعی می کنید آن را بکشید .
متد ( ) dataTransfer.setData اطلاعات عنصری که قرار است darg شود ، یعنی id آن را دریافت کرده و در حافظه مرورگر قرار می د هد . این id از نوع " text " بوده و مقدار آن در این مثال drag1 است .
[HR][/HR] مرحله سوم - عنصر darg شده در کجا drop شود ؟ :
پس از اینکه عنصر مورد نظر را انتخاب کرده و آن را drag کردیم ، باید مکانی که فرود ( drop ) می آید را تعیین کنیم . این کار توسط کد زیر انجام می شود :
[TABLE="class: ex"]
[TR]
[TD="class: prname"] کد لازم [/TD]
[TD="class: prdes, align: left"] function drop(ev)
{
var data = ev.dataTransfer.getData( " Text " ) ;
ev.target.appendChild ( document.getElementById ( data ) );
ev.preventDefault( );
} [/TD]
[/TR]
[/TABLE]
هنگامی که عکس را در مکان تعیین شده رها می کنید ، رویداد ondrop تگ < div > رخ داده و تابع drop را فراخوانی می کند ..تابع drop توسط متد ( ) ev.dataTransfer.getData ، شناسه یا همان id عنصر drag شده را دریافت کرده و با متد ev.target.appendChild آن را به تگ div مرتبط می سازد .
مشاهده خروجی کد مثال :
خروجی اکتیو کد بالا در جدول زیر نمایش داده شده است عکس لوگوی HTML 5 را drag & drop کرده و در تگ div تعیین شده ، رها کنید :
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 3"] Example [/TD]
[/TR]
[TR]
[TD="class: body"]

​

[/TD]
[TD="class: header"] خروجی [/TD]
[/TR]
[/TABLE]