Tag HTML

TAG HTML
HTML(Hypertext Markup Language) merupakan salah

satu format yang digunakan untuk pembuatan aplikasi di
halaman web. Meskipun saat ini sudah banyak aplikasi-
aplikasi yang menawarkan kemudahan dalam pembuatan
halaman web seperti a DreamWeafer ataupun Frontpage,
sebaiknya anda mengenal dan menguasai tag-tag HTML
terlebih dahulu karena mau tidak mau anda akan bekerja
dalam mode editor bilamana akan menyisipkan script program
dalam script HTML.
DASAR DASAR HTML

HTTP(Hypertext Transfer Protocol) merupakan protokol
yang digunakan untuk mentransfer data antara web server ke
web browser. Protokol ini akan mentransfer dokumen-
dokumen web yang berformat HTML. Elemen-elemen yang
terdapat didalam HTML sering disebut sebagai tag.
Elemen HTML biasanya berupa tag-tag yang saling

berpasangan, setiap tag di tandai dengan simbol “ < ” dan “
> ”, dan pasangannya ditandai dengan “ / ” . Misalnya
pasangan dari tag <example> adalah </example>. Selain
tag atau elemen, terdapat juga istilah atribut, yang berfungsi
untuk mengatur tag atau elemen tersebut. Jadi misalnya
elemen <example> bila ditulis dengan atribut-atributnya
adalah sebagai berikut <example atribut1=”nilaiAtribut1”
atribut2=”nilaiAtribut2” …. >. Dalam menuliskan tag-tag
HTML anda tidak perlu khawatir dengan perbedaan huruf
besar maupun huruf kecil karena tag-tag HTML bersifat in-
caseinsensitive.
Sebagai catatan, dalam penulisan pembahasan

mengenai HTML ini mungkin tidak akan selengkap yang anda
harapkan. Namun setidaknya beberapa contoh yang tertulis di
buku ini akan dapat anda pahami. Penjelasan lengkap
mengenai HTML dapat anda baca pada buku khusus yang
membahas tentang HTML.
STRUKTUR DASAR HTML

Sebelum mempelajari HTML, akan terlebih dahulu diulas
mengenai aturan penulisan dalam buku ini. Script dituliskan
1
melalui text editor seperti Notepad, kemudian disimpan
dengan ekstensi .htm atau .html. kemudian untuk melihat
hasilnya langsung melalui web browser, seperti Internet
Exploler atau web browser yang lain dengan mengetikkan
lokasi penyimpanan file HTML anda atau anda simpan pada
root web server sehingga dapat anda panggil dengan nama
komputernya dan nama filenya.
Sebelum menuliskan script-script HTML dan PHP, terlebih

dahulu anda install webServer, php dan mySql. Atau anda
langsung menggunakan AppServ.
Setiap dokumen HTML memiliki struktur dasar sebagai

berikut :
Contoh01.html
<html>
<head>
<title>
-berisi yang akan luncul di bagian judul web browser-
</title>
<head>
<body>
-berisi tentang text, gambar, atau apapun yang
akan ditampilkan di halaman web-</body>
</html>
Hasil dari script diatas adalah sebagai berikut :
title
File dipanggil
melalui address
body
Gb. 1.1:
Struktur dasar
HTML
2
Seperti yang telah anda lihat, tag HTML akan diawali dengan
tag <html> dan diakhiri </html>. Didalam tag html terdapat
bagian header yang tandai dengan tag <head> … </head>
yang mana script yang tertulis pada bagian ini tidak akan tampil
pada web broeser seperti <title> … </title> dan yang lain. Dan
bagian body yang ditandai dengan tag <body> … </body>,
bagian body nantinya adalah bagian yang akan sering anda
gunakan. Dalam bagina body ini anda akan melakukan desain
halaman web yang akan menampung bergai macam format teks
dan gambar.
KODE WARNA
Pengaturan pengunaan warna di halaman HTML, dapat
anda gunakan mode kombinasi dari warna dasar (RED,
GREEN, BLUE) yang mana tiap-tiap kode warna ditampilkan
dua digit nilai hexadesimal. Setiap dua bagian kode mewakili
banyaknya intensitas warna. Supaya lebih jelasnya lihat tabel
dibawah ini:
Table 1.1: Kode Warna

