28 tag HTML menjelaskan isi dokumen yang berbeda, Tag HTML biasanya datang
berpasangan seperti p dan p. Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir. Tag akhir ditulis seperti tag awal, tetapi dengan
garis miring sebelum nama tag. Tag awal sering disebut tag pembuka, tag akhir sering disebut tag penutup. Elemen HTML ditulis dengan awal tag, dengan akhir
tag, dengan konten di antara HTML, elemen HTML adalah segalanya dari tag awal sampai tag akhir.
G. Umpan Balik
1. Apakah anda memahami tag, elemen dan atribut dalam HTML? 2. Apakah anda sudah bisa menulis dan membaca dokumen HTML?
3. Apakah anda sudah memahami tag-tag HTML beserta mengetahui fungsinya?
29
30
31
32
Mengatur Tampilan Dokumen HTML dengan CSS
A. Tujuan Pembelajaran
Melalui praktikum peserta didik dapat menuliskan CSS dalam dokumen atau halaman HTML dengan benar.
B. Indikator Pencapaian Kompetensi
Menuliskan CSS dalam dokumen atau halaman HTML dengan benar.
C. Uraian Materi
1. Definisi CSS CSS singkatan Cascading Style Sheets, CSS mendefinisikan bagaimana elemen
HTML yang akan ditampilkan. CSS Bekerja dengan mengaitkan aturan denga elemen HTML, aturan-aturan ini yang nantinya mengatur bagaimana elemen
ditampilkan. Dalam menggunakan sebuah CSS terdapat dua unsur, yaitu
selektor
dan
declaration
.
Selektor
: Merupakan merupakan penunjuk elemen yang akan diatur style-nya.
Declaration
: Merupakan deklarasi bagaimana sebuah elemen ditata. Dalam deklarasi terdapat dua unsur yaitu
property dan
value .
Property
menunjuk aspek elemen yang ingin dirubah, misal font, warna, lebar. Sedangkan
value adalah pengaturan yang digunakan untuk propertu
yang dipilih. Contoh jika anda ingin menentukan properti font-family, maka value-nya adalah arial, consolas, calibri.
33 Gambar 6. Struktur penulisan CSS
Dalam CSS juga terdapat cara lain dalam mendefinisikan sebuah selektor, yaitu
id selektor
dan
class selektor .
id selektor
id digunakan untuk mendefinisikan style pada elemen yang unik dan hanya bisa digunakan sekali dalam satu elemen.
Cara mendefinisikan: header { color: red } Contoh cara mengakses: div id=”header”
class selektor
class digunakan untuk mendefinisikan style pada elemen yang serupa, dan bisa digunakan beberapa kali untuk beberapa elemen.
Cara mendefinisikan: .body { text-align: center } Cara mengakses: div class=”body”
2. Cara Menerapkan CSS dalam HTML
Terdapat tiga cara atau pendekatan dalam menerapkan style sheet dalam dokumen HTML. Tiga cara tersebut adalah inline, internal dan eksternal.
Inline
Dengan cara ini kita bisa menerapkan style per-tag melalui atribut style. Contoh:
p style=”color:red;
ini adalah sebuah paragraf p
Internal
