HTML5 Migrare. Schimbare la elemente semantice HTML5.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
CSS-ul existent conține ID-uri și clase pentru stilizarea elementelor:
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;
}
Înlocuiți cu stiluri CSS egale pentru elemente semantice 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;
}
În cele din urmă, schimbați elementele în elemente semantice HTML5:Exemplu:
<body>
<header>
<h1>Monday Times</h1>
</header>
<nav>
<ul>
<li>Știri</li>
<li>Sport</li>
<li>Vremea</li>
</ul>
</nav>
<section>
<h2>Secțiunea știri</h2>
<article>
<h2>Articolul de știri</h2>
<p>Lorem ipsum dolor sit amet..</p>
</article>
<article>
<h2>Articolul de știri</h2>
<p>Lorem ipsum dolor sit amet..</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. Toate drepturile rezervate.</p>
</footer>
</body>