Warna Kode
White #FFFFFF
Black #000000
Red #FF0000
Green #00FF00
Blue #0000FF
Yellow #FFFF00
Magenta #FF00FF
Cyan #00FFFF
PENGATURAN PROPERTI BODY

Pengaturan halaman web dapat anda lakukan pada tag
<body> dengan menambahkan bebrapa atribut didalamnya.
Sebagai contoh adalah mengatur warna latar balakang, warna
teks, warna link, dll.
Atribut elemen body :
Background = lokasi dan nama file (latar belakang image)

Bgcolor = warna (warna latar belakang)
Text = warna ( warna teks)
3
Link = warna (warna link)
Vlink = warna (warna visited link)
Alink = warna (warna active link)
Cobalah script berikut :

Contoh02.html
<html>
<head>
<title>
-berisi yang akan luncul di bagian judul web browser-
</title> <head>
<body bgcolor=”green” text=”blue”>
-berisi tentang text, gambar, atau apapun yang
akan ditampilkan di halaman web-</body>
</html>
Gb. 1.3: Penggunaan elemen pada body.
HEADING, PARAGRAPH, HORISONTAL

RULER DAN BREAK
Tag heading <hx> digunakan untuk memformat judul-
sub judul dari suatu halaman web. Di HTML terdapat enam
buah macam heading dimulai dari <h1> hingga <h6> yang
mana tiap-tiap heading akam mempunyai ukuran sendiri-
sendiri.
Tag paragraph <p> digunakan layaknya pengaturan

sebuah paragraf dalam halaman web. Dalam elemen paragraf
tersebut dapat anda masukkan atribut align = [left / right /
center] yang berfungsi untuk mengatur perataan paragraf. Jika
nilai atributnya adalah left maka paragraf tersebut akan rata kiri,
jika bernilai center maka paragraf tersebut akan rata
4
tengah dan jika bernilai right maka akan rata ke sebalah
kanan.
Tag break <br> berfungsi untuk memberikan baris baru
di halaman web. Tag ini tidak memerlukan penutup seperti tag
yang lain.
Tag horisontal ruler <hr> digunakan untuk memberikan
garis horisontal. Tag ini juga tidak memerlukan penutup. Anda
dapat menambahkan beberapa atribut pada tag ini.
Atribut tag horisontal ruler :

Align = [left / right / center]
Size = pixel (tebal garis)
Width = n% (panjang garis)
Salin script berikut untuk mencoba heading, paragraf,

break dan horisontal ruler. Jangan lupa untuk menyimpannya
dengan ekstensi .html atau .htm. setelah itu cobalah anda ubah
nilai atribut-atributnya dan perhatikan perubahannya.
Contoh03.html
<html>
<head>
<title>
contoh-03
</title>
<head>
<h1> PENGERTIAN HTML </h1>
<hr width=”100%” size=”10” color=”yellow”>
<p align=”center”>
HTML(Hypertext Markup Language) merupakan salah satu
format yang digunakan untuk pembuatan aplikasi di
halaman web.
</p>
<p align=”right”>
Meskipun saat ini sudah banyak aplikasi-aplikasi
yang menawarkan kemudahan dalam pembuatan
halaman web seperti a DreamWeafer ataupun Frontpage,
sebaiknya anda mengenal dan menguasai tag-tag HTML
terlebih dahulu karena mau tidak mau anda akan bekerja
dalam mode editor bilamana akan menyisipkan script
program dalam script HTML. </p>
perangkat yang kita butuhkan untuk belajar web adalah :<br>

