ایچ تی ایم ال5 منتقل کئے جانے کا عمل

HTML4 سے HTML5 منتقل کئے جانا

اس فصل میں اس بات کی تعلیم دی گئی ہے کہ کیسے ایک مثالی HTML4 صفح کو مثالی HTML5 صفح میں منتقل کیا جاسکتا ہے。

اس فصل میں اس بات کا مظاہرہ کیا گیا ہے کہ کیسے ایک موجودہ HTML4 صفح کو HTML5 صفح میں تبدیل کیا جاسکتا ہے، جس سے اصل مواد اور بنیادی ساخت کو نقصان پہنچایا نہ جائے。

نکته:آپ اسی ہنر کو استعمال کر سکتے ہیں تاکہ HTML4 اور XHTML سے HTML5 میں منتقل ہو جائیں。

مثالی HTML4 مثالی HTML5
<div id="header"> <header>
<دیوی id="منو"> <nav>
<دیوی id="کنتنت"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

مثالی صفحہ HTML4

مثال

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<همل برگزاری="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<استایل>
  body {font-family:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<div id="header">
  <h1>Monday Times</h1>
</div>
<دیوی id="منو">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>
<دیوی id="کنتنت">
<h2>News Section</h2>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. تمام حقوق محفوظ.</p>
</div>
</body>
</html>

به طور مستقیم امتحان کنید

به Doctype HTML5 تغییر دهید

DOCTYPE HTML4 را تغییر دهید، از:

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

DOCTYPE HTML5 را تغییر دهید:

<دوکایمنت-تیپ همل>

به طور مستقیم امتحان کنید

به کدنویسی HTML5 تغییر دهید

اطلاعات کدنویسی را تغییر دهید، از HTML4:

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

به HTML5 تغییر دهید:

<متا چارزیت:utf-8>

به طور مستقیم امتحان کنید

shiv اضافه کنید

همه مرورگرهای مدرن از عناصر معنایی HTML5 پشتیبانی می‌کنند.

علاوه بر این، می‌توانید به مرورگرهای قدیمی "آموزش" دهید که چگونه از "عناصر ناشناخته" استفاده کنند.

shiv اضافه شده برای پشتیبانی Internet Explorer:

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

به طور مستقیم امتحان کنید

نکته:برای اطلاعات بیشتری در مورد shiv در پشتیبانی مرورگرهای HTML5 بخوانید.

CSS برای عناصر معنایی HTML5 اضافه کنید

لطفاً از استایل‌های CSS موجود ببینید:

دیوی#هدر،دیوی#فوتر،دیوی#کنتنت،دیوی#پست {
    کرده:1پیکسل سولید گری،مجذور:5پیکسل،مجذور-پایین:15پیکسل،پدینگ:8پیکسل،رنگ-پس‌زمینه:سفید;
}
دیوی#هدر،دیوی#فوتر {
    color:white;background-color:#444;margin-bottom:5px;
}
دیوی#کنتنت {
    background-color:#ddd;
}
دیوی#منو یول {
    margin:0;padding:0;
}
دیوی#منو یول لی {
    display:inline; margin:5px;
}
با استایل CSS یکسان برای عناصر معنایی HTML5 تکرار کنید:
هدر، فوتر، سیکشن، آرتikkel {
    کرده:1پیکسل سولید گری،مجذور:5پیکسل،مجذور-پایین:15پیکسل،پدینگ:8پیکسل،رنگ-پس‌زمینه:سفید;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul  {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

به طور مستقیم امتحان کنید

به HTML5 <header> و <footer> تبدیل کنید

عنصر <div> با id="header" و id="footer" را:

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 کدویسی کمانی. تمام حقوق محفوظ است.</p>
</div>

به عناصر معنایی HTML5 <هدر> و <فوتر> تغییر دهید

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <پارا>© 2016 CodeW3C.com. تمام حقوق محفوظ.</پارا>
</footer>

به طور مستقیم امتحان کنید

به HTML5 <ناو> تغییر دهید

این دیوی با id="منو" را:

<دیوی id="منو">
  <ul>
    <li>News</li>
    <لی سورس="اسپورٹز"><آ> </لی>
    <li>Weather</li>
  </ul>
</div>

به عناصر معنایی HTML5 <ناو> تغییر دهید:

<nav>
  <ul>
    <li>News</li>
    <لی سورس="اسپورٹز"><آ> </لی>
    <li>Weather</li>
  </ul>
</nav>

به طور مستقیم امتحان کنید

به HTML5 <سیکشن> تغییر دهید

این دیوی با id="کنتنت" را:

<دیوی id="کنتنت">
.
.
.
</div>

به عناصر معنایی HTML5 <سیکشن> تغییر دهید:

<section>
.
.
.
</section>

به طور مستقیم امتحان کنید

به HTML5 <آرتیکل> تغییر دهید

تمام عناصر دیوی با کلاس="پست" را:

<دیوی کلاس="پست">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

به عناصر معنایی HTML5 <آرتیکل> تغییر دهید:

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

به طور مستقیم امتحان کنید

این استایل‌های "دیگر مورد نیاز نیستند" را حذف کنید:

دیوی#هدر،دیوی#فوتر،دیوی#کنتنت،دیوی#پست {
    کرده:1پیکسل سولید گری،مجذور:5پیکسل،مجذور-پایین:15پیکسل،پدینگ:8پیکسل،رنگ-پس‌زمینه:سفید;
}
دیوی#هدر،دیوی#فوتر {
    color:white;background-color:#444;margin-bottom:5px;
}
دیوی#کنتنت {
    background-color:#ddd;
}
دیوی#منو یول {
    margin:0;padding:0;
}
دیوی#منو یول لی {
    display:inline; margin:5px;
}

