Setelah belajar tentang apa itu HTML, Tag, Elemen, dan Atribut. Berikutnya, kita akan belajar tentang elemen-elemen dasar pada HTML yang sering digunakan dalam membuat web. Mari kita mulai dengan mengenal elemen paragraf.

Membuat Paragraf di HTML

Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel. Paragraf pada HTML dibuat dengan tag p. Selain tag ini, ada juga tag pendukung lain seperti div, hr, br, dan pre.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Zulma Blog. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

Atribut untuk Paragraf

Biasanya paragraf ditambahkan dengan beberapa atribut seperti align, id, class, dll.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Zulma Blog. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

Atribut align untuk paragraf

Atribut align merupakan atribut yang digunakan untuk perataan teks pada paragraf. Namun, menurut validator W3C. penggunaan tag ini sebaiknya diganti dengan CSS. Mengapa demikian? Karena atribut align dapat mengubah tampilan dari web. Ini sebenarnya tugas dari CSS. Tugas utama dari HTML adalah membuat struktur dasar dari web.

Contoh perataan menggunakan CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p style="text-align: justify">Ini adalah sebuah paragraf yang berisi 
        beberapa kalimat. Saya sedang belajar HTML di Zulma Blog. Saat ini 
        Sedang, Belajar tentang paragraf.</p>
        <p style="text-align: center">Paragraf adalah kumpulan dari beberapa 
        kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide 
        pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

Tag br untuk Membuat Paragraf

Tag br sebenarnya bukanlah tag untuk membuat paragraf. Tapi tag ini, biasanya digunakan untuk membantu tag p. Fungsi utama tag br adalah untuk membuat baris baru.

Contoh:

Misalkan kita ingin menampilkan pantun, bisa saja kita buat seperti ini di dengan tag p.

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #3</title>
    </head>
    <body>
        <p>Rambut berantakan tak pernah di sisir
           Orang melihat tertawa kesenangan
           Pengangguran berserakan seperti pasir
           Kurang usaha dan keterampilan</p>
    </body>
</html>

Meskipun pada kode HTML kita sudah menulis tiap bait pantun dalam baris yang baru. Tapi ia akan tetap ditampilkan seperti baris. Di sinilah saatnya kita harus menggunakan tag br. Maka, kode di atas. bisa kita perbaiki menjadi seperti ini:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #3</title>
    </head>
    <body>
        <p>Rambut berantakan tak pernah di sisir <br />
           Orang melihat tertawa kesenangan <br />
           Pengangguran berserakan seperti pasir <br />
           Kurang usaha dan keterampilan</p>
    </body>
</html>

Hasilnya:

Menampilkan pantun di HTML dengan tag br

Oh iya, tag br adalah tag yang tidak memiliki pasangan penutup. Cara menutupnya, tambahkan saja garis miring seperti ini br/. Tag br boleh ditutup, boleh juga tidak. Namun, sebaiknya ditutup agar valid menurut validator W3C.

Tag hr untuk Membuat Garis

Sama seperti tag br, tag hr juga bukanlah tag untuk membuat paragraf. Tag hr merupakan tag yang digunakan untuk membuat garis lurus secara horizontal (horizontal rule). Biasanya digunakan untuk memisahkan beberapa konten atau paragraf.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Zulma Blog. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <hr />
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

Tag pre

Pada kasus tertentu, kita ingin menampilkan paragraf dengan format yang lebih spesifik. Contohnya seperti pantun dan puisi yang paragrafnya ditulis dengan garis baru dan juga indentasi. Hal ini bisa dilakukan dengan bantuan tag br. Namun ada juga tag lain yang bisa jadi alternatif, yakni tag pre. Tag pre (preformatting) merupakan tag yang digunakan untuk menampilkan teks atau paragraf dalam format yang sudah kita tentukan di HTML.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Paragraf di HTML</title>
</head>
<body>
    <h1>Hujan Bulan Juni</h1>
    <p>oleh Sapardi Djoko Damono</p>
    <pre>
