HTML memiliki beberapa tag-tag formatting yang bisa digunakan untuk mempercantik tampilan halaman HTML tersebut, meskipun kita dapat mempercantik halaman HTML dengan menggunakan CSS bukan berarti kita tidak perlu mengetahui beberapa jenis tag-tag formatting yang bisa digunakan dalam tag HTML.
Beberapa contoh tag formatting adalah tag untuk mengatur warna background, mengatur warna teks, mengatur ukuran teks, mengatur font, mengatur perataan teks. Dalam pembahasan kali ini saya akan membahas tentang cara mengatur font, ukuran dan perataan pada teks. Sebelumnya saya sudah membahas tentang mengganti warna background dan warna teks pada artikel sebelumnya.
Baca :
Mengenal Lebih Dalam Struktur Body HTML
Mengatur Font Pada Halaman HTML
Didalam dokumen html kita bisa mengatur format font seperti mengatur jenis huruf, warna huruf, size/ukuran huruf dll. Untuk mengatur format font dalam dokumen html caranya dengan menggunakan tag <font>...</font>. Dibawah ini adalah contoh penggunaan tag font :
Contoh Mengganti Font dan Ukuran dan Warna Teks :
<!DOCTYPE html>
<html>
<head>
<title> Cara Mengatur Format Font </title>
</head>
<body >
<font size="10pt" face="Arial" color="Blue">
Format Text Ini Adalah arial berwarna Biru
</font>
</body>
</html>
Contoh Mengganti Font saja :
<!DOCTYPE html>
<html>
<head>
<title> Cara Mengatur Format Font </title>
</head>
<body >
<h1 style="font-family:verdana;">Ini Adalah Heading</h1>
<p style="font-family:courier;">Ini Adalah Paragraf.</p>
</body>
</html>
Dari contoh pertama code diatas terdapat tag <font size="10pt" face="Arial" color="Blue">, itu artinya
kita mengatur font pada dokumen html dengan ukuran 10 pt, dengan jenis font arial
berwarna biru. Anda bisa sekaligus mengubah font dan ukuran teks dalam satu baris kode HTML.
Sedangkan pada contoh kedua menggunakan style font family yang berarti font heading adalah verdana sedangkan font paragraf adalah courier. Pada contoh kedua hanya mengganti jenis font nya saja tanpa mengubah ukuran dari teks tersebut.
Keduanya bisa digunakan terserah Anda ingin menggunakan yang mana saja. Silahkan Anda bereksperimen sendiri.
Mengatur Ukuran Pada Teks HTML
Ukuran teks pada HTML dapat Anda sesuaikan dengan keinginan Anda. Selain menggunakan tag seperti pada contoh diatas, Anda juga dapat mengatur ukuran teks dengan menggunakan contoh kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title> Cara Mengatur Format Font </title>
</head>
<body >
<h1 style="font-size:250%;">Ini Adalah Heading</h1>
<p style="font-size:100%;">Ini Adalah Paragraf.</p>
</body>
</html>
Pada contoh sebelumnya Anda dapat mengatur ukuran dengan menggunakan pt atau point sedangkan pada contoh diatas Anda dapat mengatur ukuran teks dengan menggunakan persen. Jadi Anda dapat mengatur ukuran teks menggunakan. Perlu diperhatikan penggunaan keduanya memiliki perbedaan hasil. Anda bisa mencobanya sendiri agar lebih memahaminya.
Mengatur Perataan Teks / Text-Alignment Pada HTML
Tag yang satu ini juga sangat penting untuk diketahui agar Anda dapat mengatur posisi dari teks HTML yang Anda buat. Pengaturan posisi digunakan agar teks HTML dapat telihat rapi.
Berikut adalah contoh kode nya :
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:left;">Left paragraph 1.</p>
<p style="text-align:right;">right paragraph 2.</p>
</body>
</html>
Dari kode diatas, jika Anda jalankan pada sebuah web browser maka hasilnya akan membentuk heading yang berada di tengah, paragraf 1 disebelah kiri, paragraf 2 di sebelah kanan.
Anda silahkan bereksperimen dengan kode-kode diatas agar dapat lebih memahami tentang tag formatting yang ada di dalam HTML.
Baca :
Pengenalan Dasar Programming Web
EmoticonEmoticon