Sekilas Tentang Html
1. Pengenalan Html
Sebelum kita bahas lebih detail tentang CSS dan berbagai hal yang berkaitan dengan style tersebut, seperti kata pepatah “tak kenal maka tak saying”, maka ada baiknya jika kita sedikit belajar lagi tentang bahasa dasar dalam pembuatan dokumen web yang dapat dibuat menggunakan CSS yaitu HTML. HTML atau Hypertext Markup Language adalah sebuah protokol yang digunakan untuk membuat format suatu dokumen web yang mampu dibaca dalam browser dari berbagai platform komputer manapun. Sifat dari bahasa HTML ini adalah client script dimana dokumen tersebut dapat dibuka di dalam komputer stand alone yang tidak membutuhkan server untuk dapat menampilkannya di dalam browser. Dokumen HTML merupakan file yang pada umumnya ber-esktensi .htm atau .html dimana bahasa HTML tersebut tersusun atas tag atau syntax yang berformat <isi tag>.
Adapun aturan penulisan HTML tersebut adalah :
a. Dalam penulisannya, tag HTML diapit dengan dua karakter kurung siku (angle bracket) “<” dan “>”
b. Tag HTML secara normal selalu berpasangan, contoh : <div> dan </div>
c. Tag HTML pertama dalam suatu pasangan adalah tag awal, dan tag kedua merupakan tag akhir, contoh : <index> akan diakhiri dengan </index>.
d. Tag HTML tidak case sensitive dimana tag dengan huruf kecil sama dengan tag dengan huruf besar, contoh : <b> sama dengan <B>
e. Jika dalam suatu tag terdapat tag lagi, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Contoh : <b><i> huruf tebal dan miring </i></b>
f. Penulisan script HTML selalu diawali dengan <html> dan diakhiri dengan </html>
Secara teknis web browser akan melakukan penerjemahan dokumen untuk ditampilkan dalam bentuk html jika dokumen tersebut terdapat diantara tag <html> dan </html>. Ada baiknya dalam penulisan HTML menggunakan huruf kecil untuk menghadapi HTML generasi berikutnya (rekomendasi dari W3C untuk HTML 4.0 dan XHTML)
Dalam HTML struktur dibagi menjadi dua bagian yaitu :
a. Bagian Kepala (head)
Bagian ini memuat informasi mengenai kepala dokumen
b. Bagian Badan (body)
Bagian ini memuat informasi mengenai badan dokumen
Adapun struktur utama penulisan dalam HTML adalah :
<html>
<head>
<!—- Bagian Head --!>
</head>
<body>
<!—- Bagian Body --!>
</body>
</html>
Sedangkan pembuatan dokumen web menggunakan HTML pun sangat mudah karena anda dapat membuatnya menggunakan program editor standar Windows seperti Notepad dan menuliskan bahasa dan aturan HTML dan kemudian menyimpannya dalam ekstensi .htm atau .html.
Untuk menggunakan program notepad dapat dipilih lewat menu Start – Program Files – Accessories – Notepad. Kemudian ketikkan kode html anda seperti contoh berikut :
Gambar Script html dalam program notepad
Kemudian simpan dengan memilih menu File – Save As, dan simpan dengan ekstensi .html atau .html
.png)
Gambar Menyimpan dokumen dengan ekstensi .html
Setelah itu tampilan hasil dokumen html dari script yang telah dibuat tersebut dapat anda lihat menggunakan web browser seperti Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera dan sejenisnya.
.png)
Gambar Dokumen html dilihat dalam web browser Internet Explorer
2. Dokumen Head
Dalam bagian head ini kita dapat meletakkan beberapa tag diantara <head> dan </head> yaitu :
a. Judul
Merupakan tag yang mendeklarasikan judul dari suatu dokumen HTML. Struktur tag untuk judul ini adalah :
<title>...judul...</title>
b. URL
Merupakan tag yang menyatakan URL asal suatu dokumen HTML. Struktur tag untuk url asal adalah :
<base href=”...”>
c. Link
Merupakan tag untuk menghubungankan antara suatu dokumen dengan dokumen lainnya dalam website yang dibuat. Struktur tag untuk menghubungkan dokumen adalah :
<link href=”...”>
d. Meta
Merupakan tag yang menyatakan suatu meta informasi dalam suatu dokumen HTML. Struktur tag untuk meta informasi adalah :
<meta name=”...” content=”...”>
e. Index
Merupakan tag yang menyatakan bahwa dokumen tersebut diperkenankan di indeks oleh server web. Struktur tag untuk isi index adalah :
<isindex>
f. Style
Merupakan tag yang mendefinisikan style dari dokumen HTML. Struktur tag untuk mendefinisikan style adalah :
<style ahref=”...”>
Contoh penggunaan dalam HTML :
<html>
<head>
<title>Belajar HTML</title>
<link href="global.css" rel="stylesheet" type="text/css">
</head>
<body>
... dokumen html ...
</body>
</html>
3. Atribut Body
Bagian body dalam HTML adalah bagian dimana dokumen web akan terlihat dalam browser. Dalam bagian ini dapat berisi atribut-atribut, aturan dan isi dari dokumen web yang akan ditampilkan. Penulisan atribut body ini biasanya dituliskan sesudah tag “<body” dan sebelum “>” maupun sesudah tag <body> dan sebelum tag </body>. Dalam bagian body tersebut terdapat beberapa atribut yang bisa digunakan. Beberapa atribut tersebut adalah :
a. Warna Latar
Atribut tag untuk mendefinisikan warna latar untuk isi di dalam dokumen web dengan menuliskan “bgcolor=nilai warna”. Contoh :
<body bgcolor=”lime”>
b. Warna Teks
Atribut tag untuk mendefinisikan warna teks untuk isi di dalam dokumen web dengan menuliskan “text=nilai warna”. Contoh :
<body text=”green”>
c. Warna Link
Jika anda memiliki sebuah tombol untuk menghubungkan (link / hyperlink) dalam dokumen web yang anda buat dengan dokumen web lainnya, anda dapat mendefinisikan warna dari tombol link tersebut ketika kita klik dengan menggunakan tag <link=”nilai warna1” alink=”nilai warna2”> contoh :
<body link=”green” alink=”grey”>
Contoh penerapan dalam dokumen html :
<html>
<head>
<title>Dokumen Body</title>
</head>
<body bgcolor="lime" text="green" link="white" alink="grey">
Teks berwarna lime<br>
<a href=#>tombol1</a>
<a href=#>tombol2</a>
</body>
</html>
Dalam browser script diatas akan terlihat dua tombol yaitu tombol1 dan tombol2 dan ketika kita klik tombol tersebut maka akan berubah menjadi warna hijau seperti terlihat pada gambar berikut :
.png)
Gambar Tampilan script dalam browser
4. Format Teks
Dalam dokumen HTML, teks mempunyai bentuk dalam pemformatan dalam dokumen tersebut. Berikut ini adalah beberapa tag beserta fungsinya untuk melakukan pengaturan dan format tampilan teks dalam dokumen HTML.
a. Font
Dalam setting format teks, tag font disini memiliki beberapa macam nilai, diantaranya adalah :
- “face” atau jenis font
- “size” atau ukuran font
- “color” atau warna font
- “style” atau style font
Contoh penulisan syntaknya adalah :
<font face=”verdana” size=”4 px” color=”green” style="background-color:”#0066CC"> teks dokumen </font>
b. Paragraf
Digunakan untuk membuat teks dokumen yang berbentuk paragraf. Syntaknya adalah :
<p>teks dalam paragraf</p>
c. Perataan
Digunakan untuk mengatur perataan teks dalam sebuah paragraph dalam dokumen web yang dibuat, syntaknya adalah :
<align=...>teks
Nilai dari perataan adalah :
- Rata kanan = right
- Rata kiri = left
- Rata tengah = center
- Rata kanan-kiri = justify
d. Preformatted Text
Digunakan untuk mengembalikan format teks ke posisi awal atau posisi default pertama kali sebelum diformat. Syntaks penulisan preformatted teks adalah :
<pre>...</pre>
e. Line break
Line break adalah pemenggalan atau pemutusan kalimat dengan menggunakan garis dengan perintah <hr>. Adapun property <hr> adalah “align” untuk perataan garis, “size” untuk ukuran dari garis, dan “color” untuk warna garis seperti pada contoh berikut :
<hr align=”..." size="..." color="...”>
Dalam pemenggalan kalimat dalam dokumen web selain menggunakan garis horizontal, anda dapat juga menggunakan tag <br /> untuk pemenggalan baris dalam sebuah kalimat. Biasanya tag ini digunakan pada kalimat dalam paragraf.
<p> kalimat satu<br />kalimat dua<br /></p>
f. Komentar
Anda dapat memberikan komentar dalam dokumen web yang tidak akan ditampilkan dalam browser menggunakan perintah :
<!-- Komentar -->
g. Format Heading
Heading dalam HTML sama seperti dalam Ms. Word yaitu format ukuran huruf dalam dokumen HTML. Syntak penulisannya adalah
<H1> Teks Heading </H1>
Teks yang dihasilkan ketika menggunakan script ini adalah ukuran teks menurut level heading yaitu dari level heading 1 <H1> sampai dengan level heading 6 atau <H6>.
Contoh penerapan dalam HTML :
<html>
<head>
<title>budhi web blog system</title>
</head>
<body>
<H1> format teks </H1>
<font face=”verdana” size=”4 px” color=”green” style="background-color:”#0066CC"> format teks</font>
<p align="right">format teks</p>
<hr align="center" size="2" color="red">
<p align="left"> format teks1<br>format teks2<br></p>
<!-- format teks --!>
</body>
</html>
Tampilan dalam browser akan terlihat :
.png)
Gambar Tampilan format font dalam browser
6. Daftar
Penggunaan daftar dalam HTML biasanya digunakan untuk menampilkan informasi-informasi dalam bentuk option.
a. Membuat daftar berurut
Syntak :
<OL>...</OL> : Untuk membuat daftar tak berurutan
<LI>...</LI> : Isi daftar pilihan
b. Membuat daftar tak berurut
Syntak :
<UL>...</UL> : Untuk membuat daftar berurut
<LI>...</LI> : Isi daftar pilihan
Dapat juga anda merubah type daftar menggunakan <ol type=”awalan”> seperti contoh berikut :
<html>
<head><title>penggunaan daftar</title>
<body>
Daftar belanjaan :
<ul>
<li>bawang putih
<li>bawang merah
<li>cabe
</ul>
Yang tidak dibeli :
<ol type=a>
<li>kecambah
<li>daging kuda
<li>daging semut
</body>
</html>
.png)
Gambar Tampilan penggunaan daftar dalam browser
7. Gambar
Gambar atau image dalam halaman Web memegang fungsi yang sangat penting. Selain fungsinya untuk informasi gambar, image juga akan menambahkan unsur artistik yang akan membuat halaman web nampak lebih hidup sehingga akan lebih menarik dari sisi tampilan web yang dibuat. Sintaks penulisannya adalah :
<img src="lokasi-gambar/nama-gambar.tipe">
Sedangkan atribut untuk gambar tersebut berupa :
src : letak atau alamat gambar
alt : alternatif atau alternate gambar
width : lebar gambar
height : tinggi gambar
Contoh:
<img src=”C:/Documents and Settings/AllUsers/
Documents/My Pictures/Sample Pictures/sunset.jpg”>
8. Hyperlink
Hyperlink atau link dalam HTML berfungsi untuk menghubungkan antara halaman web atau dokumen satu dengan lainnya agar saling terhubung. Syntak dasar penulisannya adalah :
<a href=” lokasi/nama.tipe”> Teks yang dijadikan link </A>
Link dalam HTML dibagi menjadi dua yaitu :
a. Link ke halaman lain
Syntak :
<a href=”alamatfile/nama.ekstensi”> Hyperlink ke halaman </a>
Contoh :
<a href=”c:/web/profil.html”>Profil Perusahaan</a>
b. Link ke servis internet lain
HTTP :
<a href=”http://alamathttp/nama.ekstensi”> Hyperlink ke http </a>
FTP :
<a href=”ftp://alamatftp/nama.ekstensi”> Hyperlink ke ftp </a>
Mailto :
<a href=”mailto:alamat_e-mail”> Hyperlink ke e- mail </a>
9. Warna
Warna dalam html dapat ditentukan dengan tiga cara, yaitu dengan memasukkan nilai warna dalam nama (common name), hexadecimal, dan nilai RGB.
Nilai warna Common name
Anda dapat menentukan warna dengan menggunakan nilai warna common name, yaitu dengan memasukkan warna yang diinginkan dan biasanya menggunakan nilai warna dalam bahasa inggris seperti contoh :
color:blue bgcolor:lime
Nilai warna Hexadecimal
Dengan nilai warna hexadecimal anda dapat menentukan warna dengan menggunakan nilai warna dalam bentuk hexadecimal yang sama dengan yang digunakan jika kita menggunakan html sebagai contoh :
color:#00ffff bgcolor:#00ccff
Nilai warna RGB
Dengan menggunakan nilai warna RGB anda dapat menentukan warna dengan menggunakan nilai RGB dengan memasukkan nilai dari warna werah hijau dan biru (Red, Green, Blue) seperti contoh sebagai berikut :
color:rgb(255,255,204)
10. Table
Tabel merupakan elemen yang terdiri dari sel dan tersusun atas baris dan kolom. Digunakan untuk membuat bentuk tabel yang berisi kolom dan baris,
Syntaknya :
<table>atribut table</table>
Atribut table adalah :
<tr>...</tr> : membentuk baris tabel
<td>...</td> : membentuk kolom table
Table juga memiliki atribut untuk pengaturannya yaitu :
width : lebar table
height : tinggi table
border : tebal garis table
cellspacing : spasi antar sel
cellpadding : spasi dalam sel
align : perataan teks dalam sel
bgcolor : warna background table
Di antaranya tag tersebut dimasukkan perintah pembuatan baris dan kolom. Pembuatan baris, selalu mendahului pembuatan kolom seperti terlihat dalam contoh berikut :
<html>
<head><title>membuat table</title></head>
<body>
<table width=300 height=100 border=1 bgcolor=grey>
<tr>
<td width=100>kolom1 baris 1</td>
<td>kolom2 baris 1</td>
</tr>
<tr height=80>
<td>kolom1 baris 2</td>
<td>kolom2 baris 2</td>
</tr>
</table>
</body>
</html>
.png)
Gambar Tampilan script table dalam browser
11. Form
Form dalam HTML dapat digunakan untuk mengirim data melewati web dan kadang juga digunakan sebagai contact form untuk konversi informasi yang di input-kan oleh user ke dalam e-mail. Dalam penggunaan dalam dokumen web, form harus di kaitkan dengan script program yang akan memproses data yang di inputkan oleh user ke dalam form tersebut.
Tag-tag yang digunakan dalam membuat form dengan HTML berupa :
form, input, textarea, select dan option.
Dalam HTML form dalam penulisannya dengan HTML membutuhkan atribut action yang akan menentukan kemana isi dari form yang akan di kirim nantinya. Atribut method akan menentukan tentang bagaimana data dalam form tersebut di kirim yang memiliki nilai get (nilai default) atau post dimana nilai-nilai tersebut adalah nilai yang paling banyak dipakai.
Jadi sebuah elemen form akan terlihat seperti contoh berikut :
<form action="processingscript.ekstensi" method="post"> </form>
Tag input adalah inti dari sebuah form, dimana tag input dapat memiliki sepuluh form dan harus ditutup dengan tanda miring “/” seperti contoh :
- <input type="text" /> adalah textbox standar. Dapat memiliki sebuah atribut value, yang mengatur teks dalam textbox.
- <input type="password" /> sama dengan textbox, namun menampilan tanda bintang yang menggantikan karakter yang diketikkan.
- · <input type="checkbox" /> adalah bentuk checkbox, yang dapat di tampilkan dan tidak oleh user. Tag ini memiliki sebuah atribut checked, yang digunakan dalam format <input type="checkbox" checked="checked" />.
- <input type="radio" /> hampir sama dengan checkbox, namun user hanya dapat memilih sebuah radio button dalam kelompok tersebut. Tag ini juga memiliki atribut checked, yang digunakan sama dengan checkbox.
- <input type="file" /> adalah suatu daerah yang menampilkan file-file dalam komputer seperti ketika anda membuka atau menyimpan dokumen dalam program.
- <input type="submit" /> biasanya berada pada sebuah tombol dimana ketika dipilih maka akan mengirim (submit) form tersebut. Anda dapat mengontrol penampakan text dalam tombol submit (sama seperti dalam tipe button dan reset) dengan atribut value, seperti contoh :
- <input type="submit" value="ini adalah nilai tombol"/>.
- <input type="image" /> adalah sebuah gambar (image) dimana ketika dipilih maka akan mengirimkan form. Tag ini juga membutuhkan atribut src, seperti tag img.
- <input type="button" /> adalah sebuah tombol (button) yang tidak akan melakukan apapun tanpa penambahan kode ekstra lagi.
- <input type="reset" /> adalah sebuah tombol dimana ketika dipilih maka akan mengulang kembali (reset) field dalam form.
- <input type="hidden" /> adalah sebuah field yang tidak akan terlihat dan digunakan untuk melewatkan informasi seperti nama alamat email pada form yang akan dikirimkan.
Sebuah textarea biasanya berupa textbox yang luas yang membutuhkan atribut baris (rows) dan kolom (cols) seperti pada contoh berikut :
<textarea rows="5" cols="20">teks</textarea>
Tag select bekerja dengan tag option dalam pembuatan sebuah drop-down select boxes. Seperti pada contoh berikut :
<select>
<option value="opsi pertama">Option 1</option>
<option value="opsi kedua">Option 2</option>
<option value="opsi ketiga">Option 3</option>
</select>
Ketika form dikirimkan, nilai dari opsi yang terpilih juga akan dikirimkan. Hampir sama dengan atribut checked dari checkbox dan radio button, sebuah tag option juga dapat memiliki atribut selected yang akan digunakan dalam format :
<option value="hewan" selected="selected">kucing</option>
Keseluruhan tag yang disebutkan diatas akan terlihat bagus dalam halaman web, namun jika anda mengaitkan form anda dalam sebuah program form maka perintah yang ada di dalamnya akan diabaikan. Hal ini disebabkan karena filed form tersebut memerlukan sebuah nama (name). Jadi atribut name harus ditambahkan dalam field seperti pada contoh berikut :
<input type="text" name="teks komentar" />
Dalam contoh berikut, form akan bekerja jika terdapat file 'koneksi.php' yang ditetapkan dalam atribut action dalam tag form untuk menangani file dalam form yang dikirimkan)
<html><head>
<title>belajar form</title>
</head>
<body>
<form action="koneksi.php" method="post">
<p>Nama:</p>
<p><input type="text" name="nama" value="nama anda" /></p>
<p>Komentar: </p>
<p><textarea name="komentar" rows="5" cols="20">Komentar Anda</textarea></p>
<p>data:</p>
<p><input type="radio" name="data" value="Laki-laki" /> laki</p>
<p><input type="radio" name="data" value="Perempuan" /> perempuan</p>
<p><input type="submit" value="kirim" /></p>
<p><input type="reset" value="ulangi"/></p>
</form>
</body>
</html>
Tampilan dalam browser akan terlihat seperti gambar berikut :
.png)
Gambar Gambar tampilan form dalam browser
0 Komentar