HTML To Blog

Modul Pemrograman Web
HTML (Hypertext Markup Language)

HTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan
dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya,
dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup
Language yakni bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk
mengatur format tampilan suatu dokumen.
HTT atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk
mentransfer data atau do!ument yang berformat HTML dari web ser"er ke browser
(#nternet $%plorer, &ets!ape &a"igator, &eolanet, dll). 'engan HTT inilah yang
memungkinkan (nda menjelajah internet dan melihat halaman web.
)ntuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa.
&amun sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang
digunakan untuk membuat atau mendesain halaman web). Ma!romedia 'reamwea"er,
(dobe *oLi"e, MS +rontage sekedar !ontohnya. Tetapi tanpa mengetahui dasar,
dasarnya (nda tidak akan memperoleh hasil yang maksimal. Mengapa- .arena
walaupun software,software tersebut semakin menawarkan kemudahan dalam membuat
halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web
tersebut se!ara manual. Terutama untuk halaman web yang sangat komplek.
'alam tutorial ini (nda akan kami ajak untuk mengetahui dasar,dasar dari desain web.
/ang dibutuhkan hanya sebuah word pro!essor. (nda bisa menggunakan &otepad,
0ordad, MS 0ord atau yang lainnya. Tapi yang paling mudah adalah menggunakan
&otepad. Setelah anda memahami betul semua tag,tag dasar html, diakhir nanti kita akan
belajar membuat halaman web dengan menggunakan web tool.
Struktur Dasar Html
'alam penggunaannya, sebagian besar kode HTML harus terletak di antara tag
kontainer. /aitu diawali dengan 1namatag2 dan diakhiri dengan 13namatag2 (terdapat
tanda 434). Struktur dasar dokumen HTML berisi elemen,elemen atau tag sebagai berikut5
<html>
<head>
<title>Judul Form/Caption</title>
</head>
<body>
ISI WEB
</body>
</html>
.eterangan5
<html> .. </html> Mendefinisikan bahwa teks yang berada diantara kedua tag
tersebut adalah file HTML.
6
<head> .. </head> Sebagai informasi page header. 'i dalam tag ini kita bisa
meletakkan tag,tag T#TL$, 7(S$, #S#&'$8, L#&., S9:#T,
ST/L$ ; M$T(.
<title> .. </title> Sebagai titel atau judul halaman3form. .alimat yang terletak di
dalam tag ini akan mun!ul pada bagian paling atas browser (nda
(pada title bar).
<body> .. </body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan
sebagai isi halaman web. 'i dalam tag ini bisa diletakkan
berbagai page attribute seperti bgcolor, background, text, link,
vlink, alink, leftmargin dan topmargin.
Sekarang untuk latihan pertama kita, mari kita buat dokumen HTML sederhana. #kuti
langkah,langkah berikut ini5
6. 7uat direktori dengan nama latihan di dri"e 95. 'an selanjutnya dalam direktori ini kita
akan menyimpan semua file,file latihan kita.
<. 7uka Browser, misalnya #nternet $%plorer atau &ets!ape &a"igator.
=. 7uka program aplikasi teks editor misalnya dalam latihan ini adalah &otepad.
>. Mulai baris paling atas, tuliskan5
<html>
<head>
<title>halaman pembuka</title>
</head>
<body>
Proyek latihan pertama saya.
</body>
</html>
?. Simpan file anda dengan !ara klik menu +ile , Sa"e5
<
@. Selanjutnya pilih direktori latihan yang tadi kita buat.
A. ada bo% +ile name, isikan nama filenya dengan index.html
B. ada drop down list di Sa"e as type, pilih All Files. Sehingga tampilannya seperti
berikut5
C. Simpan proyek anda dengan meng,klik pada tombol Save
)ntuk menjalankan kode,kode tersebut, silahkan buka browser seperti #nternet $%plorer,
&ets!ape &a"igator dan lain,lain.
6. .lik menu File !en
Ti!" Jika anda menggunakan etscape avigator, klik Open Page kemudian Choose
File
<. Setelah jendela Dpen terbuka, klik tombol #ro$se
=
=. .etika jendela baru terbuka, pilih direktori Latihan dan pilih file index.html.
>. .lik tombol !en lalu tekan tombol k, halaman web yang ditampilkan dalam
browser adalah seperti berikut5
%atatan"
!emua dokumen HTML mempunyai ekstensi .html "atau .htm#
!emua $alaman web "homepage# mempunyai file index.html% &ile index%$tml secara
otomatis akan dipanggil ketika alamat sebua$ domain atau direktori tempat
menyimpan file tersebut di buka di browser% Terdapat pengecualian pada microsoft
yang menggunakan web server ''!, file yang dipanggil adala$ default.html
>
&ode 'arna
engaturan warna dalam dokumen HTML menggunakan mode kombinasi :*7 (red,
green, blue). Setiap warna ditampilkan dalam dua digit nilai heksadesimal (E, 6, <, ..., +).
Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna
merah, hijau dan biru. Misalnya untuk warna kuning, dibuat dengan pen!ampuran warna
sebagai berikut5
(ed )reen #lue
++ ++ EE
7erarti untuk warna kuning dapat dibuat dengan kode FffffEE. 'isamping itu, pembuatan
warna dapat juga dibuat dengan langsung menggunakan nama warna dalam bahasa
inggris, misalnya kuningGHyellowH.
7erikut ini warna,warna yang dapat digunakan dalam halaman HTML.
'arna Heksadesimal
0hite F++++++
7la!k FEEEEEE
:ed F++EEEE
*reen FEE++EE
7lue FEEEE++
Magenta F++EE++
9yan FEE++++
/ellow F++++EE
(nda dapat juga membuat !ampuran sendiri warna,warna berdasarkan emajinasi anda.
/ang penting anda mengikuti aturan diatas.
*. +en,aturan Halaman 'eb dan Teks
)ntuk mendapatkan halaman web yang baik anda harus melakukan pengaturan terhadap
halaman web dan teks,teks didalamnya seperti mengatur warna latar belakang halaman,
memilih jenis dan ukuran huruf, perataan, warna teks, menambahkan gambar dll. Tag,tag
di bawah ini yang biasa digunakan dalam pengaturan halaman web dan teks 5
a. <body>, digunakan mendefinisikan teks beserta formatnya yang hendak ditampilkan
sebagai isi halaman web. 'i dalam tag ini bisa diletakkan berbagai page attribute
seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.
#a-k,round G digunakan untuk mengatur latar belakang dengan
gambar3image.
#,-olor G digunakan untuk mengatur warna latar belakang dokumen,
dengan warna putih sebagai default,nya.
Teks G digunakan untuk mengatur warna teks dokumen, dengan warna
hitam sebagai warna default.
Link G )ntuk mengatur warna link dokumen dengan warna biru
sebagai warna default
?
.link G )ntuk mengatur warna "isited link dokumen dengan default
ungu
Alink G digunakan untuk mengatur warna a!ti"e link dokumen dengan
default merah.
b. Headin," <Hn>..</Hn> 'igunakan untuk mengatur ukuran huruf pada header. 4n4
mempunyai nilai antara 6 , @ atau antara 1H62 sampai 1H@2, dengan 1H62
merupakan ukuran terbesar dan 1H@2 merupakan ukuran terke!il.
-ontoh/0/.html
1html2
<head>
<title>::: Heading Dokumen HTML :::</title>
</head>
<body bgcolor!""""cc te#t!$$%%&&>
<h'>Headng Tingkat ' </h'>
<h(>Headng Tingkat ( </h(>
<h%>Headng Tingkat % </h%>
<h)>Headng Tingkat ) </h)>
<h*>Headng Tingkat * </h*>
<h+>Headng Tingkat + </h+>
</body>
</html>
Hasilnya akan terlihat seperti 5
-. +ara,ra!h #aru" <+> 'igunakan untuk pindah alinea atau membuat paragraf baru.
Tag ini bisa diberi akhiran 132 tapi juga bisa tidak diberi. 'alam tag ini juga bisa
@
digunakan untuk mengatur perataan kiri, tengah, kanan dan kiri,kanan, yaitu dengan
attribut (L#*&. (ttribut align mempunyai nilai5 L$+T, :#*HT, 9$&T$: dan I)ST#+/.
d. Line #reak" <#(> 'igunakan untuk pindah ke baris baru.
e. 1o Line #reak" <1#(> 7ila digunakan tag ini maka teks yang panjang tidak se!ara
otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
2. Font <F1T> 'igunakan untuk mengatur huruf dokumen HTML. Tag +D&T
mempunyai attribut, yaitu5 S#J$, +(9$, 9DLD:.
S345" 'igunakan untuk mengatur ukuran font. )kuran font yang digunakan
berkisar antara 6 , A dengan 6 merupakan ukuran terke!il dan A merupakan
ukuran terbesar.
FA%5" 'igunakan untuk mengatur jenis atau nama font. (nda bisa memilih
maksimal = jenis font yang masing,masing dipisahkan oleh koma. 7ila terdapat
spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (K).
'alam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan
pada halaman web kita nantinya akan terdapat pada komputer pengguna yang
lain (pengakses web kita). endeknya kita tidak usah menggunakan font,font yang
bentuknya aneh,aneh, gunakan saja font standar. Tapi bila (nda ingin
menggunakan font yang sedikit 4aneh4 (nda bisa menggunakan graphi!.
%L(" 'igunakan untuk mengatur warna font. 'idefinisikan dengan
menggunakan nilai :*73H$8 atau bisa juga langsung menggunakan nama warna
(red misalnya).
-ontoh/0*.html
<html>
<head>
<title>::: ,kuran- .enis dan /arna 0ont :::</title>
</head>
<body>
<"ont si1e' 0acearial colorred>,kuran "ont '</"ont><br>
<"ont si1e( 0acearial colorgreen>,kuran "ont ( </"ont><br>
<"ont si1e% 0acearial colorblue>,kuran "ont % </"ont><br>
<"ont si1e) 0ace2erdana colorred>,kuran "ont ) </"ont><br>
<"ont si1e* 0ace2erdana colorblue>,kuran "ont * </"ont><br>
<"ont si1e+ 0acetahoma colorgreen>,kuran "ont + </"ont><br>
<"ont si1e3 0acetahoma colorred>,kuran "ont 3 </"ont><br>
</body>
</html>
Hasilnya akan terlihat
A
9ontoh lainnya 5
<"ont si1e( "ace4times5ne65roman4 color4!$$++cc4>
,. #ase Font" <#AS5F1T> 'igunakan untuk mendefinisikan 4default te%t4. (ttribut
sama dengan attribut +D&T. Tag +D&T akan mengoverwrite setting pada
7(S$+D&T.
9ontoh 5
<base"ont si1e( "ace4arial-hel2etica4 color4!""$$$$4>
Selain tag dan atribut diatas, masih terdapat lagi tag,tag yang berhubungan dengan
pengaturan teks, yaitu 5
+erhatian " Semua tag di bawah ini membutuhkan tap penutup.
<#> #old text
<3> 'talic text
<6> )nders!ore
<TT> Typewriter
<S> Strikeout , draws a line through the te%t
<+(5> reformatted Te%t <DF1> (efinition
<#L31&> Te%t berkedip (lebih baik jangan digunakan)
<ST(1)> Stron,
<ADD(5SS>
'talic
<%3T5> (igunakan untuk )uoting text
<%D5> Monospaced font (digunakan bila (nda ingin meletakkan
(memperlihatkan) kode HTML pada dokumen HTML (nda)
<SAM+> Monospaced font (digunakan bila (nda ingin meletakkan
<&#D> Monospaced font (digunakan bila (nda ingin meletakkan
<#3)> )kuran teks akan lebih besar satu ukuran
<SMALL> )kuran teks akan lebih ke!il satu ukuran
<S6+> Membuat teks
supers!ript
<S6#> membuat tekssub s!ript
B
<A##(5.> (bbre"iations
<A%(17M> )ntuk akronim
<+5(S1> 'igunakan untuk inde%ing
<8> Membuat short inline Luotation
<.A(> Membuat variable name, selalu dalam italics%
h. <H(>, digunakan untuk membuat garis horisontal. Tag ini mempunyai atribut S#J$,
0#'TH, (L#*& dan &DSH('$.
(tribut S345 digunakan untuk menentukan panjang garis dalam satuan pi%el. (tribut
'3DTH digunakan untuk menentukan ketebalan garis. (tribut 1SHAD5 akan
menyatakan bahwa garis tersebut ditampilkan tanpa bayang,bayang =,'.
-ontoh/09.html
<html>
<head>
<title>::: Membuat 7aris Horisontal :::</title>
</head>
<body bgcolor!""""cc>
<"ont si1e' 0acetahoma colorblue>8elamat Datang</"ont>
<hr si1e' 6idth'*$ alignle"t>
<h'><center>666.smkpgri%9mlg.sch.id</h'>
<hr si1e* aligncenter noshade>
</body>
</html>
Hasilnya tampak sebagai berikut5
i. L3STS
'aftar3list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga
item,item yang ada memiliki nomor urut atau bisa juga berupa tanda,tanda
khusus3symbol.
Terdapat tiga tipe list yang dapat digunakan, yaitu 5
6nordered Lists" <6L> )ntuk membuat daftar item dengan tanda bullet (tidak
bernomor). List entries didefinisikan dengan tag 1L#2. ada jenis ini tidak
memerlukan pengurutan data.
C
7entuk item tanda pada )nordered List dapat diubah dengan menggunakan
atribut T7+5 kedalam tag <6L> dengan nilai :-ir-le; untuk bentuk lingkaran
tengahnya putih, :s<uare; untuk bentuk kotak padat hitam dan :dis-; bentuk
lingkaran pada warna hitam.
-ontoh/0=.html
<html>
<head>
<title>::: ,ndordered List :::</title>
</head>
<body>
<b><"ont si1e% 0acetahoma colorblue>
Hobi saya adalah : </b>
<hr si1e( 6idth'*$ alignle"t>
<ul typecircle>
<li>:lahraga
</ul>
<ul types;uare>
<li>8hur"ing
</ul>
<ul typedisc>
<li>Makan <akso
</ul>
</"ont>
</body>
</html>
Hasil dari kode di atas adalah5
rdered Lists" <L> Iuga digunakan untuk membuat daftar item bernomor,
dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga
didefinisikan dengan 1L#2 tag. (tribut yang ada pada Drdered List adalah T7+5
dan STA(T.
-ontoh/0>.html
6E
<html>
<head>
<title>::: :rdered List :::</title>
</head>
<body>
<b><"ont si1e( 0acetahoma colorblack>
Pendidikan saya adalah : </b>
<hr si1e( 6idth'*$ alignle"t>
<ol type'>
<li>8ekolah Dasar
<li>8ekolah Lan=utan Pertama
<li>8ekolah Lan=utan >tas
</ol>
<hr si1e% 6idth*$$>
<ol start)>
<li>,ni2ersitas Muhammadiyah Malang
<li>,ni2ersitas P7?@ Malang
</ol>
</"ont>
</body>
</html>
Hasil dari kode di atas adalah 5
)ntuk attribut T/$, dapat juga menggunakan 5
6, 'efault numbers, 6, <, =, et!.
(, Huruf besar. (, 7, 9, et!.
a, Huruf ke!il. a, b, !, et!.
#, :omawi huruf besar. #, ##, ###, et!.
i, :omawi huruf ke!il , i, ii, iii, et!.
De2inition Lists" <DL>, digunakan untuk menjelaskan istilah,istilah. 'efinition
List dinyatakan dengan tag 1'L2 dan diantara tag tersebut ditambahkan tag
1'T2 'efinition Term yaitu bagian istilah yang dijabarkan dan tag 1''2
'efinition 'ata yang merupakan penjabaran dari istilah.
66
-ontoh/0?.html
<html>
<head>
<title>::: de"inition List :::</title>
</head>
<body>
<dl>
<dt> <agian Pertama.
<dd> 8ub <agian Pertama.
<dt> <agian Aedua.
<dd> 8ub <agian Aedua
</dl>
</body>
</html>
+re2ormatted Text" <+(5>. 'igunakan untuk mengatur format tampilan agar
sesuai dengan aslinya.
-ontoh/0@.html
<html>
<head>
<title>the BltCpreBgtC tag</title>
</head>
<body>
<h%>6ithout the BltCpreBgtC tag:</h%>
hereDs
some ditty
specially done
to lay it out all
"ormatted and pretty.
un"ortunately- that is all
this =unk really means
because i admit i
couldnDt scra6l
poetry "or
beans.
<p><h%>6ith the BltCpreBgtC tag:</h%>
<pre>
hereDs
some ditty
specially done
to lay it out all
"ormatted and pretty.
un"ortunately- that is all
this =unk really means
because i admit i
6<
couldnDt scra6l
poetry "or
beans.
</pre>
</body>
</html>
5xtended 8uotations" <#L%&86T5>, digunakan untuk membuat kutipan
panjang, sehingga hasilnya menjorok ke dalam.
-ontoh/0A.html
<html>
<head> <title>::: <lock;uote :::</title> </head>
<body>
<h%>(. Pengaturan Teks</h%>
<block;oute>
,ntuk mendapatkan halaman 6eb yang baik >nda harus melakukan pengaturan
terhadap teks seperti memilih =enis dan ukuran huru"- perataan- dll.
</block;oute>
</body>
</html>
Hasilnya tampak seperti bnerikut ini5
6=
9. Hy!ertext Link
'igunakan untuk membuat link3penghubung antara suatu halaman dengan halaman lain,
ke ):L lain, juga digunakan dalam satu halaman untuk berpindah ke sub judul yang lain
atau ke lokasi tertentu dalam satu halaman yang sama.
Sintak tag link adalah sebagai berikut5
<a href=url_tujuan>nama_link</a>
url_tuuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah
nilai yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan
yang terletak antara <A> dan </A> akan terdapat garis bawah dan atribut warnanya dapat
diatur dalam tag <body>. (dapun ma!am,ma!am link adalah sebagai berikut5
Link ke Dokumen Lain
)ntuk membuat link3penghubung dengan target ke dokumen3halaman yang berbeda, anda
harus membuat dokumen yang dituju3target dan disimpan dalam direktori tertentu, baik
pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang. )ntuk
men!oba membuat link, silahkan buat s!ript berikut dan beri nama dengan
link_dokumen_lain.html.
<html>
<head>
<title>::: Latihan Membuat Link Ae Dokumen Lain :::</title>
</head>
<"ont "acearial si1e+ colormaroon>
<b>.::: 8MA P7?@ % Malang :::. <br>
<"ont "acearial si1e) colorblue>
<i>8uccess <y Discipline</i>
<"ont "acearial si1e' colormaroon>
<hr>
E <a hre"link5dokumen5lain.html>H o m e</a>
E <a hre"proli.html>Program Aeahlian</a>
E <a hre"ekstra.html>Fkstra Aurikuler</a> E
<hr><p><"ont "ace2erdana si1e) colorpurple>
8elamat datang di 6eb kami ...
</body>
</html>
7uat lagi file berikut dan beri nama dengan proli.html
<html>
<head>
<title>::: Link Dokumen Lain :::</title>
</head>
<b>.::: 8MA P7?@ % Malang :::. <br>
<hr>
6>
<hr><p><"ont "ace2erdana si1e) colorblue>
Program Aeahlian :<br>
<"ont si1e'>
<ul typecircle><li>?ekayasa Perangkat Lunak
<li>Teknik Flektronika @ndustri
<li>Teknik Pembangkit Tenaga Listrik
<li>Teknik Mekanik :tomoti"
<li>Teknik <odi :tomoti"
<li>Teknik Pemesinan
<li>Teknik Las</ul>
</body>
</html>
)ntuk melengkapi latihan kali ini, buat juga file berikut dan beri nama ekstra.html
<html>
<head>
</head>
<b>.::: 8MA P7?@ % Malang :::. <br>
<hr>
<hr><p>
<"ont "ace2erdana si1e) colorblue>
Fkstra Aurikuler :<br>
<"ont si1e'>
<ul typecircle>
<li>8eni <ela Diri Tapak 8uci
<li>Aeagamaan
<li>8epak <ola
<li><ola <asket
<li>Aepenyiaran
</ul>
</body>
</html>
Hasil dari kode,kode diatas adalah sebagai berikut5
6?
Iika link,link tersebut di,klik, maka hasilnya adalah sebagai berikut5
Link ke ba,ian tertentu dalam dokumen yan, sama
)ntuk membuat link ke bagian tertentu dalam dokumen yang sama, harus diberikan nama
an!hor. erbedaan dengan link yang berbeda dokumen adalah tujuan3target link, jika
dalam dokumen yang sama yang dituju adalah nama an!hor tetapi kalau dokumen yang
beda yang dituju adalah nama file3dokumen yang bersangkutan.
)ntuk memberi nama an!hor, atribut yang dipakai adalah 1AM5 pada tag an!hor 1(2 dan
untuk membuat link !ukup memberikan tanda B setelah nama file dalam ):L. Misal5
<a hre"G!phpG> <ab ' </a>
atau dapat ditulis lengkap5
<a hre"Gbela=ar5php.html!phpG> <ab ' </a>
dan untuk nama an!hornya5
<a nameGphpG>>da apa dengan PHPH</a>
6@
Link ke alamat 6(L atau 'ebsite
)ntuk membuat link ke alamat ):L adalah dengan menambahkan5
htt!"//nama06(L.
9ontoh5
<a hre"Ghttp://666.dikti.orgG>666.dikti.org</a>
<a hre"Ghttp://666.smkpgri%9mlg.sch.idG>666.smkpgri%9mlg.sch.id </a>
Link ke Alamat 5mail
Link email adalah membuat link pada teks, jika teks tersebut diklik maka akan
menampilkan program pengiriman email yang terdapat pada komputer yang dipakai untuk
mengakses data atau teks tersebut se!ara otomatis.
)ntuk membuat link ke alamat email hanya menambahkan atribut mailto"alamat0email
ke dalam tag <A H(5F>
Misalnya5
<> H?F04mailto:6ebmasterIsmkpgri%9mlg.sch.id4>Airim email</a>
Link File yan, akan dido$nload
Link file dalam hal ini adalah apabila dikik pada teks tersebut maka proses selanjutnya
adalah mendownload file yang ter!antum pada dokumen tersebut. +ormat penulisannya
adalah <a hre2Cnama02ile>
Misal5
<a hre"Ganti2irus.1ipG>Do6nload anti 2irus</a>
<a hre"Glatih.docG>Do6nload latihan Html</a>
<a hre"Gmys;l.e#eG>Do6nload MJ8KL</a>
=. Menyisi!kan )ambar/3ma,es
'igunakan untuk menampilkan image atau animasi gif pada halaman web (nda. Tag yang
digunakan adalah
<img srcGnama "ile gambarG>
(ttribut yang dimiliki tag 1img2 adalah" alt, alignG(!enter, left, right), hspa!e, "spa!e,
border, width dan height. Iika attribut ukuran gambar tidak dituliskan, maka gambar
ditampilkan sesuai dengan ukuran asllinya. )ntuk mengatur ukuran gambar,
menggunakan attribut width daan height. (ttribut align digunakan untuk perataan posisi
gambar. (ttribut border, digunakan untuk memberi bingkai pada gambar. Sedangkan alt,
digunakan untuk memberi keterangan pada gambar jika mouse berada diatasnya. )ntuk
mengatur letak gambar dapat menggunakan attribut hspa!e daan "spa!e.
-ontoh/0D.html
<html>
6A
<head>
<title>::: menampilkan images :::</title>
</head>
<body>
<b><"ont si1e( 0acetahoma colorblack>
<img src4gedung.=pg4 alt4Halaman 8MA P7?@ % Malang4>
<img src4ekstra.=pg4 hspace'$ 2space* 6idth($$ height (*)
align4right4 border(>
</"ont>
</body>
</html>
Tampilan dari !ontoh diatas adalah sebagai berikut5
Layout Halaman 'eb den,an Tabel ETableF
Table merupakan !ara untuk menampilkan informasi dalam halaman web dengan bentuk
kolom dan baris.
Tabel dan Layout Halaman 'eb
Hampir semua web site yang berkualitas dan profesional, diran!ang dengan
menggunakan Tabel. Layaknya sebuah spreadsheet yang memiliki sel dan berisi
angka,angka, tabel dalam web juga mempunyai sel yang berisi link, gambar dan te%t.
*ambat dibawah ini adalah salah satu halaman web yang diran!ang dengan layout
tabel5
6B
Membuat Tabel
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu5
1T(7L$2, 1T:2, dan 1T'2. /ang perlu diingat adalah bahwa tag 1T:2 dan 1T'2 harus
terletak di antara tag 1T(7L$2 dan 13T(7L$2 .
<TA#L5>
'igunakan untuk mendefinisikan pembuatan tabel. Memiliki attribut 5
ali,n , perataan 5 rata kiri (left), tengah (!enter) atau kanan (right).
vali,n M mengatur bentuk perataan se!ara "ertikal
b,-olor M mengatur warna latar belakang (ba!kground) dari tabel.
ba-k,round M menentukan gambar yang digunakan sebagai ba!kground tabel
-olor G )ntuk mengatur warna suatu sel dalam tabel
border M menentukan ukuran border tabel (dalam pi%el).
ro$s!an M menggabungkan beberapa baris
-ols!an M menggabungkan beberapa kolom
-ell!addin, , jarak antara isi !ell dengan batas !ell (dalam pi%el).
-ells!a-in, M mengatur spasi3jarak antar !ell (dalam pi%el).
$idth M menentukan lebar tabel dalam pi%el atau per!ent.
hei,ht M Menentukan tinggi tabel
<T(>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut5
ali,n , perataan 5 rata kiri (left), tengah (!enter) atau kanan (right).
b,-olor , warna latar belakang dari baris.
vali,n , perataan "ertikal 5 top, middle atau bottom.
<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel. (ttributnya adalah5
ali,n M untuk menentukan perataan kolom
ba-k,round M untuk menentukan image yang digunakan sebagai latar belakang
dari kolom.
b,-olor M untuk menentukan warna latar belakang
6C
cell
cell
cell
-ols!an , lihat gambar !ontoh
hei,ht M untuk mengatur ukuran tinggi !ell dalam pi%els.
no$ra! M untuk membuat supaya isi dari kolom tetap berada pada satu baris.
ro$s!an , lihat gambar !ontoh
vali,n M untuk mengatur perataan "ertikal5 top, middle atau bottom.
$idth M untuk menentukan lebar kolom dalam pi%el atau per!en.
-ontoh/0/H.html
<html>
<head>
<title>::: Pembuatan Table :::</title>
</head>
<body>
<"ont "acearial si1e( colormaroon>
<table>
<tr>
<td>@ni contoh tabel sederhana tanpa border</td>
</tr>
</table>
<p>
<table border'>
<tr>
<td>@ni contoh tabel sederhana dengan border</td>
</tr>
</table>
<p>
<table border'>
<tr>
<td>Lo.</td>
<td>Lama</td>
<td>>lamat</td>
</tr>
<tr>
<td>'.</td>
<td>.am D@yatul Ahoir</td>
<td><ulubrangsi Lamongan</td>
</tr>
<tr>
<td>(.</td>
<td>>ri Mulyaningsih</td>
<td>/ringin >nom
7resik</td>
</tr>
</table>
</body>
</html>
Hasilnya adalah sebagai berikut5
-ontoh/0//.html
<html>
<head>
<title>.::: <ela=ar Membuat Tabel :::.</title>
</head>
<E
<body>
<table border4'4 cellpadding4$4 cellspacing4$4 bordercolor4!""""""4
6idth4'$$M4 height4''*4>
<tr>
<td 6idth4'$$M4 height4''*4 bordercolor4!N$N$N$4
bgcolor4!<DNFD&4>BnbspC</td>
</tr>
</table>
<"ont si1e4'4>BnbspC</"ont>
<table border4$4 cellpadding4$4 cellspacing4$4 bordercolor4!''''''4
6idth4'$$M4 height4)%'4>
<tr>
<td 6idth4(%M4 height4%$34 2align4top4>
<table border4'4 cellpadding4$4 cellspacing4$4
bordercolor4!<DNFD&4 6idth4&)M4 height4()*4>
<tr>
<td 6idth4'$$M4 height4())4
bordercolor4!N$N$N$4 bgcolor4!<DNFD&4>BnbspC</td>
</tr>
</table>
<"ont si1e4'4>BnbspC</"ont>
<table border4'4 cellpadding4$4 cellspacing4$4
bordercolor4!<DNFD&4 6idth4&)M4 height4'*(4>
<tr>
<td 6idth4'$$M4 height4'&4 bgcolor4!<DNFD&4
bordercolor4!N$N$N$4>BnbspC</td>
</tr>
<tr>
<td 6idth4'$$M4 height4'%(4 bordercolor4!N$N$N$4>
BnbspC</td>
</tr>
</table>
</td>
<td 6idth433M4 height4%$34 2align4top4>
<table border4'4 cellpadding4$4 cellspacing4$4 bordercolor4!""""""4
6idth4&3M4 height4)''4>
<tr>
<td 6idth4+)M4 height4'$&4>BnbspC</td>
<td 6idth4%+M4 height4'$&4>BnbspC</td>
</tr>
<tr>
<td 6idth4+)M4 height4%$'4 ro6span4(4>BnbspC</td>
<td 6idth4%+M4 height4()4 bgcolor4!<DNFD&4
bordercolor4!N$N$N$4>
<"ont si1e4'4>BnbspC</"ont></td>
</tr>

<tr>
<td 6idth4%+M4 height4(334 bordercolor4!N$N$N$4>BnbspC
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Hasilnya adalah5
<6
Menambahkan Iudul Tabel
Iudul dalam tabel dibedakan menjadi tiga ma!am, yaitu judul tabel, judul kolom table dan
judul baris tabel. Iudul tabel atau biasa disebut %A+T31 terletak dibagian luar tabel yang
bisa berada dibawah atau diatas tabel. Se!ara default caption diletakkan dibagian atas
suatu tabel, tetapi juga dapat diletakkan dibawah suatu tabel dengan menambahkan
atribut AL3)1C#TTM pada elemen caption tersebut.
Iudul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen TA#L5
H5AD5( <TH>. Iudul kolom terletak pada sel disebelah kiri atau kolom pertama suatu
tabel, sedangkan judul baris terletak pada baris pertama suatu tabel. Iudul baris atau judul
kolom akan ter!etak tebal.
-ontoh/0/*.html
<html>
<head>
<title>::: Pembuatan .udul Table :::</title>
</head>
<body>
<table border'>
<caption aligntop><b><u>Da"tar >lamat</u></b></caption>
<tr>
<th 6idth)$>Lo.</td>
<th 6idth'*$>Lama</td>
<th 6idth($$>>lamat</td>
</tr>
<tr>
<td aligncenter>'.</td>
<td>.am O@yatul Ahoir</td>
</tr>
<tr>
<td aligncenter>(.</td>
<td>/ringin >nom 7resik</td>
</tr>
</table>
</body>
</html>
Hasilnya akan tampak sebagai berikut5
<<
-ontoh/0/9.html
<html>
<head>
<title>::: Pembuatan .udul Table :::</title>
</head>
<body>
<table border'>
<caption alignbottom><b><u>Da"tar >lamat</u></b></caption>
<tr>
<th 6idth+$ alignle"t>Lo.</td>
<td 6idth'*$>'.</td>
<td 6idth($$>(.</td>
</tr>
<tr>
<th alignle"t>Lama</td>
<td>.am O@yatul Ahoir</td>
</tr>
<tr>
<th alignle"t>>lamat</td>
<td>/ringin >nom 7resik</td>
</tr>
</table>
</body>
</html>
Hasilnya akan tampak seperti berikut5
<=
Men,atur Lebar dan Tin,,i Suatu Tabel
Lebar tabel diatur dengan menggunakan atribut '3DTH dan untuk mengatur tinggi table
dengan atribut H53)HT. Iika atribut 0#'TH dan H$#*HT digunakan dalam elemen
T(7L$ nilainya menunjukkan lebar dan tinggi tabel terhadap 7:D0S$: sedangkan jika
digunakan pada elemen TH dan T', nilainya merupakan lebar dan tinggi dari suatu tabel.
&ilai atribut mengunakan ukuran N (ma% 6EEN) dan ukuran pi%el.
-ontoh/0/=.html
<html>
<head>
<title>::: Mengatur Lebar dan Tinggi Table :::</title>
</head>
<body>
<table border' 6idth'$$M>
<caption aligntop><b><u>Da"tar >lamat</u></b></caption>
<tr>
</tr>
<tr>
<td height*$>.am O@yatul Ahoir</td>
<td height*$><ulubrangsi Lamongan</td>
</tr>
<tr>
<td height%$>>ri Mulyaningsih</td>
<td height%$>/ringin >nom 7resik</td>
</tr>
</table>
</body>
</html>
Hasilnya tampak sebagai berikut5
<>
+erataan dalam Tabel
erataan dalam tabel dikenal dua ma!am, yaitu perataan se!ara horiOontal dengan atribut
(L#*& dan perataan "ertikal dengan atribut P(L#*&, serta untuk membuat suatu tabel
posisinya menjadi ditengah,tengah layar browser.
-ontoh/0/>.html
<html>
<head>
<title>::: Membuat Perataan Table :::</title>
</head>
<body>
<table border' aligncenter>
<caption aligntop>
<b>Da"tar >lamat</b>
<hr 6idth''$>
</caption>
<tr>
</tr>
<tr>
<td aligncenter 2alignmiddle height*$>.am O@yatul Ahoir</td>
<td alignright 2aligntop height*$><ulubrangsi Lamongan</td>
</tr>
<tr>
<td alignle"t 2alignbaseline height*$>>ri Mulyaningsih</td>
<td alignle"t 2alignbottom height*$>/ringin >nom 7resik</td>
</tr>
</table>
</body>
</html>
Hasilnya seperti gambar berikut5
<?
Membuat 'arna +ada Tabel
'idalam pewarnaan tabel kita dapat mengatur warna latar belakang dan teks serta warna
bordernya. )ntuk menentukan warna latar belakang pada suatu tabel, gunakan atribut
7*9DLD: sedangkan untuk warna border dapat menggunakan beberapa atribut sbb5
Atribut Fun,si
7D:'$:9DLD: Mengubah warna keseluruhan border
7D:'$:9DLD:L#*
HT
Mengubah warna border bagian atas dan kiri
7D:'$:9DLD:'(
:.
Mengubah warna border bagian bawah dan kanan
+en,,abun,an #aris/&olom
)ntuk menggabungkan baris3kolom (merge# digunakan atribut 9DLS(& dan :D0S(&.
9DLS(& digunakan untuk menggabung,kan beberapa kolom menjadi 6 sedangan
:D0S(& menggabungkan beberapa baris menjadi 6.
%ell!addin, Dan %ells!a-in,
9$LL(''#&* digunakan untuk mengatur spasi antara border dengan tulisan,
sedangkan 9$LLS(9#&* digunakan untuk mengatur spasi antar dua buah sel.
-ontoh/0/?.html
<html>
<head>
<title>::: Nontoh Merge- Nell dan Pedd :::</title>
</head>
<body>
<table border( aligncenter bordercolor!F00<0N bgcolor!cc%%$$ cellspacing)
cellpaddingP 6idth'$$M>
<"ont "acearial si1e( color6hite>
<tr>
<td bgcolor!D00&0& colspan( aligncenter>Aelas</td>
<td bgcolor!D00&0& aligncenter ro6span(>Aeterangan</td>
</tr>
<tr>
<td 6idth($$ bgcolor!D00&0& aligncenter>@</td>
<@
<td 6idth($$ bgcolor!D00&0& aligncenter>@@</td>
</tr>
<tr>
<td>?atna <udi 8etyorini</td>
<td>/ilu=eng Handayani</td>
<td aligncenter>Lunas</td>
</tr>
</table>
</body>
</head>
</html>
?. Membuat Frames
+rame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi,bagi
menjadi beberapa dokumen HTML, dimana setiap bagian merupakan satu halaman HTML
terpisah. Sehingga tampilan halaman HTML yang salah satu atau beberapa bagian
berganti,ganti isinya sedangkan bagian lain tetap sehingga dapat menghemat bandwidth
internet dan memper!epat proses download se!ara keseluruhan.
+ormat5
<html>
<head>
</head>
<frameset>
<frame src>
</frameset>
</html>
(turan penggunaan atribut :D0S dan 9DLS pada frameset adalah5
<frameset rows!tin""i#baris$tin""i#baris$%!>
<frameset cols!lebar#&olom$ lebar#&olom$%!>
(tribut,atribut yang digunakan dalam +:(M$ adalah5
Atribut Fun,si
+:(M$S$T 9DLS
Membuat frame "ertikal dengan lebar kolom
tertentu
+:(M$S$T :D0S
Membuat frame horiOontal dengan tinggi baris
tertentu
+:(M$ S:9
Memasukkan dokumen HTML ke dalam +:(M$
&D+:(M$
Memasukkan body teks untuk browser yang
<A
tidak dapat menampilkan frame
ModelJmodel 2rame dan -ontoh !embuatannya"
/
1+:(M$S$T !olsG4Q,6>E42
1+:(M$ S:9G4homepage.htm4 &(M$G4+rame642
1+:(M$ S:9G4menu.htm4 &(M$G4+rame<42
13+:(M$S$T2
*
1+:(M$S$T !olsG46EE,Q42
13+:(M$S$T2
9
1+:(M$S$T rowsG46EE,Q42
13+:(M$S$T2
=
1+:(M$S$T rowsG4Q,@E42
13+:(M$S$T2
>
1+:(M$S$T rowsG4Q,@E42
1+:(M$S$T !olsG4?EN,?EN42
1+:(M$ S:9G4menu<.htm4 &(M$G4+rame=42
13+:(M$S$T2
13+:(M$S$T2
?
1+:(M$S$T !olsG4Q,?EN42
1+:(M$S$T rowsG46?N,6?N,AEN42
1+:(M$ S:9G4menu=.htm4 &(M$G4+rame>42
13+:(M$S$T2
13+:(M$S$T2
1
2
3
4
5
6
<B
@
1+:(M$S$T !olsG4?EN,?EN42
1+:(M$S$T rowsG4?EN,?EN42
1+:(M$ S:9G4homepage<.htm4 &(M$G4+rame<42
13+:(M$S$T2
1+:(M$S$T rowsG4?EN,?EN42
1+:(M$ S:9G4menu.htm4 &(M$G4+rame=42
1+:(M$ S:9G4menu<.htm4 &(M$G4+rame>42
13+:(M$S$T2
13+:(M$S$T2
A
1+:(M$S$T rowsG46?N,AEN,6?N42
1+:(M$S$T !olsG46?N,AEN,6?N42
1+:(M$ S:9G4menu=.htm4 &(M$G4+rame>42
13+:(M$S$T2
1+:(M$ S:9G4homepage.htm4 &(M$G47#*42
13+:(M$S$T2
13+:(M$S$T2
Latihan Men,,unakan F(AM5
7uat file baru dengan nama latihan@.html, header.html, kiri.html, kanan.html, bab6.html
dan bab<.html dengan isi masing,masing sebagai berikut5
File latihan?.html
<html>
<head>
<title>.:: Latihan Membuat 0rame ::.</title>
</head>
<"rameset ro6s($M-Q "ramespacing4$4 border4$4 "rameborder4$4>
<"rame nameatas srcheader.html scrolling4no4 noresi1e>
<"rameset cols(*M-Q "ramespacing4$4 border4$4 "rameborder4$4>
<"rame namekiri srckiri.html scrolling4no4 noresi1e>
<"rame namekanan srckanan.html scrolling4no4 noresi1e>
</"rameset>
</"rameset>
</html>
ada tag *frameset rows+,-.,/0 maksudnya adalah frame yang dibuat terdiri dari dua
bagian3baris dengan ukuran <EN bagian paling atas dan selebihnya (BEN) adalah frame
bagian bawah3baris kedua yang ditunjukkan dengan tanda RQS. *frame name+atas
src+$eader%$tml0 menunjukkan bahwa nama frame adalah atas dan diisi dengan dokumen
$eader%$tml%
*frameset cols+1-.,/0 mempunyai arti bahwa frame bawah dibagi lagi menjadi dua kolom
dengan ukuran =EN untuk frame kiri dan sisanya untuk frame sebelah kanan.
.alau file tersebut dijalankan hasilnya sebagai berikut5
7
8
<C

Tampilan tersebut dikarenakan file,file yang dibutuhkan oleh frame belum dibuat atau tidak
ditemukan. Dleh karena itu lengkapi file,file sebagai berikut5
File header.html
<html>
<head>
<title>.:: Latihan Membuat 0rame ::.</title>
</head>
<b>.::: 8MA P7?@ % Malang :::. </b><br>
</body>
</html>
File kiri.html
<html>
<head>
<title>::: Latihan Membuat 0rame:::</title>
</head>
<body bgcolor!"""""">
<table border' 6idth4((P4 height4(P4 cellspacing$>
<tr>
<td 6idth4('P4 height4((4 bordercolor4!P$$$P$4 bgcolor4!<DNFD&4>
<b><"ont "ace4Tahoma4 si1e4(4>BnbspCBnbspC M e n u</"ont></b>
</td>
</tr>
<tr>
<td 6idth4('P4 height4((4 bordercolor4!P$$$P$4>
<b><"ont "ace4Tahoma4 si1e4(4>BnbspCBnbspC
<a hre"kanan.html targetkanan>H o m e</a></"ont></b></td>
</tr>
<tr>
<b><"ont "ace4Tahoma4 si1e4(4>
BnbspCBnbspC <a hre"proli.html targetkanan>Program Aeahlian</a>
</"ont></b></td>
</tr>
<tr>
<b><"ont "ace4Tahoma4 si1e4(4>
=E
BnbspCBnbspC <a hre"ekstra.html targetkanan>Fkstra Aurikuler</a>
</"ont></b></td>
</tr>
</table>
</body>
</html>
File kanan.html
<html>
<head>
<title>::: Latihan Membuat Link Ae Dokumen Lain :::</title>
</head>
<table border' bordercolorbordercolor4!P$$$P$4
cellspacing$ cellpadding*$ 6idth3*$ height)*$>
<tr>
<td 2aligntop>
8elamat datang di 6eb kami ...
</td>
</tr>
</body>
</html>
File proli.html
<html>
<head>
</head>
<tr>
<td 2aligntop>
Program Aeahlian :<br>
<"ont si1e'>
<ul typecircle>
<li>?ekayasa Perangkat Lunak
<li>Teknik Flektronika @ndustri
<li>Teknik Pembangkit Tenaga Listrik
<li>Teknik Mekanik :tomoti"
<li>Teknik <odi :tomoti"
<li>Teknik Pemesinan
<li>Teknik Las
</ul>
</td>
</tr>
</body>
</html>
File ekstra.html
<html>
<head>
</head>
=6
<tr>
<td 2aligntop>
Fkstra Aurikuler :<br>
<"ont si1e'>
<ul typecircle>
<li>8eni <ela Diri Tapak 8uci
<li>Aeagamaan
<li>8epak <ola
<li><ola <asket
<li>Aepenyiaran
</ul>
</td>
</tr>
</body>
</html>
@. Form Html
'igunakan untuk menerima masukan3input dari user dan memproses hasil inputan
tersebut di ser"er. )ser menerima informasi melalui sejumlah elemen yang disebut
kontrol. .ontrol ini dapat berupa T$8T7D8, 9H$9.7D8, :('#D 7)TTD&, )SH
7)TTD&, L#ST M$&) dan lainnya.
Sintak penulisan form adalah5
<"orm methodGpost atau getG actionGprogram5pemrosesG>
elemen9elemen 0:?M
</"orm>
(tribut M$THD' mempunyai dua nilai yaitu DST dan *$T. Metode *$T mengirimkan
data pada ser"er dengan !ara meletakkan data pada bagian akhir ):L yang ditunjuk.
Metode DST mengirimkan datanya se!ara terpisah. Iika data masukan banyak, lebih
disarankan untuk menggunakan metode post. (tribut (9T#D& berisi ):L dari program
yang dipanggil oleh form tersebut.
Text#K
=<
Te%tbo% digunakan untuk memasukkan data string sebanyak satu baris. 9ara
penulisannya adalah5
<input typete#t namete#tbo#' si1e## 2alue>
(tribut T/$ untuk menentukan jenis masukan yang berupa T$8T (te%tbo%), &(M$
adalah identifikasi3penamaan elemen ini untuk diba!a oleh program pemroses nantinya.
(tribut P(L)$ untuk memberi nilai suatu masukan. Sedangkan atribut S#J$ digunakan
untuk menentukan panjang atau banyaknya karakter sebuah masukan. )ntuk
menyembunyikan masukan yang ditulis user dalam te%tbo%, dapat menggunakan atribut
T/$GH(SS0D:'H, sehingga tampilan dalam te%tbo% menjadi karakter TQH.
-ontoh/0/@.html
<html>
<head>
<title>::: 0orm @nput dengan TFRT<:R :::</title>
</head>
<body>
<h%>?ancangan a6al <,A, T>M,</h%>
<"orm methodpost>
<table border$>
<tr>
<td 6idth3$>Lama</td>
<td 6idth'$>:</td>
<td 6idth%$><input typete#t namenama si1e%$></td>
</tr>
<tr>
<td 6idth3$>>lamat</td>
<td 6idth'$>:</td>
<td 6idth%$>
<input typete#t 2alue.l. namealamat si1e%$></td>
</tr>
<tr>
<td 6idth3$>Homepage</td>
<td 6idth'$>:</td>
<td 6idth%$>
<input typete#t 2aluehttp:// namepage si1e%$></td>
</tr>
</table>
</"orm>
</body>
</html>
Tampilan untuk !ontoh diatas adalah5
%H5%&#K
==
9he!k7o% digunakan untuk memberi beberapa pilihan kepada user, sehingga user dapat
memilih salah satu, lebih dari satu pilihan atau tidak memilih sama sekali.
Tata !ara penulisannya adalah5
<input typecheckbo# namecheckbo#' 2alueon atau o"" checked>Pilihan '
'imana attribut T/$ menentukan jenis masukan yang berupa 9H$9.7D8, &(M$
adalah identifikasi dari elemen ini untuk diba!a oleh program pemroses nantinya, P(L)$
menentukan apakah pada keadaan awal !he!kbo% ini terpilih (D&) atau tidak (D++).
arameter 9H$9.$' menentukan apakah !he!k7D8 sedang di!entang atau tidak
-ontoh/0/A.html
<html>
<head>
<title>::: 0orm @nput dengan NHFNA<:R :::</title>
</head>
<body>
<"orm methodpost>
Pilih Program Aeahlian >nda<br>
<h%>Da"tar Program Aeahlian 8MA P7?@ % Malang</h%>
<p>
<input typecheckbo# namec' checked>?ekayasa Perangkat Lunak<br>
<input typecheckbo# namec(>Teknik Flektronika @ndustri<br>
<input typecheckbo# namec%>Teknik Pembangkit Tenaga Listrik<br>
<input typecheckbo# namec)>Teknik :tomoti2e<br>
</"orm>
</body>
</html>
Hasil !ontoh diatas adalah sebagai berikut5
(AD3 #utton
'igunakan untuk membuat pilihan. )ser dapat memilih salah satu pilihan yang tersedia,
sehingga user tidak bisa memilih kurang atau lebih dari satu pilihan yang disediakan.
(tribut 9H$9.$' memberi tanda bahwa pilihan tersebut sedang diaktifkan, P(L)$
adalah harga dari pilihan
-ontoh/0/D.html
=>
<html>
<head>
<title>::: 0orm @nput dengan ?>D@: <utton :::</title>
</head>
<body>
<"orm methodpost>
<h%>Pilih 8alah satu<br>
Pendidikan Terakhir >nda : </h%>
<input typeradio 2alue48D4 checked namesekolah>8D<br>
<input typeradio 2alue48LTP4 namesekolah>8LTP<br>
<input typeradio 2alue48M,4 namesekolah>8M,<br>
<input typeradio 2alue48'4 name sekolah >8'<br>
<input typeradio 2alue48(4 name sekolah >8(<br>
</"orm>
</body>
</html>
Hasil !ontoh program tersebut adalah5
D(+JD'1 Menu
'igunakan untuk membuat menu pilihan. 9ara menuliskannya adalah5
<select namemenu'>
<option 2alue9pilihan'>Pilihan '
<option 2alue9pilihan(>Pilihan (
<option 2alue9pilihan%>Pilihan %
dst S
</select>
Tag DT#D& berfungsi untuk menampilkan pilihan,pilihan yang akan tersedia. Setiap
pilihan ditentukan isinya dengan parameter P(L)$.
-ontoh/0*H.html
<html>
<head>
<title>::: 0orm @nput dengan D?:P9D:/L Menu :::</title>
</head>
<body>
<"orm methodpost>
<h%>Pilih 8alah satu<br>
.urusan : </h%>
<select name=urusan>
<option 2alueT@ selected>Teknik @n"ormatika</option>
<option 2alueF@>Flektronika @ndustri</option>
<option 2alueM:>Mesin :tomoti2e</option>
<option 2alue<:><odi :tomoti2e</option>
<option 2alueMP>Mesin Perkakas</option>
=?
<option 2alueML>Mesin Las</option>
</select>
</"orm>
</body>
</html>
Tampilan !ontoh diatas adalah sebagai berikut5
T5KT Area
$lemen ini digunakan untuk menampilkan masukan berupa te%tbo% yang mampu
menerima masukan berupa string lebih dari satu baris.
Sintaknya adalah5
<te#tarea namete#tbo#' ro6s## cols##>@si >6al
</te#tarea>
arameter &(M$ adalah identifikasi dari elemen ini untuk diba!a oleh program pemroses
nantinya, 9DLS dan :D0S adalah ukuran kolom dan baris te%tbo% ini dalam banyaknya
karakter
-ontoh/0*/.html
<html>
<head>
<title>::: 0orm @nput dengan Te#t >rea :::</title>
</head>
<body>
<"orm methodpost>
<h*>@sikan Pesan dan kesan</h*>
<te#tarea namete#tbo#' ro6s* cols)$>Pesan >nda:
</te#tarea>
</"orm>
</body>
</html>
Tampilan !ontoh diatas adalah sebagai berikut5
=@
5lemen Tombol
$lemen ini digunakan untuk menampilkan tombol yang dapat berupa tombol S)M7#T
untuk mengirimkan data ke pemroses di ser"er, :$S$T untuk mengulangi3mengosongkan
isian form atau &D:M(L yang tidak berfungsi apapun sebelum kita mendefinisikan
sebuah fungsi untuknya.
+ormat penulisannya adalah5
<input typesubmit 2alue:A nametombol'>untuk tombol 8,<M@T
<input typereset 2aluereset nametombol(>untuk tombol ?F8FT
-ontoh/0**.html
<html>
<head>
<title>::: <uku Tamu :::</title>
</head>
<body>
<h%><p aligncenter><,A, T>M,</p></h%>
<"orm methodpost>
<table border$ aligncenter 6idth*$$>
<tr>
<td 6idth''M>Lama</td>
<td 6idth%M>:</td>
<td 6idthP+M><input typete#t namenama si1e($></td>
</tr>
<tr>
<td 6idth''M>>lamat</td>
<td 6idth%M>:</td>
<td 6idthP+M>
<input typete#t 2alue.l. namealamat si1e%$></td>
</tr>
<tr>
<td 6idth''M>Fmail</td>
<td 6idth%M>:</td>
<td 6idthP+M><input typete#t nameemail si1e($></td>
</tr>
<tr>
<td 6idth''M>/ebsite</td>
<td 6idth%M>:</td>
<td 6idthP+M>
<input typete#t 2aluehttp:// namepg si1e%$></td>
</tr>
=A
<tr>
<td 6idth''M 2aligntop>Homepageku</td>
<td 6idth%M 2aligntop>:</td>
<td 6idthP+M>
<input typeradio 2aluehebat namesaran checked>
<agus 8ekali<br>
<input typeradio 2aluebagus namesaran>
<agus<br>
<input typeradio 2aluebiasa namesaran>
<iasa >=a<br></td>
</tr>
</table>
<p aligncenter>
<input typesubmit 2aluekirim nameb'>
<input typereset 2aluebatal nameb(>
<hr>
</"orm>
</body>
</html>
Hasilnya adalah5
a. (an,kuman /
Setelah kita mempelajari materi pertama ini, kita dapat menarik kesimpulan, ternyata
membuat3membangun halaman web itu mudah sekali. 'engan hanya bermodalkan editor teks
biasa, kita sudah dapat belajar banyak tentang tag,tag html yang digunakan untuk membuat
sebuah halaman web.
Struktur HTML se!ara garis besar dibagi menjadi 1head2 dan 1body2. 'i bagian 1body2 kita
dapat menuliskan semua kode html yang akan kita gunakan untuk membangun halaman web,
yaitu diantaranya pengaturan teks, pengaturan image, hyperlink, pembuatan table dan
pembuatan frame.
Lanjutkan ke materi berikutnya agar pengetahuan anda dalam membangun halaman web
lebih banyak lagi.
b. Tu,as /
=B
6. .unjungi beberapa website (minimal 6E website). (matilah website yang telah anda
kunjungi. /ang harus anda amati adalah meliputi5
a% Layout"
Seberapa besar daya tarik dan unsur seni dari web yang anda amati.
7agaimana model layout web tersebut, berbentuk tabel atau frame-
b. %ontent/3si, (pa saja isi dari web tersebut.
Silahkan !atat hasil pengamatan anda.
<. Teliti profil sebuah organisasi3lembaga (misal5 .)', emerintah .ota, Sekolah dan lain,
lain). 9atat semua hasil penelitian anda. 'ari hasil penelitian anda, silahkan buat website
statis yang isinya adalah profile dari yang anda teliti. 7ila perlu tawarkan website buatan
anda kepada organisasi3lembaga tersebut.
=. Silahkan !ari dan download tutorial berbahasa #nggris di #nternet yang berhubungan
dengan web programming, (misalnya H, (S dan lain,lain).
=C

HTML To Blog

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

HTML To Blog

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Pemrograman Web

HTML (Hypertext Markup Language)

Anda mungkin juga menyukai