HTML5 الذمج
الإنتقال من 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