Tutorial Memformat Teks pada Html dengan 11 Tag Khusus

Penulisan sebuah Paragraf yang nantinya akan ditampilkan pada web browser bisa menggunakan sebuah tag <p>. dengan tag tersebut, kita bisa menggunakannya untuk membuat sebuah paragraf pada dokumen HTML.

Sedangkan untuk memformat tulisan pada HTML bisa menggunakan berbagai macam Tag. dengan Tag-Tag tersebut seorang programmer bisa menyesuaikan format teks yang diinginkan, di-artikel ini akan saya bahas 11 Tag untuk memformat teks pada html.

Daftar isi

1. Paragraf Html

Tag Paragraf pada dokumen Html adalah Tag yang berfungsi untuk membuat paragraf pada dokumen HTML. penulisan Tag tersebut dalam html menggunakan Tag <p>. berikut penulisan Tag <p> pada dokumen Html.

contoh kode/program/sintaks html
<p> ...isi Paragraf... </p>

Saat Tag tersebut digunakan, Tag tersebut akan menambahkan sebuah baris kosong di atas dan di bawah teks yang kita tulis didalam Tag <p>. Baris-baris kosong tersebut berfungsi untuk memisahkan paragraf tersebut dari paragraf-paragraf yang lainnya.

2. Heading Html

Untuk membuat heading pada Dokumen Html yang nantinnya akan ditampilkan pada Web Browser, HTML menyediakan Elemen Heading yang dimulai dari Tag <h1> sampai Tag <h6>.

pada umumnya, Font dasar yang digunakan pada Web Browser adalah Times New Roman dengan ukuran 16px. Tiap-tiap elemen heading pada Html mempunyai font dan ukuran standar yang semuanya ditentukan dari font dasar yang digunakan pada browser.

Tiap elemen Heading pada Html juga bisa ditentukan jenis font dan ukurannya dengan menggunakan CSS. Dengan begitu, kita bisa mengatur jenis font dan ukurannya sesuai yang diinginkan. Heading pertama dari sebuah halaman web seharusnya adalah elemen h1, kemudian diikuti elemen h2 sampai h6.

Daftar Tabel untuk Heading Html
NoTagDeskripsi
1<h1>Heading Level 1 dengan ukuran 200% dari ukuran normal. font weight Tebal
2<h2>Heading Level 2 dengan ukuran 150% dari ukuran normal. font weight Tebal
3<h3>Heading Level 3 dengan ukuran 117% dari ukuran normal. font weight Tebal
4<h4>Heading Level 4 dengan ukuran 100% dari ukuran normal. font weight Tebal
5<h5>Heading Level 5 dengan ukuran 83% dari ukuran normal. font weight Tebal
6<h6>Heading Level 6 dengan ukuran 67% dari ukuran normal. font weight Tebal

Dari ke-6 Tag heading pada table diatas, berikut contoh kode html menggunakan ke-6 Tag tersebut.

contoh kode/program/sintaks html
<!DOCTYPE html>
<html>
    <head>
        <title> contoh elemen heading level 1 sampai 6 </title>
    </head>

    <body>
        <h1> Heading Level 1 </h1>
        <h2> Heading Level 2 </h2>
        <h3> Heading Level 3 </h3>
        <h4> Heading Level 4 </h4>
        <h5> Heading Level 5 </h5>
        <h6> Heading Level 6 </h6>
    </body>
</html>

dibawah ini screenshot gambar, hasil dari contoh kode Tag heading diatas.

gambar contoh Elemen heading pada html dari level 1 sampai level 6
Gambar 2

3. Pemformatan Teks

Teks pada Html yang akan ditampilkan pada Web Browser dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap maksud dan tujuan dari teks tersebut. format tersebut bisa berupa Teks Tebal, Teks Penting, Teks Miring, dsb. berikut Tabel berisi 11 Tag khusus.

