آموزش تصویری HTML5 به صورت کاملا تصویری و مرحله به مرحله در سطوح مقدماتی و پیشرفته جهت استفاده شما بازدید کننده محترم در این بخش قرار گرفته است
روز قبل آموزشی با عنوان آموزش طراحی قالب ریسپانسیو با استفاده از 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 قرار میدیم. یا حتی میتونیم به جای متن، از فایلهای صوتی فلش استفاده کنیم تا اگه مرورگر قدیمی بود، آبجکت فلش رو اجرا کنه.
از این تگ برای تعیین ظرف یا نگهدارنده جهت قرار دادن یک برنامه خارجی یا مولتی مدیا ( مثل فلش یا SWF ) بر روی صفحه استفاده می شود . برای مثال می توان به فایل های فلش یا انواع Plug-in برای مرورگر ها اشاره نمود . با استفاده از این تگ می توان رابط صدا در صفحه را طوری تنظیم کرد که به صورت خودکار شروع به پخش موزیک کند و یا موزیک را تکرار کند یا آنرا فقط یک بار پخش کند. برای اجرای این روش باید از تگ EMBED استفاده کنید. این تگ مانند تگ عکس مورد استفاده قرار می گیرد. ابتدا باید منبع صدا را مشخص کنیم و بعد در صورت نیاز به تگ فرمانهایی را اضافه کنیم .
ممکن است در صفحات وب نیاز داشته باشید تا به پخش و اجرای فایل های صوتی و آهنگ بپردازید . تا قبل از ارائه HTML 5، استاندارد خاصی برای نمایش فایل های صوتی در صفحات وب وجود نداشت و طراحان وب برای پخش اینگونه فایل ها از ابزارهای جانبی مثلreal palyer و falsh player استفاده می کردند .
این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل صوتی را پخش کند .اما HTML 5 ، یک استاندارد برای پخش فایل های صوتی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .
تگ جدید < audio > ، برای پخش فایل های صوتی در صفحات وب به کار می رود .
بسیاری از صفحات وب به پخش و اجرای فایل های ویدیویی و فلش می پردازند . تا قبل از ارائه HTML 5 ، استاندارد خاصی برای نمایش فایل های ویدویی در صفحات وب وجود نداشت و طراحان وب برای نمایش اینگونه فایل ها از ابزارهای جانبی مثل falsh player استفاده می کردند .
این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل ویدویی را نمایش دهد .
اما HTML 5 ، یک استاندارد برای نمایش فایل های ویدویی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .
تگ جدید < video > ، برای نمایش فایل های ویدویی در صفحات وب به کار می رود .
HTML5 به عنوان نسخه جدید زبان نشانه گذاری ابرمتن برای ایجاد صفحات وب گسترش داده شده است. اولین بار در ژوئن 2004 بحث برای ایجاد نسخه جدیدی از زبان نشانه گذاری HTML آغاز شد و در فوریه 2010 نسخه های تقریبا نهایی ، از این استانداردها ایجاد شدند.
Html 5 برای کارایی بهتر و سهولت طراحی فرم های وب 3 المنت جدید را به تگ های فرم اضافه کرده است . این تگ ها در فرم ها ویژگی های گوناگونی را اعمال می کنند مثلا keygen که یک کادر ارسال رمز و دریافت رمز ایجاد می کند این تگ های جدید عبارتند از :
HTML5 دارای انواع مختلف ورودی های جدید برای فرم ها می باشد. این ویژگی های جدید به شما اجازه کنترل بهتر ورودی و اعتبار را می دهد. این کنترل های جدید در <input> استفاده می شوند و قابلیت ها و امکاناتی را مثل اعتبار سنجی اطلاعات و انواع فرم های انتخابی را به کاربران می دهد . لیست زیر شامل کنترل های <input> جدید در Html5 است .
HTML 4 امکان استفاده از رویدادها برای ایجاد فعل و انفعال در مرورگرها را فراهم کرد.مثلا وقتی روی یک عنصر کلیک شد،یک کد جاوااسکریپت اجرا شود.در HTML 5 این کار به حد اعلا رسیده است و رویدادهای جدیدی مخصوصا برای مالتی مدیا ایجاد شده اند که بسیار کاربردی خواهند بود.با ما باشید تا این رویدادها را مرور کنیم.
رویداد onafterprint :
رویداد onafterprint ، پس از اینکه کاربر صفحه را برای پرینت آماده کرده و پنجره پرینت مرورگر باز می شود ، اجرا می شود.
می توان دستور یا دستوراتی را تعیین نموده و در قالب یک اسکریپت قرار داد ، تا در هنگام اجرای این رویداد، انجام شوند .
یاد گرفتن چگونگی ایجاد قانون های شیوه یک دنیای جدید در فرمت های HTML باز می کند. به صورت مجازی هر چیزی که بتوانید در یک برنامه واژه پرداز انجام دهید آن کار را می توانید با استفاده از شیوه در HTML نیز انجام دهید.
شاید تعجب کنید که چرا تگ های فرمت متن ساده ای که در بخش اول دیدید, مانند <b> و <i> , هنوز هم موجود هستند . w3c روی اعمال فرمت ها با استفاده از شیوه ها تمرکز زیادی کرده است که به این معنی است شما باید سعی کنید از فرمت های مبتنی بر شیوه که در این فصل و فصل بعدی یاد می گیرید استفاده کنید. با این حال این تگ های قدیمی هنوز هم به خوبی کار می کنند و مرورگر های وب نیز به پشتیبانی از فرمت های مبتنی بر تگ برای زمان زیادی ادامه خواهند داد. اگر هم اکنون یک وب سایت بزرگ ایجاد کرده اید که از تگ های فرمت استفاده می کند, لازم نیست برای ایجاد مجدد صفحات سایت با استفاده از شیوه ها عجله کنید . با این حال برای صفحات جدید بهتر است که کار را از همان ابتدا به درستی شروع کنید.
وب مبتنی بر هایپرلینک ها است . هر صفحه وب حاوی لینک های فعالی به صفحات دیگر است که آن صفحه نیز می تواند حاوی لینک های دیگری به صفحات وب دیگر باشد و حتی ممکن است همه صفحات به یکدیگر وصل باشند. در حقیقت , نام وب (Web : تار عنکبوت) از همین جا آمده است. هایپرلینک ها می توانند به مکان های دیگری روی یک صفحه وب , یا صفحات وب دیگر درون سایت شما یا صفحات خارج از سایت و هر نوع از محتویات وب و غیر وب وصل شده باشند .
برای فعال کردن یک هایپرلینک (Hyperlink) روی یک متن یا گرافیک از پیش تعریف شده برای لینک کلیک می کنید و به مکان متفاوتی روی همان صفحه می روید یا صفحه وب دیگری را باز کرده , یک پیغام ایمیل را شروع می کنید , یا یک فایل را دانلود می کنید یا یک فیلم را دیده یا به یک کلیپ صوتی گوش می دهید, یا یک برنامه مبتنی بر وب را شروع می کنید و کارهایی مانند این موارد. ممکن است تا به حال روی هزاران لینک کلیک کرده باشید بدون این که درباره کد پشت سر آن ها فکر کرده باشید . بعد از این فصل چگونگی عملکرد لینک ها را درک کرده و می توانید خودتان لینک هایی را ایجاد کنید .
ایجاد لیست های علامت دار و شماره دار :
تگ برای لیست شماره دار به صورت <ol> است که مخفف Ordered List (لیست دارای ترتیب) است, زیرا لیست های شماره دار برای مواردی به کار می روند که ترتیب در آن ها مهم است.
برای یک لیست گلوله دار, تگ به عصورت <ul> است که مخفف Undordered list (لیست بدون ترتیب) است زیرا این لیست ها برای مواردی به کار می روند که در آن ها ترتیب مهم نیست . هر مورد شماره دار یا گلوله دار درون لیست با <li> و </li> قرار می دهید و سپس در انتها لیست را با تگ بسته </ol> یا </ul> خاتمه می دهید.
در این جا لیستی به عنوان با مثال با استفاده از تگ <ol> ایجاد شده است :
HTML دارای یکسری قوانین ثابت و خاص می باشد. می توانید با استفاده از محتویات وب خود خلاقیت زیادی از خود نشان دهید , اما باید زیر ساختار لازم را برای مرورگر وب فراهم بیاورید تا بتواند صفحات وب شما را به خوبی خوانده و نمایش دهد . این بدان معنی است که سند باید حاوی تگ های خاصی باشد که قسمت های اصلی را مشخص کرده و به مرورگر می گویند که چه نوع کدی توسط سند استفاده شده .
در این , فصل یاد می گیرید که چگونه با استفاده از تگ های اصلی ساختار سند خود را تعیین کنید. همچنین یاد می گیرید که چگونه نوع HTML که می نویسید را مشخص کرده و چگونه قسمت های Head و Body را ایجاد نمایید . همچنین یاد می گیرید که چگونه پاراگراف ها و شکست خط ها را ایجاد کرده و یک عنوان صفحه را تعیین کرده و کلمه های کلیدی پنهان را به صفحه خود اضافه کنید تا موتورهای جستجو بتوانند صفحه شما را راحت تر پیدا کنند. در آخر نیز یک صفحه آزمایشی را روی یک سرور وب منتشر می کنید .
برای نوشتن تگ های HTML می توانید از نرم افزارهای مختلفی استفاده کنید بهترین نرم افزار برای کدنویسی HTML نرم افزار NOTEPAD ++ هست . نرم افزار Notepad به دلیل اینکه در ویندوز ها به صورت پیش فرض نصب هست و می توانید سریع به آن دسترسی پیدا کنید پیشنهاد می کنیم از آن استفاده کنید .
تفاوت Notepad با نرم افزار NOTEPAD ++ امکانات بیشتر آن می باشد که باید از اینترنت به صورت رایگان این نرم افزار را دانلود کنید .
سعی میکنیم در مباحث آتی تمام تگها به صورت کامل آموزش داده شود تا در یادگیری با مشکل مواجه نشوید . سعی کنید چند درس اول را به دقت مورد بررسی قرار دهید تا جای سوالی برای شما در مباحث بعدی پیش نیاید .
اما برای باز کردن برنامه Notepad میتوانید با زدن کلید Windows+R و تایپ Notepad و زدن Enter باز کنید .
HTML چیست ؟
به زبان ساده , یک صفحه وب (web page) یا سند HTML Document یک فایل متنی ساده است که با استفاده از HTML)) Hypertext Markup Language یا زبان علامت گذاری فرا متنی نوشته شده است تا با فرمت ها و قالب های زیبا درون یک مرورگر نمایش داده شوند. در توضیحاتی که در ادامه نوشته ام معنی Html را به صورت کلمه به کلمه می توانید مشاهده کنید :
• Hypertext : متنی که وقتی روی آن کلیک میکنید از یک سند به یک سند دیگر میرود. این توانایی یک صفحه وب برای ایجاد لینک (ارتباط) به یک صفحه وب دیگر است .
• Markup : تگ (Tag یا بر چسب)هایی که چیدمان و قالب گرافیکی را روی یک متن ساده اعمال میکنند. به عبارت دیگر , متن ساده با تگ ها "علامت گذاری (Markup)" می شود .
• Language : نشان دهنده این است که HTML به عنوان یک زبان در نظر گرفته می شود .
آشنایی با تگ های HTML
کد درون یک فایل HTML حاوی متنی است که درون تگ ها Tags قرار میگیرد .