Hai, akhirnya kita bisa berjumpa lagi. Kali ini saya akan membahas
"Bagaimana cara membuat struktur html yang benar?".Seperti yang kita tahu, struktur html terdiri dari Header, Navbar, Sidebar, Main, dan footer.
fungsi dari masing-masing struktur html adalah sebagai berikut:
- Header, fungsinya adalah sebagai header dari sebuah website.
- Navbar, fungsinya adalah sebagai menu navigasi website untuk menuju ke halaman lainnya dalam sebuah website.
- Sidebar, fungsinya sebagai kolom tambahan pada halaman web, misalnya untuk menempatkan iklan dan lainnya.
- Main, fungsinya sebagai isi atau konten utama dari sebuah halaman web.
- Foooter, fungsinya sebagai footer dari sebuah halaman web, biasanya digunakan untuk menulis copyright dan sebagainya.
Dulu, membuat struktur html menggunakan tag <table> dengan mengatur properties dari tag <tr> dan <td> seperti contoh pada tutorial sebelumnya yaitu cara membuat tabel, setelah itu beralih pada penggunaan tag <div> yang penggunaannya diatur menggunakan CSS, dan sekarang pada era HTML5 telah digunakan standar penulisan baru yaitu menggunakan semantic tag, diantaranya adalah <header> <article> <section> <nav><aside>.
Jika dilihat dari namanya tentunya sudah dapat ditebak fungsi dari tiap-tiap tag tersebut. Namun penggunaan tag ini harus di aplikasikan dengan CSS agar terlihat fungsinya.
Karena semantic tag html 5 ini tidak memiliki fungsi khusus selain untuk mmemudahkan browser dalam membaca, misalnya kita menulis <header>Ini adalah Header </header> maka tampilan di browser tidak langsung menjadi hutuf dengan ukuran font seperti ukuran <h1>, tapi akan seperti tulisan biasa. maka dari itu perlu digabungkan dengan CSS dalam penulisannya.
Pada contoh dibawah ini saya akan menulis CSS dengan model internal.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar struktur html</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<style type="text/css">
#container{
width: 960px;
height: 640px;
background-color: #27cdff;
margin-right: 170px;
margin-left: 170px;
}
header{
width: 940px;
height: 150px;
margin: 10px;
background-color: #2387e8;
text-align: center;
color: white;
}
nav{
width: auto;
height: 30px;
background-color: #2823e8;
margin: 20px 10px 3px 10px;
clear: both;
}
nav ul li{
list-style: none;
padding: 2px;
float: left;
}
aside{
width: 160px;
height: 400px;
background-color: #3465ff;
margin-left: 10px;
margin-bottom: 10px;
float: left;
}
section{
width: 130px;
height: 160px;
margin: 10px;
float: 0;
padding: 5px;
background-color: #6627ff;
}
article{
width: 770px;
height: 400px;
background-color: #2387e8;
float: left;
margin: 0 10px 10px 10px;
}
footer{
width: 940px;
height: 60px;
margin-right: 10px;
margin-left: 10px;
background-color: #2823e8;
color: white;
clear: both;
text-align: center;
}
a{
text-decoration: none;
color: white;
}
button:hover{
color: red;
}
button{
background-color:#6627ff;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Website Latihan</h1>
<p>Ini merupakan sebuah halaman website latihan yang digunakan untuk latihan</p>
<nav>
<ul>
<li><button><a href="#"> Home</a></button></li>
<li><button><a href="#"> About</a></button></li>
<li><button><a href="#"> Product</a></button></li>
<li><button><a href="#"> Contact</a></button></li>
</ul>
</nav>
</header>
<aside>
<section>
<p>Sisipan</p>
<p>dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident.</p>
</section>
<section>
<form action="#" method="_post">
<p>Username :<input type="text" name="username" autofocus size="16" placeholder="ex: adjie"></p>
<p>Password :<input type="password" name="pass" size="12"></p>
<input type="submit" value="Login">
</form>
</section>
</aside>
<article>
<p>Ini adalah artikel dari web ini</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<footer>
<p>© Copyright By Adjie</p>
</footer>
</div>
</body>
</html>
Hasilnya akan seperti di bawah ini
Sebaiknya penulisan CSS ditulis terpisah agar dapat digunakan untuk beberapa halaman tanpa harus menulis CSSnya setiap membuat halaman baru.
Sekian dulu yaaa, Semoga masih semangat belajarnya.................
![Cara Koneksi Database MySql Dengan VB.NET[Visual Studio Terbaru]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcxWWBdUDRRWWYk5ZcfyVyqlscBPQ5K9mVz4jPrFwN4s3kHFjrSBs67ZZX5lCvQTHybfuUAUhURYdDlXPyOKY3qb3ROYtC1NlYQCVr4VzshytQee1svXFuW34AsOqyW8xoFdJsgCpXR4/s72-c/tutorial+vb+net.jpg)
Artikel bagus, yuk kunjungi website kami
ReplyDelete