Muafikiano wa HTML5

Huzina kutoka HTML4 hadi HTML5

Kituo hiki kinasaidia kuhusu huzina kutoka makini ya HTML4 hadi makini ya HTML5.

Kituo hiki inademojwa kuhusu huzina HTML4 hadi HTML5 bila kumteua maudhui yaliyopita na ujenzi.

Maelezo:Unaweza kutumia ukweli huo kutoka HTML4 na XHTML hadi HTML5.

Makini ya HTML4 Makini ya HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

Makini ya HTML4

Mfano

<!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>

Jifunze kwa mafunzo

Badilisha kwa Doctype wa HTML5

Badilisha doctype wa mawili, kutoka HTML4 doctype:

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

Badilisha kwa doctype wa HTML5:

<!DOCTYPE html>

Jifunze kwa mafunzo

Badilisha kwa uharibifu wa HTML5

Badilisha taarifa za uharibifu, kutoka HTML4:

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

Badilisha kwa HTML5:

<meta charset="utf-8">

Jifunze kwa mafunzo

Ongeza shiv

Wote wasafiri wa zamani wamekampua viungo vya maana ya HTML5.

Ndio, unaweza 'mudharibishwa' wasafiri wa zamani kuhusiana na 'viungo vyevunjwa'.

Ongeza shiv kwa matumizi ya Internet Explorer:

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

Jifunze kwa mafunzo

Maelezo:Soma zaidi kuhusu shiv katika usimamizi wa wasafiri wa HTML5.

Ongeza CSS kwa viungo vya maana ya HTML5

Angalia stili za CSS zilizojulikana:

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;
}
Kopisha na stili za CSS zilizofanana kwa viungo vya maana ya 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;
}

Jifunze kwa mafunzo

Badilisha kwa HTML5 <header> na <footer>

Badilisha id="header" na id="footer" ya <div> element:

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

Tukichukua viwango vya kawaida vya HTML5 kama <header> na <footer>:

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

Jifunze kwa mafunzo

Wakilisha kama HTML5 <nav>

Wakati hufungua viwango vya <div> na id="menu":

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

Tukichukua viwango vya kawaida vya HTML5 kama <nav>:

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

Jifunze kwa mafunzo

Wakilisha kama HTML5 <section>

Wakati hufungua the <div> na id="content":

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

Tukichukua viwango vya kawaida vya HTML5 kama <section>:

<section>
.
.
.
</section>

Jifunze kwa mafunzo

Wakilisha kama HTML5 <article>

Wakati hufungua viwango vya <div> na 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>

Tukichukua viwango vya kawaida vya HTML5 kama <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>

Jifunze kwa mafunzo

Kimaisha na kitarusia viwango vya hali vya vifaa vya uharibifu:

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

Jifunze kwa mafunzo

Mfano wa ukurasa wa HTML5

Wakati hufungua <head> tukio. HTML5 haikutumia kwa ajili yao:

Mfano

<!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>

Jifunze kwa mafunzo

Kipimo cha <article>, <section> na <div>:

Kwenye standari ya HTML5, kipimo cha <article>, <section> na <div> kinakadiriwa kwa kina, kimepumzika na kimekutaka.

Kwenye standari ya HTML5, kitu cha <section> kinadaiwa kama kiumu cha kuzingatia kwa kina.

Kitu cha <article> kinadaiwa kama kiumu cha kuzingatia kwa kina na kumiliki kina zote.

Kitu cha <div> kinadaiwa kama kiumu cha kuzingatia kwa kina.

Kikeajea kwa ni kuwa?

Kwenye mafanikio ya juu, tumetumia <section> kama kiumu wa mawasiliano ya <articles>.

Tunaweza pia kutumia <article> kama kiumu wa mawasiliano.

Hapa ni mafanikio mbalimbali:

Ina kifaa cha <article> kwa <article> na <article>:
<article>
<h2>Wanafunzi wa Mji</h2>
<article>
<h2>London</h2>
<p>London inaonekana kama mji mkuu wa Uingereza. Iko katika mji wa wakazi zaidi wa nchi ya Uingereza,</p>
na eneo la mji wa kubwa na wakazi wengi kuliko 13 milioni.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris inaonekana kama mji mkuu na mji wa wakazi zaidi wa Ufaransa.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo inaonekana kama mji mkuu wa Japan, kati ya eneo la Tokyo kubwa,</p>
na eneo mpya zaidi wa wakazi wa mji wa dunia.</p>
</article>
</article>

Jifunze kwa mafunzo

<article> kwenye <div>：</article>
<article>
<h2>Wanafunzi wa Mji</h2>
<div class="city">
<h2>London</h2>
<p>London inaonekana kama mji mkuu wa Uingereza. Iko katika mji wa wakazi zaidi wa nchi ya Uingereza,</p>
na eneo la mji wa kubwa na wakazi wengi kuliko 13 milioni.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris inaonekana kama mji mkuu na mji wa wakazi zaidi wa Ufaransa.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo inaonekana kama mji mkuu wa Japan, kati ya eneo la Tokyo kubwa,</p>
na eneo mpya zaidi wa wakazi wa mji wa dunia.</p>
</div>
</article>

Jifunze kwa mafunzo

<article> kwenye <section> kwenye <div>：</article>
<article>
<section>
<h2>Wanafunzi wa Mji</h2>
<div class="city">
<h2>London</h2>
<p>London inaonekana kama mji mkuu wa Uingereza. Iko katika mji wa wakazi zaidi wa nchi ya Uingereza,</p>
na eneo la mji wa kubwa na wakazi wengi kuliko 13 milioni.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris inaonekana kama mji mkuu na mji wa wakazi zaidi wa Ufaransa.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo inaonekana kama mji mkuu wa Japan, kati ya eneo la Tokyo kubwa,</p>
na eneo mpya zaidi wa wakazi wa mji wa dunia.</p>
</div>
</section>
<section>
<h2>Wanafunzi wa Kina</h2>
<div class="country">
<h2>Uingereza</h2>
<p>London inaonekana kama mji mkuu wa Uingereza. Iko katika mji wa wakazi zaidi wa nchi ya Uingereza,</p>
na eneo la mji wa kubwa na wakazi wengi kuliko 13 milioni.</p>
</div>
<div class="country">
<h2>Ufaransa</h2>
<p>Paris inaonekana kama mji mkuu na mji wa wakazi zaidi wa Ufaransa.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo inaonekana kama mji mkuu wa Japan, kati ya eneo la Tokyo kubwa,</p>
na eneo mpya zaidi wa wakazi wa mji wa dunia.</p>
</div>
</section>
</article>

Jifunze kwa mafunzo