Notepad<br>
Php<br>
AppServ
<hr width=”50%” align=”center” size=”2”>
</body>
</html>
5
Hasil tampilannya adalah seperti berikut :
Gb. 1.4: Penggunaan Heading, Paragraf,

Break, Horisontal Ruler
PENGATURAN KARAKTER
Karakter yan terdapat di halama HTML juga dapat anda
atur sesuai dengan desain yang telah anda buat, baik dari
ukuran, jenis maupun warna dengan menggunakan tag
<font> … </font>.
Atribut elemen font :
Size = angka (ukuran huruf)

Color = warna (warna huruf)
Face = jenis huruf (jenis huruf)
Elemen karakter :
<b> … </b> = huruf tebal

<i> …</i> = huruf miring
<u> … </u> = huruf garis bawah
<sub> … </sub> = huruf subscript
<sup> … </sup> = huruf superscript
Tulislah script berikut ini untuk mengetahui penggunaan

tag font dan tag ragam karakter. Dan lihat hasilnya melalui
web browser.
6
Contoh04.html
<html>
<head>
<title>
contoh-04
</title>
<head>
<h1> PENGERTIAN HTML </h1>
<hr width=”100%” size=”10” color=”yellow”>
<p align=”center”>
<font color=”magenta” size=”5” face=”Courier New”>
<b>HTML<sup>(Hypertext Markup
Language)</sup></b> merupakan salah satu
format yang digunakan untuk pembuatan aplikasi di
halaman web.
</font>
</p>
<font color=”red”>
<p align=”right”>
Meskipun saat ini sudah banyak aplikasi-aplikasi
yang menawarkan kemudahan dalam pembuatan
halaman web seperti a <u><sup>DreamWeafer ataupun
Frontpage</sup></u>,
sebaiknya anda mengenal dan menguasai tag-tag
HTML terlebih dahulu karena mau tidak mau anda
akan bekerja dalam mode editor bilamana akan
menyisipkan script program dalam script HTML. </p>
</font>
perangkat yang kita butuhkan untuk belajar web adalah :<br>
<i>Notepad<br>
Php<br>
AppServ</i>
<hr width=”50%” align=”center” size=”2”>
</body>
</html>
7
Gb. 1.5: Pemformatan karakter
LISTING
Elemen listing <li> digunakan untuk menampilkan
informasi dalam bentuk list atau daftar. Di dalam HTML
dikenal dua macam bentuk list yaitu list dengan format bullet
(unordered list <ul>) dan list dengan format nomor (ordered
list <ol>).
Adapun atribut yang terdapat didalam elemen list adalah

:
Type = [1 / A / a / I / i] (untuk list dengan format nomor)
Type = [disc / square / circle] (untuk list dengan format
bullet)
Salin script HTML dibawah ini untuk mencoba tag listing
dengan format unordered list maupun ordered list.
8
Contoh05.html
<html>
<head>
<title>
contoh-05
</title>
<head>
<body bgcolor=”yellow” text=”blue”>
<h1 align=”center” color=”magenta”> Ardhi”ant”
Soft</h1> <hr width=”100%” align=”center” size=”4”
color=”red”> Buku yang sedang kami rancang : <ol
type=”1”>
<li>Microsoft Office :
<ul type=”square”>
<li>MS Word.
<li>MS Exel.
<li>MS Access.
<li>MS Power Point.
</ul>
<li>Programming :
<ul type=”circle”>
<li>Visual Basic.
<li>Visual Foxpro.
<li>Visual C++.
<li>Delphi.
<li>Java.
</ul>
<li>Data Base :
<ul type=”disc”>
<li>SQL Server.
<li>MySQL.
<li>Oracle.
</ul>
<li>Internet dan Web Development :
<ul type=”square”>
<li>HTML.
<li>PHP.
<li>WAP.
<li>Macromedia Dreamweaver.
</ul>
</ol>
</body>
</html>
9
Gb. 1.6: Penggunaan elemen listing.
MENAMPILKAN GAMBAR
Di halam web, anda juga dapat menampilkan gambar
dengan format JPG atau GIF dengan menggunakan tag
<img>. Penulisan tag ini di ikuti dengan beberapa atribut
yaitu :
Src = lokasi dan nama file gambar.

