H 006 : Dasar Penulisan Teks atau Font Pada Laman HTML

Untuk memasukkan teks pada halaman anda, yang harus anda lakukan adalah hanya memasukkan teks. Jika anda tidak menentukan atribut untuk teks, maka teks yang akan ditampilkan menggunakan ukuran default font, color, dan size dari browser pengunjung.

Browser hanya dapat menampilkan font yang tersedia pada PC pengunjung. Oleh karena itu, anda terbatas untuk menggunakan font yang tersedia di hampir semua komputer. Jika anda menginginkan untuk menggunakan font mewah, maka anda harus menggunakan desain grafis untuk membuat gambar dengan teks. Ini akan memastikan bahwa pengunjung akan melihat hal yang sama di komputernya, walaupun pengunjung tersebut tidak memiliki font mewah di komputernya seperti yang anda gunakan di komputer anda.

Dikarenakan gambar memakan banyak ruang untuk penulisan teks biasa, dan waktu yang digunakan juga untuk mengupload tergolong lama berdasarkan jaringan yang anda miliki, maka anda harus berhati-hati jika ingin menggunakan opsi ini. Sedikit kesalahan mengakibatkan tampilan halaman anda tidak rapi dan teks gambarnya loncat sana, loncat sini tidak beraturan.

Di samping desain grafis yang menggunakan gambar sebagai teks, ada alternatif lain bagaimana untuk menyesuaikan pengaturan font, baik pada teks normal, menyesuaikan warna dan ukuran, maupun pada teks yang bekerja sebagai link.

1. Menggunakan Tag <basefont>

Untuk menentukan font keseluruhan untuk halaman anda, cukup dengan menambahkan tag <basefont> di bagian awal <body> .

Contoh : Teks halaman yang terlihat di browser.

Selamat Datang di halaman saya !
Semua teks di halaman saya terlihat sama, karena halaman saya hanya ditentukan basefont a.

HTML: Kode untuk menghasilkan contoh di atas.

<html>
<head>
<title> halaman saya </ title>
</ head>
<body>
<basefont face = "arial, verdana, courier" size = "4" color = "green">
Selamat Datang di halaman saya ! <br>
Semua teks di halaman saya terlihat sama, karena halaman saya hanya ditentukan basefont a. <br>
</body>
</html>

Bagian color akan memilih warna yang diinginkan untuk teks anda, bagian face akan memilih jenis font yang diinginkan, dan bagian size akan memilih ukuran font antara 1 (terkecil) dan 7 (terbesar) yang diinginkan untuk teks anda.

Catatan :

Jika Anda memasukkan daftar font seperti contoh di atas, maka browser akan menggunakan font pertama dalam daftar yang tersedia di komputer pengunjung.

2. Menggunakan Tag <font>

Jika keselurahan teks untuk halaman anda telah ditentukan jenis dan ukuran fontnya, maka di bagian-bagian teks tertentu anda juga bisa menentukan outputnya dengan menggunakan tag <font>.

Contoh : Output teks terlihat berbeda dari yang umum

Selamat Datang di halaman saya !
Semua teks di halaman saya terlihat sama, karena halaman saya hanya ditentukan basefont a.
Hanya teks bagian ini yang terlihat berbeda.
Terima kasih telah berkunjung di halaman saya !

HTML : Kode untuk menghasilkan contoh di atas

<html>
<head>
<title> halaman saya </ title>
</head>
<body>
<basefont face = "arial, verdana, courier" size = "4" color = "green">
Selamat Datang di halaman saya ! <br>
Semua teks di halaman saya terlihat sama, karena halaman saya hanya ditentukan basefont a. <br>
<font color="red" face="courier" size="4">
Hanya teks bagian ini yang terlihat berbeda.
</font>
<br>
Terima kasih telah berkunjung di halaman saya ! <br>
</body>
</html>

3. Menggunakan Tag <a> dan </a> untuk menghasilkan link

Tag yang digunakan untuk menghasilkan link adalah <a> dan </a>. Tag <a> akan memberitahu di mana link harus memulai dan tag </a> menunjukkan di mana link harus berakhir. Antara kedua tag tersebut akan bekerja sebagai link. Target link yang ditambahkan ke tag <a> menggunakan href = "http://www.alamat_link_anda.com".

Contoh di bawah ini menunjukkan bagaimana membuat teks bekerja sebagai link ke wall FB saya.

Klik <a href="https://www.facebook.com/JibanKontemporer/"> di sini </a> untuk menuju ke wall FB saya.

