Dengan style sheet kita dapat memisahkan style (format tampilan) dengan isi
dokumen HTML yang sebenarnya. Hal ini dilakukan dengan tujuan kita ingin
mengubah tampilan yang ada pada dokumen HTML, kita tidak perlu menggantikan
sebagian besar isi source dengan mengotak-atik setuap baris source dokumen HTML
yang ingin kita ubah tersebut. Cukup dengan mengubah definisi style sheet atau
dengan membuat style sheet yang baru, Anda akan dapat melakukan dengan cara yang
lebih mudah. Jadi style sheet merupakan sarana yang efisien dan fleksibel untuk
mengatur tampilan homepage.
Pembuatan homepage dapat memberikan spesifikasi informasi style dari Style
Sheet Language yang akan digunakan dalam sebuah dokumen HTML. Untuk itu,
sebaiknya digunakan elemen META untuk meletakkan default Style Sheet Language
untuk dokumen tersebut. Contoh untuk deklarasi CSS (Cascading Style Sheet)
Language, maka deklarasi formatnya adalah sbb:
<meta http-equiv=”Content-Style-Type” content=”text/css”>
Cara lain untuk mendefinisikan tipe style adalah seperti contoh berikut:
<head>
<style type=”text/css”> … </style>
</head>
Penulisan dengan TYPE seperti ini tidak harus dilakukan, tujuannya adalah untuk
bagi browser yang tidak support untuk mengabaikannya.
Inline Style Information
Menggunakan atribut STYLE.Atribut ini digunakan untuk mendefinisikan
informasi style dokumen HTML untuk sebuah elemen tunggal. Sintaks dari
data style tergantung pada Style Sheet Language yang digunakan. Contoh
berikut ini memperlihatkan penentuan informasi warna dan ukuran huruf suatu
paragraph tertentu.
<p style=”font-size:12pt; color:blue;”>aang
Dalam CSS format pendeklarasian property style adalah …
“nama : nilai”
dan diantara property yang satu dengan lainnya dipisahkan dengan tanda titik
kome (;).
Atribut style biasa digunakan untuk mengaplikasikan sebagian style pada
sebuah dokumen HTML. Jika style ingin digunakan pada beberapa tag lainnya
kembali (re-used), pembuat homepage harus menggunakan elemen STYLE
untuk mengelompokkan informasi tersebut dalam bentuk header. Agar
kemampuan lebih optimal dan fleksibel , pembuat homepage bisa
mendefinisikan style pada External Style Sheet (style sheet luar).
HTML Basic
Header Style Information
Style sheet bias diletakkan di bagian kepala dokumen HTML. HTML
mengizinkan elemen-elemen STYLE berada di bagian HEAD maupun di
dalam BODY. Imlementasi style sheet kali ini bias diterapkan lebih bervariasi
dibandingkan dengan Inline Style Information. Sebagai contoh, pendeklarasian
elemen STYLE dalam bentuk header ini digunakan untuk
:
1. Hal-hal yang berkaitan dengan sebuah tag spesifik HTML, misalnya
pendeklarasian untuk semua tag P atau untuk semua tag H, dsb.
2. Mendefinisikan sebuah tag HTML tertentu yang memiliki nama class
spesifik dengan nilai –nilai style sheet tertentu (digunakan untuk
mendefinisikan style tag tertentu). Misalnya, atribut CLASS yang berisi
nilai-nilai tertentu tersebut digunakan tag P.
Contoh :
p.aang{text-align:center}
maka style ini hanya digunakan oleh
<p class=”aang”>
3. Mendefinisikan sebuah nama identitas spesifik yang memiliki nilai-nilai
style sheet tertentu (mendefinisikan tag-tag yang mengandung identitas
spesifik tersebut.) Misalnya, atribut ID yang memiliki nilai-nilai tertentu
dengan identitas yang khusus pula digunakan oelh tag P dan DIV yang
memiliki identitas khusus pula.
Contoh:
#aang{teks-align:center;}
maka style ini digunakan oleh tag-tag apapun yang mengandung nama
identitas khusus “aang”, misalnya:
<p id=”aang”>
<div id=”aang”>
Memformat tampilan teks dengan CSS
Dengan style sheet kita juga dapat membuat cetak tebal, miring, menentukan
jenis dan ukuran huruf, dsb.
1) Menentukan ukuran huruf
Untuk mengatur ukuran huruf dengan menggunakan stle sheet, gunakan
perintah font-size dengan nilai tertentu yang mengadung satuan tertentu
pula. Untuk ukuran dilihat pada tabel berikut :
Penulisan di HTML Menyatakan Ukuran
cm Centimeter
em Em unit (tinggi default font).
in Inci
mm Milimeter
pi Pica (ada 12 point per pica).
pt Point (ada 72.27 point per inchi)
px Pixel (default unit).
HTML Basic
Contoh Penulisan:
<p style=”font-size:12pt”> Riskia Meita Sovie </p>
Berarti semua teks yang berada di antara tag <P> dan </P> akan memiliki
ukuran huruf 12 point.
Pada contoh tadi kita menggunkaan teknik “Inline Style”. Kita juga bias
menggunakan berbagai macam teknik style sheet yang lain. Berbagai macam
alternatif penulisan pada style sheet lain :
1. Inline Style :
<p style=”font-size:12pt”>Egar Abdi </p>
2. Definisikan dulu style sheet pada dokumen HTML tersebut di antara
elemen <head></head> maupun anatara <body></body> dengan contoh
penulisan seperti ini …
<head>
<style>P{font-size:12;}</style>
</head>
<body>
<p>Riskia Meita Sovie
</body>
3. Dengan menggunakan “External style sheet ( style sheet luar)” yang akan
kita pelajari nanti.
4. Ingat juga, pada contoh-contoh yang akan dibuat oleh penulis nanti akan
digunakan teknik seperti pada sebelumnya., yaitu mendefinisikan style
sheet di antara <style></style> terlebih dahulu.
2) Menentukan bentuk huruf.
Ada berbagai macam bentuk huruf seperti Courier new, Arial, Verdana, Times
New Roman , dan masih banyak lagi yang lainnya. Pada pembuatan
Homepage, jika kita tidak menentukan jenis huruf pada source HTML-nya,
bentuk huruf yang akan ditampilkan nanti akan sesuai dengan bentuk huruf
default browser yang telah ditetapkan sebelumnya. Bagaimana kita
mengaturnya dengan style sheet? Gunakan perintah style sheet front-family.
Perhatikan contoh berikut ini
p{font-family:arial;}
div{font-family:”times new roman”;}
Jika bentuk huruf yang digunakan terdiri atas beberapa kata seperti “times new
romwn”, “arial black”…”. Jika hanya terdiri atas satu kata saja seperti “arial”,
“verdana”, dan lain-lain, Anda boleh menggunakan tanda kutip tersebut boleh
juga tidak.
3) Menentukan Jenis cetakan huruf .
Jenis cetakan ada bermacam-macam, antara lain, cetakan tebal, cetakan
miring, bergaris bawah, ada garis diatasnya dan teks yang tercoret garis lurus.
Perintah style sheet yang digunakan adalah
Cetakan miringfont-style:italic;
Cetakan tebeal font-weight:bold;
Bergaris bawah text-decoration:underline;
Ada garis diatas teks text-decoration:overline;
Teks tercoret garis lurus text-decoration:line-through;
4) Menentukan warna huruf
Perintah style sheet yang digunakan untuk menentukan warn ahuruf yang
digunakan adalah color. Nilai dari perintah itu bias berupa namawarna dalam
bahasa inggris seperti “white”, “black”, :red”, “green”, dan sebagainya.
Perhatikan contoh berikut ini.
<style>
div.merah{color:red;}
</style>
<div class=”merah”>
semua teks yang berada pada daerah ini akan berwarna merah
</div>
5) Mengatur jarak baris antar daerah teks
Kita juga bias mengatur jarak baris antar daerah teks tertentu, misalnya
antarparagraf, dengan menggunakan style sheet. Perintah yang digunakan
adalah line-height, dengan nilai berupa angka disertai dengan satuan ukuran
tertentu. Perhatikan contoh berikut ini:
<style>
p{line-height:1 cm;}
</style>
<P>
ini paragraph kedua … dan jarak antara paragraph Saturday
dan dua adalah sebesar 1 cm
6) Mengatur perataan teks
Blok-blok teks tertentu, kita biasa menentukan jenis peralatan teksnya, seperti
teks rata kiri, rata kanan, dan teks yang ditengah-tengah. Dalam style sheet
digunakan perintah text-align untuk menentukan jenis perataan teks tersebut.
Nilai-nilainya adalah left (rata kiri), right (rata kanan), justify (rata kanan dan
kiri), dan center ( teks ditengah-tengah). Perhatikan contoh berikut ini.
<style>
div.rata_kanan{teks-align:right;}
</style>
<div class =”rata_kanan”>
semua teks yang berada pada daerah ini akan rata kanan
</div>
7) Membuat jarakspasimasuk pada awal paragraph
Untuk menentukan indentasi, yaitu membuat jarak spasi pada awal paragraph
(baris yang masuk ke dalam atau seperti fungsi tombol <TAB>) digunakan
atribut text-indent. Satuan yang digunakan oleh atribut-atribut ini sama seperti
satuan-satuan yang telah kita ketahui sebelumnya, sepertipixel (px), centimeter
(cm), point (pt) dan sebagainya. Perhatikan contoh berikut ini:
<style>
p.masuk_5 cm{text-indent:5 cm;}
</style>
<p class=”masuk_5 cm”>
paragraph ini memiliki jarak masuk awal sebesar 5 cm di awal
paragraph…
8) Mengatur batas tepi (margin)
Pada pembuatan homepage, kita juga perlu mengatur margin dari halaman
homepage tersebut untuk memeindah tam,pilan. Dalam style sheet, untuk
mengatur margin digunakan empat macam atribut, antara lain:
margin-top untuk mengatur batas tepi atas
margin-right untuk mengatur batas tepi kanan
margin-bottom untuk mengatur batas tepi bawah
margin-left untuk mengatur batas tepi kiri
Semua batas tersebut adalah relatif, maksudnya jika kita besarkan maupun kita
kecilkan layar browser, dan style sheet telah menentukan batas tepi kiri 3 cm
dan tepi kanan 3 cm, tampilan akan selalu berusaha menyesuaikan agar
kondisi tetap bertahan.
Contoh penulisan :
BODY{ margin-top:4 cm;
margin-right : 3 cm;
margin-bottom : 3 cm;
margin-left : 4 cm; }
Penentuan batas-batas tepi (margin) tersebut bias disederhanakan. Kita tidak
perlu lagi menulis margin top, margin-right, dan sebagainya. Dengan atribut
margin, kita dapat menyederhanakan bentuk penulisan tersebut.
Oleh karena itu, pada contoh sebelumnya kita bias menggantinya dengan
penulisan :
BODY{margin: 4 cm 3 cm 3 cm 4 cm;}
Kita lihat urutan nilai atribut margin. Dari kiri ke kanan menunjukkan urutan
margin-top, margin-right, margin-bottom, margin-left.
Jika penulisannya hanya terdiri atas satu nilai batas, nilai batas lainnya secara
otomatis akan dibuat sama. Jika terdiri atas dua atau tiga nilai batas, nilai-nilai
batas yang berlawan (atas dengan bawah, kiri dengan kanan) akan sama.
Contoh:
{margin: 1 cm 2 cm 3 cm;}
Berati batas atas 1 cm, batas kanan akan sama dengan batas kiri yaitu 2 cm,
dan batas bawah 3 cm.
9) Membuat tampilan border
HTML Basic
Dasar Tag HTML 2 - 20
Border merupakan pembatas suatu daerah /blok tertentu. Dalam hal ini,
pembatas tertentu. Dan, daerah/blok tertentu . Dalam hal ini, pembatas
tersebut berupa garis. Dan, daerah/blok tertentu yang dibatasi oleh border
tersebut adalah daerah yang berada di dalam tag-tag blok seperti P, DIV, dan
sebagainya.
Atribut-atribut yang berkaitan dengan pembuatan border:
a. Border, untuk mendefinisikan ada tidaknya garis pembatas. Nilai yang
diberikan adalah none (tidak ditampakkan border/garis pembatasnya),
solid (garis pembatasnya berupa garis tebal dengan ukuran default), solid
thin (garis pembatasnya lebih tipis daripada solid).
b. border-width, untuk menetukan ukuran tebal garis pembatas. Satuan
digunakan adalah satuan-satuan dalam dalam HTML seperti px, cm, mm
dan sebagainya.
c. background, untuk memberikan latar belakang pada daerah yang dibatasi
oleh border tersebut. Latar belakang ini bisa berupa warna maupun
gambar. Untuk membuat latar belakang berupa warna, nilai background
adalah nama warna atau kode warna RGB heksadesimal . Sedangkan untuk
membuat latar belakang berupa gambar, nilai background adalah URL
(`nama atau URL gambar yang digunakan sebagai latar belakang’).
d. margin, untuk mendefinisikan batas-batas wilayah border relatif terhadap
wilayah tag-tag blok yang digunakan dimana tag-tag blok melingkupi
wilayah border tersebut. Selain itu, kita juga bisa menggantikan margintop,
margin-right, margin-bottom, dan margin left.
e. padding, untuk mmendefinisikan jarak antara isi border dengan garisn
pembatasnya. Nilai yang diberi satuan seperti px, cm, mm dan sebagainya.
Bentuk dan aturan penulisannya tidak jauh berbeda dengan bentuk dan
aturan penulisan margin yang sederhana. contohnya
{padding: 20px 20px 10px 10px; },
dengan urutan top right bottom left. Selain itu, terdapat atribut lain yang
bisa digunakan yaitu padding-top, padding-right. padding-bottom,
paddingh-left yang digunakan untuk mendefinisikan padding di satu sisi
saja.
f. blockquote mertupakan tag blok yang penulisannya dalam bentuk indetasi
(masuk ke dalam) dan biasa digunakan untuk pembuatan kutipan. Berbeda
denagn p, walaupun keduanya sama-sama tag blok, pada
BLOCKQUOTE pada umu mnya bisa berisi tag-tag blok yang lain (pada
div juga demikian), sedangkan pada p perlakuan seperti itu jarang
dilakukan. Jadi pada BLOCKQUOTE bisa saja terjadi.
<BLOCKQUOTE>
<p>…</p>
<BLOCKQUOTE>…</BLOCKQUOTE>
</BLOCKQUOTE>
Pendefinisian Style Tag dengan Nama Class khusus
Style dapat dibuat dengan mendefinisikan sebuah tag HTML tertentu dengan
atribut style sheet yang memiliki sebuah nama class yang spesifik/khusus. Yaitu
HTML Basic
dengan menggunakan atribut CLASS dengan nama class tertentu yang dapat
menunjukkan cirri khusus untuk siapa definisi style tersebut digunakan.
DIV dan Span biasa digunakan untuk mengelompokkan tag-tag. Selain,
keduanya biasa digabungkan dengan atribut ID dan CLASS yang menawarkan
mekanisme generic untuk memperluas struktur dokumen (mempermudah dan
mengefisiensikan pengaturan tampilan).
SPAN merupakan inline content (text level), sedangkan div merupakan
block level. Kedua sangat bermanfaat untuk style sheet. Dimana<DIV></DIV>
itu sendiri maupun antara DIV dengan tag-tag lainnya, pada pergantian barisnya
tidak terdapat baris kosong (line break). Sedangkan seperti kita ketahui
sebelumnya, antara P yang satu denga P yang lain maupun P dengan tag-tag
lainnya, terdapat pergantian baris. Lihat kembali penggalan source dari tampilan
baris.
…Ryan Giggs berhasil meraih MVP dan hadiah berupa sedan sport
<SPAN CLASS = “hadiah”>Toyota Celica SS-II</SPAN>.
Perhatikan baik-baik, tidak ada pergantian baris pada SPAN
dokumen HTML yang sebenarnya. Hal ini dilakukan dengan tujuan kita ingin
mengubah tampilan yang ada pada dokumen HTML, kita tidak perlu menggantikan
sebagian besar isi source dengan mengotak-atik setuap baris source dokumen HTML
yang ingin kita ubah tersebut. Cukup dengan mengubah definisi style sheet atau
dengan membuat style sheet yang baru, Anda akan dapat melakukan dengan cara yang
lebih mudah. Jadi style sheet merupakan sarana yang efisien dan fleksibel untuk
mengatur tampilan homepage.
Pembuatan homepage dapat memberikan spesifikasi informasi style dari Style
Sheet Language yang akan digunakan dalam sebuah dokumen HTML. Untuk itu,
sebaiknya digunakan elemen META untuk meletakkan default Style Sheet Language
untuk dokumen tersebut. Contoh untuk deklarasi CSS (Cascading Style Sheet)
Language, maka deklarasi formatnya adalah sbb:
<meta http-equiv=”Content-Style-Type” content=”text/css”>
Cara lain untuk mendefinisikan tipe style adalah seperti contoh berikut:
<head>
<style type=”text/css”> … </style>
</head>
Penulisan dengan TYPE seperti ini tidak harus dilakukan, tujuannya adalah untuk
bagi browser yang tidak support untuk mengabaikannya.
Inline Style Information
Menggunakan atribut STYLE.Atribut ini digunakan untuk mendefinisikan
informasi style dokumen HTML untuk sebuah elemen tunggal. Sintaks dari
data style tergantung pada Style Sheet Language yang digunakan. Contoh
berikut ini memperlihatkan penentuan informasi warna dan ukuran huruf suatu
paragraph tertentu.
<p style=”font-size:12pt; color:blue;”>aang
Dalam CSS format pendeklarasian property style adalah …
“nama : nilai”
dan diantara property yang satu dengan lainnya dipisahkan dengan tanda titik
kome (;).
Atribut style biasa digunakan untuk mengaplikasikan sebagian style pada
sebuah dokumen HTML. Jika style ingin digunakan pada beberapa tag lainnya
kembali (re-used), pembuat homepage harus menggunakan elemen STYLE
untuk mengelompokkan informasi tersebut dalam bentuk header. Agar
kemampuan lebih optimal dan fleksibel , pembuat homepage bisa
mendefinisikan style pada External Style Sheet (style sheet luar).
HTML Basic
Header Style Information
Style sheet bias diletakkan di bagian kepala dokumen HTML. HTML
mengizinkan elemen-elemen STYLE berada di bagian HEAD maupun di
dalam BODY. Imlementasi style sheet kali ini bias diterapkan lebih bervariasi
dibandingkan dengan Inline Style Information. Sebagai contoh, pendeklarasian
elemen STYLE dalam bentuk header ini digunakan untuk
:
1. Hal-hal yang berkaitan dengan sebuah tag spesifik HTML, misalnya
pendeklarasian untuk semua tag P atau untuk semua tag H, dsb.
2. Mendefinisikan sebuah tag HTML tertentu yang memiliki nama class
spesifik dengan nilai –nilai style sheet tertentu (digunakan untuk
mendefinisikan style tag tertentu). Misalnya, atribut CLASS yang berisi
nilai-nilai tertentu tersebut digunakan tag P.
Contoh :
p.aang{text-align:center}
maka style ini hanya digunakan oleh
<p class=”aang”>
3. Mendefinisikan sebuah nama identitas spesifik yang memiliki nilai-nilai
style sheet tertentu (mendefinisikan tag-tag yang mengandung identitas
spesifik tersebut.) Misalnya, atribut ID yang memiliki nilai-nilai tertentu
dengan identitas yang khusus pula digunakan oelh tag P dan DIV yang
memiliki identitas khusus pula.
Contoh:
#aang{teks-align:center;}
maka style ini digunakan oleh tag-tag apapun yang mengandung nama
identitas khusus “aang”, misalnya:
<p id=”aang”>
<div id=”aang”>
Memformat tampilan teks dengan CSS
Dengan style sheet kita juga dapat membuat cetak tebal, miring, menentukan
jenis dan ukuran huruf, dsb.
1) Menentukan ukuran huruf
Untuk mengatur ukuran huruf dengan menggunakan stle sheet, gunakan
perintah font-size dengan nilai tertentu yang mengadung satuan tertentu
pula. Untuk ukuran dilihat pada tabel berikut :
Penulisan di HTML Menyatakan Ukuran
cm Centimeter
em Em unit (tinggi default font).
in Inci
mm Milimeter
pi Pica (ada 12 point per pica).
pt Point (ada 72.27 point per inchi)
px Pixel (default unit).
HTML Basic
Contoh Penulisan:
<p style=”font-size:12pt”> Riskia Meita Sovie </p>
Berarti semua teks yang berada di antara tag <P> dan </P> akan memiliki
ukuran huruf 12 point.
Pada contoh tadi kita menggunkaan teknik “Inline Style”. Kita juga bias
menggunakan berbagai macam teknik style sheet yang lain. Berbagai macam
alternatif penulisan pada style sheet lain :
1. Inline Style :
<p style=”font-size:12pt”>Egar Abdi </p>
2. Definisikan dulu style sheet pada dokumen HTML tersebut di antara
elemen <head></head> maupun anatara <body></body> dengan contoh
penulisan seperti ini …
<head>
<style>P{font-size:12;}</style>
</head>
<body>
<p>Riskia Meita Sovie
</body>
3. Dengan menggunakan “External style sheet ( style sheet luar)” yang akan
kita pelajari nanti.
4. Ingat juga, pada contoh-contoh yang akan dibuat oleh penulis nanti akan
digunakan teknik seperti pada sebelumnya., yaitu mendefinisikan style
sheet di antara <style></style> terlebih dahulu.
2) Menentukan bentuk huruf.
Ada berbagai macam bentuk huruf seperti Courier new, Arial, Verdana, Times
New Roman , dan masih banyak lagi yang lainnya. Pada pembuatan
Homepage, jika kita tidak menentukan jenis huruf pada source HTML-nya,
bentuk huruf yang akan ditampilkan nanti akan sesuai dengan bentuk huruf
default browser yang telah ditetapkan sebelumnya. Bagaimana kita
mengaturnya dengan style sheet? Gunakan perintah style sheet front-family.
Perhatikan contoh berikut ini
p{font-family:arial;}
div{font-family:”times new roman”;}
Jika bentuk huruf yang digunakan terdiri atas beberapa kata seperti “times new
romwn”, “arial black”…”. Jika hanya terdiri atas satu kata saja seperti “arial”,
“verdana”, dan lain-lain, Anda boleh menggunakan tanda kutip tersebut boleh
juga tidak.
3) Menentukan Jenis cetakan huruf .
Jenis cetakan ada bermacam-macam, antara lain, cetakan tebal, cetakan
miring, bergaris bawah, ada garis diatasnya dan teks yang tercoret garis lurus.
Perintah style sheet yang digunakan adalah
Cetakan miringfont-style:italic;
Cetakan tebeal font-weight:bold;
Bergaris bawah text-decoration:underline;
Ada garis diatas teks text-decoration:overline;
Teks tercoret garis lurus text-decoration:line-through;
4) Menentukan warna huruf
Perintah style sheet yang digunakan untuk menentukan warn ahuruf yang
digunakan adalah color. Nilai dari perintah itu bias berupa namawarna dalam
bahasa inggris seperti “white”, “black”, :red”, “green”, dan sebagainya.
Perhatikan contoh berikut ini.
<style>
div.merah{color:red;}
</style>
<div class=”merah”>
semua teks yang berada pada daerah ini akan berwarna merah
</div>
5) Mengatur jarak baris antar daerah teks
Kita juga bias mengatur jarak baris antar daerah teks tertentu, misalnya
antarparagraf, dengan menggunakan style sheet. Perintah yang digunakan
adalah line-height, dengan nilai berupa angka disertai dengan satuan ukuran
tertentu. Perhatikan contoh berikut ini:
<style>
p{line-height:1 cm;}
</style>
<P>
ini paragraph kedua … dan jarak antara paragraph Saturday
dan dua adalah sebesar 1 cm
6) Mengatur perataan teks
Blok-blok teks tertentu, kita biasa menentukan jenis peralatan teksnya, seperti
teks rata kiri, rata kanan, dan teks yang ditengah-tengah. Dalam style sheet
digunakan perintah text-align untuk menentukan jenis perataan teks tersebut.
Nilai-nilainya adalah left (rata kiri), right (rata kanan), justify (rata kanan dan
kiri), dan center ( teks ditengah-tengah). Perhatikan contoh berikut ini.
<style>
div.rata_kanan{teks-align:right;}
</style>
<div class =”rata_kanan”>
semua teks yang berada pada daerah ini akan rata kanan
</div>
7) Membuat jarakspasimasuk pada awal paragraph
Untuk menentukan indentasi, yaitu membuat jarak spasi pada awal paragraph
(baris yang masuk ke dalam atau seperti fungsi tombol <TAB>) digunakan
atribut text-indent. Satuan yang digunakan oleh atribut-atribut ini sama seperti
satuan-satuan yang telah kita ketahui sebelumnya, sepertipixel (px), centimeter
(cm), point (pt) dan sebagainya. Perhatikan contoh berikut ini:
<style>
p.masuk_5 cm{text-indent:5 cm;}
</style>
<p class=”masuk_5 cm”>
paragraph ini memiliki jarak masuk awal sebesar 5 cm di awal
paragraph…
8) Mengatur batas tepi (margin)
Pada pembuatan homepage, kita juga perlu mengatur margin dari halaman
homepage tersebut untuk memeindah tam,pilan. Dalam style sheet, untuk
mengatur margin digunakan empat macam atribut, antara lain:
margin-top untuk mengatur batas tepi atas
margin-right untuk mengatur batas tepi kanan
margin-bottom untuk mengatur batas tepi bawah
margin-left untuk mengatur batas tepi kiri
Semua batas tersebut adalah relatif, maksudnya jika kita besarkan maupun kita
kecilkan layar browser, dan style sheet telah menentukan batas tepi kiri 3 cm
dan tepi kanan 3 cm, tampilan akan selalu berusaha menyesuaikan agar
kondisi tetap bertahan.
Contoh penulisan :
BODY{ margin-top:4 cm;
margin-right : 3 cm;
margin-bottom : 3 cm;
margin-left : 4 cm; }
Penentuan batas-batas tepi (margin) tersebut bias disederhanakan. Kita tidak
perlu lagi menulis margin top, margin-right, dan sebagainya. Dengan atribut
margin, kita dapat menyederhanakan bentuk penulisan tersebut.
Oleh karena itu, pada contoh sebelumnya kita bias menggantinya dengan
penulisan :
BODY{margin: 4 cm 3 cm 3 cm 4 cm;}
Kita lihat urutan nilai atribut margin. Dari kiri ke kanan menunjukkan urutan
margin-top, margin-right, margin-bottom, margin-left.
Jika penulisannya hanya terdiri atas satu nilai batas, nilai batas lainnya secara
otomatis akan dibuat sama. Jika terdiri atas dua atau tiga nilai batas, nilai-nilai
batas yang berlawan (atas dengan bawah, kiri dengan kanan) akan sama.
Contoh:
{margin: 1 cm 2 cm 3 cm;}
Berati batas atas 1 cm, batas kanan akan sama dengan batas kiri yaitu 2 cm,
dan batas bawah 3 cm.
9) Membuat tampilan border
HTML Basic
Dasar Tag HTML 2 - 20
Border merupakan pembatas suatu daerah /blok tertentu. Dalam hal ini,
pembatas tertentu. Dan, daerah/blok tertentu . Dalam hal ini, pembatas
tersebut berupa garis. Dan, daerah/blok tertentu yang dibatasi oleh border
tersebut adalah daerah yang berada di dalam tag-tag blok seperti P, DIV, dan
sebagainya.
Atribut-atribut yang berkaitan dengan pembuatan border:
a. Border, untuk mendefinisikan ada tidaknya garis pembatas. Nilai yang
diberikan adalah none (tidak ditampakkan border/garis pembatasnya),
solid (garis pembatasnya berupa garis tebal dengan ukuran default), solid
thin (garis pembatasnya lebih tipis daripada solid).
b. border-width, untuk menetukan ukuran tebal garis pembatas. Satuan
digunakan adalah satuan-satuan dalam dalam HTML seperti px, cm, mm
dan sebagainya.
c. background, untuk memberikan latar belakang pada daerah yang dibatasi
oleh border tersebut. Latar belakang ini bisa berupa warna maupun
gambar. Untuk membuat latar belakang berupa warna, nilai background
adalah nama warna atau kode warna RGB heksadesimal . Sedangkan untuk
membuat latar belakang berupa gambar, nilai background adalah URL
(`nama atau URL gambar yang digunakan sebagai latar belakang’).
d. margin, untuk mendefinisikan batas-batas wilayah border relatif terhadap
wilayah tag-tag blok yang digunakan dimana tag-tag blok melingkupi
wilayah border tersebut. Selain itu, kita juga bisa menggantikan margintop,
margin-right, margin-bottom, dan margin left.
e. padding, untuk mmendefinisikan jarak antara isi border dengan garisn
pembatasnya. Nilai yang diberi satuan seperti px, cm, mm dan sebagainya.
Bentuk dan aturan penulisannya tidak jauh berbeda dengan bentuk dan
aturan penulisan margin yang sederhana. contohnya
{padding: 20px 20px 10px 10px; },
dengan urutan top right bottom left. Selain itu, terdapat atribut lain yang
bisa digunakan yaitu padding-top, padding-right. padding-bottom,
paddingh-left yang digunakan untuk mendefinisikan padding di satu sisi
saja.
f. blockquote mertupakan tag blok yang penulisannya dalam bentuk indetasi
(masuk ke dalam) dan biasa digunakan untuk pembuatan kutipan. Berbeda
denagn p, walaupun keduanya sama-sama tag blok, pada
BLOCKQUOTE pada umu mnya bisa berisi tag-tag blok yang lain (pada
div juga demikian), sedangkan pada p perlakuan seperti itu jarang
dilakukan. Jadi pada BLOCKQUOTE bisa saja terjadi.
<BLOCKQUOTE>
<p>…</p>
<BLOCKQUOTE>…</BLOCKQUOTE>
</BLOCKQUOTE>
Pendefinisian Style Tag dengan Nama Class khusus
Style dapat dibuat dengan mendefinisikan sebuah tag HTML tertentu dengan
atribut style sheet yang memiliki sebuah nama class yang spesifik/khusus. Yaitu
HTML Basic
dengan menggunakan atribut CLASS dengan nama class tertentu yang dapat
menunjukkan cirri khusus untuk siapa definisi style tersebut digunakan.
DIV dan Span biasa digunakan untuk mengelompokkan tag-tag. Selain,
keduanya biasa digabungkan dengan atribut ID dan CLASS yang menawarkan
mekanisme generic untuk memperluas struktur dokumen (mempermudah dan
mengefisiensikan pengaturan tampilan).
SPAN merupakan inline content (text level), sedangkan div merupakan
block level. Kedua sangat bermanfaat untuk style sheet. Dimana<DIV></DIV>
itu sendiri maupun antara DIV dengan tag-tag lainnya, pada pergantian barisnya
tidak terdapat baris kosong (line break). Sedangkan seperti kita ketahui
sebelumnya, antara P yang satu denga P yang lain maupun P dengan tag-tag
lainnya, terdapat pergantian baris. Lihat kembali penggalan source dari tampilan
baris.
…Ryan Giggs berhasil meraih MVP dan hadiah berupa sedan sport
<SPAN CLASS = “hadiah”>Toyota Celica SS-II</SPAN>.
Perhatikan baik-baik, tidak ada pergantian baris pada SPAN
0 komentar:
Posting Komentar