Scribd Logo
Unggah

Selamat datang di Scribd!

  • Latihan Membuat Layout

    Diunggah oleh

    s_cynuf
    36 tayangan5 halaman
    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.

    Deskripsi Asli:

    sumber decoding.com

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    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.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    36 tayangan5 halaman

    Latihan Membuat Layout

    Diunggah oleh

    s_cynuf
    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.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 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