آموزی زبان HTML با شیوه Encoding

[okhpatoos]

Doctypeدر نسخه های قبلی این تگ Doctype یکم طولانی بود که در نسخه جدید کوتاه شد:HTML 4.1 Strict:​

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 5:​

< !DOCTYPE HTML>

Syntaxدر strict XHTML حتما باید از حروف کوچک برای تگ ها استفاده کنیم، از کوتیشن استفاده کنیم و حتما تگ هایی مثل meta, input, img رو با اسلش ببندیم:​

<div id="imgwrapper"><img src="image.jpg" alt="my picture" /></div>

ولی تو HTML5 می تونیم موارد بالا رو رعایت نکنیم:​

<div>I AM A CAPITAL DIV!! ha ha!</div> <p id=abstract>We are All HTML5 Valid!</p> <input type=text/> <input type="text"/> <input type="text" />

 

[okhpatoos]

Sectionsبرای بخش بندی صفحه تگ های جدیدی معرفی شده که قراره هم کار کدنویس رو راحت کنه و هم کار موتور های جستجو رو!
چرا که با این تگ ها ، بخش های مختلف صفحه، مثل هدر ، ستون ، محتوا و… کاملا مشخص میشه

• <nav> – منوی سایت
• <aside> – ستون
• <section> – بخش مربوط به محتوا
• <header> – هدر
• <footer> – فوتر
• <article> – محتوای اصلی / مقاله

قالب بندی صفحه در نسخه های قبلی HTML:​

​

قالب بندی صفحه در HTML5:​

​

فرم ها در HTML5:برای تگ Input مقادیر Type جدیدی معرفی شده:​

<form> <input type=date/> <input type=url/> <input type=email/> <inputtype=range min=1 max=20/> <input type=number/> <input type=text/><input type=submit/> <input type=file/> </form>

• <input type=date> – یک تقویم برای انتخاب تاریخ
• <input type=url> – یک فیلد برای آدرس وب
• <input type=email> – یک فیلد برای آدرس ایمیل
• <input type=range min=1 max=20> – یک نوار اسلاید ایجاد میکند
• <input type=number> – یک فیلد برای وارد کردن عدد به همراه 2 فلش کوچک برای کاهش و افزایش
• <input type=text> – یک فیلد برایمتن معمولی
• <input type=submit> – یک دکمه ثبت معمولی
• <input type=file> – یک فیلد برای انتخاب فایل

مثلا نوع date این تقویم رو برای انتخاب تاریخ نمایش میده:​

​

خاصیت required برای فیلد ها:
با این خاصیت مشخص می کنیم که فیلد مورد حتما باید تکمیل بشه تا فرم کار کنه:​

<input type=text required/>

datalistبرای ایجاد لیست کشویی:​

<input type=text list=options/> <datalist id=options> <option label="HTML 5 Rocks" value="HTML 5 Rocks"> </option><option label="I love HTML 5"value="I love HTML 5"> </option></datalist>

multipleانتخاب چند فایل برای آپلود:​

<input type=file multiple/>

patternبرای تعیین محتوای وارد شده ؛ مثلا اگه بخوایم فقط اعداد از یک تا نه وارد بشن:​

<input type=text pattern="[1-9]"/>

 

[okhpatoos]

تصویر نمونه از فیلدهای فرم در HTML5:​

​

Canvas Elementایشون (Canvas) یکی از امکانات فوق العاده HTML5 ه که میتونه به طورمستقیم گرافیک رو درصفحه ایجاد کنه.​

<canvas> </canvas>

​

نمونه های استفاده از Canvas :​

• پاشیدن نور +
• بازی سه بعدی +++
• بازی 2 بعدی ++
• سیاره زمین سه بعدی +
• ماشین حساب +
• نقاشی و ایجاد گرافیک +++++
• ساعت +
• نمونه های بیشتر از استفاده Canvas در HTML5

 

[okhpatoos]

Web Storageایده Web Storage که در HTML5 معرفی شد ، این امکان رو میده که نرم افزار های آنلاین برای ذخیره موقت داده های شما، دیتابیس های محلی بر روی کامپیوتر شما ایجاد کنند

یعنی شما میتونید از نرم افزار های تحت وب ، آفلاین استفاده کنید!Embedded Videosبا این ویژگی ، فایل های ویدیویی به طور مستقیم درصفحه قرار میگیرن و برای نمایش به Flash Player و Silverlight و Quicktime نیازی نیست!ویدیو ها با یه تگ ساده <video> قابل نمایش میشن . حتی سایت YouTubeهم در آینده ویدیو ها رو با این فناوری نمایش میده

​

 

[okhpatoos]

معرفی زبان 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 تست شده اند .

 

[okhpatoos]

نمایش ویدیو در صفحات 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 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در جدول زیر نمایش داده ایم :


http://up.behtarin.com/uploads/eb44ab48501.jpg

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

در لیست زیر تگ های اصلی و مهم مرتبط با پخش ویدیو در 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 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در جدول زیر نمایش داده ایم :
http://up.behtarin.com/uploads/8b933349c71.jpg




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

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

 

[okhpatoos]

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

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

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

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

عنصر article : این عنصر کاملا مثل section است با این تفاوت که برای برای گروه بندی های خصوصی تراست مانند آخرین ارسال ها ، نظرات کابران و ....
نکته : عناصر article و section را میتوان در داخل یکدیگر قرار داد.
عنصر aside : این عنصر برای مواردی استفاده میشود که تصمیم دارید یک قسمت را از بقیه قسمت ها جدا کنید.کاربرد این عنصر را می توانید در مثال زیر ببینید
- یک بخش خاص از محتوای صفحه که کاملا مستقل است(مانند محتوای برچسب های article و section)
- بلوک های تبلیغاتی



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

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

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

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

 

[okhpatoos]

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 به کمک این عبارت می توانید عکسی را به عنوان موضوعی از کلیپ قبل از پخش ویدیو نمایش دهید.

 

[okhpatoos]

[h=2]طراحي حرفه اي و استاندارد[/h]
طراحي حرفه اي و استاندارد بودن يک وب سايت مي تواند کاربر را تشویق به ماندن در وب سايت نمايد ؛ ظاهر سایت باید زیبا کاربر پسند و طبق استانداردهاي طراحي سايت باشد.طراحي وب سايت نيز همانند هر مقوله ديگري از استانداردهايي پيروي مي کند.
كساني قادر به رعايت اين استانداردها در طراحي و کد نويسي مي باشند كه از دانش و تجربه كافي برخوردار بوده و نيز بتوانند اين استانداردها را با سليقه مشتري همسان نمايند .
طراحي صفحات وب امروزه به يک دانش تبديل شده و فرآيندي کاملاً فني و علمي است .طراحي سايت اگر با رعايت اصول طراحي و کد نويسي استاندارد صورت گيرد، بازدهي فواید فراوانی براي شما خواهد داشت.

ويژگي يک سايت حرفه اي و استاندارد عبارت است از:

ظاهر زيبا و کاربرپسند

کدنویسی و تنظیم محتوا طبق استاندارد های ارائه شده از طرف موتور های جستجو

ارائه محتوا با کمترین حجم ممکن برای کاهش در هزینه های جاری و افزایش سرعت بارگزاری سایت

رعایت استاندارد های بین المللی W3C

 

[okhpatoos]

[h=2]هنرنمایی موزیلا با HTML5[/h]

مدتی است که HTML5 به یکی از آیتم های خیلی ضروری در شرکتهای بزرگ فعال در زمینه وب تبدیل شده است و سرمایه گذاری های زیادی در این بخش میشود. یکی از خبرهای داغ این روزها در این زمینه اختصاص دارد به بنیاد موزیلا و راه اندازی بخش جدید در این شرکت با عنوان Mozilla Web O’ Wonder، در این بخش موزیلا با قدرت HTML5 WebGL چند دمو قابل تحسین توسط توسعه دهندگان خودش و کاربران ارائه داده است. به گفته موزیلا برای بهتر دیدن این دموهای نمایشی نیاز به فایرفاکس۴ بتا یا گوگل کروم ۹ است و بهتر است سخت افزار کارت گرافیک نیز بروز باشد. موزیلا با این کار قدرت مرورگر جدید خود را به رخ دیگر رقبای خود می‌کشد و آنها را به جنگ مرورگری بیشتری میخواند.این امکان وجود دارد که کاربران نیز با استفاده از راهنمای موزیلا برای این بخش دمو زیبایی را پیاده سازی و برای نمایش در این بخش ارسال کنند. هم اکنون در لا به لای حرفهای طراحان و توسعه دهندگان بزرگ میتوان برداشت کرد که تا قبل از ۶ ماه آینده چه دمو های فوق العاده به این بخش اضافه خواهد شد.این دمو های آماده شده در این بخش بسیار فوق العاده هستند و ایده هایی که پشت هر یک وجود دارن نشان از پتانسیل بی نهایت در این تکنولوژی های جدید دنیای وب است. توصیه میکنم حتما چندتایی از آنها را ببینید یا ویدئو هر یک را مشاهده کنید. برای مراجعه به بخش دمو های موزیلا از این لینک استفاده کنید. https://demos.mozilla.org/en-US​

 

