Manipulasi teks HTML (Bag 1)

BY IN HTML Comments Off on Manipulasi teks HTML (Bag 1)

Format teks html artinya mengatur atau memanipulasi teks informasi yang ada pada halaman web sesuai keinginan kita. Berikut ini adalah tag-tag yang digunakan untuk tujuan tersebut :

Ganti Baris

Browser memiliki kemampuan pelipatan teks (Word Wrap) artinya teks informasi akan ditampilkan sesuai lebar halaman browser. Kita dapat memaksakan ganti baris tetapi tetap pada paragraf yang sama dengan menggunakan tag :
<BR> …..Teks …..

Heading

Teks informasi pada web biasanya mempunyai judul atau sub-judul topik. Inilah yang disebut heading. Heading akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Sebab itu heading bisa juga dimanfaatkan untuk menunjukkan hirarkhi atau tingkat keberartian dari teks yang akan ditampilkan.

Ada 6 tingkat (y = 1 s/d 6) heading dalam html. Tingkat 1 (y=1) merupakan heading yang terbesar. Penulisannya adalah sebagai berikut :
<Hy>….. Teks …..</Hy>

Selain itu heading bisa juga diatur letaknya dalam suatu baris (alignment). Ada 3 alignment heading, yaitu : LEFT (kiri), RIGHT (kanan) dan CENTER (tengah). Untuk keperluan tersebut maka tag heading diberi atribut ALIGN, sehingga sintaksnya adalah sebagai berikut :
<Hy ALIGN=”Alignment” >….. Teks …..</Hy>
Misalnya
<H1 ALIGN=”Center” >….. Teks …..</H1>

Hasilnya, teks ‘Belajar HTML’ ditampilkan sebagai heading 1 ditengah-tengah halaman web.
4.3. Garis Mendatar

Biasanya digunakan sebagai pemisah antar bagian atau paragraf, tag yang digunakan adalah :
<HR>

Garis mendatar yang terbentuk hampir membelah layar dari kiri ke kanan berwarna abu-abu berbayang. Jika ingin ditampilkan dengan tampilan yang lain, atribut-atribut berikut ini dapat digunakan :
ALIGN = “Alignment”
Untuk mengatur posisi garis, Left (kiri) – Right (kanan) dan Center (tengah).

NOSHADE
Garis yang terbentuk tidak menggunakan bayangan.

SIZE = “Angka”
Untuk menentukan tinggi garis dalam pixel.

WIDTH = “Angka”
Untuk menentukan lebar garis dalam pixel atau persen.

Jadi jika kita tulis dalam html seperti berikut ini :
<HR WIDTH=”65%” ALIGN=”Center” SIZE=”15″ NOSHADE >

Hasilnya adalah garis seperti berikut ini :

Letaknya ditengah halaman web dengan lebar 65% dan tinggi 15 pixel.

Format Teks

Ada perbedaan antara tampilan halaman utama sebuah web dengan tampilan dokumen cetak. Sebaiknya halaman utama web tidak lebih dari 35 Kb. Jika lebih dari itu, teks yang dihasilkan akan menjadi sangat panjang dan inti utama isi web sulit dipahami. Karena itu hal-hal khusus yang perlu diberi penekanan saja yang ditampilkan dalam huruf tebal, miring atau bergaris bawah. Berikut ini adalah tag-tag yang digunakan untuk mengatur format teks :
<B>….. Teks….. </B> – Teks dicetak tebal
<STRONG>….. Teks….. </STRONG> – Teks dicetak lebih tebal
<BIG>….. Teks….. </BIG> – Teks dicetak lebih besar
<SMALL>….. Teks….. </SMALL> – Teks dicetak lebih kecil
<EM>….. Teks….. </EM> – Teks dicetak emphasize
<I>….. Teks….. </I> – Teks dicetak Miring
<U>….. Teks….. </U> – Teks bergaris bawah
<TT>….. Teks….. </TT> – Teks dicetak dengan font Typewriter
<S>….. Teks….. </S> – Teks dicoret
<SUB>….. Teks….. </SUB> – Teks Subscript
<SUP>….. Teks….. </SUP> – Teks Superscript
<PRE>….. Teks….. </PRE> – Teks dicetak apa adanya
<BLINK>….. Teks….. </BLINK> – Teks dicetak berkedip (di Netscape)

Mengatur Paragraf

Untuk mengatur paragraf telah dijelaskan di muka, yaitu dengan tag <P>. Jika tag ini ditambah atribut tertentu maka tag ini berfungsi juga untuk mengatur perataan teks dalam paragraf itu. Berikut ini adalah sintaks penulisan atribut paragraf :
<P ALIGN=”Alignment”>

Alignment atau mode perataan bisa diisi “Left” (kiri), “Right” (kanan), “Center”> (tengah) dan “Justify” (rata kiri dan kanan).

Sedangkan tag <BLOCKQUOTE> …Teks… </BLOCKQUOTE>
digunakan agar sebuah paragraf lebih masuk ke dalam.
Catatan :

* Jangan menambah baris kosong atau spasi teks html dalam editor.
* Untuk menyisipkan baris kosong sebaiknya menggunakan tag <BR>, jangan tag <P>.
* Jangan menggunakan <BR> pada list.
* HTML otomatis menambahkan baris kosong sebelum dan sesudah beberapa elemen, seperti pada paragraf.
* Jika pergantian paragraf tidak ingin ditambahkan baris kosong, jangan gunakan tag <P> …..Teks….. </P> tapi gunakan tag <DIV> …..Teks….. </DIV>

Buatlah tampilan web seperti berikut ini :

by: Martinez Meinardi




Comments are closed.