Tag sub dan Tag sup pada HTML
Subscript atau Superscript yaitu teks yang nampak lebih kecil dari teks biasa.
Subscript atau Tag sub adalah Teks yang muncul setengah karakter sedikit di bawah baris teks normal dan dalam ukuran font yang lebih kecil. Teks subscript dapat digunakan untuk rumus kimia, seperti H2O ditulis sebagai H2O.
Contoh penulisan tag sub.
<!DOCTYPE html><html><head>
<title> Tutorial Tag Sub </title></head>
<body>
<p>Rumus kimia Asam Sulfat adalah H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>
Superscript atau Tag sup biasanya digunakan untuk penulisan angka pemangkatan dalam matematika seperti 2 pangkat 3 (23).
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title> Tutorial Tag Sup</title>
</head>
<body>
<p>Penggunaan supscript</p>
<p>2<sup>3</sup> x 2<sup>2</sup> = 36</p>
</body>
</html>Tag hr pada HTML
Tag hr adalah singkatan dari Horizontal Rule, biasanya digunakan untuk membuat garis yang ditujukan untuk memisahkan bagian dokumen.
Tag <hr> termasuk empty tag atau tag kosong yang tidak memerlukan penutup tag.
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title> Belajar Tag hr </title>
</head>
<body>
<p> ini dokumen pertama </p>
<hr>
<p> ini dokumen kedua </p>
</body>
</html>
Memodifikasi tag hr sebaik menggunakan style ( Cascading Style Sheets ) salah satu yang masih didukung html 5
· color : atribut color digunakan untuk memberikan warna untuk garis yang dibuat menggunakan tag <hr>.
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title> Tutorial hr dengan atribut color</title>
</head>
<body>
Tutorial
<hr color="red">
Komputer
<hr color="blue">
Grafis
<hr color="pink">
</body>
</html>
· width : atribut width digunakan untuk mengatur lebar garis dan bisa memberikan nilai satuan pixel atau %
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title> Tutorial hr dengan atribut width</title>
</head>
<body>
Tutorial
<hr color="red" width="25%">
Komputer
<hr color="green" width="75%">
Grafis
<hr color="blue" width="50%">
</body>
</html>
· noshade : atribut noshade digunakan untuk menghapus bayangan dari garis. ini tidak memiliki nilai
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title> Tutorial hr dengan atribut noshade</title>
</head>
<body>
Tutorial
<hr width="25%" noshade>
Komputer
<hr color="blue" width="50%">
Grafis
<hr color="pink" width="75%" noshade></body>
</html>
· size : atribut size digunakan untuk mengatur ukuran garis dan memiliki nilai satuan pixel atau %
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title> Tutorial hr dengan atribut size</title>
</head>
<body>
Tutorial
<hr width="25%" noshade size="20%">
Komputer
<hr color="blue" width="50%" size="50%">
Grafis
<hr color="green" width="75%" size="90%" noshade>
</body>
</html>
· align : atribut align digunakan untuk mengatur posisi garis (kiri, kanan atau tengah). Posisi standarnya adalah tengah.
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title> Tutorial hr dengan atribut align</title>
</head>
<body>
Tutorial
<hr width="15%" noshade size="20%" align="right">
Komputer
<hr color="red" width="50%" size="50%">
Grafis
<hr color="green" width="75%" size="90%" noshade align="left">
</body>
</html>Atribut align pada HTML
Atribut align adalah atribut yang menentukan perataan teks.
ada beberapa macam nilai atribut align sebagai berikut.
- center : membuat seluruh teks ke tengah halaman web, penulisannya align=”center”
- left : membuat seluruh teks ke sisi kiri halaman web, penulisannya align=”left”
- right : membuat seluruh teks ke sisi kanan halaman web, penulisannya align=”right”
- justify : meregangkan baris sehingga setiap baris memiliki lebar yang sama ( seperti dikoran dan majalah ), penulisannya align=”justify”
Atribut align dapat digunakan dengan beberapa tag seperti di bawah ini:
tag heading
<h1 align="right"> .. </h1>
tag paragraph
<p align="right" > ... </p>
tag Horizontal Rule
<hr align="right">
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title> Belajar atribut align </title></head>
<body>
<h1 align="center"> PROKLAMASI </h1>
<p align="right">
Djakarta, 17 Agustus 1945 </p>
<hr align="center">
<p align="center">
Teks Proklamasi
</p>
<p align="justify">
PROKLAMASI<br>
Kami bangsa Indonesia dengan ini menyatakan kemerdekaan Indonesia.<br>
Hal-hal yang mengenai pemindahan kekuasaan dan lain-lain diselenggarakan dengan cara seksama
dan dalam tempoh yang sesingkat-singkatnya.<br>
Jakarta, 17-8-1945<br>
Atas nama bangsa Indonesia<br>
Soekarno/Hatta<br>
(Tanda tangan Soekarno)<br>
(Tanda tangan Hatta)<br></p>
</body>
</html>
Dalam pengembangan web tidak disarankan menggunakan atribut align, sebaiknya menggunakan style.
Tag bold pada HTML
Tag b adalah tag yang digunakan untuk membuat hurf tebal tanpa menyampaikan makna apapun hanya sebuah teks yang berformat tebal . tag <b> bisa berguna dalam abstrak artikel yang diawal artikel diatur dalam teks tebal.
Penulisan tag tebal di buka dengan tag <b> dan ditutup menggunakan </b>
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title> Tutorial tag b </title>
</head>
<body>
<p>
Teks normal
</p>
<p>
<b>huruf menjadi tebal</b>
</p>
</body>
</html>Tag i dan tag em pada HTML
Tag i adalah tag yang digunakan untuk menampilkan huruf menjadi teks miring. cara penggunaannya di tulis dengan tag pembuka <i> dan ditutup tag penutup </i>. tag i berasal dari kata italic ( miring )
kita juga bisa membuat teks miring menggunakan tag <em>, kedua tag memiliki fungsi yang sama, tetapi tag em adalah tag frasa, yang diterjemahkan sebagai teks yang ditekankan.
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title> Tutorial Membuat Teks miring dengan tag i</title>
</head>
<body>
<em> Membuat Teks miring menggunakan tag em </em>
<br />
<i>Teks miring menggunakan tag i</i>
</body>
</html>
Pada HTML 5 mesikpun tag <i> dapat juga membuat teks miring, namun dianjurkan menggunakan tag <em>.
Published: Seno Adjie.
0 Komentar