Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Tutorial HTML

[ Materi #7 ] Teknik PemFormatan Karakter di HTML

Oleh Genbisoft Posting Komentar
Format karakter merupakan hal yang penting didalam dokumen html, karena format karakter ini dapat memperindah desain halaman html kamu. Ada 3 tipe pemformatan karakter, yaitu : Logical Format , Physical FOrmat, Preformatted Text, dan Blockquote.







Mari kita bahas 1 per 1...

Logical Format, Pemformatan yang menerapkan layout dokumen secara logis dan terstruktur. Tag tag yang termasuk logical format adalah sebagai berikut :

<cite>, digunakan untuk menandai suatu kutipan ( citation )
<code>, digunakan untuk menampilkan kode - kode pemprograman misalnya bahasa php.
<em>, digunakan untuk menendai suatu teks yang ditekankan oleh penulis.
<kbd>, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard.
<samp>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.
<strong>, dgunakan untukmenandai bagian yang terpenting dari suatu teks.
<var>, digunakan untuk menampilkan nama vvariabel.
<dfn>, digunakanuntuk menandai sebuah subdefinisi dari daftar definisi.

berikut contoh penulisannya :

<html>

<head><title> format karakter logical</title></head>

<body>

<cite> zizarun </cite> adalah pendiri genbisoft.<br> <br>

untuk menampilkan isi variabel isi variabel di pemprograman PHP adalah : <code> echo "$content";</code> <br><br>

kita yakin, " kita bisa <em>pasti bisa</em>." <br><br>

untuk melihat direktori, ketikkan <kbd>dir</kbd>/ <br><br>

pada abjad terdapat 5 huruf vokal, yaitu <samp>AIUEO</samp>. <br><br>

kata yang diucapkannya adalah <strong> Aishiteru yo </strong> <br><br>

kode program itu di eksekusi sebanyak <var>N</var>kali . <br><br>

<dfn> sAmpi adalah hewan pemakan rumput. </dfn>

</body>

</html>



lihat sendiri hasilnya ya genk...


selanjutnya Physical Format, ini merupakan format terhadap fisik suatu font. antara lain :

<b>, digunakan untuk menebalkan huruf
<i>, digunakan untuk menmformat hurum menjadi miring, seperti italic gitu...
<u>, digunakan untuk menampilkan garis bawah pada teks, seperti underline gitu..
<tt>, digunakan untuk memformat huruf seperti huruf mesin ketik.
<strike>, digunnakan untuk menampilkan garis horisontal pada bagian tengah huruf... biasanya digunakan untuk diskon harga.. hehe
<big>, digunakan untuk memformat ukuran huruf menjadi llebih besar.
<small>, digunakan untuk memformat ukuran huruf menjadi lebih kecil.
<sub>, digunakan untuk menampilkkan subscript.
<sup>, digunakan untuk menampilkan superscript.

nah.. berikut contoh penulisannya :

<html>

<head><title>memformat karakter</title></head>

<body>

<b> kalimat ini dicetak tebal. </b> <br>

<i> kalimat ini dicetak miring </i><br>

<u> kalimt ini dicetak berrgaris bawah </u><br>

<strike>kalimat ini bergaris tengah</strike><br>

<tt>menampilkan huruf mesin ketik</tt><br>

<big>besar</big>itu besar<br>

<small>kecil</small>itu kecil<br>

untuk menampilkan <sub>subscript</sub><br>

untuk menampilkan <sup>superscript</sup>

</body>

</html>



nah hasilnya cek nndiri ya genk....



selanjutnya adalah indentasi paragrraf, kita menggunakan tag <blockquote>, nah blockquote ini seperti namanya... quote menampilkan quote... di browse akan menampilkann teks menjorok ke dalam.

<html>

<head><title>quotes</title>

</head>

<body>

<font color="#666" size="7"> quote indentasi </font>

<p> dengn html, anda dapat mengatur indentasi  teks yang anda buat dengan blockquote <blockquote>ini adalah paragraf yang menggunakan blockquote</blockquote>

nah.. sudah tau kan perbedaannya </p>

</body>

</html>


nah.. hasilnya liat ndiri ya genk...

selanjutnya adalah fungsi tag Preformatted text yang didalam pemprograman html dikodekan dengan <pre> fungsinya tidak lain adalah untuk menampilkan teks sesuai ketikan dalam dokumen html. browser biasanya akan menampilkan teks tersebut dalam font monospaced.

berikut penulisannya :

<html>

<head><title>preformating teks</title></head>

<body>

<p>

<pre> menampilkan teks sesuai dengan yang diketik pada dokumen htnl </pre>

</p>

</body>

</html>


hasilnya cek sendiri ya genk...






Posting Komentar untuk "[ Materi #7 ] Teknik PemFormatan Karakter di HTML"