Alt = teks alternatif.
Width = pixel (lebar gambar)
Height = pixel (tinggi gambar)
Align = [top / middle / bottom / left / right] (perataan
gambar)
Border = pixel (garis tepi gambar)
Untuk lebih jelasnya dalam penggunaan tag img,

salinlah script dibawah ini dan amati hasilnya, serta alkukan
perubahan-perubahan pada atribut-atribut di dalam tag img
tersebut.
10
Contoh06.html
<html>
<head>
<title>
contoh-06
</title>
<head>
<body bgcolor=”yellow”>
<img src=”gambarContoh02.gif” align=”middle”
border=”1”> </body>
</html>
Gb. 1.7: Menampilkan gambar ke halaman web.
MEMBUAT LINK
Elemen link difungsikan untuk menghubungkan antara
halaman web yang satu dengan halaman web yang lain atau
ke URL yang lain. Format tag link adalah sebagai berikut :
<a href=”halamanTujuan”>text</a>
HalamanTujuan berisi lokasi dan nama file yang akan

dituju, sedangkan text berisi sebuah teks yang akan
ditampilkan pada halaman web sebagai text link atau
penghubung.
Untuk mencoba membuat link, yang anda perlikan adalah

membuat dua buah file HTML. Sebagai contoh, tulislah script
dibawah ini dan kemudian simpan dengan nama
contoh07a.html.
11
Contoh07a.html
<html>
<head>
<title>
contoh-07a
</title>
<head>
<body bgcolor=”yellow”>
<h2 align=”center”> INI ADALAH HALAMAN AWAL </h2>
<a href=”contoh07b.html”> Menuju Halaman Berikutnya
</a> </body>
</html>
Dan juga tulis script dibawah ini, kemudian simpan

dengan nama contoh07b.html.
Contoh07b.html
<html>
<head>
<title>
contoh-07b
</title>
<head>
<body bgcolor=”green”>
<h2 align=”center”> INI ADALAH HALAMAN TUJUAN </h2>
<a href=”contoh07a.html”> Kembali Ke Halaman Sebelumnya
</a> </body>
</html>
Gb. 1.8a: Halaman awal. Gb. 1.8b: Halaman tujuan
12
MEMBUAT TABEL
Tabel digunakan untuk menampilkan data dalam bentuk
kolom dan baris yang mana data tersebut dimasukkan
kedalam kotak yang disebut sel. Untuk membuat tabel di
halaman HTML, gunakan elemen <table> … </table>.
Elemen tabel berisi properti <tr> … </tr> yang difungsikan
untuk membuat baris (table row) dan properti <td> … </td>
yang dogunakan untuk mengisikan data (table data). Struktur
dasar tabel dapat anda lihat di script berikut ini :
Contoh08.html
<html>
<head>
<title>
contoh-08
</title>
<head>
<body>
<table>
<tr>
<td>baris ke-1, kolom ke-1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
13
Gb. 1.9: Struktur dasar tabel.
Hasil dari script diatas sepertinya memang tidak tampak

selayaknya sebuah tabel, hal ini dikarenakan atribut-atribut
yang terdapat didalam tag table belum diatur sehingga secara
otomatis akan di set dengan nilai defaultnya.
Adapun atribut elemen tabel dalah sebagai berikut :

Caption = teks (judul tabel)
Width = panjang (lebar tabel dalam pixel atau persen)
Height = panjang (tinggi tabel dlam pixel atau persen)
Border = pixel (tebal garis tepi)
Cellspacing = pixel (spasi antar cell)
Cellpadding = pixel (spasi di dalam cell)
Align = [left / center / right] (perataan tabel)
Bgcolor = warna (warna latar belakang tabel)
Selain itu anda dapat mengatur tabel, lebih spesifik anda

