Cara Mengatur Font, Ukuran Dan Perataan Teks HTML
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 : engenal 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 :
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 :
<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>
</html>
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
<!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>
Ini Adalah Heading
Ini Adalah Paragraf.
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>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.
<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>
Anda silahkan bereksperimen dengan kode-kode diatas agar dapat lebih memahami tentang tag formatting yang ada di dalam HTML.
Baca :
Pengenalan Dasar Programming Web
Tambahkan kode html ini
<span style="font-size: 12.0pt; line-height: 100%; font-family: script mt bold,serif; color: black"> di awal paragraf, kemudian tutup paragraf tersebut dengan kode html ini </span>
<span style="font-size: 12.0pt; line-height: 100%; font-family: script mt bold,serif; color: black"> di awal paragraf, kemudian tutup paragraf tersebut dengan kode html ini </span>
Ini hasil Tag diatas di awal paragraf, kemudian tutup paragraf tersebut dengan kode html ini<h2>Contoh font-size "pixel"</h2>
<h3>berikut font-size 13px:</h3> <p class="contoh1">Huruf ini 13px.</p>
berikut font-size 13px:
Hasil contoh tag diatas Huruf ini 13px.
berikut font-size 13px:
Huruf ini 13px. Hasil dari contoh tag diatas
<h3>berikut font-size 21px:</h3> <p class="contoh2">HUruf ini 21px</p>
<h3>berikut font-size 9px:</h3> <p class="contoh3">Huruf ini 9px</p>
<div style="text-align: justify;">
<div style="text-align: center;">
<span style="color: red; font-family: Verdana,Arial,Helvetica,Georgia;
font-size: 35px;">berbagi ilmu tentang blog</span>
</div>
(Kode Teks dan Warna Teks)
Black (hitam, erang, yg menyedihkan)
0 comments:
Posting Komentar
Thank for your visit, leave your suggestions and comments in the fields below ...
Silahkan meninggalkan komentar anda sehingga kita dapat berbagi pemikiran Anda dengan pengunjung lainnya.