آموزش طراحی سایتآموزش HTML

آشنایی با مهاجرت به HTML5

مهاجرت از HTML4 به HTML5

چگونه از ورژن های قدیمی HTML به HTML5 مهاجرت کنیم؟ منظور از مهاجرت به HTML5 چیست؟ تغییر کد ها از HTML4 به HTML5 چگونه است؟ چطور میتونیم از HTML4 به HTML5 مهاجرت کنیم؟ همه این سوالات را در این مقاله مورد بررسی قرار می‌دهیم.

مهاجرت به html5

در این مقاله قصد داریم که به موضوع مهاجرت از نسخه های قدیمی HTML به HTML5 صحبت کنیم.

در این مقاله نحوه تبدیل صفحات HTML4 به HTML5 بدون از بین بردن چیزی از محتوای اصلی به تصویر کشیده می شود. شما می توانید از روش های گفته شده برای مهاجرت از XHTML به 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>&amp;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 را بخوانید.

کد های 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>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>

نتیجه نهایی مهاجرت

خب کارمون به پایان رسید و تمامی تگ‌های قدیمی را بروزرسانی کردیم و حالا یک کد HTML5 داریم.

برای اینکه بهترین نتیجه را مشاهده کنید، کد های این مقاله را در Codepen قرار دادم که خروجی زنده آن را ببینید.

36873

تفاوت بین <article>، <section> و <div>

در اینجا یک تفاوت مبهم در نسخه استاندارد html5 بین عناصر article, section و div وجود دارد. در استاندارد html5، section برای تعریف یک بلوک مرتبط با عناصر داخلی استفاده می شود.

عنصر <article> به عنوان یک بلوک عنصر کامل، خودنگهدارنده عناصر مرتبط استفاده می شود.

عنصر <div> برای تعریف عناصر زیر مجموعه این بلاک استفاده می شود.

چگونه تعاریف بالا را تفسیر کنیم؟

در مثال بالا ما یک section را به عنوان یک نگهدارنده برای یک article استفاده کردیم. اما می توانستیم article را در داخل article به عنوان یک نگهدارنده استفاده کنیم.

در این اینجا چند مثال از تفاوت آن ها می آوریم:

36873

نتیجه گیری

در این مقاله در رابطه با مهاجرت از نسخه های قدیمی HTML به آخرین نسخه HTML یعنی HTML5 صحبت کردیم.

امیدوارم از این مقاله استفاده کافی را برده باشید و اگر کد‌های شما قدیمی هست آن را بروز کنید.

اگر سوال، پیشنهاد یا انتقادی داشتید؛ خیلی خوشحال میشم که بپرسید و منم در اولین فرصت به آنها پاسخ میدم. تا مقاله بعدی فعلا…

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر