Materi 11. Struktur Bahasa Pemrograman

Struktur Bahasa Pemrograman
Modul-12:
Bahasa Web: HTML
Bahasa WEB
• Bahasa Web adalah bahasa program atau script
yang digunakan untuk menciptakan dan mengisi
halaman halaman Web.
• Ada banyak bahasa yang dapat digunakan pada
halaman Web, seperti HTML, XML, PHP, JavaScript,
Java Applet, dsb.
• Disini hanya akan diuraikan HTML saja.
• HTML bukan bahasa program biasa, tapi bahasa
khusus untuk tampilan pada halaman Web.
SBP: Modul 12, @Suarga 2
HTML
• HTML adalah singkatan dari “Hyper Text Markup
Language”.
• Tim Berners-Lee (Tim B-L)menciptakan HTML pada
tahun 1991 agar dapat melakukan kolaborasi hasil
penelitian fisika nuklir dengan rekan2-nya di
negara lain
• Marc Andressen merancang Web Browser untuk
dapat menampilkan halaman web yang ditulis
dengan HTML dari Tim B-L. (Mosaic)
• Karena simple, maka Hyper Text Markup Language
rancangan Tim B-L menjadi populer
Timothy John Berners-Lee
Tim Berners Lee
Born 8 June 1955 London,
England, United Kingdom[1]
United States and United
Residence
Kingdom[2]
Nationality English
Alma mater Queen's College, Oxford
Occupation Computer scientist
•World Wide Web
Consortium
Employer •University of Southampton
•Massachusetts Institute of
Technology Thn 2005
•Inventing the World Wide
Web Thn 2010
•Holder of the Founders
Known for
Chair at MIT's Computer
Science and Artificial
Intelligence Laboratory
Title Professor
Terminologi Dasar
• Hypertext : teks yang disimpan dalam file
elektronik yang memungkinkan adanya “link”
antara text yang tersimpan di tempat lain.
• HTML adalah bahasa untuk membuat file
hypertext
• Web page adalah tampilan halaman web yang
dibuat dengan HTML

• Web browser adalah software yang mampu
menterjemahkan HTML menjadi tampilan.
• http (hypertext transfer protocol) adalah
protokol jaringan yang mengambil web page
dari server yang dituju (sesuai alamat) untuk
ditampilkan pada komputer client
• URL universal resource locator, alamat dari
suatu sumber informasi di web (www…..)
• WWW adalah jaringan/kumpulan halaman
Web yang ada di Internet
Struktur File HTML
<HTML>
<HEAD>
<TITLE> Judul dari halaman Web </TITLE>
</HEAD>
<BODY>
Isi halaman Web yang akan ditampilkan, disusun
disini dengan bantuan <tag> dari HTML
</BODY>
</HTML>

• Attribute pada <BODY …>
– BACKGROUND = “file gambar”, gambar latar
– BGCOLOR = “#rrggbb”, warna latar
– LINK = “#rrggbb”, warna link
– TEXT = “#rrggbb”, warna tampilan teks
– VLINK = “#rrggbb”, warna visited link
• Contoh:
<Body Background=“latar.gif” Bgcolor=“#FFFFFF”,
Link=“#FF0000” Text=“#000000”
Vlink=“#0000FF”>

• atribut untuk pengaturan halaman:
– leftmargin = “nnn”
– rightmargin = “nnn”
– topmargin = “nnn”
– bottommargin = “nnn”
Contoh:
<BODY bgcolor=“blue” link=“green” alink=“white”
vlink=“silver” leftmargin=“25” rightmargin=“25”
topmargin=“20” bottommargin=“30”>

Tag untuk Teks
Beberapa tag disediakan untuk
melakukan pengaturan tampilan teks
(text formatting) antara lain adalah:
1.Heading Tag : untuk membuat judul
sehingga ukuran-nya lebih besar dari
huruf biasa, tag-nya sbb:
<H1> judul utama, terbesar ukurannya </H1>
<H2> subjudul, ukuran lebih kecil </H2>
<H3> subjudul, ukuran lebih kecil lagi </H3>
dst ..
<H6> subjudul terkecil </H6>
Tag ini juga memiliki beberapa atribut,
antara lain:
•ALIGN=left / center / right :
penempatan judul di kiri / tengah / kanan
•NOWRAP usahakan judul tidak terpotong
Judul utama ditengah dan tidak

terpotong mempunya tag sebagai
berikut :
<H1 align=center nowrap> Judul utama

</H1>
2. <DIV> tag: untuk melakukan pembagian (section
division) pada webpage. Beberapa atributnya
adalah sbb:
– ALIGN=left / center / right, penempatan seksi
– CLASS=nama seksi
– CLEAR agar teks tidak tampil sekitar gambar
– NOWRAP agar teks tidak terpotong
3. <HR> tag, untuk membuat garis datar, dengan

atribut:
– ALIGN=left / center / right
– SIZE=zz, tebal dari garis
– WIDTH=xx, panjang dari garis
– NOSHADE, agar garis tidak memiliki bayangan

• <SPAN style=“color:warna; font-weight: bold
| regular; font-style:italic | normal”>
memakai sejumlah tag text secara bersamaan

pada suatu baris kalimat tanpa mengganggu
text lain dalam baris yang sama.
Contoh:
<SPAN style=“color:red; font-weight:bold; font-
style:italic”> tulisan miring, tebal berwarna
merah.</SPAN>

Text Formatting
• <P> paragraf baru
• <BR> baris baru
• <B> bold </B>
• <I> italic </I>
• <U> underline </U>
• <CENTER> ditengah </CENTER>
• <RIGHT> rapat kanan </RIGHT>
• <FONT size = +3 COLOR=#FF0000 FACE = “Arial” >
teks dengan ukuran, warna, dan jenis tertentu
</FONT>
• <PRE> teks …. </PRE> menampilkan teks sesuai
dengan letaknya pada waktu diketik.

Latihan 1
• Buat sebuah halaman Web dengan elemen
tampilan teks sbb:
• Judul : misalnya “PERSONAL DATA MR. ANDY”
• Personal data yang memuat nama, alamat, tgl
lahir, agama, Jkel, riwayat pendidikan, riwayat
pekerjaan /pengalaman kerja, dsb
• Gunakan <tag> format teks sebanyak mungkin
untuk mempercantik tampilan halaman web-nya.

Tatacara Menampilkan HTML
• File HTML harus ditempatkan disatu folder dibawah
sebuah web server
• Untuk mencoba file HTML, anda harus meng-install
webserver, misalnya: WampServer atau Apache
• Tempatkanlah file HTML dibawah homepage
localhost, biasanya dibawah folder «www» dari
Wampserver
• Kemudian aktifkan webserver, klik localhost kemudin
cari file html-nya pada localhost
• Klik file tersebut
Wampserver: localhost
localhost/webdesign
Latihan1.html
Latihan1.html
http://localhost/webdesign/latihan1.html
Menampilkan Daftar dan Tabel
Suatu daftar (list) dapat dibuat dengan <tag> tertentu, yaitu :
<UL>
<LI> baris – baris daftar
<LI> …
</UL>
untuk menampilkan “unordered list”, atau daftar tanpa nomer

urut, tetapi pakai “bullet”, misalnya:
<UL>
<LI> Intel 386 akan tampil sbb:
<LI> Intel 486
•Intel 386
<LI> Pentium 1
•Intel 486
<LI> Pentium 2 •Pentium 1
</UL> •Pentium 2

untuk menampilkan “ordered” list, daftar dengan
nomer urut, misalnya:
<OL>
<LI> Printer Canon Bubble Jet 2100 SP
<LI> Printer HP Laser Jet model 6
<LI> Color Printer HP 5100
</OL>
akan tampil sbb:

1. Printer Canon Bubble Jaet 2100 SP
2. Printer HP Laser Jet model 6
3. Color Printer HP 5100

Tag TABEL
• Untuk membuat tampilan tabel
<TABLE>
<TH>
<TD>Kolom1</TD><TD>Kolom2</TD></TH>
<TR>
<TD> baris1, kolom1 </TD>
<TD> baris1, kolom2 </TD> </TR>
<TR>
<TD> baris2, kolom1 </TD>
<TD> baris2, kolom2 </TD></TR>
</TABLE>

• option pada Tabel
<Table width=“50%” border=1>
berarti lebar tabel 50% lebar jendela tampilan,
dan setiap cell-nya dibatasi dengan garis.
<Table width=“500” border=1 cellpadding=1

cellspacing=1>
berarti tabel dengan lebar 500 pixel, pembatas
tabel 1 pixel, jarak isi dan garis pembatas 1
pixel dan tebal garisbatas cell 1 pixel
• Contoh tabel
<B>Jadwal Harian</B>
<Table>
<TH><TD>Jam</TD><TD>Senin</TD>Selasa</TD>
<TD>Rabu</TD><TD>Kamis</TD></TH>
<TR><TD>8.00-10.00</TD><TD>Metoda Numerik</TD>
<TD>Elektronika</TD><TD>Sistem Kontrol</TD>
<TD>DBMS</TD></TR>
<TR><TD>10.00-12.00</TD><TD>Java2 ME</TD>
<TD>Fisika Komputasi</TD><TD>Web Design</TD>
<TD>Artificial Intelligence</TD></TR>
</TABLE>

• Option untuk Table:
– Align = “left”, “center” atau “right”
– Bgcolor = “#rrggbb”
– Border = n, tebal garis batas
– Cellpadding = n, spasi antar batas/border
– Cellspacing = n, lebar spasi antar sel
– Height = nn, tinggi tabel
– Width = nn, lebar tabel
– Cols = n, jumlah kolom
– Hspace = nn, spasi horisontal
– Vspace = nn, spasi vertikal
• Option untuk <TR>
– Align = “center | left | right”
– Valign = “Baseline | Bottom | Middle | Top”
• Option untuk <TD>

– Align = “center | left | right”
– Valign = “Baseline | Bottom | Middle | Top”
– Colspan = n
– Rowspan = n
– Height = nn
– Width = nn
– Nowrap

Latihan 2
LATIHAN 2.1:
Baca kembali hasil latihan 1, rekam sebagai hasil
latihan 2 setelah melakukan perubahan pada
layout tampilan sbb:
• gunakan daftar/list untuk setiap item pada
riwayat pendidikan sehingga tampil dalam
format daftar/list bernomer urut,
• gunakan tab tabel untuk merubah format riwayat
pekerjaan sehingga tampil dalam format tabel
misalnya sbb:

Tahun Instansi Posisi / Pekerjaan
1998 – 2000 AMIK Professional Asisten Office
2000 – 2002 STMIK Dipanegara Asisten Visual Basic
2003 – 2005 Rumkit Wahidin Programmer honorer

• LATIHAN 2.2 :
• Pelajari HTML berikut ini, bagaimana tampilannya.
Termuat didalamnya atribut ROWSPAN dan COLSPAN
untuk membuat tabel yang lebih rumit.
•
<html>
<head><title>Latihan Tabel 2.2 </title></head>
<body>
<table border=2>
<caption><B>Kuliah Umum setiap Senin dan
Rabu</B></caption>
<TR>
<TH COLSPAN=7>Agustus</TH>
</TR>

<TR Align=center>
<TH Valign=top ROWSPAN=3>Senin</TH>
<TH>1</TH>
<TH>8</TH>
<TH>15</TH>
<TH>22</TH>
<TH>29</TH>
<TD ROWSPAN=6> <I><P>Semuanya akan dilaksanakan<BR>
di ruang 303, Lantai 3, <BR>
Kantor Pusat Univ. Sentot</P>
<P>Hubungi Kordinator<BR>
untuk informasi lebih lanjut</P>
<P>Terima kasih <BR>
atas perhatiannya</P></I></TD>
</TR>
<TR Align=center>
<TD>AutoCAD</TD>
<TD>Networking</TD>
<TD>Internet</TD>
<TD>VRML</TD>
<TD>Ulead Media Studio</TD>
</TR>
<TR Align=center>
<TD>12:30</TD>
<TD>12:00</TD>
<TD>13:00</TD>
<TD>12:30</TD>
<TD>12:00</TD>
</TR>
<TR Align=center>
<TH Valign=top ROWSPAN=3>Rabu</TH>
<TH>3</TH>
<TH>10</TH>
<TH>17</TH>
<TH>24</TH>
<TH>31</TH>
</TR>

<TR Align=center>
<TD>Linux</TD>
<TD>mySQL</TD>
<TD>ASP dan PHP</TD>
<TD>Java</TD>
<TD>Python</TD>
</TR>
<TR Align=center>
<TD>4:30</TD>
<TD>5:00</TD>
<TD>4:30</TD>
<TD>5:00</TD>
<TD>5:00</TD>
</TR>
</table>
</body>
</html>
Tag Gambar
GAMBAR: dapat ditampilkan pada halaman Web
dengan tag
<IMG SRC=nama_file_gambar>
Jenis file gambar yang diterima oleh semua
browser adalah “.jpg” atau “.gif”.
Misalkan foto anda di-scan dan disimpan dengan

nama “fotoku.jpg” , maka foto ini
dapat ditampilkan dengan tag
<IMG SRC=”fotoku.jpg”>

Beberapa atribut yang bisa digunakan adalah:
ALIGN = left / center / right, mengatur letak gambar
ALIGN = top / middle / bottom, mengatur teks
sekitarnya
WIDHT=xx, menetapkan lebar gambar
HEIGHT=yy, menetapkan tinggi gambar
BORDER=zz, tebal bingkai gambar
ALT = “teks alternatif”, ketika file gambar tdk ada
<IMG SRC=”fotoku.jpg” ALIGN=center WIDTH=50

HEIGHT=100 BORDER=3>

AUDIO: latar belakang musik dapat disajikan
ketika halaman Web dibuka dengan tag:
<BGSOUND SRC=nama_file_audio>
Jenis file audio yang dikenal adalah: “.au”,
“.wav” atau “.midi”.
Atribut yang bisa ditambahkan adalah:
LOOP=n, menyatakan berapa kali musik
diulang
<BGSOUND SRC=”mymusic.au” LOOP=3>

VIDEO: suatu file video jenis “.avi” dapat
dimainkan oleh beberapa browser melalui
tag: <IMG DYNSRC=”file_video.avi”>
Atribut yang bisa digunakan adalah:
FILEOPEN video akan langsung dimainkan
ketika web-page dibuka.
MOUSEOVER video akan dimainkan ketika
mouse digerakkan ke posisi file video

LINK: hypertext menyediakan fasilitas untuk
koneksi ke web-page lainnya biasa disebut
sebagai hyperlink, melalui tag:
<A HREF=”file.html”>hypertext </H>
Ketika “hypertext” di-klik maka “file.html”
akan dipanggil dan ditayangkan, dimana
file.html ada pada direktori yang sama.
Suatu file html yang berada pada server lain
dalam Web dapat dipanggil dengan tag.
<A HREF=”http://www.alamat.nya/file.html>
hypertext</A>

• Pemakaian <IMG DYNSRC ….> untuk video dan
<BGSOUND SRC … > untuk audio, memerlukan
program plugin yang tepat, bila tidak ada maka
file-file tersebut tidak bisa dimainkan.
• Cara lain adalah dengan memanfaatkan link
<a href=file-video.mpg>klik video</a> dan
<a href=file-audio.mp3>klik audio</a>
Secara automatis akan memanggil program
“RealPlayer” untuk menyajikan file-file tersebut.

Kemudian link dapat juga dilakukan pada paragraf
dalam suatu halaman Web, misalnya sbb:
<P>Step 1: <A HREF=”#para1”>Instalasi</A></P>

<P>Step 2: <A HREF=”#para2”>Menjalankan
Program</A></P>
….
<A Name=”para1”>Tata cara Instalasi</A>
….
<A Name=”para2”>Bagaimana menjalankan
Program</A>

Latihan 3A
• Buat sebuah halaman Web yang memuat
paling sedikit 3 gambar ukuran kecil bersama
nama gambar / keterangan gambar, dan
apabila di-klik (link) maka akan tampil gambar
tsb dalam ukuran yang lebih besar disertai
cerita tentang gambar ini.

Latihan 3B
• Tambahkan file Audio dan Video pada latihan
3A, sehingga file tersebut bisa di-mainkan.

Tag Frame
• Membuat bingkai pada halaman Web
<FRAMESET ROWS=a,b COLS=a,b >
<FRAME NAME=nama bingkai SRC= file.html>
<FRAME NAME= … SRC = …>
…
</FRAMESET>

• Atribut dari tag Frame
– COLS = “lebar kolom”
– ROWS = “tinggi baris”
– BORDER = “pixel pembatas”
– BORDERCOLOR = “warna”
– FRAMEBORDER =“yes” | “no”

• Contoh:
<FRAMESET ROWS=75%,* >
<FRAMESET COLS=50%,* >
<FRAMESET ROWS=50%,*>
<FRAME name=”frame1” SRC=file1.html>
<FRAME name=”frame2” SRC=file2.html>
</FRAMESET>
<FRAME name=frame3 SRC=file3.html>
</FRAMESET>
<FRAME name=frame4 SRC=file4.html>
</FRAMESET>

Frame-1 Frame-3
Frame-2
Frame-4

• Kombinasi antara Link dan Frame dapat
menyebabkan suatu bingkai menjadi “target” dari
suatu link, misalkan ketika hypertext pada frame1 di-
klik maka html muncul di frame3, demikian pula
ketika hypertext pada frame2 di-klik, maka file1.html
harus memuat tag berikut:
<A HREF=”isiFrame1.html TARGET=frame3>hypertext

pada frame1</A>
dan dalam file2.html memuat tag yang sama.
<A HREF=”isiFrame2.html TARGET=frame3>hypertext

pada frame2</A>

Latihan 4
• Buat sebuah halaman Web dengan bingkai
sbb: dimana frame kiri berisi menu, frame
kanan atas berisi judul web-page, dan frame
kanan bawah adalah target bila menu di-klik
(misalkan menu berisi Latihan-1, Latihan-2,
dan Latihan-3)

MENU Judul Halaman Web
Latih1
Latih2
Latih3
Target Frame

Form Tag
• Untuk membuat formulir pada halaman web

<FORM ACTION=program pemroses
METHOD=POST / GET>
elemen-elemen formulir
</FORM>

• Elemen textbox
<INPUT TYPE=text NAME=textbox1 SIZE=xx>
• Elemen textarea
<TEXTAREA NAME=textarea1 ROWS=xx
COLS=yy> isi textarea </TEXTAREA>
• Elemen checkbox
<INPUT TYPE=checkbox NAME=checkbox1
VALUE = ON / OFF> Pilihan1

• Elemen Radio Button
<INPUT TYPE=radio NAME=radio1
VALUE=plihan1 CHECKED> pilihan1
• Elemen ComboBox
<SELECT NAME=menu1>
<OPTION VALUE=pilihan1> pilihan1
<OPTION VALUE=pilihan2> pilihan2
</SELECT>

• Elemen Tombol
<INPUT TYPE=SUBMIT VALUE=OK

NAME=tombol1> tombol submit
<INPUT TYPE=RESET VALUE=reset
NAME=tombol2> tombol reset

