19 Jan 2017

Belajar HTML : Tag Dasar

HTML Heading Tags

Setiap dokumen selalu di awali dengan judul. Kamu dapat menggunakan beberapa unkuran untuk judul. Pada HTML terdapat 6 tingkatan headings, mulai dari <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>.
Ketika menampilkan heading secara otomatis Web Browser akan menambahkan 1 baris sebelum dan sesudah.

Contoh Penggunaan Heading Tags


<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Heading</title>
</head>
<body>
<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>

Output

HTML Paragraph Tags

<p> tag menawarkan cara untuk membuat paragraf di dalam dokumen HTML. Setiap paragraf harus berada di antara tag pembuka <p> dan tag penutup </p> seperti pada contoh berikut :

Contoh Penggunaan Paragraph Tags


<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Paragraf</title>
</head>
<body>
<p>Ini adalah first paragraph of text.</p>
<p>Ini adalah second paragraph of text.</p>
<p>Ini adalah third paragraph of text.</p>
</body>
</html>

Output

Line Break Tag

Tag <br /> merupakan contoh dari dari sebuah element kosong, karena kamu tidak perlu menggunakan tag pembuka dan tag penutup, karena tidak ada apa pun di antara tag pembuka dan tag penutup.
Tag <br /> memiliki spasi diantara karakter br  dan garis miring. Jika kamu menghiraukan spasi ini maka brower lama akan mengalami masalah dalam merender line break, ketika kamu melupakan garis miring dan hanya menggunakan <br> hasilnya akan tidak valid pada XHTML.

Contoh Penggunaan Line Break Tags


<!DOCTYPE html>
<html>
<head>
<title>Contoh Line Break</title>
</head>
<body>
<p>Halo!<br />
Terimakasih telah mengunjungi Gagal Gaptech<br />
Thanks<br />
DOYOK</p>
</body>
</html>

Output

Centering Content

Kamu dapat menggunakan tag <center> tag untuk membuat semua elemen di dalam tag ini menjadi di tengah halaman atau pada sebuah tabel.

Contoh Penggunaan Centering Content


<!DOCTYPE html>
<html>
<head>
<title>Contoh Centring Content</title>
</head>
<body>
<p>Ini tidak di Tengah</p>
<center>
<p>Ini di Tengah</p>
</center>
</body>
</html>

Output

Horizontal Lines

Tag <hr /> digunakan untuk membuat garis pada dokumen html.
Tag <hr /> ini hampir sama seperti dengan tag <br>. Untuk lebih jelasnya lihatlah contoh di bawah ini :

Contoh Penggunaan Horizontal Line Tags


<!DOCTYPE html>
<html>
<head>
<title>Contoh Horizontal Line</title>
</head>
<body>
<p>Ini paragraf pertama dan seharusnya ada di atas</p>
<hr />
<p>Ini paragraf kedua dan seharusnya di bawah paragraf 1</p>
</body>
</html>

Output

Preserve Formatting

Kadang - kadang kamu ingin menuliskan sebuah teks dengan format yang tepat. Dalam kasus ini, kamu akan belajar menggunakan preformatted tag <pre>.
Setiap teks di antara tag pembuka <pre> dan tag penutup </pre> akan mempertahankan format dari dokumen aslinya.

Contoh Penggunaan Preserve Formatting Tag


<!DOCTYPE html>
<html>
<head>
<title>Contoh Preserve Formatting</title>
</head>
<body>
<pre>
function testFunction( strText ){
   alert (strText)
}
</pre>
</body>
</html>  

Output