Web diktat html

BAB I

PENGENALAN HTML

HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah

file teks murni yang dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal

sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam browser

web surfer. Dokumen ini umumnya berisi informasi ataupun interface aplikasi di dalam

Internet.

Ada 2 (dua) cara untuk membuat sebuah web page dengan HTML editor atau

dengan editor teks biasa (misal : notepad).

1.1 Definisi Elemen

Dokumen HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi

komponen-komponen dasar pembentuk dokumen HTML. Beberapa contoh elemen

adalah : head, body, table, paragraph, dan list. Elemen dapat berupa teks murni, atau

bukan teks, atau keduanya.

1.2 Definisi Tag

Untuk menandai berbagai elemen dalam suatu dokumen HTML, kita menggunakan tag.

Tag html terdiri atas sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag,

dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan

(misalnya <h1> dengan </h1> atau bisa ditulis dengan <H1> dengan </H1>). Jadi nama

tag bisa ditulis dengan huruf kecil atau huruf besar. Tag yang menjadi pasangan selalu

diawali dengan karakter garing (/,garis miring). Tag yang pertama menunjukkan tag

awal yang berarti awal elemen, dan yang kedua menunjukkan tag akhir, berarti akhir

elemen.

Nama elemen ditunjukkan dengan nama tagnya. Suatu elemen di dalam dokumen

HTML harus ditandai dengan penulisan tagnya yang berpasangan. Ada beberapa

elemen yang tidak mengharuskan tagnya berpasangan, diantaranya adalah :

• Paragraph dengan tag <p>

• Ganti baris – line break dengan tag <br>

• Garis datar – horizontal rule dengan tag <hr>

• List item dengan tag <li>

Ket. : tag sebaiknya ditulis berpasangan.

Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya,

ditulis : <nametag> - </nametag>

1.3 Elemen HTML yang dibutuhkan

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag

<html>, <head>, <body> berikut pasangannya. Setiap dokumen terdiri atas tag head

dan body. Elemen head berisi informasi tentang dokumen tersebut, dan elemen body

berisi teks yang sebenarnya terdiri dari link, grafik, paragraph, dan elemen lainnya.

1

Secara umum dokumen web dibagi menjadi 2(dua) section (bagian), yaitu section head

dan section body. Sehingga setiap dokumen html harus mempunyai pola dasar sebagai

berikut :

<html><head>

…informasi tentang dokumen HTML</head><body>

…informasi yg ditampilkan dalam browser web</body></html>

Setiap dokumen HTML harus diawali dengan menuliskan tag <html> dan tag </html>

di akhir dokumen. Dalam satu dokumen/file hanya ada 1(satu) elemen html.

Contoh program html :

<!—contoh.html --><html><head><title>Judul Halaman</title></head><body>Ini program html pertamaku</body></html>

1.4 Atribut Tag

Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut

digunakan untuk mengubah default pemformatan dokumen dengan tag yang

bersangkutan.

Contoh :

1. <body>, tag tanpa atribut, <body bgcolor=”red”> artinya tag body mempunyai

atribut bgcolor dengan nilai “red”, maka dokumen yang ditampilkan dengan warna

background merah.

2. <table>, tag tanpa atribut, <table border=”1”>, artinya table ditampilkan dengan

menggunakan garis batas (border) tunggal.

Secara umum tag dengan atributnya adalah sebagai berikut :

<nametag atr1=”nilai-atr1” atr2=”nilai-atr2” ….> ….. </nametag>

2

BAB II

TAG-TAG DASAR HTML

Tag dasar berarti elemen dasar. Dokumen HTML secara mendasar akan terdiri dari teks

informasi. Judul atau topic utama dokumen disimpan dalam section/elemen head, disimpan dalam

elemen title, dengan tag <title>…..</title>. Title ini akan ditampilkan pada bagian caption dari

windows browser web. Hanya elemen title saja dari elemen head yang ditampilkan di browser.

Teks informasi ini akan disimpan dalam section/elemen body – di dalam tag <body>

….</body>. Teks disusun dalam paragraph-2 tag <p>. Teks juga mempunyai judul-judul yang