tak ada yang lebih tabah
dari hujan bulan Juni
dirahasiakannya rintik rindunya
kepada pohon berbunga itu

    tak ada yang lebih bijak
    dari hujan bulan Juni
    dihapusnya jejak-jejak kakinya
    yang ragu-ragu di jalan itu

tak ada yang lebih arif
dari hujan bulan Juni
dibiarkannya yang tak terucapkan
diserap akar pohon bunga itu
    </pre>
</body>
</html>

Hasilnya Paragraf yang kita buat di dalam kode HTML akan ditampilkan dengan format yang sama seperti yang kita tulis di sana. Biasanya tag pre sering digunakan untuk menampilkan source code. Karena, tag ini menggunakan font Monospace atau Courier New (di Windows).

Tag p vs Tag div

Tag p dan Tag div, memiliki perilaku yang hampir sama. Tapi tag div sebenarnya bukanlah tag untuk membuat paragraf, melainkan tag untuk membuat layout web. Kadang tag div sering ‘disalahgunakan’ untuk membuat paragraf.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <div>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Zulma Blog. Saat ini Sedang,
        Belajar tentang paragraf.</div>
        <div>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</div>
    </body>
</html>

Ini boleh-boleh, saja. Tapi hasilnya tidak akan sama seperti tag p.

Membuat paragraf dengan tag div

Paragraf yang dibuat dengan tag div tidak akan memiliki jarak margin antar paragraf. Tag div biasanya digunakan untuk membungkus teks yang ada di luar artikel. Contoh seperti teks pada footer, header, sidebar, dll.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Zulma Blog. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
        <hr />
        <footer>
            <div>&copy; 2020 Belajar HTML by Zulma Blog</div>
        </footer>
    </body>
</html>

Bonus: Paragraph Style

Sebenarnya ini ranah pembahasan tentang CSS bukan HTML. Karena itu, kamu boleh baca dan juga boleh tidak. Paragraph Style adalah style CSS yang kita berikan kepada paragraf agar tampil lebih menarik. Berikut ini beberapa style yang bisa diberikan pada paragraf:

Baris Pertama Masuk ke Dalam

Baris pertama pada paragraf kadang sering ditulis masuk ke dalam atau ini juga disebut dengan indentasi.

Kita bisa memanfaatkan style CSS untuk membuat indentasi.

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Paragraf di HTML</title>
</head>
<body>
    <h1>Paragraf Indentasi</h1>
    <p style="text-indent: 45px;">Contoh ini baris pertama yang ditulis masuk ke dalam.
    Baris kedua tetap ditulis seperti biasa. Dan juga baris
    Ke-3 ditulis seperti biasa.</p>
</body>
</html>

Atribut style merupakan atribut untuk menambahkan style CSS. Pada contoh di atas kita menambahkan text-indent dengan nilai 45px, nilai ini akan menentukan jarak (ke dalam) dari baris pertama.

Warna untuk Paragraf

Warna bisa kita berikan kepada teks dan background. Properti CSS yang digunakan untuk memberikan warna adalah color (untuk teks) dan background-color (untuk background).

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Paragraf di HTML</title>
</head>
<body>
    <h1>Warna untuk Paragraf</h1>

    <p style="color: blue;">Contoh paragraf dengan warna teks biru.
    Ini baris kedua dari paragraf. Semua teks yang ada di dalam
    paragraf ini  akan berwarna biru.</p>

    <p style="color: white; background-color:purple">Contoh paragraf dengan 
    warna teks putih dan warna background-nya adalah ungu.
    Ini baris kedua dari paragraf. Semua teks yang ada di dalam
    paragraf ini  akan berwarna putih.</p>

</body>
</html>

Mengubah Jenis Font

