Format Teks HTML

Oke di dalam dokumen HTML dapat di format secara tersendiri untuk menunjukkan perbedaan dari isi dan maksud teksnya itu. Contohnya teks yang ditampilkan dengan huruf tebal, garis bawah, dan miring atau dll.

Berikut adalah contoh pemformatan teks di dalam dokumen HTML

<html>
<head>
<title>Contoh Pemformatan HTML</title>
</head>
<body>
<b>Teks ini ditulis dengan huruf tebal</b>
<i>Teks ini ditulis dengan huruf miring</i>
<u>Teks ini ditulis dengan huruf underline (garis bawah)</u>
<strong>Teks ini ditulis dengan huruf strong (tebal)</strong>
<em>Teks ini ditulis dengan huruf emphasize</em>
<small>Teks ini ditulis dengan huruf kecil</small>
<big>Teks ini ditulis dengna huruf besar</big>
Teks ini ditulis dengan <sub>subscript</sub>
Teks ini ditulis dengan <sup>superscript</sup>
</body>
</html>

Hasilnya:

Teks ini ditulis dengan huruf tebal

Teks ini ditulis dengan huruf miring

Teks ini ditulis dengan huruf underline (garis bawah)

Teks ini ditulis dengan huruf strong (tebal)

Teks ini ditulis dengan huruf emphasize

Teks ini ditulis dengan huruf kecil

Teks ini ditulis dengan huruf besar

Teks ini ditulis dengan subscript

Teks ini ditulis dengan superscript


Teks Preformat

Jarak yang standart untuk antar teks atau kalimat di dalam dokumen HTML adalah satu spasi. Walaupun kita mengetik beberapa kali spasi, maka tetap saja di browser akan menampilkannya dalam satu spasi. Nah bagaimana agar browser web menampilkan agar sesuai dengan yang kita tuliskan di dalam dokumen HTML? Jawabannya adalah dengan menggunakan tag <pre> dan diakhiri dengan </pre>. Tag pre itu kepanjangan dariPreformatted, dengan tag itu maka browser web akan menjaga spasi, baris baru, dan tab sesuai dengan aslinya yang di ketikkan di dokumen HTML.

Contoh source codenya:

<html>
<body>
<pre>
include <iostream>
using namespace std;
int main()
{
cout>>Hello World;
}
</pre>
</body>
</html>

Hasilnya:

   include
using namespace std;
int main()
{
cout>>"Hello World";
}

Address

Alamat (address) adalah salah satu dari elemen yang umum dalam dokumen. Untuk HTML sendiri, tag address di sediakan secara khusus. Dengan adanya tag ini, maka penulisan pun dapat di standarkan.

Adapun penulisannya sendiri di awali dengan tag <address>, dan diakhiri dengan tag </address>
Contoh:

<html>
<body>
<address>
Jl. Green Cove No. 5
Serpong
Tangerang
</address>
</body>
</html>

Hasilnya adalah:

Jl. Green Cove No. 5
Serpong
Tangerang

Singkatan

Dalam menulis suatu dokumen, pasti kadang-kadang kita menuliskan singkatan (akronim) di suatu istilah. Nah ternyata dalam tag HTML, untuk singkatan itu sendiri mempunyai tag tersendiri yaitu tag <abbr> dan tag <acronym>

kode:

<abbr title=”kepanjangannya”>Singkatannya</abbr>
<acronym title=”kepanjangannya”>Singkatannya</acronym>

Dengan menggunakan tag di atas, maka pada saat mouse kita berada di atas teks singkatan tersebut, maka kepanjangan dari singkatan tersebut akan ditampilkan mengambang di atas teks singkatannya.
Contoh:

<html>
<body>
<abbr title=”tersebut”>Tsb</abbr><br />
<acronym title=”Hyper Text Markup Language”>Http</acronym>
<p>Untuk beberapa browser atribut dari tag di atas apabila mouse berada di teks singkatannya maka teks kepanjangannya akan ditampilkan</p>
</body>
</html>

Hasilnya:

Tsb

Http

Untuk beberapa browser atribut dari tag di atas apabila mouse berada di teks singkatannya maka teks kepanjangannya akan ditampilkan

Arah Teks

