Dasar Tag HTML dan Pengembangannya

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&#8221;
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>

Sampai saat ini perkembangan web sudah sampai pada HTML 5. Beberapa tambahan yang terdapat pada HTML 5 antara lain adalah

<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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s