menunjukkan topik-topik atau bagian-bagian dalam dokumen – judul disebut heading. Heading

dalam HTML mempunyai 6 level, yaitu level 1 s/d level 6, dinyatakan dengan tag <h1> s/d <h6>,

dan pasangannya </h1> s/d </h6>.

Contoh-contoh program HTML

Contoh 1 :

<!—latih1.htm <html><head><title>latihan pertamaku</title></head><body><p><font color="blue">Selamat Datang di Program HTML</p>Selamat mencoba program ini<br>Semoga sukses</br></body></html>

Output latih1.htm :

Contoh 2 (menggunakan paragraph pada HTML) :<html><head><title>latihan pakai paragraf</title></head><body><p>Ini adalah paragraf 1</p><p>Ini adalah paragraf 2</p><p>Ini adalah paragraf 3</p></body></html>

3

Output paragraf.html :

Contoh 3 (menggunakan header (H1 s/d H6) dalam HTML):<html><head><title>latihan kedua html</title></head><body><h1 align=center>Ini Header Pertama</h1><h2 align=right>Ini Header Kedua</h2><h3>Ini Header Ketiga</h3><h4>Ini Header Keempat</h4><h5>Ini Header Kelima</h5><h6>Ini Header Keenam</h6></body></html>

Output latih2.htm :

4

BAB III

LINK HTML

Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link

dari satu teks dan /atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen.

Browser web akan menyorot (‘highlight’) teks atau gambar yang diidentifikasi sebagai link dengan

warna dan/atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (disebut hyperlink

atau link).

HTML menggunakan tag <a> untuk membuat suatu link kepada dokumen lain dalam web

dan diikuti dengan href untuk mendefinisikan lokasi link.

<a href=”nama file/alamat file”>…………</a>

3.1 Link Relatif

Dibuat untuk link ke page lain pada computer yang sama. Contoh :

<a href=”latih1.html”>Lanjut ya</a>

<a href=”c:\my document\latih2.html”>Lanjutkan</a>

3.2 Link Absolut

Dibuat untuk link ke web page lain yang berada pada website di Internet.

Contoh :

<a href=http://www.kaligrafi-tegal.com>Toko Kaligrafi Tegal</a>

3.3 Link untuk Window Baru

Link ini untuk melakukan link ke page lain dengan membukanya pada window baru, sehingga

pengunjung tidak harus meninggalkan web site kita.

Contoh :<html><body> <a href="latih1.htm" target="_blank">Latih1</a><p>Membuka window baru</p></body></html>

3.4 Link kebagian lain dalam satu dokumen

Link jenis ini dibuat untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalam

browser web mengharuskan kita melakukan scroll layar ber-ulang-2. Bentuk : <a

href=”#namabagian”>Nama</a>

Contoh :

<html><head><title>Link ke Bagian Lain</title></head><body><h2>Daftar Isi Naskah Nusantara Kuno</h2><a name="top"><a href="#B3">Lihat Bab 3</a></a><p>BAB 1<br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumateraisi dari naskah ini adalah bla...bla.. bla....<br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumatera

5

isi dari naskah ini adalah bla...bla.. bla....<br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumateraisi dari naskah ini adalah bla...bla.. bla....<br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumateraisi dari naskah ini adalah bla...bla.. bla....

<p>BAB 2<br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumateraisi dari naskah ini adalah bla...bla.. bla....<br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumateraisi dari naskah ini adalah bla...bla.. bla....<br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumateraisi dari naskah ini adalah bla...bla.. bla....<br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumateraisi dari naskah ini adalah bla...bla.. bla....<br>Jangan salahkan saya kalau anda tidak tahu apa-apa yach....!</p><a name="B3">Bab 3</a><p>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Jawaisi dari naskah ini adalah bla...bla.. bla....<br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Jawaisi dari naskah ini adalah bla...bla.. bla....<br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Jawaisi dari naskah ini adalah bla...bla.. bla....<br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Jawaisi dari naskah ini adalah bla...bla.. bla....</p><a href="#top">Kembali ke atas</a></body></html>

