Tag HTML dasar merupakan dasar layout dari sebuah pemrograman web. Ini adalah langkah awal para programmer dalam belajar pemrograman web. Tag html yang digunakan sebagai layout nantinya akan dikombinasikan dengan css, javascript hingga ke bahasa pemrograman seperti php, ruby, jsp dan lain sebagainya.
Tag - tag yang terdapat pada HTML sendiri terdiri dari beberapa bagian diantaranya tag dasar yang meliputi tag utama(html,body,p,br); tag untuk pemformatan teks(b,i,u); tag hasil output(code,kbd,samp,tt,pre); tag untuk sitasi(blockquote,acronym); tag entitas karakter(&, ,<,>,",©) dan juga tag untuk list(ol,ul,dt,dir).
Bagian selanjutnya pada tag html juga dapat memiliki suatu atribut. Tag html yang paling sering menggunakan atribut adalah link, tabel, frame maupun form.
Contoh - contoh yang sering digunakan pada pemrograman web:
***Gambar ber-atribut***
<html>
<body background="background.jpg">
<h3>Lihatlah, ada gambar latar belakang!</h3>
<p>Baik file gambar dengan format gif maupun jpg dapat digunakan
sebagai latar
belakang HTML.</p>
<p>Bila gambar yang digunakan lebih kecil dari halaman situs,
gambar akan
ditampilkan berulang-ulang.</p>
<p>
Sebuah gambar dari folder lokal:
<img src="gambar1.gif" width="144" height="50">
</p>
<p>
Gambar dari folder lain:
<img src="../images/gambar2.gif" width="33" height="32">
</p>
<p>
Mengambil gambar dari situs lain:
<img src="www.yahoo.com/images/ie.gif" width="73" height="68">
</p>
</body>
</html>
***Input Nama***
<html>
<body>
<form name="input" action="http://www.w3c.org/form_action.asp"
method="get">
Masukkan nama depan Anda:
<input type="text" name="namadepan" value="Mickey">
<br>Masukkan nama belakang Anda:
<input type="text" name="namabelakang" value="Mouse">
<br>
<input type="submit" value="Submit">
</form>
<p>
Bila Anda meng-klik tombol "Submit", Anda akan mengirim input yang
dimasukkan lewat form di atas ke pemroses yang bernama form_action.asp
di
situs w3c.
</p>
</body>
</html>
***kirim email***
<html>
<body>
<form action="@" method="post" enctype="text/plain">
<h3>Form ini mengirim sebuah e-mail ke W3C.</h3>
Nama<br>
<input type="text" name="nama" value="Nama Anda” size="20">
<br>
Mail:<br>
<input type="text" name="mail" value="Mail Anda" size="20">
<br>
Komentar:<br>
<input type="text" name="komentar" value="Komentar Anda"
size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Perlu diketahui bahwa tidak semua browser mendukung semua tag - tag html di atas. Silahkan untuk mengacu w3c sebagai standar validasi web. Sebagai tambahan bahwa perbedaan tag html dengan xhtml adalah sebagai berikut:
Demikian dasar tag html dan pengembangannya, semoga dengan tutorial ini dapat membantu para pembaca untuk memahami html.
Tag - tag yang terdapat pada HTML sendiri terdiri dari beberapa bagian diantaranya tag dasar yang meliputi tag utama(html,body,p,br); tag untuk pemformatan teks(b,i,u); tag hasil output(code,kbd,samp,tt,pre); tag untuk sitasi(blockquote,acronym); tag entitas karakter(&, ,<,>,",©) dan juga tag untuk list(ol,ul,dt,dir).
Bagian selanjutnya pada tag html juga dapat memiliki suatu atribut. Tag html yang paling sering menggunakan atribut adalah link, tabel, frame maupun form.
Contoh - contoh yang sering digunakan pada pemrograman web:
***Gambar ber-atribut***
<html>
<body background="background.jpg">
<h3>Lihatlah, ada gambar latar belakang!</h3>
<p>Baik file gambar dengan format gif maupun jpg dapat digunakan
sebagai latar
belakang HTML.</p>
<p>Bila gambar yang digunakan lebih kecil dari halaman situs,
gambar akan
ditampilkan berulang-ulang.</p>
<p>
Sebuah gambar dari folder lokal:
<img src="gambar1.gif" width="144" height="50">
</p>
<p>
Gambar dari folder lain:
<img src="../images/gambar2.gif" width="33" height="32">
</p>
<p>
Mengambil gambar dari situs lain:
<img src="www.yahoo.com/images/ie.gif" width="73" height="68">
</p>
</body>
</html>
***Input Nama***
<html>
<body>
<form name="input" action="http://www.w3c.org/form_action.asp"
method="get">
Masukkan nama depan Anda:
<input type="text" name="namadepan" value="Mickey">
<br>Masukkan nama belakang Anda:
<input type="text" name="namabelakang" value="Mouse">
<br>
<input type="submit" value="Submit">
</form>
<p>
Bila Anda meng-klik tombol "Submit", Anda akan mengirim input yang
dimasukkan lewat form di atas ke pemroses yang bernama form_action.asp
di
situs w3c.
</p>
</body>
</html>
***kirim email***
<html>
<body>
<form action="@" method="post" enctype="text/plain">
<h3>Form ini mengirim sebuah e-mail ke W3C.</h3>
Nama<br>
<input type="text" name="nama" value="Nama Anda” size="20">
<br>
Mail:<br>
<input type="text" name="mail" value="Mail Anda" size="20">
<br>
Komentar:<br>
<input type="text" name="komentar" value="Komentar Anda"
size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Nama Penulis: ToPu, Tanggal terbit: 26 Maret 2012
Didukung oleh: Tutorial Pembelajaran,<a href="http://tutorial-pembelajaran.blogspot.com/">Tutorial Pembelajaran</a>
Sampai saat ini perkembangan web sudah sampai pada HTML 5. Beberapa tambahan yang terdapat pada HTML 5 antara lain adalahDidukung oleh: Tutorial Pembelajaran,<a href="http://tutorial-pembelajaran.blogspot.com/">Tutorial Pembelajaran</a>
| <article> | Membuat content artikel |
| <aside> | Membuat sidebar pada halaman web |
| <audio> | Menambahkan file audio pada halaman web |
| <datalist> | Membuat dropdown list |
| <footer> | Membuat area footer pada halaman web |
| <header> | Membuat area header pada halaman web |
| <hgroup> | Heading group, membuat grup untuk beberapa heading |
| <nav> | Membuat area navigasi |
| <source> | Menentukan sumber media |
| <time> | Menampilkan waktu pada halaman web |
| <video> | Menambahkan file Video pada halaman web |
Perlu diketahui bahwa tidak semua browser mendukung semua tag - tag html di atas. Silahkan untuk mengacu w3c sebagai standar validasi web. Sebagai tambahan bahwa perbedaan tag html dengan xhtml adalah sebagai berikut:
- Menggunakan lower case
- Setiap tag pembuka harus diakhiri dengan '/' diikuti tag itu
sendiri - Urutan dari tag harus sesuai (nested)
- Struktur komponen keseluruhan harus format yang benar
- Atribut menggunakan quote
- Penggantian dg fungsi yang sama: 'nama' pada html menjadi 'id'
pada xhtml - Tidak ada atribut 'shorthand'
- Pernyataan DOCTYPE harus dideklarasikan
Demikian dasar tag html dan pengembangannya, semoga dengan tutorial ini dapat membantu para pembaca untuk memahami html.
Ingin mendapatkan artikel seperti ini? Silahkan masukkan alamat email Anda untuk berlangganan.
Privacy guaranteed. We'll never share your info.
