آموزش html5
HTML5 به عنوان یک استاندارد جدید برای طراحی وب بهوجود آمد و به دلیل قابلیتهای فراوان و پیشرفتهای آن، به سرعت تبدیل به یکی از عوامل برتر برای توسعه وب شد. این استاندارد، امکانات جدیدی را برای طراحی و توسعه صفحات وب فراهم کرده است که در ادامه به مهم ترین آن ها خواهیم پرداخت
ساختار بندی بهتر با تگ های معنایی یا Semantic Tags
HTML5 امکاناتی مانند تگ های header , footer , nav , و section را برای ساختاردهی بهتر صفحات وب فراهم کرده است. این برچسبها به توسعهدهندگان امکان میدهند تا ساختار صفحات را به صورت منطقیتر و قابل فهمتری برای موتورهای جستجو مانند گوگل و بینگ تعریف کنند.
استفاده از ویدیو و صدا بدون نیاز به افزونه
یکی از ویژگیهای برجسته HTML5 ، امکان نمایش ویدیو و صدا بدون نیاز به افزونه است. این بدان معناست که توسعهدهندگان میتوانند ویدیوها و فایلهای صوتی را به سادگی به صفحات وب اضافه کرده و کاربران بدون نیاز به نصب افزونههای خاص، از آنها لذت ببرند.
پشتیبانی از دستگاههای مختلف
یکی از مهمترین ویژگیهای HTML5، پشتیبانی از دستگاههای مختلف از جمله کامپیوترها، تبلتها، و تلفنهای همراه است. با استفاده از ویژگیهای ریسپانسیو، توسعهدهندگان میتوانند صفحات وب را به طور دقیق به اندازه نمایشگر دستگاه کاربر تنظیم کنند.
API های کاربردی
HTML5 به توسعه دهندگان APIهایی مانند Web Storage و Web Workers امکانات جدیدی را برای ذخیره دادهها در مرورگر و اجرای کد در پس زمینه به توسعهدهندگان میدهند.
امکانات گرافیکی پیشرفته
با اضافه شدن ویژگیهایی مانند Canvas و SVG، HTML5 به توسعهدهندگان امکانات گرافیکی پیشرفتهای را ارائه میدهد. این ویژگیها به توسعهدهندگان امکان میدهند تا تصاویر پویا و انیمیشنهای جذاب را به سایتهای وب خود اضافه کنند.
تطبیق و سازگاری بهتر با مرورگرهای مدرن
HTML5 با اینکه یک استاندارد جدید است، بهترین پشتیبانی را از مرورگرهای مدرن ارائه میدهد. بدین ترتیب توسعهدهندگان میتوانند به طور آسان تر از امکانات پیشرفته این مرورگرها استفاده کنند و تجربه کاربری بهتری را ارائه دهند.
شروع کار HTML5
تمام عناصر HTML به دو گروه 1) عنصر سطح بلوک (block) و 2) عناصر درون خطی تقسیم می شوند. عناصر بلوک:
در این بخش از آموزش طراحی یا صفحات وب شما را با قرار دادن ویدیو در صفحات وب یا طراحی سایت به همراه خصوصیات (attribute) آشنا خواهیم کرد .
آموزش Canvas
Canvas یک تگ HTML (<canvas>) است که از طریق آن میتوانیم با استفاده از Canvas API به طراحی و نقاشی بپردازیم.آموزش رابط Canvas HTML
آموزش اتریبیوت
Input Type در HTML5
کنترل اسلایدر یک یوزر اینترفیس (user interface) بسیار شهودی برای تنظیم یک عدد در یک دامنه می باشد. یک نمونه اسلایدر معمولا در انتخاب گر رنگ (color picker) یافت می شود، جایی که می توانیم پیکان را به سمت راست یا چپ درگ کرده و مقدار RGB درست را انتخاب کنیم.
در HTML5 می توانید عددی را به عنوان اسپینر در فیلد ورودی داشته باشد که پیکان هایی به سمت بالا و پایی در قسمت راست تکست باکس وجود دارند که برای افزایش یا کاهش این عدد به کار می روند. لطفا گالری اسپینر را در زیر ببینید
فیلد تاریخ و زمان به راحتی به شکل های مختلف وب پیدا می شوند. برنامه های نمونه مانند رزرو بلیط، تعیین وقت ملاقات، سفارش پیتزا و غیره...
در HTML5 می توانیم به سادگی ورودی رنگ را با <input type="color"> داشته باشیم. تکست باکس فقط باید مقدار رشته ی به اصطلاح simple color (رنگ ساده) را با حروف کوچک داشته باشد، به عنوان مثال #ff0000 برای رنگ قرمز، #000000 برای رنگ سیاه و #ffffff برای رنگ سفید...
آموزش Semantic
زمانی (در سال 1990) مردی به نام تیم برنرس لی دنیای پهناور وب را به وجود آورد که امروز همه ی ما آن را دوست داریم. اشتباه نکنید، او اینترنت را اختراع نکرد، اما HTML و پروتوکل HTTP را چرا. سال ها بعد او کنسرسیوم WWW را با نام مستعار W3C تاسیس کرد، سازمانی که توسعه ی وب و برقراری استاندارد HTML و چند تکنولوژی مربوط دیگر را نظارت می کرد...
علامت عنصر <mark> اجرای متنی را در یک داکیومنت نشان می دهد که به هدف مرجع و با توجه به ارتباط آن در یک کانتکست دیگر مشخص شده است.
عنصر زمان یا یک ساعت را در 24 ساعت نشان می دهد و یا یک تاریخ مشخص را در تقویم مسیحی (Gregorian calendar) با یک زمان و افست منطقه ی زمانی نشان می دهد...
Meter یک عنصر جدید در HTML5 می باشد که مقدار یک دامنه ی شناخته شده را به عنوان وسیله ی اندازه گیری نشان می دهد. کلمه ی کلیدی در اینجا دامنه ی دامنه ی شناخته شده می باشد، که بدبن معناست که شما فقط زمانی اجازه ی استفاده از آن را دارید که کاملا از مقدار حداقل و مقدار حداکثر آگاه باشید...
ویژگی های خوانده های W3C - عنصر بخش (section) یک بخش کلی از یک داکیومنت یا یک برنامه را مشخص می کند. در این متن، بخش گروه بندی معنایی محتوا با یک تیتر می باشد...
تقریبا همه ی وب سایت های مدرن یک بخش تیتر دارند که در بالای هر صفحه در داخل وب سایت نشان داده می شود. عنصر جدید header ابزاری برای آن می باشد..
مشابه header، عنصر footer نیز به پاورقی یک صفحه ی وب اشاره می کند. اکثر اوقات footer می تواند به عنوان آنچه ما در مورد آن فکر کردیم، استفاده شود...
همانطور که از نامه آن پیداست، عنصر جدید nav برای مسیریابی استفاده می شود. عنصر nav وسیله ای است برای منطقه ای با لینک های سایت های مختلف...
امروزه وب دارای اقیانوسی از مقالات خبری و مطالب وب می باشد. که به W3C دلیل خوبی برای تعریف عنصری برای مقاله به جای <div class="article">می دهد...
عنصر aside بخشی است که تا حدی به محتوای اصلی مربوط می شود، اما می تواند از آن جدا شود. در این آموزش من از عنصر aside برای نکات مربوط به موضوع استفاده می کنم. آنچه در بخش زرد رنگ بیان می شود، اطلاعات اضافه ای به خواننده ارائه می دهد، اما خواننده می تواند بدون خواندن بخش زرد رنگ به خواندن مطلب ادامه دهد. به تصویر زیر توجه کنید...
بایدها و نبایدهای HTML5
پس از معرفی عناصر و ویژگی های مختلف در بخش های گذشته، زمان آن رسیده تا در مورد آنچه باید در HTML5 از آن پرهیز کنید، صحبت کنیم. از زمانی که CSS ابداع شد، توسعه دهندگان وب همیشه گفته اند که طرح باید از محتوا تفکیک شود. CSS از سبک ها و HTML از محتوا و ساختار صفحه ی شما محافظت می کند...
در HTML5 هیچ کدام از ویژگی ها به هدف طراحی نباید استفاده شوند. طراحی بید به وسیله ی CSS محافظت شود. منظور من از طراحی اندازه ی فونت، رنگ، حاشیه، نوع فونت و هرآنچه به هدف نمایش استفاده می شود، می باشد...
از آنجایی که اکنون می دانید چطور مستطیل بکشید، احتمالا تمایل داشته باشید با انداختن سایه آن را زیباتر کنید. این کار خیلی راحت انجام می شود. لازم است که فقط چند خط بیشتر به کد برنامه خود اضافه کنید. اجازه دهید اول به چند ویژگی که در انداختن سایه دخیل هستند، نگاهی داشته باشیم.