Dekorasi Teks (HTML 4)

www.rizkyramadhansttg.wordpress.com
rizky_ramadhan7@yahoo.co.id


Penggunaan Paragraf

Paragraf sering kita gunakan dalam menyusun kelompok kalimat yang panjang. Untuk membuat paragraf dalam HTML, digunakan tag <P> atau <DIV>. Didalam tag tersebut, kita dapat menyisipkan atribut pengatur perataan kalimat, antara lain left, right, center, dan justify.

<P> digunakan jika ingin jarak antar blok kalimat lebar (setelah paragraph ada jaraknya)
<DIV>
digunakan jika ingin jarak yang tidak terlalu lebar.

Buka Notepad dan ketikkan kode program berikut:

Agar proses pembelajaran efektif dan lebih masuk ke otak, sebaiknya jangan melakukan copy paste. Nantinya jadi tidak terbiasa.

<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<h1 align=”left”>Penggunaan Paragraf</h1>
<font size=4><P>Nama saya Rizky Ramadhan. Saya lahir di kota garut, sebuah kota
yang sejuk dan indah serta dikelilingi gunung – gunung.
<P align=”center”>Garut terkenal dengan dodol dan jeruknya.
<P align=”right”>yang jelas, Garut merupakan kota yang selalu memberikan kenangan yang tak
akan terlupakan sepanjang masa.
</BODY>
</HTML>

Save dengan nama Source4.htm dengan memilih type all files. Lalu buka dengan browser web.

Output program

Tampilan program Source4.htm

Dekorasi Teks
Pada bagian ini, kita akan mempelajari bagaimana membuat paragraf dan mendekorasi teks seperti heading, ukuran huruf, alignment/penyusunan, ketebalan, kemiringan, dsb.

Buka Notepad dan ketikkan kode program berikut:

Agar proses pembelajaran efektif dan lebih masuk ke otak, sebaiknya jangan melakukan copy paste. Nantinya jadi tidak terbiasa.

<HTML>
<HEAD>
<TITLE>Penggunaan Dekorasi Teks, Jenis huruf dan warna huruf</TITLE>
</HEAD>
<BODY>
<H1 Align=”center”> <Font face=”Albertus Medium”><u>Kejujuran</u></Font></h1>
<FONT FACE = “times new roman”><b>Kejujuran</b> adalah suatu sikap yang terpuji dan merupakan salah satu pokok ajaran <br>
<i><b> Agama Islam</b></i> yang harus dilakukan oleh semua orang.<br></font>
<Font face =”times new roman”><b><u>Kejujuran</b></u> sangat sulit dilakukan karena dengan kejujuran kadangkala seseorang<br>
hidup dengan penuh<b> kesulitan</b>,tapi yakinlah <i> hasil dari kejujuran sangat manis rasanya</i>.</font>
<hr>
<h1 align=”center”><font face=”arial”>Hikmah Dibalik Kesulitan</font></h1>
<font face=”tahoma”><font color=”red”><br>Kesulitan </font></font><br>
<FONT COLOR=”Green”>Jadikanlah<b> kesulitan</b> itu sebagai <u> ladang amal dan ujian</u>,agar kita selalu mendekatka diri,<br>
meminta pertolongan dan lindungan kepada <b> Allah SWT </b>.</font>
<hr>
<font color=”blue”><b>Allah</b> tidak membebani seseorang melainkan sesuai dengan kesanggupannya.<br>
(Q.S.Al-Baqarah:286)</font>
</BODY>
</HTML>

Save dengan nama Source5.htm dengan type all files dan buka dengan browser internet seperti internet explorer.

Berikut adalah materi tentang tampilan teks

Heading
<Hn>….</Hn>
adalah heading, merupakan teks yang biasa digunakan sebagai judul utama dari sebuah dokumen dimana n adalah nomor level heading. HTML memiliki 6 level Heading dimana semakin besar nilai angkanya, semakin kecil ukuran hurufnya.

Dekorasi Teks
Macam – macam tag untuk dekorasi teks

Perintah

Fungsi

<b> …. </b> Mencetak tebal (Bold) teks
<i> …. </i> Mencetak miring (Italic) teks
<u>….</u> Menggaris bawahi (Underline) teks
<s>….</s> Mencoret teks (Strikethrough) teks
<strike>….</strike> Memberi coretan pada teks
<blink>….</blink> Membuat teks berkedip (hanya pada Netscape)
<tt>….</tt> Menampilkan teks dalam font mesin ketik
<big>….</big> Membesarkan teks
<small>….</small> Mengecilkan teks
<sub>….</sub> Membuat subscript (sedikit ke bawah): H2O
<sup>….</sup> Membuat teks superscript (sedikit ke atas): X2

Bentuk Huruf

Untuk menentukan bentuk huruf yang ingin kita gunakan seperti Times New Roman, Arial, dsb.Yaitu dengan perintah <FONT FACE> yang artinya (wajah huruf).

Contoh:
<FONT FACE=”verdana”>Jenis huruf teks ini adalah Verdana</font>

Warna Huruf
Kita pun dapat menentukan warna pada sebuah huruf atau teks tertentu dengan atribut COLOR di dalam tag <FONT> dengan nilai berupa kode atau nama warna.

Contoh
<FONT COLOR=”#d3d3d3″>Huruf ini berwarna abu – abu</font>

Jika ingin menggunakan nama warna, maka jangan menggunakan tanda “#” di depan nama warnanya.

Contoh
<FONT COLOR=”blue”>Huruf ini berwarna biru</font>

Hasil tampilan program Source5.htm

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: