Materi-1 Pembelajaranhtml

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
Pak Guru Eka 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
Pak Guru Eka 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)
Pak Guru Eka 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
Pak Guru Eka 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,
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>
Pak Guru Eka 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.
Pak Guru Eka 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>,
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>
Pak Guru Eka 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.
Pak Guru Eka 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>
Pak Guru Eka 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.
Pak Guru Eka 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.
Pak Guru Eka 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
Pak Guru Eka 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>
Pak Guru Eka 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)
Pak Guru Eka 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
Pak Guru Eka 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.
Pak Guru Eka 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.
Pak Guru Eka 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>
Pak Guru Eka 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>
Pak Guru Eka 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.
Pak Guru Eka 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 :
Pak Guru Eka 21

Materi-1 Pembelajaranhtml

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

Materi-1 Pembelajaranhtml

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML

HTML(Hypertext Markup Language) merupakan salah

DASAR DASAR HTML

Elemen HTML biasanya berupa tag-tag yang saling

Sebagai catatan, dalam penulisan pembahasan mengenai

STRUKTUR DASAR HTML

Pak Guru Eka 1

Sebelum menuliskan script-script HTML dan PHP, terlebih

Setiap dokumen HTML memiliki struktur dasar sebagai

Hasil dari script diatas adalah sebagai berikut :

Pak Guru Eka 2

Table 1.1: Kode Warna

PENGATURAN PROPERTI BODY

Atribut elemen body :

Background = lokasi dan nama file (latar belakang image)

Pak Guru Eka 3

Cobalah script berikut :

Gb. 1.3: Penggunaan elemen pada body.

HEADING, PARAGRAPH, HORISONTAL

Tag paragraph <p> digunakan layaknya pengaturan

Pak Guru Eka 4

Atribut tag horisontal ruler :

Salin script berikut untuk mencoba heading, paragraf,

Pak Guru Eka 5

Gb. 1.4: Penggunaan Heading, Paragraf,

Atribut elemen font :

Size = angka (ukuran huruf)

<b> … </b> = huruf tebal

Tulislah script berikut ini untuk mengetahui penggunaan

Pak Guru Eka 6

Pak Guru Eka 7

Adapun atribut yang terdapat didalam elemen list adalah

Pak Guru Eka 8

Pak Guru Eka 9

Src = lokasi dan nama file gambar.

Untuk lebih jelasnya dalam penggunaan tag img,

Pak Guru Eka 10

Gb. 1.7: Menampilkan gambar ke halaman web.

HalamanTujuan berisi lokasi dan nama file yang akan

Untuk mencoba membuat link, yang anda perlikan

Pak Guru Eka 11

Dan juga tulis script dibawah ini, kemudian simpan

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

Pak Guru Eka 12

Pak Guru Eka 13

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 :

Pak Guru Eka 14

Untuk mencoba, salinlah script berikut dan lihat hasilnya

Pak Guru Eka 15

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

Pak Guru Eka 16

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

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

7. Submit <input type=”submit”>

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