الهجرة من HTML4 إلى HTML5
هذا الفصل هو تماما حول كيفية ترحيل من 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> |
A النموذجية HTML4 الصفحة
مثال
<!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>&copy; 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html> انها محاولة لنفسك » تغيير إلى 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:
إضافة Shiv
ويدعم HTML5 العناصر الدلالية في جميع المتصفحات الحديثة.
وبالإضافة إلى ذلك، يمكنك "teach" المتصفحات القديمة كيفية التعامل مع "unknown elements" .
إضافة the shiv لدعم برنامج Internet Explorer:
مثال
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> انها محاولة لنفسك » قرأت عن the shiv في المتصفح دعم HTML5 .
إضافة CSS لHTML5 الدلالي عناصر
انظروا الأنماط 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;
}تكرار مع أنماط CSS متساوية للعناصر الدلالية HTML5:
مثال
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;
} انها محاولة لنفسك » تغيير إلى HTML5 <header> و <footer>
تغيير <div> العناصر مع id="header" و id="footer" :
<div id="header">
<h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
<p>&copy; 2014 w3ii. All rights reserved.</p>
</div>إلى HTML5 الدلالي <header> و <footer> عناصر هي:
مثال
<header>
<h1>Monday Times</h1>
</header>
.
.
.
<footer>
<p>© 2014 w3ii. All rights reserved.</p>
</footer> انها محاولة لنفسك » التغيير إلى HTML5 <nav>
تغيير <div> عنصر مع id="menu" :
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>إلى الدلالي عنصر HTML5 <الملاحة>:
التغيير إلى HTML5 <section>
تغيير <div> عنصر مع id="content" :
<div id="content">
.
.
.
</div>إلى الدلالي <القسم> عنصرا HTML5:
التغيير إلى HTML5 <article>
تغيير جميع <div> العنصر مع class="post" :
<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> انها محاولة لنفسك » إزالة هذه "no longer needed" <style> عناصر هي:
مثال
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;
} انها محاولة لنفسك » A النموذجية 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>
<article>
<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>
</article>
<article>
<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>
</article>
</section>
<footer>
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html> انها محاولة لنفسك » الفرق بين <article> <section> و <div>
هناك الخلط بين (lack of) الفرق في مستوى HTML5، بين <article> <section> و <div> .
في معيار HTML5، و <section> يعرف عنصر ككتلة من العناصر ذات الصلة.
و <article> يعرف عنصر كما كاملة، كتلة مكتفية ذاتيا من العناصر ذات الصلة.
و <div> يعرف عنصر ككتلة من عناصر الأطفال.
كيفية تفسير ذلك؟
في المثال أعلاه، وقد استخدمنا <section> كحاوية للذات الصلة <articles> .
ولكن، ونحن يمكن أن تستخدم <article> كحاوية للمواد كذلك.
وفيما يلي بعض الأمثلة المختلفة:
<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> في <section> في <article> :
<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>
<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="country">
<h2>Japan</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>
</article> انها محاولة لنفسك »