Membuat dialog dan detail di HTML
hello, temen2
sekarang kita akan belajar tentang dialog dan details,
dialog itu seperti ada kotaknya
sedangkan detail itu bila di klik akan memunculkan anak dibawahnya
yuk, kita buat di web kita.
<!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>
<figure>
<img src="web.png" alt="gambar web" width="300" height="168">
<figcaption>
gambar web dari admin pada tahun 2019
<a href="#">pondokcoding</a>
</figcaption>
</figure>
<dialog open>
ini website tutorial belajar koding
</dialog>
<details open>
<summary>
info pondok koding
</summary>
<p>selamat datang di website kami</p>
</details>
<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>© 2019 Muhammad Mufti Ramdhani</p>
</footer>
</body>
</html>
Komentar
Posting Komentar