|
Wellcome to my cyber home [ Tutorial / Pelajaran Web]
Halaman3
Tutorial | Heading dan Paragraf
Pada bagian sebelumnya sudah disinggung sedikit mengenai elemen
H1 untuk menampilkan heading dan P untuk memisahkan paragraf. Di
bagian ini kita akan menggali lebih dalam kedua elemen tersebut.
Heading
HTML menyediakan 6 level heading yang dapat digunakan untuk membuat
judul. Heading level 1 biasanya digunakan untuk judul utama, dan
heading level berikutnya untuk sub-judul dan sub-sub-judul selanjutnya.
Perhatikan contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Contoh Heading</TITLE>
</HEAD>
<BODY>
<H1>Heading level 1</H1>
<H2>Heading level 2</H2>
<H3>Heading level 3</H3>
<H4>Heading level 4</H4>
<H5>Heading level 5</H5>
<H6>Heading level 6</H6>
</BODY>
</HTML>
Kode HTML di atas akan menghasilkan tampilan seperti ini.
Heading dapat digunakan dengan urutan bebas, artinya elemen H1
tidak harus mendahului H2, H3, dan seterusnya. Namun demikian sebaiknya
elemen heading tetap dipakai sesuai urutannya untuk menghasilkan
dokumen yang konsisten. Elemen heading sebaiknya juga tidak dipakai
untuk memanipulasi ukuran atau ketebalan huruf; untuk kegunaan itu
ada elemen-elemen tersendiri yang akan dijelaskan pada bagian selanjutnya
nanti.
Paragraf dan Break
<HTML>
<HEAD>
<TITLE>Contoh Paragraf</TITLE>
</HEAD>
<BODY>
<P>Ini adalah paragraf pertama. Sebuah paragraf
diawali dengan tag paragraf pembuka dan
diakhiri dengan tag paragraf penutup.</P>
<P>Ini adalah paragraf kedua. Sebuah baris
kosong akan secara otomatis disisipkan di
antara dua paragraf.</P>
<P>Ini adalah paragraf ketiga. Untuk berpindah
baris tanpa menyisipkan sebuah baris kosong,
digunakan elemen break.<BR>Kalimat ini adalah
bagian dari paragraf ketiga yang terletak di
baris yang baru.</P>
</BODY>
</HTML>
Klik di sini untuk melihat tampilan yang dihasilkan oleh kode HTML
di atas.
Tampak bahwa di antara dua paragraf akan selalu disisipkan sebuah
baris kosong secara otomatis. Untuk berpindah ke baris yang baru
tanpa harus menyisipkan baris kosong digunakan elemen BR (break).
Tidak seperti elemen-elemen lain yang sudah kita kenal, elemen BR
ini tidak berupa pasangan tag pembuka dan penutup, melainkan hanya
satu tag tunggal <BR> saja.
Whitespace
Jika anda perhatikan lebih teliti, anda akan menemukan bahwa karakter
spasi, tabulasi, maupun pergantian baris (ENTER) dalam dokumen HTML
tidak memberikan pengaruh pada tampilan di jendela browser. Ini
adalah kekhasan HTML. Semua karakter whitespace (spasi, tab, dan
enter) yang berlebihan akan diabaikan dan diganti dengan hanya satu
spasi saja.
Karakter Khusus
Beberapa karakter seperti tanda lebih kecil (<) dan lebih besar
(>) digunakan secara khusus untuk menandai tag HTML. Untuk menampilkan
karakter-karakter tersebut dalam halaman web digunakan entity, yaitu
kode khusus berupa rangkaian karakter yang diletakkan di antara
tanda ampersand (&) dan semicolon (;). Rangkaian karakter tersebut
dapat berupa singkatan nama entity tersebut atau kode numerik yang
diawali dengan tanda number sign (#). Misalnya:
karakter < diwakili dengan entity < atau <
karakter > diwakili dengan entity > atau >
karakter & diwakili dengan entity & atau &
Tanda & itu sendiri menjadi sebuah karakter khusus sehingga
untuk menampilkannya juga perlu diganti dengan entity. Sebuah entity
lagi yang penting adalah atau   yang menampilkan
karakter 'spasi' kosong. Karakter ini dapat digunakan untuk membuat
spasi yang tidak akan dibuang oleh browser seperti halnya whitespace
yang lain. Perhatikan contoh penggunaan karakter khusus beserta
hasilnya berikut ini:
<HTML>
<HEAD>
<TITLE>Karakter Khusus</TITLE>
</HEAD>
<BODY>
<P>100 + 200 < 500</P>
<P>100 × 200 > 500</P>
<P>Terpisah jauh</P>
<P>© Copyright</P>
<P>® Registered</P>
</BODY>
</HTML>
Atribut Perataan
Setiap elemen HTML ditampilkan oleh browser dengan cara yang berbeda,
tergantung fungsi elemen tersebut. Namun demikian penampilan masing-masing
elemen masih dapat dimodifikasi lagi dengan memberikan parameter-parameter
tertentu pada tag pembuka. Parameter ini disebut atribut, yang menerima
nilai tertentu sebagai argumennya. Agar lebih jelas, kita akan mencoba
menggunakan atribut ALIGN pada elemen heading dan paragraf yang
mempunyai empat pilihan nilai, yaitu: left, center, right, dan justify.
<HTML>
<HEAD>
<TITLE>Atribut Perataan</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="left">Heading rata kiri</H1>
<H1 ALIGN="center">Heading rata tengah</H1>
<H1 ALIGN="right">Heading rata kanan</H1>
<P ALIGN="left">Paragraf pertama diratakan dengan
tepi kiri halaman. Sisi kanan dari paragraf ini
akan bergerigi.</P>
<P ALIGN="center">Paragraf kedua diratakan di
tengah-tengah halaman. Kedua sisi paragraf ini
akan bergerigi.</P>
<P ALIGN="right">Paragraf ketiga diratakan dengan
tepi kanan halaman. Sisi kiri dari pargraf ini
akan bergerigi.</P>
<P ALIGN="justify">Paragraf terakhir ini akan
diratakan dengan tepi kiri dan kanan halaman.
Untuk melihat efek perataan dengan lebih jelas,
perkecil halaman browser sehingga sebagian dari
paragraf ini berpindah ke baris berikutnya.</P>
</BODY>
</HTML>
Tampilan contoh di atas dapat dilihat di sini. Kemudian silakan
melanjutkan ke bagian berikutnya, tentang Elemen Fomat Blok.
pusing yah....lanjut oke biar tambah
pusing
|
