HTML Göç

HTML5'in HTML4 dan Göç

Bu bölümde HTML4 den HTML5'e geçme hakkında tamamen size aittir.

Bu bölümde orijinal içerik veya yapının şey yok etmeden, bir HTML5 sayfası içine HTML4 sayfasını dönüştürmek gösterilmiştir.

Aynı tarifi kullanarak, XHTML HTML5'e geçirebilirsiniz.

Tipik HTML4	Tipik HTML5
<div id="header">	<header>
<div id="menu">	<nav>
<div id="content">	<section>
<div class="article">	<article>
<div id="footer">	<footer>

Tipik Bir HTML4 Sayfa

Örnek

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

Kendin dene "

HTML5 DOCTYPE değiştirin

HTML4 doctype gelen Doctype'ı değiştirin:

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

HTML5 belge türüne:

Örnek

<!DOCTYPE html>

Kendin dene "

HTML5 Kodlama değiştirin

HTML4 dan, kodlama bilgilerini değiştirin:

HTML5'e:

Örnek

Kendin dene "

ekle Shiv

HTML5 anlamsal elementler tüm modern tarayıcılarda desteklenir.

Buna ek olarak şunları yapabilirsiniz "teach" nasıl idare eski tarayıcıları "unknown elements" .

Ekle the shiv Internet Explorer desteği için:

Örnek

Kendin dene "

Hakkında okuyun the shiv içinde HTML5 Tarayıcı Desteği .

HTML5 Semantik Elements için CSS ekleme

Mevcut CSS stilleri bak:

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 semantik unsurları için eşit CSS stilleri ile Çift:

Örnek

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

Kendin dene "

HTML5'e değiştirin <header> ve <footer>

Değiştir <div> ile unsurlarını id="header" ve id="footer" :

<div id="header">
<h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
<p>&copy; 2014 w3ii. All rights reserved.</p>
</div>

HTML5 semantik için <header> ve <footer> elemanlar:

Örnek

<header>
<h1>Monday Times</h1>
</header>
.
.
.
<footer>
<p>© 2014 w3ii. All rights reserved.</p>
</footer>

Kendin dene "

HTML5 değiştir <nav>

Değiştir <div> ile eleman id="menu" :

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

Bir HTML5 semantik <nav> öğesine:

Örnek

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

Kendin dene "

HTML5 değiştir <section>

Değiştir <div> ile eleman id="content" :

Bir HTML5 semantik <bölüm> elemana:

Örnek

Kendin dene "

HTML5 değiştir <article>

Tüm değiştirin <div> ile eleman 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 semantik için <article> elemanlar:

Örnek

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

Kendin dene "

Bu Kaldır "no longer needed" <style> elemanlar:

Örnek

Kendin dene "

Tipik Bir HTML5 Sayfa

Sonunda kaldırabilirsiniz <head> etiketleri. Onlar HTML5'teki gerekmez:

Örnek

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">



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

Kendin dene "

Arasındaki Fark <article> <section> ve <div>

Bir kafa karıştırıcı vardır (lack of) arasında HTML5 standardında fark <article> <section> ve <div> .

HTML5 standardında, <section> elemanı, ilgili elemanların bir blok olarak tanımlanır.

<article> elemanının ilgili elemanların tam, kendi kendine yeten bir blok olarak tanımlanır.

<div> elemanı çocuk elemanlarının bir blok olarak tanımlanır.

Bunu nasıl yorumlamak?

Yukarıdaki örnekte, kullandık <section> ilgili için bir kap olarak <articles> .

Ama biz kullanmış olabilir <article> hem de makaleler için bir kap olarak.

İşte bazı farklı örnekler:

<article> içinde <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>

Kendin dene "

<div> içinde <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>

Kendin dene "

<div> içinde <section> içinde <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>

Kendin dene "

❮ Önceki Sonraki Bölüm ❯

HTML5 Eğitimi

HTML Formlar

HTML5

HTML Grafik

HTML medya

HTML APIs

HTML Örnekler

HTML Referanslar

HTML Göç

HTML5'in HTML4 dan Göç

Tipik Bir HTML4 Sayfa

Örnek

HTML5 DOCTYPE değiştirin

Örnek

HTML5 Kodlama değiştirin

Örnek

ekle Shiv

Örnek

HTML5 Semantik Elements için CSS ekleme

Örnek

HTML5'e değiştirin <header> ve <footer>

Örnek

HTML5 değiştir <nav>

Örnek

HTML5 değiştir <section>

Örnek

HTML5 değiştir <article>

Örnek

Örnek

Tipik Bir HTML5 Sayfa

Örnek

Arasındaki Fark <article> <section> ve <div>

<article> içinde <article> :

<div> içinde <article> :

<div> içinde <section> içinde <article> :