Teks yang diformat akan lebih mudah dibaca, karena terdapat penekanan seperti teks tebal, miring, dan garis bawah
Saat kita mencari kata atau kalimat penting. mata kita akan lebih mudah menemukannya dalam teks berformat daripada teks biasa
Oleh karena itu, dalam membuat web. ada baiknya menggunakan format teks
Nah, di dalam HTML terdapat tag-tag yang khusus digunakan untuk pemformatan teks
Apa itu?
Mari berdiskusi
Membuat Teks Tebal
Teks tebal biasanya digunakan untuk memberi penekanan pada teks tertentu, misalnya seperti judul, subjudul, huruf penting, dll
Tag yang digunakan untuk membuat teks tebal dalam HTML adalah tag <b> (tebal) dan tag <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>0. Anda bebas menggunakan apa saja, hasilnya akan sama-sama kental
Contoh
<!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>_
Hasil
Buat Teks Miring
Huruf miring biasanya digunakan untuk menekankan kata atau istilah baru. Teks miring pada HTML dapat dibuat dengan tag <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>1 (miring) dan juga tag <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>2 (penekanan)
Contoh
<!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>
Hasil
Menggarisbawahi Teks
Garis bawah biasanya digunakan untuk menandai teks yang disisipkan atau teks yang memiliki arti penting dibandingkan dengan teks normal lainnya
Garis bawah dalam HTML dapat dibuat dengan tag <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>3 (underlaine) atau juga tag <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>4 (insert)
Contoh
<!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>
Hasil
Pada contoh di atas, kita menggunakan tag <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>5 untuk mencoret teks. Kemudian diikuti dengan teks yang ditambahkan (insert)
Membuat Teks Tergores
Teks yang dicoret berarti teks yang dihapus. Biasanya untuk menginformasikan kepada pembaca bahwa teks tersebut tidak digunakan atau dihapus
Tag untuk membuat teks yang dicoret pada HTML adalah tag <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>6 (coret) atau bisa juga tag <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>5 (delete)
Contoh
<!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>
Hasil
Membuat Peringkat dalam HTML
Peringkat biasanya digunakan dalam formula. Ada dua jenis peringkat yang dapat dibuat dalam HTML, yaitu peringkat di atas (superskrip) dan peringkat di bawah (subskrip)
Tag untuk membuat rank dalam HTML adalah tag <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>8 dan <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>9
- <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>8 untuk membuat peringkat di atas
- <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>_9 untuk membuat peringkat di bawah ini
Contoh
<!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>, dimana <i>S</i> adalah sisi dari persegi. Lalu O<sub>2</sub> adalah rumus kimia dari oksigen. </p> </body> </html>
Hasil
Membuat Penanda untuk Teks
Marker biasanya digunakan untuk menandai teks penting atau kata kunci penting. Penanda dalam HTML dapat dibuat dengan tag <!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>2
Contoh
<!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>
Hasil
Warna standar penanda adalah kuning. Kita bisa mengubah warna ini dengan gaya CSS
Contoh
<!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
Pemformatan Teks untuk Komputer
Selain pemformatan teks di atas, ada juga pemformatan teks yang dikhususkan untuk menandai teks yang berasal dari komputer. Berikut adalah beberapa tag yang digunakan untuk memformat teks dari komputer
- <!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>3 untuk menandai bagian dari kode program;
- <!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>4 untuk menandai output dari program komputer;
- <!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>5 untuk menandai tombol keyboard;
- <!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>6 untuk menandai variabel;
- <!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>7 untuk praformat teks
Contoh
<!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 = "Petani Kode"; console.log(name); </pre> Maka hasil outputnya: <samp>Petani Kode</samp> </p> <p> Untuk menjalankan ulang program, lakukan refresh dengan menekan tombol <kbd>F5</kbd> </p> </body> </html>
Hasil
Menggabungkan Format
Format teks apa yang dapat digabungkan?
Misalnya, jika Anda ingin membuat teks tebal dan bergaris bawah, apakah bisa?
Tentu saja Anda bisa
Jalan
Ya, gunakan saja tag-tag tersebut, misalnya jika ingin menggabungkan bold dengan underline. maka kita cukup menggunakan tag <b> dan <!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> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>3
Contoh
<!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>
Hasil
Dalam menggabungkan format, Anda perlu memperhatikan tag mana yang ditulis pertama dan terakhir
Jangan tutup karena kesalahan
Yang dibuka duluan, harus ditutup belakangan
Ingat konsep "ibu memasak kentang"
Apa berikutnya?
Pemformatan teks akan sering digunakan dalam membuat konten di web, pastikan Anda mengingat tag yang digunakan untuk pemformatan teks