Belajar Menggunakan HTML dan CSS ( Bagian 3 )

Berikut adalah tutorial dasar step by step menggunakan HTML dan CSS bagian ke tiga.

Contoh halaman web yang sudah jadi:

Pada artikel sebelumnya halaman web yang sudah dibuat adalah sebagai berikut:

Pada Artikel ini website akan diperbagus dengan cara memasukkan gambar ke dalamnya serta merapikan layout, sehingga akan menjadi persis seperti gambar website contoh.

1. Logo Image. Untuk menambah gambar website caranya adalah dengan menggunakan tag <img> dalam tag <body>. berikut adalah cara untuk menambah logo image pada web ini:

<img src="asset\avatar2.png" height="260" width="260">  

atribut scr menentukan dimana lokasi gambar berada, dalam kasus ini dibuat folder baru disamping file HTML website ini, folder tersebut diberi nama "asset", dalam folder tersebut masukkan gambar yang ingin ditampilkan. Berikut adalah gambar yang penulis gunakan:
Atribut <height> dan <width> digunakan untuk menentukan tinggi dan lebar dari gambar.

2. Background Image. Pada tahap sebelumnya kita menggunakan properti background: black dalam tag <style> untuk membuat warna latar belakang menjadi hitam, untuk mengganti background menjadi gambar maka dapat menggunakan properti url("lokasi gambar"). berikut adalah properti latar belakang yang sudah diganti menjadi gambar:

background: url("asset/background.png")  

Untuk gambarnya anda bisa menggunakan gambar yang disukai. berikut adalah gambar yang penulis gunakan:

Untuk merapikan gambar maka bisa digunakan properti background-size: cover, yang berfungsi untuk membuat gambar menjadi tidak seperti "ubin". untuk membuat posisi background menjadi ketengah maka dapat digunakan properti background-position: center. Kedua properti tersebut diletakkan dalam properti body yang terletak dalam tag <style>. Sampai sejauh ini maka tag <style> akan menjadi seperti ini:

<style>  
    body {
      text-align: center;
      background: url("asset/background.png")
      background-size: cover;
      background-position: center;
      color: white;
      font-family: helvetica;
    }
  </style>

3. Merapikan Elemen. Sekarang ubah ukuran huruf dalam paragraph dengan menggunakan menambahkan properti p pada tag <style> . Lalu dalam p tersebut tambahkan properti font-size. menjadi seperti ini:

p {  
      font-size: 22px;
    }

Selanjutnya untuk merapikan form email maka tambahkan properti input ke dalam tag <style>. di dalamnya tambahkan properti border: 0 untuk membuat form input kembali ke bentuk dasarnya. Lalu tambahkan tag padding: 10px dalam properti input. padding berfungsi untuk menambahkan jarak antara sebuah elemen dengan benda dalam elemen tersebut. Sekarang ubah ukuran font dalam form email dengan menggunakan properti font-size: 18px. Properti input akan menjadi seperti ini:

input {  
      border: 0;
      padding: 10px;
      font-size: 18px;
    }

sekarang ubah tombol submit menjadi berwarna merah. Anda dapat memilih sebuah elemen dengan menyebutkan atribut yang digunakan oleh elemen tersebut. pilih tombol submit dengan cara sebagai berikut input[type="submit"]. ubah background elemen dengan menambahkan properti background: red. untuk mengubah huruf tombol menjadi putih tambahkan properti color: white. properti inmput untuk tombol akan menjadi seperti ini:

input[type="submit"] {  
      background: red;
      color: white;
    }

Tampilan website anda akan menjadi sesuai dengan yang di contoh.

script HTML yang sudah jadi akan menjadi seperti ini:

<!DOCTYPE html>  
<head>  
    <link href="normalize.css" rel="stylesheet">
<title>Web Latihan</title>  
<style>  
    body {
        text-align: center;
        background: url("asset/background.png");
        background-size: cover;
        background-position: center;
        color: white;
        font-family: helvetica;
    }
    p {
        font-size: 22px;
    }
    input {
        border: 0;
        padding: 10px;
        font-size: 18px;
    }
    input[type="submit"] {
        color: white;
        background: red;
    }
</style>  
</head>  
<body>  
<img src="asset\avatar.png" height="260" width="260">  
<p>Selamat datang! Masukkan email anda:</p>  
<input type="email" placeholder="Masukkan email anda">  
<input type="submit">  
</body>  

Anda dapat melihat keseluruhan dari folder HTML yang penulis buat di sini.

Geri Muhano

Web programmer di erabelajar.com. Alumni UIN Jakarta.