Text formatting yaitu melakukan pengaturan / konfigurasi pada teks yang akan dijadikan isi dari sebuah halaman web. Pengaturan tersebut akan terlihat secara real, sehingga apa yang diinputkan pada dokumen HTML akan diperlihatkan oleh web browser.
Membuat Teks Tebal
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 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML#7</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>
Hasilnya :
Membuat 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 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML#7</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>
Hasilnya :
Membuat Garis Bawah pada Teks
Garis bawah di HTML dapat kita buat dengan tag <u> (underlaine) atau juga tag <ins> (insert).
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML#7</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>
Hasilnya :
Pada contoh di atas, kita menggunakan tag <del> untuk membuat teks tercoret. Lalu diikuti dengan teks yang ditambahkan (insert).
Membuat Teks Tercoret
Tag untuk membuat teks tercoret di HTML adalah tag <s> (strikethrough) atau bisa juga dengan tag <del> (delete).
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML#7</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>
Hasilnya :
Membuat Pangkat di HTML
Tag untuk membuat pangkat di HTML adalah tag <sup> dan <sub>.
<sup> untuk membuat pangkat di atas<sub> untuk membuat pangkat di bawah
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML#7</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>
Hasilnya :
Membuat 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 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML#7</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>
Hasilnya :
Teks Formatting untuk Komputer
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 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML#7</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 = "Rado Simarmata";
console.log(name);
</pre>
Maka hasil outputnya: <samp>Rado Simarmata</samp>
</p>
<p>
Untuk menjalankan ulang program, lakukan refresh dengan menekan tombol
<kbd>F5</kbd>
</p>
</body>
</html>
Hasilnya :
Menggabungkan Format
Dalam menggabungkan format, kita perlu memperhatikan tag mana yang ditulis duluan dan yang terakhir.Yang dibuka duluan, harus ditutup terakhir.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML#7</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>
Hasilnya :
Ingatlah konsep “ibu memasak ubi”
0 komentar:
Posting Komentar