6

BAB IV

LIST HTML

List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar

sesuatu. HTML mengenal bermacam list, yaitu :

• List dengan nomor (Ordered List)

• List tanpa nomor (Unordered List)

• List definisi (Definition List)

List dengan nomor adalah model daftar yang setiap itemnya diberi nomor, seperti angka latin,

romawi, huruf. Sedangkan list tanpa nomor yang menggunakan daftar itemnya tanpa nomor, seperti

bullet (tanda bulat). List definisi adalah list untuk memberi uraian terhadap suatu item dalam daftar.

Nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam ordered list

Type ArtiI

i

A

a

Ditampilkan dengan angka romawi huruf besar

Ditampilkan dengan angka romawi huruf kecil

Ditampilkan dengan abjad huruf besar

Ditampilkan dengan abjad huruf kecil

Contoh 1 : (Program list berurut dengan nomor)

<html><head><title>Daftar Siswa Web</title></head><body><h2>Daftar siswa pemrograman web</h2><ol type=”I”><li>Suhadi</li><li>Amelia</li><li>Puspitasari</li><li>Heru Hendarto</li><li>M. Soleh</li><li>Damayanti</li></ol></body></html>

<html><head><title>Daftar Siswa Web</title></head><body><h2>Daftar siswa pemrograman web</h2><ol type=A><li>Suhadi</li><li>Amelia</li><li>Puspitasari</li><li>Heru Hendarto</li><li>M. Soleh</li><li>Damayanti</li></ol></body></html>

Output :

7

Contoh 2 : (list berurut tanpa nomor)

<html><head><title>Program List tanpa nomor</title></head><body><h2>Daftar Buah-Buahan</h2><ul><li>Apel</li><li>Jeruk</li><li>Pisang</li><li>Anggur</li><li>Mangga</li></ul></body></html>

Contoh 3 : (Program definisi list)

<html><head><title>Daftar Minuman di Cafe</title></head><body><h3>Daftar minuman</h3><dl><dt>Coffee</dt><dd>Black Hot Drink</dd><dd>White coffee Drink</dd><dt>Milk</dt><dd>White Cold Drink</dd></dl></body></html>

8

BAB V

IMAGE HTML

Sebuah gambar berbicara seribu kata, karena gambar bisa berbicara lebih baik dari

penjelasan yang panjang dan lebar. Gambar di dalam suatu web page merupakan daya penarik bagi

pengunjung suatu website. Umumnya website dilengkapi dengan gambar-gambar untuk membuat

orang tertarik untuk melihat dan membaca isi yang ada di suatu website.

Umumnya browser web dapat menampilkan inline image (gambar yang disajikan

bersamaan dengan teks) yang mempunyai format BMP, GIF, JPEG/JPG. Format-format gambar

lain juga ada yang digabungkan ke dalam browser web, misal format PNG (Portable Network

Graphic). Setiap gambar akan membutuhkan waktu tambahan untuk didownload dan memperlambat

awal penampilan suatu dokumen dalam browser. Karena itu hati-hati memilih gambar dan

menyertakannya ke dalam suatu dokumen. Bentuk format perintah menampilkan gambar pada

HTML adalah :

<img src=”nama-image”>

Contoh program menampilkan gambar

<!—nama file : gambar1.htm -><html><body><p>Ini gambar ke 1<img src="55297.jpg"></p><p>Ini gambar ke 2 <img src="anim-html.gif"></p></body></html>

<!—nama file : gambar2.htm -><html><body><p>Ini Gambarku <img src="anim-html.gif" align=bottom> yaitu gambar ke 1</p><p>Ini gambarku juga <img src="kucing2.bmp" width=300 height=200 align=top> yaitu gambar ke 2</p></body></html>

Output gambar2.htm

9

BAB VI

TABEL HTML

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap

kolom menunjukkan data yang sejenis dan setiap baris yang terdiri atas kolom-kolom menunjukkan

kelompok data dalam satu kesatuan.

Elemen Penjelasan<table> …. </table> Mendefinisikan table dalam html. <caption> ……….. </caption> Mendefinisikan tulisan untuk judul table.