juga dapat mengatur kolom dan baris melalui atribut yang
terdapat pada elemen tabel row dan table data.
Atribut table row :

Align = [left / center / right] (perataan baris cell secara
horisontal)
Valign = [top / middle / bottom] (perataan baris cell secara
vertikal)
Bgcolor = warna (warna latar belakang baris)
Atribut table data :

Rowspan = angka (baris yang di-merger oleh cell)
Colspan = angka (kolom yang di-merger oleh cell)
Align = [left / right / center] (perataan horisontal)
14
Valign = [top / bottom / middle] (perataan vertikal)
Width = pixel (lebar cell dalam pixel atau persen)
Height = pixel (tinggi cell dalam pixel atau persen)
Bgcolor = warna (warna latar belakang cell)
Untuk mencoba, salinlah script berikut dan lihat

hasilnya melalui web browser.
Contoh09.html
<html>
<head>
<title>
contoh-09
</title>
<head>
<body>
<table width=”75%” align=”center” border=”1”
cellspacing=”3”> <caption> Tabel percobaan </caption> <tr
bgcolor=”grey”>
<td colspan=”2” align=”center”>hasil
colspan</td> </tr>
<tr align=”right”>
<td bgcolor=”pink”>hasil align right</td>
<td bgcolor=”cyan”>hasil align right</td>
</tr>
<tr>
<td rowspan=”2” align=”middle”
bgcolor=”green”>hasil rowspan</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Gb. 1.10: Penggunaan atribut dalam table, table row dan table
data
15
MEMBUAT FORM
Elemen FORM dalam HTML merupakan bagian terpenting
dalam pemrograman, khususnya dalam pembuatan aplikasi yang
berbasiskan web. Form dalam HTML sama layaknya form di
bahasa pemrograman yang lain seperti Delphi, VB, Foxpro, dll.
Elemen ini juga menyediakan properti textbox, combo box,
button, check bok dan option button.
Untuk membuat sebuah form, anda cukup dengan

menggunakan tag <form> … </form>. Selain atribut dan
properti yang dimiliki form, anda juga dapat menuliskan teks
dan menambahkan image didalamnya.
Atribut elemen form :
Action = lokasi dan nama file (file yang menangani form)

Method = [get / post] (methode HTTP untuk men-submit
form)
Berikut adalah properti beserta atribut properti yang

dimiliki oleh elemen form :
1. Text Box <input type=”text”>

Digunakan untuk memasukkan input yang berupa
teks. Size = ukuran dari text box dalam karakter.
Maxsize = maksimal banyaknnya karakter yang dapat
diterima.
Name = nama dari variabel text box yang dikirim ke
suatu aplikasi.
Value = nilai yang ditampilkan dalam text box sebagai
nilai default.
2. Password <input type=”password”>
Digunakan untuk memasukkan password
Size = ukuran dari text box dalam karakter.
Maxsize = maksimal banyaknnya karakter yang dapat
diterima.
Name = nama dari variabel text box yang dikirim ke
suatu aplikasi.
3. Hidden <input type=”hidden”>
Digunakan untuk mengirim data ke suatu aplikasi yang
tidak untuk dilihat oleh browser.
Name = nama yang dikirim ke suatu aplikasi.
Value = nilai dari variabel yang dikirim.
16
4. Check Box <input type=”checkbox”>
digunakan untuk melakukan pilihan yang lebih dari satu.
Name = nama dari suatu variabel yang dikirim ke suatu
aplikasi.
Value = nilai dari suatu variabel. Checked
(check box yang sudah ditandai)
5. Radio Button <input type=”radio”>

Digunakan untuk melakukan pilihan yang hanya satu
pilihan saja.
Name = nama dari suatu variabel yang dikirim ke suatu
aplikasi.
Value = nilai dari suatu variabel. Checked
(check box yang sudah ditandai)
6. Push Button <input type=”button”>

