html pertamaku.docx

7/23/2019 HTML Pertamaku.docx

http://slidepdf.com/reader/full/html-pertamakudocx 1/21

HTML PertamakuPosted on June 27, 2011

Sekarang mari coba menuliskan kode HTML pertama kita. Masih ingat flehtml pertamax.html yang sudah kita buat di pengenalan HTML sebelumnya?Edit fle itu menggunakan otepad. Saya sendiri menyarankanmenggunakan otepad!! sebuah so"t#are yang mirip notepad tapidikhususkan untuk menulis kode$kode programming. %ika anda sempat&silahkan do#nload notepad!! dulu. Tapi pakai notepad ba#aan #indo#s

'uga oke kok.Sekarang coba ketik ini di notepad anda.

Apa Kabar Dunia!!!

Simpan fle itu dan klik dua kali fle pertamax.html. (agaimana hasilnya?

)up benar& akan muncul tulisan *pa +abar ,unia di bro#ser anda. Mudahsekali bukan?

TEXT FORMATING

Sekarang bagaimana memanipulasi tampilan tulisan sehingga menghasilkantampilan yang keren seperti di #ebsite$#ebsite pada umumnya. Makadisinilah kita mulai bela'ar HTML. +ita akan melakukan Markup tulisansehingga bisa muncul sesuai keinginan.

Manipulasi yang pertama adalah Text -ormating. ni adalah manipulasibagaimana menampilkan text yang sesuai keinginan. Meliputi bagaimanamenebalkan text& memiringkan& memberi garis ba#ah& dll. +ita mulai yuk.Silahkan lihat tabel berikut/

0strong1 Menebalkan huru"

0em1 Memiringkan huru"

0ins1 Menggarisba#ahi huru"

0del1 Mencoret huru"

0kbd1 Membuat huru" keyboard

0sub1 Membuat huru" subscripted

0sup1 Membuat huru" superscripted

Tag HTML memiliki sepasang tanda yaitu pembuka dan penutup. Misalnyatag strong& dia memiliki dua tag untuk pembuka yaitu 0strong1 dan penutup02strong1. 3ntuk menggunakannya& anda tinggal memasang text diantaradua tag tersebut. 4ontohnya 'ika ingin menebalkan tulisan kita sebelumnya<strong>Apa Kabar Dunia!!!</strong>

Sekarang cobalah untuk tag$tag yang lain. Seperti ini misalnya/

http://gudanginfo.web.id/html/html-pertamaku.html

http://gudanginfo.web.id/html/pengenalan-html.html

http://notepad-plus-plus.org/

http://gudanginfo.web.id/html/pengenalan-html.html

http://notepad-plus-plus.org/

http://gudanginfo.web.id/html/html-pertamaku.html



<strong>Apa Kabar Dunia!!!</strong>

<em>Apa Kabar Dunia!!!</em>

<ins>Apa Kabar Dunia!!!</ins>

<del>Apa Kabar Dunia!!!</del>

<kbd>Apa Kabar Dunia!!!</kbd>

<sub>Apa Kabar Dunia!!!</sub>

<sup>Apa Kabar Dunia!!!</sup>

+ita akan bahas tag yang lain nanti ya.

Memasukkan GambarPosted on Ju! 7, 2011

%ika sebelumnya kita membahas bagaimana mem"ormat text di HTML& makasekarang kita akan coba ke teknik yang cukup sering kita pakai 'uga yaitubagaimana memasukkan gambar ke dalam HTML

*da 5 tahap untuk memasukkan gambar dalam HTML yaitu/

6. Menentukan lokasi gambar5. Memasang kode gambar

Lokasi gambar adalah "older dimana gambar itu diletakkan berdasarkan letakfle HTML yang mengaksesnya. Misalnya fle html$nya ada di "older c/7#ebsitedan gambarnya ada di "older c/7#ebsite7images dengan nama gambarku.'pgmaka berarti lokasi fle gambarnya adalahc/7#ebsite7images7gambarku.'pg

dan nanti di kode HTML$nya kita tulis seperti ini/

images2gambarku.'pg

+emudian untuk memunculkan gambar& kita letakkan kode ini di fle HTML/

<img src="LOKASI GAMBAR" alt="TEXT ALTERNATIF" />

LO"A#I GAM$AR % lokasi dimana gambar itu berada lengkap dengan nama

gambarnya

