Scribd
Unggah
78 tayangan5 halaman

Latihan Membuat Layout

Dokumen tersebut memberikan instruksi untuk membuat layout halaman web sederhana dengan 3 bagian utama (header, content, footer) menggunakan HTML dan CSS. Langkah-langkahnya meliputi pembuatan struktur dasar halaman, penambahan style untuk memberi warna latar dan ukuran setiap bagian, serta modifikasi kode untuk menyusun elemen-elemen seperti logo dan menu pada header.

Diunggah oleh

s_cynuf
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
78 tayangan5 halaman

Latihan Membuat Layout

Dokumen tersebut memberikan instruksi untuk membuat layout halaman web sederhana dengan 3 bagian utama (header, content, footer) menggunakan HTML dan CSS. Langkah-langkahnya meliputi pembuatan struktur dasar halaman, penambahan style untuk memberi warna latar dan ukuran setiap bagian, serta modifikasi kode untuk menyusun elemen-elemen seperti logo dan menu pada header.

Diunggah oleh

s_cynuf
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

LATIHAN MEMBUAT LAYOUT

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;
12. min-height: 500px;
13. }
14. .footer {
15. background-color: #ccc;
16. min-height: 50px;
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">
3. <div class="header">
4. <h1>Logo Produk</h1>
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 {
7. background-color: #eee;
8. min-height: 50px;
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:

1. <div class="header">
2. <h1>Logo Produk</h1>
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 {
2. background-color: #eee;
3. min-height: 50px;
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:

Anda mungkin juga menyukai