Elemen ini biasanya digunakan dengan java script atau
VBscript untuk menghasilkan sebuah aksi.
Name = nama dari variabel yang dikirim ke suatu
aplikasi.
Value = label teks di atas tombol.
7. Submit <input type=”submit”>

Digunakan unutk mengirimkan data ke suatu aplikasi
yang nilai FORMnya sudah diatur dalam atribut ACTION.
Name = nama variabel yang dikirim ke suatu
aplikasi. Value = label teks di atas tombol.
8. Image Submit Button <input type=”image”

src=”url”>
Digunakan untuk menggantikan tombol standar submit.
aplikasi.
9. Reset <input type=”reset”>

Digunakan untuk mereset semua masukan di dalam
form. Value = text label di atas tombol.
10. Text Area <textarea> … </textarea>

Elemen yang digunakan menuliskan teks secara leluasa
seperti Notepad atau sebuah listbox.
Name = nama dari variabel yang dikirimkan ke suatu
aplikasi.
Rows = panjang baris dalam karakter.
17
Cols = tinggi dalam karakter.
11. Select <select> … </select>

Digunakan seperti layaknya combo box, yang mana
didalamnya terdapat properti <option> untuk memilih.
Size = jumlah pilihan yang dapat terlihat.
aplikasi.
Salin script dibawah ini untuk mencoba tag form

beserta properti yang dimilikinya.
Contoh010.html
<html>
<head>
<title>
contoh-010
</title>
<head>
<body>
<form>
Nomor KTP : <input type=”text” name=”nomorKtp”><br>
Nama : <input type=”text” name=”nama”><br>
Alamat : <textarea cols=”25” rows=”5”></textarea><br>
Jenis Kelamin : <input type=”radio” name=”sex” value=”L”>Laki-laki
<input type=”radio” name=”sex” value=”P”>perempuan <br>
Agama : <select name=”agama”>
<option value=”islam”>islam
<option value=”kristen”>kristen
<option value=”katholik”>katholik
<option value=”hindu”>hindu
<option value=”budha”>budha
</select><br>
Ijasah yang dimiliki : <input type=”checkbox”
name=”ijasah” value=”sd”>SD
<input type=”checkbox” name=”ijasah” value=”sltp”>SLTP
<input type=”checkbox” name=”ijasah” value=”slta”>SLTA
<input type=”checkbox” name=”ijasah” value=”diploma”>Diploma
<input type=”checkbox” name=”ijasah” value=”sarjana”>Sarjana
<input type=”checkbox” name=”ijasah”
value=”Magister”>Magister<br>
<input type=”reset” value=”ulangi”>
</form>
</body>
</html>
18
Gb. 1.11: Penggunaan elemen Form
Dari tampilan yang dihasilkan, mungkin anda menilai

