آموزش html5

[BKM_BASIR 10]

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

[BKM_BASIR 10]

معرفی زبان HTML 5 :

HTML 5 ، ورژن جدید زبان طراحی صفحات وب یعنی HTML است . این زبان به عنوان جدیدترین استاندارد طراحی صفحات وب معرفی شده است .

HTML 4 در سال 99 میلادی به دنیای وب معرفی شد ، ولی از آن زمان تاکنون دنیای وب و نیازهای اینترنتی تغییر زیادی کرده است . بنابراین این نیاز وجود داشت تا یک استاندارد جدید معرفی شود تا بتواند نیاز های جدید کاربران را بهتر پوشش دهد .

HTML 5 هنوز در حال بروز رسانی و ویرایش است و مرورگرهای مطرح در تلاشند تا نسخه های جدید آنها ، سازگاری بهتری با این زبان جدید داشته باشد .

در HTML 5 ، قابلیت ها و امکانات جدیدی قرار داده شده است که تا قبل از این برای انجام آنها نیاز به نرم افزارهای جانبی در مرورگر ها داشتیم .

HTML 5 ، چگونه متولد شد :

HTML 5 ، حاصل همکاری و مشارکت دو نهاد اصلی استاندارد سازی وب یعنی W3C و the Web Hypertext Application Technology Working Group (WHATWG) است .

این دو نهاد به صورت مستقل در حال طراحی یک استاندارد برای وب بودند ، ولی در سال 2006 توافق کردند تا با همکاری هم HTML 5 را ایجاد نمایند .

در طراحی HTML 5 قوانین و راهکارهای زیر به صورت اجباری تعیین شد تا رعایت شوند :

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

معرفی ویژگی های جدید در HTML 5 :

در HTML 5 ، ویژگی ها و قابلیت های فراوان جدیدی قرار داده شد است که کار را برای طراحان وب بسیار ساده می کند . تا پیش از این طراحان وب برای انجام این امور نیازمند استفاده از plugin ها و نرم افزارهای جانبی مختلفی بودند .

در لیست زیر برخی از این ویژگی های جدید را به صورت مختصر معرفی کرده ایم . سپس در هر بخش جدا به آموزش نحوه کارکرد و استفاده از آنها می پردازیم :

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

نکاتی راجع به نحوه آموزش HTML 5 :

در این بخش آموزشی ، ابتدا به معرفی تگ ها و قابلیت های جدید پرداخته و سپس سعی میشه تا با ارایه مثال های عملی و سورس کد آنها ، کاربردشان را توسط مرورگر نشان دهیم .

تمامی مثال ها و مطاب این بخش بر اساس استاندارهای مرجع های آموزشی رسمی این زبان طراحی شده و با مرورگر های مطرح IE , Opera , FireFox و Chrome تست شده اند .

[BKM_BASIR 10]

نمایش ویدیو در صفحات HTML :

بسیاری از صفحات وب به پخش و اجرای فایل های ویدیویی و فلش می پردازند . تا قبل از ارائه HTML 5 ، استاندارد خاصی برای نمایش فایل های ویدویی در صفحات وب وجود نداشت و طراحان وب برای نمایش اینگونه فایل ها از ابزارهای جانبی مثل falsh player استفاده می کردند .

این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل ویدویی را نمایش دهد .

اما HTML 5 ، یک استاندارد برای نمایش فایل های ویدویی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .

تگ جدید < video > ، برای نمایش فایل های ویدویی در صفحات وب به کار می رود .

در زیر نحوه کلی استفاده از این تگ را به شما نمایش داده و سپس به توضیح موارد مطرح شده در آن می پردازیم :

شکل کلی استفاده از تگ < video > :

<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>

در این بخش به تشریح کد بالا و مواردی که ممکن است برای شما سوال ایجاد کند می پردازیم :

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

در حال حاصر 3 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در جدول زیر نمایش داده ایم :

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

در لیست زیر تگ های اصلی و مهم مرتبط با پخش ویدیو در HTML 5 را به همراه توضیحات مختصری راجع به هر کدام ، قرار داده ایم :

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

< source > : این تگ آدرس و نوع فایل ویدیویی که می خواهیم نمایش دهیم را تعیین می کند .

پخش صوت و آهنگ در صفحات HTML :

ممکن است در صفحات وب نیاز داشته باشید تا به پخش و اجرای فایل های صوتی و آهنگ بپردازید . تا قبل از ارائه HTML 5 ، استاندارد خاصی برای نمایش فایل های صوتی در صفحات وب وجود نداشت و طراحان وب برای پخش اینگونه فایل ها از ابزارهای جانبی مثلreal palyer و falsh player استفاده می کردند .

این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل صوتی را پخش کند .

اما HTML 5 ، یک استاندارد برای پخش فایل های صوتی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .

تگ جدید < audio > ، برای پخش فایل های صوتی در صفحات وب به کار می رود .

در جدول زیر نحوه کلی استفاده از این تگ را به شما نمایش داده و سپس به توضیح موارد مطرح شده در آن می پردازیم :

شکل کلی استفاده از تگ < audio > :

<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>

در این بخش به تشریح کد بالا و مواردی که ممکن است برای شما سوال ایجاد کند می پردازیم :

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

در حال حاصر 3 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در جدول زیر نمایش داده ایم :

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

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

< source > : این تگ آدرس و نوع فایل صوتی که می خواهیم پخش کنیم را تعیین می کند .

ویرایش شده در تیر 91 توسط BKM_BASIR

[majid.fathi 44]

ورودتون را به انجمن تبریک می گم

در صورتی که مطلبی را از جایی دیگه می نویسید منبع ان را ذکر کنید.

با تشکر

[Phantom Wolf مهمان]

با عرض سلام و خوش آمد گویی به دوست عزیزمون.

منبع :http://www.developer1.ir/HTML_5/

موفق و موید باشید

[radman 10]

خسته نباشید خدمت همه ی دوستان

چند وقت پیش همایشی با موضوع وب و بستر باز وب برگزار شد.

قسمت اول پاور پوینت با موضوع مروری بر HTML از آغاز تا امروز (پیشنهاد می کنم از دست ندید) را می توانید از اینجا دانلود کنید. ارائه توسط امیر عباس عبدالعلی

در صورت استقبال شما دوستان قسمت های بعدی این همایش در اختیار شما عزیزان قرار خواهم داد.

[ابوالفضل طالبی 280]

با توجه به رویکرد آموزشی انجمن تاپیک مهم شد

لطفا آموزشها را جامع تر ادامه بدهید تا کاربران استفاده مناسب کنند .. ترجیحا منابع ترجمه شده از سایتهای انگلیسی زبان و یا منابع دست اول باشه

خود من هم تا جایی که فرصت باشه به رشد این تاپیک کمک میکنم

[AHK95 10]

اول بگم که جای دوستانی که تو همایش شرکت نکردند خیلی خالی بود واقعا همایش مفیدی بود

منم تا جایی که بتونم و سوادم بکشه اموزش هایی در مرد Html5 میزارم براتون

[blazhel 16]

سلام ممنونم از دوستان اگه وقت کردم منم کمک می کنم تا اموزش های بهتر وقوی تر بشه

[radman 10]

html5نمایش ویدئو در

Example code

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

</body>
</html>

می بینید که از ویدئو هایی با پسوند

mp4 و ogg و webm

پشتیبانی میکند

(Flash is dead)

[AHK95 10]

از اونجایی که مرورگرهای قدیمی از قابلیت های جدید Html5 پشتیبانی نمیکنند با این آموزش می توانید Html5 رو به مرورگرهای قدیمی معرفی کنید تا مشکلی در نمایش سایتتون به وجود نیاد.

<!DOCTYPE HTML>
<html>

<head>

<title>Html 5</title>

