Pada artikel lain, saya pernah membahas mengenai pengggunaan framewor CodeIgneter untuk pembangunan website, dan saya katakan bahwa pembuatan web tidak terpaku dengan framework ini ataupun bahasa pemrograman PHP. Nah, pada kesempatan kali ini saya akan membahas mengenai HTML.
HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat halaman website dan menampilkan berbagai informasi di dalam sebuah peramban. HTML saat ini merupakan bahasa standar internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML berupa kode tag yang menginstrusikan peramban untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah berkas HTML dapat dibuka menggunakan peramban website seperti Mozilla Firefox atau Microsoft Internet Explorer.
Bahasa HTML dapat ditulis dengan menggunakan berbagai macam aplikasi pengolah kode pemrograman, misalnya notepad++. Kode tag tersebut dapat dituliskan dengan huruf besar ataupun kecil. Berkas HTML disimpan dengan menggunakan format nama_berkas.html atau nama_berkas.htm.
Selanjutnya akan dibahas beberapa hal penting yang ada dalam kode pemrograman HTML.
1. Struktur Penulisan HTML
Berikut ini adalah format standar penulisan tag menggunakan HTML.
<HTML>
<HEAD>
<META>
<TITLE> ......... </TITLE>
</HEAD>
<BODY>
................
</BODY>
</HTML>
Kode tag <HTML> ... </HTML> merupakan tag awal yang menandakan bahwa kode yang digunakan menggunakan bahasa HTML. Kemudian tag <HEAD> ... </HEAD> merupakan tag yang digunakan sebagai kepala dalam program. Tag kepala (HEAD) ini akan terlebih dahulu dieksekusi sebelum tag badan (BODY). Tag HEAD berisi beberapa tag lain, diantaranya adalah <META> dan <TITLE>. Tag <META> merupakan tempat untuk mendeskripsikan informasi yang ada di dalam website.
Tag <TITLE> digunakan untuk memberikan nama judul website ketika dibuka menggunakan peramban. Di dalam tag <HEAD> juga dideklarasikan penggunaan bahasa pemrograman CSS dan javaScript apabila bahasa tersebut digunakan di dalam website. Kode tag <BODY> ... </BODY> merupakan tag yang berisi dengan isi (content) dari suatu halaman website.
2. HTML Heading Heading merupakan salah satu tag HTML yang digunakan untuk mengatur ukuran huruf yang dimasukkan ke dalam website. Tag heading HTML diantaranya adalah <H1>,<H2>,<H3>,<H4>,<H5> dan <H6>. Ukuran tag <H1> merupakan yang terbesar dan <H6> merupakan yang terkecil. Berikut ini adalah contoh penulisan kode HTML dengan menggunakan tag heading.
<H1> Ini adalah heading tipe pertama </H1>
<H1> Ini adalah heading tipe kedua</H1>
<H1> Ini adalah heading tipe ketiga </H1>
3. Paragraf HTML
Paragraf merupakan salah satu tag yang digunakan untuk memudahkan penulisan teks paragraf di dalam website. Tag paragraf ditandai dengan tanda <P> di dalam kode HTML. Berikut ini adalah contoh penggunaan tag paragraf dalam program.
<P> Contoh penulisan dengan menggunakan tag paragraf </p>
<P> Contoh penulisan dengan menggunakan tag paragraf </p>
4. Link HTML
Link merupakan sebuah tag yang berfungsi untuk menghubungkan antar halaman di dalam website. Penggunaan link mampu membuat website tampil lebih interaktif. Berikut ini adalah contoh penggunaan tag link dalam program.
<a href="www.gunadarma.ac.id"> link </a>
Dalam tampilan website, tulisan link tersebut akan muncul dengan sebuah tanda garis bawah sebagai penanda bahwa teks tersebut merupakan sebuah link.
5. Gambar HTML
HTML menggunakan tag <img> yang digunakan untuk menampilkan sebuah gambar di dalam website. Gambar dapat dimasukkan ke dalam website dengan deklarasi nama gambar serta ukuran gambar tersebut yang akan ditampilkan di dalam website. Berikut ini adalah contoh penggunaan tag <img> dalam kode program HTML.
<img src="gunadarma.jpg" width="200" height="200">
HTML merupakan kerangka dasar dalam setiap halaman website yang akan dibuat. Oleh karena itu, dalam website ini HTML digunakan dalam hampir semua bagian halaman website.
6. Form
Form merupakan salah satu bagian penting di dalam website. Penggunaan form akan memudahkan interaksi antara pengunjung dan aplikasi . Berikut ini adalah format pemanggilan form menggunakan HTML.
<form id="form1" name="form1" method="post" action="">
isi elemen form
</form>
................
</BODY>
</HTML>
Kode tag <HTML> ... </HTML> merupakan tag awal yang menandakan bahwa kode yang digunakan menggunakan bahasa HTML. Kemudian tag <HEAD> ... </HEAD> merupakan tag yang digunakan sebagai kepala dalam program. Tag kepala (HEAD) ini akan terlebih dahulu dieksekusi sebelum tag badan (BODY). Tag HEAD berisi beberapa tag lain, diantaranya adalah <META> dan <TITLE>. Tag <META> merupakan tempat untuk mendeskripsikan informasi yang ada di dalam website.
Tag <TITLE> digunakan untuk memberikan nama judul website ketika dibuka menggunakan peramban. Di dalam tag <HEAD> juga dideklarasikan penggunaan bahasa pemrograman CSS dan javaScript apabila bahasa tersebut digunakan di dalam website. Kode tag <BODY> ... </BODY> merupakan tag yang berisi dengan isi (content) dari suatu halaman website.
2. HTML Heading Heading merupakan salah satu tag HTML yang digunakan untuk mengatur ukuran huruf yang dimasukkan ke dalam website. Tag heading HTML diantaranya adalah <H1>,<H2>,<H3>,<H4>,<H5> dan <H6>. Ukuran tag <H1> merupakan yang terbesar dan <H6> merupakan yang terkecil. Berikut ini adalah contoh penulisan kode HTML dengan menggunakan tag heading.
<H1> Ini adalah heading tipe pertama </H1>
<H1> Ini adalah heading tipe kedua</H1>
<H1> Ini adalah heading tipe ketiga </H1>
3. Paragraf HTML
Paragraf merupakan salah satu tag yang digunakan untuk memudahkan penulisan teks paragraf di dalam website. Tag paragraf ditandai dengan tanda <P> di dalam kode HTML. Berikut ini adalah contoh penggunaan tag paragraf dalam program.
<P> Contoh penulisan dengan menggunakan tag paragraf </p>
<P> Contoh penulisan dengan menggunakan tag paragraf </p>
4. Link HTML
Link merupakan sebuah tag yang berfungsi untuk menghubungkan antar halaman di dalam website. Penggunaan link mampu membuat website tampil lebih interaktif. Berikut ini adalah contoh penggunaan tag link dalam program.
<a href="www.gunadarma.ac.id"> link </a>
Dalam tampilan website, tulisan link tersebut akan muncul dengan sebuah tanda garis bawah sebagai penanda bahwa teks tersebut merupakan sebuah link.
5. Gambar HTML
HTML menggunakan tag <img> yang digunakan untuk menampilkan sebuah gambar di dalam website. Gambar dapat dimasukkan ke dalam website dengan deklarasi nama gambar serta ukuran gambar tersebut yang akan ditampilkan di dalam website. Berikut ini adalah contoh penggunaan tag <img> dalam kode program HTML.
<img src="gunadarma.jpg" width="200" height="200">
HTML merupakan kerangka dasar dalam setiap halaman website yang akan dibuat. Oleh karena itu, dalam website ini HTML digunakan dalam hampir semua bagian halaman website.
6. Form
Form merupakan salah satu bagian penting di dalam website. Penggunaan form akan memudahkan interaksi antara pengunjung dan aplikasi . Berikut ini adalah format pemanggilan form menggunakan HTML.
<form id="form1" name="form1" method="post" action="">
isi elemen form
</form>
Berikut ini adalah penjelasan beberapa atribut yang dimiliki form tersebut.
-. id merupakan nama identitas yang akan digunakan sebagai tanda identitas apabila ingin dipanggil dalam program, misalnya pada saat menggunakan javascript() dengan fungsi getElementById().
-. Name merupakan nama dari form yang akan digunakan pada saat akan dilakukan pemrosesan data dari form.
-. Method merupakan cara form melakukan proses pengiriman data. Secara default akan menggunakan parameter POST, tetapi dapat pula digunakan parameter GET.
-. Action digunakan untuk memasukkan file yang berfungsi untuk mengolah data dari form.
-. id merupakan nama identitas yang akan digunakan sebagai tanda identitas apabila ingin dipanggil dalam program, misalnya pada saat menggunakan javascript() dengan fungsi getElementById().
-. Name merupakan nama dari form yang akan digunakan pada saat akan dilakukan pemrosesan data dari form.
-. Method merupakan cara form melakukan proses pengiriman data. Secara default akan menggunakan parameter POST, tetapi dapat pula digunakan parameter GET.
-. Action digunakan untuk memasukkan file yang berfungsi untuk mengolah data dari form.
7. Elemen Form
Form memiliki beberapa elemen yang dapat digunakan sesuai dengan kebutuhannya masing-masing. Berikut ini adalah daftar beberapa elemen yang digunakan dalam form.
-. Elemen TextField, digunakan untuk menerima masukan dari pengguna, berikut ini adalah sintaks dasar elemen textfield.
<input type="text" id="nama" name="nama" />
-. Elemen TextField, digunakan untuk menerima masukan dari pengguna, berikut ini adalah sintaks dasar elemen textfield.
<input type="text" id="nama" name="nama" />
Selain itu, elemen textfield juga dapat menggunakan tipe password. Dengan menggunakan hal ini maka secara otomatis masukan yang dimasukkan pengguna akan menjadi bentuk masukan password dengan tanda bintang. Bentuk sintaks dasarnya adalah sebagai berikut.
<input type="password" id="pass" name="pass">
-. Elemen Hiddenfield, digunakan untuk mengirimkan informasi secara tersembunyi, sintaks dasarnya adalah sebagai berikut.
<input name="proses" type="hidden" id="proses" value="form1">
-. Elemen Textarea, digunakan untuk menerima masukan dari pengguna dalam bentuk teks beberapa baris. Bentuk sintaks dasarnya adalah sebagai berikut.
<textarea name="komentar" id="komentar" cols="45" rows="5"> </textarea>
-. Elemen Checkbox, digunakan untuk memilih data yang lebih dari satu pilihan berdasarkan daftar checkbox. Bentuk sintaks dasarnya adalah sebagai berikut.
<input name="id" type="chekcbox" id="id" value="1" />
-. Elemen Radio Button, digunakan untuk melakukan pemilihan data dengan hanya memilih satu data atau satu pilihan saja. Bentuk sintaks dasarnya adalah sebagai berikut.
<input type="radio" name="hobby" value="coding" id="hobby_0 " />
-. Button , berfungsi untuk melakukan pemrosesan data yang ada di dalam form untuk diolah pada skrip PHP. Bentuk sintaks dasarnya adalah sebagai berikut.
<input type="submit" name="button" id="button"value="kirim">
Naaaahhh... itulah sedikit perkenalan tentang HTML. Bahasa pemrograman HTML mengalami perkembangan sehingga terdiri dari beberapa versi, dari versi 1.0 hingga yang terbaru versi 5. Untuk lebih lanjut bisa dibaca pada artikel ini.
0 komentar:
Posting Komentar