Anda di halaman 1dari 25

Pendahuluan

H T M L (HYPERTEXT MARKUP LANGUAGE )


F suatu metoda untuk mengim le!mentasikan konse h" e#te$t dalam suatu naskah atau dokumen% HTML sendi#i &ukan te#golong ada suatu &ahasa em#og#aman ka#ena si'atn"a "ang han"a mem&e#ikan tanda (ma#king u ) ada suatu naskah teks dan &ukan se&agai #og#am

F merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser kita (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Na , !"#$ inila yang memungkinkan %nda men&ela&a internet dan meli at alaman web yang menarik.

Catatan : Biarpun HTML bukan termasuk suatu program pembuatan web, tetapi HTML merupakan dasar dari segala bahasa pemrograman web yang akan muncul kemudian. Contoh Bahasa Pemrograman Web, antara lain !. "rontpages #. $reamwea%er &. %dobe 'o$ive '. dll Dimana kita bisa menulis perintah-perintah HTML??? !. (otepad #. CuteHTML &. dll

(t#uktu# dasa# HTML

)HTML* )HEA+* )T,TLE* )-HEA+* )./+Y*

)-T,TLE*

)-./+Y* )-HTML*

Perintah)perintah dalam HTML biasa di sebut dengan TAG < >. T*+ ini kebanyakan mempunyai pasangan, yakni T*+ pembuka dan penutup. Misal <b>...</b>, <i>...</i> dan lain sebagainya, dan T*+ yang mempunyai pasangan ini ,uga bersi-at Override yakni dapat menimpa -ungsi T*+ sebelumnya. Contoh sebuah teks yang sudah di buat miring oleh tag <i> ... </i>, dapat di timpa oleh tag <b> ... </b> sehingga akan melahirkan dua hasil perintah yang berbeda sekaligus yakni kombinasi hurup miring dan hurup tebal, contoh ini hanya <b><i>VINCENT</i></b> sa,a sobat
()

di samping T*+ yang mempunyai pasangan, ada ,uga tag yang tidak memerlukan pasangan, misal T*+ .hr/ , .br/ , ataupun .input/ 0ebuah Tag tidaklah sensiti- terhadap Case 1hurup besar atau kecil2, ,adi mau di tulis hurup besar ataupun huru- kecil akan menghasilkan -ungsi yang sama. 0ebagai contoh -ungsi Tag <b>....</b> akan sama dengan Tag <B> ....</B>.

*ebua

alaman web minimal mempunyai empat buat tag, yaitu +

)HTML* ,,,,.. )-HTML* *ebagai tanda awal dan ak ir dokumen !"#$. )HEA+*,,,,,.)-HEA+* *ebagai informasi page eader - digunakan untuk menulis keterangan tentang document web

)T,TLE*000%)-T,TLE* *ebagai titel atau &udul alaman. .alimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser %nda (pada title bar). /onto + ("I"$E)"ips !"#$ 00 www.klik0kanan.com(-"I"$E) (1234) 3i dalam tag ini bisa diletakkan berbagai teks maupun attribute - akseso#i lainn"a seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain0lain "ang akan ditam ilkan ada web page% %tribut + 1'/2$25, 1%/.'526N3, "E7", $IN., 8$IN., %$IN., $E9"#%5'IN : "2P#%5'IN.

Pengatu#an Teks
6ntuk mendapatkan alaman web yang baik %nda arus melakukan pengaturan ter adap teks seperti memili &enis dan ukuran uruf, perataan, dll. "ag0tag di bawa ini yang biasa digunakan dalam pengaturan teks + Heade#s1 )Hn*%%)-Hn* 3igunakan untuk mengatur ukuran uruf pada eader. ;n; mempunyai nilai antara < 0 = atau antara (!<) sampai (!=), dengan (!<) merupakan ukuran terbesar dan (!=) merupakan ukuran terkecil. /onto + (!>)"utorial !tml(-!>) !asilnya akan terli at seperti + Tuto#ial Html Pa#ag#a h .a#u1 )P* 3igunakan untuk pinda alinea atau paragraf. "ag ini bisa diberi ak iran (-P) tapi &uga bisa tidak diberi. Line .#eak1 ).R* 3igunakan untuk pinda ke baris baru. No Line .#eak1 )N/.R* 1ila digunakan tag ini maka teks yang pan&ang tidak secara otomatis pinda baris bawa nya bila baris pertama suda terlalu pan&ang. 2ont )2/NT* 6ntuk mendefinisikan berbagai attribut 92N", yaitu + *I?E, 9%/E, /2$25. (,3E1 6kuran font yang digunakan, berkisar antara < 0 @ dengan < merupakan ukuran terkecil dan @ merupakan ukuran terbesar. 2A4E1 Aenis atau nama font. %nda bisa memili maksimal B &enis font yang masing0 masing dipisa kan ole koma. 1ila terdapat spasi yang terletak pada nama font maka arus digunakan tanda garis bawa ( C ). 3alam memili &enis font ini arus dipertimbangkan apaka font yang kita gunakan pada alaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usa menggunakan font0font yang bentuknya ane 0ane , gunakan sa&a font standar. "api bila %nda ingin menggunakan font yang sedikit ;ane ; %nda bisa menggunakan grap ic. 4/L/R1 Darna font, didefinisikan dengan menggunakan nilai 5'1-!E7 atau bisa &uga langsung menggunakan nama warna (red misalnya). /onto + (92N" *I?EEF 9%/EE;8erdana, %rial, !elvetica; /2$25E;G99HHHH;)/onto teks yang berwarna mera (-92N") !asilnya akan terli at seperti +

/onto teks yang berwarna mera /onto lainnya + (92N" *I?EE> 9%/EE;"imes New 5oman; /2$25E;red;)

3.. .4-ont/

.ase 2ont1 ).A(E2/NT* 3igunakan untuk mendefinisikan ;default text;. %ttribut sama dengan attribut 92N". "ag 92N" akan mengoverwrite setting pada 1%*E92N". /onto + <BASEFONT SIZE=2 FACE="Arial,Helvetica" CO O!=""FF####"> *elain tag dan atribut di atas, masi terdapat lagi tag0tag yang ber ubungan dengan pengaturan teks, yaitu + Pe#hatian 1 *emua tag di bawa ini membutu kan tap penutup. ).* .old te$t ),* Italic text )U* 6nderscore )TT* T$%e&riter )(* *trikeout 0 draws a line t roug t e text )PRE* Preformatted "ext )+2N* Definition ).L,NK* "ext berkedip (lebi baik &angan digunakan)(-blink) )(TR/NG* (t#ong

Italic ).,G* 6kuran teks akan lebi besar )(MALL* 6kuran teks akan lebi kecil satu ukuran )(UP* #embuat tekssuperscript )(U.* membuat tekssub script

satu ukuran

(p) (br) (pre)

E membuat paragraf dengan satu baris kosong E membuat paragraf tanpa baris kosong E paragraf tercetak apa adanya

Lists
"erdapat tiga tipe list yang dapat digunakan, yaitu + Uno#de#ed Lists1 )UL* 6ntuk membuat daftar item dengan tanda bullet. $ist entries didefinisikan dengan tag ($I). /onto + <' > < I> Ite( )*(er + < I> Ite( )*(er 2 < I> Ite( )*(er , </' > !asil dari kode di atas adala + Item nomer < Item nomer > Item nomer B

3engan atribut "4PE %nda dapat mendefinisikan bentuk disc, circle atau sIuare bullet point. /onto + <' CO-.ACT T/.E=012are> 3

/#de#ed Lists1 )/L* Auga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. $ist entries &uga didefinisikan dengan ($I) tag. /onto + <O T/.E=I> < I> Ite( )*(er + < I> Ite( )*(er 2 < I> Ite( )*(er , </O > !asil dari kode di atas adala + <. Item nomer < >. Item nomerr > B. Item nomerr B 6ntuk "4PE %nda dapat &uga menggunakan + <0 3efault numbers, <, >, B, etc. %0 !uruf besar. %, 1, /, etc.

a0 !uruf kecil. a, b, c, etc. I0 5omawi uruf besar. I, II, III, etc. i0 5omawi uruf kecil , i, ii, iii, etc. +e'inition Lists1 )+L* /onto + <4 > <4T> Ite( %erta(a. <44> .e)5ela0a) te)ta)6 ite( %erta(a. <4T> Ite( 7e82a. <44> .e)5ela0a) te)ta)6 ite( 7e82a </4 > !asil dari kode di atas adala + Item pertama. Pen&elasan tentang item pertama. Item kedua. Pen&elasan tentang item kedua

,mages ,mages 1 3igunakan untuk menampilkan image atau animasi gif pada alaman web %nda. %tribut + alt, alignE(center, left, rig t), spave, vspace, border, widt : eig t /onto + <I-9 S!C="l*6*.6i:" alt="I)i a8ala; l*6* ;ala(a) %e(b27a" &i8t;=2## ;ei6;t=+##> <I-9 S!C="l*6*.6i:" ;0%ace=+# v0%ace=< ali6)=ri6;t b*r8er=2> Links 1 3igunakan untuk membuat link ke alaman lain. "ulisan yang terletak antara (%) dan (-%) akan terdapat garis bawa . /onto + <A H!EF=";ala(a)2.;t(l">=li7 8i 0i)i</A> 6ntuk membuat link ke alaman lain. <A H!EF="(ailt*>&eb(a0ter?7li7@7a)a).c*(">=li7 8i 0i)i</A> 6ntuk membuat link pada alamat e0mail. <A H!EF=""a%li7a0i">=li7 8i 0i)i</A> 6ntuk membuat link ke bagian lain pada alaman yang sama. <A H!EF=";ala(a)lai).;t(l"a%li7a0i">=li7 8i 0i)i</A> 6ntuk membuat link kebagian lain pada alaman yang berbeda. <A H!EF=";ala(a)2.;t(l"><I-9 S!C="6a(bar.6i:"></A> 6ntuk membuat link dengan menggunakan gambar.

Penyisipan Citra atau Gambar


Penyisipan citra pada page dimaksudkan agar tampilan dari page tersebut dapat lebih menarik dan in-ormati-. *da beberapa hal yang perlu diperhatikan dalam penyisipan citra atau gambar ke page, yakni 5kuran -ile citra 5kuran -ile yang terlalu besar akan membuat pengun,ung web harus menunggu lebih lama dalam mengakses web karena musti terlebih dahulu mendownload -ile citra atau gambar yang ukurannya besar Tipe -ile citra Tipe -ile yang mendukung untuk transmisi melalui aplikasi web adalah 6P+, +7", BMP, dll. "ile citra dapat disisipkan ke dalam suatu -ile HTML dengan menggunakan tag .7M+/, yakni dalam -ormat !. <I-9 S!C="l*7a0i 8a) )a(a 6a(bar" A T="8e07ri%0i te70" A I9N="leta7">

#. <I-9 &. '.

S!C="l*7a0i 8a) )a(a 6a(bar" A I9N="leta7" BI4TH=AlebarA> <I-9 S!C="l*7a0i 8a) )a(a 6a(bar"> <I-9 S!C="l*7a0i 8a) )a(a 6a(bar" A I9N="leta7" BI4TH=AlebarA BO!4E!=A272ra) bi)67aiA>