Tidak suka dengan jenis font yang digunakan, kamu bisa menggantinya dengan style CSS. Anda bisa menggunakan properti font-family lalu diberikan nilai dengan nama font yang akan digunakan.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Paragraf di HTML</title>
</head>
<body>
    <h1>Font untuk Paragraf</h1>

    <p style="font-family: Arial;">Ini adalah contoh paragraf yang
    menggunakan font Arial. Semua teks pada paragraf ini akan menggunakan
    font Arial. Arial adalah salah satu font yang umum digunakan pada
    Windows.</p>

    <p style="font-family: 'Times New Roman'">Ini adalah paragraf yang
    menggunakan font Times New Roman. Font ini juga umum digunakan dalam
    penulisan teks. Perhatikan penulisan Times New Roman pada style CSS,
    ia diapit dengan tanda petik karena mengandung lebih dari satu kata.</p>

</body>
</html>

Apa itu Heading?

Heading adalah sebuah judul yang biasanya diberikan pada halaman atau beberapa bagian dari artikel. Jika kamu sering menulis artikel, pasti ini tidak asing untukmu. Lalu, bagaimana caranya membuat judul di HTML?

Mari kita bahas:

Cara Membuat Heading di HTML

Judul pada HTML dapat kita buat dengan tag h1 sampai h6. Tag h1 digunakan pada judul level pertama. Lalu tag lainnya digunakan pada sub heading atau level berikutnya. Masing-masing judul akan ditampilkan dengan ukuran teks yang berbeda. Tag h1 adalah yang paling besar, dan tag h6 paling kecil.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Heading di HTML</title>
    </head>
    <body>
        <h1>Ini Judul Level 1</h1>
        <h2>Ini Judul Level 2</h2>
        <h3>Ini Judul Level 3</h3>
        <h4>Ini Judul Level 4</h4>
        <h5>Ini Judul Level 5</h5>
        <h6>Ini Judul Level 6</h6>
    </body>
</html>

Tag h1 biasanya dipakai pada judul artikel. Lalu tag h2, h3, h4, h5, dan h6 dipakai pada sub judul atau sub heading. Mari kita coba membuat sebuah artikel yang dilengkapi dengan heading. Buatlah file HTML baru kemudian isi dengan kode berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Heading di HTML</title>
    </head>
    <body>
        <h1>Belajar Heading di HTML</h1>
        <p>
          Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6.
          Heading berfungsi untuk membuat judul untuk artikel dan juga
          sub judul pada bagian artikel.
        </p>
        <h2>Membuat Sub Judul</h2>
        <p>
          Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti
          dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1
          hanya digunakan untuk judul artikel saja.
        </p>
    </body>
</html>

Berdasarkan pengalaman penulis sebagai teknisi IT dalam menulis artikel—tag h5 dan h6 jarang sekali dipakai, karena judul yang dibuat hanya sampai pada level 2, 3, dan 4.

Urutan Penulisan Heading

Apakah boleh menulis judul yang tidak urut? seperti menggunakan h6 untuk judul awal, lalu berikutnya h4 untuk sub judul? Jawabannya adalah boleh-boleh saja, tapi kurang baik untuk SEO (Search Engine Optimization). Penulisan judul yang bagus adalah judul yang mengikuti levelnya.

Judul h1 pada level pertama, h2 pada level ke-2, dan seterusnya.

Atribut untuk Heading

Heading tidak memiliki atribut khusus. Ia biasanya menggunakan atribut global.

Contohnya seperti:

  • id untuk memberikan nama id unik. Biasanya ini akan digunakan oleh link, CSS, dan Javascript;
  • class untuk memberikan nama class yang akan dipakai oleh CSS;
  • style untuk memberikan kode css secara langsung;
  • title untuk menambahkan informasi tambahan;
  • dll.

Daftar atribut global, bisa kamu lihat di MDN: HTML Global Attributes.

Perbedaan Heading dengan Title dan Header

Meskipun sama-sama digunakan untuk urusan judul, tapi tiga elemen ini berbeda.

  • Heading adalah judul untuk artikel dan bagian artikel yang dibuat dengan tag h1 sampai h6
  • Title adalah judul dari web yang dibuat dengan tag title
  • Header adalah bagian kepala (kop) pada web yang dibuat dengan tag header