Posisi default ada ditengah (align=”center”).

Align=”left -> posisi dikiri, align=”right” ->

posisi ditengah<tr> …………. </tr> Menspesifikasikan baris pada table<th> ………… </th> Mendefinisikan sel header table. Posisi

default ditengah dan huruf tebal.<td> ………….. </td> Menspesifikasikan kolom pada table atau

mendefinisikan sel data tabel

Contoh 1 :

<!-- file name : coba_tabel.htm -- ><html><body><p>Setiap tabel dimulai dengan tag table.Setiap baris dimulai dengan tag tr.Setiap data dimulai dengan tag td.</p><h4>Satu baris dan satu kolom : </h4><table border=1><tr><td>100</td></tr></table>

<h4>Satu baris dan tiga kolom : </h4><table border=2><tr><td>100</td><td>200</td><td>300</td></tr></table>

<h4>Dua baris dan dua kolom : </h4><table border=4><tr><td>100</td><td>200</td></tr>

<tr><td>300</td><td>400</td></tr></table></body></html>

10

Output :

Contoh 2 :<html><head><title>Daftar Siswa Web</title></head><body><h2 align=center>Daftar siswa pemrograman web</h2><table border=1 bgcolor="99aaff"><caption>Tabelku</caption><tr align=center ><th>NAMA</th><th>UMUR</th></tr><tr><td>Suhadi</td><td align=center>25 th</td></tr><tr><td>Amelia</td><td align=right>20 th</td></tr><tr><td>Puspitasari</td><td>22 th</td></tr><tr><td>Heru Hendarto</td><td>21 th</td></tr><tr><td>M. Soleh</li></td><td>23 th</td></tr><tr><td>Damayanti</td><td>25 th</td></tr></table></body></html>

Output :

BAB VII

FRAME HTML

11

Elemen dalam HTML digunakan untuk membangun web page yang memungkinkan

penampilan beberapa web page ditampilkan dalam satu window browser. Window dalam browser

dibagi menjadi beberapa windows yang disebut frame.

Model ini sering digunakan untuk lebih memperjelas penyajian informasi, dengan menu

sajian selalu ditampilkan.

Sintaks :

<frameset border=# {[rows/cols]}={#,[#,#]}><frame src=”file-name” name=”nama-frame”>

</frameset>

Ada beberapa macam bentuk frame pada HTML, yaitu : frame baris, frame kolom, frame campuran, frame navigasi & frame Inline.

Contoh 1 (frame kolom) :<html><frameset cols="25%,50%,25%"><frame src="latih2.htm"><frame src="latih4.htm"><frame src="latih3.htm"></frameset></html>

Output frame baris :

Contoh 2 (frame baris) :<html><frameset rows="25%,50%,25%"><frame src="latih2.htm"><frame src="latih4.htm"><frame src="latih3.htm"></frameset></html>

Contoh 3 (frame campuran) :

12

<! Nama file : framemix.html<html><frameset rows=”50%,50%”>

<frame src=”latih1.html”><frameset cols=”25%,75%”>

<frame src=”latih2.html”><frame src=”latih3.html”>

</frameset></frameset></html>

Output frame campuran :

Contoh 4 (frame navigasi) :<! Nama file : framenav.html <html><frameset cols=”120,*” frameborder=1>

<frame src=”latih1.html”><frame src=”latih2.html” name=”showframe”>

</frameset></html>

Output frame navigasi :

13

Contoh 5 (frame Inline, yaitu frame dalam page HTML)

<! Nama file : frameinline.html <html><iframe src=”latih4.htm”></iframe></html>

Output :

BAB VIII

FORM DAN INPUT HTML

Tag Form dan input adalah elemen HTML yang digunakan untuk mendapatkan masukan

dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML.

8.1 Jenis Masukkan dalam Form

Jenis masukkan dalam satu dokumen dibedakan menjadi :

• Text, digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server. Nilai yang

dimasukkan dapat berupa angka ataupun teks.

• Radio, menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih.

14

• Check box, menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih.

• List, menyediakan pilihan dalam bentuk list.