http://gudanginfo.web.id/html/memasukkan-gambar.html

http://gudanginfo.web.id/html/memasukkan-gambar.html



TEXT ALTERNATIF % Text yang muncul 'ika gambar yang kita tampilkantidak muncul

%ika mengacu pada contoh diatas& berarti kodenya akan seperti ini/

<img src="images/gambarku.jpg" alt="Ini Gambarku"/>

Sudah paham? nsya *llah di artikel mendatang kita bahas bagaimanamelakukan modifkasi terhadap gambar kita ini

Membuat Te&t Men'a(r )(

seke((n' GambarPosted on Ju! 7, 2011

*da kalanya kita ingin membuat seperti di ma'alah$ma'alah dimana textmengalir di sekeliling gambar. Mungkin akan lebih 'elas 'ika saya tun'ukkangambar ini/

$a'a(mana *aran!a+

+ita akan memasukkan style 4SS ke dalam kode gambar sehingga bisa

melakukan aneka macam modifkasi. nsya *llah nanti di bagian 4SS kita

akan pela'ari semua lebih rinci. +arena artikel ini bertu'uan untuk membuat

text yang mengalir di sekeliling gambar& maka kita bahas bagian itu sa'a dulu

ya.

3ntuk menambah 4SS di kode HTML& kita cukup menambahkan atribut style

sa'a. Sehingga hasilnya seperti ini/

<img src="images/gambarku.jpg" alt="Ini Gambarku" style="float:right"/>

Perhatikan& ada tambahan style89:oat/right9 pada atribut images$nya. Pada

contoh diatas& saya buat gambar ada di sebelah kanan dan text mengalir di

sebelah kirinya. *pabila ingin gambarnya di kiri dan text di kanan& maka kita

cukup mengganti kata right dengan le"t. ;ambar bukan? 4ontohnya sepertiini/

<img src="images/gambarku.jpg" alt="Ini Gambarku" style="float:left"/>

(isa dimengerti kan?

<ke& insya *llah besok kita bahas bagian HTML yang cukup penting dalam

SE< yaitu Heading. ,oakan mudah$mudahan punya banyak #aktu ya..

Thanks

http://gudanginfo.web.id/html/membuat-text-mengalir-di-sekeliling-gambar.html

http://gudanginfo.web.id/html/membuat-text-mengalir-di-sekeliling-gambar.html

Ma*amma*am Hea)(n'Posted on Ju! -, 2011

Sebagaimana dokumen biasa& HTML 'uga memiliki heading. *da Heading 6hingga heading =. (iasanya dalam pembuatan #eb& kita hanya menggunakansampai heading > sa'a. ata$rata malah cuma sampai Heading @. (agi yangbelum paham apa maksudnya heading& silahkan coba buka buku apa sa'akhususnya buku$buku non fksi. ,isana pasti ada (ab& sub bab& dst. ah&heading itu seperti itu.

,i dalam pembuatan #eb& anda harus meletakkan heading dalam halaman#eb anda. ;unanya apa? *gar Search engine mampu mengenali tema danmateri yang sedang anda sampaikan di halaman #eb tersebut. ,enganbegitu& mereka tidak akan salah persepsi. Misalnya anda membuat artikel#eb tentang mobil bekas& maka ketika ada yang mengetikkan mobil bekas&

#eb anda bisa ikut ditampilkan.3ntuk membuatnya& kita pakai kode yang sederhana banget yaitu/

0hn1Text yang dimunculkan02hn1

n 8 angka yang menun'ukkan itu heading leAel berapa.

%adi misalnya kita mau bikin heading 6& maka kodenya/

0h61Text yang dimunculkan02h61

3ntuk H5& H@& H>& dst anda tinggal mengganti angkanya sa'a. Mudah sekali

bukan?

Membuat F.rmu(r Is(anPosted on Ju! -, 2011

Sekarang kita akan bela'ar bagaimana membuat "ormulir isian di HTML. *damacam$macam modul input datanya dan insya *llah akan kita bahas semua.+ita mulai dengan membuat "ormat sebuah "ormulir. 3ntuk membangun"ormulir& anda harus menga#ali dan menutupnya dengan tag

. 4ontohnya seperti ini/<form action="" method="post">



</form>

Tag "orm memiliki setidaknya 5 atribut. Pertama yaitu action yangmenun'ukkan fle untuk memproses "ormulir. (iasanya sebuah fle php. nsya*llah nanti kita bahas di bagian PHP 'uga. %adi sementara kita kosongi dulu.

Mengkosongi atribut action 'uga berarti mengirimkan data ke fle yang sama.

http://gudanginfo.web.id/html/macam-macam-heading.html

http://gudanginfo.web.id/html/membuat-formulir-isian.html

http://gudanginfo.web.id/html/macam-macam-heading.html



,an karena fle ini tidak ada "ungsi untuk memproses data& maka ya tidakakan ter'adi apa$apa.*tribut berikutnya adalah method. *da 5 macam method yaitu P<ST dan ;ET.Method P<ST dipakai untuk pengiriman data "ormulir yang cukup besar.Misalnya buku tamu& threat "orum& input artikel baru atau apa a'alah. Method

;ET dipakai untuk pengiriman data yang sangat kecil. Misalnya "orm untuksearch engine dimana yang dikirim hanya beberapa kata pencarian sa'a.

antinya& semua input data harus diletakkan diantara tag 0"orm action899

method89post91dan 02"orm1. %ika anda meletakkan diluar tag tersebut& makadata itu tidak akan dikirimkan ke fle pemroses.nsya *llah di artikel mendatang akan saya 'elaskan tentang tag$tag untukmemasukkan data$data pengun'ung. Mudah$mudahan berman"aat

-orm nput ,ataPosted on Ju! -, 2011

+ita lan'utkan pembahasan soal "orm. Setelah anda membuat blok "ormulir

sebagaimana dibahas di artikel cara membuat "orm isian sebelumnya&

sekarang kita akan bahas elemen$elemen "orm yang bisa kita masukkan.

Mudah$mudahan bisa kita bahas dalam 6 artikel. +alau ndak ya beberapa

artikel.. hehehe..

TAG INP/T

Tag pertama untuk memasukkan data adalah P3T. Tag ini sudah sering kita

'umpai di search engine& "orm opt$in subscriber atau "ormulir$"ormulir online

lainnya. (iasanya dipakai untuk memasukkan data yang hanya 6 baris sa'a

seperti nama& email& alamat rumah& dsb.

4ara membuat input inipun gampang. +ode HTML$nya seperti ini/

<input type="text" name="NAMA_FIELD" size="30" />

+arena tag ini tidak memiliki tutup& maka kita tutup di bagian akhirnya

dengan tanda 21. ,an sekarang saya 'elaskan satu per satu

*tribut type dipakai untuk menentukan 'enis input$nya. *da beberapa macam

type yaitu/

6. button 8 input berbentuk tombol5. checkbox 8 input berbentuk tanda centang& dipakai untuk memilih

lebih dari 6 opsi@. fle 8 input fle utk diupload

http://gudanginfo.web.id/html/form-input-data.html






>. hidden 8 input data tersembunyi& biasanya data de"aultB. image 8 input berbentuk gambar& biasanya dipakai menggantikan

tombol submit dengan gambar=. pass#ord 8 input untuk pass#ord. +alau diketik& tulisannya berubah

'adi CCCCC

D. radio 8 input bulatan& dipakai untuk memilih satu dari beberapa opsi. reset 8 tombol reset untuk menghapus semua isian "ormF. submit 8 tombol untuk mengirimkan data6G. text 8 input berbentuk kotak untuk mengisikan data

*tribut berikutnya adalah name. *tribut ini dipakai untuk mengenali data apa

yang sedang dimasukkan. Misalnya anda membuat "orm untuk memasukkan

email& maka anda bisa menamai name ini dengan email seperti ini

contohnya/

<input type="text" name="email" size="30" />

3ntuk sie& berisi angka yang menun'ukkan berapa karakter lebar kotak

input$nya. Semakin besar tentunya semakin lebar kotaknya.

Membuat <ptionalPosted on Ju! -, 2011

*da kalanya kita ingin memberikan beberapa opsi bagi pengun'ung saatmereka mengisikan "ormulir. ,i HTML& ada beberapa macam cara untuk

menampilkan optional. ,an kita akan membahasnya disini.

<h iya& sebelum diteruskan& artikel ini masih satu rangkaian dengan artikel

tentang cara membuat "orm HTML ya. %adi& kode$kode ini harus diletakkan di

dalam blok "orm yang sudah kita bahas di artikel sebelumnya. ,an inilah

beberapa cara untuk menampilkan opsi kepada pengun'ung/

RAIO $/TTON

adio button adalah opsi berbentuk bulatan dimana pengun'ung harus

memilih salah satu dari beberapa opsi yang ada. Misalnya untuk toko

garmen& opsi ini bisa dipakai untuk memilih ukuran pakaian yang diinginkan.

4ontohnya seperti ini/

<p>Ukuran:<br/>

<input type="radio" name="ukuran" value="S"/> S<br/>

<input type="radio" name="ukuran" value="M"/> M<br/>

http://gudanginfo.web.id/html/membuat-optional.html






<input type="radio" name="ukuran" value="L"/> L</p>

+ode diatas& akan menghasilkan seperti ini/

3kuran/

S

M

L

Mudah sekali bukan? ah& kita coba lagi optional yang lain yaitu

HE"$OX

Prinsipnya hampir sama dengan radio button& hanya sa'a di opsi ini&

pengun'ung bisa memilih lebih dari 6 pilihan. (iasanya dipakai di "orm

subscribe yang memiliki lebih dari 6 berita. )uk& kita langsung lihat

contohnya/

<p>Info yang diinginkan (bisa lebih dari satu):<br/>

<input type="checkbox" name="info" value="bisnis"/> Bisnis<br/>

<input type="checkbox" name="info" value="marketing"/> Marketing<br/>

<input type="checkbox" name="info" value="blogging"/> Blogging</p>

+ode diatas& akan menghasilkan optional seperti ini/

n"o yang diinginkan Ibisa lebih dari satuJ/

(isnis



Marketing

(logging

Sangat mudah bukan? Masih ada 5 cara lagi untuk menentukan pilihan. )ang

dua ini kita pakai 'ika pilihannya cukup banyak. Mungkin pilihan nama

propinsi atau pilihan yang lainnya. )ang 'elas& 'ika pilihan itu kita tampilkan

semua sebagaimana contoh diatas& tentunya akan sangat memakan tempat.

nsya *llah kita bahas di artikel mendatang

Membuat <ptional ,ata dari(anyak ,ataPosted on Ju! , 2011

Sesuai 'an'i saya& di artikel ini saya akan 'elaskan bagaimana membuat

optional dengan banyak data. Pada artikel sebelumnya tentang membuat

optional kita hanya bisa menggunakan sedikit data sa'a. Paling @$> data a'a

sudah tergolong banyak nantinya. (iasanya sih dua data yaitu 'enis kelamin

hehehe..

ah& bagaimana kalau pilihannya ada banyak& misalnya propinsi atau nama

negara gitu& maka kita memerlukan optional dalam bentuk drop do#n. HTML

menyediakan tag untuk menampilkan optional dalam bentuk dropdo#n

dengan "ormat seperti ini/

<select name="NAMA_FIELD">

<option value="VALUE-1">LABEL-1</option>




......

</select>

http://gudanginfo.web.id/html/membuat-optional-data-dari-banyak-data.html



http://gudanginfo.web.id/html/membuat-optional-data-dari-banyak-data.html





+ita menggunakan tag select untuk membuat dropdo#n option. ,an untuk

menampilkan opsi$opsinya& kita menggunakan tag option. *M*K-EL,

sebagaimana telah di'elaskan dalam membuat input data& berguna untuk

mengidentifkasi nama data yang dikirimkan.

*L3E$6 sampai *L3E$> dan seterusnya kita pakai untuk memberi isi

datanya 'ika pengguna memilih label tersebut. Misalnya pengguna memilih

L*(EL$>& maka data yang dikirimkan adalah *L3E$>. *L3E dan L*(EL bisa

dibuat sama atau berbeda$beda terserah anda.

3ntuk tanda titik$titik itu tambahan yang menun'ukkan dst& 'adi 'angan

diketik titik$titik gitu ya hehehe

M/LTIPLE OPTION

Selan'utnya bagaimana kalau kita ingin pengun'ung bisa memilih lebih dari

satu option& maka tag select ini kita tambahkan atribut multiple. 4ontohnya

seperti ini/

<select name="NAMA_FIELD" multiple="multiple" size="2">





......

</select>

Pada kode diatas& saya tambahkan dua atribut baru yaitu multiple89multiple9

sie8959. Multiple dipakai untuk menun'ukkan bah#a opsi ini bisa dipilih lebih

dari satu. 3ntuk memilih lebih dari satu& user cukup menekan tombol 4trl dan

klik opsi yang diinginkan. (agi pengguna Machintos& klik 4ommand (utton$

nya.

*tribut sie adalah 'umlah opsi yang dimunculkan. ,e"aultnya kan cuma 6

a'a. ah& biar pengguna tahu kalau ini multiple option& maka kita tampilkan

lebih dari 6& misalnya 5. Tapi kalau opsinya banyak saya sarankan lebih dari 5

yang dimunculkan.





4ukup dimengerti kan? nsya *llah artikel mendatang saya coba 'elaskan

bagaimana memasukkan data teks dalam 'umlah besar& misalnya artikel atau

komentar. Stay tune di gudangin"o.#eb.id ya

n3ut ata Art(kePosted on Ju! 10, 2011

<ke& masih berbicara soal "orm pengisian online. +ini kita akan memasukkansatu elemen "orm yang 'uga sangat sering dipakai yaitu textarea. Textarea iniadalah kotak untuk memasukkan data berupa artikel atau tulisan yang cukuppan'ang. (iasanya untuk "orm komentar& iklan baris& pengisian artikel& dll.4ara membuat textarea sangat mudah. (erikut ini adalah kodenya/

<textarea name="NAMA_FIELD" cols="LEBAR_KOLOM"

rows="TINGGI_KOTAK"></textarea>

NAMA4FIEL % nama data yang dimasukkanLE$AR4"OLOM % berisi angka yang menun'ukkan berapa karakter lebarkotaknyaTINGGI4"OTA" % berisi angka yang menun'ukkan berapa karakter tinggikotaknya(erikut ini adalah contoh cara penggunaannya/

<textarea name="artikel" cols="20" rows="5"></textarea>

Mudah sekali bukan?

Membuat Tombol Submit dan

eset

Posted on Ju! 10, 2011

Sampailah kita pada bagian akhir pembuatan "orm dengan HTML. *palagi

kalau bukan tombol submit dan reset. Sebenarnya& saya sudah men'elaskan

tentang tombol submit ini di pela'aran tentang input data& hanya sa'a

mungkin anda belum ter"okus kesana sehingga saya perlu untuk men'elaskan

lebih lan'ut disini.

3ntuk membuat tombol submit& kita menggunakan kode seperti ini/

<input type="submit" value="Kirimkan"/>

http://gudanginfo.web.id/html/input-data-artikel.html


http://gudanginfo.web.id/html/membuat-tombol-submit-dan-reset.html

http://gudanginfo.web.id/html/input-data-artikel.html


http://gudanginfo.web.id/html/membuat-tombol-submit-dan-reset.html



Sedangkan untuk tombol reset& kita menggunakan kode/

<input type="reset" value="Hapus Form"/>

+ata$kata +irimkan dan Hapus -orm bisa anda ganti dengan kata$kata yang

lainnya sesuka hati.

#/$MIT MENGG/NA"AN GAM$AR

Sekarang kita akan mencoba membuat tombol submit menggunakan gambar.

4aranya hampir sama& hanya sa'a kita sekarang menggunakan

type8NimageN. 4ontohnya seperti ini/

<input type="image" src="file-gambar.jpg" width="55" height="22"/>

fle$gambar.'pg harus anda ganti dengan gambar anda sendiri. #idth dan

height adalah ukuran lebar dan tinggi gambar dalam satuan pixel.

ah& dengan berakhirnya artikel tentang tombol submit ini& maka berakhir

'ugalah rangkaian pela'aran tentang membuat "orm ini. nsya *llah nanti kita

akan bahas elemen$elemen HTML yang lain.

Membuat TabePosted on Ju! 11, 2011

Sekarang saatnya kita bela'ar bagaimana membuat table di HTML. +ita mulaidengan table yang sederhana dulu hingga menu'u table yang lebih rumit danru#et nantinya. Sebelum saya teruskan& saya menyarankan untuk membuattable hanya untuk tabel. %angan gunaka table sebagai layout #eb. Selainmemberatkan& 'uga tidak e"ekti". Saya masih melihat banyak template$template #eb yang keren$keren menggunakan table. ni tentunya sangattidak sehat bagi kecepatan load #eb anda. So& gunakan table untuk tabelsa'a.

*da @ komponen utama dalam pembuatan tabel yaitu/

O Penanda table 0table1

O Penanda baris 0tr1

O Penanda kolom 0td1

,an inilah contoh sebuah table sederhana dengan @ kolom dan 5 baris/<table>

<tr>


http://gudanginfo.web.id/html/membuat-tabel.html


http://gudanginfo.web.id/html/membuat-tabel.html



<td>Kolom 1 Baris 1</td>



</tr>

<tr>




</tr>

</table>

Hasilnya akan seperti ini/

+olom 6 (aris 6 +olom 5 (aris 6 +olom @ (aris 6

+olom 6 (aris 5 +olom 5 (aris 5 +olom @ (aris 5*nda paham bagaimana cara membuatnya bukan? 3ntuk mempermudahmembuat table& saya biasanya pakai rumus ini/

6. Saya tulis dulu tablenya seperti ini/

<table>

</table>

5. Saya masukkan barisnya. Misalnya kita mau bikin 5 baris& maka sayatinggal pasang 5 tag T seperti ini/

<table>

<tr>

</tr>

<tr>



</tr>

</table>

@. Sekarang tinggal masukkan kolomnya a'a di tiap baris seperti ini/

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

</tr>

</table>

(aris kedua saya biarkan agar anda bisa "okus di baris pertama dulu.>. Terakhir memasukkan isi kolomnya

<table>

<tr>

<td>Kolom 1</td>

<td>Kolom 2</td>

<td>Kolom 3</td>

</tr>

<tr>

</tr>



</table>

Selesai deh Mudah sekali bukan? nsya *llah artikel berikutnya kita akanbahas tabel yang lebih rumit lagi. Sampai 'umpa nanti ya

Membuat Tabe ".m3eksPosted on Ju! 15, 2011

Sesuai 'an'i& maka kali ini kita akan bahas bagaimana cara membuat sebuahtable yang kompleks. +ompleks disini adalah sebuah tabel yang akanmenggabungkan beberapa cell sesuai kebutuhkan. 4ontohnya seperti ini/

ama(3L*

%anuari -ebruari Maret *pril

L3T 6G.GGG 6G.GGG 6G.GGG 6G.GGG

M 6G.GGG 6G.GGG 6G.GGG 6G.GGG

*TH* 6G.GGG 6G.GGG 6G.GGG 6G.GGG

(agaimana cara membuatnya?

+ita "okuskan kodenya sampai baris L3T sa'a atau baris ke$@. Sisanyatinggal mengikuti sebagaimana baris lutAi.umus sederhana untuk membuat kode rumit diatas adalah seperti ini/

6. (uat dulu tag table

<table>

</table>

5. ,i tengahnya kita masukkan berapa baris tabel yang ingin kita buat.Misalnya contoh diatas kita buat sampai L3T& berarti ada @ baris

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

http://gudanginfo.web.id/html/membuat-tabel-kompleks.html

http://gudanginfo.web.id/html/membuat-tabel-kompleks.html



</tr>

</table>

@. Sekarang kita buat kolomnya. ,i baris pertama& kolom pertama& kolomnyaturun hingga baris ke$5. (erarti ada 5 baris yang digabungkan. Makaatributnya <QSP*8959. Sehingga 'adinya seperti ini/<table>

<tr>

<td rowspan="2"></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

>. +olom kedua di baris pertama menggabungkan > kolom. Makaatributnya 4<LSP*89>9. Sehingga 'adinya seperti ini/<table>

<tr>


<td colspan="4"></td>

</tr>

<tr>

</tr>

<tr>

</tr>



</table>

B. (erikutnya baris kedua. +arena kolom pertama sudah diambil alih olehkolom pertama baris pertama& maka sudah tidak perlu kita urus lagi. %adi&langsung a'a ke kolom kedua& ketiga& keempat dan kelima. %adinya seperti ini/

<table>

<tr>



</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

</tr>

</table>

Lihat kan? Saya cuma menambahkan > kolom sa'a di baris 5 karena kolom 6kan sudah diambil oleh baris pertama sehingga kita hanya perlu menambahkekurangannya sa'a.

=. (aris ketiga karena tidak ada yang diambil alih& berarti tetap B kolom yangkita pasang. %adinya/

<table>

<tr>





</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

D. Sekarang tinggal mengisi sa'a kolom$kolomnya dengan text sesuka hati.,an inilah hasil akhir untuk tampilan diatas/

<table>

<tr>

<td rowspan="2" style="text-align:center; vertical-align:middle;">Nama</td>



<td colspan="4" style="text-align:center; vertical-

align:middle;">BULAN</td>

</tr>

<tr>

<td>Januari</td>

<td>Februari</td>

<td>Maret</td>

<td>April</td>

</tr>

<tr>

<td>LUTVI</td>

<td>10.000</td>

<td>10.000</td>

<td>10.000</td>

<td>10.000</td>

</tr>

<tr>

<td>IIM</td>

<td>10.000</td>

<td>10.000</td>

<td>10.000</td>

<td>10.000</td>

</tr>



<tr>

<td>ATHIA</td>

<td>10.000</td>

<td>10.000</td>

<td>10.000</td>

<td>10.000</td>

</tr>

</table>

Selamat mencoba

(eker'a dengan -ramePosted on Ju! 16, 2011

HTML memungkinkan kita untuk memasukkan halaman #eb lain ke dalam

#ebsite kita sendiri. Qeb tersebut akan dimasukkan dalam sebuah "rame.

,alam HTML ada 5 'enis "rame yaitu "rameset dan i"rame. nsya *llah kita

akan bahas keduanya di artikel ini.

FRAME#ET

Tag -rameset kita pakai bila kita hanya ingin membagi #eb men'adi beberapa

bagian sa'a. Misalnya kita ingin sebuah #eb dimana kolom sebelah kiri berisi

deretan link naAigasi dan sebelah kanan adalah halaman isinya Icontohnya

internet banking (4*J. (agaimana cara membuatnya?

+ita perlu membuat sebuah fle HTML yang kita gunakan sebagai #adah

semua halaman yang ingin kita tampilkan. %ika kita ingin membuat sebuah

halaman dengan 5 kolom& maka berarti minimal ada @ fle yang harus kita

siapkan/

6. -ile -rameset5. -ile pengisi "rame kiri@. -ile pengisi "rame kanan

http://gudanginfo.web.id/html/bekerja-dengan-frame.html

http://gudanginfo.web.id/html/bekerja-dengan-frame.html



Sebagai contoh& kita ingin membuat sebuah halaman untuk memasarkan

produk aRliasi ca"ebisnis.com. ,i sebelah kanan adalah "rame berisi

in"ormasi singkat dari kita dan pena#aran spesial kita. Sebelah kiri adalah

halaman ca"ebisnis. )uk kita buat

Pertama& buat dulu fle "rameset.html sinya seperti ini/

<frameset cols="25%,75%">

<frame src="informasi.html" />

<frame src="http://cafebisnis.com/?reg=admin" />

</frameset>

Saya 'elaskan dulu ya. (aris pertama adalah tag "rameset yang dilengkapi

atribut cols. *tribut ini untuk mengatur lebar kolom$kolom "rame nanti. ,alam

contoh diatas saya buat kolom kiri 5B dan kolom kanan DB.

Setelah terdefnisi& kita tinggal menun'ukkan fle$fle apa sa'a yang ingin kita

masukkan dalam "rame. (aris kedua berguna memasukkan

fle in"ormasi.html ke dalam "rame kiri. +emudian di baris ketiga kita defnisikan

"rame sebelah kanan berisi 3L aRliasi dari ca"ebisnis.

Sampai sini& 'ika anda membuka fle "rameset.html tersebut& maka akanmuncul error di kolom kiri dan #eb ca"ebisnis di kolom kanan. +enapa error?

+arena kita belum membuat fle in"ormasi.html kan? %adi& mari kita buat

sekarang.

-ile in"ormasi.html bisa berisi apa sa'a& misalnya in"ormasi dari anda perihal

#eb ca"ebisnis. )uk kita isi fle in"ormasi.html dengan artikel singkat berikut/

<p>Di sebelah kanan halaman ini adalah web cafebisnis,

tempat dimana kita bisa belajar banyak soal WordPress

dan bagaimana menghasilkan uang menggunakan blog</p>

<p>Untuk mendaftar, silahkan klik menu registrasi

dan ikuti saja petunjuknya</p>

ah& selesai deh. Sekarang bisa anda cek "rameset.html dan akan tampak isi

fle in"ormasi.html berada di kolom kiri dan #eb ca"ebisnis di kolom kanan.



3ntuk tutorial i"rame& kita bahas di artikel mendatang a'a ya? <ke& sampai

'umpa lagi

html pertamaku.docx

Documents