Tag title untuk judul yang ditampilkan di web browser. Tag header sama seperti kop surat. Lalu heading h1 sampai h6 menjadi judul untuk artikel.

Bonus: Heading Style

Sebenarnya ini termasuk dalam pembahasan materi tentang CSS. Karena itu, saya menjadikannya bonus yang boleh kamu baca dan juga boleh tidak.

Heading Style adalah style CSS yang diberikan pada heading agar terlihat menarik.

Berikut ini beberapa style yang sering digunakan pada heading:

Heading dengan Garis Bawah

Heading dengan garis bawah bisa kita buat dengan memanfaatkan tag hr dan juga CSS.

Contoh menggunakan tag hr:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Heading di HTML</title>
    </head>
    <body>
        <h1>Tutorial Membuat Heading di HTML</h1>
        <hr />
        <p>
            Heading adalah judul sebuah artikel dan bagian dari artikel.
            Ada Enam level heading pada HTML, yakni dimulai dari H1,
            H2, H3, sampai H6.
        </p>
    </body>
</html>

Contoh menggunakan CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Heading di HTML</title>
    </head>
    <body>
        <h1 style="text-decoration: underline;">Tutorial Membuat Heading di HTML</h1>
        
        <p>
            Heading adalah judul sebuah artikel dan bagian dari artikel.
            Ada Enam level heading pada HTML, yakni dimulai dari H1,
            H2, H3, sampai H6.
        </p>
    </body>
</html>

Text Case untuk Heading

Heading kadang ditulis dengan berbagai style case. Ada yang menggunakan huruf besar semua, ada juga yang menggunakan huruf besar di awal kata saja.

Contoh:

INI HEADING DENGAN HURUF BESAR SEMUA
Ini Heading Dengan Huruf Besar Di Depan Saja
Nah, untuk membuat style case heading ini, Kita bisa menggunakan CSS dengan atribut text-transform.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Heading di HTML</title>
    </head>
    <body>
        <h1 style="text-transform: uppercase;">Heading dengan huruf Besar semua</h1>
        <p>
            Heading adalah judul sebuah artikel dan bagian dari artikel.
            Ada Enam level heading pada HTML, yakni dimulai dari H1,
            H2, H3, sampai H6.
        </p>
        <h1 style="text-transform: capitalize;">Heading dengan huruf Besar di awal kata</h1>
        <p>
            Properti text-transform berfungsi untuk menentukan style case dari
            teks. Properti ini bisa diberikan nilai capitalize, uppercase,
            lowercase, initial, none, inherit.
        </p>
    </body>
</html>

Warna untuk Heading

Sama seperti elemen yang lainnya, heading juga dapat kita berikan warna dengan bantuan CSS. Warna bisa kita berikan pada teks dan latar belakang atau background.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Heading di HTML</title>
    </head>
    <body>
        <h1 style="color: red;">Heading dengan warna Merah</h1>
        <p>
            Atribut color adalah atribut CSS yang berfungsi untuk memberikan
            warna pada teks. Pada contoh ini, teks pada heading akan berwarna
            merah, karena kita memberikan warna red untuk color. 
        </p>
        <h2 style="background-color: yellow;">Heading dengan Latar Kuning</h2>
        <p>
            Atribut background-color adalah atribut untuk memberikan warna
            latar (background) pada elemen tertentu. Pada contoh ini, kita
            memberikan warna latar kuning untuk heading.
        </p>
    </body>
</html>

Komentar dalam HTML

Sampai ditahap ini. apakah sudah ingat semua tag HTML yang dipelajari? Sudah lupa? Tidak apa-apa, itu adalah sifat dari manusia. Otak kita memang tidak seperti komputer yang bisa mengingat dengan cepat dan permanen. Karena itu, kita membutuhkan catatan agar bisa mengingat.

Komentar atau catatan merupakan sebuah kode program yang digunakan untuk memasukkan catatan pada file html yang kita buat, Komentar tidak akan dieksekusi dan tidak akan muncul pada web browser ketika file html dibuka, Komentar hanya bisa dilihat didalam file text editor saja.

