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>
</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 documentlatih2.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 Sumatera
isi dari naskah ini adalah bla...bla.. bla....

5

<p>BAB 2
<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 Jawa
<br>
Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Jawa
<br>
<br>
</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
I

Arti
Ditampilkan dengan angka romawi huruf besar

i

Ditampilkan dengan angka romawi huruf kecil

A

Ditampilkan dengan abjad huruf besar

a

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>
</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)

Contoh 3 : (Program definisi list)

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

<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
<table> …. </table>
<caption> ……….. </caption>

Penjelasan
Mendefinisikan table dalam html.
Mendefinisikan tulisan untuk judul table.
Posisi default ada ditengah (align=”center”).
Align=”left -> posisi dikiri, align=”right” ->

<tr> …………. </tr>
<th> ………… </th>

posisi ditengah
Menspesifikasikan baris pada table
Mendefinisikan sel header table. Posisi

<td> ………….. </td>

default ditengah dan huruf tebal.
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>
</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">
</frameset>
</html>
Output frame baris :

Contoh 2 (frame baris) :
<html>
<frameset rows="25%,50%,25%">
</frameset>
</html>

Contoh 3 (frame campuran) :

12

<! Nama file : framemix.html
<html>
<frameset rows=”50%,50%”>
<frame src=”latih1.html”>
<frameset cols=”25%,75%”>
</frameset>
</frameset>
</html>
Output frame campuran :

Contoh 4 (frame navigasi) :
<! Nama file : framenav.html 
<html>
<frameset cols=”120,*” frameborder=1>
<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
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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a Web diktat html

Semelhante a Web diktat html (20)

Mais de SMK Muhammadiyah Kramat

Mais de SMK Muhammadiyah Kramat (14)

Web diktat html