• Image, digunakan sebagai pengganti button, berupa button yang berbentuk gambar.

• Text Area, digunakan untuk memasukkan data dalam bentuk teks berupa memo.

• Button, digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form,

diantaranya :

o Submit, digunakan untuk memanggil Url/File, setelah input selesai dimasukkan.

o Reset, digunakan untuk menginisialisasi setiap elemen form.

o Button, digunakan untuk membuat form lebih interaktif untuk memanggil script yang

ada didalam dokumen html.

Setiap jenis masukkan dalam form mempunyai tag-tag sendiri dengan masing-masing atributnya.

a. Tag Text<input type=”text” name=”var1” size=# maxlength=#>Keterangan :- Value pada atribut size menunjukkan besar text box- Value pada atribut maxlength menunjukkan jumlah karakter maksimum yang dapat ditampung

b. Tag Radio<input type=”radio”> pilihan 1<input type=”radio”> pilihan 2<input type=”radio”> pilihan 3

c. Tag Checkbox<input type=”checkbox”> pilihan 1<input type=” checkbox”> pilihan 2<input type=” checkbox”> pilihan 3

d. Tag Select<select size=2><Option> pilihan 1<Option> pilihan 2<Option> pilihan 3</select>Keterangan :Value pada atribut size digunakan untuk menampilkan pilihan pada list lebih dari satu. Default

adalah satu pilihan, secara otomatis maka list berupa list box, yang dapat berlaku seperti drop down

list box.

e. Tag Button<Input type=”submit”><Input type=”reset”>

f. Tag Image<input type="image" src="url_image">

g. Text Area<textarea cols=”50” rows=”5”></textarea>

Pada setiap elemen dapat diberikan nama, dengan memberikan atribut Name, dengan value berupa string

yang mendefinisikan nama elemen. Dalam pemrograman sering disebut sebagai nama variable. Nama

variable sebaiknya mencerminkan fungsi dari variable tersebut.

Contoh penggunaan Tag Text

<! File name : tagtex1.html<html><body><form>Nama :<input type=”text” name=”nama” size=15 maxlength=15><br>Alamat :<input type=”text” name=”alamat” size=25 maxlength=20></form>

15

</body></html>

Output :

<! File name : tagtex2.html<html><body><form>Nama :<input type=”text” name=”nama” maxlength=20><br>Alamat :<input type=”text” name=”alamat” maxlength=25><br><br><input type=Reset value=Submit></form></body></html>

Output :

Contoh penggunaan Tag Checkbox

<! File name : cekbox.html<html><body>Saya suka artis :<form><input type=checkbox name=”Wilson”>Chaterine Wilson<br><input type=checkbox name=”Luna”>Luna Maya<p><input type=reset value=Ulangi></p></form></body></html>

16

Output :

Contoh 1 (penggunaan Tag Radio)

<! File name : radio1.html<html><body><form><input type=radio name=”Sex”>Laki-Laki<br><input type=radio name=”Sex”>Perempuan<p><input type=reset value=Ulangi></p></form></body></html>

Contoh 2<! File name : radio2.html<html><body><form><input type=radio name=”Sex” checked>Laki-Laki<br><input type=radio name=”Sex”>Perempuan<br><input type=radio name=”usia” checked>Dewasa<br><input type=radio name=”usia”>Anak-Anak<p><input type=Reset value=Ulangi></p></form></body></html>

Output Radio2.html

17

Contoh penggunaan tag SELECT

<! File name : seleksi.html<html><body><font size=4 face="Verdana">Pilih Merk Mobil yang anda suka</font><form><select name=mobil><option value=mobil1>Mercedes Benz<option value=mobil2>BMW<option value=mobil3>Honda<option value=mobil4>Toyota</select><input type=Reset value=Ulangi></form></body></html>

Output :

Contoh penggunaan tag Text Area

<! File name : textarea.html<html><body><form>Masukkan Komenter anda :<br><textarea rows=10 cols=16></textarea><br><br><input type=Reset value="Lagi ya...!"></form></body></html>

18

Web diktat html

Documents

Transcript of Web diktat html