ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور

ارسال کد تایید

مهاجرت به HTML5

یادگیری HTML

تعداد بازدید : 3734

تاریخ و ساعت انتشار : یک شنبه 1 مرداد 1396 21:26

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

در این درس یاد خواهیم گرفت که چگونه یک صفحه HTML4 را به HTML5 تغییر دهیم به گونه ای که به ساختار و محتوای کلی آن آسیبی نرسد.

نکته : با همین روش می توانید از XHTML به HTML5 مهاجرت کنید.

HTML4 معمول	HTML5 معمول
<div id="header">	<header>
<div id="menu">	<nav>
<div id="content">	<section>
<div class="article">	<article>
<div id="footer">	<footer>

یک صفحه معمول HTML4

مثال :

صفحه HTML4 معمول

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

مشاهده مثال

تغییر DOCTYPE به HTML5

تغییر کد DOCETYPE:

بیانیه HTML4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

مشاهده مثال

به کد DOCTYPE در HTML5

بیانیه HTML5

<!DOCTYPE HTML>

مشاهده مثال

تغییر کدگذاری به HTML5

تغییر در اطلاعات کدگذاری :

کاراکتر های HTML4

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

مشاهده مثال

به کدگذاری HTML5 :

کاراکترهای HTML5

<meta charset="utf-8">

مشاهده مثال

افزودن HTML5shiv

عناصر اسمی جدید در HTML5 در تمامی مرورگرهای مدرن پشتیبانی می شوند ، همچنین می توان به مرورگر های قدیمی یاد داد که چگونه کدهای ناشناخته را تفسیر کنند.

البته IE8 و ورژن های قبل از آن استایل دهی به عناصر ناشناخته را پشتیبانی نمی کنند. که HTML5shiv یک راه حل به زبان جاوا اسکریپت برای فعال سازی استایل دهی به عناصر ناشناخته در ورژن های قبل از IE9 است.

مثال :

افزودن HTML5Shiv

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

مشاهده مثال

یادگیری بیشتر درباره HTML5shiv در درس "پشتیبانی مرورگرها از HTML5"

تغییر به عناصر اسمی HTML5

CSS فعلی در صفحات شامل id ها و کلاس هایی برای استایل دهی به عناصر می باشند :

مثال :

CSS قبلی

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;
}

مشاهده مثال

استایل دقیقا برابر را برای عناصر اسمی HTML5 جایگزین کنید :

مثال :

CSS جدید

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 تغییر دهید :

مثال :

جای گذاری عناصر اسمی 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, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<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>
</article>
</section>

<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>

</body>

مشاهده مثال

تفاوت های میان <article> <section> و <div>

در استانداردهای HTML5 ، ما بین <article> <section> و <div> تفاوت هایی وجود دارد.

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

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

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

به عبارتی دیگر :

در مثال بالا از <section> به عنوان نگهدارنده <article> مرتبط استفاده کرده ایم. اما می توانستیم از <article> به عنوان نگهدارنده <arcticle> مرتبط، به همان راحتی استفاده کنیم.

چند مثال متفاوت :

مثال :

article داخل article

 <article>

<h2>Famous Cities</h2>

<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>

</article>

مشاهده مثال

مثال :

div داخل article

 <article>

<h2>Famous Cities</h2>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</article>

مشاهده مثال

مثال :

div در article در section

 <article>

<section>
<h2>Famous Cities</h2>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>

<section>
<h2>Famous Countries</h2>

<div class="country">
<h2>England</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

</section>

</article>

مشاهده مثال

دانلود فایل PDF مقاله درس بعدی درس قبلی

نظر شما