Assalamualaikum - Melanjutkan dari materi terkait implementasi HTML dan CSS pada Part 1, kali ini kita akan membahas penggunannya untuk memasukkan file gambar dan style warna pada halaman HTML. Sebelum memulai, Anda bisa membuat dahulu folder untuk menyimpan gambar di dalam folder kerja HTML yang digunakan. Beri nama folder dengan img.
Selanjutnya Anda bisa mendownload gambar melalui internet. Ada berbagai macam situs yang menyediakan file gambar yang bisa didownload secara gratis, salah satunya pixabay.com. Dalam latihan ini, kita menggunakan kata kunci Laboratory untuk menemukan gambar bertemakan laboratorium. Pilih salah satu gambar yang Anda butuhkan. Berikut file gambar yang kita pilih dari situs Pixabay. Download gambar dalam format JPEG lalu simpan dalam folder img.
Langkah selanjutnya adalah silahkan ketik kodingan di bawah pada halaman HTML yang sudah dibuat dan disimpan sebelumnya pada latihan Part 1.
<html>
<head><center><h1>Profil Laboratorium Biotekners</h1></center></head>
<body>
<marquee>Assalamualaikum. Selamat datang di website profil Laboratorium Biotekners</marquee>
</body>
<footer></footer>
<style></style>
<script></script>
</html>
Untuk menggunakan gambar sebagai background, Anda dapat menggunakan koding style di bawah ini:
<style type="text/css">
body
{
background-image:url('../link_folder_gambar/');
background-repeat:repeat-x;
}
.container
{
background-image:url('images/center.jpg');
background-repeat:no-repeat;
}
td.cntr {padding-top:50px;}
</style>
Setelah menambahkan kodingan style gambar sebagai background. Pada bagian bawah kode <body> diketikkan kode <div class="container"> konten </div>. Jika sudah maka coba run debugging di aplikasi Visual Code Studio dan lihat hasl perubahannya. Apakah seperti gambar di bawah ini ? Jika ya, berarti Anda berhasil melakukannya.
Selanjutnya kita akan membuat kotak berisi konten dengan menggunakan Jumbotron. Ketikkan kode <div class="jumbotron>konten</div> dengan menambahkan di bagian style kode berikut:
.jumbotron
{
background-color: blanchedalmond;
position: relative;
background-size: cover;
}
Jika berhasil, maka hasilnya akan muncul seperti di bawah:
Oke. Demikian tutorial untuk part 2. Jika ada kesulitan, silahkan diskusikan menggunakan
kolom komentar di bawah ini. Semoga bermanfaat.
More From Author
Tutorial