به طور مستقیم امتحان کنید

صفحه معمولی HTML5

آخر می‌توانید تگ <هدر> را حذف کنید. در HTML5 دیگر نیاز به آنها نیست:

مثال

<دوکایمنت-تیپ همل>
<همل برگزاری="en">
<عنوان>HTML5</عنوان>
<متا چارزیت:utf-8>
<![if lt IE 9]>
<اسکریپت منبع="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</اسکریپت>
<![endif]-->
<استایل>
بدی {
    فون-فیملی:Verdana،سانس-ریز،فون-سائز:0.8em;
}
هدر، فوتر، سیکشن، آرتikkel {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<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>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. تمام حقوق محفوظ.</p>
</footer>
</body>
</html>

به طور مستقیم امتحان کنید

<article> <section> اور <div> کے درمیان کی فرق

HTML5 معیار میں، <article> <section> اور <div> کے درمیان کی فرق بہت چھوٹی اور مشکل ہے。

HTML5 معیار میں، <section> عنصر مرتبط عنصر کا بلکچی عنصر کے طور پر مقرر کیا گیا ہے。

<article> عنصر مرتبط عنصر کا پورا خود محفظہ بلکچی عنصر کے طور پر تعریف کیا گیا ہے。

<div> عنصر بچے عنصر کا بلکچی عنصر کے طور پر تعریف کیا گیا ہے。

کس طرح سمجھنا چاہیئے؟

علیکم مثال میں، ہم نے <section> کو مرتبط <articles> کا محفظہ استعمال کیا تھا。

لیکن، ہم بھی <article> کو مقالے کا محفظہ استعمال کرسکتے ہیں。

در آمد چند مثال مختلف:

مقالے میں <article> کا <article>:
<article>
<h2>شهرهای معروف</h2>
<article>
<h2>لندن</h2>
<p>لندن پایتخت شهر انگلستان. این شهر پر جمعیت‌ترین شهر در بریتانیا است,</p>
<p>با منطقه شهری بیش از ۱۳ میلیون ساکن.</p>
</article>
<article>
<h2>پاریس</h2>
<p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
</article>
<article>
<h2>توکیو</h2>
<p>توکیو پایتخت ژاپن است، مرکز منطقه بزرگ توکیو,</p>
و بزرگترین منطقه شهری پر جمعیت در جهان.</p>
</article>
</article>

به طور مستقیم امتحان کنید

<article> در <div>：</article>
<article>
<h2>شهرهای معروف</h2>
<div class="city">
<h2>لندن</h2>
<p>لندن پایتخت شهر انگلستان. این شهر پر جمعیت‌ترین شهر در بریتانیا است,</p>
<p>با منطقه شهری بیش از ۱۳ میلیون ساکن.</p>
</div>
<div class="city">
<h2>پاریس</h2>
<p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
</div>
<div class="city">
<h2>توکیو</h2>
<p>توکیو پایتخت ژاپن است، مرکز منطقه بزرگ توکیو,</p>
و بزرگترین منطقه شهری پر جمعیت در جهان.</p>
</div>
</article>

به طور مستقیم امتحان کنید

<article> در <section> در <div>：</article>
<article>
<section>
<h2>شهرهای معروف</h2>
<div class="city">
<h2>لندن</h2>
<p>لندن پایتخت شهر انگلستان. این شهر پر جمعیت‌ترین شهر در بریتانیا است,</p>
<p>با منطقه شهری بیش از ۱۳ میلیون ساکن.</p>
</div>
<div class="city">
<h2>پاریس</h2>
<p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
</div>
<div class="city">
<h2>توکیو</h2>
<p>توکیو پایتخت ژاپن است، مرکز منطقه بزرگ توکیو,</p>
و بزرگترین منطقه شهری پر جمعیت در جهان.</p>
</div>
</section>
<section>
<h2>کشورهای معروف</h2>
<div class="country">
<h2>انگلستان</h2>
<p>لندن پایتخت شهر انگلستان. این شهر پر جمعیت‌ترین شهر در بریتانیا است,</p>
<p>با منطقه شهری بیش از ۱۳ میلیون ساکن.</p>
</div>
<div class="country">
<h2>فرانسه</h2>
<p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
</div>
<div class="country">
<h2>ژاپن</h2>
<p>توکیو پایتخت ژاپن است، مرکز منطقه بزرگ توکیو,</p>
و بزرگترین منطقه شهری پر جمعیت در جهان.</p>
</div>
</section>
</article>

به طور مستقیم امتحان کنید