173
Views
Tag Dasar HTML. Para pertemua kali ini kita akam membahas tentang Tag Dasar HTML. Apa itu Tag, seperti pada tulisan sebelumnya Tag HTML adalah sebuah sebuah teks yang di apik oleh kurung siku <nama tag> yang nantinya akan memberitahukan browser bagaimana situs website akan di tampilkan.
Sekarang kita akan bahas Dasar Tag HTML:
Tag Dasar HTML
1. Tag Heading
Setiap dokumen dimulai dengan Heading. Sobat dapat menggunakan ukuran yang berbeda untuk judul tulisan sobat. HTML juga memiliki enam tingkat Heading, yang menggunakan elemen <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Saat menampilkan judul apapun, browser menambahkan satu baris sebelum dan satu baris setelah judul.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Hasil dari kode di atas seperti ini:
2. Tag Paragraf
Tag <p> menawarkan cara untuk menyusun teks menjadi sebuah paragraf yang berbeda. Setiap paragraf teks harus berada di antara tag pembuka <p> dan penutup </p> seperti contoh di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Hasil dari kode di atas seperti ini:
3. Tag Line Break
Setiap kali sobat menggunakan tag <br />, apapun yang mengikutinya dimulai dari baris baru berikutnya. Tag ini adalah contoh elemen kosong, di mana sobat tidak perlu membuka dan menutup Tag, karena tidak ada yang masuk diantara keduanya.
Tag <br /> memiliki spasi antara karakter br dan garis miring. Jika sobat menghilangkan spasi ini, browser lama akan mengalami kesulitan merender jeda baris, sedangkan jika sobat melewatkan karakter garis miring dan hanya <br> itu tidak valid di XHTML (meskipun hasilnya masih sama).
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Hasil:
4. Menengahkan Konten
Sobat bisa menggunakan <center> untuk meletakkan konten apapun di tengah halaman atau table cell.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
Hasilnya:
5. Garis Horizontal
Garis horizontal digunakan untuk memisahkan bagian dokumen secara visual. Tag <hr /> membuat garis dari posisi saat ini dokumen ke margin kenan dan memutus garis yang sesuai.
Misalnya, sobat ingin memberi garis di antara dua paragram seperti pada contoh ini:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
Hasilnya:
6. Preserve Formatting
Terkadang, sobat ingin teks mengikuti format persis seperti yang di tuliskan di dokumen HTML. Dalam kasus ini, sobat dapat menggunakan Tag <pre> yang telah diformat sebelumnya.
Teks apapun di antara Tag <pre>….</pre> penutup akan mempertahankan pemgormatan dokumen asli yang di tulis.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
Hasil:
Silahkan coba ketik ulang kodenya tampa menggunakan Tag <pre> dan lihat apa yang terjadi pada dokumen tersebut.
0 Comments