HTML - Pemformatan
Jika Anda menggunakan pengolah kata, Anda harus terbiasa dengan kemampuan membuat teks tebal, miring, atau bergaris bawah; ini hanya tiga dari sepuluh opsi yang tersedia untuk menunjukkan bagaimana teks dapat muncul dalam HTML dan XHTML.
Teks tebal
Apa pun yang muncul di dalam <b>...</b> elemen, ditampilkan dengan huruf tebal seperti yang ditunjukkan di bawah ini -
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks Miring
Apa pun yang muncul di dalam <i>...</i> elemen ditampilkan dalam huruf miring seperti yang ditunjukkan di bawah ini -
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks yang Digarisbawahi
Apa pun yang muncul di dalam <u>...</u> elemen, ditampilkan dengan garis bawah seperti yang ditunjukkan di bawah ini -
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks Teguran
Apa pun yang muncul di dalam <strike>...</strike> elemen ditampilkan dengan coretan, yang merupakan garis tipis melalui teks seperti yang ditunjukkan di bawah ini -
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Font spasi tunggal
Isi dari file <tt>...</tt>elemen ditulis dengan font monospace. Sebagian besar fonta dikenal sebagai font dengan lebar variabel karena huruf yang berbeda memiliki lebar yang berbeda (misalnya, huruf 'm' lebih lebar daripada huruf 'i'). Namun, dalam font monospace, setiap huruf memiliki lebar yang sama.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks Superskrip
Isi dari file <sup>...</sup>elemen ditulis dalam superskrip; ukuran font yang digunakan sama dengan ukuran karakter yang mengelilinginya tetapi ditampilkan setengah tinggi karakter di atas karakter lainnya.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks Subskrip
Isi dari file <sub>...</sub>elemen ditulis dalam subskrip; ukuran font yang digunakan sama dengan karakter yang mengelilinginya, tetapi ditampilkan setengah tinggi karakter di bawah karakter lainnya.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks yang Disisipkan
Apa pun yang muncul di dalam <ins>...</ins> elemen ditampilkan sebagai teks yang disisipkan.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks yang Dihapus
Apa pun yang muncul di dalam <del>...</del> elemen, ditampilkan sebagai teks yang dihapus.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks Lebih Besar
Isi dari <big>...</big> elemen ditampilkan satu ukuran font lebih besar dari teks lainnya di sekitarnya seperti yang ditunjukkan di bawah ini -
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Teks Lebih Kecil
Isi dari <small>...</small> elemen ditampilkan satu ukuran font lebih kecil dari sisa teks di sekitarnya seperti yang ditunjukkan di bawah ini -
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Mengelompokkan Konten
Itu <div> dan <span> elemen memungkinkan Anda untuk mengelompokkan beberapa elemen untuk membuat bagian atau subbagian halaman.
Misalnya, Anda mungkin ingin meletakkan semua catatan kaki pada halaman dalam elemen <div> untuk menunjukkan bahwa semua elemen di dalam elemen <div> berhubungan dengan catatan kaki. Anda kemudian dapat melampirkan gaya ke elemen <div> ini sehingga muncul menggunakan serangkaian aturan gaya khusus.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Elemen <span>, di sisi lain, dapat digunakan untuk mengelompokkan elemen sebaris saja. Jadi, jika Anda memiliki bagian dari kalimat atau paragraf yang ingin Anda kelompokkan, Anda bisa menggunakan elemen <span> sebagai berikut.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Tag ini biasanya digunakan dengan CSS untuk memungkinkan Anda melampirkan gaya ke bagian halaman.