[okhpatoos]

[h=4]درج متن های توضیحات یا Comments[/h]

از این تگ زمانی استفاده می شود که می خواهیم در کد HTML خود متنی را جهت بیان توضیحات اضافی برای بینندگان کد درج نماییم. این کد تنها توسط ویرایشگر ها قابل مشاهده است و توسط مرورگرها نادیده گرفته می شود و هیچ تاثیری در خروجی صفحه برای بینندگان ندارد. برای مثال نوشته "This is a test" که یک توضیح به حساب می آید در مرورگر کاربران نمایش داده نمی شود:​

<!-- This is a test -->

<!--This is a test-->

<!--
This is a test
-->

<!--
This is a test
This is a test
This is a test
-->

 

[okhpatoos]

آشنایی با HTML 5 و ویژگی های آن

​

جایگاه HTML در طراحی در طراحی و پیاده سازی صفحات وب و application های تحت وب، تکنولوژی های متعددی مورد استفاده قرار می گیرند که هر کدام کاربرد خاص خود را دارند. در این بین کاربردها و اهداف اصلی استفاده از HTML را در دو مورد زیر می توان خلاصه کرد: توصیف ساختار معنایی اطلاعات تولید رابط کاربری و فرم های ورود اطلاعات البته از HTML برای توصیف ساختار ظاهری اطلاعات هم استفاده می شود که امروزه این کار تقریبا منسوخ شده و این وظیفه به CSS محول شده است. به عبارت دیگه CSS برای جدا کردن ساختار ظاهری از ساختار معنایی ابداع شد. و بنابراین امروزه استفاده از تگهایی نظیر font و center و همچنین استفاده ازattribute هایی نظیر bgcolor و width داخل HTML تقریبا منسوخ شده است. در راستای جدا کردن ساختار ظاهری از HTML حتی استفاده از table برای طراحی ساختار صفحات هم به نوعی منسوخ دانسته شده و به جای آن از طراحی های مبتنی بر div و CSS استفاده میشود.

 

[okhpatoos]

[h=1]آشنایی با HTML 5 و ویژگی های آن[/h]​