Output di browser anda akan terlihat

Klik di sini untuk menuju ke wall FB saya.

Anda hanya menentukan target di <a href=" ">.
Kemudian tambahkan teks yang harus bekerja sebagai link.
Akhirnya menambahkan tag </a> untuk menunjukkan di mana link berakhir.

4. Menggunakan format teks

Macam-macam tag yang bisa digunakan untuk format teks adalah sebagai berikut :

<b>text</b> : Menulis teks dalam huruf tebal
<i>text</i> : Menulis teks dalam huruf miring
<u>text</u> : Menulis teks bergaris bawah
<sub>teks</sub> : Menurunkan teks dan membuatnya lebih kecil
<sup>teks</sup> : Mengangkat teks dan membuatnya lebih kecil
<blink>text</blink> : Menjadikan teks berkedip
<strike>teks</strike> : Mencoret teks
<tt>text</tt> : Menulis teks klasik
<pre>text</pre> : Menulis teks persis seperti itu, termasuk spasi.
<em>text</em> : Biasanya membuat teks miring
<strong>teks</strong> : Biasanya membuat teks tebal

Output :

text : Menulis teks dalam huruf tebal
text : Menulis teks dalam huruf miring
text : Menulis teks bergaris bawah
^{teks : Mengangkat teks dan membuatnya lebih kecil}
_{teks : Menurunkan teks dan membuatnya lebih kecil}
text : Membuat teks berkedip
~~teks : Mencoret teks~~
text : Menulis teks klasik

text : Menulis teks persis seperti itu, termasuk spasi.

text : Biasanya membuat miring teks
teks : Biasanya membuat teks tebal

Catatan:

Tag <blink> hanya didukung oleh browser Netscape, dan anda tidak perlu menggunakannya.

5. Menggunakan macam-macam ukuran font

Macam-macam tag yang bisa digunakan untuk mengubah ukuran font adalah sebagai berikut :

<big>text</big> : Memperbesar ukuran teks
<small>text</small> : Memperkecil ukuran teks
<h1>text</h1> : Menulis teks dalam pos terbesar
<h6>text</h6> : Menulis teks dalam pos terkecil
<font size = "1"> text </font> : Menulis teks dengan fontsize terkecil. (8 pt)
<font size = "7"> text </font> : Menulis teks dengan fontsize terbesar (36 pt)

Output:

text : Memperbesar ukuran teks
text : Memperkecil ukuran teks
text : Menulis teks dalam pos terbesar
text : Menulis teks dalam pos terkecil
text : Menulis teks dengan fontsize terkecil. (8 pt)
text : Menulis teks dengan fontsize terbesar (36 pt)

Tag <small> dan <big> adalah tag khusus yang bisa digunakan berulang-ulang. Jika anda ingin meningkatkan ukuran font dengan dua kali lipat, maka anda bisa menuliskannnya seperti ini :

<big><big>Memperbesar ukuran teks dengan tag <big> dua kali</big></big>

Output

Memperbesar ukuran teks dengan tag <big> dua kali

Catatan :
Tag <font> memungkinkan anda menentukan besar ukuran teks dalam HTML biasa.

6. Menentukan tata letak teks

Macam-macam tag yang bisa digunakan untuk mengontrol tata letak teks adalah sebagai berikut :

<p>text</p> : Menambahkan spasi baris setelah teks. (2 baris baru).
<p align = "left">text</p> : Memposisikan teks ke sebelah kiri halaman.
<p align = "center">text</p> : Memposisikan teks terletak di tengah-tengah baris.
<p align = "right">teks</p> : Memposisikan teks ke sebelah kanan halaman.
text <br> : Menambahkan baris baru.
<nobr>text</nobr> : Mematikan baris baru otomatis, walaupun teksnya lebih lebar dari jendela.
text <wbr> : Memungkinkan browser untuk memasukkan baris baru walaupun teksnya berada dalam tag <nobr>.
<center>text</center> : Memposisikan teks di tengah-tengah baris.
<div align = "center">text</div> : Memposisikan teks di tengah-tengah baris.
<div align = "left">text</div> : Memposisikan teks ke sebelah kiri halaman.
<div align = "right">teks</div> : Memposisikan teks ke sebelah kanan halaman.

Keenam dasar HTML ini, dapat anda gunakan untuk mempercantik penulisan teks pada halaman statis anda, baik itu di blog maupun di website anda.