HTML5 ਟਰਾਂਸਫਰ

ਐੱਚਟੀਐੱਮਲ 4 ਤੋਂ ਐੱਚਟੀਐੱਮਲ 5 ਮਾਰਗਦਰਸ਼ਨ

ਇਸ ਬੁੱਚਰ ਵਿੱਚ ਇਹ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਦਿੱਤਾ ਗਿਆ ਹੈ ਕਿ ਕਿਵੇਂ ਇੱਕ ਸਾਧਾਰਨ ਐੱਚਟੀਐੱਮਲ 4 ਪੰਨਾ ਇੱਕ ਸਾਧਾਰਨ ਐੱਚਟੀਐੱਮਲ 5 ਪੰਨਾ ਵਿੱਚ ਟ੍ਰਾਂਸਫਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

ਇਸ ਬੁੱਚਰ ਵਿੱਚ ਇਹ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਕਿ ਕਿਵੇਂ ਇੱਕ ਮੌਜੂਦਾ ਐੱਚਟੀਐੱਮਲ 4 ਪੰਨਾ ਐੱਚਟੀਐੱਮਲ 5 ਪੰਨਾ ਵਿੱਚ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ ਬਿਨਾ ਕਿ ਮੂਲ ਸਮੱਗਰੀ ਅਤੇ ਢਾਂਚੇ ਨੂੰ ਨੁਕਸਾਨ ਪਹੁੰਚਾਇਆ ਜਾਵੇ。

ਟਿੱਪਣੀ:ਤੁਸੀਂ ਐੱਚਟੀਐੱਮਲ 4 ਅਤੇ XHTML ਨੂੰ ਐੱਚਟੀਐੱਮਲ 5 ਵਿੱਚ ਟ੍ਰਾਂਸਫਰ ਕਰਨ ਲਈ ਇਕੱਲੇ ਕੌਸ਼ਲ ਵਰਤ ਸਕਦੇ ਹੋ।

ਸਾਧਾਰਨ ਐੱਚਟੀਐੱਮਲ 4 ਸਾਧਾਰਨ ਐੱਚਟੀਐੱਮਲ 5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

ਸਾਧਾਰਨ ਐੱਚਟੀਐੱਮਲ 4 ਪੰਨਾ

ਇੱਕ ਉਦਾਹਰਣ

!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.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>
<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>
<div id="content">
<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. All rights reserved.</p>
</div>
</body>
</html>

خود کو کچھ کوشش کریئے

ਹੈਲਟਮ5 Doctype ਵਿੱਚ ਬਦਲੋ

DOCTYPE ਹੈਲਟਮ4 ਵਿੱਚ ਬਦਲੋ:

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

DOCTYPE ਹੈਲਟਮ5 ਵਿੱਚ ਬਦਲੋ:

<!DOCTYPE html>

خود کو کچھ کوشش کریئے

ਹੈਲਟਮ5 ਲਿਖਤੀ ਸੂਚਨਾ ਵਿੱਚ ਬਦਲੋ

ਲਿਖਤੀ ਸੂਚਨਾ ਸੋਧੋ ਹੈਲਟਮ4 ਵਿੱਚ:

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

ਹੈਲਟਮ5 ਵਿੱਚ ਬਦਲੋ:

<meta charset="utf-8">

خود کو کچھ کوشش کریئے

shiv ਜੋੜੋ

ਸਾਰੇ ਆਧੁਨਿਕ ਬਰਾਉਜ਼ਰ ਹੈਲਟਮ5 ਸੈਮੈਂਟਿਕ ਈਲੈਮੈਂਟਾਂ ਨੂੰ ਸਮਰੱਥ ਕਰਦੇ ਹਨ。

ਇਸ ਤੋਂ ਇਲਾਵਾ ਤੁਸੀਂ ਪੁਰਾਣੇ ਬਰਾਉਜ਼ਰਾਂ ਨੂੰ "ਅਣਜਾਣੇ ਈਲੈਮੈਂਟ" ਨਾਲ ਕਿਵੇਂ ਹੱਲ ਕਰਨਾ ਸਿੱਖਾ ਸਕਦੇ ਹੋ