جایگاه HTML در طراحی در طراحی و پیاده سازی صفحات وب و application های تحت وب، تکنولوژی های متعددی مورد استفاده قرار می گیرند که هر کدام کاربرد خاص خود را دارند. در این بین کاربردها و اهداف اصلی استفاده از HTML را در دو مورد زیر می توان خلاصه کرد: توصیف ساختار معنایی اطلاعات تولید رابط کاربری و فرم های ورود اطلاعات البته از HTML برای توصیف ساختار ظاهری اطلاعات هم استفاده می شود که امروزه این کار تقریبا منسوخ شده و این وظیفه به CSS محول شده است. به عبارت دیگه CSS برای جدا کردن ساختار ظاهری از ساختار معنایی ابداع شد. و بنابراین امروزه استفاده از تگهایی نظیر font و center و همچنین استفاده ازattribute هایی نظیر bgcolor و width داخل HTML تقریبا منسوخ شده است. در راستای جدا کردن ساختار ظاهری از HTML حتی استفاده از table برای طراحی ساختار صفحات هم به نوعی منسوخ دانسته شده و به جای آن از طراحی های مبتنی بر div و CSS استفاده میشود. فرایند تکامل HTML5 HTML 4 در سال 1997 منتشر شد. با گذشت زمان نیاز به ایجاد تغییرات برای برآوردن نیازهای جدید احساس میشد. روند کند توسعه استانداردهای وب که تحت نظارت W3C انجام میشد باعث شد تا گروهWHATWG متشکل از علاقمندان و نمایندگانی از شرکت های فعال در این عرصه نظیر Mozilla ، Opera و Apple در سال 2004 تشکیل شود. حاصل کار چند ساله این گروه در اواسط سال 2007 برای تدوین استاندارد HTML5 مورد قبول W3C واقع شد. HTML5 نسخه شماره ۵ زبان اصلی World Wide Web یعنی HTML است. این نسخه در تاریخ ۲۲ ژانویه ۲۰۰۸ بوسیله کنسرسیوم وب جهانی (W3C) منتشر شد. ایده ابتدایی این نسخه از HTML در سال ۲۰۰۴ در WHATWG کلید خورد. این گروه کاری شامل شرکت های بزرگی مانند AOL، Apple، Google، IBM، Microsoft، Mozilla، Nokia، Opera و … می باشد. نشانه های جدید HTML 5 عناصر و ویژگی های جدیدی به تگ ها (tag) ها اضافه کرده است. از لحاظ تکنیکی بعضی از این تگ ها به div و span شبیه هستند. به عنوان مثال تگ جدید nav و تگ جدید footer از این دسته هستند. بعضی دیگر از تگ های جدید مخصوص موتور های جستجو (برای ایندکس کردن اطلاعات) ، دستگاه های دارای صفحه کوچک (مانند موبایل) و یا خواننده های صوتی می باشند مانند تگ های جدید audio و video. همچنین بعضی از عناصر حذف شده اند. مانند تگ center. چه امکاناتی را میتوان از Html5 انتظار داشت؟ فضای آفلاین: Google Gears را میشناسید؟ HTML5 قرار است چیزی شبیه آن در خود داشته باشد. برای مثال میتوان باHTML5 ایمیلهای خود را به صورت آفلاین خواند. مثال دیگر این است که سایتها میتوانند برخی از اطلاعات خود را بر روی سیستم شما ذخیره کنند و این یعنی چند برابر سرعتی که الان داریم درست مثل یک "ابر کوکی". اشکال غیر منظم: با امکانات کنونی تنها شکلی که میتوان برای قسمتهای صفحه داشت مستطیل است در حالیکه در HTML5 دیگر از این محدودیت ها خبری نیست. میتوانید از هر گوشه صفحه بهترین استفاده را ببرید. حتی میتوانید تنها با کد نویسی تصاویر, نمودارها و هرچیزی را که فکر کنید در صفحه خود داشته باشید. دیگر مجبور به استفاده از فلش یا افزونه های دیگر نیستید. پخش صوت و ویدیو به صورت مستقل: اگر مطلب قبلی من در مورد فایرفاکس و پخش ویدیو بدون هیچ افزونه راخوانده باشید با این قابلیت آشنا هستید. این یعنی اینکه دیگر لازم به استفاده از Flash برای پخش ویدیو و صدا نیستید. به راحتی میتوان از یک خط کد برای اینکار استفاده کرد و در عین حال تمام قابلیتهایی نظیر عقب و جلو کردن, ذخیره ویدیو و … را در اختیار داشته باشید. مکان یابی: HTML5 میتواند مکان شما را تشخیص دهد و نتایج جستجو را بر حسب مکان شما سفارشی کند و یا اینکه ورودی های twitter شما را برچسب گذاری کند. فرم‌های هوشمندتر: جعبه های متن, checkbox ها, منوهای کشویی و تمام عناصر یک فرم هوشمندانه تر عمل خواهند کرد و به شما امکانات بیشتری برای کنترل اطلاعات خواهند داد. برای مثال شما میتوانید هنگام ورود اطلاعات صحت و اعتبار آنها را کنترل کنید. همچنین عناصر فرم تعامل بیشتری با هم خواهند داشت. تمرکز بر برنامه های تحت وب: آینده ازآن برنامه های آنلاین خواهد بود. HTML5 این امکان را میدهد که یک برنامه تحت وب بدون هیچ مشکلی با هر نوع سیستمی سازگار باشد و به کاربران این فرصت را میدهد تا بدون استفاده از ابزاری خاص از یک برنامه لذت ببرند. با HTML5 میتوان ابزارهای چت، انجمن، سایتهای drag-and-drop نوشت. تفاوت ها با HTML 4 لیست تعدادی از تفاوت های HTML 5 با HTML 4 به طور خلاصه (تعداد کمی از نمونه ها نمایش داده شده است) عبارتند از: عناصر جدید – section, video, progress, nav, meter, time, aside, canvas عناصر صفحه – header, section, footer, figure ویژگی های جدید برای تگ Input – date/time, email, url ویژگی های جدید – ping, charset, async ویژگی های عمومی (به تمامی عناصر قابل اعمال هستند) – id, tabindex,repeat عناصر حذف شده – center, font, strike تغییرات HTML5 تغییرات HTML5 بیشتر در رابطه با هر چه بهتر برآوردن دو هدفی است که پیشتر گفته شد. » تگ های جدیدی که برای توصیف بهتر ساختار معنایی اطلاعات افزوده شده عبارتند از: section , article , aside, header , footer , nav , dialog , figure » تغییرات جدید برای طراحی بهتر فرم های ورود اطلاعات، افزوده شدن انواع جدیدی از input نظیر : datetime, datetime-local, date, month, week, time, number, range, email, url تگ های جدید output و datalist » برخی از تگ های جدید برای پویا تر شدن محتوا و رابط کاربری: audio, video, canvas, meter, progress, event-source, … مشاهده لیست کامل تغییرات (در سایت W3C) :: برای مشاهده تگ های جدید اضافه شده به نسخه 5 و توضیح کوتاهی در مورد هر یک، به صفحه HTML 5 Reference مراجعه نمایید. تگ های جدید با (NEW) مشخص شده است. (در سایت W3schools) ساختار کلی یک صفحه وب مبتنی بر HTML۵ همانطور که گفته شد HTML5 تغییرات بسیاری نسبت به نسخه پیشین خود داشته است. یکی از مهمترین ویژگی های HTML5 مشخص نمودن نوع محتوا است که می‌تواند تحولی در عرصه‌ موتورهای جستجو باشد به این صورت که شما با مشخص کردن مکان دقیق مطالبتان، آنها را از قسمت‌های دیگر سایت که همیشه ثابت هستند جدا کرده و باعث دسته‌بندی صحیح محتوا برای موتورهای جستجو می‌شوید. در اینجا با تصویری ساده درباره این قابلیت HTML5 توضیح می دهیم. همانطور که در تصویر مشاهده میکنید تمامی قسمت‌ها توسط تگ‌هایی از یکدیگر جدا شده‌اند و این، کار را برای موتورهای جستجو راحت میکند. در ادامه توضیح کوتاهی در مورد تگ های موجود در تصویر ارائه می دهیم:<header> همانطور که از نامش پیداست مکان دقیق سربرگ سایت را مشخص می‌سازد و تمامی عناصر مربوط به سربرگ بین دو تگ <header> و </header> قرار می‌گیرند به صورت زیر: <header> . . </header> <aside> محتوای سایت که در کنار صفحه و جدا از محتوای اصلی تعریف شده و با محتوای قسمت های دیگر صفحه مرتبط می باشد در تگ <aside> قرار می گیرند. لینک های صفحه در این قسمت قابل تعریف می باشند. <section> از این تگ برای تعریف بخش ها در صفحه استفاده می شود. فصل ها ، سرصفحه ، پاورقی ، بخش های مربوط به تبلیغات و یا هر بخش دیگر از صفحه با این تگ مشخص و مجزا می گردد. <article> جهت تعریف محتوای خارجی از تگ <article> استفاده می شود. محتوای خارجی می تواند یک مقاله خبری از ارائه دهنده های خارجی، یک متن از وبلاگ و یا یک متن از یک بخش یا هر چیز دیگر از یک منبع خارجی باشد. <footer> تگ <footer> همانطور که از نامش پیداست برای مشخص کردن مکان پابرگ سایت یا وبلاگ استفاده میشود و تمامی عناصری که در قسمت پابرگ صفحه قرار می‌گیرند بین دو تگ <footer> و </footer> قرار می‌گیرند. در اینجا جا دارد کمی هم درباره ساختار یک صفحه وب صحبت کنیم. در نسخه قدیمی HTML یعنی نسخه ۴ آن برای شروع کدنویسی هر صفحه باید استاندارد آن صفحه تایید میشد که با کد زیر مشخص می‌شود: <!DOCTYPE html PUBLIC "-//W۳C//DTD XHTML ۱.۰ Transitional//EN" "http://www.w۳.org/TR/xhtml۱/DTD/xhtml۱-transitional.dtd"> <html xmlns="http://www.w۳.org/۱۹۹۹/xhtml"> اما در HTML۵ دیگر لازم نیست دو خط کد بنویسید تا استاندارد بین المللی HTML را مشخص کنید و فقط کافی است با کد زیر در ابتدای کدها، استانداردتان را مشخص کنید: <!DOCTYPE html> همانطور که مشاهده کردید کدها در HTML۵ بسیار بهینه‌تر از گذشته شده اند تگهای بسیاری در نسخه جدید جایگزین چندین خط کد شده‌اند. به عنوان مثال برای مشخص کردن نوع کاراکتر صفحه و تنظیم آن به UTF8 در نسخه قبلی باید کد زیر نوشته می شد: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> اما حالا در نسخه جدید فقط کافی است از کد زیر استفاده کنید: <meta charset="UTF-۸"> این کدها در مورد فایلهای موجود در صفحه سایت نیز صدق میکنند. شما قبلا برای قراردادن یک اجرا کننده صوتی یا تصویری در سایت باید از چندین خط کد استفاده میکردید و برای داشتن یک اجرا کننده خوش‌ساخت باید دست به دامان جاوا اسکریپت و فلش میشدید ولی در HTML5 به راحتی و فقط با یک تگ می‌توانید یک اجرا کننده فایلهای صوتی و تصویری با ظاهری زیبا داشته باشید. سازگاری مرورگرها با HTML5 اکثر مرورگر ها به غیر از IE همگام با استاندارد ها پیش میروند و کم و بیش از استاندارد های جدید پشتیبانی میکنند. هم اکنون نسخه های بتای firefox3 و opera9.5 تا حدودی از HTML5 پشتیبانی میکنند. قطعا زمانیکه HTML5 از پیش نویس خارج شده و کاربردی شود این مرورگر ها هم از نسخه بتا خارج شوند، میتوان انتظار داشت تا از HTML5 و CSS3 پشتیبانی قابل قبولی داشته باشند. با توجه به این که اکثر کاربران این مرورگرها از نسخه های آپدیت استفاده میکنند در آینده نزدیک مشکل خاصی با این مرورگرها وجود نخواهد داشت. اما IE که متاسفانه حدود 75 درصد از کاربران وب از آن استفاده میکنند. بعید به نظر میرسد که در آینده نزدیک (و یا حتی دور) پشتیبانی قابل قبولی از HTML5 و CSS3 داشته باشد. IE6 در سال 2001 منتشر شد و در سال 2005 نسخه ی 7 این مرورگر در حالی منتشر شد که پیشرفت چشمگیری نسبت به نسخه قبل نداشت و حتی هنوز از CSS2 هم پشتیبانی خوبی نداشت. و اگر مایکروسافت این روند را در پیش بگیرد نمیتوان به IE8 امیدوار بود. HTML5، طراحان وب و مرورگرها از آنجایی که سازگاری یکسان همه مرورگرها با استاندارد های وب ظاهرا" رؤیایی بیش نیست. لذا طراحان وب چاره ای ندارند جز اینکه خودشان طرح ها یشان را با مرورگر ها سازگار کنند. برای مثال برای پشتیبانی از canvas در IE میتوان از explorercanvas استفاده کرد که در واقع canvas شبیه سازی شده با استفاده از جاوااسکریپت و vml است. HTML5 و CSS3 برای راحت تر و بهتر شدن طراحی بوجود آمده اند ولی با توصیفاتی که ذکرش رفت، طراحی با تکنولوژی های جدید و در عین حال سازگار بودن با تمام مرورگرها کار را دشوار تر میکند. اما چاره ای نیست چون گذر از این مراحل برای پیشرفت لازم است حتی اگر دشوار باشد و حتی اگر موانعی نظیر IE بر سر راه باشد. نکته: XHTML5 در واقع همان HTML5 با رعایت قوانین XML هست. ولی در مورد XHTML2.0 بر خلاف XHTML1 که بر اساس HTML4 توسعه یافته، XHTML 2.0 کاملا مستقل از HTML5 هست و حتی با XHTML 1.1 هم سازگاری ندارد.

 

[Mircosoft Corporation]

در html4 و همین طور html5 استفاده از تگ <font> صحیح نیست و بد شناخته شده است