آشنایی با مهاجرت به HTML5
آشنایی با مهاجرت به HTML5
مهاجرت از HTML4 به HTML5
چگونه از ورژن های قدیمی HTML به HTML5 مهاجرت کنیم؟ منظور از مهاجرت به HTML5 چیست؟ تغییر کد ها از HTML4 به HTML5 چگونه است؟ چطور میتونیم از HTML4 به HTML5 مهاجرت کنیم؟ همه این سوالات را در این مقاله مورد بررسی قرار میدهیم.
- 1 مهاجرت به html5
- 1.1 نمونه یک صفحه HTML4
- 1.2 تغییر خاصیت Doctype در HTML5
- 1.3 مهاجرت انکود ها
- 1.4 اضافه کردن html5shiv برای پشتیبانی مرورگر های قدیمی
- 1.5 تغییر تگهای معنایی و شروع مهاجرت به HTML5
- 1.6 نتیجه نهایی مهاجرت
- 2 تفاوت بین <article>، <section> و <div>
مهاجرت به html5
در این مقاله قصد داریم که به موضوع مهاجرت از نسخه های قدیمی HTML به HTML5 صحبت کنیم.
در این مقاله نحوه تبدیل صفحات HTML4 به HTML5 بدون از بین بردن چیزی از محتوای اصلی به تصویر کشیده می شود. شما می توانید از روش های گفته شده برای مهاجرت ازX HTMLبه HTML5 استفاده کنید.
نمونه یک صفحه HTML4
در زیر نمونه کدی از یک صفحه HTML4 را مشاهده میکنید. در این مقاله میخواهیم این کد را از HTML4 به HTML5 بروزرسانی کنیم.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>HTML4</title> <style> body { font-family: Verdana,sans-serif; font-size: 0.9em; } div#header, div#footer { padding: 10px; color: white; background-color: black; } div#content { margin: 5px; padding: 10px; background-color: lightgrey; } div.article { margin: 5px; padding: 10px; background-color: white; } div#menu ul { padding: 0; } div#menu ul li { display: inline; margin: 5px; } </style> </head> <body> <div id="header"> <h1>Monday Times</h1> </div> <div id="menu"> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul> </div> <div id="content"> <h2>News Section</h2> <div class="article"> <h2>News Article</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p> </div> <div class="article"> <h2>News Article</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p> </div> </div> <div id="footer"> <p>&copy; 2016 Monday Times. All rights reserved.</p> </div> </body> </html>
در ادامه شروع به بروزرسانی کد ها به HTML5 میکنیم. با ما همراه باشید.
تغییر خاصیت Doctype در HTML5
اولین خاصیت یا کدی که هر صفحه HTML در خود دارد خاصیت Doctype هستش. این خاصیت به ما اعلام میکند که صفحه ای که درحال استفاده از آن هستیم از نظر استاندارد از استاندارد HTML استفاده میکند.
در زیر استاندارد Doctype برای HTML4 را مشاهده میکنید.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
تبدیل Doctype به HTML5
در نسخه HTML5 دیگر توضیحات بسیار زیادی که در Doctype های نسخه های قدیمی وجود دارد دیگر حذف شده است و به جای آن فقط یک Doctype HTML مانند نمونه زیر قرار میدهیم و دیگر از طولانی نویسی پرهیز شده است.
<!DOCTYPE html>
مهاجرت انکود ها
همانطور که در مقاله آشنایی با Charset ها وآشنایی با Meta Tag ها بار ها انکود های مختلف را توضیح دادیم. باز هم لازمه که نمونه ای از انکود ها را اینبار برای مهاجرت بررسی کنیم.
در زیر نمونه ای از Charset موجود در HTML4 را مشاهده میکنید که باید برای پشتیبانی آن در نسخه HTML5 به صورت کامل تغییر کند.
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
مهاجرت به انکود HTML5
در انکود نسخه HTML5 مانند Doctype اطلاعات اضافه مثل http-equiv و … حذف شده و با قرار دادن یک خاصیت به نام charset دیگر کار تمام است و انکود شما به HTML5 تبدیل میشود. دقیقا کد زیر جایگزینی برای کدی است که در بالا برای HTML4 استفاده شده است.
<meta charset="utf-8">
اضافه کردن html5shiv برای پشتیبانی مرورگر های قدیمی
در html5 یک عنصر معنایی جدید اضافه شده است که توسط همه مروگر مدرن پشتیبانی می شود. به علاوه شما می توانید به مرورگر های قدیمی بیاموزید.
به هر حال، مرورگر IE8 و قبل از آن اجازه استایل دهی به عناصر ناشناس را نمی دهد. بنابراین html5shiv یک راه حل جاوا اسکریپتی است که اجازه می دهد عناصر ناشناخته در html5 برای مرورگر IE9 و قبل از آن قابل استایل دهی باشند.
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]-->
در رابطه با این موضوع در مقاله رفع مشکل HTML5 در مرورگر های مختلف به صورت کامل توضیح دادهایم.
آشنایی با مهاجرت به HTML5
تغییر تگهای معنایی و شروع مهاجرت به HTML5
امیدوارم قبل از ورود به این مقاله، در رابطه با تگ های معنایی موجود در HTML5 اطلاعات داشته باشید.
اگر در رابطه با این مقالات نمیدانید، پیشنهاد میکنم حتما قبلش اطلاعات لازم را در این رابطه بدست آورید، همچنین میتوانید مقاله ما در رابطه باآشنایی با HTML5 را بخوانید.
کد های CSS :
برای تغییر کد های css که حاوی id و class برای استایل دهی هستند از نمونه زیر استفاده کنید:
body { font-family: Verdana,sans-serif; font-size: 0.9em; } div#header, div#footer { padding: 10px; color: white; background-color: black; } div#content { margin: 5px; padding: 10px; background-color: lightgrey; } div.article { margin: 5px; padding: 10px; background-color: white; } div#menu ul { padding: 0; } div#menu ul li { display: inline; margin: 5px; }
جایگزینی کد های استایل css برای عناصر معنایی html5 به شکل زیر:
body { font-family: Verdana,sans-serif; font-size: 0.9em; } header, footer { padding: 10px; color: white; background-color: black; } section { margin: 5px; padding: 10px; background-color: lightgrey; } article { margin: 5px; padding: 10px; background-color: white; } nav ul { padding: 0; } nav ul li { display: inline; margin: 5px; }
جایگزینی تگهای معنایی
و در نهایت با تغییر تگهای قدیمی به تگهای معنایی در html5 کار ما به صورت کامل تمام می شود.
<body> <header> <h1>Monday Times</h1> </header> <nav> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul> </nav> <section> <h2>News Section</h2> <article> <h2>News Article</h2> <p>Lorem ipsum dolor sit amet..</p> </article> <article> <h2>News Article</h2> <p>Lorem ipsum dolor sit amet..</p> </article> </section> <footer> <p>© 2014 Monday Times. All rights reserved.</p> </footer> </body>
نتیجه نهایی مهاجرت
خب به پایان رسید و تمامی تگهای قدیمی را بروزرسانی کردیم و حالا یک کد HTML5 داریم.
تفاوت بین <article>، <section> و <div>
در اینجا یک تفاوت مبهم در نسخه استاندارد html5 بین عناصر article, section و div وجود دارد. در استاندارد html5، section برای تعریف یک بلوک مرتبط با عناصر داخلی استفاده می شود.
عنصر <article>
به عنوان یک بلوک عنصر کامل، خودنگهدارنده عناصر مرتبط استفاده می شود.
عنصر <div>
برای تعریف عناصر زیر مجموعه این بلاک استفاده می شود.
چگونه تعاریف بالا را تفسیر کنیم؟
در مثال بالا ما یک section را به عنوان یک نگهدارنده برای یک article استفاده کردیم. اما می توانستیم article را در داخل article به عنوان یک نگهدارنده استفاده کنیم.
نتیجه گیری
در این مقاله در رابطه با مهاجرت از نسخه های قدیمی HTML به آخرین نسخه HTML یعنی HTML5 صحبت کردیم.
امیدوارم از این مقاله استفاده کافی را برده باشید و اگر کدهای شما قدیمی هست آن را بروز کنید.
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده:راحله تبریزی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.