روز قبل آموزشی با عنوان آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5 در سایت فعال شد که به طور کامل کاربرد تگ @media در آن مشخص شده است .به طور کلی ما با استفاده از Media Queries میتوانیم تعیین کنیم که صفحه قالبی که ایجاد کرده ایم در هر رزولوشن به چه شکلی نمایش داده شود . در این تمرین میخواهم به شما یاد بدهم که با استفاده از تگ @media به صفحه ایجاد شده دستور بدهید که اگر اندازه آن از 500 پیکسل کوچکتر شد رنگ پس زمینه صفحه تغییر کند .  مشاهده دمو در مرورگر

 متد SSE یا server-sent-events :
SSE  ویژگی تازه ای در Html5 است که به مرورگر این امکان را می دهد تا آپدیت های ارسالی از سمت سرور را دریافت کند . این ویژگی در گذشته به شکل دیگری  وجود داشته است . هر وقت که آپدیت ایجاد می شد مرورگر از کاربر برای دریافت و اعمال آپدیت ارسالی سوال می کرد .  اما با SSE این کار بصورت خودکار صورت می گیرد .

زبان های اسکریپتی برای ارائه تحولات و ایجاد پویایی در صفحات وب ایجاد شدند. این زبان ها با تقلید از روی زبان های برنامه نویسی ساخته شدند و بهمین دلیل دارای تشابه بسیاری با هم هستند. این زبان ها در اصل نمونه کوچک شده زبان های مادر خود هستند . تعدادی از فرمان ها و امکانات زبان های بزرگ در این زبان ها حذف شده اند . مثلا امکان نوشتن فایل یا پاک کردن فایل ها برروی سیستم کاربر مانند زبان های برنامه نویسی وجود ندارد . البته این زبان ها برای استفاده در زمینه کاری شبکه طراحی شده اند و حذف این دستورات علل خاصی ( از جمله بالا رفتن امنیت و ... ) داشته است.

یکی از ویژگی های جدیدی که به HTML 5 ، اضافه شده است ، امکان ذخیره سازی و بازیابی اطلاعات کاربران در صفحات وب توسط خاصیت با نام web storage می باشد .
برای مثال شما زمانی که وارد یک سایت می شوید و نام کاربری و پسورد خود را وارد می کنید ، مرورگر این اطلاعات را به خاطر می سپارد و این باعث می شود که دیگر وقتی از صفحات دیگر همان سایت بازدید می کنید دوباره لازم به وارد کردن اطلاعات نباشد یا اگر فردای آن روز دوباره به ان سایت مراجعه کردید مشاهده می کنید که لازم به وارد کردن دوباره اطلاعات نیست و از قبل log in کرده اید و وارد سایت شده اید .

یکی از قابلیت های هیجان انگیز و جالب HTML 5 ، این است که شما می توانید کاری کنید عنصر مورد نظرتان در صفحه وب ، قابل جابه جا شدن باشد . به عبارت دیگر کاربر بتواند آن را از نقطه ای به نقطه دیگر drag & drop کند .
برای مثال شما می توانید کدی طراحی کنید تا کاربر بتواند یک عکس را از مکان اولیه آن به یک مکان دوم که تعیین نموده اید ، به وسیله موس بلند کرده و جابه جا کند .
این کار نیازمند کد نویسی و تعریف چند تابع است . برای اینکه درک بهتری از نحوه کار داشته باشید ، ابتدا نمونه کد لازم برای انجام این عملیات را به شما نشان می دهیم . سپس مرحله به مرحله اقدام به تشریح کد می کنیم .
کد لازم برای dargable ( قابل جابه جا بودن ) یک عکس و سپس انتقال آن در جدول زیر به شما نمایش داده شده است . به کد دقت کنید . در ادامه هر مرحله از کد را توضیح داده ایم :

از این تگ می توان برای تعیین یک یا چندین فایل به عنوان منبع جهت اجرا در تگ های صوتی و تصویری <Audio> و <Video> استفاده کرد . از این تگ معمولا برای تعیین فرمت های مختلف یک موزیک یا فیلم برای تگ های <Audio> و <Video> استفاده می شود ، تا هر مرورگر فرمتی از فایل را که پشتیبانی می کند اجرا نماید .
برای مثال سه نوع فرمت avi , swf , wmv را برای یک ویدیو واحد تعیین می کنید. سپس هر مرورگر نسخه یا فرمتی که می تواند اجرا کند را نمایش می دهد .برای مقداردهی همزمان دو فایل به تگ audio ، از تگ source استفاده می‌کنیم
همچنین برای اینکه متنی برای مرورگرهای قدیمی‌تر نمایش داده بشه، تگ source رو بین دو تگ audio قرار میدیم. یا حتی میتونیم به جای متن، از فایل‌های صوتی فلش استفاده کنیم تا اگه مرورگر قدیمی بود، آبجکت فلش رو اجرا کنه.