Agar bisa mengingat struktur file HTMLnya, ada baiknya kita menggunakan komentar.

Apa itu Komentar dalam HTML?

Komentar adalah elemen yang akan diabaikan oleh browser. Ia tidak akan ditampilkan di dalam web. Komentar biasanya digunakan untuk memberikan informasi tambahan pada kode HTML dan kadang juga digunakan untuk menon-aktifkan beberapa kode HTML.

Cara Membuat Komentar di HTML

Komentar dapat kita buat dengan tag ““.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar Membuat Komentar di HTML</title>
    </head>
    <body>
      <!-- ini adalah komentar -->
      <p>Hello World!</p>
      <!-- ini juga komentar
      dan ditulis dalam dua baris -->
    </body>
</html>

Komentar tidak akan ditampilkan oleh browser, tapi kita bisa melihatnya dengan cara melakukan view source. Klik kanan pada browser, lalu pilih view page source.

Jalan Pintas untuk Membuat Komentar

Jika kamu menggunakan teks editor Visual Studio Code, kamu bisa membuat komentar dengan menekan Ctrl+/. Cara ini lebih cepat dibandingkan dengan harus menulis secara manual tag komentarnya.

Atribut untuk Komentar

Komentar tidak bisa ditambahkan atribut. Jika kamu mencoba menambahkannya, itu akan sia-sia. Soalnya komentar merupakan elemen yang tidak akan diproses oleh browser.

Fungsi Komentar

Komentar memang tidak akan ditampilkan di web, namun bukan berarti ia tidak memiliki fungsi.

Berikut ini beberapa fungsi komentar:

Komentar untuk Menjelaskan Arti Tag

Saat belajar HTML, kamu mungkin akan kesulitan mengingat fungsi dan arti dari tag HTML. Karena itu, kamu harus membuat catatan untuk mengingatnya.

Ini bisa kamu lakukan dengan mencatat di buku, maupun media lain. Tapi, alangkah baiknya memanfaatkan komentar untuk mencatat.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html> <!-- ini tag untuk menentukan type dokumen -->
<html lang="en">
    <head>
        <title>Belajar Membuat Komentar di HTML</title>
        <!-- tag title berfungsi untuk membuat judul web dan akan ditampilkan
        pada title bar di browser -->
    </head>
    <body>
        <p>Ini tag paragraf yang aktif</p>
        <!-- 
        tag <p> adalah tag untuk membuat paragraf 
        -->
    </body>
</html>

Jika kita lupa, kita bisa membuka kembali dan mempelajari kode tersebut. Tapi ingat, jangan buat komentar seperti ini pada proyek websitemu. Karena akan sangat mengganggu dan membuat kode sulit terbaca. Sebaiknya, komentar yang berisi penjelasan semacam ini dibuat pada kode HTML yang kita pakai untuk belajar. Bukan kode HTML untuk web asli.

Komentar untuk Menyimpan Todo List

Komentar kadang sering digunakan juga untuk menyimpan todo list, ini akan membantu kita mengingat apa yang harus dikerjakan pada bagian HTML tertentu.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar Membuat Komentar di HTML</title>

        <!-- TODO: Tambahkan tag meta di sini -->
    </head>
    <body>
        <h1>Komentar di HTML</h1>

        <!-- TODO: Buat konten web di ini -->
    </body>
</html>

Jika kita sudah mengerjakan apa yang dituliskan di todo list tersebut, kita bisa hapus komentarnya.

Komentar untuk Menonaktifkan Kode HTML

Komentar kadang sering digunakan untuk menon-aktifkan kode HTML.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar Membuat Komentar di HTML</title>
    </head>
    <body>
        <p>Ini tag paragraf yang aktif</p>
        <!-- 
        <p>ini tag paragraf yang tidak aktif
        karena berada di dalam komentar
        </p> 
        -->
        <p>ini paragraf yang lainnya</p>
    </body>
</html>

Text Formatting pada HTML (Bold, Italic, Underline, dll)

