Skip to main content

A.3.1. Format Teks

A.3.1.1. Membuat Format Judul Dengan Heading Tag​

Untuk membuat sebuah format judul di dalam halaman web, kita bisa menggunakan sebuah tag pada HTML yaitu heading tag. Terdapat 6 jenis heading tag, dimana semakin besar nilai angka yang dituliskan di dalam tag maka akan semakin kecil pula heading yang di hasilkan di halaman web.

Mari kita langsung praktik saja, kita siapkan sebuah folder bebas saja namanya sesuka hati temen-temen ya. Disini penulis akan membuat folder sesuai dengan chapter nya saja dan buka dengan menggunakan IDE nya masing-masing.

Setelah folder dibuat, selanjutnya kita tambahkan file baru yang kita beri nama bebas saja ya sesuai dengan preferensi temen-temen, nantinya kita akan menuliskan kode-kode HTML di dalamnya.

Nah jika kita memakai Visual Studio Code sebagai IDE atau tempat ngoding kita bisa membuat struktur dokumen dengan cara mengetikan karakter ! lalu tekan enter

Silahkan temen-temen copy code di bawah ini atau bisa mencoba tips diatas ya:).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A.3.1.1 Heading Tag</title>
  </head>

  <body></body>
</html>

Setelah struktur dokumen dibuat, selanjutnya kita akan coba membuat format judul pada halaman web kita. Untuk membuat sebuah format judul pada halaman web kita, kita cukup memakai tag <h1-6>konten disini</h1-6> yang di letakan di dalam tag <body>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A.3.1.1 Heading Tag</title>
  </head>

  <body>
    <!-- Penggunaan Heading Tags -->
    <h1>Ini Adalah Heading 1</h1>
    <h2>Ini Adalah Heading 2</h2>
    <h3>Ini Adalah Heading 3</h3>
    <h4>Ini Adalah Heading 4</h4>
    <h5>Ini Adalah Heading 5</h5>
    <h6>Ini Adalah Heading 6</h6>
  </body>
</html>

Pada kode diatas kita membuat judul dari mulai judul 1 sampai judul 6 menggunakan heading tag yang ada pada HTML dan mengisi konten di dalamnya dengan tulisan Ini Adalah Heading 1-6 .

Sebelum lanjut penulis menyarankan menginstall ekstensi di dalam VsCode yang bernama Live Server terlebih dahulu. Untuk cara installasinya, silahkan merujuk ke tautan: https://www.geeksforgeeks.org/how-to-enable-live-server-on-visual-studio-code/

Untuk melihat hasilnya kita bisa klik kanan pada workspace nya > lalu Open with Live Server dan nantinya akan terbuka sebuah halaman web di dalam web browser yang menampilkan hasil dari kode HTML kita.

Output

Dan boom! format judul dari mulai heading 1 sampai heading 6 sudah berhasil dibuat. Silahkan temen-temen lakukan perubahan pada isi konten-nya untuk latihan.

A.3.1.2. Membuat Paragraf Dengan Tag p​

Selain membuat format judul kita juga bisa membuat sebuah paragraf dengan menggunakan <p> tag pada HTML. Silahkan buat file HTML baru dengan nama bebas ya menyesuaikan preferensi temen-temen saja, lalu buatlah sebuah struktur HTML seperti pada pembahasan sebelumnya.

Untuk membuat sebuah paragraf kita bisa menggunakan tag <p> yang diletakan di dalam <body> seperti pada kode di bawah ini: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A.3.1.2 Paragraph Tag</title>
  </head>

  <body>
    <!-- Penggunaan tag `<p>` -->
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi
      doloribus asperiores porro ea saepe nobis quibusdam, dolore fugiat
      accusamus sequi!
    </p>
  </body>
</html>

Untuk melihat hasilnya, kita bisa klik kanan pada worksopace lalu pilih Open with Live Server. Setelahnya akan terbuka tampilan hasil kode kita di dalam web browser.

Output

A.3.1.3. Tag strong​

Tag <strong> pada HTML digunakan untuk membuat format cetak tebal pada teks. Cara menggunakannya sangat mudah, kita cukup mengapit sebuah kata atau kalimat yang kita ingin highlight atau di cetak menjadi tebal.

Silahkan copy file sebelumnya lalu rename file nya dan coba kita highlight sebuah kata, disini kata nya bebas saja ya,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A.3.1.3 Strong Tag</title>
  </head>

  <body>
    <!-- Penggunaan tag `<strong>` di dalam tag `<p>`. -->
    <p>
      Lorem ipsum dolor sit, amet <strong>consectetur</strong> adipisicing elit.
      Eligendi doloribus asperiores porro ea saepe nobis quibusdam, dolore
      fugiat accusamus sequi!
    </p>
  </body>
</html>

Output dari kode diatas akan membuat kata consectetur ter-highlight atau formatnya di cetak tebal di dalam halaman web.

Output

A.3.1.4. Tag em​

Tag <em> atau emphasis adalah tag yang digunakan untuk membuat penekanan pada teks. Hasilnya adalah teks yang di beri penekanan akan di cetak miring pada halaman website. Contohnya adalah sebagai berikut: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A.3.1.4 Em Tag</title>
  </head>

  <body>
    <!-- Penggunaan tag `<em>`. -->
    <p>
      Tolong <em>jangan lupa</em> untuk membawa kartu ujian masing-masing, saat
      ujian nanti
    </p>
  </body>
</html>

Output dari kode diatas adalah:

Output

A.3.1.5. Tag em VS Tag i​

Mungkin jika dilihat dari segi output pada tampilan yang di hasilkan kedua tag ini sama-sama akan membuat cetak miring pada teks yang di apit, tetapi terdapat perbedaan lho di antara keduanya. Apa sih bedanya🤔? yuk kita bahas.

  • Tag** <i>
    Biasanya _    tag**_ ini biasanya di pakai untuk istilah asing seperti nama buku, judul film dan lain-lain, yang ingin dibuat menjadi miring tanpa memberikan arti semantik tambahan.
  • Tag** <em>
    Kalimat atau kata yang diapit menggunakan _    tag**_ <em> berarti bahwa teks tersebut perlu diberi penekanan (emphasis). Ini memberikan arti semantik bahwa teks tersebut penting dan harus mendapat perhatian khusus dari pembaca.

Untuk lebih lengkapnya temen-temen bisa membaca dokumentasi di MDN Webdocs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em#i_vs._em

Apa itu semantic🤔? jangan khawatir, kita akan membahas ini di chapter A.6. Semantic HTML.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/a-html/chapter-A.3-tags-pada-html/chapter-A.3.1-format-teks