Belajar Menggunakan HTML dan CSS ( Bagian 2 )

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

Contoh halaman web yang sudah jadi:

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

Pada artikel ini CSS akan digunakan untuk membuat halaman web menjadi semakin bagus. HTML adalah struktur dari isi web yang dibuat dalam berbagai jenis tag, dengan hanya menggunakan HTML untuk membuat web maka halaman yang dibuat akan terlihat biasa. CSS dapat mengubah style dari HTML itu sendiri mulai dari warna, font, layout, dll. Cara termudah untuk menambah CSS pada file HTML adalah dengan menggunakan tag <style>yang ditaruh pada baris awal halaman.

Dangan mengganakan script text-align yang ditaruh dalam tag <style> maka posisi dari paragraph dapat ditentukan. berikut adalah script yang digunakan untuk membuat paragraph menjadi ke tengah:

<style>  
p {  
  text-align: center;
}
</style>  

pada script diatas p digunakan untuk memilih semua elemen yang memakai tag <p>. Cara terbaik untuk memilih semua elemen secara sekaligus adalah dengan menggunakan elemen induk yang menampung semua elemen didalamnya. HTML menyediakan sebuah tag yang dinamakan <body> untuk tujuan tersebut.

Tambahkan tag <body> sehingga tag <p> dan <input> tercakup didalamnya :

<style>  
p {  
  text-align: center;
}
</style>  
<body>  
<p>Selamat datang! Masukkan email anda:</p>  
<input type="email" placeholder="Masukkan email anda">  
<input type="submit">  
</body>  

Sekarang script p pada <style> dapat diganti dengan body sehingga seluruh element dalam tag <body> dapat terpengaruh. Sebelum body biasanya selalu ada tag <head>. dalam tag <head> dapat dimasukkan tag <title>, seluruh document dalam tag <title> akan muncul pada tab browser. tag <style> juga berada dalam tag <head>. Berikut adalah script HTML yang sudah ditambah tag <head>:

<head>  
<title>Latihan HTML</title>  
<style>  
body {  
  text-align: center;
}
</style>  
</head>  
<body>  
<p>Selamat datang! Masukkan email anda:</p>  
<input type="email" placeholder="Masukkan email anda">  
<input type="submit">  
</body>  

Untuk memberitahu browser bahwa anda menggunakan versi terbaru HTML5 dapat ditambah <!DOCTYPE html> pada baris pertama. Berikut adalah layout HTML pada umumnya:

<!DOCTYPE html>  
<head>  
--- content website (meta) ----
</head>  
<body>  
--- content website ---
</body>  

Selanjutnya ubah warna background dengan menggunakan properti background yang diletakkan dalam script body pada <style>. Lalu ubah juga warna font pada <body> dengan menggunakan properti color. untuk mengubah bentuk font dapat menggunakan properti font-family. berikut adalah isi dari tag <style> setelah semua properti yang disebut sebelumnya dimasukkan:

body {  
  text-align: center;
  background: black;
  color: white;
  font-family: helvetica;
}
</style>  

Script HTML yang dibuat sejauh ini adalah sebagai berikut:

<!DOCTYPE html>  
<head>  
<title>Latihan HTML</title>  
<style>  
body {  
  text-align: center;
  background: black;
  color: white;
  font-family: helvetica;
}
</style>  
</head>  
<body>  
<p>Selamat datang! Masukkan email anda:</p>  
<input type="email" placeholder="Masukkan email anda">  
<input type="submit">  

berikut adalah tampilan Websitenya:

Pada artikel berikutnya akan dibahas cara memasukkan gambar dan merapikan layout, sehingga tampilan website menjadi seperti yang ada di contoh.

Selanjutnya menuju ke bagian ke tiga.

Geri Muhano

Web programmer di erabelajar.com. Alumni UIN Jakarta.