Teks yang terformat akan lebih mudah dibaca, karena ada penegasan seperti teks tebal, miring, dan garis bawah. Saat kita mencari kata atau kalimat penting. mata kita akan lebih mudah menemukannya pada teks yang terformat dibandingkan plain text. Karena itu, dalam membuat web. ada baiknya menggunakan format teks. Dalam HTML terdapat tag-tag yang khusus digunakan untuk text formatting.

Teks Tebal

Teks tebal biasanya digunakan untuk memberikan penegasan pada teks tertentu, misalnya seperti judul, subjudul, huruf penting, dll.

Tag yang digunakan untuk membuat teks tebal di HTML adalah tag b (bold) dan tag strong. Kamu bebas mau pakai yang mana saja, hasilnya akan sama-sama tebal.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Tebal di HTML</title>
</head>
<body>
  <h1>Text Tebal di HTML</h1>
  <p>
    <strong>Teks formatting itu penting!</strong> Karena dapat membuat tulisan 
    terlihat lebih menarik sehingga akan membuat <b>pengunjung senang</b> 
    membacanya.
  </p>
</body>
</html>

Teks Miring

Teks miring biasanya digunakan untuk menegaskan sebuah kata atau istilah baru. Teks miring di HTML dapat kita buat dengan tag i (italic) dan juga tag em (emphasis).

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Miring di HTML</title>
</head>
<body>
  <h1>Text Miring di HTML</h1>
  <p>
    Gunakan <i>teks miring</i> untuk memberikan penekanan pada teks,
    sehingga akan <em>menarik perhatian</em> pembaca. Biasanya
    digunakan pada <i>istilah asing</i> atau kata serapan dari 
    <em>bahasa daerah</em>.
  </p>
</body>
</html>

Garis Bawah pada Teks

Garis bawah biasanya digunakan untuk menandai teks yang disisipkan atau teks yang memiliki arti penting dibandingkan teks normal lainnya. Garis bawah di HTML dapat kita buat dengan tag u (underline) atau juga tag ins (insert).

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Garis Bawah di HTML</title>
</head>
<body>
  <h1>Garis Bawah di HTML</h1>
  <p>
    <u>Text formatting itu penting</u>, karena dapat membuat teks terlihat
    lebih menarik dibandingkan <del>text biasa</del> <ins>plain text</ins>.
  </p>
</body>
</html>

Pada contoh di atas, kita menggunakan tag del untuk membuat teks tercoret. Lalu diikuti dengan teks yang ditambahkan tag ins (insert).

Teks Tercoret

Teks tercoret memiliki arti teks yang dihapus. Biasanya untuk memberitahu pembaca bahwa teks tersebut tidak dipakai atau dihapus. Tag untuk membuat teks tercoret di HTML adalah tag s (strikethrough) atau bisa juga dengan tag del (delete).

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Tercoret di HTML</title>
</head>
<body>
  <h1>Text Tercoret di HTML</h1>
  <p>
    Coretlah teks yang tidak <s>dibutuhkan</s> terpakai, ini bisa memberitahu 
    pembaca tentang perbaikan dari teks tersebut. Kadang juga teks <del>tercoret</del> 
    <ins>yang dicoret</ins>, diperbaiki dengan menambahkan teks dengan garis bawah.
  </p>
</body>
</html>

Pangkat di HTML

Pangkat biasanya digunakan pada rumus. Ada dua jenis pangkat yang bisa dibuat di HTML, yakni pangkat yang berada di atas (superscript) dan pangkat di bawah (subscript). Tag untuk membuat pangkat di HTML adalah tag sup dan sub.

  • sup untuk membuat pangkat di atas
  • sub untuk membuat pangkat di bawah

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Membuat Pangkat di HTML</title>
</head>
<body>
  <h1>Membuat Pangkat di HTML</h1>
  <p>
    Rumus luas persegi adalah S<sup>2</sup>, di mana <i>S</i> adalah sisi dari 
    persegi. Lalu O<sub>2</sub> adalah rumus kimia dari oksigen.
  </p>
</body>
</html>