kurang rapi. Supaya tampilan terlihat lebih rapi, anda dapat
menggunakan bantuan tag table untuk melakukan pembuatan
form. Perhatikan script di bawah ini supaya lebih jelas.
Contoh011.html
<html>
<head>
<title>
contoh-011
</title>
<head>
<body>
<form>
<table align=”left” border=”1” cellspacing=”2”
cellpadding=”3”> <tr>
<td>Nomor KTP</td>
<td>:</td>
<td><input type=”text” name=”nomorKtp”></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=”text” name=”nama”></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea cols=”25” rows=”5”></textarea></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
19
<td>:</td>
<td><input type=”radio” name=”sex” value=”L”>Laki-laki
<input type=”radio” name=”sex” value=”P”>perempuan</td>
</tr>
<tr>
<td>Agama</td>
<td>:</td>
<td><select name=”agama”>
<option value=”islam”>islam
<option value=”kristen”>kristen
<option value=”katholik”>katholik
<option value=”hindu”>hindu
<option value=”budha”>budha
</select></td>
</tr>
<tr>
<td>Ijasah Yang Dimiliki</td>
<td>:</td>
<td><input type=”checkbox” name=”ijasah” value=”sd”>SD
<input type=”checkbox” name=”ijasah” value=”sltp”>SLTP
<input type=”checkbox” name=”ijasah” value=”slta”>SLTA
<input type=”checkbox” name=”ijasah” value=”diploma”>Diploma
<input type=”checkbox” name=”ijasah” value=”sarjana”>Sarjana
<input type=”checkbox” name=”ijasah”
value=”Magister”>Magister</td>
</tr>
<tr>
<td colspan=”3”><input type=”reset” value=”ulangi”></td>
</tr>
</form>
</body>
</html>
Gb. 1.12: Pembuatan form dengan bantuan tag table.
20
Hasil tampilan diatas masih terdapat garis border table-
nya, untuk menghilangkan garis tersebut, anda cukup
mengganti nilai atribut border dengan nilai ‘nol’.
LATIHAN
Cobalah anda membuat halaman HTML dengan desain
seperti di bawah ini :
Desain halaman pertama :
Desain halaman kedua :
Referensi :
https://pakgurueka.files.wordpress.com/
21

Tag HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tag HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

TAG HTML

HTML(Hypertext Markup Language) merupakan salah

DASAR DASAR HTML

Elemen HTML biasanya berupa tag-tag yang saling

Sebagai catatan, dalam penulisan pembahasan

STRUKTUR DASAR HTML

Sebelum menuliskan script-script HTML dan PHP, terlebih

Setiap dokumen HTML memiliki struktur dasar sebagai

Hasil dari script diatas adalah sebagai berikut :

Table 1.1: Kode Warna

PENGATURAN PROPERTI BODY

Atribut elemen body :

Background = lokasi dan nama file (latar belakang image)

Cobalah script berikut :

Gb. 1.3: Penggunaan elemen pada body.

HEADING, PARAGRAPH, HORISONTAL

Tag paragraph <p> digunakan layaknya pengaturan

Atribut tag horisontal ruler :

Salin script berikut untuk mencoba heading, paragraf,

perangkat yang kita butuhkan untuk belajar web adalah :<br>

Gb. 1.4: Penggunaan Heading, Paragraf,

Atribut elemen font :

Size = angka (ukuran huruf)

<b> … </b> = huruf tebal

Tulislah script berikut ini untuk mengetahui penggunaan

Adapun atribut yang terdapat didalam elemen list adalah

Src = lokasi dan nama file gambar.

Untuk lebih jelasnya dalam penggunaan tag img,

Gb. 1.7: Menampilkan gambar ke halaman web.

HalamanTujuan berisi lokasi dan nama file yang akan

Untuk mencoba membuat link, yang anda perlikan adalah

Dan juga tulis script dibawah ini, kemudian simpan

Gb. 1.8a: Halaman awal. Gb. 1.8b: Halaman tujuan

Hasil dari script diatas sepertinya memang tidak tampak

Adapun atribut elemen tabel dalah sebagai berikut :

Selain itu anda dapat mengatur tabel, lebih spesifik anda

Atribut table row :

Atribut table data :

Untuk mencoba, salinlah script berikut dan lihat

Untuk membuat sebuah form, anda cukup dengan

Atribut elemen form :

Action = lokasi dan nama file (file yang menangani form)

Berikut adalah properti beserta atribut properti yang

1. Text Box <input type=”text”>

5. Radio Button <input type=”radio”>

6. Push Button <input type=”button”>

7. Submit <input type=”submit”>

8. Image Submit Button <input type=”image”

9. Reset <input type=”reset”>

10. Text Area <textarea> … </textarea>

11. Select <select> … </select>

Salin script dibawah ini untuk mencoba tag form

Dari tampilan yang dihasilkan, mungkin anda menilai

Gb. 1.12: Pembuatan form dengan bantuan tag table.

Desain halaman pertama :

Desain halaman kedua :

Anda mungkin juga menyukai