Home » Desain Web » HTML » Cara Mempelajari Format Teks pada Dokumen HTML

Cara Mempelajari Format Teks pada Dokumen HTML

Diposkan oleh pukul 5:12 PM , Beri Tanggapan
Label: ,
HTML menyediakan berbagai macam elemen yang dapat dimanfaatkan untukpemformatan teks.

  • Heading
Heading merupakan salah satu elemen yang paling penting yang terdapat di dalam dokumen HTML. Heading didefinisikan menggunakan tag pembuka <hn> dan diakhiri dengan tag penutup </hn>, di mana n menyatakan tipe dengan nilai 1-6. Karena dapat dipergunakan untuk mengetahui bentuk semua jenis heading. Perhatikan, kode HTML dibawah ini sengaja diringkas agar memudahkan cara penulisannya. Jadi, dalam implementasinya harus mendeklarasikan semua elemen-elemen dasar. Heading mempunyai perbedaan ukuran <h1> </h1> lebih besar dari pada <h2> </h2> dan seterusnya.

Dibawah ini adalah kode HTML yang digunakan untuk menyusun heading. <body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
Berikut ini adalah hasilnya :
Heading
Heading

Berikutnya adalah elemen heading yang menyediakan attribut align yang dapat digunakan untuk mengatur posisi teks.
<body>
<h1 align="right">Heading 1</h1>
<h2 align="left">Heading 2</h2>
<h3 align="center">Heading 3</h3>
</body> 
Berikut ini adalah hasilnya :
Heading attribut align
Heading Attribut Align
  • Paragraf
Sebagaimana teks pada umumnya, dokumen HTML terdiri dari beberapa kumpulan paragraf. Dalam kode HTML, paragraf direpresentasikanmelalui tag pembuka <p> dan diakhiri dengan tag penutup <p> sebenarnya merupakan tag pasangan, meski dalam penulisannya banyak orang yang mengabaikan mulai dari tag pembuka dan tag penutup, keseringan kode error itu dari kesalahan tag nya terkadang ada tag pembuka dan tidak diakhiri tag penutup begitu pula sebaliknya.
 
<body>
<p>
Ini paragraf pertama
<p>
Lorem ipsum dolor sit amet, consectetur adipisici ng elit,
sed do eiusmod tempor incididunt ut labore et dol ore
magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitatio ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<p>
Ini paragraf ketiga
</body>
Berikut ini adalah hasilnya :
Paragraf
Paragraf
Sebagaimana heading, kita juga bisa mengatur posisi paragraf dengan memanfaatkan atribut align agar berfungsi. Sebagai contoh, dokumen berikut akan menghasilkan paragraf rata tengah, kiri kanan, dan kanan.
<body>
<p align="center">
Ini paragraf rata tengah
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipisici ng elit,
sed do eiusmod tempor incididunt ut labore et dol ore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitatio n ullamco laboris nisi ut aliquip ex ea
commodo consequat.
<p align="right">
Ini paragraf rata kanan
</body>
Berikut ini adalah hasilnya :
Paragraf attribut align
Paragraf Attribut Align
Secara normal, baris baru memang akan ditambahkan di antara dua paragraf tersebut. Apabila kita hanya ingin membuat yang baru, kita tidak harus menggunakan paragraf. Sebagai gantinya, gunakan tag line break yaitu tag <br />
<body>
Membuat baris baru <br />
Membuat baris baru <br />
<p>
<!-- break di dalam paragraf -->
Lorem ipsum dolor sit amet, consectetur adipisici ng elit,
<br />
sed do eiusmod tempor incididunt ut labore et dol ore
magna
aliqua.
<br />
Ut enim ad minim veniam, quis nostrud exercitatio n
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</body>
Berikut ini adalah hasilnya :
Membuat baris baru
 Membuat baris baru
  • Fontase 
HTML menyediakan sangat banyak elemen yang dapat dimanfaatkan untuk mengatur font, seperti huruf miring, garis bawah, huruf tebal, huruf kecoret dan lain sebagainya. Sebagai tambahan, di sini juga saya akan menjelaskan mengenai cara mencetak tag. Seperti yang anda ketahui, tag <p> di dokumen secara otomatis akan diterjemahkan sebagai paragraf. Adapun juga untuk mencetak teks berparagraf di layar, kita perlu menggunakan nama entitas. Sebagai contoh, karakter < dinyatakan dengan nama entitas &lt; dan karakter > dinyatakan dengan &gt;
Untuk kode HTML sebagai berikut.
<body>
<b>Menggunakan tag &lt;b&gt;...&lt;/b&gt;</b> <br />
<strong>Menggunakan tag
&lt;strong&gt;...&lt;/strong&gt;</strong>
<br />
<i>Menggunakan tag &lt;i&gt;...&lt;/i&gt;</i> <br />
<em>Menggunakan tag &lt;em&gt;...&lt;/em&gt;</em> <br />
<u>Menggunakan tag &lt;u&gt;...&lt;/u&gt;</u> <br />
<strike>Menggunakan tag
&lt;strike&gt;...&lt;/strike&gt;</strike> <br />
</body>
Berikut ini adalah hasilnya :
Menggunakan Style Font
Menggunakan Style Font
  • Karakter Khusus
Di struktur HTML, kita juga bisa menampilkan karakter-karakter khusus dengan memanfaatkan nama entitas. Gambar dibawah ini menunjukkan beberapa jenis karakter khusus yang dapat dipergunakan beserta nama entitasnya.
Karakter khusus beserta nama entitasnya
Karakter khusus beserta nama entitasnya
Bisa dipraktekkan dengan kode HTML sebagai berikut.
<body>
&pound; Pound <br />
&euro; Euro <br />
&copy; Copyright <br />
&reg; Registered <br />
&trade; Trademark <br />
</body>
Berikut ini adalah hasilnya :
Karakter Khusus
Karakter Khusus

Artikel Terkait Cara Mempelajari Format Teks pada Dokumen HTML :

1. Berkomentarlah yang baik dan sopan
2. Berkomentarlah dengan kata-kata yang bermutu
3. Jangan berkomentar hal yang negatif