الإنتقال من 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> |
صفحة 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.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>&copy; 2016 Monday Times. All rights reserved.</p> </div> </body> </html>
التغيير إلى HTML5 Doctype
تغيير نوع المستند :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
إلى نمط HTML5:
<!DOCTYPE html>
التغيير إلى ترميز HTML5
تغيير معلومات الترميز :
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
إلى ترميز HTML5:
<meta charset="utf-8">
أضف HTML5Shiv
يتم دعم العناصر الدلالية HTML5 الجديدة في جميع المتصفحات الحديثة. بالإضافة إلى ذلك ، يمكنك “تعليم” المتصفحات القديمة كيفية التعامل مع “العناصر غير المعروفة”.
ومع ذلك ، IE8 والإصدارات الأقدم ، لا يسمح بتصميم عناصر مجهولة. لذلك ، HTML5Shiv هو حل JavaScript لتمكين تصميم عناصر HTML5 في إصدارات Internet Explorer قبل الإصدار 9.
أضف HTML5Shiv:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
التغيير إلى عناصر HTML5 الدلالية
يحتوي 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;
}
استبدل أنماط 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>© 2014 Monday Times. All rights reserved.</p> </footer> </body>
الفرق بين <article> <section> و <div>
هناك اختلاف مربك (نقص) في معيار 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.</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.</p> </article> </article>
<div> في <article>:
<article> <h2>Famous Cities</h2> <div class="city"> <h2>London</h2> <p>London is the capital city of England.</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.</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.</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.</p> </div> </section> <section> <h2>Famous Countries</h2> <div class="country"> <h2>England</h2> <p>London is the capital city of England.</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.</p> </div> </section> </article>
One Comment