Merapikan HTML Menggunakan CSS

Dokumen html yang dibuat tanpa "sentuhan" akan tampak penuh satu halaman layar. Kita perlu mengatur dokumen HTML agar tampil rapi pada browser.

Katakanlah kita telah membuat halaman website HTML dengan kode sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Tampil di Bar Browser</title>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>

Tulisan pada tag title akan tampil pada bar browser sedangkan tulisan di antara tag body akan tampil pada kolom utama browser. Tulisan akan tampak memenuhi layar dan ini kurang enak dipandang mata. Untuk membuat tulisan tampil rapi, kita perlu menambahkan kode css di antara tag head. Metode ini adalah metode menambahkan CSS secara internal (menyatu dengan file HTML). Bisa juga kode CSS diletakan secara eksternal (terpisah dengan file html).

Untuk menambahkan css secara internal adalah dengan menambahkan tag style di antara tag head sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Tampil di Bar Browser</title>
<style type="text/css">
...
</style>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>

Titik-titik di antara tag style tersebut adalah tempat diletakannya kode css untuk mengatur tampilan halaman website HTML.

Silakan baca: Membuat Halaman Website HTML Lengkap

Untuk membuat tulisan (konten) tampil di tengah layar secara dengan lebar tententu, tambahkan kode css berikut.
body {
width: 800px;
margin: auto;
}

Sekarang tampilan halaman website HTML yang telah dibuat akan tampil dengan lebar 800px di tengah layar pada browser dengan resolusi lebar lebih besar dari 800px.

CSS Eksternal

Kode CSS bisa dijalankan secara eksternal pada dokumen html. Untuk melakukan hal ini, buatlah file baru berekstensi CSS, misalnya style.css. Isi file tersebut dengan kode CSS yang terdapat di antara tag style (bagian head). Ganti tag style (berada di antara tag head) yang sebelumnya seperti berikut
<style type="text/css">
body {
width: 800px;
margin: auto;
}
</style>

menjadi
<link rel="stylesheet" type="text/css" href="style.css">
sehingga kode di antara tag head menjadi seperti berikut.
<head>
<title>Judul Tampil di Bar Browser</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Contoh tampilannya bisa dilihat di bawah ini.

Selamat mencoba.

Bagikan

Oleh Opan pada
Seorang guru matematika yang hobi menulis tiga bahasa, yaitu bahasa indonesia, matematika, dan php. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang dimiliki.

Demi menghargai hak kekayaan intelektual, mohon untuk tidak menyalin sebagian atau seluruh halaman web ini dengan cara apa pun untuk ditampilkan di halaman web lain atau diklaim sebagai karya milik Anda. Tindakan tersebut hanya akan merugikan diri Anda sendiri. Jika membutuhkan halaman ini dengan tujuan untuk digunakan sendiri, silakan unduh atau cetak secara langsung.

Kunjungan Halaman Bulan Ini
Protected by Copyscape CodeCogs - An Open Source Scientific Library