Dalam tampilan dokumen HTML kan biasanya teks itu ditampilkan di browser dengan arah dari kiri kekanan, nah ternyata pada kasus ini terdapat tag html untuk menampilkan tulisan dari kanan ke kiri. Mungkin seperti tulisan arab kali ya? Yang cara baca tulisannya dari kanan ke kiri. Sedangkan tag yang digunakan dalam penulisan ini adalah <bdo> atau disebut sebagai bidirectional override. Dan atributnya pun terdiri dari rtl atau right to left dan ltr atau left to right.

Contoh:

<html>
<body>
<p>Jika browser mendukung tampilan (bdo) ini, maka teks di bawah ini akan ditulis dari kanan ke kiri (rtl):</p>
<bdo dir=”rtl”>
Ini adalah teks Hebrew
</bdo>
</body>
</html>

Quotation

Suatu kutipan di dokumen HTML itu terbagi menjadi dua jenis. yaitu:

  1. Kutipan pendek atau ditulis dengan tag <q>
  2. Kutipan panjang atau ditulis dengan tag <blockquote>

Biasanya tag <blockquote> digunakan untuk menampilkan teks dalam format tersendiri. Misalnya adanya perubahan pada margin atau pewarnaan tersendiri pada teks <blockquote> itu. Sedangkan tag <q> biasanya hanya menampilkan teks dengan tanda kutip dua di atasnya.

Contoh:

<html>
<body>
<blockquote>
Teks dengan kutipan teks dengan kutipan Teks dengan kutipan teks dengan kutipan
Teks dengan kutipan teks dengan kutipan Teks dengan kutipan teks dengan kutipan
Teks dengan kutipan teks dengan kutipan Teks dengan kutipan teks dengan kutipan
Teks dengan kutipan teks dengan kutipan Teks dengan kutipan teks dengan kutipan
Teks dengan kutipan teks dengan kutipan Teks dengan kutipan teks dengan kutipan
</blockquote>
Dan ini dengan menggunakan tag <q>:
<q>Ini adalah kutipan pendek</q>
</body>
</html>

Hasilnya:

Teks dengan kutipan teks dengan kutipan Teks dengan kutipan teks dengan kutipan
Teks dengan kutipan teks dengan kutipan Teks dengan kutipan teks dengan kutipan
Teks dengan kutipan teks dengan kutipan Teks dengan kutipan teks dengan kutipan
Teks dengan kutipan teks dengan kutipan Teks dengan kutipan teks dengan kutipan
Teks dengan kutipan teks dengan kutipan Teks dengan kutipan teks dengan kutipan

Dan ini dengan menggunakan tag <q>:
Ini adalah kutipan pendek

Teks sisipan atau dihapus

Biasanya untuk menandakan teks yang dihapus atau disisipkan pada sudatu dokumen, maka kita akan menggunakan tag <del> untuk teks yang dihapus dan tag <ins> untuk teks yang disisipkan. Contoh perintahnya:

<html>
<body>
<p>Ini adalah angka 10, ditulis dengan teks menjadi:
<del>Sebelas</del>
<ins>Sepuluh</ins>
</p>
<p>Biasanya browser akan menampilkan teks yang dicoret untuk tag del dan menggaris bawahi untuk teks dengan tag ins</p>
</body>
</html>

Hasilnya:

Ini adalah angka 10, ditulis dengan teks menjadi:
Sebelas
Sepuluh

Biasanya browser akan menampilkan teks yang dicoret untuk tag del dan menggaris bawahi untuk teks dengan tag ins

Tag-tag Pemformatan HTML

Tag Awal Fungsi
<small> Untuk membuat tulisan kecil/small
<b> Digunakan untuk menebalkan teks
<big> Untuk membesarkan ukuran teks
<em> Untuk teks yang ditekan
<i> Untuk membuat teks miring/italic
<strong> Untuk membuat teks tebal
<sub> Untuk teks subscript
<sup> Untuk teks superscript
<ins> Untuk teks yang disisipkan
<del> Untuk teks yang didelete/hapus

Tag-tag Computer Output

Tag Awal Fungsi
<code> Untuk komputer kode
<kbd> Untuk teks keyboard
<samp> Untuk contoh komputer kode
<tt> Untuk teks teletype
<var> Untuk suatu variabel

Tag Citation, Quotation, Definition

Tag awal Fungsi
<acronym> Untuk suatu akronim
<abbr> Untuk suatu singkatan
<address> Untuk menyatakan suatu alamat/address
<bdo> Untuk menyatakan arah teks
<blockquote&g; Untuk menyatakan quotation panjang
<q> Untuk menyatakan quotation pendek

Leave a Reply

Fill in your details below or click an icon to log in:

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