BELAJAR WEB MENGGUNAKAN HTML
WWW atau lebih dikenal dengan web merupakan layanan penyajian informasi diinternet menggunakan kode HTML.Beberapa hal yang perlu diperhatikan dalam penggunaan HTML yaitu:
Dokumen HTML secara mendasar terdiri atas teks informasi, maka terdapat beberapa urutan dalam penulisan sebuah dokumen HTML yaitu:
Berikut contoh sederhana
<html>
<head>
<title> contoh HTML SEDERHANA
<⁄title>
<⁄head>
<⁄body>
<b> huruf tebal<⁄b>
<u> garis bawah<⁄u>
<i> tulisan miring <⁄i>
<sup> tulisan supersript<⁄sup>
<sub> tulisan subscript<⁄sub>
<s> tulisan strikout ⁄ bergaris ditengah<⁄s>
<⁄body>
<⁄html>
untuk mencobanya dapat dituliskan dinotepad dan disave dengan sebuah ekstensi .htm atau .html maka hasil dari tampilan yang telah dibuat tadi dapat dilihat di internet explorer, atau browser lainnya.
Output atau hasil dari program diatas yaitu:
huruf tebal
garis bawah
tulisan miring
kalimat ini adalah tulisan superscript
kalimat ini adalah tulisan subsrcipt
tulisan strikout/bergaris ditengah
Membuat Link
untuk membuat link dapat digunakan tag link yaitu <A HREF="http://www.yahoo.com/"> didalam tag <A HREF> dapat ditambahkan target untuk menentukan letak suatu halaman,untuk menutup digunakan <⁄A> beberapa terget yang digunakan yaitu:
List HTML
list merupakan bentuk umum yang bisa kita gunakan untuk menguraikan daftar sesuatu.
jenis-jenis list dalam HTML:
contohnya:
<dl>
<dt>kopi<⁄dt>
<dd> ibu membuat kopi<⁄dd>
<⁄dl>
Image HTML
file gambar yang umum digunakan untuk Homepage ada tiga jenis. pertama file gif(Graphics Interchange Format), file jpg(joint photogrphic expert group, atau jpeg) dan yang terakhir file bmp(bitmap). diantara ketiganya file bmp memiliki kualitas gambar terbaik, namun berukuran relatif besar sehingga akan menambah beban saat proses loading halaman homepage. gambar gif memiliki suatu kenggulan, yaitu memungkinkan latar transparan.
sebuah gambar juga bisa kita gunakan sebagai link, dengan cara menuliskan tag berikut:<A HREF="http://www.zwani.com/" target="_blank"><IMG SRC="GAMBAR.GIF"><⁄A>.selain itu kita juga bisa memasukkan atribut. perhatikan tag berikut<IMG SRC="nama gambar.gif" border="0" align="right" height="100" width="50" alt="gambar apa ini ya?" hspace="5" vspace="5"> Atribut hspace dan vspace ini mengatur jarak antara gambar dan tulisan yang berada disekitarnya HSPACE mengatur jarak horizontal gambar ketulisan sedangkan VSPACE mengatur jarak vertikal antara gambar dan tulisan. selain gambar, dalam sebuah web juga dapat dimasukkan suara, file suara yang bisa dimasukkan adalah *.wav,*mid,*.au.
ALT disini akan memberikan keterangan tentang gambar yang akan ditampilkan. Juga saat gambar tidak ditampilkan(misalnya gambar yang dipanggil tidak terletak dalam satu dokumen) maka tulisan yang ada pada ALT tersebut yang akan ditampilkan. Tag IMG SRC ini digunakan untuk mencari sebuah file gambar yang berada pada direktori yang sama dengan penyimpanan .htm/.html
Tabel
untuk dapat membuat tabel, minimal memiliki tag <TABLE>, <TR>,<TD> setelah diawali dengan membuka tag table jangan lupa untuk menutup tag table tersebut<⁄TABLE>
tag <TR> digunakan untuk membuat baris<⁄TR> sedangkan tag <TD> digunakan untuk membuat kolom.
dalam mengatur sebuah kolom dapat digunakan CELLSPACING dan CELLPADDING, cellspacing yaitu untuk mengatur jarak antar cell dengan teks dan cellpadding untuk menetukan jarak antara isi cell dengan bordernya. Tag Rowspan="2" digunakan untuk menyatukan dua baris, dan tag Colspan="2" digunakan untuk menyatukan 2 kolom
contoh html sebuah tabel yaitu:
<table border="5" height="50" width="500" bgcolor="skyblue">
<tr>
<td rowspan="2" align="center" vlign="middle">No.<⁄td>
<td rowspan="2" align="center">nama Mahasiswa<⁄td>
<td align="center" valign="middle" colspan="2">nilai<⁄td>
<td align="center" valign="middle" rowspan="2">alamat<⁄td>
<⁄tr>
<tr>
<td>MTK<⁄td>
<td>English<⁄td>
<⁄tr>
<td>1<⁄td>
<td>Badu<⁄td>
<td>65<⁄td>
<td>75<⁄td>
<td>jl.kenangan<⁄td>
<⁄tr>
<⁄table>
maka dihasilkan tampilan seperti berikut
No. nama Mahasiswa nilai alamat MTK english 1 Badu 65 75 jl.kenangan
Form
Form dapat digunakan untuk meminta input dari pengunjung tantang apapun, baik mengisi angket, mengisi polling, mengisi guest book juga mengisi form pembelian barang, semua aplikasi tersebut menggunakan prinsip pembuatan form.
form selalu diawali dengan tag<Form> dan ditutup lagi dengan tag<⁄Form>, diantara tag pembuka dan tag penutup tadi dapat diisi <input> yang jenisnya ada beberapa macam:
Jenis masukan dalam form
Tag text
<input type=”text” name=”var1” size=”15”>
Value pada atribut size menunjukkan besar text box. Disini juga dapat menginputkan password yaitu caranya:
password: <input type="password" name="password" size="15"><br>
Tag Radio
<input type=”radio”>pilihan1
<input type=”radio”>pilihan2
Tag checkbox
<input type=”checkbox”>pilihan1
<input type=”checkbox”>pilihan2
Tag select
<Select size=”1”>
<option>pilihan1
<option>pilihan2
<option>pilihan3
<⁄select>
Tag Button
<input type=”submit”>
<input type=”reset”>
Tag image
<input type=”image” src=”url_image”>
Text area
<textarea cols=”50” rows=”5”><⁄textarea>
contoh code html untuk form yaitu:
nama:<input type="text" name="nama" size="15"><br>
e-mail<input type="text" name="imel" size="15"><br>
komentar<br>
<textarea name="komentar" rows="3" cols="30" wrap="soft"><⁄textarea><br>
<input type="submit" name="name" value="submit"><br>
tampilan dari kode html untuk form tersebut yaitu:
nama:
e-mail
komentar: