Tag dan Elemen HTML
assalamualaikum wr. wb.
Kita bertemu kembali, waktu lalu saya posting tentang mengenal HTML klik disini. Sekarang kita akan belajar tentang tag-tag yang ada dalam HTML serta elemen HTML...
Tag HTML
Beberapa contoh tag yang terdapat dalam dokumen HTML adalah heading, paragraf, link dan image.
1. Tag heading
Tag heading umumnya digunakan untuk membuat header pada halaman website. Tag untuk heading terdiri dari tag <h1> sampai dengan tag <h6>. Untuk contoh heading dapat dituliskan dengan kode HTML berikut ini :
<html>
<head>
<title>Tag 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>
2. Tag Paragraf
Digunakan untuk membuat teks dalam sebuah paragraf pada dokumen HTML dengan tag <p> yang merupakan tag pembuka dan diakhiri dengan tag penutup </p>. Untuk contoh membuat tag paragraf dapat dituliskan dengan kode HTML berikut ini :
<html>
<head>
<title>Tag Paragraf</title>
</head>
<body>
<p>Ini merupakan contoh paragraf pertama HTML dari sebuah halaman web</p>
<p>Dan ini merupakan contoh paragraf lain HTML dalam sebuah halaman web. Dapat juga ditambahkan dengan beberapa kalimat lain. Satu paragraf terdiri satu atau lebih kalimat.</p>
</body>
</html>
3. Tag Link
Hyperlink atau link (tautan) adalah sebuah teks atau gambar yang jika di klik akan membuat browser membuka halaman HTML lain. Jika sebuah link ditunjuk dengan mouse, biasanya kursor akan berubah menjadi bentuk menyerupai tangan kecil. Untuk membuat link digunakan tag pembuka
<a> dan tag penutupnya </a>. Untuk contoh heading dapat dituliskan dengan kode HTML berikut ini :<html>
<head>
<title>Tag Link</title>
</head>
<body>
Contoh link = <a href="http://vika-skansa.blogspot.co.id/">Ini adalah link</a>
</body>
</html>
Tujuan link ditentukan dalam atribut href.
4. Tag image
Selain bisa menampilkan teks, dokumen HTML bisa juga untuk menampilkan gambar/foto/images. Untuk menampilkan image digunakan tag <img>. Untuk contoh image dapat dituliskan dengan kode HTML berikut ini :
<html>
<head>
<title>Tag Image</title>
</head>
<body>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"><br>
Sumber dari w3school
</body>
</html>
Sumber W3Schools
Elemen HTML
Sebuah elemen HTML terdiri dari tag pembuka dan tag penutup, dengan konten yang dimasukkan diantara kedua tag tersebut.
<Tagname> Isi konten </tagname>
Elemen HTML Bersarang
Semua dokumen HTML terdiri dari elemen bersarang. Contoh dibawah ini mempunyai empat elemen HTML :
<html>
<body>
<h1>Ini adalah konten Heading</h1>
<p>Ini adalah konten Paragraf</p>
</body>
</html>
Keterangan :
1. <html>
Elemen <html> mendefinisikan seluruh dokumen.
Memiliki tag pembuka <html> dan tag penutup </html>.
Unsur kontennya adalah elemen HTML <body>.
2. <body>
Elemen <body> mendefinisikan tubuh / bagian dokumen.
Memiliki tag pembuka <body> dan tag penutup </body>.
Unsur kontennya adalah dua HTML lain yaitu <h1> dan <p>.
3. <h1>
Elemen <h1> mendefinisikan heading.
Memiliki tag pembuka <h1> dan tag penutup </h1>.
Unsur kontennya adalah "Ini adalah konten Heading".
4. <p>
Elemen <p> mendefinisikan paragraf.
Memiliki tag pembuka <p> dan tag penutup </p>.
Unsur kontennya adalah "Ini adalah konten Paragraf".
Sumber W3School
Referensi :
- http://kuliah.imadewira.com/belajar-html-dasar-dasar-html/
- http://www.w3schools.com/
Tidak ada komentar:
Posting Komentar