29
Jan
09

Mengutak-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>

</BODY></HTML>

Bila dilihat dalam browser, akan tampak seperti ini:

Font Arial ukuran 2, Font Verdana warna merah, Font Impact

ukuran 5 warna biru

Untuk mengubah font default untuk satu halaman HTML, digunakan tag <BASEFONT> yang ditempatkan diantara tag <HEAD> dan </HEAD>. Contoh:

<HTML>

<HEAD>

<BASEFONT FACE=”arial” SIZE=”10″ COLOR=”blue”>

</HEAD>

<BODY>

Font default untuk semua tulisan pada halaman ini adalah font arial dengan ukuran 10 dan warna biru.

</BODY></HTML>

Cobalah buat dalam sebuah file HTML kemudian lihat hasilnya dalam browser!

SUBSCRIPT DAN SUPERSCRIPT

Subscript adalah tulisan yang agak kecil dan letaknya agak di bawah sedangkan superscript adalah tulisan yang agak kecil dan letaknya agak di atas. Untuk menulis subscript kita gunakan tag <SUB> sedang untuk menulis superscript kita gunakan tag <SUP>. Inilah contohnya:

<HTML><BODY>

Tulisan Normal<SUB>Tulisan Subscript</SUB>

<P>Tulisan Normal<SUP>Tulisan Superscript</SUP>

</BODY></HTML>

Beginilah hasilnya dalam browser:

Tulisan NormalTulisan Subscript

Tulisan NormalTulisan Superscript

Bagusnya, anda berlatih sedikit. Coba buat tulisan berikut:

Rumus kimia Asam Sulfat adalah H2SO4

Luas kolam 150 m2 sedang volume kolam 300 m3




Iklan

4 Responses to “Mengutak-atik Huruf”


  1. 1 cah gunung-kelir
    Maret 12, 2009 pukul 11:04

    Test

    Font Arial ukuran 2, Font Verdana warna merah,

    Font Impact ukuran 5 warna biru

  2. 2 cah gunung-kelir
    Maret 12, 2009 pukul 11:07

    Bro, gimana caranya merubah font di box comment? Saya test kok gak bisa??

  3. 3 Aris Inzaghi
    Maret 31, 2009 pukul 18:08

    kode yang anda tuliskan bagaimana?

  4. 4 boposuhu888
    Agustus 28, 2009 pukul 19:09

    susah kalo buat nulis komentar.contoh buat nulis koment di blog anda


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


Almanak

Januari 2009
S S R K J S M
« Des   Feb »
 1234
567891011
12131415161718
19202122232425
262728293031  

Komunitas

Blog Stats

  • 51,051 hits

Gw banget

Seputih cinta ini
Ingin kulukiskan di dasar hatiku
Kesetiaan janjiku
Untuk pertahankan kasihku padamu

Bukalah mata hati
Ku masih cumbui bayang dirimu di dalam mimpi
Yang mungkin takkan pernah
Membawamu di genggammu

Dirimu di hatiku
Tak lekang oleh waktu
Meski kau bukan milikku
Intan permata yang tak pudar
Tetap bersinar
Mengusik kesepian jiwaku

Ku coba memahami
Bimbangnya nurani
Tuk pastikan semua
Tak akan kuingkari
Terlalu banyak cinta yang mengisi datang dan pergi
Namun tak pernah bisa
Lenyapkanmu di benakku



%d blogger menyukai ini: