Layout adalah proses penataan dan pengaturan teks atau grafik pada halaman. Layout meliputi penyusunan , pembagian tempat dalam suatu halaman, pengaturan jarak spasi, pengelompokan teks dan grafik, serta penekanan pada bagian tertentu.
Layout menurut bentuk terdiri dari :
- Model Top Index : Biasanya layout ini cocok digunakan untuk situs portal. Dengan banyak menu dan fasilitas yang ditawarkan, atau menampilkan link yang banyak ke situs lain.
- Model Layout Bottom Index : Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal.
- Model Layout Left Index : Layout tipe ini lebih akrab dengan pengunjung karena tampilan menu sama dengan sistem informasi.
- Model Layout Right Index : Kebalikan dari left index, cuma bedanya menu di bagian kanan jarang dipakai untuk menu utama.
- Model Layout alternating index : Biasanya digunakan untuk menampilkan grafik, foto, harga, jumlah, dan lain-lain.
Membuat Style pada halaman web
CSS adalah singkatan dari Cascading Style Sheets. Arti CSS adalah kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format/tampilan suatu halaman HTML.
Syntax CSS
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.
Format penulisan kalimat CSS :
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari pengaturannya.
Contoh Syntax:
h1 { color: red }
Contoh di atas menunjukkan
- Selector: h1
- Property: color Value: red
JIka diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).
Pengelompokan Selectors
Kita dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi :
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ), Contoh:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan h3 diatur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. agar rapih dan lebih mudah di baca.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
CSS Comment
Kadang kala, ada baiknya kita menuliskan komentar ke dalam kode CSS kita untuk memberi catatan pengingat. Kita bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk kita.
Contoh;
/* Tulis komentar di sini */
{
text-align: justify;
/* Tulis komentar di sini */
color: blue;
font-family: arial;
}
Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
- Inline CSS
- Embed atau memasang kode css ke dalam bagian <head>
- link ke external CSS
- Import CSS file
1. Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<p style=”color:blue”>
Isi Paragraf
</p>
Pada contoh di atas, elemen paragraf <p> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.
2. Embedded CSS
Kita bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.
Contoh:
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di atas semua elemen <p> dalam halaman web tersebut akan diformat menggunakan font berwarna biru.
3. External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Kita perlu memanggil file CSS tersebut ke dalam semua halaman web yang kita buat. Dengan cara ini, kita hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web kita. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
- Kita membuat satu file dengan notepad atau teks editor lain, dan beri nama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
p {font-family: arial; font-size: small;} h1 {color: red; }
- Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
4. Import CSS
Kita bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css";
atau
@import url("style.css");
Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik. Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right. Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:
color: red;
text-align: right;
font-size: 20pt
Class dan ID Selector
Misalkan kita membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika kita ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, kita ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam. Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali. Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}
Perhatikan tanda titik di setiap awal nama Class. Jika kita ingin menggunakan class selector di luar kode HTML kita menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.
Contoh penulisan kode CSS:
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Be the first to comment