utak-atik huruf

Dalam latihan kedua ini, kita akan mempelajari beberapa tag yang relatif mudah diingat. Tag-tag ini berfungsi untuk mengubah tipe huruf yaitu menebalkan (bold), membuat tulisan miring (italic) atau memberi garis bawah (underline). Buka lagi program Notepad kemudian tuliskan seperti berikut ini:

<HTML>
<HEAD>
    <TITLE>Tipe-tipe 

Teks</TILE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering digunakan
dalam 

penulisan dokumen apa saja. Ketiga tipe tersebut
ialah tulisan tebal, tulisan miring dan tulisan bergaris
bawah. Bisa 

pula dua tipe huruf dipadukan misalnya
tulisan tebal dan miring, tulisan tebal dan bergaris bawah
atau tulisan miring 

dan bergaris bawah. Bahkan bisa pula
ketiga tipe tulisan tersebut sekaligus bergabung menjadi
satu berupa tulisan 

tebal, miring dan bergaris bawah.
</BODY>
</HTML>

Simpanlah file tersebut. Jangan lupa mengikuti langkah-langkah cara menyimpan file HTML yang sudah kita pelajari dalam latihan pertama dahulu. Setelah file tersimpan, bukalah file tersebut dengan program Internet Explorer. Perhatikanlah bahwa semua tulisan dalam dokumen tersebut masih seragam. Kini, kita akan melakukan sedikit perubahan pada beberapa kata dan kalimat yang ada di situ sehingga menjadi seperti ini:

Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan tebal, tulisan miring dan tulisan bergaris bawah. Bisa pula dua tipe huruf dipadukan misalnya tulisan tebal dan miring, tulisan tebal dan bergaris bawah atau tulisan miring dan bergaris bawah. Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan tebal, miring dan bergaris bawah.

Bagaimana caranya? Bukalah source code dari dokumen tadi (tekan F5), kemudian tambahkan tag-tag berikut. Tag-tag tersebut adalah :

  1. <B> untuk menebalkan (bold) tulisan,
  2. <I> untuk memiringkan (italic) tulisan dan
  3. <U> untuk menggaris-bawahi (underline) tulisan

Sehingga hasilnya akan seperti ini :

<HTML>
<HEAD>
<TITLE>Tipe-tipe 

Teks</TITLE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering
digunakan dalam 

penulisan dokumen apa saja. Ketiga
tipe tersebut ialah tulisan <B>tebal</B>,
tulisan 

<I>miring</I> dan tulisan <U>bergaris bawah</U>.
Bisa pula dua tipe huruf dipadukan misalnya 

tulisan <B>
<I>tebal dan miring</B></I>, tulisan <B><U>tebal dan
bergaris 

bawah</B></U> atau tulisan <I><U>miring dan
bergaris bawah</I></U>. Bahkan bisa pula 

ketiga tipe
tulisan tersebut sekaligus bergabung menjadi satu berupa
tulisan <B><I><U>tebal, miring 

dan bergaris bawah</B></I></U>.
</BODY>
</HTML>

Setelah anda menambahkan semua tag-tag tersebut, simpan (Save) file source code itu kemudian lakukan Refresh pada dokumen web yang tampak pada program browser anda. Lihatlah hasil perubahannya! Andaikata ada yang tidak beres, coba perhatikan baik-baik penulisan tag-tag anda, mulai dari tag pembuka <HTML> hingga </HTML> jangan sampai ada yang salah tulis meskipun satu karakter. Misalnya: bila tag </TITLE> anda tulis </TILE> maka browser tidak akan menampilkan tulisan apa-apa dalam dokumen anda. Kalau tidak percaya, cobalah menulis source code yang salah seperti itu, simpan (save) kemudian refresh dokumen anda dan lihatlah hasilnya!

Untuk lebih mempermantap keterampilan yang anda dapatkan dari latihan kedua ini, ada baiknya anda mencoba membuat dokumen HTML berikut ini. Buatlah dokumen dengan judul (titel): Pemantapan Tipe-tipe Teks, yang isinya adalah tulisan seperti berikut:

Karena file-file HTML sebenarnya adalah file-file ASCII biasa, maka anda dapat menggunakan editor-editor teks sederhana seperti WordStar (WS), Notepad, MS Write, dan lain-lain. Editor-editor teks tersebut dapat membimbing anda mempelajari kode-kode HTML secara luar dalam. Akan tetapi mungkin anda sedikit frustrasi karena harus mengetik semua kode HTML baris per baris yang dalam perkembangannya akan menjadi sangat rumit. Meski demikian, menggunakan teks editor untuk membuat halaman web adalah cara terbaik untuk benar-benar mengerti tentang struktur file HTML

Bila anda sudah menyimpannya, bukalah dan lihatlah hasilnya dalam program browser. Sudah samakah?

Variasi Font

Tanpa campur tangan kita, dokumen HTML menggunakan font default dari Windows (Sistem Operasi Komputer) atau browser (Internet Explorer), biasanya Times New Roman dengan ukuran 12 point. Kita bisa mengubah jenis, warna dan ukuran font sesuai dengan selera kita menggunakan tag <FONT> diikut dengan atribut-atributnya. Misalnya untuk mengubah jenis font kita gunakan atribut FACE:

<HTML><BODY>

Ini adalah font <FONT FACE=”Arial”>Arial</FONT>, ini adalah font <FONT FACE=”Verdana”>Verdana</FONT>, dan ini adalah font <FONT FACE=”Impact”>Impact</FONT>

</BODY></HTML>

Bila dilihat dalam browser, akan tampak seperti ini:

Ini adalah font Arial, ini adalah font Verdana, dan ini adalah font Impact

Untuk mengubah ukuran font, gunakan atribut SIZE:

<HTML><BODY>

<FONT SIZE=”1″>Font Size 1</FONT>, <FONT SIZE=”2″>Font Size 2</FONT>, <FONT SIZE=”3″>Font Size 3</FONT>, <FONT SIZE=”4″>Font Size 4</FONT>, <FONT SIZE=”5″>Font Size 5</FONT>, <FONT SIZE=”6″>Font Size 6</FONT>, <FONT SIZE=”7″>Font Size 7</FONT>

</BODY></HTML>

Bila dilihat dalam browser, akan tampak seperti ini:

Font Size 1, Font Size 2, Font Size 3, Font Size 4, Font Size 5, Font Size 6, Font Size 7

Sedangkan untuk mengubah warna tulisan, menggunakan atribut COLOR:

<HTML><BODY>

<FONT COLOR=”blue”>Tulisan warna biru</FONT>, <FONT COLOR=”red”>Tulisan warna merah</FONT>, <FONT COLOR=”yellow”>Tulisan warna kuning</FONT>

</BODY></HTML>

Bila dilihat dalam browser, akan tampak seperti ini:

Tulisan warna biru, Tulisan warna merah, Tulisan warna kuning

Dalam satu tag FONT kita bisa menggabungkan lebih dari satu atribut. Perhatikan contoh berikut:

<HTML><BODY>

<FONT FACE=”Arial” SIZE=”2″>Font Arial ukuran 2</FONT>, <FONT FACE=”Verdana” COLOR=”red”>Font Verdana warna merah</FONT>, <FONT FACE=”Impact SIZE=”5″ COLOR=”blue”>Font Impact ukuran 5 warna biru</FONT>

Satu Tanggapan

  1. ajarilah aku

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: