menyisipkan gambar dengan CSS

• suatu file gambar dapat ditampilkan pada halaman web dengan 2 cara yaitu:
  • dengan perintah img pada html
  • dengan background-image apabila menggunakan css
• berikut adalah contoh potongan program dimana pada bagian atas adalah HTML dengan div gambar dan pada bagian bawah adalah file css yang melakukan insert gambar dengan menggunakan background-image

<div class="gambar">

</div>

.gambar {
    background-color: brown;
    width: 300px;
    height: 300px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background-image: url(background1.png);
    background-repeat: no-repeat;
    background-position: top right;

}

• Anda dapat melakukan download file gambar pattern pada website www.colourlovers.com
• setelah melakukan download dapat dimasukkan ke dalam folder
• agar dapat menggunakan background yang berupa gambar maka di ketik background-image: url(background1.png)
  • perhatikan penulisan nama file tanpa ada tanda petik
• penulisan background repeat
  • background-repeat: no-repeat | repeat | repeat-y | repeat-x
  • background-position: top right;
  • bila tidak memenuhi 1 layer penuh, maka ada 9 kombinasi posisi
  • pilihan pertama yaitu: top center bottom
  • pilihan kedua yaitu: left center right

pengaturan tulisan di dalam suatu area text

• apabila tulisan di dalam suatu kotak div terlalu banyak isinya dan melebihi dari ukuran kotak tersebut maka dapat diatur dengan menggunakan tag overflow

.kotak-teks {
    overflow: auto | scroll | hidden
}

• auto = akan ditampilkan scroll bar bila banyak tulisan melebihi ukuran kotak
• scroll = akan selalu ditampilkan scroll bar walaupun banyak tulisan tidak melebihi ukuran kotak
• hidden = tulisan akan ditampilkan sebesar ukuran kotak sisanya yang lebih tidak ditampilkan

Langkah praktek siswa

• buka folder tempat anda bekerja, buat 1 folder baru di dalamnya dengan nama images
• agar dapat menggunakan gambar foto nikola tesla, lakukan download 3 gambar dari web kelasdigital.com materi ini
• masukkan ke tiga gambar yang sudah di download ke dalam folder images
• buat hyperlink untuk link home, about dan contact
  • home akan membuka home.html
  • about akan membuka about.html
  • contact akan membuka contact.html
• pilih menu file save as dan simpan dengan nama contact.html dan about.html
• pada bagian tag main hapus seluruh isi tag article
• buat ketikan berikut

<div class="photo">
    <img src="images/tesla1.jpg" alt="">
    <img src="images/tesla2.png" alt="">
    <img src="images/tesla3.jpg" alt="">
</div>

• buat file cssnya di style.css

.photo img {
    width: 150px;
    margin: 10px;
    border: 5px solid #cccccc;

}

.photo {
    clear: left;
    background-image: url(images/background2.png)
    background-position: center center;
    height: 230px;
    padding-top: 30px;
    text-align: center;
}