Ads


Monday, June 20, 2016

Teknik PemFormatan Karakter di Pemprograman HTML

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...






0 comments:

Post a Comment

Copyright © 2015 | 2016 Genbisoft All Right Reserved
Website Management by GenBisoft.com