14/03/2010

MENGATUR TEKS DENGAN HTML

Untuk mengatur tampilan font dengan HTML agar dapat menjadi seperti yang kita inginkan, beberapa tag yang diperlukan antara lain:

Tag <b>.
Tag <b>(bold) adalah berfungsi untuk menampilkan teks tebal. Lihat contoh berikut ini:


Jika ditulis begini:
<b>teks tebal</b>


Maka hasilnya adalah:
teks tebal
Silahkan untuk percobaan pertamanya.


Catatan:
Browser ponsel dapat mendeteksi tag ini, namun dengan browser Operamini sepertinya masih belum dapat ditampilkan.

Tag <i>.
Tag <i>(italic) adalah berfungsi untuk menampilkan teks miring.
Contoh:


Jika ditulis:
<i>teks miring</i>


Maka hasilnya adalah:
teks miring
Silahkan coba kembali



Catatan:
Browser Operamini belum dapat menampilkan fungsi dari tag ini.

Tag <u>.
Tag <u>(underline) adalah berfungsi untuk menampilkan teks dengan garis bawah.
Contoh:


Tulis:
<u>teks bergaris bawah</u>


Maka hasilnya adalah:
teks bergaris bawah
Cobalah

Tag <s>.
Tag <s>(strike) adalah berfungsi untuk menampilkan teks dicoret.
Contoh:


Tulis:
<s>teks ini dicoret</s>


Hasil: teks ini dicoret
Jangan bosan mencoba

Tag <big>.
Tag <big> adalah berfungsi untuk menampilkan ukuran teks jadi lebih besar.
Contoh:


Tulis:
<big>teks besar</big>


Hasil:
teks besar
Cobalah terus

<small>.
Tag <small> adalah berfungsi untuk menampilkan teks jadi lebih kecil.
Contoh:


Tulis:
<small>teks kecil</small>


Hasil:
teks kecil

Tag <sup>.
Tag <sup>(supcript) adalah berfungsi untuk menampilkan posisi teks sedikit naik ke atas.
Contoh:


Tulis:
100 M<sup>2</sup>


Hasil:
100 M2

Tag <sub>.
Tag <sub> adalah berfungsi untuk menampilkan letak teks sedikit turun ke bawah.
Contoh:


Tulis:
O<sub>2</sub>


Hasil:
O2

Tag <font>.
Tag <font> memilki beberapa atribut yang berfungsi untuk menegaskan bagaimana gaya(style) font akan ditampilkan.
Atribut adalah kode yang memiliki nilai yang berfungsi untuk menjelaskan secara spesifik dari sebuah tag . Terletak di dalam tag pembuka antara nama tag dan tanda (>), cara penulisanya adalah seperti ini,<tag atribut="nilai">.
Dalam tag <font> sendiri, beberapa atributnya antara lain:
Size.
Atribut ini memiliki nilai atntara 1 s/d 7.
Contoh:


Tulis:
<font size="1">ini ukuran 1</font>
<font size="4">ini ukuran 4</font>
<font size="7">ini ukuran 7</font>


Maka hasilnya adalah:
ini ukuran 1
ini ukuran 4
ini ukuran 7
Silahkan coba sendiri untuk ukuran yang lainnya.


Color.
Atribut ini berfungsi untuk memberikan warna teks, cara penggunaanya sama dengan seperti halnya atribut size. Nilai dari atribut ini yaitu dengan nama warna(dalam bahasa inggris) seperti misalnya, red, blue, green, dll. Selain dengan nama warna, bisa juga dengan kode hexa warna seperti misalnya, #00000 untuk hitam, #FF0000 untuk merah, #0000FF untuk biru, dll. Untuk dapat melihat tabel kode warna, W3shools juga menyediakanya secara lengkap.

Contoh :

Tulis:
<font color="red">teks warna merah</font>
<font color="blue">teks warna biru </font>
<font color="#FFFF00">teks warna kuning/kode</font>


Maka hasilnya adalah:
teks warna merah
teks warna biru
teks warna kuning/kode
Pada contoh diatas, nilai pada warna kuning adalah menggunakan kode hexa warna.
Silahkan coba sendiri untuk warna lainya.


Face.
Atribut ini adalah untuk menentukan tampilan bentuk dari teks. Beberapa nama style font untuk menentukan nilai dari atribut face antara lain, arial, verdana, impact, dll.
Contoh:

Tulis:
<font face="arial">gaya teks arial</font>
<font face="verdana">gaya teks verdana</font>
<font face="impact">gaya teks impact</font>


Maka hasilnya a dalah:
gaya teks arial
gaya teks verdana
gaya teks impact
Silahkan untuk dicoba.


Dari beberapa atribut di atas, dapat digunakan secara bersamaan dalam sehingga menjadi seperti ini, contoh:

<font size="7" color="green" face="arial">teks ukuran 5 berwarna hijau gaya arial</font>


Maka hasilnya adalah:
teks ukuran 5 berwarna hijau gaya arial
Silahkan untuk dicoba lagi.




Sebelumnya | Berikutnya


Silahkan baca juga yang ini:

0 comments:

Tinggalkan Komentar Anda

Terimakasih telah berkunjung, untuk kritik, saran, ataupun pertanyaan, silahkan berikan komentar anda disini:

 
Halaman Muka | Tentang | Kontak | Sitemap | 2008- © kakangsung All Rights Reserved