Marker untuk Teks

Marker bisanya digunakan untuk menandai teks yang penting atau kata kunci yang penting. Marker di HTML dapat kita buat dengan tag mark.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Membuat marker teks di HTML</title>
</head>
<body>
  <h1>Membuat marker teks di HTML</h1>
  <p>
    Marker biasanya digunakan untuk menandai bagian teks yang penting.
    Kalau di dunia nyata, kita <mark>menggunakan stabilo</mark> untuk 
    membuat marker.
  </p>
</body>
</html>

Warna default marker adalah kuning. Warna ini bisa kita ubah dengan style CSS.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Membuat marker teks di HTML</title>
</head>
<body>
  <h1>Membuat marker teks di HTML</h1>
  <p>
    Marker biasanya digunakan untuk menandai bagian teks yang penting.
    Kalau di dunia nyata, kita <mark style="background-color: pink">menggunakan stabilo</mark> untuk 
    membuat marker.
  </p>
</body>
</html>

Maka hasilnya, marker akan berwarna pink:

Teks Formatting untuk Komputer

Selain dari teks formatting di atas, ada juga teks formatting yang khusus untuk menandai teks yang berasal dari komputer. Berikut ini beberapa tag yang digunakan untuk memformat teks dari komputer:

  • code untuk menandai bagian dari kode program;
  • samp untuk menandai output dari program komputer;
  • kbd untuk menandai tombol keyboard;
  • var untuk menandai sebuah variabel;
  • pre untuk preformatting teks.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Formatting untuk Teks dari komputer</title>
</head>
<body>
  <h1>Text Formatting untuk Teks dari komputer</h1>
  <p>
    Perintah javascript untuk menampilkan teks ke console adalah
    <code>console.log()</code>. Kita juga bisa menampilkan isi variabel
    dengan fungsi ini. Misalkan kita punya variabel <var>name</var>,
    maka kode programnya bisa ditulis seperti ini:

    <pre>
      var name = "Zulma Blog";
      console.log(name);
    </pre>

    Maka hasil outputnya: <samp>Zulma Blog</samp>
  </p>
  <p>
    Untuk menjalankan ulang program, lakukan refresh dengan menekan tombol
    <kbd>F5</kbd>
  </p>
</body>
</html>

Menggabungkan Format

Apakah format teks dapat digabungkan? Misalkan kita ingin membuat teks tebal dan garis bawah, apakah bisa? Tentu saja bisa. Caranya: Ya tinggal dipakai saja tag-tagnya, misal mau menggabungkan bold dengan underline. maka kita tinggal pakai tag b dan u.

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Penggabungan Format Teks di HTML</title>
</head>
<body>
  <h1>Penggabungan Format Teks di HTML</h1>
  <p>
    Penggabungan format teks bisa dilakukan dengan menuliskan tag-tag yang
    akan dipakai. Misalkan <b><u>tebal dan garis bawah</u></b>, maka kita
    tinggal pakai tag <b>b</b> dan tag <b>u</b>.
  </p>
</body>
</html>

Dalam menggabungkan format, kamu perlu memperhatikan tag mana yang ditulis duluan dan yang terakhir. Jangan sampai salah menutup. Yang dibuka duluan, harus ditutup terakhir. Ingatlah konsep “ibu memasak ubi”:

Teks formatting akan sering kita pakai dalam membuat konten di web, pastikan kamu mengingat tag-tag yang digunakan untuk teks formatting.

Conclusion

Pada pertemuan hari ini, kita sudah belajar beberapa tag:

  • p untuk membuat paragraf;
  • hr untuk membuat garis lurus;
  • br untuk membuat baris baru;
  • div untuk membuat paragraf di luar artikel atau layout;
  • pre untuk membuat paragraf dengan format yang sudah ditentukan.

Ini adalah tag-tag dasar yang perlu diingat dalam membuat paragraf di HTML. selain itu Hal yang perlu kamu ingat lainnya adalah tag-tag untuk membuat heading, yakni dimulai dari h1 sampai h6.