HEI9HT=Ati)66iA

HEI9HT=Ati)66iA

*tribut *LT ber-ungsi sebagai alternati- ,ika browser yang digunakan oleh pengguna tidak dapat menampilkan citra. 0edangkan atribut *L7+( dapat diisi dengan nilai)nilai T8P, M7$$L9, B8TT8M, L9"T, dan :7+HT. HEI9HT 2)t27 (e)e)t27a) ti)66i 6a(bar. BI4TH 2)t27 (e)e)t27a) lebar 6a(bar. BO!4E! 2)t27 (e)e)t27a) bi)67ai 6a(bar C8ala( 0at2a) a)67a +,2,,,D,<, 80bE Perhatian !. (ama -ile gambar yang kita masukan harus benar ; benar sama dengan nama -ile gambar yang anda miliki 1perhatikan kapital huru- maupun spasinya2 #. "ile html dengan -ile gambar usahakan berada dalam tempat yang sama untuk menghindari kesalahan 4 tidak munculnya gambar karena alamat gambar yang salah akan menyebabkan gambar tidak muncul. 6ika -ile gambar dan -ile html berada di tempat yang sama maka anda cukup menuliskan nama -ile gambarnya sa,a tidak perlu pakai lokasi. &. 0emakin besar ukuran gambar semakin besar pula ukuran -ilenya. 0emakin besar ukuran -ile maka proses downloading 1pemanggilan gambar sewaktu wrebside andas diakses pengun,ung, akan semakin lama. '. 0eandainya anda mau mengubah ukuran gambar, anda bias merubah pakai program photoshop4se,enisnya. 0etelah ,adi gambar editan tersebut yang akan dipasang hasilnya akan lebih memuaskan dibandingkan anda menggunakan perintah W7$TH dan H97+HT, karena kadangkala hasil gambar tidak memuaskan 1terlihat gepeng2 Contoh 1Beberapa contoh dibuat ,adi satu, gunakan seperlunya2 <HT- > <HEA4> <TIT E>C*)t*; -e)$i0i% Citra/9a(bar</TIT E> </HEA4> <BO4/> <I-9 S!C="728a.5%6" A I9N=TO.> <.> <I-9 S!C="7eli)ci.5%6" A I9N=-I44 E> <.> <I-9 S!C="a)5i)6.5%6" A I9N=BOTTO-> <.> <I-9 S!C="te6ar.5%6"> <.> <I-9 S!C=":ile>//l*cal;*0t/ >/9A-BA!/-ACAN.5%6"> <.> <I-9 S!C="a)5i)6.5%6" A T=A6a(bar 7li7 a)5i)6A A I9N=BOTTO-> <.> <I-9 S!C="a)5i)6.5%6" HEI9HT=F+##A BI4TH=A+2<A A I9N=A e:tA BO!4E!=A<A> </BO4/> </HT- >

Ta&el "abel sangat penting artinya dalam desain web. .arena dengan menggunakan tag table %nda dapat membuat alaman web ;terbagi; pada beberapa kolom atau baris. /onto nya seperti pada alaman web yang sedang %nda baca ini. "erdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table + ("%1$E), ("5), dan ("3). 4ang perlu diingat adala ba wa tab ("5) dan ("3) arus terletak di antara tag ("%1$E) dan (-"%1$E) )TA.LE* "erdiri dari atribut + align 0 perataan + rata kiri (left), tenga (center) atau kanan (rig t). &g5olo# 0 warna latar belakang (background) dari tabel. &o#de# 0 ukuran lebar border tabel (dalam pixel). 5ell adding 0 &arak antara isi cell dengan batas cell (dalam pixel). 5ells a5ing 0 &arak antar cell (dalam pixel). 6idth 0 ukuran tabel dalam pixel atau percent.

/onto + <TAB E ali6)="ce)ter" b6c*l*r=""####FF" b*r8er="2" cell%a88i)6="<" cell0%aci)6="2" &i8t;="G#H"> )TR* "ag ini digunakan untuk membuat baris baru (pada tabel). "erdiri dari atribut+ align 0 perataan + rata kiri (left), tenga (center) atau kanan (rig t). &g5olo# 0 warna latar belakang dari baris. 7align 0 perataan vertikal + top, middle atau bottom.

