Membuat Layout Dasar

Buat folder baru dengan nama latihan-layout dan buat file baru dengan
nama index.html di dalamnya. Tulislah kode HTML berikut pada file index.html:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>My Webpage</title>
5. <style type="text/css">
6. .header {
7. background-color: #eee;
8. min-height: 50px;
9. }
10. .content {
11. background-color: #ddd;
13. }
14. .footer {
15. background-color: #ccc;
17. }
18. </style>
19. </head>
20. <body>
21. <div class="header">
22. <h1>Logo Produk</h1>
23. </div>
24.
25. <div class="content">
26. <h2>Our Products</h2>
27. </div>
28.
29. <div class="footer">
30. <p>copyright 2018 My Page</p>
31. </div>
32. </body>
33. </html>
Pada kode di atas, kita membuat 3 buah elemen utama di bawah <body>,

yakni <div> dengan masing-masing class header, content dan footer.
Pada <div> dengan class header, kita akan isi dengan logo dan menu halaman.
Kemudian pada <div> dengan class content, kita isi dengan konten dari web kita nanti,
yakni daftar artikel. Dan terakhir pada <div> dengan class footer, kita isi dengan teks
copyright.
Pada bagian <head> kita telah mendefinisikan style untuk setiap <div>, di antaranya

background-color untuk memberi warna latar agar kotak dari setiap elemen dapat kita
lihat batas masing-masingnya. Kita juga menambahkan style min-height untuk
mengatur tinggi minimum dari setiap elemennya. Setiap style kita atur menggunakan
nama classnya.
Bila kita buka halaman html tersebut di browser, maka akan muncul seperti ini:
Setiap elemen <div> di atas menjadi baris layout. Karena <div> bersifat block, maka
lebar dari elemennya akan menghabiskan ruang parent-nya ke samping. Bila kita ingin
membuat layout boxed, yakni layout halaman dengan jarak pinggir di kiri dan di kanan,
maka kita dapat menyimpan semua <div> tersebut di dalam satu <div> utama sebagai
parent-nya.
Ubah kode HTML yang dicetak tebal pada bagian body sehingga menjadi seperti ini:
1. <body>
2. <div class="container">
5. </div>
6.
7. <div class="content">
8. <h2>Our Products</h2>
9. </div>
10.
11. <div class="footer">
12. <p>copyright 2018 My Page</p>
13. </div>
14. </div>
15. </body>
Kemudian pada tag <style> di bagian header, tambahkan CSS berikut untuk memberi
style pada elemen <div> yang ber-class container:
1. <style type="text/css">
2. .container {
3. width: 800px;
4. margin: 0 auto;
5. }
6. .header {
9. }
10. </style>
Dengan menyimpan ketiga elemen <div> baris di dalam <div> utama, maka lebar dari

setiap <div>anaknya akan mengikuti lebar elemen induknya.
Perbaharui kode HTML di dalam <div class=”header”></div> menjadi seperti ini:
3. <div class="logo">
4. <img src="https://devschool.id/resources/images/sample-logo.png">
5. </div>
6. <div class="menu">
7. <ul>
8. <li><a href="#">Home</a></li>
9. <li><a href="#">About</a></li>
10. <li><a href="#">Contact</a></li>
11. </ul>
12. </div>
13. </div>
Bila kita lihat hasilnya di browser, maka gambar dan list menu akan tampil seperti ini:
Tambahkan kode CSS berikut pada tag <style> agar tampilannya menjadi rapi.
1. .header {
4. text-align: center;
5. }
6. .logo img {
7. width: 200px;
8. }
9. .menu ul {
10. padding: 0;
11. }
12. .menu ul li {
13. display: inline-block;
14. }
15. .menu ul li a {
16. padding: 10px 20px;
17. text-decoration: none;
18. }
Pada CSS di atas, kita menambahkan 3 selector baru, yakni selector untuk elemen
image pada .logo agar ukurannya tidak terlalu besar. Selain itu kita ubah mode display
dari elemen <li> yang defaultnya block menjadi inline-block agar ditampilkan
menyamping. Kita juga menambahkan padding pada setiap link menu dan
membersihkannya dari garis bawah. Tampilan akhirnya akan menjadi seperti ini:

Membuat Layout Dasar

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Layout Dasar

Diunggah oleh

Hak Cipta:

Format Tersedia

Buat folder baru dengan nama latihan-layout dan buat file baru dengan

nama index.html di dalamnya. Tulislah kode HTML berikut pada file index.html:

Pada kode di atas, kita membuat 3 buah elemen utama di bawah <body>,

Pada bagian <head> kita telah mendefinisikan style untuk setiap <div>, di antaranya

Dengan menyimpan ketiga elemen <div> baris di dalam <div> utama, maka lebar dari

Perbaharui kode HTML di dalam <div class=”header”></div> menjadi seperti ini:

Tambahkan kode CSS berikut pada tag <style> agar tampilannya menjadi rapi.

Anda mungkin juga menyukai