P. 1
Cara Membuat Website Dengan HTML!!!

Cara Membuat Website Dengan HTML!!!

4.0

|Views: 125,010|Likes:
Published by Billie
Cara Membuat Website Dengan metode !!!
Cara Membuat Website Dengan metode !!!

More info:

Published by: Billie on Jun 16, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
See more
See less

09/26/2014

Materi TIK XII SMANSA_JOE

MATERI : CARA MEMBUAT WEBSITE SEDERHANA
BELAJAR MEMBUAT WEBSITE
Seiring dengan pertambahan jm!ah netter "penggna internet# di $e!rh dnia% terma$& di Ind'ne$ia%
ma&in ban(a& p!a 'rang (ang ingin mempn(ai h'mepage ata )eb$ite $endiri* Ha! ini )ajar mengingat
man+aat (ang bi$a &ita dapat&an dengan mempn(ai )eb$ite $endiri* Memi!i&i a!amat emai!% $e&arang ini
b&an !agi $e$at (ang i$time)a* Tapi memi!i&i )eb$ite $endiri mng&in bagi &eban(a&an 'rang ma$ih
merpa&an $e$at (ang diidam,idam&an* Unt& it!ah &ami men-'ba men($n tt'ria! pra&ti$ ini agar
dapat dipe!ajari dan dipra&ti&&an '!eh para netter (ang ber&einginan menjadi )ebma$ter "penge!'!a )eb$ite#*
Mdah,mdahan dengan &emampan membat )eb$ite% &ita dapat i&t $erta men(ebar!a$&an i!m dan
in+'rma$i (ang berman+aat bagi $e!rh mmat man$ia% bai& di dnia mapn di a&hirat &e!a&*
Bagaimana -aran(a bi$a menampi!&an )eb$ite $endiri di internet. Ada beberapa tahapan dan !ang&ah (ang
har$ &ita !a!i nt& membat $ebah )eb$ite (ang benar,benar e&$i$ di internet* Artin(a )eb$ite (ang dari
$egi per)ajahan tida& /men(edih&an/% dari $egi i$i tida& /a$a!,a$a!an/ dan dari $egi pengnjng -&p
/di!iri&/* Unt& membat )eb$ite pertama,tama &ita har$ be!ajar baha$a HTML (ait $ebah /baha$a
pr'gram/ (ang memng&in&an &ita membat ha!aman )eb (ang bi$a ditampi!&an da!am br')$er "Internet
E0p!'rer% Net$-ape% 1pera% d!!#* Sete!ah &ita menga$ai da$ar,da$ar HTML% bar!ah &ita men-'ba membat
ren-ana dan ran-angan dari de$ain dan i$i )eb$ite (ang henda& &ita bat* 2emdian ran-angan it &ita
tang&an da!am bent& ha!aman,ha!aman )eb (ang terpad* Sete!ah $e!e$ai ata /mengarah &e $e!e$ai/% &ita
har$ menda+tar&ann(a &e )eb h'$ting agar )eb$ite &ita /terpa$ang/ dan dapat dia&$e$ di internet* A&hirn(a%
(ang jga tida& &a!ah penting ada!ah bagaimana mempr'm'$i&an )eb$ite ter$ebt agar di&ena! dan
di&njngi '!eh para netter*
Nah% &ini &ita m!ai dari !ang&ah a)a! (ait be!ajar baha$a HTML*
BELAJAR HTML
De)a$a ini% hampir $ema d'&men )eb dibat dengan baha$a HTML "H(perte0t Mar&,p Langage#*
Me$&ipn anda bi$a $aja membat )eb page "ha!aman )eb# tanpa mengerti $edi&itpn HTML% (a&ni dengan
menggna&an edit'r HTML berjeni$ W3SIW34 $eperti Mi-r'$'+t 5r'nt6age% Ad'be 6ageMi!! ata
Net$-ape C'mp'$er% namn $angat di$aran&an bah&an n(ari$ dihar$&an% agar anda mengerti baha$a HTML*
Tertama agar anda bi$a meman+aat&an $e-ara 'ptima! berbagai +a$i!ita$ br')$er dan mengingat $ejm!ah
&e!emahan (ang terdapat pada edit'r W3SIW34 $eperti di ata$* Unt& it !ang&ah pertama bagi Anda (ang
ber-ita,-ita memi!i&i )eb$ite $endiri ada!ah be!ajar HTML*
HTML "H(perte0t Mar&p Langage# ada!ah baha$a pr'gram (ang digna&an nt& men!i$ +'rmat
d'&men (ang dapat digna&an da!am Web* Dengan HTML% te&$ ASCII "+i!e 7*t0t# dapat dip'!e$ "di,mar&,
p# dengan &'de,&'de tertent (ang di$ebt tag nt& menjadi d'&men HTML "+i!e 7*htm ata 7*htm!#*
1!eh &arena it% nt& membat d'&men HTML% anda bi$a menggna&an $ema pr'gram te&$ edit'r bia$a%
m!ai dari N'tepad hingga MS W'rd* Unt& mdahn(a% &ita gna&an pr'gram N'tepad* B&a!ah pr'gram
N'tepad* Bi!a anda be!m tah -aran(a% &!i& Start 8 6r'gram$ 8 A--e$$'rie$ !a! N'tepad* Se&arang i&ti!ah
dengan $e&$ama !atihan,!atihan beri&t $at demi $at*
6EN4ENALAN 21DE HTML
Da!am pr'gram N'tepad anda% t!i$!ah $eperti ini:
9HTML8
9:HTML8
Ma$ing,ma$ing bari$ di ata$ di$ebt tag* Tag ada!ah &'de (ang digna&an nt& me,mar&,p "mem'!e$# te&$
ASCII menjadi +i!e HTML* Setiap tag diapit dengan tanda &rng rn-ing* Ada tag pemb&a (ait
9HTML8 dan ada tag pentp (ait 9:HTML8 (ang ditandai dengan tanda $!a$h "gari$ miring# di depan
a)a! t!i$ann(a* Tag di ata$ memberi&an +aidah bah)a (ang a&an dit!i$ diantara &eda tag ter$ebt ada!ah
i$i dari d'&men HTML* 6er! anda &etahi bah)a tag,tag htm! dapat dit!i$ dengan hr+ be$ar atapn
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
hr+ &e-i!* Artin(a% pen!i$an 9HTML8 ata 9htm!8 ata 9Htm!8 $ama $aja ha$i!n(a* Namn per! $e!a!
diingat bah)a pen!i$an tag (ang $a!ah me$&ipn han(a $at &ara&ter a&an berpengarh terhadap d'&men
HTML anda% bah&an bi$a bera&ibat d'&men HTML anda tida& bi$a ditampi!&an da!am br')$er*
Se&arang &ita a&an bera!ih pada tag $e!anjtn(a* Tambah&an!ah tag $eperti beri&t:
9HTML8
9B1D38
9:B1D38
9:HTML8
I$i dari d'&men HTML (ang $e$ngghn(a ada!ah (ang dit!i$ diantara tag 9B1D38* C'ba t!i$&an:
9HTML8
9B1D38
T!i$an ini a&an tampa& da!am br')$er*
9:B1D38
9:HTML8
Se&arang $impan!ah +i!e ini dengan meng,&!i& men 5i!e !a! Sa<e A$* 6ada &'ta& dia!'g (ang mn-!%
ter!ebih dah! &!i& ana& panah &e-i! di jng &anan &'ta& Sa<e a$ t(pe &emdian pi!ih A!! 5i!e$ "7*7#*
Sete!ah it% i$i!ah &'ta& 5i!e name dengan nama +i!e (ang anda ingin&an mi$a!n(a: !atih@*htm* Jangan !pa
penambahan e&$ten$i *htm di be!a&ang nama +i!eA A&hirn(a% &!i& t'mb'! Sa<e ma&a +i!e a&an ter$impan
$ebagai d'&men )eb* 2ini% ttp!ah pr'gram N'tepad anda* Se&arang b&a!ah !agi pr'gram br')$er
"Internet E0p!'rer# $e!ain jende!a br')$er (ang anda ba-a ini* 2!i& men 5i!e !a! 1pen* 6ada &'ta& dia!'g
(ang mn-!% &!i& t'mb'! Br')$e* Cari dan pi!ih +i!e !atih@*htm !a! &!i& 1pen* Nah% !ihat!ah ha$i! &ar(a
anda (ang pertamaAT!i$an ini a&an tampa& da!am br')$er
Apa&ah tag B1D3 +ng$in(a $e&edar penanda tbh ata i$i dari d'&men )eb. Tida&% da!am tag B1D3 ini
bi$a &ita $i$ip&an berma-am,ma-am atribt (ang a&an berpengarh terhadap +'rmat ata tampi!an ha!aman
)eb $e-ara &e$e!rhan* 6ada &e$empatan ini &ita mengambi! -'nt'h bagaimana mengbah )arna !atar
be!a&ang dan )arna t!i$an dari ha!aman )eb dengan penambahan atribt &e da!am tag B1D3*
Se&arang !ihat!ah &emba!i br')$er anda (ang $edang menampi!&an +i!e !atih@ tadi* 2!i& men Bie) !a!
S'r-e* Dengan in$tr&$i ini a&an mn-!!ah pr'gram N'tepad (ang di da!amn(a tampa& $'r-e -'de ata
&'de,&'de HTML (ang tadi anda bat* Mi$a!n(a &ita a&an menjadi&an ha!aman )eb !atih@ ini menjadi
ber)arna !atar be!a&ang &ning dengan t!i$an ber)arna merah* Unt& it% &ita per! menambah&an atribt
B4C1L1R dan TECT &e da!am tag b'd( $ebagai beri&t:
9HTML8
9B1D3 B4C1L1RD/(e!!')/ TECTD/red/8
T!i$an ini a&an tampa& da!am br')$er*
9:B1D38
9:HTML8
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
Simpan!ah &emba!i +i!e ini "&!i& 5i!e !a! Sa<e#* Unt& me!ihat bagaimana ha$i!n(a% pergi!ah !agi &e pr'gram
br')$er (ang menampi!&an ha!aman )eb !atih@ tadi* 2!i& men Bie) !a! Re+re$h ata &!i& t'mb'! Re+re$h
pada t''!bar ata bi$a jga dengan mene&an t'mb'! 5E pada &e(b'ard* Dengan demi&ian% br')$er a&an
memanggi! !ang +i!e !atih@ (ang &ini $dah menga!ami perbahan* Ma&a a&an tampa&!ah ha$i!n(a:T!i$an
ini a&an tampa& da!am br')$er
6er! di&etahi bah)a penentan )arna pada HTML bi$a dengan nama )arna "da!am baha$a Inggri$# dan
bi$a p!a dengan &'de )arna* 2'de )arna dit!i$ da!am +'rmat he&$a Frrggbb* Beri&t ini ada!ah @G nama
)arna be$erta &'den(a da!am +'rmat he&$a "harap diingat bah)a t!i$an > ada!ah ang&a n'!% b&an hr+
1#*b!a-& F>>>>>> b!e F>>>>55 '!i<e FH>H>>>
)hite F555555 +-h$ia F55>>55 green F>>H>>>
red F55>>>> gra( FH>H>H> tea! F>>H>H>
(e!!') F5555>> $i!<er FC>C>C> na<( F>>>>H>
!ime F>>55>> mar''n FH>>>>> prp!e FH>>>H>
aIa F>>5555
Dengan demi&ian% &'de HTML nt& -'nt'h di ata$ bi$a dit!i$ $ebagai beri&t:
9HTML8
9B1D3 B4C1L1RD/F5555>>/ TECTD/F55>>>>/8
T!i$an ini a&an tampa& da!am br')$er*
9:B1D38
9:HTML8
Dengan menggna&an &'de )arna he&$a% <aria$i )arna (ang dibat bi$a !ebih ban(a&* 2!i& di $ini nt&
me!ihat da+tar &'de )arna (ang !ainn(aA
Demi&ian!ah $e&i!a$ +ng$i tag B1D3* Se&arang b&a!ah &emba!i $'r-e -'de a!ia$ &'de,&'de HTML*
Ma$ih ingat% &an -aran(a. "2!i& men Bie) !a! S'r-e#* Tambah&an!ah tag,tag beri&t ini:
9HTML8
9HEAD8
9TITLE89:TITLE8
9:HEAD8
9B1D3 B4C1L1RD/(e!!')/ TECTD/red/8
T!i$an ini a&an tampa& da!am br')$er*
9:B1D38
9:HTML8
Di $ini ter!ihat bah)a &ita menambah tag 9HEAD8 dan tag 9TITLE8* Tag HEAD ber+ng$i nt& mengapit
berbagai ma-am +ng$i dan in+'rma$i (ang ber&enan dengan ha!aman )eb (ang ber$ang&tan* 6ada !atihan
&a!i ini% &ita mema$&&an tag TITLE diantara tag HEAD* Se$ai naman(a% tag TITLE ini ber+ng$i nt&
mengapit &a!imat (ang menjadi jd! dari ha!aman )eb ter$ebt* Se&arang mari &ita t!i$&an jd! ha!aman
)eb ini:
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
9HTML8
9HEAD8
9TITLE82ar(a 6ertama&9:TITLE8
9:HEAD8
9B1D3 B4C1L1RD/(e!!')/ TECTD/red/8
T!i$an ini a&an tampa& da!am br')$er*
9:B1D38
9:HTML8
Simpan !agi +i!e ini dengan meng,&!i& 5i!e !a! Sa<e* Se&arang &ita a&an me!ihat bagaimana perbahann(a
da!am br')$er* La&&an !agi Re+re$h $eperti di ata$* Ma&a anda a&an me!ihat di bari$ terata$ "(ang
dinama&an Tit!e Bar# dari pr'gram br')$er a&an menampi!&an jd! ata tite! dari ha!aman )eb anda (ait:
2ar(a 6ertama&* A!hamd!i!!ah% $e!e$ai!ah !atihan pertama &ita*
MEN4UTA2,ATI2 HURU5
Da!am !atihan &eda ini% &ita a&an mempe!ajari beberapa tag (ang re!ati+ mdah diingat* Tag,tag ini
ber+ng$i nt& mengbah tipe hr+ (ait meneba!&an "b'!d#% membat t!i$an miring "ita!i-# ata memberi
gari$ ba)ah "nder!ine#* B&a !agi pr'gram N'tepad &emdian t!i$&an $eperti beri&t ini:
9HTML8
9HEAD8
9TITLE8Tipe,tipe Te&$9:TILE8
9:HEAD8
9B1D38
Ada tiga ma-am tipe t!i$an (ang pa!ing $ering digna&an da!am pen!i$an d'&men apa $aja* 2etiga tipe
ter$ebt ia!ah t!i$an teba!% t!i$an miring dan t!i$an bergari$ ba)ah* Bi$a p!a da tipe hr+ dipad&an
mi$a!n(a t!i$an teba! dan miring% t!i$an teba! dan bergari$ ba)ah ata t!i$an miring dan bergari$ ba)ah*
Bah&an bi$a p!a &etiga tipe t!i$an ter$ebt $e&a!ig$ bergabng menjadi $at berpa t!i$an teba!% miring
dan bergari$ ba)ah*
9:B1D38
9:HTML8
Simpan!ah +i!e ter$ebt* Jangan !pa mengi&ti !ang&ah,!ang&ah -ara men(impan +i!e HTML (ang $dah &ita
pe!ajari da!am !atihan pertama dah!* Sete!ah +i!e ter$impan% b&a!ah +i!e ter$ebt dengan pr'gram Internet
E0p!'rer* 6erhati&an!ah bah)a $ema t!i$an da!am d'&men ter$ebt ma$ih $eragam* 2ini% &ita a&an
me!a&&an $edi&it perbahan pada beberapa &ata dan &a!imat (ang ada di $it $ehingga menjadi $eperti
ini:Ada tiga ma-am tipe t!i$an (ang pa!ing $ering digna&an da!am pen!i$an d'&men apa $aja* 2etiga tipe
ter$ebt ia!ah t!i$an teba!% t!i$an miringdan t!i$an bergari$ ba)ah* Bi$a p!a da tipe hr+ dipad&an
mi$a!n(a t!i$an teba! dan miring% t!i$an teba! dan bergari$ ba)ah ata t!i$an miring dan bergari$ ba)ah*
Bah&an bi$a p!a &etiga tipe t!i$an ter$ebt $e&a!ig$ bergabng menjadi $at berpa t!i$an teba!% miring
dan bergari$ ba)ah*
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
Bagaimana -aran(a. B&a!ah $'r-e -'de dari d'&men tadi "te&an 5E#% &emdian tambah&an tag,tag
beri&t* Tag,tag ter$ebt ada!ah 9B8 nt& meneba!&an "b'!d# t!i$an% 9I8 nt& memiring&an "ita!i-# t!i$an
dan 9U8 nt& menggari$,ba)ahi "nder!ine# t!i$an:
9HTML8
9HEAD8
9TITLE8Tipe,tipe Te&$9:TITLE8
9:HEAD8
9B1D38
Ada tiga ma-am tipe t!i$an (ang pa!ing $ering digna&an da!am pen!i$an d'&men apa $aja* 2etiga tipe
ter$ebt ia!ah t!i$an 9B8teba!9:B8% t!i$an 9I8miring9:I8 dan t!i$an 9U8bergari$ ba)ah9:U8* Bi$a p!a
da tipe hr+ dipad&an mi$a!n(a t!i$an 9B89I8teba! dan miring9:B89:I8% t!i$an 9B89U8teba! dan
bergari$ ba)ah9:B89:U8 ata t!i$an 9I89U8miring dan bergari$ ba)ah9:I89:U8* Bah&an bi$a p!a &etiga
tipe t!i$an ter$ebt $e&a!ig$ bergabng menjadi $at berpa t!i$an 9B89I89U8teba!% miring dan bergari$
ba)ah9:B89:I89:U8*
9:B1D38
9:HTML8
Sete!ah anda menambah&an $ema tag,tag ter$ebt% $impan "Sa<e# +i!e $'r-e -'de it &emdian !a&&an
Re+re$h pada d'&men )eb (ang tampa& pada pr'gram br')$er anda* Lihat!ah ha$i! perbahann(aA
Andai&ata ada (ang tida& bere$% -'ba perhati&an bai&,bai& pen!i$an tag,tag anda% m!ai dari tag pemb&a
9HTML8 hingga 9:HTML8 jangan $ampai ada (ang $a!ah t!i$ me$&ipn $at &ara&ter* Mi$a!n(a: bi!a tag
9:TITLE8 anda t!i$ 9:TILE8 ma&a br')$er tida& a&an menampi!&an t!i$an apa,apa da!am d'&men anda*
2a!a tida& per-a(a% -'ba!ah men!i$ $'r-e -'de (ang $a!ah $eperti it% $impan "$a<e# &emdian re+re$h
d'&men anda dan !ihat!ah ha$i!n(aA
Unt& !ebih mempermantap &eterampi!an (ang anda dapat&an dari !atihan &eda ini% ada bai&n(a anda
men-'ba membat d'&men HTML beri&t ini* Bat!ah d'&men dengan jd! "tite!#: 6emantapan Tipe,tipe
Te&$% (ang i$in(a ada!ah t!i$an $eperti beri&t:
2arena +i!e,+i!e HTML $ebenarn(a ada!ah +i!e,+i!e ASCII bia$a% ma&a anda dapat menggna&an edit'r,edit'r
te&$ $ederhana $eperti W'rdStar "WS#% N'tepad% MS Write% dan !ain,!ain* Edit'r,edit'r te&$ ter$ebt dapat
membimbing anda mempe!ajari &'de,&'de HTML $e-ara !ar da!am* A&an tetapi mng&in anda $edi&it
+r$tra$i &arena har$ mengeti& $ema &'de HTML bari$ per bari$ (ang da!am per&embangann(a a&an
menjadi $angat rmit* Me$&i demi&ian% menggna&an te&$ edit'r nt& membat ha!aman )eb ada!ah -ara
terbai& nt& benar,benar mengerti tentang $tr&tr +i!e HTML*
Bi!a anda $dah men(impann(a% b&a!ah dan !ihat!ah ha$i!n(a da!am pr'gram br')$er*
HEADER ATAU 2E6ALA TULISAN
Header ada!ah hr+,hr+ ber&ran &h$$ (ang digna&an nt& men!i$&an jd! bab ata $b bab* Ada
enam ting&atan header m!ai dari H@ hingga HG* H@ ada!ah header (ang pa!ing be$ar dan HG ada!ah header
(ang pa!ing &e-i!* C'ba t!i$ da!am N'tepad anda $ebagai beri&t: 9HTML89B1D38
9H@8Header !e<e! @9:H@8
9H=8Header !e<e! =9:H=8
9HJ8Header !e<e! J9:HJ8
9HK8Header !e<e! K9:HK8
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
9HE8Header !e<e! E9:HE8
9HG8Header !e<e! G9:HG8
9HTML89B1D38
Simpan!ah da!am +'rmat +i!e HTML &emdian b&a da!am br')$er* Ha$i!n(a a&an tampa& $ebagai
beri&t:Header !e<e! @
Header !e<e! =
Header !e<e! J
Header !e<e! K
Header !e<e! E
Header !e<e! G
BARIS DAN 6ARA4RA5
Se&arang &ita a&an mempe!ajari bagaimana -ara membat bari$ dan paragra+* Bia$an(a% nt& membat
bari$ bar% &ita !a&&an dengan mene&an t'mb'! Enter* Bagaimana dengan d'&men HTML. C'ba!ah
membat t!i$an beri&t pada N'tepad: 9HTML89B1D38
Bari$ pertama
Bari$ &eda
Bari$ &etiga
9HTML89B1D38
Simpan!ah $ebagai +i!e HTML &emdian b&a!ah da!am br')$er* Bagaimana ha$i!n(a. Tern(ata ha$i!n(a
han(a $eperti ini: Bari$ pertama Bari$ &eda Bari$ &etiga*
2e$imp!ann(a% pene&anan t'mb'! Enter tida& mengha$i!&an bari$ da!am tampi!an br')$er* Demi&ian!ah
$i+at pen!i$an d'&men HTML* Lanta$% bagaimana -aran(a membat bari$. 4na&an!ah tag 9BR8* Tag ini
tida& mempn(ai tag pentp* B&a!ah $'r-e &'de +i!e HTML tadi !a! edit $eperti beri&t:
9HTML89B1D38
Bari$ pertama
9BR8Bari$ &eda
9BR8Bari$ &etiga
9:HTML89:B1D38
Simpan &emdian !ihat ha$i!n(a dengan me,re+re$h pada br')$er* Ha$i!n(a &rang !ebih a&an $eperti ini:
Bari$ pertama
Bari$ &eda
Bari$ &etiga
Membat bari$ &a!imat% gampang &an . Tag 9BR8 ter$ebt dapat p!a digna&an nt& membat bari$
&'$'ng% artin(a bari$ (ang tida& mempn(ai &a!imat apa,apa* Edit!ah $e&a!i !agi $'r-e -'de !atihK*htm
menjadi $eperti ini:
9HTML89B1D38
Bari$ pertama9BR89BR8Bari$ &eda &'$'ng% dan ini bari$ &etiga9BR89BR89BR8Bari$ &eempat dan
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
&e!ima &'$'ng% dan ini bari$ &eenam
9:B1D389:HTML8
Simpan !a! re+re$h $e&a!i !agi ma&a ha$i!n(a a&an $eperti ini:
Bari$ pertama
Bari$ &eda &'$'ng% dan ini bari$ &etiga

Bari$ &eempat dan &e!ima &'$'ng% dan ini bari$ &eenam
Di $ini &ita !ihat bah)a tag 9BR8 (ang dit!i$ da &a!i a&an mengha$i!&an da bari$% demi&ian $eter$n(a*
Sete!ah pandai membat bari$% $e&arang &ita a&an be!ajar membat paragra+* 6erhati&an!ah -'nt'h t!i$an di
ba)ah ini:
9HTML89B1D38
6aragra+ pertama 9686aragra+ &eda 9686aragra+ &etiga
9:B1D389:HTML8
Bi!a di!ihat da!am br')$er% ha$i!n(a a&an $eperti ini:
6aragra+ pertama
6aragra+ &eda
6aragra+ &etiga
Dengan berpat'&an pada -'nt'h penggnaan tag 968 di ata$% -'ba!ah bat +i!e HTML dengan menggna&an
N'tepad $ehingga mengha$i!&an d'&men HTML (ang a&an tampa& di br')$er $eperti ini:
W'r!d Wide Web "WWW# merpa&an $ebah $i$tem dimana in+'rma$i "te&$% gambar% $ara% dan !ain,!ain#
dipre$enta$i&an da!am bent& h(perte0t dan dapat dia&$e$ '!eh $ebah peraga WWW "(ang $ering di$ebt
$ebagai br')$er#*
In+'rma$i di WWW pada mmn(a dit!i$ da!am bent& HTML "H(perte0t Mar&p Langage#* Se!ain it%
in+'rma$i !ain dapat berpa gambar "da!am +'rmat 4I5% J64% 6N4#% $ara "da!am +'rmat AU% WAB#% dan
'bje& m!timedia !ainn(a "$eperti MIDI% Sh'-&)a<e% Li-&time M'<ie% JD W'r!d#*
Bi!a anda ma$ih mengingat pe!ajaran,pe!ajaran terdah!% ma&a tanpa &e$!itan (ang berarti anda a&an bi$a
membat $'r-e -'de nt& mengha$i!&an t!i$an,t!i$an di ata$* 2'de $mbern(a &ira,&ira $ebagai beri&t:
9HTML89B1D38
9B8W'r!d Wide Web9:B8 "WWW# merpa&an $ebah $i$tem dimana in+'rma$i "te&$% gambar% $ara% dan
!ain,!ain# dipre$enta$i&an da!am bent& 9I8h(perte0t9:I8 dan dapat dia&$e$ '!eh $ebah peraga WWW
"(ang $ering di$ebt $ebagai 9U8br')$er9:U8#*
968In+'rma$i di WWW pada mmn(a dit!i$ da!am bent& HTML "H(perte0t Mar&p Langage#* Se!ain
it% in+'rma$i !ain dapat berpa: gambar "da!am +'rmat 4I5% J64% 6N4#% $ara "da!am +'rmat AU% WAB#%
dan 'bje& m!timedia !ainn(a "$eperti MIDI% Sh'-&)a<e% Li-&time M'<ie% JD W'r!d#*
9:HTML89:B1D38
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
Simpan!ah +i!e di ata$ &emdian b&a da!am br')$er*
N1TASI 2HUSUS
2ita te!ah mengetahi bah)a br')$er tida& mengena! pembatan bari$ dengan t'mb'! Enter* Di$amping it%
br')$er jga tida& mengena! pembatan $pa$i !ebih dari $at $pa$i dengan mene&an t'mb'! Spa$i atapn
t'mb'! Tab* Nah% bagaimana -aran(a membat !ebih dari $at $pa$i da!am d'&men HTML. 6embatan
$pa$i da!am &'de,&'de HTML diganti t!i$an Mnb$pN $eperti (ang bi$a &ita !ihat pada -'nt'h beri&t ini:
9HTML89B1D38
&ata,&ata ini diantarai $at $pa$i $edang&an9br8&ata,&ata Mnb$pNMnb$pNMnb$pN ini Mnb$pNMnb$pNMnb$pN
diantarai Mnb$pNMnb$pNMnb$pN !ima Mnb$pNMnb$pNMnb$pN $pa$i
9:HTML89:B1D38
Bi!a di!ihat da!am br')$er ha$i!n(a a&an $eperti ini:2ata,&ata ini diantarai $at $pa$i $edang&an
&ata,&ata ini diantarai !ima $pa$i
Di$amping n'ta$i nt& pembatan $pa$i "Mnb$pN# ada !agi $ejm!ah n'ta$i &h$$ nt& pen!i$an &ara&ter,
&ara&ter tertent* 2ara&ter,&ara&ter ini har$ dit!i$&an dengan n'ta$i &h$$ mengingat &ara&ter,&ara&ter ini
dipa&ai jga $ebagai &'de,&'de tag ata &arena memang tida& dijmpai da!am &ara&ter te&$ ASCII* Beri&t
beberapa diantaran(a:2ara&ter 2eterangan N'ta$i
9 &rng rn-ing b&a M!tN
8 &rng rn-ing ttp MgtN
M dan MampN
/ tanda peti& ganda MI'tN
O tanda p!$ min$ Mp!$mnN
P ha& -ipta ata -'p(rightM-'p(N
Q terda+tar ata regi$tered MregN
Mi$a!n(a &ita a&an membat t!i$an $eperti ini:Tip M Tri& ini di$aji&an nt& para /pem!a/* Ban(a&n(a R
?E arti&e!* Dan $etiap arti&e! terda+tarQ da!am dire&t'rat ha& -iptaP*
9harap ma&!m8
Begini!ah -ara pen!i$ann(a dengan baha$a HTML:
9HTML89B1D38
Tip MampN Tri& ini di$aji&an nt& para MI'tNpem!aMI'tN* Ban(a&n(a Mp!$mnN ?E arti&e!* Dan $etiap
arti&e! terda+tarMregN da!am dire&t'rat ha& -iptaM-'p(N* 9br8M!tNharap ma&!mMgtN*
9:HTML89:B1D38
MENAM6IL2AN A6A ADAN3A
Me$&ipn br')$er tida& mengena!i $pa$i !ebih dari $e&a!i % tab!a$i dan pembatan bari$ dengan enter%
namn dengan menggna&an tag 96RE8 ma&a br')$er a&an menampi!&an te&$ apa adan(a% ma&$dn(a
$pa$i dianggap $pa$i% tab!a$i dianggap tab!a$i dan enter dianggap enter* Bah&an +'nt,n(a pn mn-!
$e$ai a$!in(a* Begini -'nt'hn(a:
9HTML89B1D38
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
96RE8
9B86antn 6etah9:B8

Bera&it,ra&it &e h!
Ber$enang,$enang &emdian

Ber$a&it,$a&it dah!
Ber$enang,$enang &emdian
9:6RE8
9:B1D389:HTML8
Simpan!ah +i!e di ata$ $ebagai +i!e HTML &emdian tampi!&an da!am br')$er% ha$i!n(a a&an $eperti
ini:6antn 6etah
Bera&it,ra&it &e h!
Ber$enang,$enang &emdian
Ber$a&it,$a&it dah!
Ber$enang,$enang &emdian
Tag 96RE8 ini $angat diper!&an bi!a &ita ingin menampi!&an da!am ha!aman )eb $e&mp!an &ara&ter
ASCII da!am $$nan tertent $eperti -'nt'h beri&t ini: ;;;;;;;;;;;;;;;;;;;
S%,,,,,*%,,,,,*%,,,*T
SS SS SS TT
SU,,,,,VS,,,,,SS,,,,,TU,,,,*
W S ,SS, ;S "S
W %,,* S;;;;;SS;;;:*,,* S
D,"" U##,,,,,,,,,,,"" U##,DD
U,,V U,,V
Anda tertari& dengan gambar di ata$. It dinama&an ASCII Art* Ada beberapa -'nt'h di $in
ALI4NMENT ATAU 6ERATAAN
Da!am t!i$an -eta&% di&ena! tiga ata empat ma-am perataan (ait rata &iri "a!ign !e+t#% di tengah "-enter#%
rata &anan "a!ign right# dan rata &iri dan &anan "j$ti+(#* Tag Header dan Tag 6aragra+ dapat di$i$ipi dengan
atribt a!ign nt& me!a&&an perataan ini*
C'nt'h atribt perataan da!am tag header:
9HTML89B1D38
9H@8Header !e<e! @9:H@8
9H= a!ignD/-enter/8Header !e<e! =9:H=8
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
9HJ a!ignD/right/8Header !e<e! J9:HJ8
9HTML89B1D38
Bi!a di!ihat da!am br')$er% tampa& $eperti ini:Header !e<e! @
Header !e<e! =
Header !e<e! J
C'nt'h atribt perataan da!am tag paragra+:
9HTML89B1D38
968paragra+ rata &iri ada!ah de+a!t
96 a!ignD/-enter/8paragra+ di tengah
96 a!ignD/right/8paragra+ rata &anan
96 a!ignD/j$ti+(/8paragra+ rata &iri dan &anan
9:HTML89:B1D38
Ha$i!n(a $eperti (ang anda ba(ang&an:paragra+ rata &iri ada!ah de+a!t
paragra+ di tengah
paragra+ rata &anan
paragra+ rata &iri dan &anan
Berped'man dengan -'nt'h di ata$% -'ba!ah membat t!i$an dengan m'de! header dan paragra+ $ebagai
beri&t:Unt& Apa Mempn(ai H'mepage.
Ji&a anda $e'rang pe!ajar ata maha$i$)a% anda dapat membat h'mepage nt& memper&ena!&an $e&'!ah
ata ni<er$ita$ anda* Apa &egiatann(a% pr'gram &erjan(a di ma$a datang% 'rgani$a$i,'rgani$a$i (ang
terdapat di da!amn(a% dan !ain $ebagain(a*
Ji&a anda $e'rang i!m)an% pene!iti ata $ainti$% h'mepage anda bi$a dii$i dengan pb!i&a$i &ar(a i!miah
anda% te$i$% pr'p'$a!,pr'p'$a! ipte&% ren-ana pene!itian% ma$a!ah (ang dihadapi da!am pene!itian% jad)a!
$eminar% dan !ain $ebagain(a* Se!ain it% anda jga bi$a membat p'!!ing 'n!ine nt& &eper!an ri$et ata
nt& mend&ng te'ri,te'ri anda*
Ji&a anda $e'rang peng$aha% anda dapat mengi$i h'mepage anda dengan barang,barang pr'd&$i ata
perdagangan anda% tipe dan jeni$n(a% d&ngan prna ja!n(a% pema$arann(a% pr'+i! per$ahaan% jm!ah
&ar(a)an% !')'ngan pe&erjaan% gra+i& &emajan per$ahaan% dan $ebagain(a*
INDENTASI
Di$amping mengatr perataan% &ita pn bi$a mengatr p'$i$i bari$,bari$ paragra+ dari margin "tepi ha!aman#*
Ada tiga ma-am bent& indenta$i paragra+* 6ertama% bari$ pertaman(a $aja (ang aga& ma$& &e da!am*
Unt& membat paragra+ $ema-am ini &ita menggna&an tag 9DD8* C'nt'h:
9HTML89B1D38
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
9DD86aragra+ ata a!inea ia!ah $e&mp!an &a!imat (ang mengandng $at p'&'& pi&iran* Antara $at
paragra+ dengan paragra+ !ainn(a bia$an(a dipi$ah&an '!eh bari$ &'$'ng* Namn bia$a p!a paragra+ it
ditandai dengan p'$i$i bari$ pertaman(a (ang aga& ma$& &e da!am*
9HTML89B1D38
Begini!ah ha$i!n(a bi!a dib&a da!am br')$er:6aragra+ ata a!inea ia!ah $e&mp!an &a!imat (ang
mengandng $at p'&'& pi&iran* Antara $at paragra+ dengan paragra+ !ainn(a bia$an(a dipi$ah&an '!eh
bari$ &'$'ng* Namn bia$a p!a paragra+ it ditandai dengan p'$i$i bari$ pertaman(a (ang aga& ma$& &e
da!am*
2eda% membat paragra+ (ang $ema bari$n(a aga& ma$& &e da!am* Unt& membat paragra+ $ema-am ini
&ita menggna&an tag 9BL1C2LU1TE8 (ang mengapit paragra+,paragra+ (ang henda& &ita jadi&an ma$&
&e da!am*
9HTML89B1D38
Ini ada!ah paragra+ n'rma!
9BL1C2LU1TE8
968Ini paragra+ (ang aga& ma$& &e da!am*
96 a!ignD/j$ti+(/8Ini jga -'nt'h paragra+ (ang aga& ma$& &e da!am* Dengan &a!imat (ang aga& panjang%
&ita !ihat bah)a 9b8$ema bari$9:b8 da!am paragra+ ini !eta&n(a aga& ma$& &e da!am* 9i8Sama rata $ama
jahn(a9:i8*
9:BL1C2LU1TE8
968Nah% paragra+ ini &emba!i n'rma!% &arena tag 9i8b!'-&I'te9:i8 $dah ber!a! a!ia$ $dah dittp di
ata$* Ngerti% &an.
9:HTML89:B1D38
Begini!ah tampi!ann(a da!am br')$er:Ini ada!ah paragra+ n'rma!
Ini paragra+ (ang aga& ma$& &e da!am*
Ini jga -'nt'h paragra+ (ang aga& ma$& &e da!am* Dengan &a!imat (ang aga& panjang% &ita !ihat bah)a
$ema bari$ da!am paragra+ ini !eta&n(a aga& ma$& &e da!am* Sama rata $ama jahn(a*
Nah% paragra+ ini &emba!i n'rma!% &arena tag b!'-&I'te $dah ber!a! a!ia$ $dah dittp di ata$* Ngerti%
&an.
2etiga% membat paragra+ da!am $$nan da+tar de+ini$i "de+initi'n !i$t#* Da+tar de+ini$i ia!ah $$nan
paragra+ (ang ber$e!ang,$e!ing antara paragra+ n'rma! (ang merpa&an &a!imat (ang henda& dije!a$&an
dengan paragra+ (ang aga& ma$& &e da!am (ang merpa&an penje!a$an ata de+ini$i dari &a!imat di ata$n(a*
Unt& !ebih je!a$n(a% beri&t ini -'nt'h da+tar de+ini$i:
Da+tar I$ti!ah 6enting:
Internet
Sing&atan dari inter-'nne-ti'n net)'r& ata hbngan antar jaringan* Internet ia!ah jaringan &'mpter
g!'ba! dan merpa&an jaringan &'mpter (ang terbe$ar di dnia &arena mamp menghbng&an $e!rh
&'mpter (ang ada di dnia*
HTT6
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
Sing&atan dari H(perte0t Tran$+er 6r't'-'! ada!ah $a!ah $at pr't'&'! baha$a (ang digna&an nt&
ber&'mni&a$i antar $er<er &'mpter da!am internet* 6r't'&'! baha$a (ang !ain da!am internet mi$a!n(a:
Te!net% Ne)$% 4r'pher% 5T6*
2arena -ma dem'% -&p da de+ini$i $aja!ah*
Unt& membat da+tar de+ini$i $ema-am di ata$ digna&an tiga ma-am tag (ait 9DL8 (ang menandai
dim!ai ata dia&hirin(a da+tar de+ini$i% 9DT8 (ang menandai paragra+ n'rma! "(ang dije!a$&an# dan 9DD8
(ang menandai paragra+ (ang aga& ma$& &e da!am "(ang menje!a$&an paragra+ di ata$n(a#*
Unt& -'nt'h di ata$ begini!ah &'de $mbern(a:
9HTML89B1D38
9p a!ignD/-enter/89b8Da+tar I$ti!ah 6enting:9:b8
9DL8
9DT89B8Internet9:b8
9DD8Sing&atan dari 9i8inter-'nne-ti'n net)'r&9:i8 ata hbngan antar jaringan* Internet ia!ah jaringan
&'mpter g!'ba! dan merpa&an jaringan &'mpter (ang terbe$ar di dnia &arena mamp menghbng&an
$e!rh &'mpter (ang ada di dnia*
9DT89b8HTT69:B8
9DD8Sing&atan dari 9i8H(perte0t Tran$+er 6r't'-'!9:i8 ada!ah $a!ah $at pr't'&'! baha$a (ang digna&an
nt& ber&'mni&a$i antar $er<er &'mpter da!am internet* 6r't'&'! baha$a (ang !ain da!am internet
mi$a!n(a: Te!net% Ne)$% 4r'pher% 5T6*
9:DL8
2arena -ma dem'% -&p da de+ini$i $aja!ah* Nah% paragra+ ini &emba!i n'rma!*
9:HTML89:B1D38
Se&arang% -'ba!ah ber!atih membat da+tar de+ini$i $endiriA
DA5TAR ITEM "BULLET AND NUMBERIN4#
Ada da ma-am da+tar item (ait da+tar item ta& berrt "b!!et# dan da+tar item berrt "nmbering#*
C'nt'h da+tar item ta& berrt "b!!et#:
item pertama
item &eda
item &etiga
C'nt'h da+tar item berrt "nmbering#:
item pertama
item &eda
item &etiga
Unt& membat da+tar item ta& berrt &ita gna&an tag 9UL8 $edang nt& membat da+tar item berrt
digna&an tag 91L8* Adapn $etiap item ditandai dengan tag 9LI8*
Begini!ah &'de $mber nt& da+tar item ta& berrt di ata$:
9!8
9!i8item pertama9:!i8
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
9!i8item &eda9:!i8
9!i8item &etiga9:!i8
9:!8
Dan begini!ah &'de $mber nt& da+tar item berrt di ata$:
9'!8
9!i8item pertama9:!i8
9!i8item &eda9:!i8
9!i8item &etiga9:!i8
9:'!8
2ita pn dapat membat da+tar item berting&at ata da+tar item di da!am da+tar item* C'nt'hn(a $ebagai
beri&t:item pertama
item &eda
$b item pertama
$b item &eda
$b $b item pertama
$b $b item &eda
$b $b item &etiga
$b item &etiga
item &etiga
Unt& membat da+tar item berting&at $eperti di ata$ tida& ada penambahan tag ata atribt apa,apa* 3ang
di!a&&an han(a!ah menempat&an tag,tag da+tar item ting&at ba)ah di da!am da+tar item ting&at di ata$n(a*
Unt& je!a$n(a begini!ah $'r-e &'den(a:
9!8
9!i8item pertama9:!i8
9!i8item &eda9:!i8
9!8
9!i8$b item pertama9:!i8
9!i8$b item &eda9:!i8
9!8
9!i8$b $b item pertama9:!i8
9!i8$b $b item &eda9:!i8
9!i8$b $b item &etiga9:!i8
9:!8
9!i8$b item &etiga9:!i8
9:!8
9!i8item &etiga9:!i8
9:!8
6en!i$an &'de,&'de HTML di ata$ $engaja &ita beri $pa$i aga& &e da!am% agar !ebih mdah diba-a dan
dimengerti mana (ang !e<e! pertama% &eda dan $eter$n(a* Sebenarn(a% tanpa pemberian $pa$i% ha$i!n(a
da!am br')$er tetap a&an menggna&an $pa$i aga& &e da!am nt& !e<e!,!e<e! di ba)ahn(a*
Cara (ang $ama di!a&&an nt& membat da+tar item berrt berting&at* 2ita tingga! mengganti tag 9UL8
dengan tag 91L8 ma&a ha$i!n(a a&an $eperti ini: item pertama
item &eda
$b item pertama
$b item &eda
$b $b item pertama
$b $b item &eda
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
$b $b item &etiga
$b item &etiga
item &etiga
Dari -'nt'h da+tar item ta& berrt (ang berting&at di ata$% &ita !ihat bah)a $e-ara de+a!t% br')$er a&an
menampi!&an gambar "b!!et# b!atan hitam nt& item,item !e<e! pertama% !ing&aran nt& nt& item,item
!e<e! &eda% dan &'ta& hitam nt& item,item !e<e! &etiga* Sebenarn(a &ita pn bi$a memi!ih $endiri b!!et
jeni$ apa (ang &ita ingin gna&an dengan menambah atribt T36E da!am tag 9UL8* Rm$n(a: 9UL
T36ED/jeni$ b!!et/8* Dimana nama b!!et ada tiga ma-am: /di$-/ nt& b!atan hitam% /-ir-!e/ nt&
!ing&aran% dan /$Iare/ nt& &'tam hitam* Jadi bi!a &ita ingin membat da+tar item $ema-am ini:item
pertama
item &eda
item &etiga
Ma&a &ita men!i$&an &'de,&'de HTML $ebagai beri&t:
9! t(peD/$Iare/8
9!i8item pertama9:!i8
9!i8item &eda9:!i8
9!i8item &etiga9:!i8
9:!8
Unt& da+tar item berrt "nmbering#% jeni$ ang&an(a pn dapat diganti dengan menggna&an atribt (ang
$ama* Jadi rm$n(a: 91L T36ED/jeni$ ang&a/8* Sedang&an jeni$ ang&an(a dii$i dengan ang&a @% A% a% I%
ata i tergantng $e!era &ita* C'nt'h:
9'! t(peD/I/8
9!i8item pertama9:!i8
9!i8item &eda9:!i8
9'! t(peD/A/8
9!i8$b item pertama9:!i8
9!i8$b item &eda9:!i8
9'! t(peD/@/8
9!i8$b $b item pertama9:!i8
9!i8$b $b item &eda9:!i8
9!i8$b $b item &etiga9:!i8
9:'!8
9!i8$b item &etiga9:!i8
9:'!8
9!i8item &etiga9:!i8
9:'!8
A&an mengha$i!&an da+tar item $ebagai beri&t:item pertama
item &eda
$b item pertama
$b item &eda
$b $b item pertama
$b $b item &eda
$b $b item &etiga
$b item &etiga
item &etiga
Se&ian pe!ajaran tentang b!!et dan nmbering*
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
BARIASI 51NT
Tanpa -ampr tangan &ita% d'&men HTML menggna&an +'nt de+a!t dari Wind')$ "Si$tem 1pera$i
2'mpter# ata br')$er "Internet E0p!'rer#% bia$an(a Time$ Ne) R'man dengan &ran @= p'int* 2ita bi$a
mengbah jeni$% )arna dan &ran +'nt $e$ai dengan $e!era &ita menggna&an tag 951NT8 dii&t dengan
atribt,atribtn(a* Mi$a!n(a nt& mengbah jeni$ +'nt &ita gna&an atribt 5ACE:
9HTML89B1D38
Ini ada!ah +'nt 951NT 5ACED/Aria!/8Aria!9:51NT8% ini ada!ah +'nt 951NT
5ACED/Berdana/8Berdana9:51NT8% dan ini ada!ah +'nt 951NT 5ACED/Impa-t/8Impa-t9:51NT8
9:HTML89:B1D38
Bi!a di!ihat da!am br')$er% a&an tampa& $eperti ini:Ini ada!ah +'nt Aria!% ini ada!ah +'nt Berdana% dan ini
ada!ah +'nt Impa-t
Unt& mengbah &ran +'nt% gna&an atribt SIXE:
9HTML89B1D38
951NT SIXED/@/85'nt SiYe @9:51NT8% 951NT SIXED/=/85'nt SiYe =9:51NT8% 951NT
SIXED/J/85'nt SiYe J9:51NT8% 951NT SIXED/K/85'nt SiYe K9:51NT8% 951NT SIXED/E/85'nt SiYe
E9:51NT8% 951NT SIXED/G/85'nt SiYe G9:51NT8% 951NT SIXED/?/85'nt SiYe ?9:51NT8
9:HTML89:B1D38
Bi!a di!ihat da!am br')$er% a&an tampa& $eperti ini:5'nt SiYe @% 5'nt SiYe =% 5'nt SiYe J% 5'nt SiYe K% 5'nt
SiYe E% 5'nt SiYe G% 5'nt SiYe ?
Sedang&an nt& mengbah )arna t!i$an% menggna&an atribt C1L1R:
9HTML89B1D38
951NT C1L1RD/b!e/8T!i$an )arna bir9:51NT8% 951NT C1L1RD/red/8T!i$an )arna
merah9:51NT8% 951NT C1L1RD/(e!!')/8T!i$an )arna &ning9:51NT8
9:HTML89:B1D38
Bi!a di!ihat da!am br')$er% a&an tampa& $eperti ini:T!i$an )arna bir% T!i$an )arna merah% T!i$an )arna
&ning
Da!am $at tag 51NT &ita bi$a menggabng&an !ebih dari $at atribt* 6erhati&an -'nt'h beri&t:
9HTML89B1D38
951NT 5ACED/Aria!/ SIXED/=/85'nt Aria! &ran =9:51NT8% 951NT 5ACED/Berdana/
C1L1RD/red/85'nt Berdana )arna merah9:51NT8% 951NT 5ACED/Impa-t SIXED/E/
C1L1RD/b!e/85'nt Impa-t &ran E )arna bir9:51NT8
9:HTML89:B1D38
Bi!a di!ihat da!am br')$er% a&an tampa& $eperti ini:5'nt Aria! &ran =% 5'nt Berdana )arna merah% 5'nt
Impa-t &ran E )arna bir
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
Unt& mengbah +'nt de+a!t nt& $at ha!aman HTML% digna&an tag 9BASE51NT8 (ang ditempat&an
diantara tag 9HEAD8 dan 9:HEAD8* C'nt'h:
9HTML8
9HEAD8
9BASE51NT 5ACED/aria!/ SIXED/@>/ C1L1RD/b!e/8
9:HEAD8
9B1D38
5'nt de+a!t nt& $ema t!i$an pada ha!aman ini ada!ah +'nt aria! dengan &ran @> dan )arna bir*
9:HTML89:B1D38
C'ba!ah bat da!am $ebah +i!e HTML &emdian !ihat ha$i!n(a da!am br')$erA
SUBSCRI6T DAN SU6ERSCRI6T
Sb$-ript ada!ah t!i$an (ang aga& &e-i! dan !eta&n(a aga& di ba)ah $edang&an $per$-ript ada!ah t!i$an
(ang aga& &e-i! dan !eta&n(a aga& di ata$* Unt& men!i$ $b$-ript &ita gna&an tag 9SUB8 $edang nt&
men!i$ $per$-ript &ita gna&an tag 9SU68* Ini!ah -'nt'hn(a:
9HTML89B1D38
T!i$an N'rma!9SUB8T!i$an Sb$-ript9:SUB8
968T!i$an N'rma!9SU68T!i$an Sper$-ript9:SU68
9:HTML89:B1D38
Begini!ah ha$i!n(a da!am br')$er:T!i$an N'rma!T!i$an Sb$-ript
T!i$an N'rma!T!i$an Sper$-ript
Bag$n(a% anda ber!atih $edi&it* C'ba bat t!i$an beri&t:Rm$ &imia A$am S!+at ada!ah H=S1K
La$ &'!am @E> m= $edang <'!me &'!am J>> mJ
4ampang% &an.
LIN2 ATAU 2AITAN
Se&arang &ita a&an be!ajar membat !in& (ang merpa&an -iri &ha$ dari d'&men )eb* Lin& ada!ah $ebah
te&$ ata gambar (ang bi!a di,&!i& a&an memba)a anda &e bagian !ain dari d'&men )eb* Sebah !in&
bia$an(a ditandai dengan te&$ )arna bir bergari$ ba)ah ata p'inter m'$e (ang berbah menjadi te!nj&
tangan* Unt& membat $ebah te&$ ata gambar menjadi $ebah !in&% &ita !a&&an dengan mengapitn(a
dengan tag pemb&a 9A HRE58 dan tag pentp 9:A8* Jadi rm$n(a &ira,&ira $ebagai beri&t:
9A HRE5D/!'&a$i;tjan/8!in&9:A8*
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
C'nt'h !in& (ang menj &e $it$ !ain: hida(at!!ah 'n!ine* Ini!ah &'de $mbern(a:
9A HRE5D/http:::)))*hida(at!!ah*-'m/8hida(at!!ah 'n!ine9:A8
Berda$ar&an !'&a$i tjann(a% !in& dapat dibeda&an ata$:
Lin& (ang menj &e h'mepage "ha!aman pertama# dari $ebah $it$
Lin& (ang menj &e ha!aman (ang !ain da!am $it$ (ang $ama
Lin& (ang menj &e ha!aman (ang !ain da!am $it$ (ang !ain
Lin& (ang menj &e bagian tertent "b''&mar&# da!am ha!aman (ang $ama*
Lin& (ang menj &e bagian tertent "b''&mar&# da!am ha!aman (ang berbeda
Lin& (ang mengarah &e $ebah +i!e (ang dapat ditampi!&an da!am br')$er% mi$a!n(a +i!e image "gambar#
ata anima$i $eperti 4I5% J64% BM6 dan $ebagain(a*
Lin& (ang mengarah &e $ebah +i!e tertent (ang tida& bi$a ditampi!&an ata dija!an&an da!am br')$er
mi$a!n(a: +i!e pr'gram "ECE#% +i!e &'mpre$i "XI6#% +i!e adi' "$eperti M6J% RM#% +i!e <ide'% dan !ain,!ain*
Bi!a !in& $ema-am ini di&!i&% a&an mn-! &'ta& dia!'g (ang menan(a&an apa&ah anda a&an men(impan
"$a<e# +i!e it da!am hardi$& ata menja!an&ann(a dengan pr'gram (ang $e$ai* 6r'$e$ pengambi!an dan
pen(impanan +i!e $ema-am ini!ah (ang dinama&an d')n!'ad*
Lin& (ang mengarah &e a!amat emai!* Bi!a !in& ini di&!i& a&an memb&a jende!a pengiriman emai! dari
pr'gram emai! (ang terin$ta!! pada &'mpter $er "mi$a!n(a Mi-r'$'+t 1t!''&#* 6ada &'ta& tjan emai!
"T':# $dah ter-antm a!amat emai! tjan*
Unt& $etiap jeni$ !in& di ata$% (ang penting nt& di&etahi ada!ah -ara pen!i$an a!amat ata !'&a$i "URL#
dari $it$ ata +i!e (ang ditj '!eh !in& it* L'&a$i ini dit!i$ diantara tanda &tip $e$dah atribt hre+D*
2etentann(a $ebagai beri&t:
Lin& (ang menj &e h'mepage "ha!aman pertama# dari $it$ !ain% -&p dit!i$&an a!amat URL dari )eb$ite
ter$ebt% mi$a!n(a: hre+D/http:::)))*$it$*-'m/*
Lin& (ang menj &e ha!aman !ain da!am $it$ !ain% ma&a har$ &ita t!i$&an a!amat URL dan !'&a$i +i!en(a*
Mi$a!n(a: hre+D/http:::)))*$it$*-'m:$ini:$it*htm/*
Lin& (ang menj &e ha!aman !ain da!am $it$ (ang $ama% ma&a -&p dit!i$&an !'&a$i +i!en(a% tanpa
men!i$&an a!amat URL $it$ it* Da!am ha! ini ada beberapa &emng&inan:
a# Bi!a +i!e ter$ebt ber!'&a$i pada +'!der (ang $ama dengan +i!e dari !in& ter$ebt ma&a -&p dit!i$&an
nama +i!en(a% mi$a!n(a: hre+D/+ree)are@*htm/*
b# Bi!a +i!e (ang ditj it berada da!am +'!der (ang !ain di ba)ah +'!der (ang ditempati '!eh !in& ter$ebt%
ma&a har$ dit!i$&an nama +'!dern(a* Mi$a!n(a: hre+D/ja<a$-ript:j$>>@*htm/*
-# Sedang&an bi!a +i!e (ang ditj it berada da!am +'!der (ang !ain di ata$ +'!der (ang ditempati '!eh +i!e
dari !in& ter$ebt ma&a dit!i$&an $eperti beri&t: hre+D/**:rainb')*gi+/*
d# Bi!a +i!e ter$ebt !eta&n(a da ting&at di ata$ ma&a dit!i$&an da &a!i titi& da $eperti ini:
hre+D/**:**:rainb')*gi+/ dan $eter$n(a*
Unt& membat !in& (ang menj &e bagian tertent dari $ebah ha!aman )eb% $ebe!mn(a &ita har$
memberi nama pada tempat:!'&a$i (ang a&an ditj it dengan men-antm&an tag 9a nameD/bagian/89:a8
pada bari$ (ang a&an ditj it* Sete!ah it bar!ah &ita bi$a membat !in& (ang menj &e bagian ter$ebt*
Da!am ha! ini ada da &emng&inan*
a# Bi!a tempat (ang ditj it terdapat da!am ha!aman (ang $ama dengan !in& ter$ebt ma&a -&p dit!i$&an
nama !'&a$i (ang ditj it* Mi$a!n(a: hre+DFbagian*
b# Bi!a tempat (ang ditj it ter!eta& pada ha!aman (ang !ain ma&a har$ dit!i$&an nama +i!e dari ha!aman
it bar nama tempatn(a* Mi$a!n(a: hre+D/!ain*htmFbagian/*
Lin& (ang mengarah &e $ebah +i!e (ang b&an +i!e HTML mi$a!n(a +i!e pr'gram% adi'% image% dan !ain,
!ain -ara pen!i$ann(a $ama $aja -aran(a dengan +i!e HTML $eperti pada p'int @% = dan J di ata$*
Lin& (ang beri$i a!amat emai! dit!i$&an $eperti beri&t: hre+D/mai!t':adi+itrahZma&t''b*-'m/*
Te!ah &ita &etahi bah)a bi!a $ebah !in& di&!i& ma&a br')$er a&an menampi!&an ha!aman (ang ditj '!eh
!in& ter$ebt* Cara br')$er memn-!&an ha!aman tjan ini ada da ma-am*
Ditampi!&an pada jende!a (ang $ama* Artin(a% ha!aman tempat !in& it a&an diganti&an '!eh ha!aman (ang
ditj '!eh !in& ter$ebt* Ini merpa&an -ara pemn-!an de+a!t*
Ditampi!&an pada jende!a (ang !ain* Artin(a% a&an mn-! jende!a bar (ang menampi!&an ha!aman (ang
ditj* Unt& membat !in& $ema-am ini% &ita har$ menambah&an atribt TAR4ETD/;b!an&/ da!am tag 9A
HRE58* C'nt'h: 9a hre+D/)ebpage*htm/ targetD/;b!an&/8*
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
Se&ian pe!ajaran tentang !in&* Agar anda !ebih mengerti -ara pembatan ma-am,ma-am !in& ter$ebt%
$e!anjtn(a anda a&an ber!atih membat beberapa ha!aman )eb dengan $ejm!ah !in& di da!amn(a*
6RA2TE2 MEMBUAT HALAMAN WEB
Unt& mempermantap &eterampi!an anda da!am membat !in& $e&a!ig$ meng!ang $ema pe!ajaran (ang
te!ah !a!% &ita a&an men-'ba membat ha!aman )eb* Anggap!ah ini ada!ah pr'(e& pembatan )eb anda
(ang pertama*
B&a!ah pr'gram N'tepad anda* 2!i& men 5i!e !a! Sa<e* 6ada &'ta& dia!'g (ang mn-! ma$&!ah &e
+'!der M( D'-ment$ !a! +'!der M( Web$* Cara ma$&n(a% &!i& ganda "&!i& da &a!i dengan -epat# +'!der
(ang ber$ang&tan* Sete!ah anda berada da!am +'!der M( Web$% bat!ah +'!der bar dengan -ara meng&!i&
i&'n -reate ne) +'!der (ang berada pada i&'n &etiga* Ma&a a&an mn-! +'!der Ne) 5'!der% $i!a&an anda
ganti naman(a mi$a!n(a )eb@* Sete!ah it pada &'ta& Sa<e A$ T(pe% ganti i$in(a dengan A!! 5i!e* La! i$i
&'ta& 5i!e Name dengan nama (ang anda $&ai mi$a!n(a h'me*htm* 2!i& Sa<e*
6ada +i!e dengan nama h'me*htm ini% bat!ah ha!aman )eb dengan jd! "tit!e# Ha!aman 6ertama* 2emdian
i$i!ah ha!aman ter$ebt $edemi&ian rpa $ehingga da!am br')$er tampa& $eperti ini:
HAL* @ S HAL* = S HAL* J
Se!amat Datang di 6r'(e& 6ertama A
Jd! di ata$ merpa&an header !e<e! &eda (ang di!eta&&an di tengah* Da!am pr'(e& pertama ini $a(a a&an
ber!atih membat ha!aman )eb (ang $angat,$angat $ederhana* Ha!aman )eb ini a&an $a(a i$i dengan
beberapa +'rmat pen!i$an ha!aman )eb (ang te!ah $a(a pe!ajari* Dengan demi&ian $a(a bi$a memper!an-ar
dan mempermantap &eterampi!an $a(a membat ha!aman )eb* Amin***A
Ini Header Le<e! 2etiga
Ma$ih ingat% &an -ara membat paragra+. Sat paragra+ bi$a tida& diberi tag pentp* 3ang penting anda
ingat% bi!a a&an membat !agi paragra+ bar% t!i$ tag pemb&a paragra+* Sedang&an nt& membat bari$%
ada tag ter$endiri*
Da!am paragra+ ini anda a&an meng!angi pe!ajaran membat bari$% $eperti di ba)ah ini:
2!i& di $ini nt& me!ihat Da+tar De+ini$i*
Unt& me!ihat 2e$an dan 6e$an% &!i& di $ini*
Ini paragra+ bar* 6er! anda &etahi bah)a ha!aman )eb (ang tampa& da!am br')$er merpa&an beberapa
bari$ &a!imat% bi!a dibat da!am &'de HTML% bi$a $aja dit!i$ da!am $at bari$ $aja* 3ang penting nt&
$etiap bari$ bar har$ dia)a!i dengan tag 9BR8* Ngerti ma&$dn(a.
2emba!i 2eata$ S Se!anjtn(a
Se&arang &ita a&an membat ha!aman )eb $e!anjtn(a dengan jd! Ha!aman 2eda dengan tampi!an da!am
br')$er $ebagai beri&t:
HAL* @ S HAL* = S HAL* J
Mengta&,ati& 5'nt
Da!am ha!aman ini% &ita menggna&an )arna ba-&gr'nd &ning dengan +'nt C'mi- San$ &ran = )arna
bir $ebagai +'nt de+a!t* Ma$ih ingat% &an -ara pengatrann(a.
Da+tar De+ini$i
Internet
Sing&atan dari inter-'nne-ti'n net)'r& ata hbngan antar jaringan* Internet ia!ah jaringan &'mpter
g!'ba! dan merpa&an jaringan &'mpter (ang terbe$ar di dnia &arena mamp menghbng&an $e!rh
&'mpter (ang ada di dnia*
HTT6
Sing&atan dari H(perte0t Tran$+er 6r't'-'! ada!ah $a!ah $at pr't'&'! baha$a (ang digna&an nt&
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
ber&'mni&a$i antar $er<er &'mpter da!am internet* 6r't'&'! baha$a (ang !ain da!am internet mi$a!n(a:
Te!net% Ne)$% 4r'pher% 5T6*
URL
Sing&atan dari Uni+'rm Re$'r-e L'-at'r ada!ah $tandar pega!amatan $ebah +i!e di Internet (ang diran-ang
&h$$ nt& digna&an dengan br')$er WWW $eperti Net$-ape% Internet E0p!'rer% 1pera% dan !ain,!ain*
Bi!a anda ingin men-ari terjemahan &ata,&ata Inggri$ &e Ind'ne$ia ata Ind'ne$ia &e Inggri$% pergi!ah &e
$it$ 2am$Web*
2emba!i 2eata$ S Se!anjtn(a
Simpan!ah ha!aman di ata$ dengan nama mi$a!n(a: &ning*htm* 2emdian bat!ah $at ha!aman )eb !agi
dengan tite! Ha!aman 2etiga $eperti beri&t:
HAL* @ S HAL* = S HAL* J
Ini!ah Bi'data& ****
Nama
Tempat:tangga! !ahir
Nama 'rang ta
A(ah
Ib
6endidi&an
Se&'!ah da$ar
Se&'!ah menengah pertama
Se&'!ah menengah ata$
6ergran tinggi
6e&erjaan
A!amat
Rmah
2ant'r
H'bi
6e$an dan 2e$an
Membat )eb$ite $ebenarn(a gampang,gampang $$ah* 4ampang &arena &ita tingga! mengganti &a!imat,
&a!imat (ang di!eta&&an diantara tag,tag* 2a!a ma !ebih mdah !agi% ambi! $aja ha!aman )eb (ang $dah
jadi "pi!ih (ang pa!ing $ederhana#* B&a $'r-e -'de,n(a% &emdian edit !ah i$in(a $e$ai &einginan anda*
S$ahn(a bi!a ingin membat ha!aman )eb (ang rmit dan dinami$* Unt& it &ita per! be!ajar !ebih
ban(a& dan !ebih giat !agi ****A
2emba!i 2eata$
Simpan!ah ha!aman &etiga di ata$ dengan nama mi$a!n(a: bi'data*htm* Se&arang &ita te!ah mempn(ai tiga
bah +i!e HTML (ait h'me*htm% &ning*htm dan bi'data*htm* Tga$ &ita $e!anjtn(a ada!ah mema$&&an
!in&,!in& &e da!am $etiap ha!aman )eb ter$ebt*
Da!am $etiap ha!aman% di bagian ata$n(a terdapat !in&,!in& beri&t: HAL* @% HAL* = dan HAL* J* Ma$ing,
ma$ing !in& menj &e +i!e h'me*htm% &ning*htm dan bi'data*htm*
96 ALI4ND/RI4HT/89A HRE5D/h'me*htm/8HAL* @9:A8 S 9A HRE5D/&ning*htm/8HAL* =9:A8 S 9A
HRE5D/bi'data*htm/8HAL* J9:A8
Jga da!am $etiap ha!aman% terdapat !in& 2emba!i 2eata$ dan Se!anjtn(a* Te&$ 2emba!i 2eata$ merpa&an
!in& (ang memba)a &ita &e bagian pa!ing ata$ dari $etiap ha!aman* Unt& it $ebe!mn(a &ita har$
memberi nama pada bari$ t!i$an HAL* @ S HAL* = S HAL* J (ang merpa&an bari$ terata$ dari $etiap
ha!aman*
9HTML89HEAD89TITLE8Ha!aman 6ertama9:TITLE89:HEAD8
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
9A NAMED/ata$/89:A896 ALI4ND/RI4HT/89A HRE5D/h'me*htm/8HAL* @9:A8 S 9A
HRE5D/&ning*htm/8HAL* =9:A8 S 9A HRE5D/bi'data*htm/8HAL* J9:A8
Sete!ah it bar!ah &ita membat !in& 2emba!i 2eata$ dengan &'de $ebagai beri&t:
9A HRE5D/Fata$/82emba!i 2eata$9:A8
Sedang te&$ Se!anjtn(a dijadi&an !in& (ang menj &e +i!e $e$dahn(a* 3a&ni dari +i!e h'me*htm menj &e
&ning*htm dan dari +i!e &ning*htm menj &e bi'data*htm* C'nt'h da!am +i!e h'me*htm:
9A HRE5D/Fata$/82emba!i 2eata$9:A8 S 9A HRE5D/&ning*htm/8Se!anjtn(a9:A8
Da!am ha!aman pertama terdapat da !in& !agi di bagian tengah (ait !in& (ang menj &e Da+tar De+ini$i
(ang ada di ha!aman &eda dan !in& (ang menj &e 2e$an dan 6e$an (ang ada di ha!aman &etiga* 2arena
it &ita har$ men-antm&an nama ter!ebih dah! pada bari$ Da+tar De+ini$i di ha!aman &eda "+i!e
&ning*htm# dan pada bari$ 2e$an dan 6e$an di ha!aman &etiga "+i!e bi'data*htm# $eperti -'nt'h beri&t:
9A NAMED/de+in/89:A89HJ8Da+tar De+ini$i9:HJ8
Unt& ha!aman &etiga:
9A NAMED/&e$an/89:A89HJ82e$an dan 6e$an9:HJ8
Sete!ah it bar!ah &ita bi$a memberi !in& pada &a!imat beri&t di ha!aman pertama:
9BR89A HRE5D/Fde+in/82!i& di $ini9:A8nt& me!ihat 9B8Da+tar De+ini$i9:B8*
9BR8Unt& me!ihat9B82e$an dan 6e$an9:B8% 9A HRE5D/F&e$an/8&!i& di $ini9:A8*
Di ha!aman &eda "+i!e &ning*htm# terdapat -'nt'h !in& (ang menj &e $it$ (ang !ain* Bat!ah !in&
ter$ebt bi!a di,&!i& a&an memb&a jende!a br')$er bar nt& menampi!&ann(a* Begini jadin(a:
9A HRE5D/http:::)))*&am$*)eb*id/ TAR4ETD/;b!an&/82am$ Web9:A8
Bi!a anda te!ah $e!e$ai mema$&&an $e!rh !in&,!in& ter$ebt% b&a!ah br')$er anda% &emdian -'ba!ah
meng,&!i& $ema !in&,!in& (ang terdapat da!am &etiga ha!aman )eb it*
Sampai pe!ajaran ini% anda $ebet!n(a $dah dapat membat )eb$ite $endiri* 2ami $angat men(aran&an anda
men-'ba membat )eb$ite $ederhana dengan be&a! pengetahan (ang te!ah anda pe!ajari*
MEN3ISI62AN 4AMBAR "IMA4E#
Unt& men(i$ip&an gambar &e da!am $ebah ha!aman HTML% m!a,m!a &ita har$ men(edia&an ter!ebih
dah! +i!e gambar (ang dibth&an* 5i!e gambar ini bia$an(a bere&$ten$i 4I5% J64 ata BM6* Bi!a +i!e
gambar it te!ah ter$edia% dan &ita mengetahi nama dan !eta& "!'&a$i# +i!e gambar it% bar!ah &ita bi$a
men(i$ip&ann(a &e da!am ha!aman )eb &ita dengan menggna&an tag 9IM4 SRCD/+i!e;gambar/8*
Mi$a!n(a% &ita mempn(ai $ebah ha!aman )eb $eperti ini:Si$ip&an!ah gambar di ba)ah ini:
Mdah% b&an.
2ita ingin men(i$ip&an $ebah gambar (ang +i!e gambarn(a bernama emai!*gi+ diantara &eda &a!imat di
ata$* B&a!ah $'r-e &'de ha!aman HTML ter$ebt $ehingga tampa& $eperti ini:
968Si$ip&an!ah gambar di ba)ah ini:
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
968Mdah% b&an.
Si$ip&an $at tag paragra+ !agi diantara &eda paragra+ di ata$% &emdian t!i$&an tag pen(i$ip gambar 9IM4
SRCD/+i!e;gambar/8 $ehingga menjadi $eperti ini:
968Si$ip&an!ah gambar di ba)ah ini:
9689IM4 SRCD/emai!*gi+/8
968Mdah% b&an.
Simpan "Sa<e# $'r-e -'de ter$ebt &emdian b&a dengan br')$er ma&a tampa&!ah $eperti ini:Si$ip&an!ah
gambar di ba)ah ini:
Mdah% b&an.
Unt& -'nt'h di ata$% +i!e emai!*gi+ dan +i!e ha!aman (ang di$i$ipi gambar it har$ ter!eta& da!am +'!der
(ang $ama* Bi!a ter!eta& da!am +'!der !ain% ma&a har$ dit!i$&an !'&a$in(a* Mi$a!n(a:
9IM4 SRCD/image$:emai!*gi+/8 bi!a +i!e gambar it ter!eta& da!am +'!der bernama image$% dimana +'!der
image$ it !eta&n(a di ba)ah "di da!am# +'!der (ang ditempati '!eh ha!aman HTML (ang di$i$ipi gambar*
9IM4 SRCD/**:emai!*gi+/8 bi!a +i!e gambar it ter!eta& $at ting&at di ata$ "di !ar# +'!der (ang ditempati
'!eh ha!aman HTML (ang di$i$ipi gambar*
ATRIBUT,ATRIBUT 4AMBAR
Sete!ah &ita mengetahi -ara men(i$ip&an gambar% $e&arang &ita a&an mempe!ajari atribt apa $aja (ang bi$a
di$erta&an da!am tag 9IM4 SRC8 nt& mengha$i!&an $ejm!ah e+e& tertent* Atribt pertama (ang bi$a
&ita tambah&an &e da!am tag gambar ada!ah B1RDER* Se$ai dengan naman(a% atribt ini digna&an nt&
memberi e+e& bing&ai pada gambar* B&a!ah +i!e HTML di ata$ tadi* 2emdian $i$ip&an!ah atribt b'rder
da!am tag gambar $ehingga menjadi:
968Si$ip&an!ah gambar di ba)ah ini:
9689IM4 SRCD/emai!*gi+/ B1RDERD/J/8
968Mdah% b&an.
Anda b'!eh mengganti ang&a J dengan ang&a (ang !ebih &e-i! ata !ebih be$ar nt& mengha$i!&an &ran
b'rder (ang !ebih &e-i! ata !ebih be$ar p!a* Sa<e !a! tampi!&an da!am br')$er% ma&a ha$i!n(a $eperti
ini:Si$ip&an!ah gambar di ba)ah ini:
Mdah% b&an.
Atribt $e!anjtn(a (ang bi$a anda $i$ip&an ada!ah atribt ALT* Dengan atribt ini &ita bi$a men(iap&an te&$
pengganti gambar bi!a $at )a&t gambar , &arena $at dan !ain ha! , tida& bi$a ditampi!&an* Mi$a!n(a $er
menggna&an br')$er <er$i !ama "(ang be!m bi$a menampi!&an gambar# ata br')$er (ang dimati&an
+ng$i penampi! gambarn(a "nt& memper-epat pr'$e$ !'ading#* Dengan adan(a atribt ALT ini% tampi!an
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
gambar dapat diganti&an dengan te&$ (ang &ita ma$&&an di da!amn(a* C'nt'h:
968Si$ip&an!ah gambar di ba)ah ini:
9689IM4 SRCD/emai!*gi+/ ALTD/t'mb'! emai!/8
968Mdah% b&an.
Bi!a $at &eti&a% gambar tida& bi$a ditampi!&an ma&a a&an tampa& $eperti ini:Si$ip&an!ah gambar di ba)ah
ini:
Mdah% b&an.
Atribt image beri&tn(a (ang a&an &ita pe!ajari ada!ah atribt &ran gambar (ait WIDTH "!ebar# dan
HEI4HT "tinggi#* Tanpa menggna&an atribt ini% br')$er a&an menampi!&an gambar $e$ai dengan &ran
a$!i dari +i!e gambar (ang ber$ang&tan* 2ita bi$a mengatr &ran tampi!an gambar da!am br')$er !ebih
&e-i! atapn !ebih be$ar dari &ran a$!in(a dengan menggna&an atribt WIDTH dan HEI4HT ter$ebt*
2ita ma$ih mengambi! -'nt'h gambar emai!*gi+ di ata$* U&ran gambar (ang $ebenarn(a dari +i!e 4I5 ini
ada!ah @J=0J? pi0e! "&ran $at gambar bi$a &ita &etahi dengan menggna&an pr'gram penampi!
gambar $eperti ACDSee% Ir+anBie)% d$b*#* 2ita a&an men-'ba menampi!&an gambar it !ebih &e-i! mi$a!n(a
menjadi [[0=E pi0e! dan !ebih be$ar mi$a!n(a menjadi @GE0K? pi0e!* Unt& it% edit!ah &'de HTML,n(a
$ebagai beri&t:
968Si$ip&an!ah gambar di ba)ah ini:
9689IM4 SRCD/emai!*gi+/8 9IM4 SRCD/emai!*gi+/ WIDTHD[[ HEI4HTD=E8 9IM4 SRCD/emai!*gi+/
WIDTHD@GE HEI4HTDK?8
968Mdah% b&an.
Ingin tah ha$i!n(a $ete!ah ditampi!&an da!am br')$er.
Si$ip&an!ah gambar di ba)ah ini:

Mdah% b&an.
Se!ain menggna&an $atan pi0e!% &ita pn bi$a mengatr &ran tampi!an gambar da!am br')$er dengan
$atan per$en* Ummn(a% $atan per$en ini digna&an nt& mengatr !ebar "WIDTH# gambar% b&an tinggi
gambar* Sebab mengatr tinggi gambar dengan $atan per$en a&an mengha$i!&an tampi!an (ang tida&
&'n$i$ten &arena a&an bergantng pada !ebar jende!a br')$er $erta $etting re$'!$i m'nit'r* 1!eh &arena it
ji&a anda mengatr !ebar gambar dengan $atan per$en% atribt HEI4HT tida& per! diatr !agi &arena
&ran pi0e!n(a $e-ara 't'mati$ di$&a!a dengan &ran (ang benar* Mi$a!n(a:
9IM4 SRCD/+i!e;gambar/ WIDTHDE>\8*
U&ran gambar (ang ditampi!&an '!eh br')$er a&an mengi&ti &ran jende!a br')$er re!ati+ terhadap
$etting re$'!$i m'nit'r* Ji&a m'nit'r di$et pada re$'!$i H>>0G>> pi0e! dan jende!a br')$er dibat
ma&$imm% ma&a gambar a&an ditampi!&an dengan pada &ran $e&itar K>>0J>> pi0e!% (a&ni E>\ dari
&ran jende!a br')$er% b&an E>\ dari &ran gambar* 6enggnaan $atan per$en nt& pengatran &ran
tampi!an gambar ini% $ering digna&an nt& gambar,gambar be$ar dan tampi!ann(a ingin &ita $e$ai&an
dengan &ran jende!a br')$er dan re$'!$i m'nit'r*
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
Apa&ah atribt WIDTH dan HEI4HT ini $emata,mata digna&an nt& pengbahan &ran tampi!an
gambar. Tern(ata tida&* Atribt ini jga ber+ng$i nt& memper-epat tampi!n(a ha!aman )eb "!'ading#*
2arena dengan adan(a &eda atribt ini% $e-ara te&ni$ memerintah&an br')$er nt& men(edia&an tempat
$e&ran it $ebe!m gambarn(a $endiri $e!e$ai di,!'ad* Jadi bi!a &ita ingin menampi!&an $ebah gambar
$ama dengan &ran a$!in(a% a!ang&ah bai&n(a bi!a atribt WIDTH dan HEI4HT ini tetap dit!i$&an dengan
ang&a (ang $ama dengan !ebar dan tinggi (ang $ebenarn(a dari gambar ter$ebt*
MEN44UNA2AN 4AMBAR SEBA4AI BAC24R1UND
6ada pe!ajaran,pe!ajaran (ang terdah!% &ita $dah mempe!ajari -ara menggna&an )arna $ebagai !atar
be!a&ang ha!aman )eb* Se&arang &ita a&an mempe!ajari -ara menggna&an gambar $ebagai !atar be!a&ang*
Unt& )arna% &ita menggna&an atribt B4C1L1RD/)arna/% $edang&an nt& gambar% &ita menggna&an
atribt BAC24R1UNDD/+i!e;gambar/* 2eda atribt ini di$i$ip&an da!am tag B1D3* Sangat mdah%
b&an. Mi$a!n(a &ita ingin meman+aat&an gambar emai!*gi+ tadi $ebagai !atarbe!a&ang ha!aman )eb ma&a
-&p dengan men(i$ip&an atribt ter$ebt &e da!am tag B1D3 $eperti di ba)ah ini:
9HTML89HEAD89TITLE8Latarbe!a&ang 4ambar9:TITLE8
9B1D3 BAC24R1UNDD/emai!*gi+/8
9H@8951NT C1L1RD/(e!!')/8Maa+% ini han(a -'nt'h% jadi t!i$ann(a tida& $era$i dengan
!atarbe!a&angn(a9:51NT89:H@8
9:B1D389:HTML8
Bi!a dib&a da!am br')$er a&an tampa& $eperti ini:Maa+% ini han(a -'nt'h% jadi t!i$ann(a tida& $era$i
dengan !atarbe!a&angn(a

Bagaimana -ara mendapat&an +i!e,+i!e image nt& dijadi&an ba-&gr'nd. Mdah $aja* Mi$a!n(a anda
tertari& dengan ba-&gr'nd ha!aman )eb ini (ang ber!atarbe!a&ang gari$ &'ta&,&'ta& ab,ab* 2!i& &anan
pada $ebarang tempat (ang tampa& ba-&gr'nd &'ta&,&'ta& it ma&a a&an mn-! p'p,p men* Sa!ah $at
men di da!amn(a pa$ti bert!i$&an Sa<e Ba-&gr'nd A$**** 6i!ih "&!i&# men ini ma&a mn-!!ah &'ta&
dia!'g Sa<e 6i-tre* Di $it anda bi$a memi!ih tempat "+'!der# dimana +i!e image it ingin anda $impan
"mi$a!n(a di +'!der tempat ha!aman,ha!aman )eb anda#* Anda pn bi$a mengbah nama dari +i!e image it*
Sete!ah it &!i& t'mb'! Sa<e*
MEN44UNA2AN 4AMBAR SEBA4AI LIN2
Ma$ih ada $at !agi +ng$i gambar* 4ambar jga dapat digna&an $ebagai !in&* 6ada prin$ipn(a nt&
membat !in& gambar $ama $aja dengan membat !in& te&$* 2ita tingga! mengganti te&$ (ang bertinda&
$ebagai !in& it dengan tag pen(i$ipan gambar "IM4 SRC#* Mi$a!n(a &ita pn(a !in& $eperti ini: emai! &ami*
2'de HTML dari !in& ini ada!ah:
9A HRE5D/mai!t':adi+itrahZma&t''b*-'m/8emai! &ami9:A8
Unt& membat !in& gambar% &ita tingga! mengganti t!i$an emai! &ami dengan tag pen(i$ip gambar (ait
9IM4 SRCD/emai!*gi+/8* Sehingga !eng&apn(a tert!i$:
9A HRE5D/mai!t':adi+itrahZma&t''b*-'m/89IM4 SRCD/emai!*gi+/89:A8
Ini!ah gambar (ang $dah dijadi&an !in&:

Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
C'ba!ah &!i& gambar ter$ebt nt& mengete$n(aA
MEMBUAT TABEL
Setiap tabe! minima! ter$$n dari tiga tag da$ar (ait tag 9TABLE8 (ang menandai $ebah tabe!% tag 9TR8
(ang membent& bari$ dan tag 9TD8 (ang membent& &'!'m* Ma$ing,ma$ing tag ter$ebt har$ memi!i&i
tag pentp* 9TABLE8
9TR8
9TD8&'!'m @ dari bari$ @9:TD8
9:TR8
9:TABLE8
S$nan tag,tag di ata$ memerintah&an &epada br')$er nt& menampi!&an $ebah tabe! (ang terdiri dari
$at bari$ dan $at &'!'m (ang dii$i dengan t!i$an: &'!'m @ dari bari$ @* &'!'m @ dari bari$ @
Mana tabe!n(a. Se$ngghn(a% tabe!n(a ada% han(a $aja tanpa bing&ai "b'rder#* Tern(ata% $e-ara de+a!t%
tabe! menggna&an ni!ai b'rder D > "n'!# a!ia$ tanpa bing&ai* Jadin(a (ang tampa& han(a t!i$an $emata*
Unt& membat bing&ai dari tabe! ter$ebt% &ita har$ men(erta&an atribt B1RDER* 9TABLE
B1RDERD@8
9TR8
9TD8&'!'m @ dari bari$ @9:TD8
9:TR8
9:TABLE8
Sehingga tabe!n(a tampa& $ebagai beri&t:&'!'m @ dari bari$ @
Si!a&an -'ba $endiri mengganti &ran bing&ai menjadi =% J dan $eter$n(a !a! banding&an ha$i!n(a*
Se&arang mari &ita membagi tabe! $ebari$ ter$ebt menjadi da &'!'m* Artin(a &ita menambah $epa$ang tag
TD !agi*9TABLE B1RDERD@8
9TR8
9TD8&'!'m @ dari bari$ @9:TD8
9TD8&'!'m = dari bari$ @9:TD8
9:TR8
9:TABLE8
Begini!ah ha$i!n(a da!am br')$er:
&'!'m @ dari bari$ @ &'!'m = dari bari$ @
Nah% bi!a anda ingin menambah $e&ian bari$ &e ba)ah% -&p men(a!in !ang dari tag 9TR8 $ampai 9:TR8*
S'r't "b!'&# dari tag 9TR8 hingga 9:TR8 !a! C'p( "Ctr!OC#* Tempat&an &r$'r di ba)ah tag 9:TR8 !a!
6a$te "Ctr!OB#* Se&ian bari$ (ang ingin anda bat% $e&ian &a!i p!a anda har$ men(a!inn(a "me!a&&an
perintah 6a$te#* Sete!ah it tingga! meng,edit t!i$an $e$ai &einginan anda* Begini -'nt'hn(a: 9TABLE
B1RDERD@8
9TR8
9TD8&'!'m @ dari bari$ @9:TD8
9TD8&'!'m = dari bari$ @9:TD8
9:TR8
9TR8
9TD8&'!'m @ dari bari$ =9:TD8
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
9TD8&'!'m = dari bari$ =9:TD8
9:TR8
9:TABLE8
Tampi!ann(a da!am br')$er menjadi:&'!'m @ dari bari$ @ &'!'m = dari bari$ @
&'!'m @ dari bari$ = &'!'m = dari bari$ =
Sete!ah atribt B1RDER% atribt $e!anjtn(a (ang per! &ita &etahi ada!ah atribt CELLS6ACIN4 (ang
mengatr jara& antar $e! dan CELL6ADDIN4 (ang mengatr jara& antara $e! dan t!i$an di da!amn(a*
Mi$a!n(a:9TABLE B1RDERD@ CELLS6ACIN4D@>8
9TR8
9TD8&'!'m @ dari bari$ @9:TD8
9TD8&'!'m = dari bari$ @9:TD8
9:TR8
9TR8
9TD8&'!'m @ dari bari$ =9:TD8
9TD8&'!'m = dari bari$ =9:TD8
9:TR8
9:TABLE8
Dengan penambahan atribt CELLS6ACIN4D@> da!am tag TABLE berarti a&an diha$i!&an $ebah tabe!
dengan jara& antar $e! ada!ah @> pi0e!* Begini!ah tampi!ann(a da!am br')$er:&'!'m @ dari bari$ @
&'!'m = dari bari$ @
&'!'m @ dari bari$ = &'!'m = dari bari$ =
Se&arang mari &ita -'ba banding&an bi!a atribt CELLS6ACIN4 ter$ebt diganti dengan
CELL6ADDIN4*9TABLE B1RDERD@ CELL6ADDIN4D@>8
9TR8
9TD8&'!'m @ dari bari$ @9:TD8
9TD8&'!'m = dari bari$ @9:TD8
9:TR8
9TR8
9TD8&'!'m @ dari bari$ =9:TD8
9TD8&'!'m = dari bari$ =9:TD8
9:TR8
9:TABLE8
Begini!ah ha$i!n(a da!am br')$er:&'!'m @ dari bari$ @ &'!'m = dari bari$ @
&'!'m @ dari bari$ = &'!'m = dari bari$ =
Sedang&an &a!a &eda tag ter$ebt dipa&ai ber$ama,$ama $eperti ini:9TABLE B1RDERD@
CELLS6ACIN4D@> CELL6ADDIN4D@>8
9TR8
9TD8&'!'m @ dari bari$ @9:TD8
9TD8&'!'m = dari bari$ @9:TD8
9:TR8
9TR8
9TD8&'!'m @ dari bari$ =9:TD8
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
9TD8&'!'m = dari bari$ =9:TD8
9:TR8
9:TABLE8
A&an mengha$i!&an tabe! $eperti ini:&'!'m @ dari bari$ @ &'!'m = dari bari$ @
&'!'m @ dari bari$ = &'!'m = dari bari$ =
Tern(ata mdah% &an membat tabe!. Bi!a &ita !ihat tabe!,tabe! pada -'nt'h di ata$% tampa& bah)a $e-ara
de+a!t% !ebar &'!'m dan tinggi bari$ mengi&ti !ebar dan tinggi t!i$an di da!amn(a* 2ita bi$a mengatr
$endiri !ebar dan tinggi tabe!% &'!'m dan bari$n(a dengan menggna&an atribt WIDTH "!ebar# dan
HEI4HT "tinggi#* Mi$a!n(a:9TABLE B1RDERD@ WIDTHD@>>\8
9TR8
9TD8&'!'m @ dari bari$ @9:TD8
9TD8&'!'m = dari bari$ @9:TD8
9:TR8
9TR8
9TD8&'!'m @ dari bari$ =9:TD8
9TD8&'!'m = dari bari$ =9:TD8
9:TR8
9:TABLE8
Bagaimana jadin(a tabe! dengan !ebar @>>\ .&'!'m @ dari bari$ @ &'!'m = dari bari$ @
&'!'m @ dari bari$ = &'!'m = dari bari$ =
2e$imp!ann(a% !ebar tabe! @>>\ artin(a tabe! ter$ebt a&an me!ebar hingga memenhi !ebar tampi!an
ha!aman* Bi!a !ebar $etiap &'!'m tida& ditent&an% ma&a !ebar @>>\ it a&an terbagi $ejm!ah &'!'mn(a*
Seperti da!am -'nt'h di ata$% &arena terdiri dari da &'!'m ma&a !ebar ma$ing,ma$ing &'!'m ada!ah E>\*
Nah% bagaimana bi!a &ita ingin membagi !ebar &'!'m tida& $ama. 3a% -aran(a $ama $aja% (ait dengan
mema$&&an atribt WIDTH da!am tag &'!'m* 9TABLE B1RDERD@ WIDTHD@>>\8
9TR8
9TD WIDTHD=E\8&'!'m @ dari bari$ @9:TD8
9TD WIDTHD?E\8&'!'m = dari bari$ @9:TD8
9:TR8
9TR8
9TD WIDTHD=E\8&'!'m @ dari bari$ =9:TD8
9TD WIDTHD?E\8&'!'m = dari bari$ =9:TD8
9:TR8
9:TABLE8
Bagaimana jadin(a.&'!'m @ dari bari$ @ &'!'m = dari bari$ @
&'!'m @ dari bari$ = &'!'m = dari bari$ =
Bagaimana ha!n(a dengan atribt HEI4HT "tinggi#. Atribt ini jga bi$a di$i$ip&an da!am tag TABLE dan
tag TR "bari$#* Se!ain menggna&an per$en nt& menent&an &ran tabe!% &ita bi$a p!a menggna&an
$atan pi0e!* Bi!a ang&a $e$dah WIDTH dan HEI4HT tida& menggna&an per$en "\#% berarti $atann(a
ada!ah pi0e!* C'nt'h:9TABLE B1RDERD?8
9TR HEI4HTDK>8
9TD WIDTHD@E>8&'!'m @ dari bari$ @9:TD8
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
9TD WIDTHD=E>8&'!'m = dari bari$ @9:TD8
9:TR8
9TR HEI4HTDH>8
9TD WIDTHD@E>8&'!'m @ dari bari$ =9:TD8
9TD WIDTHD=E>8&'!'m = dari bari$ =9:TD8
9:TR8
9:TABLE8
U&ran b'rder tabe! &ita bah menjadi ?* Tinggi bari$ pertama ada!ah K> pi0e! $edang bari$ &eda H> pi0e!*
Adapn !ebar &'!'m pertama ada!ah @E> pi0e! $edang &'!'m &eda =E> pi0e!* 6erhati&an!ah bagaimana
atribt,atribt di ata$% mengha$i!&an tampi!an tabe! da!am br')$er menjadi: &'!'m @ dari bari$ @&'!'m = dari
bari$ @
&'!'m @ dari bari$ = &'!'m = dari bari$ =
Se&arang &ita a&an berbi-ara !agi ma$a!ah perataan "a!ignment# t!i$an* Lihat -'nt'h tabe! di ata$A Tampa&
bah)a $e-ara de+a!t% tabe! menempat&an t!i$an rata &iri "$e-ara h'ri$'nta!# dan di tengah "$e-ara <erti&a!#*
Namn demi&ian% &ita bi$a mengatr $endiri perataan ini dengan menggna&an atribt ALI4N nt&
perataan h'ri$'nta! dan BALI4N nt& perataan <erti&a!* 6erhati&an penggnaann(a:9TABLE
B1RDERD?8
9TR HEI4HTDK>8
9TD WIDTHD@E> ALI4ND!e+t BALI4NDt'p8&iri ata$9:TD8
9TD WIDTHD=E> ALI4NDright BALI4NDmidd!e8&anan tengah9:TD8
9:TR8
9TR HEI4HTDH>8
9TD WIDTHD@E> ALI4NDright BALI4NDb'tt'm8&anan ba)ah9:TD8
9TD WIDTHD=E> ALI4ND-enter BALI4NDmidd!e8tengah tengah9:TD8
9:TR8
9:TABLE8
Begini!ah ha$i!n(a bi!a ditampi!&an da!am br')$er: &iri ata$ &anan tengah
&anan ba)ah tengah tengah
6embi-araan tentang tabe! ini% be!m $e!e$ai* A&an &ita !anjt&an pada ha!aman beri&tn(a*
MEMBUAT 5RAME
Dengan menggna&an +rame% &ita bi$a menampi!&an beberapa ha!aman HTML $e&a!ig$ da!am $ebah
jende!a br')$er* Apa artin(a. Artin(a dengan memb&a $ebah ha!aman HTML $aja "(ang mengandng
+rame#% br')$er a&an menampi!&an beberapa ha!aman $e&a!ig$ (ang ma$ing,ma$ing termat da!am $ebah
+rame* Apa gnan(a. Di$amping nt& memper-anti& tampi!an% +ng$i tama +rame ada!ah nt&
memdah&an na<iga$i ata pene!$ran i$i )eb$ite* 2'&% bi$a. Daripada membaha$ panjang !ebar% !ebih bai&
&ita !ang$ng $aja be!ajar membat +rame* 6erhati&an -'nt'h !a('t ha!aman ber,+rame beri&t ini:+rame I
beri$i +i!e jd!*htm
+rame II beri$i +i!e men*htm +rame III beri$i +i!e i$i*htm
Anggap!ah gambar di ata$ ada!ah tampi!an dari $ebah ha!aman HTML (ang terdiri dari tiga +rame* Ha!aman
(ang ber,+rame ini &ita nama&an gabng*htm* 5i!e gabng*htm ini menampi!&an tiga ha!aman HTML
$e&a!ig$ (ait +i!e jd!*htm% men*htm dan i$i*htm* Jadi nt& membat tampi!an $eperti di ata$ &ita har$
membat empat bah +i!e HTML% J +i!e ber+ng$i $ebagai ha!aman (ang ditampi!&an $edang $at +i!e
ber+ng$i $ebagai ha!aman (ang menampi!&an* Ha!aman ini!ah (ang merpa&an ha!aman tama ata
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
ha!aman (ang mengandng +rame*
Unt& membat ha!aman tama ata ha!aman (ang ber,+rame% &ita han(a membth&an da bah tag (ait
95RAMESET8 nt& mengatr pembatan +rame% dan 95RAME8 nt& menent&an +i!e target bagi $etiap
+rame* Bai&!ah &ita m!ai membat +i!e gabng*htm ini: 9HTML8
9HEAD8
9TITLE8Ha!aman tama9:TITLE8
9:HEAD8
95RAMESET8
9:5RAMESET8
9:HTML8
Di ata$ anda bi$a me!ihat bah)a empat tag (ang pertama han(a!ah tag pemb&aan HTML (ang $dah bia$a*
Sedang&an tag nt& membat +rame ada!ah tag 95RAMESET8 dengan tag pentpn(a* 6erhati&an!ah
bah)a ha!aman (ang ber+rame tida& membth&an tag B1D3 &arena (ang menjadi i$i dari ha!aman tama
ini ada!ah i$i dari ha!aman,ha!aman !ain (ang menjadi target dari $etiap +rame*
6erhati&an &emba!i !a('t ha!aman ber+rame (ang digambar&an di ata$ tadi* Ha!aman ter$ebt terdiri dari
ata$ da bari$ dimana bari$ pertama "ata$# !ebih &e-i! "anggap!ah =>\# daripada bari$ &eda "H>\#* Dan
bari$ &eda terbagi ata$ da &'!'m dimana &'!'m pertama "&iri# !ebih &e-i! "anggap!ah J>\# daripada &'!'m
&eda "?>\#* Bagaimana -ara mengatrn(a.
6ertama% &ita membagi ha!aman menjadi da bari$% bari$ pertama tinggin(a =>\ dan bari$ &eda tinggin(a
H>\* Agar !ebih ber$ih dan je!a$% tag 9HTML8% 9HEAD8 dan 9TITLE8 tida& di-antm&an !agi* Ingat% anda
har$ tetap men!i$&ann(a di d'&men anda* 95RAMESET R1WSD/=>\%H>\/8
9:5RAMESET8
Atribt R1WS da!am tag 5RAMESET di ata$ memerintah&an br')$er nt& membagi ha!aman menjadi da
bari$% bari$ pertama tinggin(a =>\ dan bari$ &eda tinggin(a H>\* Se&arang &ita a&an mengi$i bari$ pertama
dengan +rame &'$'ng ter!ebih dah! menggna&an tag 95RAME8*95RAMESET R1WSD/=>\%H>\/8
95RAME8
9:5RAMESET8
Se&arang &ita a&an mengi$i bari$ &eda* Sebe!mn(a &ita har$ membagi bari$ &eda ini da!am da &'!'m*
Unt& it% &ita har$ menambah&an !agi $epa$ang tag 95RAMESET8 (ang di da!amn(a di$i$ip&an atribt
pembagi &'!'m (ait C1LS* 95RAMESET R1WSD/=>\%H>\/8
95RAME8
95RAMESET C1LSD/J>\%?>\/8
9:5RAMESET8
9:5RAMESET8
Sete!ah terbagi da!am da &'!'m &ita har$ mengi$i $etiap &'!'m ter$ebt dengan +rame* Jadin(a $eperti
ini:95RAMESET R1WSD/=>\%H>\/8
95RAME8
95RAMESET C1LSD/J>\%?>\/8
95RAME8
95RAME8
9:5RAMESET8
9:5RAMESET8
2ini $e!e$ai!ah $dah pembatan +i!e gabng*htm (ang merpa&an ha!aman )eb (ang terdiri dari tiga bah
+rame* Tga$ &ita tingga! mengi$i +rame,+rame (ang ma$ih &'$'ng it dengan +i!e,+i!e (ang a&an &ita
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
tampi!&an di da!amn(a* Unt& mende+ini$i&an nama +i!e target pada $etiap +rame% &ita tingga! menambah&an
atribt SRC da!am $etiap tag 95RAME8* C'nt'h:95RAMESET R1WSD/=>\%H>\/8
95RAME SRCD/jd!*htm/8
95RAMESET C1LSD/J>\%?>\/8
95RAME SRCD/men*htm/8
95RAME SRCD/i$i*htm/8
9:5RAMESET8
9:5RAMESET8
Tent $aja $ebe!mn(a anda har$ $dah membat &etiga +i!e ter$ebt dan menempat&an &eempat +i!e ini
da!am +'!der (ang $ama* Bi!a +'!dern(a tida& $ama% gna&an!ah -ara pen!i$an a!amat +i!e $eperti -ara
pen!i$an a!amat +i!e nt& !in& "!ihat &emba!i pe!ajaran tentang !in& (ang !a!#*
Mi$a!n(a &ita mempn(ai +i!e jd!*htm $eperti ini% +i!e men*htm $eperti ini dan +i!e i$i*htm $eperti ini*
Ma&a bi!a anda memb&a +i!e gabng*htm% a&an tampa&!ah $ebah ha!aman )eb (ang terdiri dari tiga +rame
$eperti ini* "&!i& ma$ing,ma$ing &ata /$eperti ini/ nt& me!ihat tampi!ann(a#*
Seperti ha!n(a da!am penentan &ran tabe!% $e!ain menggna&an $atan per$en% &ita jga bi$a
menggna&an $atan pi0e!* Mi$a!n(a atribt C1LSD/=>>%K>>/ memerintah&an br')$er nt& membagi
ha!aman menjadi da &'!'m dimana &'!'m pertama !ebarn(a =>> pi0e! $edang &'!'m &eda !ebarn(a K>>
pi0e!* Bah&an anda pn dapat membagi +rame $eperti ini C1LSD/=>>%7/* Apa artin(a. Artin(a anda
membagi ha!aman menjadi da &'!'m dimana &'!'m pertama !ebarn(a =>> pi0e! $edang &'!'m &eda
!ebarn(a ada!ah $i$a dari &ran !a(ar m'nit'r* Ha! ini bergna &arena $etting !a(ar m'nit'r (ang dipa&ai
'!eh $er bi$a berbeda,bedaN pada mmn(a ada!ah "!ebar 0 tinggi da!am $atan pi0e!# GK>0KH>% H>>0G>>
ata @>=K0?GH*
Atribt !ainn(a (ang bi$a di$i$ip&an da!am tag 95RAMESET8 antara !ain: B1RDER nt& mengatr
&ran b'rder (ang memi$ah&an antara da +rame dan B1RDERC1L1R nt& menent&an )arna b'rder*
C'nt'h: 95RAMESET R1WSD/=>\%H>\/ B1RDERC1L1RD/F55@K[J/8
95RAME SRCD/jd!*htm/8
95RAMESET C1LSD/J>\%?>\/ B1RDERD/@>/8
95RAME SRCD/men*htm/8
95RAME SRCD/i$i*htm/8
9:5RAMESET8
9:5RAMESET8
Bi!a di!ihat da!am br')$er% tampa& $eperti ini* U&ran B1RDERD/=/ ada!ah de+a!t $edang &ran
B1RDERD/>/ berarti +rame tanpa b'rder*
Sedang&an nt& tag 95RAME8 bia$an(a di!eng&api dengan atribt,atribt beri&t:
B1RDERC1L1R% +ng$in(a $ama dengan B1RDERC1L1R pada tag 5RAMESET* Da!am ha! ini% )arna
(ang dide+ini$i&an '!eh tag (ang !ebih da!am menang ata$ )arna (ang dide+ini$i&an '!eh tag (ang !ar*
MAR4INHEI4HT nt& menent&an jara& antara bata$ ata$ ata bata$ ba)ah +rame dengan i$i +rame*
MAR4INWIDTH nt& menent&an jara& antara bata$ &iri ata bata$ &anan +rame dengan i$i +rame*
N1RESIXE% dengan adan(a atribt ini ma&a b'rder dari +rame (ang ber$ang&tan tida& bi$a dige$er* Dengan
&ata !ain% &ran +rame ter$ebt tida& bi$a dibah "diper&e-i! ata diperbe$ar#*
SCR1LLIN4% mengatr +a$i!ita$ $-r'!! "pengg!ng !a(ar# dari +rame* Ni!ain(a bi$a 3ES% N1 ata AUT1*
Ni!ai 3ES berarti pengg!ng $e!a! ada% N1 berarti pengg!ng $e!a! tida& ada% $edang AUT1 berarti
pengg!ng ada bi!a diper!&an "i$i +rame me!ebihi &ran !a(ar# dan tida& ada bi!a tida& diper!&an "i$i
+rame dimat '!eh !a(ar#* Ni!ai AUT1 merpa&an ni!ai de+a!t* Artin(a% bi!a atribt SCR1LLIN4 tida&
dit!i$&an% ma&a pengg!ng !a(ar 't'mati$ a&an mn-! bi!a diper!&an*
NAME% nt& memberi nama terhadap +rame (ang ber$ang&tan* 2egnaann(a a&an dije!a$&an &emdian*
Beri&t $e&e!mit -'nt'h penggnaan atribt,atribt di ata$:95RAMESET R1WSD/=>\%H>\/
B1RDERC1L1RD/F55@K[J/8
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
95RAME SRCD/jd!*htm/ N1RESIXE8
95RAMESET C1LSD/J>\%?>\/ B1RDERD/@>/8
95RAME SRCD/men*htm/ B1RDERC1L1RD/F[CGG@5/8
95RAME SRCD/i$i*htm/SCR1LLIN4D/3ES/8
9:5RAMESET8
9:5RAMESET8
2!i& di $ini nt& me!ihat tampi!ann(a da!am br')$er*
Adapn atribt NAME diper!&an da!am &aitann(a dengan +ng$i na<iga$i dari ha!aman ber,+rame*
Mi$a!n(a &ita ingin mengatr agar $at !in& bi!a di,&!i& a&an memn-!&an ha!aman targetn(a da!am +rame
tertent* Ma&a ter!ebih dah! &ita har$ memberi nama terhadap +rame ter$ebt* C'nt'h:95RAMESET
R1WSD/=>\%H>\/ B1RDERC1L1RD/F55@K[J/8
95RAME SRCD/jd!*htm/ N1RESIXE8
95RAMESET C1LSD/J>\%?>\/ B1RDERD/@>/8
95RAME SRCD/men*htm/ B1RDERC1L1RD/F[CGG@5/8
95RAME SRCD/i$i*htm/SCR1LLIN4D/3ES/ NAMED/tama/8
9:5RAMESET8
9:5RAMESET8
Da!am -'nt'h di ata$% +rame &etiga "+rame pada &'!'m &eda dari bari$ &eda ha!aman# &ita berinama
/tama/* Dengan adan(a nama ter$ebt% &ita bi$a mengatr agar !in& (ang terdapat pada ha!aman di +rame
!ainn(a bi!a di,&!i& a&an memn-!&an ha!aman targetn(a pada +rame /tama/ ter$ebt* Bingng. Mi$a!n(a%
pada ha!aman men*htm terdapat !in& dengan &'de HTML $eperti beri&t:
9A HRE5D/bab=*htm/8BAB II9:A8
Bi!a &ata BAB II di,&!i& ma&a a&an memb&a +i!e bab=*htm* Tapi ha!aman bab=*htm ter$ebt a&an mengi$i
$e!rh jende!a br')$er* Artin(a ha!aman (ang ber+rame a&an hi!ang* Agar +i!e bab=*htm it mn-! pada
+rame /tama/ $aja% &ita har$ memberi atribt TAR4ET $eperti ini:
9A HRE5D/bab=*htm/ TAR4ETD/tama/8BAB II9:A8
Ma$ih ingat% &an tentang atribt TAR4ET pada pe!ajaran tentang LIN2. Seandain(a $ema !in& (ang
terdapat da!am +i!e men*htm a&an &ita arah&an pada +rame /tama/ ma&a &ita bi$a men(i$ip&an tag 9BASE
TAR4ETD/tama/8 diantara tag 9HEAD8 dan 9:HEAD8* Dengan demi&ian% &ita tida& per! !agi
men!i$&an da!am $etiap !in& atribt TAR4ET ter$ebt $at,per$at* 2arena dengan adan(a tag BASE
TAR4ET it% $e-ara 't'mati$% $ema !in& (ang ada da!am ha!aman ter$ebt a&an diarah&an &e +rame (ang
di-antm&an da!am BASET TAR4ET* 2e-a!i !in& (ang mempn(ai TAR4ET ter$endiri*
Beri&t beberapa -ara pengarahan !in& dengan atribt TAR4ET:
;b!an& : ha!aman (ang dipanggi! a&an mn-! pada jende!a bar "ini $dah &ita pe!ajari#
;t'p : ha!aman (ang dipanggi! a&an mengi$i penh jende!a (ang $ama% me$&ipn tadin(a ada +rame*
;$e!+ : ha!aman (ang dipanggi! a&an mengi$i tempat (ang $ama% bi!a !in& ter$ebt da!am $ebah +rame ma&a
ha!aman (ang dipanggi! a&an mengi$i +rame ter$ebt*
;parent : ha!aman (ang dipanggi! a&an a&an mengi$i 5RAMESET% $at ting&at !ebih tinggi dari 5RAME
tempat !in& (ang ber$ang&tan*
MEMASAN4 WEBSITE DI INTERNET
Bi!a anda te!ah membat ha!aman,ha!aman )eb (ang ter$impan $ebagai +i!e,+i!e HTML da!am hardi$&
&'mpter anda% berarti anda te!ah mempn(ai )eb$ite $endiri $e-ara '++!ine* Web$ite ini han(a bi$a di!ihat
'!eh 'rang (ang menga&$e$ &'mpter anda* Bagaimana -aran(a agar )eb$ite it bi$a dia&$e$ '!eh /$ema
'rang/ di $e!rh dnia $e-ara 'n!ine. Ini!ah (ang a&an &ita pe!ajari di $ini* Membat ha!aman HTML
ada!ah pr'(e& tahap pertama% $edang mema$ang ha!aman )eb di internet ada!ah pr'(e& tahap &eda dan
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
$enantia$a memperbahari i$i )eb$ite &ita ada!ah pr'(e& tahap &etiga* 2etiga tahapan ini har$ di!a!i dan
di&erja&an '!eh $etiap )ebma$ter (ang ingin mengha$i!&an )eb$ite (ang ber&a!ita$*
Agar )eb$ite anda dapat dia&$e$ !e)at internet% anda har$ men(impann(a da!am )eb $er<er (ait &'mpter
(ang terhbng &e internet $e-ara ter$,mener$ $e!ama =K jam $ehari% ? hari $epe&an* Unt& dapat
men(impan +i!e,+i!e anda &e da!am )eb $er<er% anda har$ menda+tar "memi!i&i a--'nt# ter!ebih dah!
&epada pen(edia !a(anan )eb h'$ting "ja$a pen(impanan )eb#* Bagi para pem!a% ja$a )eb $er<er grati$
"+ree )eb h'$ting# ada!ah pi!ihan (ang pa!ing tepat nt& men(impan )eb$ite di internet* Di internet% anda
bi$a menem&an ban(a& )eb $er<er grati$ (ang men(edia&an $pa-e "rang da!am hardi$& mere&a# nt&
a--'nt anda*
MENDA5TAR DI WEB H1STIN4 4RATIS
Da!am &e$empatan ini% &ita mengambi! -'nt'h $a!ah $at )eb h'$ting grati$ (ang &ami gna&an nt&
men(impan ha!aman )eb (ang $edang anda ba-a ini% (ait 5ree)eb$* Sepanjang (ang &ami temi% 5ree)eb$
men(edia&an !a(anan )eb h'$ting (ang -&p bai& dan ber$ahabat* Di$amping grati$ dan beba$ i&!an "da
ha! ini (ang terpenting#% 5ree)eb$ jga men(edia&an beberapa +a$i!ita$ !ain $eperti hit -'nter "penghitng
pengnjng# dan ge$t b''& "b& tam# (ang !ma(an bai& bat )ebma$ter pem!a* 5ree)eb$
men(edia&an $pa-e "rang# grati$ nt& )eb$ite anda hingga K> megab(te% $dah /ter!a! ban(a&/ nt&
)eb$ite grati$ apa!agi bagi )ebma$ter pem!a*
6ertama,tama &ita a&an be!ajar bagaimana -ara menda+tar ata membat a--'nt bar di 5ree)eb$* Dengan
mengi&ti petnj& di ba)ah ini% diharap &ita $dah bi$a menerap&ann(a nt& menda+tar &e )eb h'$ting
grati$ (ang !ain bi!a $at )a&t anda berminat* B&a $it$ 5ree)eb$ dengan a!amat
http:::)))*+ree)eb$*-'m* 2a!a be!m berbah% tampi!ann(a $eperti di ba)ah ini*
2!i& t'mb'! e!ip$ (ang bert!i$&an SI4N ME U6A ma&a a&an tampi! ha!aman beri&t (ang bi$a dianggap
$ebagai +'rm!ir penda+taran nt& memb&a /Ne) A--'nt$/ "&eangg'taan bar#* I$i!ah &'ta&,&'ta& $e$ai
(ang diminta*
2'ta& pertama ada!ah /A--'nt Name "1ne W'rd#/* Di &'ta& ini anda diminta mengi$i $at &ata (ang a&an
menjadi nama &eangg'taan anda* A--'nt ini $e&a!ig$ menjadi a!amat )eb$ite "URL# re$mi anda (ang
terda+tar di 5ree)eb$* 1!eh &arena it $edapat mng&in anda menggna&an nama (ang ada hbngann(a
dengan tema ata materi )eb$ite anda* Namn $aha&an men-ari nama (ang tida& ter!a! mm dipa&ai*
Bi!a nanti tern(ata anda diminta nt& mengi$i !ang +'rm!ir ini &emng&inan &arena A--'nt Name (ang
anda i$i $dah terpa&ai '!eh 'rang !ain*
2'ta& &eda ada!ah /6a$$)'rd/* Di $ini anda har$ mema$&&an pa$$)'rd anda "minima! K &ara&ter% b'!eh
hr+ ata ang&a#* 2emdian di &'ta& $e!anjtn(a "Ret(pe 6a$$)'rd# anda har$ mengeti&&an &emba!i
pa$$)'rd anda (ang $ama per$i$ dengan (ang di ata$ "tapi jangan di,-'p(#* Sedang di &'ta& &etiga "Emai!
Addre$$# anda har$ men!i$&an a!amat emai! anda*
2'ta& tera&hir menan(a&an dari mana anda mengetahi tentang 5ree)eb$* 6i!ih!ah $a!ah $at dari item (ang
di$edia&an* Item,item ter$ebt a&an tampa& bi!a anda meng,&!i& &'ta& &e-i! di tepi &anan (ang bertanda
ana& panah "$egitiga#*
4!ng!ah !a(ar &e ba)ah ma&a a&an tampa& !anjtann(a* Anda har$ memberi tanda -entang " B # di da!am
&'ta& (ang di $ampingn(a bert!i$&an: /I ha<e read****/ dan $eter$n(a* A&hirn(a% &!i& t'mb'! bert!i$&an
Ne0t Step di ba)ahn(a*
Se!anjtn(a anda diba)a &e ha!aman (ang bert!i$&an ANTI,ABUSE A4REEMENT dengan beberapa
&a!imat di ba)ahn(a* 2emdian ada da bah t'mb'! ber)arna* 6i!ih!ah t'mb'! bert!i$&an /I Agree/
$ebagai tanda per$etjan anda terhadap i$i perjanjian &'ntra& grati$ anda dengan 5ree)eb$* Ha!aman
$e!anjtn(a tampa& $eperti di ba)ah ini*
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
Ha!aman ini meminta anda memi!ih $a!ah $at diantara da met'de pembatan )eb$ite* Cara pertama ada!ah
Beginner U$er (ang di$edia&an nt& 'rang (ang tida& menga$ai baha$a HTML dan be!m men(edia&an
+i!e,+i!e HTML batan $endiri* Da!am pa&et ini% 5ree)eb$ a&an men(edia&an ban(a& pi!ihan temp!ate
ha!aman )eb* U$er tingga! memi!ih temp!ate (ang diingin&an &emdian mema$&&an data,data (ang ingin
ditampi!&an da!am ha!aman )eb it* Sedang&an bagi anda (ang $dah mempn(ai +i!e,+i!e HTML batan
anda $endiri% henda&n(a memi!ih Ad<an-ed U$er* 2!i& "hitam&an# b!atan di depann(a ma&a a&an mn-!
da+tar i$ian $e!anjtn(a di bagian ba)ah ha!aman it jga $eperti ini:
Di &'ta& 6b!i- E,mai! Addre$$ bi$a anda ma$&&an a!amat emai! anda (ang $ama dengan a!amat emai!
terdah! ata b'!eh jga a!amat emai! (ang !ain dan b'!eh p!a anda &'$'ng&an* A!amat emai! ini a&an
digna&an nantin(a nt& &ebthan pengiriman data,data bi!a $it$ anda menggna&an 5'rm Sbmi$$i'n*
Sedang&an di &'ta& Site Categ'r(. anda har$ memi!ih $a!ah $at &ateg'ri (ang $e$ai dengan $i+at ata
tema dari $it$ (ang anda bat* I$ian $e!anjtn(a ada!ah baha$a tama (ang dipa&ai '!eh $it$ anda* Bi!a anda
menggna&an Baha$a Ind'ne$ia tentn(a anda har$ memberi tanda b!atan 1ther* Sete!ah $ema $e!e$ai
teri$i &!i& t'mb'! Ne0t Step (ang terdapat di ba)ahn(a* Bi!a $ema -ara pengi$ian anda bet!% $e!e$ai!ah
$dah dan anda diba)a pada ha!aman /$e!amat datang/*
Sampai di $ini pr'$e$ penda+taran anda $dah $e!e$ai* Anda b'!eh !ang$ng mengirim&an ata men,tran$+er
"p!'ad# +i!e,+i!e HTML anda ata &e!ar dari rang a--'nt anda dengan meng&!i& L'g 1t pada bari$
pa!ing ba)ah (ang terdapat di men $ebe!ah &iri*
Se&arang anda te!ah mempn(ai A--'nt di 5ree)eb$* Artin(a anda te!ah memi!i&i $ebah rang ata
tempat di $er<er 5ree)eb$ $ebe$ar K> megab(te$ nt& ditempati '!eh )eb$ite anda* Rang ini!ah (ang a&an
anda i$i dengan +i!e,+i!e HTML (ang te!ah anda bat* 6r'$e$ memindah&an +i!e,+i!e HTML dari hardi$& anda
&e hardi$& h'$t $er<er it!ah (ang dinama&an p!'ad "pengiriman# +i!e* Bagaimana -aran(a. Bai&!ah &ita
m!ai dari a)a!*
B&a!ah )eb$ite 5ree)eb$ ")))*+ree)eb$*-'m# pada br')$er anda* Tampi!ann(a $eperti gambar pertama di
ata$* 6ada $i$i &anan ata$ tampi!an )eb$ite ini tampa& da &'ta& i$ian (ait L'gin dan 6a$$)'rd* 6ada &'ta&
L'gin t!i$&an nama a--'nt "A--'nt Name# anda (ang anda bat &eti&a menda+tar dah!* 6ada &'ta&
6a$$)'rd &eti&&an pa$$)'rd (ang jga pernah anda &eti&&an &eti&a menda+tar* Sete!ah it &!i& t'mb'!
L'gin* Ma&a a&an tampa&!ah tampi!an $eperti ini:
Di $it ter-antm a!amat "URL# )eb$ite anda $eperti http:::)))*+ree)eb$*-'m:a--'nt;name;anda* A!amat
)eb$ite grati$an $eperti ini memang -&p panjang namn tida& $ah &ha)atirN tem&an-ara memende&&an
a!amat )eb$ite anda di $ini* 2emdian di $ebe!ah &iri terdapat &'ta& Member T''!$ dengan beberapa bari$
men di da!amn(a* Men,men ini!ah (ang har$ anda pe!ajari $at,per$at agar anda dapat menggna&an
dan mengatr )eb$ite anda dengan $ebai&,bai&n(a* Adapn nt& me!a&&an p!'ad +i!e% &!i& !in& "men#
Site Manager "&ira,&ira pada bari$ &e!ima#* Ma&a anda a&an diba)a &e ha!aman Site Manager (ang $eperti
ini:
Di $it ter!ihat bah)a di ba)ah &'!'m 5i!ename $dah terdapat $ebah +i!e (ang bernama inde0*htm* Ha! ini
menanda&an bah)a +i!e (ang a&an menjadi ha!aman pertama "h'mepage# (ang dimn-!&an bi!a a!amat
)eb$ite anda dib&a har$ bernama inde0*htm* Jadi bi!a anda $dah te!anjr membat +i!e h'mepage "+i!e
HTML (ang menjadi ha!aman pertama $ebah )eb$ite# dengan nama !ain ma&a har$ anda ganti dengan
nama inde0*htm* Tentn(a har$ anda ingat bah)a pen!i$an &'de HTML dari $etiap !in& (ang mengarah &e
ha!aman h'mepage ini jga har$ anda $e$ai&an*
Ada beberapa pi!ihan da!am membangn )eb$ite anda (ang di$edia&an da!am Site Manager ini* Namn
(ang a&an &ita pe!ajari di $ini ada!ah Up!'ad +i!e dari hardi$& anda &e $er<er 5ree)eb$* 2!i& !in& Up!'ad a
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
5i!e (ang berada pada deretan tera&hir "pa!ing &anan# dari &epa!a tabe! Site Manager* Sete!ah anda &!i&% a&an
mn-! jende!a p'p,p bar ber&ran &e-i! $eperti ini:
2!i& t'mb'! Br')$e ma&a mn-! &'ta& dia!'g tempat anda men-ari !eta& +i!e,+i!e HTML (ang anda
$impan* B&a!ah +'!der tempat anda men(impan +i!e,+i!e HTML anda* 2emdian pi!ih!ah $at +i!e (ang
henda& anda p!'ad* Ma&a a&an tampa& pada jende!a Up!'ad tadi a!amat +i!e anda da!am hardi$&* Bi!a $dah
bet!% &!i& t'mb'! Sbmit ma&a m!ai!ah ber!ang$ng pr'$e$ p!'ad* Sat +i!e te!ah $e!e$ai di,p!'ad bi!a
jende!a Up!'ad !en(ap dan ha!aman Site Manager tampa& &emba!i dengan menampi!&an nama +i!e (ang tadi
anda p!'ad $dah ter-antm di ba)ah &'!'m 5i!ename* Lanjt&an!ah !agi pr'$e$ p!'ad nt& +i!e,+i!e
!ainn(a dengan -ara (ang $ama dengan tadi* Begit $eter$n(a hingga $ema +i!e,+i!e anda te!ah berha$i! di,
p!'ad*
Bi!a pr'$e$ p!'ad $e!e$ai% -'ba!ah me!ihat ha$i!n(a dengan meng,&!i& t'mb'! 6re<ie) M( Site (ang
terdapat di $ebe!ah &anan pada &epa!a "!'g' nama# $it$ 5ree)eb$* Bi!a $eman(a benar% ma&a a&an
terb&a!ah $ebah jende!a bar br')$er (ang menampi!&an h'mepage ata ha!aman pertama dari $it$ (ang
anda bat* Bi!a tida&% ma&a &emng&inan be$ar &e$a!ahan ter!eta& pada pemberian nama +i!e h'mepage tadi*
Ingat naman(a har$ inde0*htm b&an inde0*htm!% apa!agi (ang !ainn(a*
Bi!a anda anggap $e!e$ai% anda b'!eh &e!ar dari !'gin anda dengan meng&!i& men !'g,'t pada bari$ pa!ing
ba)ah dari men Member T''!$* Se!amat% &ini anda te!ah mempn(ai )eb$ite $endiri* Seter$n(a% jangan
b'$an men-'ba $etiap men dari Member T''!$ nt& mendapat&an pengetahan bar tentang -ara
menge!'!a )eb$ite anda* Demi&ian p!a anda har$ rajin mengnjngi $it$,$it$ (ang men(aji&an pe!ajaran
tentang pembatan )eb$ite* Dan jangan $ng&an,$ng&an nt& bertan(a &epada )ebma$ter (ang !ebih
berpenga!aman*
Te&ni& Men(ing&at A!amat Web$ite
Bi!a anda menda+tar ata men(impan )eb$ite anda di )ebh'$t grati$ "+ree )ebh'$ting#% bia$an(a anda a&an
mendapat&an a!amat )eb$ite "URL# (ang rada,rada panjang* Mi$a!n(a% bi!a &ita menda+tar di 5ree)eb$
ma&a &ita a&an mendapat&an a!amat $eperti beri&t: http:::)))*+ree)eb$*-'m:$it$&* Di$amping panjang%
(ang tentn(a aga& $!it diingat% jga ter&e$an &rang pr'+e$i'na! ")a!apn &en(ataann(a memang be!m
pr'+e$i'na!#* 3ang je!a$% a!amat )eb$ite (ang $ing&at memang memdah&an nt& diingat '!eh 'rang !ain
di$amping !ebih me)a&i!i $it$ it $endiri% tanpa embe!,embe! $it$ tmpangann(a* Nah% $e&arang
bagaimana -ara &ita men(ing&at a!amat )eb$ite bagi &ita,&ita (ang ma$ih /$etia/ menggna&an )ebh'$ting
grati$.
Untng!ah di internet% berbagai ma-am +a$i!ita$ bi$a didapat&an* Diantaran(a $it$ (ang men(edia&an
+a$i!ita$ nt& men(ing&at a!amat )eb$ite* 5a$i!ita$ $ema-am ini di$ebt URL Redire-ti'n ata pengarah
URL* Sejm!ah )eb$ite men(edia&an +a$i!ita$ ini* Dinama&an URL Redire-ti'n &arena dengan
menggna&an a!amat (ang $ing&at (ang &ita dapat&an dari )eb$ite ter$ebt% ia a&an memba)a &ita "ata
tepatn(a br')$er &ita# &e a!amat )eb$ite &ita (ang $ebenarn(a* Mi$a!n(a &ita mempn(ai a!amat )eb$ite
a$!in(a ada!ah http:::)))*+ree)eb$*-'m:bat$ite* Dengan menggna&an URL redire-ti'n &ita bi$a
menggna&an nama !ain (ang !ebih $ing&at mi$a!n(a http:::bat$ite*-jb*net* Bi!a 'rang mengeti&&an a!amat
(ang $ing&at it a&an memba)a &ita &e a!amat )eb$ite &ita (ang $e$ngghn(a* Canggih% &an. Tida& jga***
Di$amping +ng$in(a $ebagai pen(ing&at a!amat )eb$ite% ada !agi &egnaan !ain dari URL Redire-ti'n ini*
Mi$a!n(a ji&a $at )a&t anda berpindah )eb h'$ting "tempat pen(impanan )eb$ite# &arena $at dan !ain
ha!% anda tida& per! pani&* 2enapa. 2arena a!amat (ang anda pa&ai dan per&ena!&an &epada para netter
$e!ama ini ada!ah a!amat dari URL Redire-ti'n it* Sehingga anda -&p mengganti arah (ang ditj '!eh
a!amat $ing&at ter$ebt &e a!amat "URL# )eb$ite di )eb h'$ting anda (ang bar* Bi$a dipahami. 2a!a
be!m% mari!ah &ita !ang$ng pra&te& bagaimana -ara mendapat&an a!amat (ang $ing&at it*
Di internet -&p ban(a& $it$ (ang men(edia&an !a(anan URL Redire-ti'n ini* 2a!a tida& per-a(a -'ba
&eti&&an &ata &n-i /URL Redire-ti'n/ da!am $ebah $ear-h engine dan !ihat!ah ha$i! pen-ariann(a* Sa!ah
$at )eb$ite pen(edia URL Redire-ti'n (ang -&p &!a$i& dan ter&ena! ada!ah (ang bera!amat di
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
http:::)))*-jb*net* Se$ai dengan naman(a )eb$ite ini men(edia&an a!amat dengan a&hiran -jb*net $eperti
http:::$it$&*-jb*net* Sit$ ini &ita ambi! $ebagai -'nt'h% di$amping $dah ter&ena!% jga memi!i&i pr'$edr
penda+taran (ang re!ati+ $ing&at dan mdah* 6a!ing tida& dengan memahami -ara regi$tra$i di CJB*NET ini
&ita $dah memi!i&i pemahaman tentang apa dan bagaimana -ara men(ing&at URL dengan URL Redire-ti'n*
B&a br')$er anda dan pergi!ah &e a!amat http:::)))*-jb*net* Da!am ha!aman pertama ini terdapat tampi!an
$eperti ini:
2eti&&an nama (ang anda pi!ih nt& menjadi a!amat )eb$ite anda pada &'ta& (ang diantarai dengan t!i$an
))) dan -jb*net* Sete!ah it te&an t'mb'! Regi$ter itA* Bi!a nama pi!ihan anda it be!m pernah terpa&ai%
ma&a anda a&an diba)a &e ha!aman +'rm!ir regi$tra$i* Sedang&an bi!a nama it $dah dipa&ai% anda a&an
diminta !agi mema$&&an nama (ang !ain* Di +'rm!ir regi$tra$i% anda har$ mengi$i $ejm!ah &'ta& i$ian
$ebagai beri&t:
Di &'ta& pa!ing ata$ $dah ter-antm nama (ang anda pi!ih* Sedang&an &'ta& $e!anjtn(a ada!ah: What i$
('r )eb $ite addre$$. "t!i$ a!amat )eb$ite anda (ang $ebenarn(a# dan What i$ ('r e,mai! addre$$. "t!i$
a!amat emai! (ang anda pn(ai#* 4!ng !agi !a(ar &e ba)ah ma&a a&an tampa& &'ta&,&'ta& i$ian
$e!anjtn(a $ebagai beri&t:
2'ta&,&'ta& beri&tn(a "5'r)ard Mai!% 616J:Web Mai!% C!'a& URL% dan 5'r)ard Sbd'main$# merpa&an
+itr,+itr tambahan (ang diberi&an '!eh CJB*NET nt& anda* Anda bi$a memi!ih antara menggna&an +itr
ter$ebt "3e$# ata tida& "N'#*
Dengan +a$i!ita$ 5'r)ard Mai!% anda bi$a membat $e&ian ban(a& nama,nama emai! (ang dia&hiri dengan
Z$it$;anda*-jb*net dimana $e!rh nama,nama emai! it mengarah &e a!amat emai! anda (ang
$e$ngghn(a* Mi$a!n(a: a!amat $it$ $a(a ada!ah: http:::bat$ite*-jb*net dan a!amat emai! $a(a ada!ah
adi+itrahZma&t''b*-'m* Dengan +itr 5'r)ard Mai! nantin(a $a(a bi$a membat nama,nama emai! $eperti
)ebma$terZbat$ite*-jb*net% in+'Zbat$ite*-jb*net% tan(aZbat$ite*-jb*net% ($+Zbat$ite*-jb*net dan
$eter$n(a* Dimana $ema nama,nama emai! ter$ebt mengarah &e adi+itrahZma&t''b*-'m* Artin(a $ema
emai! (ang ditj&an:di&irim&an &e $a!ah $at dari nama,nama it a&an ter&irim ata $ampai di
adi+itrahZma&t''b*-'m*
Adapn 616J ata Web Mai! ada!ah +a$i!ita$ a--'nt emai! bia$a $eperti (ang anda bat di $it$ pen(edia
!a(anan emai! grati$ mi$a!n(a 3ah''A% H'tmai!% 6'pmai!% dan !ain,!ain* Jadi anda pn bi$a memi!i&i a--'nt
emai! di CJB*NET*
Sedang&an C!'a& URL ada!ah +itr (ang bergna nt& memanip!a$i pen!i$an a!amat )eb$ite anda pada
br')$er% (a&ni pada addre$$ bar "&'ta& a!amat )eb$ite# agar tetap menampi!&an a!amat CJB*NET% b&an
a!amat )eb page anda (ang $e$ngghn(a* Demi&ian p!a +itr 5'r)ard Sbd'main$ bi$a memanip!a$i
pen!i$an a!amat )eb$ite anda agar pen!i$an a!amat )eb page anda $ampai &e $bdire&t'ri bi$a diganti
dengan pen!i$an $bd'main di CJB*NET*
Mi$a!n(a: http:::)))*+ree)eb$*-'m:bat$ite:pr'm'$i bi$a di)a&i!i dengan http:::pr'm'$i*bat$ite*-jb*net*
2'ta& Tit!e dii$i dengan nama nama "jd!# )eb$ite anda* Ingat ini b&an a!amat URL* Mi$a!n(a $a(a
mempn(ai )eb$ite &'ran Repb!i&a memi!i&i )eb$ite dengan nama Repb!i&a 1n!ine dengan a!amat
http:::)))*repb!i&a*-'*id* Sit$ (ang $edang anda ba-a ini mempn(ai a!amat "URL# http:::bat$ite*-'*nr
ata http:::bat$ite*-jb*net dan mempn(ai nama "tit!e# 6andan Membangn Web$ite* Nama ini!ah (ang
bia$an(a dip'p!er&an di dire&t'ri ata p'rta! $ebagai jd! dari $ebah )eb$ite*
2'ta& 2e()'rd$ dii$i dengan &ata,&ata &n-i (a&ni &ata,&ata (ang merpa&an tema,tema ata materi,materi
tama (ang dibaha$ da!am $ebah )eb$ite% bia$an(a &ata,&ata ini pa!ing $ering di!ang,!ang* Mi$a!n(a
)eb$ite ini mempn(ai &e()'rd$ $ebagai beri&t: pandan% be!ajar% membangn% membat% HTML% )eb$ite%
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
h'mepage% $it$% ha!aman% )eb% $endiri% pribadi% pem!a* Ma$&&an!ah &ata,&ata &n-i nt& )eb$ite anda
dengan tanda &'ma antara $at &ata dengan &ata !ain* Ingat% jangan ada &ata (ang ber!ang* Mi$a!n(a anda
mempn(ai )eb$ite berjd! Met'de 6en!i$an S&rip$i* Anda bi$a mema$&&an &ata,&ata &n-i $eperti
beri&t: met'de% pandan% ped'man% petnj&% te&ni&% pen!i$an% men!i$% pen($nan% men($n%
pembatan% membat% &ar(a t!i$% &ar(a i!miah% $&rip$i% te$i$* 6en!i$an &e()'rd$ ini penting &arena
nantin(a a&an diman+aat&an '!eh $ear-h engine "$eperti 4''g!e# nt& men-ari ha!aman,ha!aman )eb (ang
re!e<an dengan (ang di-ari '!eh $e'rang netter*
Sedang&an &'ta& De$-ripti'n merpa&an raian ring&a$ tentang apa i$i )eb$ite anda* Mi$a!n(a )eb$ite ini
mempn(ai de$&rip$i $ebagai beri&t: 6andan membangn )eb$ite nt& pem!aN m!ai dari be!ajar
HTML% -ara menda+tar di )ebh'$ting grati$% tri& memende&&an a!amat URL% -ara p!'ad +i!e% dan -ara
pr'm'$i )eb$ite* 6'&'&n(a m!ai dari tida& tah $ama $e&a!i $ampai memi!i&i )eb$ite pribadi (ang ramai
di&njngiA Jadi De$-ripti'n ini $ema-am &ata,&ata per&ena!an &epada para netter tentang apa i$i )eb$ite
anda*
4e$tb''& dan 5'rm ada!ah da bah +a$i!ita$ tambahan (ang diberi&an '!eh CJB*NET* 4e$tb''& ata
B& Tam ada!ah ha!aman )eb (ang di$edia&an bagi para pengnjng $it$ anda nantin(a agar mere&a
dapat mengi$i nama% a!amat emai! dan &'mentar mere&a* Da+tar i$ian para pengnjng "tam# ini $e!anjtn(a
a&an ditampi!&an da!am ha!aman )eb it p!a* 5'rm hampir $ama +ng$in(a dengan b& tam &arena di
$it para netter !e!a$a nt& men!i$&an apa (ang mere&a ingin $ampai&an da!am +'rm tert!i$ ter$ebt*
Anda b'!eh memi!ih antara menggna&an +a$i!ita$ ter$ebt "3e$# ata tida& "N'#* Sampai di $ini $e!e$ai!ah
tga$ pengi$ian +'rm!ir* 4!ng !agi ha!aman +'rm!ir i$ian &ita ma&a a&an tampa& t!i$an $ebagai beri&t:
2!i& t'mb'! panjang bert!i$&an I agree**** dan $eter$n(a* Bi!a -ara pengi$ian anda benar dan $eman(a
bere$% $e!e$ai!ah $dah pr'$e$ regi$tra$i dan tampa&!ah ha!aman /-apan $e!amat/*
Seja& it% anda te!ah mempn(ai a!amat URL bar (ang !ebih $ing&at* Dan anda jga a&an di&irimi emai!
pemberitahan &e a!amat emai! (ang tadi anda ma$&&an &eti&a regi$tra$i tentang /pere$mian/ a!amat bar
anda ini* Se!amat memper&ena!&an a!amat )eb$ite anda &e $e!rh dniaA Unt& it i&ti pandan
$e!anjtn(a*
MEMAN5AAT2AN SEARCH EN4INE UNTU2 6R1M1SI WEBSITE SECARA 1NLINE
6r'm'$i )eb$ite manjadi begit penting% &arena mendatang&an pengnjng $ama $$ahn(a "bah&an !ebih
$$ah# daripada membat )eb$ite it $endiri* Ji&a Anda bar $aja berha$i! membangn $ebah )eb$ite% it
han(a merpa&an !ang&ah a)a! dari pr'$e$ )eb de<e!'pment* 2arena indi&at'r tama $&$e$ ata tida&n(a
$ebah )eb$ite di!ihat dari ban(a&n(a jm!ah pengnjng p'ten$ia! (ang datang* Da!am ha! ini% me$&ipn
Anda memi!i&i )eb$ite dengan de$ain (ang me)ah dan te&n'!'gi $-ripting (ang -anggih% be!m!ah bi$a
di&ata&an $&$e$ ji&a memi!i&i jm!ah <i$it'r (ang &e-i!*
Ban(a& peng$aha,peng$aha (ang mera$a &e-e)a &arena te!ah menghabi$&an ban(a& bia(a nt& membat
)eb$ite per$ahaan% tetapi tida& mendatang&an ha$i! $eperti (ang diharap&an* 6enja!an pr'd& dan ja$a
per$ahaan tida& bi$a mening&at $eperti (ang diharap&an* Sema ini terjadi &arena mere&a &rang
memperhati&an $i$i pr'm'$i )eb$ite% (ang $ebenarn(a merpa&an bagian termaha! dari pr'$e$ )eb
de<e!'pment* Da!am ha! ini ban(a& -ara (ang bi$a Anda !a&&an nt& mempr'm'$i&an )eb$ite* Namn
tt'ria! ini a&an mem+'&$&an pembaha$an &h$$ pada peman+aatan $ear-h engine dan dire&t'ri dengan
berbagai &e!ebihann(a*
Sear-h Engine <$ Dire-t'r(
Sebe!m me!ang&ah !ebih !anjt ada bai&n(a &a!a Anda mengetahi apa it $ear-h engine% bagaimana
mere&a be&erja% dan apa perbedaan antara $ear-h engine dan dire-t'r(* 2ena!i d! m$h (ang a&an Anda
hadapi di medan perang% ji&a ingin $e!amat tentn(a :#
Sear-h engine merpa&an $ebah $i$tem databa$e (ang diran-ang nt& meng,inde0 a!amat,a!amat internet
"URL% 5T6% $enet% d!!#* Unt& me!a&$ana&an tga$n(a ini% $ear-h engine memi!i&i pr'gram &h$$ (ang
bia$an(a di$ebt $pider% b't% ata -ra)!er* 6ada $aat Anda menda+tar&an $ebah a!amat )eb "URL#% $pider
dari $ear-h engine a&an menerima dan mengana!i$a URL ter$ebt* Dengan pr'$e$ dan pr'$edr (ang $erba
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
't'mati$% $pider ini a&an memt$&an apa&ah )eb (ang anda da+tar&an !a(a& diterima ata tida&* Ji&a !a(a&%
$pider a&an menambah&an a!amat URL ter$ebt &e $i$tem databa$e mere&a* Rang&ing,pn $egera ditetap&an
dengan a!g'ritma dan -aran(a ma$ing,ma$ing* Ji&a tida& !a(a&% terpa&$a Anda har$ ber$abar dan
meng!angi penda+taran dengan peri'de tertent* Jadi $ema (ang naman(a $ear-h engine% pa$ti memi!i&i
pr'gram (ang di$ebt Spider* Dan pr'gram ini!ah (ang $ebenarn(a menent&an apa&ah )eb $ite Anda bi$a
diterima ata tida&* C'nt'h beberapa $ear-h engine ter&ena! ada!ah : A!ta<i$ta% 4''g!e% L(-'$% N'rthern
Light% H'tb't% dan ma$ih ba(a& !agi*
Berbeda dengan dire-t'r( (ang meng,inde0 ha!aman )eb $e-ara mana!* Mana! (ang dima&$d ada!ah
mere&a menggna&an 'rang bia$a nt& mengana!i$a $etiap ha!aman )eb (ang ma$&* Tida& menggna&an
$pider ata -ra)!er $eperti ha!n(a $ear-h engine* 2engg!an dire-t'r( dibanding $ear-h engine ada!ah
memberi&an ha$i! pen-arian (ang !ebih re!e<an dengan &a!ita$ (ang re!ati+ !ebih bai&* Tapi &arena $ema
pr'$e$ di!a&&an $e-ara mana! menggna&an edit'r man$ia% jm!ah databa$e (ang dimi!i&i bia$an(a jah
!ebih &e-i! dibanding&an dengan $ear-h engine* It!ah $ebabn(a $e&arang ini ban(a& per$ahaan (ang
menge!'!a dire-t'r( menerap&an $i$tem ganda% (ait menggna&an dire-t'r( O $ear-h engine* C'nt'h n(ata
ada!ah 3ah'' (ang menggandeng 4''g!e $ebagai $ear-h engine de+a!t,n(a* C'nt'h beberapa dire-t'r(
ter&ena! $e!ain 3ah'' ada!ah 1pen Dire-t'r( 6r'je-t% L''&$mart% dan NBCi*
1&% $e&arang Anda $dah mengena! $e&i!a$ perbedaan antara $ear-h engine dan dire&t'ri* Tt'ria! bagian
$e!anjtn(a a&an menje!a$&an bagaimana meng'ptima!&an ha!aman )eb Anda "dari $egi HTML#% $ebe!m
dida+tar&an &e $ear-h engine* A&an $angat bai& &a!a Anda $ebe!mn(a $dah mengerti ata pernah be!ajar
baha$a HTML% &arena (ang a&an dibaha$ pada tt'ria! ini ban(a& berhbngan dengan te&ni$ pen!i$an
HTML* Bagi (ang $ama $e&a!i be!m pernah mempe!ajari HTML% $a(a $aran&an nt& memba-a tt'ria!n(a
ter!ebih dah!* Tida& per! $e-ara detai!% -&p da$ar,da$arn(a $aja* Tt'ria! HTML (ang !ma(an !eng&ap
dapat Anda tem&an di HTMLC'deTt'ria!*-'m ata di Da<e$ite*-'m*
Sear-h Engine Rang&ing
Memi!i&i ha!aman )eb (ang ena& dipandang mata% be!m tent memberi&an ha$i! (ang bai& pada $ear-h
engine* Bagian pertama dari tt'ria! ini menje!a$&an bagaimana -ara meng'ptima!&an ha!aman )eb dengan
tag,tag HTML &h$$% dan ha!,ha! apa $aja (ang mempengarhi rang&ing pada Sear-h Engine*
Setiap $ear-h engine memi!i&i -ara dan a!g'ritma ma$ing,ma$ing nt& menent&an rang&ing $ebah
)eb$ite* Tetapi beberapa p'in diba)ah ini $dah mm dipa&ai t'!a& &r '!eh $ebagian be$ar $ear-h
engine% dan pa$ti&an &a!a )eb $ite Anda mema&ain(a*
2e()'rd pada d'main name% ji&a Anda memi!i&i )eb$ite (ang beri$i &'!e&$i !ag,!ag mpJ mi$a!n(a% a&an
$angat bai& &a!a Anda menggna&an d'main )))*mpJ*-'m* Ini ada!ah -ara &n'% tetapi $ampai $aat ini
ma$ih tetap dipa&ai '!eh $ear-h engine*
2e()'rd pada nama +i!e% mi$a!n(a Anda memi!i&i ha!aman )eb (ang beri$i in+'rma$i mengenai h'te! di
ba!i% $ebai&n(a di$impan dengan nama ba!i,h'te!$*htm!% ini jga a&an mempengarhi rang&ing*
2e()'rd pada page tit!e% tag 9tit!e8 pada ha!aman HTML $angat penting nt& di'ptima!&an* U$aha&an
agar tit!e (ang digna&an mengandng &e()'rd (ang re!e<an dengan i$i ha!aman )eb*
2e()'rd pada head!ine% bagi Anda (ang $dah menga$ai HTML tent mengena! tag 9H@8%9H=8% d$t* Tag
head!ine $angat bai& dipa&ai nt& jd! $ebah paragra+% mi$a!n(a : 9H@8H'te!$ in Ba!i9:H@8* Head!ine
$angat diperhitng&an '!eh Sear-h Engine*
4na&an &e()'rd (ang re!e<an pada meta tag% jangan!ah menggna&an &e()'rd (ang $ama $e&a!i tida& ada
hbngann(a dengan i$i ha!aman )eb Anda* Ha! ini bi$a didete&$i '!eh $ear-h engine dan a&an dianggap
$pamming*
2e()'rd pada page -'ntent% &e()'rd (ang diharap&an har$ terdapat pada i$i ha!aman )eb* 4na&an jga
+ra$e ata &ata,&ata !ain (ang berhbngan dengan &e()'rd tama*
Meta tag$% ada!ah tag,tag HTML &h$$ (ang digna&an nt& menggambar&an &e$e!rhan dari i$i )eb
Anda* Meta tag a&an &ita baha$ $e-ara &h$$ di bagian beri&tn(a*
Lin& 6'p!arit(% ada!ah jm!ah ha!aman )eb !ain (ang mema$ang !in& &e )eb $ite Anda* Beberapa $ear-h
engine tama $angat memperhati&an ha! ini* Sema&in be$ar !in& p'p!arit( $at )eb $ite% rang&ingn(a a&an
$ema&in tinggi*
It!ah beberapa p'in mm (ang nantin(a a&an dibaha$ !ebih menda!am* Ji&a )eb $ite Anda $dah
di'ptima!&an $e$ai dengan H p'in ter$ebt% dijamin a&an mendapat rang&ing (ang bai& pada $ear-h engine*
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
6enggnaan Meta Tag
Ada ban(a& meta tag $e$ai dengan $tandar HTML K*> dari W'r!d Wide Web C'n$'rti'n% tapi $ebenarn(a
(ang bet!,bet! dipa&ai '!eh $ear-h engine han(a J% de$-ripti'n% &e()'rd% dan r'b't$*
Meta Tag De$-ripti'n
Meta tag de$-ripti'n digna&an nt& memberi&an gambaran mm mengenai i$i dari ha!aman )eb Anda*
U&rann(a di$aran&an tida& !ebih dari =>> &ara&ter* Dan $aha&an agar de$-ripti'n ini bi$a menjadi &a!imat,
&a!imat (ang !eta&n(a di a)a! ha!aman )eb page (ang ber$ang&tan* C'nt'h pen!i$an meta tag de$-ripti'n
ada!ah $ebagai beri&t :
9meta nameD/de$-ripti'n/ -'ntentD/6r'm'$i,)eb*-'m i$ a $ear-h engine tt'ria! that e0p!ain h') t' get t'p
rang&ing in a!! maj'r $ear-h engine and get high tra++i- +'r ('r )eb $ite* A<ai!ab!e in Baha$a Ind'ne$ia*/8
Beberapa $ear-h engine $eperti N'thern Light dan 4''g!e tida& mema&ai meta tag$ $ebagai de$&rip$i ha$i!
pen-ariann(a* 3ang mere&a gna&an ada!ah &a!imat,&a!imat a)a! (ang ada pada ha!aman ter$ebt* It!ah
$ebabn(a &enapa $a(a $aran&an agar Anda menggna&an i$i dari meta tag de$-ripti'n $ebagai &a!imat
pemb&a* Dan ji&a bagian pa!ing a)a! dari )eb Anda berpa $ebah men% ma&a de$&rip$i (ang ditampi!&an
pada ha$i! pen-arian N'rthern Light ada!ah $eperti ini :
H'me S 6r'd-t$ and Ser<i-e S C'nta-t U$ S Ab't U$ ***)e!-'me t' 'r 'n!ine $t're% the be$t p!a-e 'n the
)eb t'***
Meta Tag 2e()'rd
Meta tag &e()'rd $angat penting &eberadaann(a% &arena menent&an &ata &n-i apa (ang bi$a menem&an
ha!aman )eb ter$ebt pada $ear-h engine* Sinta& da$ar dari meta tag &e()'rd ada!ah $ebagai beri&t :
9meta nameD/&e()'rd$/ -'ntentD/&e()'rd@ &e()'rd= &e()'rdJ ***/8
ata ada jga (ang men!i$ dengan pemi$ah tanda &'ma :
9meta nameD/&e()'rd$/ -'ntentD/&e()'rd@% &e()'rd=% &e()'rdJ% ***8
2edan(a ber+ng$i $ama dan tida& ada pengarhn(a pada $ear-h engine* Tjan pema&aian tanda &'ma
agar &e()'rd,&e()'rd ter$ebt !ebih mdah diba-a* 3ang per! diperhati&an di$ini ada!ah jangan
meng!ang $ebah &ata !ebih dari J &a!i% &arena a&an dianggap $pamming* C'nt'h pema&aian meta tag
&e()'rd (ang $a!ah ada!ah :
9meta nameD/&e()'rd$/ -'ntentD/ba!i% ba!i h'te!$% tra<e! in ba!i% ba!i i$!and% ba!i )eather8
Di$ini ter!ihat $e&a!i bah)a &ata /ba!i/% di!ang !ebih dari J &a!i* C'nt'h beri&t ini tida& a&an dianggap
$pamming '!eh $ear-h engine :
9meta nameD/&e()'rd$/ -'ntentD/ba!i h'te!$ tra<e! ba!i i$!and ba!i )eather/8
3ang ta& &a!ah pentingn(a mengenai &e()'rd ada!ah jangan membat &e()'rd (ang tida& ada hbngann(a
dengan i$i ha!aman )eb Anda* Ha! ini jga a&an dianggap $pamming* Mi$a!&an )eb Anda memat in+'rma$i
mengenai pari)i$ata di Ba!i% jangan $e&a!i,&a!i menambah&an /M6J/ ata /Britne( Spear$/ $ebagai &e()'rd
han(a &arena &e()'rd,&e()'rd ini merpa&an &e()'rd +a<'rit di internet dan ban(a& di-ari 'rang*
Meta Tag R'b't$
Tjan tama penggnaan meta tag r'b't$ ada!ah nt& menent&an ha!aman )eb (ang mana bi$a di,inde0
'!eh $pider dan ha!aman )eb mana (ang tida&* Tag ini $angat bergna $e&a!i tertama ji&a $eat )eb$ite
mema&ai +rame nt& na<iga$in(a* Tentn(a &ita tida& ingin menampi!&an men,men da!am +rame nt&
diba-a '!eh $ear-h engine* 5'rmat da$ar dari meta tag r'b't$ ada!ah $ebagai beri&t :
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
9meta nameD/r'b't$/ -'ntentD/inde0 S n'inde0 S +'!!') S n'+'!!')/8
Sebagai -'nt'h% ji&a Anda ingin agar $pider memba-a main page% dan mene!$ri $ema !in& (ang ada ma&a
tambah&an perintah beri&t ini :
9meta nameD/r'b't$/ -'ntentD/inde0 +'!!')/8
Dengan perintah ini $pider a&an meng,inde0 main page Anda dan menjad)a!&an nt& menginde0 ha!aman,
ha!aman !ain (ang bi$a di-ari me!a!i h(per!in& "9a hre+D//8#*
6erintah beri&t ini a&an mengin$tr&$i&an agar $pider tida& meng,inde0 mapn mene!$ri !in& (ang ada
pada $at ha!aman )eb*
9meta nameD/r'b't$/ -'ntentD/n'inde0 n'+'!!')/8
1&% $ete!ah mengetahi tentang meta tag% bagian $e!anjtn(a a&an membaha$ mengenai pen($nan
-'ntent:i$i ha!aman )eb (ang $ear-h engine +riend!(*
6eng'ptima!an )eb$ite -'ntent
C'ntent ada!ah raja* It!ah &n-i $&$e$ nt& mendapat&an rang&ing (ang tinggi pada $ear-h engine*
Bagian ini a&an menje!a$&an bagaimana meran-ang i$i ha!aman )eb (ang $ear-h engine +riend!(* Namn
tetap har$ dijaga% agar <i$it'r Anda betah memba-an(a*
Sat ha! (ang per! diingat ada!ah )eb$ite (ang Anda mi!i&i diran-ang nt& <i$it'r% b&an nt& $ear-h
engine* Jangan!ah ter!a! ber!ebihan han(a &arena ingin mendapat rang&ing (ang tinggi% tapi j$tr membat
i$i ha!aman )eb tida& ena& nt& diba-a* Ji&a ha! ini tida& Anda perhati&an% ma&a <i$it'r han(a a&an datang
$e&a!i $aja dan mere&a a&an enggan nt& ber&njng !agi* Lang&ah pertama% $$n!ah i$i )eb Anda $e-ara
bia$a* Bat &a!imat,&a!imat (ang menari& dan ena& nt& diba-a* Tetapi $aha&an agar &e()'rd,&e()'rd
pada meta tag% terpa&ai pada &a!imat,&a!imat di a)a! paragra+* Jaga!ah agar t'pi&n(a tida& ter!a! me!a$ dan
tetap $pe$i+i&* Sebah ha!aman )eb (ang bai& han(a beri$i da $ampai tiga +'&$ baha$an* 2a!a da!am
pe!ajaran Baha$a Ind'ne$ia% ini di$ebt p'&'& pi&iran (ang menji)ai $ebah &arangan :# 1&% !ang&ah
$e!anjtn(a 'ptima!&an ha!aman )eb Anda dengan tip$,tip$ beri&t ini*
6erhati&an penggnaan gambar* Hindari penggnaan gambar:image (ang ter!a! berat pada )eb Anda*
U$aha&an agar &ran ha!aman )eb O gambar tetap diba)ah GK &b* 4na&an $'+t)are,$'+t)are $eperti
Ad'be 6h't'$h'p "men +i!e , $a<e +'r )eb# nt& meng'ptima!&an gambar* 6enggnaan 5!a$h dan Ja<a
(ang ber!ebihan $ebai&n(a dihindari*
Hindari pema&aian +rame* 5rame memang bai& dipa&ai $ebagai na<iga$i% tetapi bi$a membingng&an $ear-h
engine* Ha!aman tama +rame$et bia$an(a tida& beri$i -'ntent apa,apa* 2a!apn Anda terpa&$a
menggna&an +rame% ingat!ah men-antm&an tag 9n'+rame89:n'+rame8 dan t!i$&an rang&man dari i$i
ha!aman )eb Anda pada tag ter$ebt agar $ear-h engine (ang tida& mend&ng +rame ma$ih bi$a
memba-an(a*
Ran-ang!ah agar )eb Anda bi$a diba-a '!eh $ema br')$er* Ha!aman )eb (ang tampa& -anti& di Internet
E0p!'rer &adang,&adang han(a tampa& b!an& pada Net$-ape Na<igat'r* Hati,hati!ah dengan ha! ini &arena
bi$a menrn&an rang&ing pada $ear-h engine* B&an&ah &e-anti&an it jga re!ati+ bagi $etiap 'rang :#
4na&an &e()'rd tama pada tit!e ha!aman )eb* I$i dari tag 9tit!e89:tit!e8 $angat berpengarh pada
rang&ing $ear-h engine* Ran-ang!ah $ebah tit!e (ang menari& nt& diba-a dan jaga agar &rann(a tida&
me!ebihi ?> &ara&ter*
U$aha&an agar ha!aman )eb Anda mema&ai page head!ine "H@,G#% dan gna&an &e()'rd tama $ebagai
9H@8hea!ine9:H@8*
Hindari pema&aian +'nt (ang ter!a! &e-i! 9+'nt $iYeD/@/8 dan $$ah diba-a*
Ji&a Anda mema$ang image ingat!ah agar $e!a! me!eng&apin(a dengan atribt a!t* Beberapa $ear-h engine
menggna&an a!t tag $ebagai ped'man re!e<an$i ha$i! pen-arian* 9IM4 SRCD/gambar*jpg/
ALTD/tambah&an beberapa &e()'rd tama di$ini/8*
Me$&ipn tida& ban(a&% beberapa $ear-h engine jga memba-a -'mment tag* I$i!ah -'mment tag Anda
dengan beberapa &e()'rd (ang re!e<an*
Beberapa $ear-h engine tama $eperti A!ta<i$ta dan 4''g!e memberi&an p'in !ebih ban(a& nt& paragra+,
paragra+ (ang !eta&n(a di a)a!* Jadi $eperti (ang $dah di$ebt&an $ebe!mn(a% $aha&an mema&ai
&e()'rd,&e()'rd anda!an Anda di a)a! ha!aman*
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
D''r)a( 6age
Memang aga& $$ah nt& meng'ptima!&an ha!aman )eb $e$ai dengan &etjh tip$ (ang diberi&an
$ebe!mn(a* Tertama dari $egi -'ntent* Apa!agi ji&a Anda membat )eb nt& $ebah per$ahaan* Sema
-'ntent "&a!imat:paragra+# $dah diberi&an apa adan(a* Anda tida& mng&in merbahn(a dengan begit $aja*
Begit jga nt& )eb,)eb $ema-am p'rta! (ang i$i beragam* Wa!apn ha!am inde0,n(a $dah Anda
b'!a&,ba!i&% tetap $aja $$ah mendapat p'$i$i bag$ nt& &e()'rd tertent* Ji&a menghadapi $ita$i $eperti
ini% $aatn(a Anda menggna&an d''r)a( page*
D''r)a( page ada!ah $ebah ha!aman )eb (ang dibat nt& men'nj'!&an $at $ampai da &e()'rd $aja*
Sat ata da &e()'rd ter$ebt a&an menjadi inti pembi-araan dari $ebah ha!aman% $ehingga $ear-h engine
a&an menganggap i$i ha!aman ter$ebt !ebih re!e<an* Dari d''r)a( page ini% bi$a dipa$ang !in& (ang
mengarah &e ha!aman inde0 (ang $ebenarn(a* Sebt $aja Anda memi!i&i )eb$ite )))*pr'm'$i,)eb*-'m%
tetapi ha!aman inde0n(a $dah tida& bi$a di'ptima!&an !agi* Unt& it Anda har$ membat $ebah d''r)a(
page bernama pr'm'$i*htm!% &arena /pr'm'$i/ ada!ah &e()'rd (ang Anda harap&an* Ha!aman mana (ang
har$ Anda $bmit &e $ear-h engine . Tent $aja http:::)))*pr'm'$i,)eb*-'m:pr'm'$i*htm!* Tapi $e&a!i
!agi $a(a ingat&an% pa&ai!ah d''r)a( page han(a ji&a terpa&$a* A!ang&ah bai&n(a &a!a Anda bi$a
meng'ptima!&an ha!aman inde0 (ang a$!i*
Ji&a Anda $dah memt$&an nt& membat d''r)a( page% perhati&an!ah !ang&ah,!ang&ah beri&t ini*
6t$&an nt& &e()'rd apa d''r)a( page ter$ebt a&an dibat* 6i!ih $at $ampai tiga &ata (ang Anda
anggap pa!ing p'ten$ia! dan berhbngan dengan )eb Anda*
1ptima!&an tit!e% meta de$-ripti'n% dan meta &e()'rd,n(a% $e$ai dengan &e()'rd tama (ang Anda pi!ih*
M!ai!ah membat -'ntent (ang panjangn(a minima! J paragra+* Jangan membat ha!aman (ang ter!a!
pende&% &arena beberapa $ear-h engine $eperti A!ta<i$ta dan N'rthern Light a&an mempri'rita$&an ha!aman
(ang &a(a a&an -'ntent* U$aha&an agar &e()'rd,&e()'rd (ang Anda pi!ih dipa&ai pada $etiap paragra+*
Ji&a menggna&an gambar% jaga!ah agar &rann(a tida& ter!a! be$ar dan i$i bagian a!t,n(a dengan &e()'rd
(ang Anda pi!ih*
Simpan ha!aman )eb Anda dengan nama (ang $ebenarn(a% -'nt'h : pr'm'$i*htm!% jangan di$impan dengan
nama inde0@*htm ata inde0=*htm!*
Se&arang $eman(a $dah $iap* Anda $dah bi$a m!ai menda+tar&an )eb$ite Anda &e berbagai $ear-h
engine tama* Tapi $ebe!mn(a ba-a d! bagian $e!anjtn(a dari tt'ria! ini (ang a&an memberi&an $edi&it
tip$ agar penda+taran Anda berha$i! dengan bai&*
Sbmit &e Sear-h Engine
Se&arang tiba!ah $aatn(a menda+tar&an )eb$ite Anda &e $ear-h engine* Ba-a!ah bai&,bai& tip$ pada ha!aman
ini agar penda+taran berha$i! dengan bai&*
Setiap $ear-h engine mempn(ai atran ter$endiri da!am menerima )eb$ite* Sa(a $aran&an agar Anda
memba-a dengan $e&$ama atran (ang mere&a beri&an* Jangan pernah berani me!anggar% &arena han(a a&an
membang,bang )a&t Anda* Lihat jga berapa jm!ah ma&$ima! ha!aman )eb (ang bi$a Anda da+tar&an
$e&a!ig$ da!am $e&a!i )a&t* Sear-h engine (ang memi!i&i &emampan deep -ra)!er $eperti 4''g!e% a&an
mamp mene!$ri $etiap !in& (ang ada pada $ebah ha!aman )eb* Jadi Anda tida& per! men,$bmit $etiap
ha!aman $at per$at% -&p inde0n(a $aja*
Saat ini ada !ebih dari @>>> $ear-h engine (ang bertebaran di internet* Tapi dari $e&ian ban(a& ter$ebt han(a
beberapa $aja (ang memi!i&i databa$e be$ar dan !eng&ap* Sebt $aja J pemain tama% 4''g!e% In&t'mi% dan
A!!TheWeb* Tiga $ear-h engine ini memi!i&i databa$e (ang $angat be$ar dan ban(a& dipa&ai $ebagai
$e-'ndar( re$!t pada $ear-h engine !ainn(a* Mi$a!n(a databa$e 4''g!e dipa&ai '!eh 3ah''% In&t'mi
memba-&p MSN dan A1L $ear-h% dan A!!TheWeb dipa&ai L(-'$*
Saat ini ban(a& $it$ (ang mena)ar&an ja$a $bmit &e $ear-h engine $e-ara 't'mati$* Se&a!i mengi$i +'rm%
)eb $ite Anda bi$a dida+tar&an &e J> $ear-h engine $e&a!ig$ "bah&an !ebih#* Cara ini memang $angat
menghemat )a&t% tapi tida& bi$a terjamin &eberha$i!ann(a* Se&arang ini ban(a& $ear-h engine (ang
men'na& penda+taran $e-ara 't'mati$ me!a!i pr'gram $bmitter* C'nt'hn(a ada!ah a!ta<i$ta* Anda
di)ajib&an nt& mema$&&an &'de penda+taran dengan benar $ebe!m bi$a men,$bmit ha!aman )eb &e
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
databa$e A!ta<i$ta* 2'de ter$ebt diha$i!&an $e-ara 't'mati$ da!am bent& image a-a&% $ehingga benar,benar
per! &ete!itian nt& memba-an(a* Me$&ipn ban(a& menghabi$&an )a&t% tetapi $bmit $e-ara mana!
ma$ih jah !ebih aman* Ata $ebagai a!ternati+% -ari!ah pr'gram $bmitter (ang bi$a menampi!&an
$bmi$$i'n re$!t $e-ara !ang$ng% tida& han(a menge!ar&an 'tpt berha$i! ata gaga!% namn tanpa b&ti*
Saat ini 6r'm'$i,)eb*-'m $dah men(edia&an $bmitter $emi 't'mati$ (ang bi$a menda+tar&an )eb$ite
Anda &e beberapa $ear-h engine $e-ara -epat* Sbmi$$i'n re$!t bi$a di!ihat $e-ara !ang$ng% $ehingga Anda
tida& per! rag tentang &eberha$i!ann(a*
2eadaan &'ne&$i internet jga har$ diperhati&an* Jangan men,$bmit pada $aat &'ne&$i internet !ambat*
6er$enta$e &egaga!an bi$a !ebih be$ar* Sbmit!ah )eb$ite Anda di!ar jam,jam $ib&% (ang bi$a menjamin
&'ne&$i $e-ara !an-ar*
Se&arang )eb$ite Anda $dah dida+tar&an &e berbagai $ear-h engine tama* Apa&ah $eman(a $dah
$e!e$ai***. Tent $aja be!m* Anda har$ menda+tar&ann(a !agi &e 3ah''% 1pen Dire-t'r( 6r'je-t% dan
beberapa dire-t'r( be$ar !ainn(a* Ji&a $ebe!mn(a Anda berhadapan dengan $ear-h engine $pider% $e&arang
Anda berhadapan dengan edit'r man$ia* 2a!a ingin terda+tar% i&ti atran mere&a dan beri&an (ang terbai&
(ang bi$a di$aji&an )eb$ite Anda* Bagian $e!anjtn(a a&an membaha$ mengenai beberapa ha! (ang har$
Anda perhati&an $ebe!m menda+tar&an )eb$ite &e berbagai dire-t'r( tama*
Sbmit &e Dire-t'r(
3ah''A dan 1pen Dire-t'r( 6r'je-t ada!ah da dire&t'ri terbe$ar (ang $angat p'ten$ia! nt& menai&&an
tra++i- )eb$ite Anda* Ingat!ah bah)a dire&t'ri menggna&an edit'r man$ia nt& menerima )eb$ite*
Bagian ini a&an menje!a$&an apa $aja (ang per! diperhati&an $ebe!m menda+tar&an )eb$ite &e beberapa
dire-t'r( tama*
Anda $e&arang mng&in $dah mempn(ai d''r)a( page (ang $emprna dengan meta tag (ang terbai& di
dnia* Tetapi berhati,hati!ah% &arena (ang Anda hadapi b&an!ah $ebah $pider% tetapi $e'rang edit'r man$ia
$eperti Anda* Sema ta&ti& dan $trategi jit nt& $ear-h engine tida& a&an ber!a& di$ini* Apa (ang bi$a
Anda !a&&an***. Ba-a!ah tip$,tip$ diba)ah ini dan banding&an dengan &eadaan )eb$ite Anda (ang
$e&arang*
U$aha&an agar )eb$ite Anda mempn(ai d'main name $endiri* Sebagian be$ar )eb$ite (ang diterima di
3ah''A mema&ai t'p !e<e! d'main% dan han(a $ebagian &e-i! $aja (ang mema&ai $b d'main (ang dapat
diterima "&e-a!i )eb$ite Anda memi!i&i -'ntent (ang ni&#*
Nama d'main $ebai&n(a men-ermin&an i$i dari )eb$ite Anda*
6a$ti&an tida& ada br'&en !in&% gambar (ang ta& bi$a tampi!% ata ja<a$-ript err'r pada ha!aman )eb Anda*
Jangan men$bmit )eb$ite (ang be!m @>>\ $iap*
Setiap dire&t'ri memi!i&i atrann(a ma$ing,ma$ing* Ba-a!ah atran ter$ebt $ebe!mn(a agar )eb$ite Anda
terhindar dari di$&a!i+i&a$i*
Da+tar&an )eb$ite Anda pada &ateg'ri (ang tepat dan pa!ing $pe$i+i&* Lihat jga berapa )eb$ite (ang $dah
terda+tar pada &ateg'ri ter$ebt* U$aha&an!ah men-ari -ateg'r( dengan jm!ah pe$aing (ang pa!ing $edi&it*
Da+tar&an han(a ha!aman tama $aja* Ji&a Anda menda+tar&an ha!aman,ha!aman !ain (ang merpa&an $b
dari ha!aman tama &emng&inan be$ar a&an dit'!a&* 2e-a!i ha!aman ter$ebt benar,benar memi!i&i
-'ntent (ang !ang&a*
6erhati&an berapa !ama Anda bi$a men,$bmit !ang )eb$ite Anda "mi$a!n(a = b!an#* Ji&a be!m terda+tar%
!a&&an $bmit !ang da!am jang&a )a&t ter$ebt*
Di$ini &e$abaran Anda benar,benar diji* 3ah'' $etiap harin(a menerima penda+taran !ebih dari @> jta $it$*
Sedang&an (ang bi$a ditangani '!eh edit'rn(a $e&itar E $ampai @> per$enn(a $aja* Jadi ber$abar!ah nt&
me!a&&an $bmit !ang da!am jang&a )a&t (ang te!ah ditent&an* 2a!a ingin -epat% Anda bi$a mema&ai
+a$i!ita$ $bmi$$i'n e0pre$$* Dijamin )eb$ite Anda a&an dire<ie) da!am )a&t =,? hari* Tetapi 3ah''
mengena&an bia(a ]US =[[ per tahn% nt& +a$i!ita$ ini* Ini han(a jaminan agar )eb$ite Anda di,re<ie)
!ebih -epat% b&an jaminan nt& diterima* Saat ini 3ah'' me!a&&an re<ie) nt& $ebah )eb$ite bi$ni$
$etahn $e&a!i% dan nt& $e&a!i re<ie) di&ena&an bia(a ]US =[[* Memang b&an jm!ah (ang $edi&it%
apa!agi nt& per$ahaan,per$ahaan ber$&a!a &e-i!*
6er! diingat di$ini bah)a tjan 3ah'' menerima )eb$ite Anda b&an nt& membant menging&at&an
<i$it'r )eb$ite Anda% me!ain&an nt& me!eng&api &'!e&$i !in& pada dire&t'ri (ang mere&a mi!i&i* Jadi
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
pe!ang Anda nt& terda+tar a&an !ebih be$ar% ji&a Anda bi$a memberi&an )eb$ite dengan i$i (ang ni& dan
be!m ada:$edi&it jm!ahn(a pada dire&t'ri mere&a* Ada!ah $at angrah (ang $angat indah apabi!a )eb$ite
Anda bi$a diterima di 3ah'' $e-ara grati$ nt& $aat ini* B&an apa,apa% &arena ha! it menjadi $angat $!it
$eja& 3ah'' mengbah &ebija&ann(a di a&hir tahn =>>@* Apa!agi )eb$ite Anda terg'!'ng )eb$ite bi$ni$%
han(a $bmi$$i'n e0pre$$ (ang bi$a men(e!amat&an Anda*
Saat ini 3ah''A ma$ih merpa&an dire-t'r( (ang pa!ing ramai "meng$ai =E%K\ dari $e!rh penggna
internet# ditambah dengan 4''g!e $ebagai $ear-h engine de+a!t,n(a "menga$ai E\ dan ter$ mening&at#*
Tetapi ada ha! (ang menari&* A1L% A!ta<i$ta% Net$-ape% dan L(-'$% ji&a digabng meng$ai K>%E\ dari
penggna $ear-h engine di $e!rh dnia* 2eempat $ear-h engine ini mema&ai databa$e dari 1pen Dire-t'r(
6r'je-t "1D6#* Jadi a&an $angat mengntng&an ji&a )eb$ite Anda jga terda+tar di 1D6 "http:::dm'Y*'rg:#*
Dire&t'ri !ainn(a (ang jga har$ diperhati&an ada!ah L''&$mart* Databa$e L''&$mart dipa&ai $ebagai main
re$!t di MSN% A!ta<i$ta% E0-ite% dan iW'n* Tetapi Anda har$ menge!ar&an ang $ebe$ar ]US @K[ nt&
bi$a terda+tar di L''&Smart Net)'r&*
Tentang Lin& 6'p!arit(
Sete!ah men,$bmit )eb$ite Anda &e berbagai $ear-h engine dan dire-t'r( tama% apa (ang a&an Anda
!a&&an . Apa&ah $eman(a $dah -&p dan Anda tingga! menngg ha$i! . Tent $aja tida&* Sambi!
menngg ha$i! penda+taran (ang ber&i$ar antara = mingg hingga J b!an% Anda bi$a mening&at&an !in&
p'p!arit( dari )eb$ite Anda* Lin& p'p!arit( ada!ah ban(a&n(a )eb$ite !ain (ang mema$ang !in& mengarah
&e )eb$ite Anda* Sema&in be$ar !in& p'p!arit(% ma&a rang&ing )eb$ite Anda di $ear-h engine a&an $ema&in
tinggi*
4''g!e ada!ah $a!ah $at $ear-h engine (ang $angat memperhati&an !in& p'p!arit(* Bah&an +a&t'r ini bi$a
menjadi (ang pa!ing penting* Menrt ana!i$a 4''g!e% $ema&in ban(a& $at )eb$ite di,!in&% tent -'ntent,
n(a $ema&in bai& jga* Dan (ang !ebih i$time)a !agi% 4''g!e bi$a mengana!i$a darimana datangn(a !in&
ter$ebt* Lin& dari 3ah'' atapn 1pen Dire-t'r( a&an !ebih berarti daripada !in& dari )eb$ite !ain* Jadi
b&an han(a $e&edar jm!ah !in& (ang diperhitng&an% me!ain&an jga &a!ita$n(a* 1!eh 4''g!e% te&n'!'gi
ini di$ebt $ebagai 6ageRan&% (ait $at te&n'!'gi (ang bi$a memperhitng&an $eberapa bai& &a!ita$ dari
$ebah ha!aman )eb*
Se'rang teman pernah bertan(a &epada $a(a* Mengapa )eb$ite $a(a (ang de$ain(a $dah di'ptima!&an
nt& $ear-h engine% rang&ing,n(a tetap berada diba)ah )eb$ite pe$aing $a(a (ang de$ainn(a bia$a,bia$a
$aja . Ji&a Anda jga pn(a pertan(aan $eperti ini ja)abann(a ada!ah &arena perbedaan !in& p'p!arit(* Sa(a
$endiri pernah menjmpai $ebah )eb$ite (ang de$ainn(a han(a dipenhi gambar,gambar dan +!a$h% tetapi
bi$a mendd&i p'$i$i @> be$ar di 4''g!e* Sete!ah di$e!idi&i tern(ata ha!aman ini ban(a& di,!in& '!eh
)eb$ite !ain (ang jga memi!i&i !in& p'p!arit( tinggi*
Bagaimana -aran(a mengetahi be$arn(a !in& p'p!arit( $ebah )eb$ite . Mdah $aja% nt& g''g!e Anda
tingga! mema$&&an $inta& /!in&:)))*namad'main*-'m/ pada &'ta& $ear-h* Mi$a!n(a ji&a Anda ingin
mengetahi !in& p'p!arit( dari 6r'm'$i,)eb*-'m% Anda tingga! mema$&&an /!in&:)))*pr'm'$i,
)eb*-'m/* Sete!ah it 4''g!e a&an menampi!&an $e!rh )eb$ite (ang mema$ang !in& &e 6r'm'$i,
)eb*-'m% $ama $eperti ha$i! pen-arian bia$a* Tetapi ada -ara (ang jah !ebih mdah% (ait dengan
menggna&an t''!$ !in& p'p!arit( -he-&er* T''!$ ini ban(a& ter$edia di internet% dan $a!ah $at (ang pa!ing
$a(a $&a ada!ah Lin& 6'p!arit( Che-&er dari Mar&etLeap* Di$ini Anda bi$a men-ari jm!ah !in& p'p!arit(
)eb$ite Anda% $e&a!ig$ membanding&ann(a dengan )eb$ite pe$aing* B&an han(a g''g!e% tetapi re$!t dari
berbagai $ear-h engine tama*
Unt& mening&at&an !in& p'p!arit( Anda bi$a mengada&an barter !in& dengan )eb$ite !ain i$in(a ber&aitan
dengan )eb$ite Anda* Da!am ha! ini jangan!ah mera$a geng$i nt& bert&ar !in&* Anda bi$a menghbngi
)ebma$ter dari )eb$ite (ang a&an diaja& barter !in&* Ta)ar&an &epadan(a apa man+aat dari barter !in&% dan
&ata&an jga bah)a -'ntent dari )eb$ite Anda berhbngan dengan )eb$ite (ang dia mi!i&i* Cara !ainn(a
ada!ah rajin,rajin!ah mengi$i ge$tb''&* 6ada ge$tb''& ter$ebt% Anda bi$a menambah&an URL )eb$ite
Anda (ang tentn(a jga a&an menambah !in& p'p!arit(* Tapi ingat% jangan pernah me!a&&an $pamming*
5a$i!ita$ 4rati$ nt& 6r'm'$i Web Site
Berita dan I$ Septar Sear-h Engine* Bagian ini memat berbagai berita dan i$,i$ terbar di dnia $ear-h
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
engine* Beberapa pertan(aan (ang pa!ing $ering di!'ntar&an pengnjng 6r'm'$i,)eb*-'m jga a&an
dibaha$ pada bagian ini*
Barter !in&* Ji&a Anda $dah memba-a bagian !in& p'p!arit(% pa$ti!ah $dah mengerti apa man+aat dari
barter !in&* Se!ain nt& nt& mening&at&an jm!ah pengnjng% jga nt& menambah !in& p'p!arit( dari
)eb$ite Anda di berbagai $ear-h engine tama* Ji&a Anda memi!i&i:menge!'!a )eb$ite apa $aja% bai& it
per$'na! )eb% bi$ni$% mapn )eb$ite 'rgani$a$i% $a(a mengndang Anda nt& me!a&&an barter !in&
dengan 6r'm'$i,)eb*-'m*
6enda+taran grati$ &e E $ear-h engine $e&a!ig$* A!at ini a&an membant Anda nt& me!a&&an penda+taran
&e E $ear-h engine $e-ara -epat* Dengan $e&a!i mengi$i +'rm% data )eb$ite Anda bi$a digna&an nt&
me!a&&an penda+taran &e A!!TheWeb% 4''g!e% H'tb't U2% =&Cit(% dan What3'See& Net)'r&* Sebe!m
menggna&an $bmitter ini $a(a $aran&an agar Anda memba-a ha!aman tip$ nt& penda+taran &e $ear-h
engine% $pa(a ha$i!n(a bi$a !ebih 'ptima!*
I6 Dete-t'r* I6 "Internet 6r't'-'!# bi$a diibarat&an $ebagai &'de ni& (ang dimi!i&i $etiap $er<er:&'mpter
(ang terhbng &e Internet* 2'de ini berpa $ederetan ang&a dengan +'rmat tertent% mi$a!n(a =>=*@EK*=*=E*
Setiap $er<er memi!i&i n'mer I6 (ang berbeda,beda* Sama ha!n(a dengan $etiap pendd& Ind'ne$ia (ang
memi!i&i 2T6 dengan n'mer berbeda,beda* Saat ini hampir $ema $-ript $er<er $ide "$eperti 6H6% 6er!%
AS6#% bi$a digna&an nt& mendete&$i I6 dari pengnjng* Namn I6 ter$ebt han(a!ah berpa $ederetan
ang&a% bagaimana &ita bi$a mendapat&an in+'rma$i dari ang&a,ang&a ini . T''!$ I6 dete-t'r ini a&an
membant Anda nt& mendapat&an in+'rma$i &'de dan nama negara dari $ebah I6* Anda tingga!
mema$&&an n'mer I6 dengan +'rmat (ang benar% &emdian -'de dan nama negara a&an ditampi!&an
$ebagai 'tptn(a* T''!$ ini $angat membant apabi!a Anda ingin mengetahi dari negara mana pengnjng
)eb$ite Anda bera$a!% $edang&an )eb$ite Anda han(a bi$a mendete&$i n'mer I6,n(a $aja
6r'$edr 6enda+taran di Dire&t'ri "6'rta!# dan Sear-h Engine
Da!am t!i$an beri&t ini &ita a&an membaha$ tentang -ara menda+tar&an )eb$ite &ita di da bah p'rta!*
3ang $at ada!ah p'rta! interna$i'na! "tentn(a berbaha$a Inggri$# bernama DM1X ata 1pen Dire-t'r(
6r'je-t "1D6# (ang bera!amat di http:::dm'Y*'rg* Sedang (ang $atn(a ada!ah p'rta! na$i'na! ata p'rta!
Ind'ne$ia bernama Sear-h Ind'ne$ia (ang bera!amat di http:::)))*$ear-hind'ne$ia*-'m* Dengan menda+tar
di 1pen Dire-t'r( "DM1X#% bi!a penda+taran anda diterima% anda a&an $e&a!ig$ dima$&&an &e da!am
databa$e $ejm!ah $ear-h engine be$ar (ang ter&ena! $eperti: 4''g!e% A!ta<i$ta% A1L Sear-h% H'tB't% L(-'$
dan !ain,!ain* Sear-h engine 3ah''A pn $dah terma$& &arena 3ah''A jga menggna&an databa$e 4''g!e*
Menda+tar di 1pen Dire-t'r( "DM1X#
2ita m!ai dari 1pen Dire-t'r(* 6ergi!ah &e $it$ 1pen Dire-t'r( di http:::dm'Y*'rg* Tampi!an a)a!n(a
tampa& $ebagai beri&t:
2!i& !in& $gge$t URL (ang terdapat di bagian ata$ (ait di banner DM1X* Anda a&an diba)a &e ha!aman
(ang beri$i penje!a$an tentang peratran ata tata -ara mengaj&an penda+taran )eb$ite "H') t' $gge$t a
$ite t' the 'pen dire-t'r(#* Bi!a anda $edi&it "apa!agi ban(a&# bi$a berbaha$a Inggri$% ada bai&n(a anda
memba-a peratran ini dengan $a&$ama* Diantara p'int,p'int peratran (ang penting nt& &ita &etahi
ada!ah:
Jangan menda+tar dengan nama URL Redire-ti'n% gna&an URL a$!i dari )ebh'$ting anda*
2angan menda+tar )eb$ite (ang be!m $e!e$ai% ada ha!aman (ang $edang di&erja&an ata ada !in& (ang
terpt$*
Bi!a )eb$ite anda menggna&an baha$a tama $e!ain Baha$a Inggri$% ma&a da+tar&an!ah da!am &ateg'ri
W'r!d*
Sete!ah anda $etj dengan $ema peratran (ang dije!a$&an di ha!aman ini &emdian anda meng&!i& !in&
6r'-eed t' the 1pen Dire-t'r( h'me at dm'Y*'rg nt& mem!ai pr'$e$ penda+taran% anda a&an &emba!i
diba)a &e ha!aman depan "h'mepage# dari DM1X (ang tergambar di ata$* Di $it anda har$ men-ari dan
mene!$ri &ateg'ri dan $b &ateg'ri (ang pa!ing tepat "$e$ai# nt& )eb$ite (ang te!ah anda bat*
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
Mengingat p'int &etiga (ang &ami $ebt&an di ata$% bi!a $it$ anda berbaha$a Ind'ne$ia% ma&a &ateg'ri
pertama (ang har$ anda ma$&i ada!ah !in& W'r!d (ang terdapat pada deretan !in& terba)ah* 2!i& !in&
W'r!d*
Anda a&an diba)a &e da+tar $ejm!ah !in& baha$a,baha$a (ang terdapat di $e!rh dnia (ang dirnt $e$ai
abjad* Ang&a,ang&a (ang terdapat da!am tanda &rng di be!a&ang $etiap !in& &ateg'ri merpa&an jm!ah
)eb$ite (ang te!ah terda+tar da!am 1pen Dire-t'r( nt& &ateg'ri ter$ebt* Cari!ah !in& Ind'ne$ia* Sete!ah
&etem% &!i& !in& ter$ebt* Anda a&an diba)a &e ha!aman $e!anjtn(a (ang merpa&an hirar&i pertama dari
da+tar &ateg'ri da!am &e!'mp'& )eb$ite Ind'ne$ia*

Di $ini terdapat $ejm!ah &ateg'ri $eperti Be!anja% Berita% Bi$ni$% 2e$ehatan dan $eter$n(a* 6i!ih!ah &ateg'ri
(ang pa!ing $e$ai nt& )eb$ite anda* Da!am ha! ini &ami mengambi! )eb$ite ini "BatSite# $ebagai -'nt'h*
Unt& )eb$ite ini &ami memi!ih &ateg'ri 2'mpter* Sete!ah !in& 2'mpter di&!i&% &ita a&an diba)a &e
hirar&i &ateg'ri $e!anjtn(a (ang di da!amn(a terdapat $ejm!ah $b &ateg'ri $eperti Ha-&ing% Internet%
2'n$!tan% Lin0 dan $eter$n(a* Di $ini &ami meng&!i& !in& Internet (ang memba)a &ita &e hirar&i &ateg'ri
$e!anjtn(a* Sb &ateg'ri (ang terdapat di ha!aman ini antara !ain Berita 1n!ine% Chat% La(anan Emai!%
La(anan Web dan !ain,!ain $eperti tampa& di ba)ah ini:

Andai&ata $a(a ingin menda+tar&an )eb$ite $a(a $ampai di &ateg'ri Internet $aja% tida& mema$&i $b
&ateg'ri (ang !ebih da!am% ma&a $ampai di $ini $a(a !ang$ng meng&!i& !in& tambah URL (ang terdapat di
bagian ata$ "banner#* Bi!a anda ingin me!ihat $it$,$it$ mana $aja (ang te!ah terda+tar da!am &ateg'ri
"&e!'mp'&# Internet% g!ng!ah !a(ar &e ba)ah ma&a di $it anda a&an me!ihat da+tar nama,nama $it$%
!eng&ap dengan de$&rip$i "penje!a$an ring&a$# tentang i$i ma$ing,ma$ing $it$* Bi!a anda ingin menda+tar
da!am $b &ateg'ri (ang !ebih da!am% &!i& !in& $b &ateg'ri (ang dima&$d &emdian &!i& !in& tambah URL
$eperti (ang te!ah dije!a$&an tadi* Sete!ah anda meng&!i& !in& tambah URL ter$ebt% anda a&an diba)a &e
ha!aman Sbmit a $ite t' the 1pen Dire-t'r(* Di ha!aman ini anda diminta nt& mengi$i +'rm!ir regi$tra$i
"penda+taran#* Han(a ada empat &'ta& (ang har$ anda i$i dengan bai& dan benar*
Site URL* Ma$&&an a!amat "URL# )eb$ite anda* Ingat a!amat (ang dima&$d ada!ah a!amat a$!i dari
)ebh'$ting tempat anda men(impan +i!e,+i!e )eb$ite anda* Jadi jangan mema$&&an a!amat URL
Redire-ti'n*
Tit!e '+ Site* T!i$&an nama "jd!# dari )eb$ite anda* I$ti!ah /Tit!e/ ini $dah dije!a$&an pada pe!ajaran di
ha!aman @> (ang !a!*
Site De$-ripti'n* 2eti&&an raian ring&a$ tentang i$i )eb$ite anda* Inipn $dah dije!a$&an di ha!aman @>*
3'r E,Mai! Addre$$* T!i$&an a!amat emai! (ang anda mi!i&i*
Sete!ah $ema &'ta&,&'ta& i$ian te!ah anda i$i dengan benar% &!i& t'mb'! Sbmit (ang terdapat pada bagian
pa!ing ba)ah* Bi!a $ema i$ian anda benar% ma&a di ha!aman $e!anjtn(a anda a&an mendapati t!i$an
Sbmi$$i'n Re-ei<ed (ang men(ata&an bah)a pengajan penda+taran )eb$ite anda te!ah diterima* Ha! ini
b&an berarti )eb$ite anda te!ah diterima dan a&an dima$&&an da!am dire&t'ri DM1X* 2ita ma$ih har$
menngg beberapa mingg ata b!an nt& pr'$e$ <eri+i&a$i* Itpn bi!a )eb$ite (ang anda aj&an
dianggap memenhi $(arat dan !a(a& dima$&&an da!am dire&t'ri DM1X* Web$ite (ang bia$an(a dianggap
!a(a& pajang ada!ah )eb$ite (ang tida& memi!i&i -a-at $eri$ dari $egi te&ni& pembatan )eb$ite $erta
memi!i&i i$i "-'ntent# (ang -&p &ha$ &arena mengandng materi ata in+'rma$i (ang ma$ih jarang
ditem&an di internet*
Menda+tar di 6'rta! Sear-hInd'ne$ia
6'rta! Ser-hInd'ne$ia memi!i&i &'n$ep penda+taran )eb$ite (ang mirip dengan 1pen Dire-'tr(* B&a $it$
Sear-hInd'ne$ia di http:::)))*$ear-hind'ne$ia*-'m* Tampi!an a)a!n(a tampa& $ebagai beri&t:
6ada &'!'m men $ebe!ah &iri di ba)ah jd! $iT''!$ terdapat !in& nt& mengaj&an penda+taran $it$ (ait
Tambah URL* 2!i& ini ma&a anda a&an diba)a pada ha!aman berjd! Tambah URL% bagaimana -aran(a.
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*
Materi TIK XII SMANSA_JOE
Ha! ini beri$i penje!a$an tentang tata -ara menda+tar di Sear-hInd'ne$ia* Bi!a $dah paham% &!i& !in& &emba!i
&e ha!aman a)a!* 2arena di ha!aman a)a! tadi% anda di$rh memi!ih &ateg'ri ata &e!'mp'& (ang pa$
nt& $it$ anda* 6er$i$ $eperti penda+taran di DM1X% &an. Te!$ri!ah !in&,!in& &ateg'ri (ang ter$edia
"$eperti di DM1X# nt& men-ari &ateg'ri (ang -'-'& nt& $it$ anda*
Sete!ah anda mema$&i ha!aman &ateg'ri (ang anda pi!ih% &!i& !in& Tambah URL (ang terdapat pada &'!'m
men $ebe!ah &iri $eperti tampa& pada gambar di ata$* Bar!ah anda di ba)ah &e +'rm!ir penda+taran $eperti
(ang tampa& di ba)ah ini:
Ada empat &'ta& (ang har$ anda i$i (ait Jd! "Tit!e#% URL% De$&rip$i "De$-ripti'n#% Nama 2'nta& "i$i
dengan nama anda# dan Emai! 2'ta& "i$i dengan a!amat emai! anda#* 2eempat item (ang har$ dii$i it
tentn(a $dah $angat je!a$ bagi anda &arena te!ah pernah dije!a$&an* Sete!ah anda mengi$i $eman(a dengan
benar% &!i& t'mb'! 2irim* Se!e$ai!ah $dah tga$ anda* Tampa& ha!aman $e!anjtn(a beri$i -apan terima
&a$ih dan data,data (ang te!ah anda ma$&&an tadi* Se&arang anda tingga! menngg berita dari
Sear-hInd'ne$ia (ang a&an di&irim&an &e emai! anda bi!a )eb$ite anda diterima nt& dima$&&an da!am
dire&t'ri*
Han(a nt& $i$)a,$i$)i $man$a;J'e:!ab&'m:N'< =>>?*

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->