Contoh:
<html>
<head><title>Contoh Formulir</title></head>
<body>
<PRE>
Mohon formulir ini di-isi dengan benar:
<FORM ACTION=proses.exe METHOD=GET>
Nama : <INPUT TYPE=TEXT NAME=nama>
Alamat : <INPUT TYPE=TEXT NAME=alamat>
Telepon: <INPUT TYPE=TEXT NAME=telepon>
Fax : <INPUT TYPE=TEXT NAME=fax>
E-mail : <INPUT TYPE=TEXT NAME=email>

Pilih Pekerjaan Anda:
<SELECT NAME=pekerjaan>
<OPTION VALUE=mahasiswa>Mahasiswa
<OPTION VALUE=pns>Pegawai Negeri
<OPTION VALUE=pswasta>Pegawai Swasta
<OPTION VALUE=wiraswasta>Wiraswasta
<OPTION VALUE=nganggur>Belum bekerja
</SELECT>

Apakah saudara anggota mailing-list?
<INPUT TYPE=radio NAME=anggota VALUE=ya

CHECKED>Ya
<INPUT TYPE=radio NAME=anggota
VALUE=bukan>Bukan
<INPUT TYPE=SUBMIT VALUE="Kirim Data"

NAME=submit>
<INPUT TYPE=RESET VALUE="Ulangi" NAME=reset>
</FORM>
</body>
</html>
Latihan 5
• Buatlah sebuah formulir pengumpulan
database penduduk, dengan item2 seperti
nama, tgl lahir, jkel, agama, status, alamat,
nama istri/suami, nama anak dsb
• Jkel menggunakan radio button
• Agama menggunakan combo-box
• Nama istri/suami, nama anak dalam textarea
• Beri tombol cancel dan submit

HTML versi 5.0
• Versi 5.0 dari HTML yang diperkenalkan tahun 2010 memiliki
beberapa tag-tag tambahan untuk lebih memperkaya dan
mempercantik tampilan.
• Format umum dari HTML 5 adalah sbbb:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Very Basic Document</title>

<style>header, footer, section, aside, nav, article {display:
block;}</style>
</head>
Basic HTML5 Structure
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Demo</title>
<link rel="stylesheet" href="styles.css" />

</head>
<body>
</body>
</html>

Cascading Style Sheet (CSS)
• CSS adalah fasilitas pengaturan dan penampilan
halaman web
– mengatur posisi
– mengubah warna
– mengubah font
– mengubah margin
– dsb.
• Jenis CSS:
– inline style
– embedded style
– linked style

