Meskipun browser tidak mengenali spasi lebih dari sekali , tabulasi dan pembuatan baris dengan enter, namun dengan menggunakan tag <PRE> maka browser akan menampilkan teks apa adanya, maksudnya spasi dianggap spasi, tabulasi dianggap tabulasi dan enter dianggap enter. Bahkan font-nya pun muncul sesuai aslinya. Begini contohnya:
<HTML><BODY>
<PRE>
<B>Pantun Petuah</B>
Berakit-rakit
ke hulu
Bersenang-senang kemudian
Bersakit-sakit dahulu
Bersenang-senang
kemudian
</PRE>
</BODY></HTML>
|
Pantun Petuah Berakit-rakit ke hulu
Bersenang-senang kemudian Bersakit-sakit dahulu Bersenang-senang kemudian
|
___________________
|,-----.,-----.,---.\
|| || || \\ |`-----'|-----||-----\`----.
[ | -||- _| (| [ ,--. |_____||___/.--. | =-(( `))-----------(( `))-==
`--' `--' |
ALIGNMENT ATAU PERATAAN
Dalam tulisan cetak, dikenal tiga atau empat macam perataan yaitu rata kiri (align left), di tengah (center), rata kanan (align right) dan rata kiri dan kanan (justify). Tag Header dan Tag Paragraf dapat disisipi dengan atribut align untuk melakukan perataan ini.Contoh atribut perataan dalam tag header:
<HTML><BODY>
<H1>Header level 1</H1>
<H2
align="center">Header level 2</H2>
<H3
align="right">Header level 3</H3>
<HTML><BODY>
|
Header level 1Header level 2Header level 3 |
<HTML><BODY>
<P>paragraf rata kiri adalah
default
<P
align="center">paragraf di tengah
<P
align="right">paragraf rata kanan
<P
align="justify">paragraf rata kiri dan kanan
</HTML></BODY>
|
paragraf rata kiri adalah
default
paragraf
di tengah
paragraf
rata kanan
paragraf rata kiri dan kanan |
Untuk Apa Mempunyai Homepage?
Jika anda seorang
pelajar atau mahasiswa, anda dapat membuat homepage untuk memperkenalkan
sekolah atau universitas anda. Apa kegiatannya, program kerjanya di masa
datang, organisasi-organisasi yang terdapat di dalamnya, dan lain
sebagainya.
Jika anda seorang
ilmuwan, peneliti atau saintis, homepage anda bisa diisi dengan publikasi
karya ilmiah anda, tesis, proposal-proposal iptek, rencana penelitian,
masalah yang dihadapi dalam penelitian, jadwal seminar, dan lain sebagainya.
Selain itu, anda juga bisa membuat polling online untuk keperluan riset atau
untuk mendukung teori-teori anda.
Jika anda seorang
pengusaha, anda dapat mengisi homepage anda dengan barang-barang produksi
atau perdagangan anda, tipe dan jenisnya, dukungan purna jualnya,
pemasarannya, profil perusahaan, jumlah karyawan, lowongan pekerjaan, grafik
kemajuan perusahaan, dan sebagainya.
|
Disamping mengatur perataan, kita pun bisa mengatur posisi baris-baris paragraf dari margin (tepi halaman). Ada tiga macam bentuk indentasi paragraf. Pertama, baris pertamanya saja yang agak masuk ke dalam. Untuk membuat paragraf semacam ini kita menggunakan tag <DD>. Contoh:
<HTML><BODY>
<DD>Paragraf atau alinea ialah
sekumpulan kalimat yang mengandung satu pokok pikiran. Antara satu paragraf
dengan paragraf lainnya biasanya dipisahkan oleh baris kosong. Namun biasa
pula paragraf itu ditandai dengan posisi baris pertamanya yang agak masuk ke
dalam.
<HTML><BODY>
|
Paragraf atau alinea ialah
sekumpulan kalimat yang mengandung satu pokok pikiran. Antara satu paragraf
dengan paragraf lainnya biasanya dipisahkan oleh baris kosong. Namun biasa
pula paragraf itu ditandai dengan posisi baris pertamanya yang agak masuk ke
dalam.
|
<HTML><BODY>
Ini adalah paragraf normal
<BLOCKQUOTE>
<P>Ini paragraf yang agak masuk
ke dalam.
<P align="justify">Ini
juga contoh paragraf yang agak masuk ke dalam. Dengan kalimat yang agak
panjang, kita lihat bahwa <b>semua baris</b> dalam paragraf ini
letaknya agak masuk ke dalam. <i>Sama rata sama
jauhnya</i>.
</BLOCKQUOTE>
<P>Nah, paragraf ini kembali
normal, karena tag <i>blockquote</i> sudah berlalu alias sudah
ditutup di atas. Ngerti, kan?
</HTML></BODY>
|
Ini adalah paragraf normal
Ini paragraf yang agak masuk ke dalam. Ini juga contoh paragraf yang agak masuk ke dalam. Dengan kalimat yang agak panjang, kita lihat bahwa semua baris dalam paragraf ini letaknya agak masuk ke dalam. Sama rata sama jauhnya. Nah, paragraf ini kembali normal, karena tag blockquote sudah berlalu alias sudah ditutup di atas. Ngerti, kan? |
Daftar Istilah Penting:
Internet
Singkatan dari interconnection
network atau hubungan antar jaringan. Internet ialah jaringan komputer
global dan merupakan jaringan komputer yang terbesar di dunia karena mampu
menghubungkan seluruh komputer yang ada di dunia.
HTTP
Singkatan dari Hypertext
Transfer Protocol adalah salah satu protokol bahasa yang digunakan untuk
berkomunikasi antar server komputer dalam internet. Protokol bahasa yang lain
dalam internet misalnya: Telnet, News, Gropher, FTP.
Karena cuma demo, cukup dua definisi sajalah.
|
Untuk contoh di atas beginilah kode sumbernya:
<HTML><BODY>
<p
align="center"><b>Daftar Istilah Penting:</b>
<DL>
<DT><B>Internet</b>
<DD>Singkatan dari
<i>interconnection network</i> atau hubungan antar jaringan.
Internet ialah jaringan komputer global dan merupakan jaringan komputer yang
terbesar di dunia karena mampu menghubungkan seluruh komputer yang ada di
dunia.
<DT><b>HTTP</B>
<DD>Singkatan dari
<i>Hypertext Transfer Protocol</i> adalah salah satu protokol
bahasa yang digunakan untuk berkomunikasi antar server komputer dalam
internet. Protokol bahasa yang lain dalam internet misalnya: Telnet, News,
Gropher, FTP.
</DL>
Karena cuma demo, cukup dua definisi
sajalah. Nah, paragraf ini kembali normal.
</HTML></BODY>
|
DAFTAR ITEM (BULLET AND NUMBERING)
Ada
dua macam daftar item yaitu daftar item tak berurut (bullet) dan daftar item
berurut (numbering).
Contoh daftar item tak berurut (bullet):- item pertama
- item kedua
- item ketiga
- item pertama
- item kedua
- item ketiga
Beginilah kode sumber untuk daftar item tak berurut di atas:
<ul>
<li>item pertama</li> <li>item kedua</li> <li>item ketiga</li> </ul> |
<ol>
<li>item pertama</li> <li>item kedua</li> <li>item ketiga</li> </ol> |
Kita pun dapat membuat daftar item bertingkat
atau daftar item di dalam daftar item. Contohnya sebagai berikut:
|
Untuk membuat daftar item bertingkat seperti di
atas tidak ada penambahan tag atau atribut apa-apa. Yang dilakukan hanyalah
menempatkan tag-tag daftar item tingkat bawah di dalam daftar item tingkat di
atasnya. Untuk jelasnya beginilah source kodenya:
<ul>
<li>item pertama</li>
<li>item kedua</li>
<ul> <li>sub item pertama</li> <li>sub item kedua</li> <ul> <li>sub sub item pertama</li> <li>sub sub item kedua</li> <li>sub sub item ketiga</li> </ul> <li>sub item ketiga</li> </ul> <li>item ketiga</li> </ul> |
Penulisan kode-kode HTML di atas sengaja kita
beri spasi agak ke dalam, agar lebih mudah dibaca dan dimengerti mana yang
level pertama, kedua dan seterusnya. Sebenarnya, tanpa pemberian spasi,
hasilnya dalam browser tetap akan menggunakan spasi agak ke dalam untuk
level-level di bawahnya.
Cara yang sama dilakukan untuk membuat daftar
item berurut bertingkat. Kita tinggal mengganti tag <UL> dengan tag
<OL> maka hasilnya akan seperti ini:
|
Dari contoh daftar item tak berurut yang
bertingkat di atas, kita lihat bahwa secara default, browser akan menampilkan
gambar (bullet) bulatan hitam untuk item-item level pertama, lingkaran untuk
untuk item-item level kedua, dan kotak hitam untuk item-item level
ketiga. Sebenarnya kita pun bisa memilih sendiri bullet jenis apa
yang kita ingin gunakan dengan menambah atribut TYPE dalam tag <UL>.
Rumusnya: <UL TYPE="jenis bullet">. Dimana nama bullet
ada tiga macam: "disc" untuk bulatan hitam, "circle" untuk
lingkaran, dan "square" untuk kotam hitam. Jadi bila kita ingin
membuat daftar item semacam ini:
|
<ul type="square">
<li>item pertama</li> <li>item kedua</li> <li>item ketiga</li> </ul> |
Untuk daftar item berurut (numbering), jenis
angkanya pun dapat diganti dengan menggunakan atribut yang sama. Jadi rumusnya:
<OL TYPE="jenis angka">. Sedangkan jenis angkanya diisi
dengan angka 1, A, a, I, atau i tergantung selera kita. Contoh:
<ol type="I">
<li>item pertama</li> <li>item kedua</li> <ol type="A"> <li>sub item pertama</li> <li>sub item kedua</li> <ol type="1"> <li>sub sub item pertama</li> <li>sub sub item kedua</li> <li>sub sub item ketiga</li> </ol> <li>sub item ketiga</li> </ol> <li>item ketiga</li> </ol> |
|