Mengenal Struktur HTML 5


setelah mengenal struktur dasar HTML,
sekarang kita akan mengenal beberapa atribut baru di HTML 5,
berupa : header, nav, main, article, section, aside dan footer

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML5</title>
<meta charset="utf-8">
<style>
body{
font-family: Verdana, sans-serif;
font-size: 12px;
}

header, nav, main, aside, footer {
border: 1px solid grey;
margin: 5px;
padding: 5px;
}
main{
float: left;
width: 60%;
}
aside{
float: left;
width: 30%;
}
footer{
clear: both;
}
</style>
</head>
<body>
<header>
<h1>Belajar WEB</h1>
<h2>bersama Muhammad Mufti Ramdhani</h2>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
<main>
<article>
<h1>Daftar pelajaran</h1>
<section>
<h2>HTML</h2>
<p>membuat struktur website dengan html</p>
</section>
<section>
<h2>CSS</h2>
<p>menghias website dengan css</p>
</section>
<section>
<h2>Javascript</h2>
<p>membuat website lebih interaktif dengan javascript</p>
</section>
</article>
</main>

<aside>
<h2>Daftar Artikel</h2>
<a href="#">Intro html</a><br>
<a href="#">Mulai belajar website</a><br>
<a href="#">Belajar sampai ngerti koding</a>
</aside>

<footer>
<p>&copy; 2019 Muhammad Mufti Ramdhani</p>
</footer>
</body>
</html>

Komentar

Postingan populer dari blog ini

Relay lampu menggunakan NodeMCU

Kode program (sketch) DHT11 di Arduino Uno

Kode program ( sketch ) sensor infrared di Arduino Uno with buzzer