Membuat kotak search, email dan warna
hello temen2,
yuk kita membuat kotak search, email dan warna di halaman 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>
<form>
<input type="search" name="search" placeholder="cari...">
<input type="email" name="email" placeholder="email" required="wajib diisi">
<input type="color">
<input type="submit">
</form>
<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