Daftar Tabel untuk Pemformatan Teks
NoTagDeskripsi
1<b>Membuat huruf tebal
2<i>Membuat huruf menjadi miring
3<em>Membuat penekanan pada teks
4<mark>Berguna untuk menandai sebuah text, efeknya seperti stabilo
5<pre>Mendefinisikan teks yang teformat
6<strong>Tag ini mirip dengan tags <b>, membuat text tebal atau text penting
7<small>Membuat Text Tercetak Kecil
8<sub>Membuat Text Tercetak sebagai subscript
9<sup>Membuat text Tercetak sebagai superscript
10<ins>Membuat Text bergaris bawah
11<del>Untuk memberi garis tengah pada teks atau mencoret teks

4. Tutorial 1 untuk Memformat Teks

berikut ini tutorial untuk membuat text tebal, miring, mencoret teks, teks bergaris bawah, dan teks tercetak kecil. Bukalah Notepad atau text editor lainnya, ketik atau copy script html dibawah ini. simpan file dengan nama index.html.

contoh kode/program/sintaks html
<!DOCTYPE html>
<html>
    <head>
        <title> contoh kode pemformatan teks </title>
    </head>

    <body>
        <p><b> Text Tebal </b></p>
        <p><i> Text Miring </i></p>
        <p><del> Text Tercoret </del></p>
        <p><ins> Text Bergaris Bawah </ins></p>
        <p><small> Text Kecil </small></p>
    </body>
</html>

Tag <b> pada contoh diatas bisa diganti dengan Tag <strong>, karena hasilnya akan mirip atau bahkan sama. perbedaannya yaitu Tag <strong> membuat teks penting dan tebal pada dokumen html, sedangan Tag <b> hanya membuat tebal saja.

Berikut screenshot, Hasil dari contoh sederhana script html diatas jika dijalankan pada web browser. atau buka file index.html yang telah dibuat, maka akan otomatis terbuka di web browser seperti pada gambar dibawah ini jika berhasil.

gambar contoh tutorial pemformatan teks html pertama
Gambar 4

5. Tutorial 2 untuk Memformat Teks

Pada Tutorial berikut, akan diberikan contoh kegunaan dari Tag <em>, <mark>, <pre>, <sub> dan <sup>. Ketik ulang contoh kode Html dibawah ini pada notepad atau text editor lainnya, simpan file dengan nama nama_file.html.

contoh kode/program/sintaks html
<!DOCTYPE html>
<html>
    <head>
        <title> contoh kode pemformatan teks </title>
    </head>

    <body>
        <p><em> Text Pertama </em></p>
        <p><mark> Text Kedua </mark></p>
        <p><pre> Text Ketiga </pre></p>
        <p>CO<sub>2</sub></p>
        <p>Text<sup> Keempat </sup></p>
    </body>
</html>

Hasil dari Kode Html diatas jika dijalankan atau dibuka pada web browser akan seperti screenshot dibawah ini.

gambar contoh tutorial pemformatan teks html kedua
Gambar 5

Berikut Penjelasan dari Hasil diatas. Teks Pertama, dari Contoh diatas, penggunaan Tag <em> membuat penekanan pada teks Pertama dan juga teks akan tercetak miring, fungsi Tag tersebut sama dengan Tag <i> yang sama-sama membuat teks tercetak miring.

Teks Kedua, pada teks kedua tercetak dengan latar belakang berwarna kuning, itu artinya penggunaan dari Tag <mark> berhasil diterapkan. efek ini sama dengan sebuah stabilo yang digunakan untuk menandai sebuah teks.

Teks Ketiga, Penjelasan dari Teks Ketiga yaitu hasil dari Tag <pre> membuat Teks yang ditulis didalam Tag tersebut memiliki struktur berdasarkan ketetapan tifografi. Artinya Teks akan tercetak apa adanya sesuai format yang ditulis pada dokumen Html. Teks CO2, fungsi dari Tag <sub> membuat teks tercetak agak kebawah, setengahnya dari bagian teks normal dan memiliki ukuran lebih kecil. Tag ini lebih cocok digunakan untuk menulis rumus kimia seperti CO2 dan H2O. Teks Keempat, yang terakhir dari Teks Keempat yaitu, Tag <sup> adalah kebalikan dari Tag <sub>. yaitu membuat Teks tercetak kecil agak keatas dari Teks normal.