Scribd Logo
Unggah

Selamat datang di Scribd!

  • Mengatur Layout Gambar

    Diunggah oleh

    Entot Suhartono
    14 tayangan11 halaman
    Just Share

    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
    Just Share

    Hak Cipta:

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

    Mengatur Layout Gambar

    Diunggah oleh

    Entot Suhartono
    Just Share

    Hak Cipta:

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

    MEMBUAT HALAMAN GALERI

    Tahap I:
    <html>
    <head>
    <title>HALAMAN GALERI</title>
    </head>
    <body>
    <img src="cars1.jpg" height="150px" width="250px">
    <img src="cars2.jpg" height="150px" width="250px">
    <img src="cars3.jpg" height="150px" width="250px">
    <img src="cars4.jpg" height="150px" width="250px">
    </body>
    </html>
    Hasil dari script HTML di atas adalah sebagai berikut:

    Tahap II:
    Tambahkan script style CSS untuk gambar seperti berikut ini
    <style>
    img {width: 250px;
    height: 150px;
    border: 4px solid #575D63;
    }
    </style>
    Tampilan halaman web hampir sama dengan sebelumnya, perbedaanya pada ukuran
    gambar yang ditampilkan adalah lebar 250px dan tinggi 150px pada setiap objek gambar
    diberi border dengan tebal 4px dan warna #575D63 (abu-abu).

    Tahap III:
    Tambahkan script tambahan di dalam tag <style> CSS, di mana script tersebut untuk
    menambahkan jarak antara gambar dengan border (padding). Berikut script style CSS
    lama dengan tambahan padding dengan ukuran 10px.
    <style>
    img {width: 250px;
    height: 150px;
    border: 4px solid #575D63;
    padding: 10px;
    }
    </style>
    Pada tampilan halaman web terlihat setiap objek gambar terdapat jarak antara gambar
    dengan border seperti berikut ini.

    Tahap IV:
    Tambahkan script tambahan di dalam tag <style> CSS, di mana script tersebut untuk
    menambahkan jarak antar gambar. Berikut script style CSS lama dengan tambahan margin
    dengan ukuran 20px.
    <style>
    img {width: 250px;
    height: 150px;
    border: 4px solid #575D63;
    padding: 10px;
    margin : 20px;
    }
    </style>
    Sekarang tampilan halaman web terlihat terdapat jarak antara gambar dengan gambar
    lainnya seperti berikut ini.
    Tahap V:
    Pada tahap akhir ini adalah menyusun objek gambar dengan tata letak 2 baris dan 2 kolom
    di dalalam satu border atau kotak. Tambahkan script tambahan di dalam tag <style> CSS,
    di mana script tersebut untuk membuat kotak dengan border solid untuk menampung 4
    objek gambar dalam satu kotak. Berikut script style CSS lama dengan tambahan style
    untuk tag <body>.

    <style>
    img {width: 250px;
    height: 150px;
    border: 4px solid #575D63;
    padding: 10px;
    margin : 20px;
    }
    </style>
    Sekarang tampilan halaman web terlihat terdapat jarak antara gambar dengan gambar
    lainnya seperti berikut ini.
    MEMBUAT HALAMAN DAFTAR GAMBAR
    Tahap I :
    <html>
    <head>
    <title>INFO TANAMAN</title>
    </head>
    <body>
    <img src = "peacock-plant.jpg" width="120" height="120"/>
    <div>
    <big><i>Codieum Variegatum</i></big>
    <hr/>
    Puring indah dengan daun tumbuh kompak. Bisa ditanam dalam pot dan
    diletakkan di teras rumah. paling tidak mendapat sinar matahari pagi.
    Media bisa mendapat campuran tanah, dan pupuk kandung. Kebutuhan air sedang.
    </div>
    </body>
    </html>

    Tahap II:
    Tambahkan Style untuk gambar
    <style>
    img { width: 120px;
    height: 120px;
    border: 4px solid #575D63;
    padding: 10px;
    margin: 10px;
    }
    </style>
    Tahap III:

    Tambahkan Style untuk gambar mengambang di kiri


    <style>
    img { width: 120px;
    height: 120px;
    border: 4px solid #575D63;
    padding: 10px;
    margin: 10px;
    }
    .gambar {
    float : left ;
    }
    .pemisah {
    clear : both;
    }
    </style>

    Tahap IV:
    Tambahkan class gambar pada tag <img> dan class pemisah pada tag <div>
    untuk memulai menambahkan gambar lagi. Maka script HTML adalah sebagai
    berikut:
    <html>
    <head>
    <title>INFO TANAMAN</title>
    </head>
    <body>
    <img src = "peacock-plant.jpg" class="gambar"/>
    <div>
    <big><i>Codieum Variegatum</i></big>
    <hr/>
    Puring indah dengan daun tumbuh kompak. Bisa ditanam dalam pot dan
    diletakkan di teras rumah. paling tidak mendapat sinar matahari pagi. Media bisa
    mendapat campuran tanah, dan pupuk kandung. Kebutuhan air sedang.
    </div>
    <div class="pemisah"></div>
    </body>
    </html>

    Hasil akhir dari desain html dan css adalah sebagai berikut:
    Tugas buatlah desain halaman web Info Tanaman seperti berikut ini:
    MEMBUAT HALAMAN CURICULUM VITAE

    Tahap I : (membuat tabel data pribadi)


    Buatlah teks judul curiculum vitae, sub judul data pribadi, dan tabel terdiri dari 4
    kolom dan 8 baris. Pada tabel, kolom pertama untuk label data, kolom kedua untuk
    tanda titik dua (:), kolom ketiga untuk data pribadi, dan kolom keempat untuk objek
    foto sampai 8 baris (rowspan=8). Adapun script dasar HTML adalah sebagai berikut:
    <html>
    <head>
    <title>Curiculum Vitae Azahra Fatimah</title>
    </head>
    <body>
    <div >
    <div>
    <h1>Curiculum Vitae</h1>
    </div>
    <span><h2>Data Pribadi</h2></span>
    <div>
    <table border="1px" width="650px">
    <tbody>
    <tr>
    <td width="30%">Nama Lengkap</td>
    <td width="1%">:</td>
    <td><b>Azahra Fatimah</b></td>
    <td rowspan="8" width="150px">
    <img src="korean-girl.jpg" height="150" width="150">
    </td>
    </tr>
    <tr>
    <td>Tempat, Tanggal Lahir</td>
    <td>:</td>
    <td>Seoul, 13 Maret 1991</td>
    </tr>
    <tr>
    <td>Agama</td>
    <td>:</td>
    <td>Islam</td>
    </tr>
    <tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td>Perempuan</td>
    </tr>
    <tr>
    <td>Status</td>
    <td>:</td>
    <td>Belum Menikah</td>
    </tr>
    <tr>
    <td>Alamat</td>
    <td>:</td>
    <td>Tanggul Mas Tengah 83, Tanah Mas</td>
    </tr>
    <tr>
    <td>Email</td>
    <td>:</td>
    <td><a href=" ">etnadiabpd@gmail.com</a></td>
    </tr>
    <tr>
    <td>Blog</td>
    <td>:</td>
    <td><a href=" ">Etnadia Blogspot</a></td>
    </tr>
    </tbody>
    </table>
    </div>
    </body>
    </html>

    Hasil dari script di atas adalah sebagai berikut

    Tahap II : (Menambahkan format CSS untuk tabel)


    Buatlah script CSS berikut ini menjadi satu dengan file HTML atau terpisa
    body{
    background: #CCCCCC;
    }
    #wrapper{
    width: 780px;
    margin-right: auto;
    margin-left: auto;
    }
    .kotak {
    margin-left:30px;
    width: 630px;
    padding: 20px;
    border-radius: 12px;
    border: 3px solid rgb(0,0,51);
    }
    #judul{
    background-color: rgb(192,192,192);
    padding: 1em;
    text-align: center;
    }
    #title {
    color: rgb(0,0,153);
    width: 550px;
    margin: 0px 31px;
    padding-top: 1px;
    font-size: 23px;
    }
    table{
    background-color: rgb(255,255,255);
    }
    td{
    border: rgb(255,255,255);
    font-weight: bold;
    }

    Kemudian modifikasi file HTML seperti berikut ini;


    <body>
    <div id="wrapper">
    <div id="judul">
    <h1>Curiculum Vitae</h1>
    </div>
    <span id="title"><h2>Data Pribadi</h2></span>
    <div class="kotak">
    <table border="1px" width="629px">
    <tbody>
    <tr>
    <td width="30%">Nama Lengkap</td>
    <td width="1%">:</td>
    <td><b>Azahra Fatimah</b></td>
    <td rowspan="8" width="150px"><img src="girl.jpg" height="150" width="150">
    </td>
    </tr>
    <tr>
    <td>Tempat, Tanggal Lahir</td>
    <td>:</td>
    <td>Seoul, 13 Maret 1991</td>
    </tr>
    <tr>
    <td>Agama</td>
    <td>:</td>
    <td>Islam</td>
    </tr>
    <tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td>Perempuan</td>
    </tr>
    <tr>
    <td>Status</td>
    <td>:</td>
    <td>Belum Menikah</td>
    </tr>
    <tr>
    <td>Alamat</td>
    <td>:</td>
    <td>Tanggul Mas Tengah 83, Tanah Mas</td>
    </tr>
    <tr>
    <td>Email</td>
    <td>:</td>
    <td><a href=" ">etnadiabpd@gmail.com</a></td>
    </tr>
    <tr>
    <td>Blog</td>
    <td>:</td>
    <td><a href=" "> Etnadia Blogspot</a></td>
    </tr>
    </tbody>
    </table>
    </div>
    </body>

    Hasil tampilan halaman website dari script di atas adalah sebagai berikut
    Tugas anda adalah membuat halaman website berisi curiculum vitae seperti pada
    gambar awal dari pembahasan ini.

    Anda mungkin juga menyukai