ਇੰਟਰਨੈੱਟ ਈਕਸਪਲੋਰਰ ਸਮਰੱਥਾ ਲਈ ਜੋੜੇ ਗਏ shiv:

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

خود کو کچھ کوشش کریئے

ਟਿੱਪਣੀ:ਹੈਲਟਮ5 ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਪੜੋ。

ਹੈਲਟਮ5 ਸੈਮੈਂਟਿਕ ਈਲੈਮੈਂਟਾਂ ਲਈ CSS ਜੋੜੋ

ਮੌਜੂਦਾ CSS ਸਟਾਈਲਾਂ ਦੇਖੋ:

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;
}
ਹੈਲਟਮ5 ਸੈਮੈਂਟਿਕ ਈਲੈਮੈਂਟਾਂ ਲਈ ਬਰਾਬਰ ਦੇ ਕ੍ਰਿਸਟਸ ਵਿੱਚ ਅਧਾਰਤ ਕਰੋ:
header,footer,section,article {
    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;
}

خود کو کچھ کوشش کریئے

ਹੁਣ ਹੈਲਟਮ5 <header> ਅਤੇ <footer> ਵਿੱਚ ਬਦਲੋ

ਬਣਾਓ id="header" ਅਤੇ id="footer" ਦੇ <div> ਈਲੈਮੈਂਟਾਂ:

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</div>

HTML5 ਸੈਮੈਂਟਿਕ ਐਲੀਮੈਂਟ <header> ਅਤੇ <footer> ਵਿੱਚ ਬਦਲੋ:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</footer>

خود کو کچھ کوشش کریئے

HTML5 <nav> ਵਿੱਚ ਬਦਲੋ:

id="menu" ਦੇ <div> ਐਲੀਮੈਂਟ ਨੂੰ:

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</div>

ਮਿਸ਼ਨ ਕਰਕੇ HTML5 ਸੈਮੈਂਟਿਕ ਐਲੀਮੈਂਟ <nav> ਵਿੱਚ ਬਦਲੋ:

<nav>
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</nav>

خود کو کچھ کوشش کریئے

HTML5 <section> ਵਿੱਚ ਬਦਲੋ:

id="content" ਦੇ the <div> ਐਲੀਮੈਂਟ ਨੂੰ:

<div id="content">
.
.
.
</div>

ਮਿਸ਼ਨ ਕਰਕੇ HTML5 ਸੈਮੈਂਟਿਕ ਐਲੀਮੈਂਟ <section> ਵਿੱਚ ਬਦਲੋ:

<section>
.
.
.
</section>

خود کو کچھ کوشش کریئے

HTML5 <article> ਵਿੱਚ ਬਦਲੋ:

ਕਲਾਸ="post" ਦੇ ਸਾਰੇ <div> ਐਲੀਮੈਂਟਸ ਨੂੰ:

<div class="post">
  <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> ਵਿੱਚ ਬਦਲੋ:

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

خود کو کچھ کوشش کریئے

ਇਨ੍ਹਾਂ 'ਨਹੀਂ ਜ਼ਰੂਰੀ' ਸਟਾਈਲਸ ਹਟਾਓ:

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

خود کو کچھ کوشش کریئے

ਇੱਕ ਮਿਆਰੀ HTML5 ਪੇਜ਼

ਅੰਤ ਵਿੱਚ ਤੁਸੀਂ <head> ਟੈਗ ਹਟਾ ਸਕਦੇ ਹੋ।HTML5 ਵਿੱਚ ਉਹਨਾਂ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ:

ਇੱਕ ਉਦਾਹਰਣ

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    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. All rights reserved.</p>
</footer>
</body>
</html>

خود کو کچھ کوشش کریئے

<article> <section> 与 <div> 之间的差异

在 HTML5 标准中，<article> <section> 与 <div> 之间的差异很小，令人困惑。

在 HTML5 标准中，<section> 元素被定位为相关元素的块。