Inline Style CSS
• Perintah CSS dituliskan dalam file html dengan
menambahkan atribut style = “ ….”.
• Contoh:
<p id=“contoh” style=“font-size:14pt;
color:red”>
tag <P> diformat dengan font berukuran 14pt
dan berwarna merah
</p>
Embedded style CSS
• CSS didefinisikan diantara tag <style> … </style> sebelum tag
<body>
• Contoh:
<html>
<head><title>contoh embedded css</title></head>
<style>
body {background:#0000FF; color:#FFFF00;
margin-left:0.5in}
H1 {font-size:18pt; color:#FF0000}
P {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<Body>

<H1> judul ini akan berukuran 18pt dan berwarna
merah</H1>
<P> paragraph ini berukuran 12pt bertipe arial
dengan indent 0.5 in </P>
</Body>
</HTML>

Linked Style CSS
• Pada tipe ini style ditulis dalam satu file terpisah
dari file html, misalnya:
<style>
Body {background:#0000FF; color:#FFFF00;
margin-left:0.5in}
P {font-size:12pt; font-family:arial;
text-indent:0.5in}
</style>
• direkam dengan nama: style01.css
• File style tersebut dipanggil dari suatu file
html, misalnya sbb:
<html>
<head><title>Contoh linked css</title>
<link rel=stylesheet href=“style01.css” type=“text/css”>
</head>
<body>
…………… isi html akan diformat sesuai dengan ….
style yang ada dalam file style01.css
</body>
</html>

Latihan3css.html
• Ubahlah Latihan3.html menjadi Latihan3css.html
dengan memanfaatkan file css berikut ini:
<Style>
body {background:#0000FF; color:#FFFF00; text-
color:#00FF00; vlink-color=#FF00FF}
H2 {font-size:18pt; color:#00FF00}
P {font-size:15pt; font-family:verdana; text-indent:0.75in;
color:#FF0000}
OL {color:#FFFF00}
</Style>
CSS versi 3
• HTML5 berpasangan dengan CSS3

Materi 11. Struktur Bahasa Pemrograman

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 11. Struktur Bahasa Pemrograman

Diunggah oleh

Hak Cipta:

Format Tersedia

Struktur Bahasa Pemrograman

SBP: Modul 12, @Suarga 8

SBP: Modul 12, @Suarga 12

SBP: Modul 12, @Suarga 14

SBP: Modul 12, @Suarga 15

Judul utama ditengah dan tidak

<H1 align=center nowrap> Judul utama

3. <HR> tag, untuk membuat garis datar, dengan

SBP: Modul 12, @Suarga 18

memakai sejumlah tag text secara bersamaan

SBP: Modul 12, @Suarga 19

SBP: Modul 12, @Suarga 20

SBP: Modul 12, @Suarga 21

untuk menampilkan “unordered list”, atau daftar tanpa nomer

SBP: Modul 12, @Suarga 28

akan tampil sbb:

SBP: Modul 12, @Suarga 29

SBP: Modul 12, @Suarga 30

<Table width=“500” border=1 cellpadding=1

SBP: Modul 12, @Suarga 32

• Option untuk <TD>

SBP: Modul 12, @Suarga 34

SBP: Modul 12, @Suarga 35

1998 – 2000 AMIK Professional Asisten Office

2000 – 2002 STMIK Dipanegara Asisten Visual Basic

2003 – 2005 Rumkit Wahidin Programmer honorer

SBP: Modul 12, @Suarga 36

SBP: Modul 12, @Suarga 37

SBP: Modul 12, @Suarga 39

Misalkan foto anda di-scan dan disimpan dengan

SBP: Modul 12, @Suarga 41

<IMG SRC=”fotoku.jpg” ALIGN=center WIDTH=50

SBP: Modul 12, @Suarga 42

SBP: Modul 12, @Suarga 43

SBP: Modul 12, @Suarga 44

SBP: Modul 12, @Suarga 47

SBP: Modul 12, @Suarga 48

<P>Step 1: <A HREF=”#para1”>Instalasi</A></P>

SBP: Modul 12, @Suarga 49

SBP: Modul 12, @Suarga 50

SBP: Modul 12, @Suarga 51

SBP: Modul 12, @Suarga 52

SBP: Modul 12, @Suarga 53

SBP: Modul 12, @Suarga 54

SBP: Modul 12, @Suarga 55

<A HREF=”isiFrame1.html TARGET=frame3>hypertext

dan dalam file2.html memuat tag yang sama.

<A HREF=”isiFrame2.html TARGET=frame3>hypertext

SBP: Modul 12, @Suarga 56

SBP: Modul 12, @Suarga 57

SBP: Modul 12, @Suarga 58

• Untuk membuat formulir pada halaman web

SBP: Modul 12, @Suarga 59

SBP: Modul 12, @Suarga 60

SBP: Modul 12, @Suarga 61

<INPUT TYPE=SUBMIT VALUE=OK

SBP: Modul 12, @Suarga 62

SBP: Modul 12, @Suarga 63

SBP: Modul 12, @Suarga 64

<INPUT TYPE=radio NAME=anggota VALUE=ya

<INPUT TYPE=SUBMIT VALUE="Kirim Data"

SBP: Modul 12, @Suarga 67

SBP: Modul 12, @Suarga 69