آموزش تصویری HTML5 به صورت کاملا تصویری و مرحله به مرحله در سطوح مقدماتی  و پیشرفته جهت استفاده شما بازدید کننده محترم در این بخش قرار گرفته است

طراحی یک صفحه واکنش گرا ساده با استفاده از تگ @media

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

دریافت آپدیت های ارسالی از سرور

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

اجرای اسکریپت ها در پس زمینه HTML5

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

ذخیره سازی اطلاعات کاربران در صفحات وب بوسیله HTML 5

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

drag & drop عناصر در صفحات وب HTML5

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

تگ source در HTML 5

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

تگ embed در HTML5

html 0از این تگ برای تعیین ظرف یا نگهدارنده جهت قرار دادن یک برنامه خارجی یا مولتی مدیا ( مثل فلش یا SWF ) بر روی صفحه استفاده می شود . برای مثال می توان به فایل های فلش یا انواع Plug-in  برای مرورگر ها اشاره نمود . با استفاده از این تگ می توان رابط صدا در صفحه را طوری تنظیم کرد که به صورت خودکار شروع به پخش موزیک کند و یا موزیک را تکرار کند یا آنرا فقط یک بار پخش کند. برای اجرای این روش باید از تگ EMBED استفاده کنید. این تگ مانند تگ عکس مورد استفاده قرار می گیرد. ابتدا باید منبع صدا را مشخص کنیم و بعد در صورت نیاز به تگ فرمانهایی را اضافه کنیم .

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

audio-HTML5ممکن است در صفحات وب نیاز داشته باشید تا به پخش و اجرای فایل های صوتی و آهنگ بپردازید . تا قبل از ارائه  HTML 5، استاندارد خاصی برای نمایش فایل های صوتی در صفحات وب وجود نداشت و طراحان وب برای پخش اینگونه فایل ها از ابزارهای جانبی مثلreal palyer و falsh player استفاده می کردند .
این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل صوتی  را پخش کند .اما HTML 5 ، یک استاندارد برای پخش فایل های صوتی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .
تگ جدید < audio > ، برای پخش فایل های صوتی در صفحات وب به کار می رود .

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

HTML5-web-design-londonبسیاری از صفحات وب به پخش و اجرای فایل های ویدیویی و فلش می پردازند . تا قبل از ارائه   HTML 5 ، استاندارد خاصی برای نمایش فایل های ویدویی در صفحات وب وجود نداشت و طراحان وب برای نمایش اینگونه فایل ها از ابزارهای جانبی مثل   falsh player  استفاده می کردند .
این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل ویدویی را نمایش دهد .
اما   HTML 5 ، یک استاندارد برای نمایش فایل های ویدویی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .
تگ جدید < video > ، برای نمایش فایل های ویدویی در صفحات وب به کار می رود .

تگ های جدید فرم در HTML 5

html5-form-3HTML5 به عنوان نسخه جدید زبان نشانه گذاری ابرمتن برای ایجاد صفحات وب گسترش داده شده است. اولین بار در ژوئن 2004 بحث برای ایجاد نسخه جدیدی از زبان نشانه گذاری HTML آغاز شد و در فوریه 2010 نسخه های تقریبا نهایی ، از این استانداردها ایجاد شدند.
Html 5 برای کارایی بهتر و سهولت طراحی فرم های وب 3 المنت جدید را به تگ های فرم اضافه کرده است . این تگ ها در فرم ها ویژگی های گوناگونی را اعمال می کنند مثلا keygen  که یک کادر ارسال رمز و دریافت رمز ایجاد می کند این تگ های جدید عبارتند از :

لیست کنترل های جدید Html 5

form-input-type-date-time-type-html5-technotipHTML5 دارای انواع مختلف ورودی های جدید برای فرم ها می باشد. این ویژگی های جدید به شما اجازه کنترل بهتر ورودی و اعتبار را می دهد.  این کنترل های جدید در <input> استفاده می شوند و قابلیت ها و امکاناتی را مثل اعتبار سنجی اطلاعات و انواع فرم های انتخابی را به کاربران می دهد . لیست زیر شامل کنترل های <input> جدید در Html5 است .

رویدادهای جدید HTML5

HTML5 stickerHTML 4 امکان استفاده از رویدادها برای ایجاد فعل و انفعال در مرورگرها را فراهم کرد.مثلا وقتی روی یک عنصر کلیک شد،یک کد جاوااسکریپت اجرا شود.در HTML 5 این کار به حد اعلا رسیده است و رویدادهای جدیدی مخصوصا برای مالتی مدیا ایجاد شده اند که بسیار کاربردی خواهند بود.با ما باشید تا این رویدادها را مرور کنیم.


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

استفاده از Css برای فرمت دادن به متن در HTML 5

html5css3-fullیاد گرفتن چگونگی ایجاد قانون های شیوه یک دنیای جدید در فرمت های HTML  باز می کند. به صورت مجازی هر چیزی که بتوانید در یک برنامه واژه پرداز انجام دهید آن کار را می توانید با استفاده از شیوه در HTML نیز انجام دهید.

شاید تعجب کنید که چرا تگ های فرمت متن ساده ای که در بخش اول دیدید, مانند <b> و <i> , هنوز هم موجود هستند . w3c روی اعمال فرمت ها با استفاده از شیوه ها تمرکز زیادی کرده است که به این معنی است شما باید سعی کنید از فرمت های مبتنی بر شیوه که در این فصل و فصل بعدی یاد می گیرید استفاده کنید. با این حال این تگ های قدیمی هنوز هم به خوبی کار می کنند و مرورگر های وب نیز به پشتیبانی از فرمت های مبتنی بر تگ برای زمان زیادی ادامه خواهند داد. اگر هم اکنون یک وب سایت بزرگ ایجاد کرده اید که از تگ های فرمت استفاده می کند, لازم نیست برای ایجاد مجدد صفحات سایت با استفاده از شیوه ها عجله کنید . با این حال برای صفحات جدید بهتر است که کار را از همان ابتدا به درستی شروع کنید.

ایجاد هایپرلینک و انکر در HTML 5

html5-hyperlinkوب مبتنی بر هایپرلینک ها است . هر صفحه وب حاوی لینک های فعالی به صفحات دیگر است که آن صفحه نیز می تواند حاوی لینک های دیگری به صفحات وب دیگر باشد و حتی ممکن است همه صفحات به یکدیگر وصل باشند. در حقیقت , نام وب (Web : تار عنکبوت)  از همین جا آمده است. هایپرلینک ها می توانند به مکان های دیگری روی یک صفحه وب , یا صفحات وب دیگر درون سایت شما یا صفحات خارج از سایت و هر نوع از محتویات وب و غیر وب وصل شده باشند .

 برای فعال کردن یک هایپرلینک (Hyperlink) روی یک متن یا گرافیک از پیش تعریف شده برای لینک کلیک می کنید و به مکان متفاوتی روی همان صفحه می روید یا صفحه وب دیگری را باز کرده , یک پیغام ایمیل را شروع می کنید , یا یک فایل را دانلود می کنید یا یک فیلم را دیده یا به یک کلیپ صوتی گوش می دهید, یا یک برنامه مبتنی بر وب را شروع می کنید و کارهایی مانند این موارد. ممکن است تا به حال روی هزاران لینک کلیک کرده باشید بدون این که درباره کد پشت سر آن ها فکر کرده باشید . بعد از این فصل چگونگی عملکرد لینک ها را درک کرده و می توانید خودتان لینک هایی را ایجاد کنید .

مشترک این خوارک خبری شوید
تک وب دیزاین-قالب فارسی جوملا