<!--[if It IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![if It IE 9]-->

</head>

<body>

</body>

</html>

ویرایش شده در مرداد 91 توسط AHK95

[AHK95 10]

عنصر های جدید Html5

عنصر header : این عنصر شامل اطلاعاتی مانند عنوان،لوگو و ... می باشد.

عنصر nav : یکی از پر کاربرد ترین برچسب هاست که در تمامی پروژه ها استفاده می شود.این برچسب شامل لینک های مهم و پر کاربرد سایت می باشد.از این پس برای ایجاد منو های سایت،از این برچسب استفاده کنید.

عنصر section : این عنصر برای گروه بندی عمومی بخش های مختلف استفاده می شود. مثال زیر رو می زنم تا بهتر متوجه بشید

مثلا برای یک سایت خبری میتونید مقالات بخش های ورزشی،اقتصادی و ... رو section های خودشون قرار بدید.

عنصر article : این عنصر کاملا مثل section است با این تفاوت که برای برای گروه بندی های خصوصی تراست مانند آخرین ارسال ها ، نظرات کابران و ....

نکته : عناصر article و section را میتوان در داخل یکدیگر قرار داد.

عنصر aside : این عنصر برای مواردی استفاده میشود که تصمیم دارید یک قسمت را از بقیه قسمت ها جدا کنید.کاربرد این عنصر را می توانید در مثال زیر ببینید

- یک بخش خاص از محتوای صفحه که کاملا مستقل است(مانند محتوای برچسب های article و section)

- بلوک های تبلیغاتی

عنصر footer : این بخش یا پاورقی سایت که شامل اطلاعات مربوط به حق نشر،نام نویسنده،لینک و هر محتوایی مشابه دیگری است.این عنصر معادل <div id=”footer”> است.

این عناصر از نظر نمایش با div تفاوتی ندارند و فقط بخاطر مفهومی تر کردن این زبان اضافه شده اند.

=====================================================================================================================

دیگه ببخشید اگه بد توضیح دادم حالا یه عکس اماده میکنم که بهتر متوجه بشید.

[AHK95 10]

اینم تصویر

امیدوارم تونسه باشم مفهوم رو برسونم

[BKM_BASIR 10]

html5نمایش ویدئو در

Example code

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

</body>
</html>

می بینید که از ویدئو هایی با پسوند

mp4 و ogg و webm

پشتیبانی میکند

(Flash is dead)

در ادامه آموزش radman عزیز برای کاملتر کردن بحث برچسب video برخی از خصیصه های دیگر را قرار می هم و بابت این که چند روز نبودم معذرت خواهی می کنم

• loop با افزودن این عبارت کلیپ ما پس از اتمام به طور خودکار دوباره شروع به پخش می کند.
  
• autoplay با افزودن این عبارت کلیپ ما به محض این که صفحه لود شود شروع به پخش می کند.
  
• muted با این عبارت در ویندوز و پلیر ها نیز آشنا می باشید کار آن قطع کردن صدای کلیپ می باشد.
  
• poster به کمک این عبارت می توانید عکسی را به عنوان موضوعی از کلیپ قبل از پخش ویدیو نمایش دهید.
  

[BKM_BASIR 10]

سلام دوستان این جدول تگهای html5 هست که منبع ایرانی نداره توسط خودم از سایتهای مرجع برنامه نویسی خارجی تهیه و عکسبرداری شده

[saber 208]

این مطالب برای یادگیری html5 و css3 خیلی مفید هستش ، پیشنهاد میکنم 4 تاش رو دانلود کنید حجمش هم کمه:

توضیحاتش هم که این ها چه مقالاتی هستند:

دوست عزیز لطفا قوانین انجمن رو رعایت بفرمایید و از ارسالهای تکراری خودداری کنید الان در سه تاپیک مختلف شما این ارسال رو انجام دادید

تا لحظات دیگه پستهای اضافی شما حذف خواهند شد...

[Aftabezendegi 10]

html5نمایش ویدئو در

Example code

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

</body>
</html>

می بینید که از ویدئو هایی با پسوند

mp4 و ogg و webm

پشتیبانی میکند

(Flash is dead)

من تگ ویدئو رو گذاشتم یه تیکه مختص نمایش ویدئو ایجاد شد ولی پخش نمیکنه

[tareno 10]

میشه در مورد Attributes هاشم یکم توضیح بدید

ممنون

[tareno 10]

سلام من برای قسمت ورود میخوام از یه منوی dropdown استفاده کنم ولی نمیدونم به چه صورت هست تازه کار رو شروع کردم

مبشه راهنمایی کنید

[fanavari86 10]

سلام

برای ایجاد یه playlist از فایلهای ویدئویی باید چطور کدش رو با html5 نوشت؟

ممنون

[CO-2014 23]

درود

یه سرچ تو نت انجام بدی آموزش زیاده ولی آموزش فارسی تو این زمینه نیست یا من ندیدم.

Create A Simple HTML5 Video Playlist

[dindarloo 0]

دوستانی که قصد بهره گیری از html5 رو دارند بهتره از کروم استفاده کنند. طبق تجربیات من از فایرفاکس سازگار تره..