/onto + <T! ali6)="ri6;t" b6c*l*r=""####FF" vali6)=t*%> )T+* "ag ini digunakan untuk membuat kolom baru pada tabel. align 0 perataan &a5kg#ound 0 image yang digunakan sebagai latar belakang dari kolom. &g5olo# 0 warna latar belakang 5ols an 0 li at gambar conto height 0 ukuran tinggi cell dalam pixels. no6#a 0 membuat supaya isi dari kolom tetap berada pada satu baris. #o6s an 0 li at gambar conto 7align 0 perataan vertikal +top, middle atau bottom. 6idth 0 ukuran kolom dalam pixel atau percen.

/onto + <T4 ali6)="ri6;t" bac76r*2)8="bac7.6i:" b6c*l*r=""####FF" c*l0%a)="," ;ei6;t="2##" )*&ra% r*&0%a)="2" vali6)="b*tt*(" &i8t;=",##">
(table widt E;<HH; borderE;<; cellspacingE;>; cellpaddingE;>;) (tr) (td bgcolorE;GHHHH99;) :nbspJ(-td) (td bgcolorE;G9999==;):nbspJ(-td) (td rowspanE;>; bgcolorE;G99BB==;):nbspJ(-td) (-tr) (tr) (td colspanE;>; bgcolorE;GBB//==;):nbspJ(-td) (-tr) (tr) (td colspanE;B; bgcolorE;G99//KK;):nbspJ(-td) (-tr) (-table) (table widt E;<HH; borderE;H; cellspacingE;H; cellpaddingE;H;) (tr) (td bgcolorE;GHHHH99;):nbspJ (-td) (td bgcolorE;G9999==;):nbspJ(-td) (td rowspanE;>; bgcolorE;G99BB==;):nbspJ(-td) (-tr) (tr) (td colspanE;>; bgcolorE;GBB//==;):nbspJ(-td) (-tr) (tr) (td colspanE;B; bgcolorE;G99//KK;):nbspJ(-td) (-tr) (-table)

TAB L
Tabel merupakan cara untuk menampilkan in-ormasi dalam bentuk sel yang terdiri dari kolom dan baris. untuk menampilkan4membuat tabel digunakan tag .T*BL9/3..4T*BL9/, untuk mengisi4menulisi baris 1table row2 digunakan tag .T:/3.4T:/ yang didalamnya terdapat tag .T$/3.4T$/ untuk menampilkan data pada setiap sel.

Latihan ! : TAB L
.HTML/ .H9*$/.T7TL9/L*T7H*( < .4T7TL9/.4H9*$/ .B8$=/ .T*BL9 B8:$9:>&/ .T:/ .T$/ baris !, kolom !.4T$/ .T$/ baris !, kolom #.4T$/ .T$/ baris !, kolom &.4T$/ .4T:/ .T:/ .T$/ baris #, kolom !.4T$/ .T$/ baris #, kolom #.4T$/ .T$/ baris # ,kolom &.4T$/ .4T:/ .4T*BL9/ .4B8$=/ .4HTML/

Hasil Tampilan

Latihan " : TAB L


.HTML/ .H9*$/ .T7TL9/L*T7H*( M9MB5*T T*B9L.4T7TL9/ .4H9*$/ .B8$=/ .C9(T9:/.B/$*"T*: (7L*7 ?8MP5T9:.4B/.4C9(T9:/ .P/ .T*BL9 B8:$9:>'/ .T:/ .T$ *L7+(>@C9(T9:@/(8.4T$/ .T$ *L7+(>@C9(T9:@/(*M*.4T$/ .T$ *L7+(>@C9(T9:@/*L*M*T.4T$/ .T$ *L7+(>@C9(T9:@/(7L*7.4T$/ .T$ *L7+(>@C9(T9:@/?9T9:*(+*(.4T$/ .4T:/ .T:/ .T$/!..4T$/ .T$/*+50 P*:=8(8.4T$/ .T$/6L. A9T9:*( (8. #< 05:*B*=*.4T$/ .T$ *L7+(>@C9(T9:@/<B.4T$/ .T$ *L7+(>@C9(T9:@/B*7?.4T$/ .4T:/ .T:/ .T$/#..4T$/ .T$/L7$W7(*.4T$/ .T$/6L. P:9+8L*( (8. CC< 07$8*:68.4T$/ .T$ *L7+(>@C9(T9:@/BC.4T$/ .T$ *L7+(>@C9(T9:@/?5:*(+.4T$/ .4T:/ .T:/ .T$/&..4T$/ .T$/*M7 ?50W*($7(*.4T$/

.T$/6L. P9M5$* (8. #!# M*L*(+.4T$/ .T$ *L7+(>@C9(T9:@/DC.4T$/ .T$ *L7+(>@C9(T9:@/0*(+*T M9M5*0?*(.4T$/ .4T:/ .4T*BL9/ .4B8$=/ .4HTML/

Hasil Tampilan

2RAME(
8 (95%#E*E" colsE;L,<FH;) (95%#E *5/E; omepage. tm; N%#EE;9rame<;) (95%#E *5/E;menu. tm; N%#EE;9rame>;) (-95%#E*E") 9 (95%#E*E" colsE;<HH,L;) (95%#E *5/E; omepage. tm; N%#EE;9rame<;) (95%#E *5/E;menu. tm; N%#EE;9rame>;) (-95%#E*E") : (95%#E*E" rowsE;<HH,L;) (95%#E *5/E; omepage. tm; N%#EE;9rame<;) (95%#E *5/E;menu. tm; N%#EE;9rame>;) (-95%#E*E") ; (95%#E*E" rowsE;L,=H;) (95%#E *5/E; omepage. tm; N%#EE;9rame<;) (95%#E *5/E;menu. tm; N%#EE;9rame>;) (-95%#E*E") < (95%#E*E" rowsE;L,=H;) (95%#E *5/E; omepage. tm; N%#EE;9rame<;) (95%#E*E" colsE;MHN,MHN;) (95%#E *5/E;menu. tm; N%#EE;9rame>;) (95%#E *5/E;menu>. tm; N%#EE;9rameB;) (-95%#E*E")(-95%#E*E") = (95%#E*E" colsE;L,MHN;) (95%#E *5/E; omepage. tm; N%#EE;9rame<;) (95%#E*E" rowsE;<MN,<MN,@HN;) (95%#E *5/E;menu. tm; N%#EE;9rame>;) (95%#E *5/E;menu>. tm; N%#EE;9rameB;) (95%#E *5/E;menuB. tm; N%#EE;9rameF;) (-95%#E*E")(-95%#E*E") > (95%#E*E" colsE;MHN,MHN;) (95%#E*E" rowsE;MHN,MHN;) (95%#E *5/E; omepage. tm; N%#EE;9rame<;) (95%#E *5/E; omepage>. tm; N%#EE;9rame>;) (-95%#E*E") (95%#E*E" rowsE;MHN,MHN;) (95%#E *5/E;menu. tm; N%#EE;9rameB;) (95%#E *5/E;menu>. tm; N%#EE;9rameF;) (-95%#E*E")(-95%#E*E") ? (95%#E*E" rowsE;<MN,@HN,<MN;) (95%#E *5/E; omepage. tm; N%#EE;9rame<;) (95%#E*E" colsE;<MN,@HN,<MN;) (95%#E *5/E;menu. tm; N%#EE;9rame>;) (95%#E *5/E;menu>. tm; N%#EE;9rameB;) (95%#E *5/E;menuB. tm; N%#EE;9rameF;) (-95%#E*E") (95%#E *5/E; omepage. tm; N%#EE;1I';) (-95%#E*E")(-95%#E*E")

#$AM
"rame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi)bagi men,adi beberapa bagian dimana setiap bagiannya merupakan satu halaman HTML yang terpisah. 7ni dilakukan untuk membuat tampilan halaman HTML yang salah satu atau beberapa bagian berganti) ganti isinya sedang bagian lain tetap sehingga dapat menghemat bandwith internet. *dapun untuk membuat -rame dalam HTML adalah sebagai berikut

!. ":*M909T

perintah untuk membuat -rame, dan umumnya berpasangan dengan perintah .":*M9 0:C/

0intak * .":*M909T C8L0>Elebar ,endela bagian kiri, lebar ,endela bagian kananE/ * .":*M909T C8L0>EF,FE/ * .":*M909T :8W0>EF,FE/ #. ":*M9 0:C perintah untuk memasukkan suatu halaman atau gambar ke dalam ,endela 0intak .":*M9 0:C>ElinkE (*M9>EnamaE 0C:8LL7(+>EautoE M*:+7(W7$TH>! M*:+7(H97+HT>! (8:07G9/ &. 7"":*M9 0:C perintah untuk membuat ,endela dengan lebar dan tinggi sesuai dengan programmer dan dapat diletakan di bagian kiri layar, tengah atau bagian kanan
0intak .7":*M9 0:C>ElinkE W7$TH>ElebarH H97+HT>EtinggiE/.47":*M9/ Link dapat berupa halaman 1-ile2, gambar atau website Latihan ! #$AM
.HTML/ .H9*$/ .T7TL9/L*T7H*( I .4T7TL9/ .4H9*$/ .":*M909T :8W0>#CJ,F/ .":*M9 (*M9>header 0:C>@header.html@/ .":*M909T C8L0>&CJ,F/ .":*M9 (*M9>kiri 0:C>@kiri.html@/ .":*M9 (*M9>kanan 0:C>@kanan.html@/ .4":*M909T/ .4":*M909T/ .B8$=/ .4B8$=/ .4HTML/ Hasil Tampilan

Latihan " #$AM


.HTML/ .H9*$/ .T7TL9/Contoh buat -rame.4T7TL9/ .4H9*$/ .":*M909T C8L0>@'CJ,KCJ@/ .":*M9 0:C>@keterangan.html@ scrolling>@auto@ marginwidth>@!@ marginheight>@!@ noresiLe/ .":*M9 0:C>@mbahdiyo.,pg@ scrolling>@auto@ marginwidth>@!@ marginheight>@!@ noresiLe/ .4":*M909T/ .4HTML/ Hasil Tampilan

Latihan % #$AM
.HTML/ .H9*$/ .T7TL9/Contoh buat -rame.4T7TL9/ .4H9*$/ .":*M909T :8W0>@F,F@/ .":*M909T C8L0>@F,F@/ .":*M9 0:C>@keterangan&.html@/ .":*M9 0:C>@mbahdiyo.,pg@/ .4":*M909T/ .":*M909T C8L0>@F,F@/ .":*M9 0:C>@pTarno#.,pg@/ .":*M9 0:C>@pakkarno.,pg@/ .4":*M909T/ .4HTML/ Hasil Tampilan lihat gambar disamping

Latihan & '(#$AM )$C* 7":*M9 0:C adalah perintah untuk membuat ,endela dengan lebar dan tinggi sesuai dengan programmer dan dapat diletakan di bagian kiri layar, tengah atau bagian kanan. 0intak .7":*M9 0:C>ElinkE W7$TH>ElebarH H97+HT>EtinggiE/.47":*M9/
Link dapat berupa halaman 1-ile2, gambar atau website Contoh program .HTML/ .H9*$/ .T7TL9/Contoh buat -rame.4T7TL9/ .4H9*$/ .B8$=/ .P align>@center@/ .7":*M9 0:C>@keterangan#.html@ W7$TH>'CC H97+HT>!CB/.47":*M9/.4P/ .P align>@center@/ .7M+ 0:C>@Tegar.,pg@ W7$TH>@#BC@ H97+HT>@&CC@/.4P/ .4B8$=/ .4HTML/ Hasil Tampilan

+umpulan Ta, HTML


)@!! !!* #emberi komentar atau keterangan. .alimat yang terletak pada tag kontiner ini tidak akan terli at pada browser #embuat link ke alaman lain atau ke bagian lain dari alaman tersebut #embuat nama bagian yang didefinisikan pada link pada alaman yang sama *ebagai awal dari Aava applets #endefinisikan daera yang dapat diklik (link) pada image map #embuat teks tebal #embuat atribut teks default seperti &enis, ukuran dan warna font #emberi (suara latar) background sound pada alaman web #emperbesar ukuran teks sebesar satu point dari defaultnya #embuat teks berkedip "ag awal untuk melakukan berbagai pengaturan ter adap text, warna link : visited link Pinda baris #embuat caption pada tabel 6ntuk perataan tenga ter adap teks atau gambar #eletakkan komentar pada alaman web tidak tidak akan nampak pada browser Indents teks 5epresents different sections of text. #enamba kan sound or file avi ke alaman web *eperti tag (a name) #engganti &enis, ukuran, warna uruf yang akan digunakan utk teks #endefinisikan input form #endefinisikan frame #endefinisikan attribut alaman yang akan menggunakan frame #endefinisikan ead document. #embuat garis oriOontal 1ararti dokumen tml #embuat teks miring Image, imagemap atau an animation #endefinisikan input field pada form #embuat bullet point atau baris baru pada list (berpasangan dengan tag (dir), (menu), (ol) and (ul) ) #endefinisikan client0side map #embuat scrolling teks (teks ber&alan) 0 anya pada #* IE #encega ganti baris pada teks atau images Aika browser user tidak mendukung frame #endefinisikan awal dan ak ir list 'anti paragraf #embuat teks dengan ukuran uruf yg sama #endefinisikan awal script )a h#e'* )a name* )a let* )a#ea* )&* )&ase'ont* )&gsound* )&ig* )&link* )&od"* )&#* )5a tion* )5ente#* )5omment* )dd* )di7* )em&ed* )'n* )'ont* )'o#m* )'#ame* )'#ameset* )head* )h#* )html* )i* )img* )in ut* )li* )ma * )ma#Auee* )no&#* )no'#ames* )ol* ) * ) #e* )s5#i t*

)h8* %%% )h=* 6kuran font

<#-.T )i/e01ukuran2 C3l3r014arna2 #a5e016enis huru72>89Teks9<:#-.T> Di,unakan utk men,atur #3nt:huru7

)i/e utk ukuran 53l3r utk ;arna 7a5e utk 6enis huru7
9<BA) #-.T )i/e01ukuran2 C3l3r014arna2 #a5e016enis huru72>999Teks8<:#-.T>

Hampir sama <en,an #-.T tapi berlaku untuk semua <35ument

P $T M=A. + > % !. H: #. M*:M599 &. B*C?+:85($ W*:(* '. B*C?+:85($ +*MB*: B. B*C?+:85($ 05*:*
H$ 0 membuat ,aris h3ris3ntal <H$> atau <H$ 4i<th01?@A2 Ali,n01Center2 )i/e01!B2 .-)HAD > H$ <i,unakan untuk membuat ,aris h3ris3ntal 4i<th utk lebar ,aris ukuran <alam bentuk pr3sen Ali,n utk perataan ,aris )i/e utk tin,,i ,aris ukuran <alam bentuk an,ka .-)HAD tanpa ,aris tepi luar

M*:M599 > membuat teks ber6alan <MA$C= B,53l3r01;arna2 Dire5ti3n01le7t:ri,ht2 BehaDi3r01s5r3ll:sli<e:alternate2> 8TeEt89<:MA$C= MarFuee =tk membuat teks ber6alan B,53l3r utk ;arna latar belakan, Dire5ti3n utk arah ,erak teks BehaDi3r utk prilaku ,erak teks >

C3nt3h :
.MarNuee B,53l3r01 yellow2 $irection>@right@ beha%ior>@alternate@/By Maestri.4marNuee/

BAC+G$-=.D 4A$.A
<B-DG BGC-L-$014arna2> <B-DG BGC-L-$014arna2 T HT014arna2 L(.+ 014arna2 IL(.+ 014arna2>

Di,unakan untuk men,atur ;arna ba5k,r3un< <35ument T Ht utk ;arna teks L(.+ utk ;arna link IL(.+ utk ;arna link y, pernah <ikun6un,i C3nt3h :
<B-DG BGC-L-$01Green2>

BAC+G$-=.D GAMBA$ <B-DG BAC+G$-=.D0Jnama 7ile ,ambar beserta ekstensi nyaJ> Di,unakan untuk men,atur ba5k,r3un< <35ument <en,an ,ambar C3nt3h : <b3<y ba5k,r3un< 01tekn3l3,i&96p,2> M .G()(P GAMBA$ <(MG )$C01nama #ile ,ambar2 Hei,ht01tin,,i2 4i<th01Lebar2 Ali,n01le7t:ri,ht2 B3r<er01ukuran b3r<er2> untuk menyisip ,ambar Hei,ht menentukan tin,,i ,ambarK ukuran <lm bentuk an,ka 4i<th menentukan lebar ,ambarK ukuran <lm bentuk an,ka Ali,n menentukan perataan ,ambar B3r<er menentukan bin,kai ,ambarK ukuran <lm bentuk an,ka

C3nt3h : <(MG )$C0JLapt3p96p,J H (GHT0!B@ 4(DTH0!LB Ali,n01le7t2 B3r<er01"2> BAC+G$-=.D )=A$A <BG)-=.D l33p0in7inite )$C02l3kasi atau nama 7ile suara2> BG)-=.D0Ba5k,r3un< )3un< 0 ;eb <iberi latar belakan, suara l33p0in7inite artinya men,ulan,i suara tersebut terus menerus selama halaman ;eb tersebut <ibuka )$C0)3ur5e 'l3kasi : nama 7ile tersebut bera<a* C3nt3h : <BG)-=.D l33p0in7inite )$C0 2muna6at5inta9;aD2> .B+085($ L88P>7("7(7T9 0:C>@Har%est Moon.M7$@/

Penyisipan Suara/Sound BGSOUND


Perintah <BGSOUND> adalah perintah untuk memasukkan suara atau musik ke dalam Website anda. Sintak : <BGSOUND loop=infinite S !="lokasi dan nama file suara"> Contoh : <BGSOUND loop=infinite S !="#aller$foto.%a&"> BGSOUND=Ba'k#round Sound = %eb diberi latar belakan# suara loop=infinite artin$a men#ulan#i suara tersebut terus menerus selama halaman %eb tersebut dibuka. Perhatian : !. Perhatikan dalam hal penulisan file suara baik itu 'apital huruf maupun spasin$a( harus sama antara file asli den#an $an# dituliskan. #. )ile html dan file suara herndakn$a diletakkan di satu tempat $an# sama. Untuk memudahn$a upload ke internet dan penulisan perintahn$a. *ika di tempat $an# sama anda 'ukup menuliskan nama file suaran$a sa+a tidak perlu alamat,lokasi $an# len#kap. &. Ukuran file musik $an# san#at besar -misaln$a .P/0( tidak bias kita masukkan ke dalam Website anda. 1arena nanti akan kesulitan se%aktu anda upload ke internet akan keluar pern$ataan 2kehabisan %aktu ketika kita memindahkann$a ke dalam ser&er". *adi +ika anda mau pasan# suara hendan$a dalam bentuk file $an# ke'il misaln$a dalam bentuk midi -.%a&0 Cara merekam suara dari Microsoft Windo s : !. 1lik start #. Sorot pro#rams &. 1lik 3''essories '. 1lik 4ntertaiment B. 1lik Sound e'order K. .un'ul pro#ram Sound e'order 5

<.
I.

Siapkan sarana pendukun# untuk rekaman misaln$a mi'rofon atau lainn$a.


1lik tombol untuk memulai merekam suara anda.

D.

*ika udah selesai klik tombol

untuk berhenti.

!C. 1lik menu 4ffe'ts 6 Pilih 7n'rease &olume -b$ 89:0 untuk memperkeras suara. .isal 5 lakukan perintah ini
sampai 9 kali -seperlun$a0.

!!. ;ekan tombol

untuk men'oba suara.

!#. 1lik menu )ile 6 pilih Sa&e 3s 5


a. ;entukan tempat simpan file suara -Sa&e in0 b. ;entukan nama file suara -)ile name0 '. 1lik tombol Sa&e

Tambahan Materi MarFuee MarFuee !9@ MarNuee !.C ini merupakan marNuee standar agar teks *nda bisa ber,alan secara de-ault 1dari kanan ke kiri2. Ta, Html <(ar12ee>Teks *nda</(ar12ee> MarFuee !9@9! MarNuee !.C.! adalah pengembangan dari !.C, keistimewaannya ,ika *nda arahkan mouse pada teks tersebut maka dia akan istirahat dan berhenti dari per,alanannya yang pan,ang. Ta, Html <(ar12ee *)(*20e*ver="t;i0.0t*%CE" *)(*20e*2t="t;i0.0tartCE">Teks *nda</(ar12ee> MarFuee !9@9" MarNuee !.C.# ,ika *nda menggunakan teks *rabic yang dimulai dari kanan ke kiri, maka *nda membutuhkan MarNue ini yang ber,alan sebaliknyaO dari kiri ke kanan, contoh dengan teks arabic PQRSTU VWXY Z[\] ^_T` Ta, Html <(ar12ee 8irecti*)="ri6;t">Teks *nda</(ar12ee> MarFuee "9@ MarNuee #.C MarNuee ini tidak memiliki kemampuan magic seperti $a%id Coper-ield marNuee sebelumnya yang bisa menembus ruang, MarNuee #.C ini ker,aannya bolak)balik dari ruang kotak yang kasat mata. 2 Ta, Html <(ar12ee be;avi*r="alter)ate">Teks *nda</(ar12ee> MarFuee "9@9! MarNue #.C.! Pengembangan dari marNuee sebelumnya, dengan pancingan scrollamount dia men,adi sangat agresi- 2 Ta, Html <(ar12ee be;avi*r="alter)ate" 0cr*lla(*2)t="+I">Teks *nda</(ar12ee> MarFuee "9@9" MarNuee #.C.# Masih pengembangan dari MarNuee #.C dengan sentuhan on)mouse)o%er stop dan on)mouse)out start, seperti marNuee !.C.! ,ika *nda arahkan mouse pada teks maka dia akan berhenti. Ta, Html
<(ar12ee be;avi*r="alter)ate" *)(*20e*ver="t;i0.0t*%CE" *)(*20e*2t="t;i0.0tartCE">Teks *nda</(ar12ee>

MarFuee %9@ MarNuee &.C $ia adalah marNuee climbing, marNuee pendaki ini suka sekali ketinggian, sehingga kita lihat arah teksnya pun ke atas 1up2 2. 6ika *nda memiliki teks yang banyak,

maka marNuee ini merupakan pilihan yg tepat dan sangat cocok sebagai teman pendamping hidup *nda. Ta, Html <(ar12ee 8irecti*)="2%">Teks *nda</(ar12ee> MarFuee %9@9! MarNuee &.C.! Pengembangan dari marNuee sebelumnya yang tidak mempunyai batas ruang, marNuee ini kita batasi ruang kasatnya sehingga memliki height !CC sa,a. $emikian dengan kemampuan scrollamountnya kita perlambat. $an kita kasih on mouse stop4start ,uga. Ta, Html
<(ar12ee 8irecti*)="2%" *)(*20e*ver="t;i0.0t*%CE" &i8t;="+##H" 0cr*lla(*2)t="2" *)(*20e*2t="t;i0.0tartCE" ;ei6;t="+##">Teks *nda</(ar12ee>

MarFuee %9@9" MarNuee &.C.# Masih pengembangan dari marNuee sebelumnya, hanya sa,a teks berada di tengah ruang kasat. Ta, Html
<(ar12ee 8irecti*)="2%" &i8t;="+##H" 0cr*lla(*2)t="2" ;ei6;t="+##" ali6)="ce)ter">Teks *nda</(ar12ee>

MarFuee %9@9% MarNuee &.C.& Pengembangan ,uga dengan arah berlawanan dari marNuee sebelumnya, marNuee ini senang sekali ber,alan menurun. 0ehinggan teks yang kita lihat ber,alan dari atas ke bawah. ?emampuan scrollamountnya tidak kita batasi sehingga terlihat agresidengan ruang kasat yang kecil. 0ilahkan *nda perlambat sendiri. Ta, Html <(ar12ee 8irecti*)="8*&)" &i8t;="+##H" ;ei6;t="+##">Teks *nda</(ar12ee> $emikian tips sederhana ini, silahkan *nda coba....a 6ika ingin manambahkan marNuee yang lain silahkan tulis komentar. 2

*pa itu HTMLb


HTML singkatan dari Hyper Tect Markup Language. HTML adalah sebuah -ile berupa teks yang berisi tags kecil yang telah dinaikkan 1markup2. Tags atau @tanda pengenal@ yang telah di markup ini membuat browser 1so-tware4aplikasi program internet2 dapat membaca dan menampilkan tags yang dimaksud. 0ebuah -ile HTML harus berekstensi htm atau html. 0ebuah -ile HTML dapat dibuat melalui teks editor sederhana yang kita kenal dengan notepad 4 cuteHTML, dll.