<article> 元素被定义为相关元素的完整的自包含块。

<div> 元素被定义为子元素的块。

如何理解呢？

在上面的例子中，我们曾使用 <section> 作为相关 <articles> 的容器。

但是，我们也能够把 <article> 用作文章的容器。

下面是一些不同的例子：

中的 <article>：
<article>
<h2>معروف شہر</h2>
<article>
<h2>لندن</h2>
<p>لندن انگلینڈ کی راجدھانی شہر ہے۔ یہ برطانیہ میں سب سے زیادہ آبادی والی شہر ہے،
جس میں 13 ملین سے زیادہ آبادی والا میٹروپولیٹن علاقہ ہے。</p>
</article>
<article>
<h2>پیرس</h2>
<p>پیرس فرانس کی راجدھانی اور سب سے زیادہ آبادی والی شہر ہے。</p>
</article>
<article>
<h2>توکیو</h2>
<p>توکیو جاپان کی راجدھانی ہے، بڑی توکیو علاقے کا مرکز،
اور دنیا میں سب سے زیادہ آبادی والا میٹروپولیٹن علاقہ ہے。</p>
</article>
</article>

خود کو کچھ کوشش کریئے

<article> میں <div> کا استعمال:</div>
<article>
<h2>معروف شہر</h2>
<div class="city">
<h2>لندن</h2>
<p>لندن انگلینڈ کی راجدھانی شہر ہے۔ یہ برطانیہ میں سب سے زیادہ آبادی والی شہر ہے،
جس میں 13 ملین سے زیادہ آبادی والا میٹروپولیٹن علاقہ ہے。</p>
</div>
<div class="city">
<h2>پیرس</h2>
<p>پیرس فرانس کی راجدھانی اور سب سے زیادہ آبادی والی شہر ہے。</p>
</div>
<div class="city">
<h2>توکیو</h2>
<p>توکیو جاپان کی راجدھانی ہے، بڑی توکیو علاقے کا مرکز،
اور دنیا میں سب سے زیادہ آبادی والا میٹروپولیٹن علاقہ ہے。</p>
</div>
</article>

خود کو کچھ کوشش کریئے

<article> میں <section> میں <div> کا استعمال:</div>
<article>
<section>
<h2>معروف شہر</h2>
<div class="city">
<h2>لندن</h2>
<p>لندن انگلینڈ کی راجدھانی شہر ہے۔ یہ برطانیہ میں سب سے زیادہ آبادی والی شہر ہے،
جس میں 13 ملین سے زیادہ آبادی والا میٹروپولیٹن علاقہ ہے。</p>
</div>
<div class="city">
<h2>پیرس</h2>
<p>پیرس فرانس کی راجدھانی اور سب سے زیادہ آبادی والی شہر ہے。</p>
</div>
<div class="city">
<h2>توکیو</h2>
<p>توکیو جاپان کی راجدھانی ہے، بڑی توکیو علاقے کا مرکز،
اور دنیا میں سب سے زیادہ آبادی والا میٹروپولیٹن علاقہ ہے。</p>
</div>
</section>
<section>
<h2>معروف ملک</h2>
<div class="country">
<h2>انگلینڈ</h2>
<p>لندن انگلینڈ کی راجدھانی شہر ہے۔ یہ برطانیہ میں سب سے زیادہ آبادی والی شہر ہے،
جس میں 13 ملین سے زیادہ آبادی والا میٹروپولیٹن علاقہ ہے。</p>
</div>
<div class="country">
<h2>فرانس</h2>
<p>پیرس فرانس کی راجدھانی اور سب سے زیادہ آبادی والی شہر ہے。</p>
</div>
<div class="country">
<h2>جاپان</h2>
<p>توکیو جاپان کی راجدھانی ہے، بڑی توکیو علاقے کا مرکز،
اور دنیا میں سب سے زیادہ آبادی والا میٹروپولیٹن علاقہ ہے。</p>
</div>
</section>
</article>

خود کو کچھ کوشش کریئے