Anda di halaman 1dari 21

Membuat Desain Website Berbasis HTML Dengan Notepad++ Pengenalan Tag Pada HTML Dalam HTML tag merupakan

code sekaligus perintah dimana kita dapat mengatur tampilan yang kita inginkan. Tag pada HTML selalu dia ali dengan !"# dan ditutup dengan !$"# dimana " adalah perintah dari apa yang kita inginkan. % Da&tar Tag Pada HTML 'L'M'N D()(* +enis Dokumen !HTML#!$HTML# ,terdapat pada a al dan akhir dari &ile HTML+udul !T.TL'#!$T.TL'# ,harus selalu terdapat pada mukadimahMukadimah ,Header!H'(D#!$H'(D# ,keterangan umum/ seperti 0udul dsb.Batang Tubuh !B1D2#!$B1D2# ,isi dari halaman HTML31*M(T T(MP.L(N Huru& Tebal !B#!$B# ,BoldHuru& Miring !.#!$.# ,.talic4aris Ba ah !5#!$5# ,5nderline 6 0arang digunakan*ata Tengah !7'NT'*#!$7'NT'*# ,7enter 6 berlaku untuk teks maupun gambarHuru& 8edip !BL.N8#!$BL.N8# ,Blinking 6 tag terlucu sampai kini5kuran Huru& !31NT ).9':;#!$31NT# ,3ont )i<e 6 boleh diisi dari = sampai >Warna Huru& !31NT 71L1*:?@AAAAAA?#!$31NT# Pilih +enis Huru& !31NT 3(7':?BBB?#!$31NT# P'M.)(H Paragra&

!P#!$P# ,tag penutup seringkali tak diperlukan(lign Te"t !P (L.4N:L'3TC7'NT'*C*.4HT#!$P# Pndah Baris !B*# ,pindah ke baris berikut4aris Datar !H*# ,Hori<ontal *ulePenataan Letak 4aris !H* (L.4N:L'3TC*.4HTC7'NT'*# Tebal 4aris !H* ).9':;# ,dalam satuan pi"elLebar 4aris !H* W.DTH:;# ,dalam satuan pi"elLebar 4aris Persentasi !H* W.DTH:?D?# ,dalam persentasi terhadap lebar halamanL(T(* B'L(8(N4 D(N W(*N( Latar Belakang 4ambar !B1D2 B(784*15ND:?5*L?# ,Tiled BackgroundWarna Latar Belakang !B1D2 B471L1*:?@AAAAAA? ,Background 7olor 6 urutanE merah$hi0au$biruWarna Huru& Teks !B1D2 T'FT:?@AAAAAA?# T(B'L *ancangan Tabel !T(BL'#!$T(BL'# 4aris Batas Tabel !T(BL' B1*D'*:;#!$T(BL'# Lebar Tabel !T(BL' W.DTH:;# ,dalam satuan pi"elLebar Tabel Persentasi !T(BL' W.DTH:?D?# ,dalam satuan persen terhadap lebar halamanBaris dalam Tabel !T*#!$T*#

Penataan Letak Baris !T* (L.4N:L'3TC*.4HTC 7'NT'*CM.DDL'CB1TT1M G(L.4N:T1PCB1TT1MCM.DDL'# )el dalam Tabel !TD#!$TD# ,harus ada dalam setiap baris tabelPenataan Letak )el !TD (L.4N:L'3TC*.4HTC 7'NT'*CM.DDL'CB1TT1M G(L.4N:T1PCB1TT1MCM.DDL'# 8epala Tabel !TH#!$TH# ,Table Header 6 seperti data dengan Bold dan 7enterPenataan Letak 8epala Tabel !TH (L.4N:L'3TC*.4HTC 7'NT'*CM.DDL'CB1TT1M G(L.4N:T1PCB1TT1MCM.DDL'# Warna 8epala Tabel !TH B471L1*:?@AAAAAA?#

(.

Dasar dasar HTML

=. Membuat 0udul tab dalam halaman eb/ buka notepad++ terlebih dahulu/ kemudian ketikan code diba ah iniE !html# !head# !title# My 3irst HTML Pro0ect !$title# !$head# !body B471L1*:H4reenI T'FT:H*edI# W'L71M' T1 M2 W'B).T' !$body# !body bgcolor:I@JJ&&JJI# !$html# Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ maka hasilnya akan seperti pada gambar = berikutE 4ambar =. +udul Tab Halaman K. Mengatur paragra& te"s/ buka notepad++ kemudin ketikan code diba ah iniE

!html# !head# !title# Tag P/ Br dan Hr !$title# !$head# !body# !p#.ni adalah paragra& pertama/ yang berisi L baris. Baris satu/ dua dan tiga. !br#!br#!$p#

!p#.ni adalah paragra& kerdua/ yang berisi garis hori<ontal!$p# !hr# .ni adalah garis hori<ontal. !$body# !body bgcolor:I@JJ&&JJI# !$html# Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ maka hasilnya akan seperti pada gambar K berikutE 4ambar K. Mengatur Paragra& L. Mengatur ukuran huru&/ buka notepad++/ kemudian ketikan code diba ah iniE

!html# !head# !title# Tag Heading !$title# !$head# !body# !h=# Heading = !$h=# !hK# Heading K !$hK# !hL# Heading L !$hL# !hM# Heading M !$hM# !hN# Heading N !$hN# !hO# Heading O !$hO# !$body# !body bgcolor:I@JJ&&JJI# !$html# Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ maka hasilnya akan seperti pada gambar L berikutE 4ambar L. 5kuran Huru& M. Mengatur &ormat te"s/ Buka notepad++/ kemudian ketikan code diba ah iniE

!html# !head# !title#&ormat tulisan!$titele# !$head# !body# teks normal !br# !small# teks small !$small#!br# !big# teks big!$big#!br# !b# teks tebal !$b#!br# !i# teks miring !$i#!br# !u# teks bergaris ba ah !$u#!br# 7ontoh superscript E " !sup#K!$sup#!br# 7ontoh subscript E H!sub#K!$sub#1!br# !strike# .ni teks tercoret !$strike#!br# !&ont si<e : N &ace : Perdana# menggunakan tag &ont

!$&ont# !$body# !body B471L1* :?@JJ33JJ?# !$html# Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ maka hasilnya akan seperti pada gambar M berikutE 4ambar M. 3ormat tulisan N. Membuat &rom komentar/ buka notepad++/ kemudian ketikan code diba ah iniE

!html# !head# !title# 3rom komentar !$title# !$head# !body# !table# !tr# !tdcolspan:?L?#QnbspR!$td#!$tr#!tr# !td colspan:?L?#!hL#)ilahkan Berkomentar E !$hL#!$td# !$tr# !tr# !td#Nama!$td# !td#E!$td# !td#!input type:te"t name:?nama?#!$td# !$tr# !tr# !td#'mail!$td# !td#E!$td# !td#!input type:te"t name:?email?#!$td# !$tr# !tr# !td Palign:top#8omentar!$td# !td Palign:top#E!$td# !td#!te"tarea name:?komentar? ro s:O idth:KJJ#!$te"tarea#!$td# !$tr# !tr# !td colspan:?L?#!input type:submit name:?submit? Palue:submit#!$td# !$tr# !$table# !$body# !body B471L1* :?@JJ33JJ?# !$html# Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ maka hasilnya akan seperti pada gambar N berikutE 4ambar N. 3rom komentar

O.

Mengatur kolom/ buka notepad++ kemudian ketikan code diba ah iniE

!html# !head# !title# arna6 arna!$title# !$head# !body# !table idth:?LJJ? border:?=?# !tr# !td colspan:?L? align:?center?# arna6 arna !$td# !$tr# !tr# !td bgcolor:?@JJ33JJ?#Hi0au!$td# !td bgcolor:?@3333JJ?#8uning!$td# !td bgcolor:?@33JJJJ?#Merah !$td# !$tr# !tr# !td bgcolor:?@SSSSSS?#(bu6abu!$td# !td bgcolor:?@JJJJ33?#Biru!$td# !td bgcolor:?@33SSJJ?#1range!$td# !$tr# !tr# !td bgcolor:?@OOLLJJ?#7okelat!$td# !td bgcolor:?@LLSS77?#Biru muda!$td# !td bgcolor:?@33JJ33?#Merah muda!$td# !$tr# !$table# !$body# !body B471L1* :?@JJ33JJ?# !$html# Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ maka hasilnya akan seperti pada gambar O berikutE 4ambar O. Tabel B. Hyperlink

=. Membuat hyperlink kehalaman eb lain/ buka notepad++/ kemudian ketikan atau copy sa0a code diba ah iniE !html# !head# !title# +udul tab !$title# !$head# !body# .ni hyperlink ke ordpress !a hre&:?httpE$$ . ordpress.com$? title:?Masu ordpress?# Wordpress !$a# !br#8lik dan masuk ke yahoo!a hre&:?httpE$$ .yahoo.com$? title:?Masuk yahoo?# 2ahoo !$a# !br#Masuk ke &acebook anda

!a hre&:?httpE$$httpE$$ .&acebook.com$? title:?Masuk ke &acebook?# 3acebook !$a# !$body# !body B471L1* :?@JJ33JJ?# !$html# Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ maka hasilnya akan seperti pada gambar > berikutE 4ambar > link halaman eb lain K. Membuat hyperlink antar bagian dalam eb/ buka notepad++/ kemudian ketikan atau copy sa0a code diba ah iniE !html# !head# !title# +udul tab !$title# !$head# !body# !ahre&:?&ileE$$$7E$5sers$71MP(T$Documents$HTML.=$desainDKJ eb$home.html? title:?ke *umah?#!img src:?&ileE$$$7E$5sers$71MP(T$Documents$HTML.=$gambar$4raphic=.0pg? border:?J? idth:?UJ? height:?LJ?$#!$a# !ahre&:?&ileE$$$7E$5sers$71MP(T$Documents$HTML.=$desainDKJ eb$pro&il.html? title:?Pro&ilku?#!img src:?&ileE$$$7E$5sers$71MP(T$Documents$HTML.=$gambar$pro&il.0pg? border:?J? idth:?=JJ? height:?LJ?$#!$a# !ahre&:?&ileE$$$7E$5sers$71MP(T$Documents$HTML.=$htmlVcolors.html? title:?8ode Warna Pada HTML?#!img src:?&ileE$$$7E$5sers$71MP(T$Documents$HTML.=$gambar$8ode DKJWarna.0pg? border:?J? idth:?=NJ? height:?LJ?$#!$a# !a hre&:?&ileE$$$7E$5sers$71MP(T$Documents$HTML.=$kumpulanDKJpuisi.html? title:?kumpulan 8ata6kata Mutiara?#!img src:?&ileE$$$7E$5sers$71MP(T$Documents$HTML.=$gambar$kataDKJkata.0pg? border:?J? idth:?=JJ? height:?LJ?$#!$a# !$body# !body B471L1* :?@JJ33JJ?# !$html# Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ maka hasilnya akan seperti pada gambar U berikutE 4ambar U. Link (ntar Bagian Dalam Web 7. Membuat Website )ederhana

=. Membuat halaman login pada ebsite/ buka notepad++/ kemudin ketikan atau copy sa0a code diba ah iniE !html# !head# !title#login eb!$title#!link rel:WiconW hre&:Wgambar$B.pngW# !$head# !body#

!p align:?center?# !&ont si<e:?O? color:?@33OOJJ? # )ilahkan mengisi data yang ada di ba ah untuk masuk ke ebsite saya E-!$&ont# !$p# !table align:?center?# !td#!&orm method:?post? action:?home.html?#!label#!&ont color:?@33OOJJ?#Nama (ndaE!$label# !br# !input type:?te"t? name:?nama? Palue:??#!$br# !label#!&ont color:?@33OOJJ?#'mail (tau teleponE!$label# !br# !input type:?te"t? name:?'mail? Palue:??#!$br#!label#!&ont color:?@33OOJJ?#(lamatE!$label# !br# !input type:?te"t? name:?(lamat? Galue:??#!$br# !label#!&ont color:?@33OOJJ?#Tanggal Lahir !$label# !br# !select name:?select?# !option Palue:?=?#=!$option# !option Palue:?K?#K!$option# !option Palue:?L?#L!$option# !option Palue:?M?#M!$option# !option Palue:?N?#N!$option# !option Palue:?O?#O!$option# !option Palue:?>?#>!$option# !option Palue:?U?#U!$option# !option Palue:?S?#S!$option# !option Palue:?=J?#=J!$option# !option Palue:?==?#==!$option# !option Palue:?=K?#=K!$option# !option Palue:?=L?#=L!$option# !option Palue:?=M?#=M!$option# !option Palue:?=N?#=N!$option# !option Palue:?=O?#=O!$option# !option Palue:?=>?#=>!$option# !option Palue:?=U?#=U!$option# !option Palue:?=S?#=S!$option# !option Palue:?KJ?#KJ!$option# !option Palue:?K=?#K=!$option# !option Palue:?KK?#KK!$option# !option Palue:?KL?#KL!$option# !option Palue:?KM?#KM!$option# !option Palue:?KN?#KN!$option# !option Palue:?KO?#KO!$option# !option Palue:?K>?#K>!$option# !option Palue:?KU?#KU!$option# !option Palue:?KS?#KS!$option# !option Palue:?LJ?#LJ!$option# !option Palue:?L=?#L=!$option# !$select# !select name:?selectK?# !option Palue:?=?#+anuari!$option# !option Palue:?K?#3ebruari!$option#

!option Palue:?L?#Maret!$option# !option Palue:?M?#(pril!$option# !option Palue:?N?#Mei!$option# !option Palue:?O?#+uni!$option# !option Palue:?>?#+uli!$option# !option Palue:?U?#(gustus!$option# !option Palue:?S?#)eptember!$option# !option Palue:?=J?#1ktober!$option# !option Palue:?==?#Nopember!$option# !option Palue:?=K?#Desember!$option# !$select# !select name:?selectL?# !option Palue:?KJJ=?#=SUU!$option# !option Palue:?KJJK?#=SUS!$option# !option Palue:?KJJL?#=SSJ!$option# !option Palue:?KJJM?#=SS=!$option# !option Palue:?KJJN?#=SSK!$option# !option Palue:?KJJO?#=SSL!$option# !option Palue:?KJJ>?#=SSM!$option# !option Palue:?KJJU?#=SSN!$option# !option Palue:?KJJS?#=SSO!$option# !$select#!$br# !label#!&ont color:?@33OOJJ?#+enis 8elamin !$label# !br#!&ont color:?red?#Pria !&ont color:?@7733JJ?#Wanita!$br# !input type:?submit? Galue:?Masuk?# !$td# !$table# !body background:?gambar$aaa.png?# !'MB'D )*7:?MPL$4reendayDKJ6DKJ.DKJ alkDKJ(lone.s &? (5T1)T(*T:?T*5'? L11P:?T*5'? W.DTH:?=? H'.4HT:?=? (L.4N:?7'NT'*?#!$'MB'D# !p align:?center?# !&ont si<e:?=? color:?@33OOJJ? #!BL.N8#..... Dalam penggisiannya harus 0u0ur yaa/ 0angan boWonk E- ...... !$body# !$html# Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ background dapat anda ganti sendiri sesuai dengan kesukaan anda. Hasilnya seperti pada gambar S berikutE 4ambar S. Halaman login K. iniE Membuat halaman a al/ buka notepad++/ kemudian ketikan atau copy sa0a code diba ah

!html# !head# !title#Home!$title# !link rel:WiconW hre&:Wgambar$alien.icoW# !$head#

!body# !center#!table idth:W=JJJW height:WMJJW border:?J? background:Wgambar$"".0pgW cellpadding:?J? cellspacing:?!tr# !td colspan:?K? color:? hite? align:WcenterW# !img src:?gambar$=.png? idth:?=JJJ? height:?MJJ?# !$td# !$tr# !tr height:?NJ?#!td colspan:WKW background:Wgambar$<<.0pgW align:Wle&tW height:?KJ?# !p#!ul#!ul#!le&t#!BL.N8#!b#!&ont color:?@JJ7733? si<e:?N?#!img src:Wgambar$halo.gi&W border:WJW idth:WMJW height:WMJW#X )elamat datang di ebsite pertama saya X !img src:Wgambar$halo.gi&W border:WJW idth:WMJW height:WMJW#!$&ont#!$BL.N8#!$b#!$ul#!$ul#!$p#!$le&t# !le&t# !ul#!a hre&:?home.html? title:?ke *umah?#!img src:Wgambar$H1M'.0pgW B1*D'*:WJW idth:WUJW height:WLJW#!$a# !a hre&:?httpE$$mpLskull.com$? title:?MPL?#!img src:Wgambar$MPL.0pgW B1*D'*:WJW idth:WUJW height:WLJW#!$&ont#!$a# !a hre&:?pro&ilku.html? title:?Pro&ilku?#!img src:Wgambar$P*13.L.0pgW B1*D'*:WJW idth:WSJW height:WLJW#!$a# !a hre&:?htmlVcolors.html? title:?8ode Warna Pada HTML?#!img src:Wgambar$81D' W(*N(.0pgW B1*D'*:WJW idth:W=KJW height:WLJW#!$a# !a hre&:?httpE$$ .gametop.com$? title:?Tempat 4ame?#!img src:Wgambar$4(M'.0pgW B1*D'*:WJW idth:WUJW height:WLJW#!$a# !a hre&:?httpE$$ . Lschools.com$html$htmlVintro.asp? title:?Tutorial HTML. Lschools.com?#!img src:Wgambar$T5T1*.(L.0pgW B1*D'*:WJW idth:WSJW height:WLJW#!$a# !a hre&:?kumpulanDKJpuisi.html? title:?kumpulan 8ata6kata Mutiara?#!img src:Wgambar$8(T(.0pgW B1*D'*:WJW idth:W=JJW height:WLJW#!$a# !$ul#!$le&t# !$td# !$tr# !tr# !td idth:W>SOW height:W>JJW background:Wgambar$<<.0pgW Palign:WtopW # !p#!&ont color:?yello ? si<e:?N?#XDasar6dasar Membuat Website Berbasis HTMLX!$&ont# !p align:?li&t?#!&ont color:? hite?#Nah/ anda pasti sudah banyak melihat tutorial tutorial HTML yang ada di ilmu ebsite.com. Tapi/ masih ada = kekurangan/ tutorial HTML untuk tingkat pemula;;; !br $# Nggak ada kan;;; nah/ maka dari itu/ saya/ *ian hidayat/ akan men0elaskan bagaimana ebsite di bangun menggunakan tag6tag HTML/ dan ini penulis sediakan untuk pemula. Tapi sebelum itu/; ada yang perlu diketahui.!br $# !br $# !a name:WmoreW#!$a#!br $# !span id:?more6>=K?#!$span#!br $# !b#tag QltRQgtR!$b#!br $# digunakan untuk menuliskan sintak/ ada dua 0enis/ yaitu tag container dan tag biasa.!br $# Tag container adalah tag yang berisi te"t yang akan ditampilkan setelah tag ditutup. 7ontohE QltRtdQgtR te"t yang ditampilkan QltR$tdQgtR.!br $# Tag biasa/ yahhQ@UKLJRtag a0a/ contoh QltRB*QgtR ,break-. QltRbrQgtR kaga perlu ditutup oleh tag QltR$brQgtR/ tapi 0ika sintak yang digunakan tag container/ contohE QltRh=QgtR/ yah mesti ditutup dengan QltR$h=QgtR.!br $#

Tag yang digunakan untuk mengakhiri sintak punya karakter $,slash- sebelum sintaknya/ contohnyaE QltRtdQgtR QltR$tdQgtR!br $# 8ita 0uga dapat mengetik attribut di dalam sebuah tag/ contohE QltRbody bgcolor:Q@UKK=RredQ@UKK=RQgtR QltR$bodyQgtR. atau QltRinput type:Q@UKK=Rte"tQ@UKK=RQgtR.!br $# !b#L(N48(H =!$b#!br $# !ul# !li#M'MB58( N1T'P(D.!$li# !$ul# !b#L(N48(H K!$b# !br $# !ul# !li#M'N4'T.88(N ).NT(8$)2NT(F.!$li# !$ul# Berikut ini adalah synta" dasar yang membentuk suatu HTML.!br $# pertama/ ketikkan!br $#QltRhtmlQgtR!br $# tekan enter/ kemudian ketik!br $#QltRheadQgtR!br $#Dalam container head/ kita bisa mengetikan beberapa sintak/ tapi yangpaling penting 0angan lupa mengetikan sintak QltRtitleQgtR 0udul halaman eb QltR$titleQgtR. 5ntuk sintak lain nanti sa0a.!br $#)ekarang ketikkan sintak title tadi/ 0adi seperti iniE!br $#QltRheadQgtR QltRtitleQgtR 0udul halaman eb QltR$titleQgtR QltR$headQgtR!br $# 8emudian ketikkan QltRbodyQgtR. Tag body merupakan badan$tubuh$inti dari halaman eb/ tampilan eb yang kita lihat itu berasal dari QltRbodyQgtR.!br $#Body tuh tag container/ 0adi mesti ditutup. Hasil sampai sekarangE!br $# QltRhtmlQgtR!br $#QltRheadQgtR!br $#QltRtitleQgtR +udul Halaman Web QltR$titleQgtR!br $# QltR$headQgtR!br $# QltRbodyQgtR!br $# QltR$bodyQgtR!br $#;!br $# QnbspR !br $# !br $#)elan0utnya bagaimana cara menampilkan tulisan ke dalam HTML;;; 8etikan sembarang te"t ke dalam tag body/ contohnya seperti ini E!br $#QltRbodyQgtR!br $#7ontoh te"t yang ditampilin di halaman eb/ ByE *ian Hidayat!br $#QltR$bodyQgtR!br $#terus/ 0ika sudah/ ketikkan QltR$htmlQgtR/ script lengkapnya seperti ini E!br $#QltRhtmlQgtR!br $#QltRheadQgtR!br $# QltRtitleQgtR +udul Halaman Web QltR$titleQgtR!br $# QltR$headQgtR!br $#QltRbodyQgtR!br $#7ontoh te"t yang ditampilkan di halaman eb/ ByE *ian Hidayat!br $# QltR$bodyQgtR!br $# QltR$htmlQgtR!br $# kalo udah/ sekarang saPe dengan nama dasarHTML.!br $# kalo udah disaPe/ buka data yang tadi di saPe.!br $#;!br $#Pada bagian ini/ kalian mungkin akan bingun/g karena html yang tadi disaPe dan cape cape diketikkan/ ternyata gagal. Malah yang terbuka adalah &ile di notepad$ ordpad. tau kenapa;;;!br $#8arena ketika men6saPe/ &ile tersebut di saPe dalem bentuk TFT/ bukan HTML. Nah cara men6saPe dalem bentuk HTML yaituE ketika mensaPe/ ada satu tempat di ba ah tempat kita menulis nama &ile/; yakni )aPe (s Type. )ilahkan ubah dari te"t document,B.t"t- men0adi all &iles/ ketika menulis nama/ di akhir di berikan e"tensi .html/ contohE dasarHTML.html. !diP style:WclearE bothRW#!$diP# !$te"tarea# !&ont:?le&t? &orm method:?post? action:?&ileE$$$7E$5sers$71MP(T$Documents$HTML.=$ne DKJM.html?# !input type:?hidden? name:?&riend.D? Palue:?=KLMNO?# !te"tarea name:?&Vcomments? cols:?MJ? ro s:?N??# 'nter your comments here...

!$te"tarea#!br# !input type:?submit? Palue:?coments? $# !input type:?reset? Palue:?*eset? $# !$&orm# !$td# !td idth:WKJJW height:W>JJW bgcolor:WW Palign:WtopW# !table align:?le&t? idth:WKJJW border:WJW bgcolor:WW bordercolor:WgreenW# !tr align:WcenterW# !td#!p#!a hre&:?httpE$$ .&acebook.com$? target:?Vblank? title:?Masuk ke 3acebook?# !img src:?gambar$&acebook.ico? border:?J? idth:?SJ? height:?>J?$#!$a#!$td# !td#!p#!a hre&:?httpE$$ .youtube.com$? target:?Vblank? title:?Masuk ke youtube?# !img src:?gambar$youtube.ico? border:?J? idth:?SJ? height:?>J?$#!$a#!td# !$p# !$tr# !$table# !table align:Wle&tW idth:WKJJW border:WJW bgcolor:WW bordercolor:WgreenW# !center# !td idth:?KJJ? Palign:?top?#!&ont color:?@3333JJ? &ace:?7ooper )td Black?# !b#T5T1*.(L HTML!$b# !ul# !li#!a hre&:?buatDKJayatDKJbergerak.html? title:Wmembuat tulisan bergerakW#!&ont color:W@JJJJ33W &ace:WTimes Ne *omanW#7ara membuat tulisan bergerak!$a#!$&ont#!$li# !li#!a hre&:WMenbuatDKJ&romDKJkomentar.htmlW title:Wmembuat &rom komentarW#!&ont color:W@JJJJ33W &ace:WTimes Ne *omanW#7ara membuat &rom komentar!$a#!$&ont#!$li# !li#!a hre&:WMembuatDKJlogin.htmlW title:Wmembuat halaman loginW#!&ont color:W@JJJJ33W &ace:WTimes Ne *omanW#7ara membuat halaman login!$a#!$&ont#!$li# !$ul#!$&ont#!$table#!$td# !$tr# !tr height:?NJ?# s!td colspan:WKWbackground:Wgambar$<<.0pgW#!center#!b#!marYuee#!&ont &ace:?7ooper )td Black? color:?@JJ7733? si<e:?>?#X Meskipun banyak kendala dalam pembuatan desain eb/ tapi tetap berusaha untuk mencapai hasil yang terbaik X!$&ont#!$b#!$marYuee#!$center#!$td#!$tr# !$table#!diP style:?positionE &i"edR bottomE Jp"R le&tE =Jp"R idthE=LJp"RheightE=OJp"R?# !img border:?J? src:?gambar$t itter.ico? title:?&ollo my t itter? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$diP# !diP style:?positionE &i"edR bottomE Jp"R rightE Jp"R idthE=JJp"RheightE=JJp"R?#!a hre&:W@topW# !img border:?J? src:?gambar$top.png? idth:WNJW height:WNJW title:?8embali ke atas? alt:?animasi bergerak gi&? $#!$a#!small#!center# !$diP# !diP style:?positionE &i"edR T1PE Jp"R rightE =Jp"R idthE=LJp"RheightE=OJp"R?#!a hre&:Wlogin.htmlW# !img border:?J? src:?gambar$c.png? idth:WMJW height:WMJW title:?8embali ke login? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$diP# !body background:Wgambar$yy.0pgW#!$body# !'MB'D )*7:?MPL$.DKJWonDK>tDKJ)eeDKJ2ouDKJTonightDKUPart=DKS.s &? (5T1)T(*T:?T*5'? L11P:?T*5'? W.DTH:?=? H'.4HT:?=? (L.4N:?7'NT'*?#!$'MB'D#!$html#

Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ anda bisa menganti gambar6gambarnya sesuai yang anda inginkan/ dan anda 0uga dapat menganti background dan animasi yang sesuai dengan anda. Hasilnya akan seperti pada gambar =J berikutE 4ambar =J. Halaman a al L. Membuat data pribadi atau pro&il/ buka notepad++/ kemudian ketikan atau copy sa0a code diba ah iniE !html# !head# !title#Pro&ilku!$title# !link rel:WiconW hre&:Wgambar$alien.icoW# !$head# !body# !center#!table idth:W=JJJW height:WMJJW border:?J? background:Wgambar$"".0pgW cellpadding:?J? cellspacing:?KJ? # !tr# !td colspan:?K? color:? hite? align:WcenterW# !img src:?gambar$=.png? idth:?=JJJ? height:?MJJ?# !$td# !$tr# !tr height:?NJ?# !td colspan:WKW background:Wgambar$<<.0pgW align:Wle&tW height:?KJ?# !p#!ul#!ul#!le&t#!BL.N8#!b#!&ont color:?@JJ7733? si<e:?N?#!img src:Wgambar$halo.gi&W border:WJW idth:WMJW height:WMJW#X )elamat datang di ebsite pertama saya X !img src:Wgambar$halo.gi&W border:WJW idth:WMJW height:WMJW#!$&ont#!$BL.N8#!$b#!$ul#!$ul#!$p#!$le&t# !le&t#!ul#!a hre&:?home.html? title:?ke *umah?#!img src:Wgambar$H1M'.0pgW B1*D'*:WJW idth:WUJW height:WLJW#!$a# !a hre&:?httpE$$mpLskull.com$? title:?MPL?#!img src:Wgambar$MPL.0pgW B1*D'*:WJW idth:WUJW height:WLJW#!$&ont#!$a# !a hre&:?pro&ilku.html? title:?Pro&ilku?#!img src:Wgambar$P*13.L.0pgW B1*D'*:WJW idth:WSJW height:WLJW#!$a# !a hre&:?htmlVcolors.html? title:?8ode Warna Pada HTML?#!img src:Wgambar$81D' W(*N(.0pgW B1*D'*:WJW idth:W=KJW height:WLJW#!$a# !a hre&:?httpE$$ .gametop.com$? title:?Tempat 4ame?#!img src:Wgambar$4(M'.0pgW B1*D'*:WJW idth:WUJW height:WLJW#!$a# !a hre&:?httpE$$ . Lschools.com$html$htmlVintro.asp? title:?Tutorial HTML. Lschools.com?#!img src:Wgambar$T5T1*.(L.0pgW B1*D'*:WJW idth:WSJW height:WLJW#!$a# !a hre&:?kumpulanDKJpuisi.html? title:?kumpulan 8ata6kata Mutiara?#!img src:Wgambar$8(T(.0pgW B1*D'*:WJW idth:W=JJW height:WLJW#!$a#!$ul#!$le&t#!$td#!$tr# !tr#!td idth:W>SOW height:W>JJW background:Wgambar$<<.0pgW Palign:WtopW # !p#!table align:?center? border:?J? bgcolor:?? cellpadding:?J? cellspacing:?U? # !td#!tr#!td colspan:?K? align:?center?#!&ont &ace:?Bauhaus SL? si<e:?U? color:?@JJOO33?#!b#P*13.L85!$b#!$td#!$tr# !tr#!br#!table#

!P align:?center?#!&ont color:?@JJ3333?# !img src:?gambar$rian.+P4? border:?>? idth:?KNJ? height:?LJJ?# !tr#!td align:?right?#!&ont si<e:?N? color:?@JJ3333?#!b#!p align:Wle&tW#N(M(!$p#!$b#!$td# !td#!&ont si<e:?N?color:?@JJ3333?#E *ian Hidayat!$p#!$td#!$tr# !td align:?right?#!&ont si<e:?N? color:?@JJ3333?#!b#!p align:Wle&tW#(L(M(T!$p#!$b#!$td# !td#!&ont si<e:?M?color:?@JJ3333?#E Weru/ )ukohar0o!$td#!$tr# !td align:?right?#!&ont si<e:?N? color:?@JJ3333?#!b#!p align:Wle&tW#TTL!$p#!$b#!$td# !td#!&ont si<e:?N?color:?@JJ3333?#E )ukohar0o/ JS6NoPember6=SSL!$td#!$tr# !td align:?right?#!&ont si<e:?N? color:?@JJ3333?#!b#!p align:Wle&tW#P'8'*+((N!$p#!$b#!$td# !td#!&ont si<e:?N?color:?@JJ3333?#E Mahasis a!$td#!$tr# !td align:?right?#!&ont si<e:?N? color:?@JJ3333?#!b#!p align:Wle&tW#H1B2!$p#!$b#!$td# !td#!&ont si<e:?N?color:?@JJ3333?#E Tidur!$td#!$tr# !td align:?right?#!&ont si<e:?N? color:?@JJ3333?#!b#!p align:Wle&tW#N1.T'LP1N'!$p#!$b#!$td# !td#!&ont si<e:?N?color:?@JJ3333?#E JUN>KUKUKJOO!$td#!$tr# !td align:?right?#!&ont si<e:?N? color:?@JJ3333?#!b#!p align:Wle&tW#'M(.L!$p#!$b#!$td# !td#!&ont si<e:?N?color:?@JJ3333?#E hrianUSZgmail.com!$td# !$tr#!$table# !table#!P align:?center?#!&ont color:?@JJ3333?#!img src:?gambar$bram.+P4? border:?>? idth:?KNJ? height:?LJJ?#!$p# !tr#!td align:?right?#!&ont si<e:?N? color:?@JJ3333?#!b#!p align:Wle&tW#N(M(!$p#!$b#!$td# !td#!&ont si<e:?N?color:?@JJ3333?#E Bram Putra P.!$p#!$td#!$tr# !td align:?right?#!&ont si<e:?N? color:?@JJ3333?#!b#!p align:Wle&tW#(L(M(T!$p#!$b#!$td# !td#!&ont si<e:?M?color:?@JJ3333?#E La eyan/ )urakarta!$td#!$tr# !td align:?right?#!&ont si<e:?N? color:?@JJ3333?#!b#!p align:Wle&tW#TTL!$p#!$b#!$td# !td#!&ont si<e:?N?color:?@JJ3333?#E )urakarta/ =L6(pril6=SSK!$td#!$tr# !td align:?right?#!&ont si<e:?N? color:?@JJ3333?#!b#!p align:Wle&tW#P'8'*+((N!$p#!$b#!$td# !td#!&ont si<e:?N?color:?@JJ3333?#E Mahasis a!$td#!$tr# !td align:?right?#!&ont si<e:?N? color:?@JJ3333?#!b#!p align:Wle&tW#N1.T'LP1N'!$p#!$b#!$td# !td#!&ont si<e:?N?color:?@JJ3333?#E FFFFFFFFFFFFFF !$td# !$tr#!$table#!$td# !td idth:WKJJW height:W>JJW bgcolor:WW Palign:WtopW# !table align:?le&t? idth:WKJJW border:WJW bgcolor:WW bordercolor:WgreenW# !tr align:WcenterW#!td#!p#!a hre&:?httpE$$ .&acebook.com$? target:?Vblank? title:?Masuk ke 3acebook?# !img src:?gambar$&acebook.ico? border:?J? idth:?SJ? height:?>J?$#!$a#!$td# !td#!p#!a hre&:?httpE$$ .youtube.com$? target:?Vblank? title:?Masuk ke youtube?# !img src:?gambar$youtube.ico? border:?J? idth:?SJ? height:?>J?$#!$a#!td# !$p#!$tr# !$table# !table align:Wle&tW idth:WKJJW border:WJW bgcolor:WW bordercolor:WgreenW# !center# !td idth:?KJJ? Palign:?top?#!&ont color:?@3333JJ? &ace:?7ooper )td Black?# !b#T5T1*.(L HTML!$b# !ul#!li#!a hre&:?buatDKJayatDKJbergerak.html? title:Wmembuat tulisan bergerakW#!&ont color:W@JJJJ33W &ace:WTimes Ne *omanW#7ara membuat tulisan bergerak!$a#!$&ont#!$li#

!li#!a hre&:WMenbuatDKJ&romDKJkomentar.htmlW title:Wmembuat &rom komentarW#!&ont color:W@JJJJ33W &ace:WTimes Ne *omanW#7ara membuat &rom komentar!$a#!$&ont#!$li# !li#!a hre&:WMembuatDKJlogin.htmlW title:Wmembuat halaman loginW#!&ont color:W@JJJJ33W &ace:WTimes Ne *omanW#7ara membuat halaman login!$a#!$&ont#!$li# !$ul#!$&ont#!$table#!$td#!$tr# !tr height:?NJ?#!td colspan:WKW background:Wgambar$<<.0pgW#!center#!b#!marYuee#!&ont &ace:?7ooper )td Black? color:?@JJ7733? si<e:?>?#X Meskipun banyak kendala dalam pembuatan desain eb/ tapi tetap berusaha untuk mencapai hasil yang terbaik X!$&ont#!$b#!$marYuee#!$center#!$td# !$tr#!$table#!diP style:?positionE &i"edR bottomE Jp"R le&tE =Jp"R idthE=LJp"RheightE=OJp"R?# !img border:?J? src:?gambar$t itter.ico? title:?&ollo my t itter? alt:?animasi bergerak gi&? $#!$a#!small#!center# !$diP# !diP style:?positionE &i"edR bottomE Jp"R rightE Jp"R idthE=JJp"RheightE=JJp"R?#!a hre&:W@topW# !img border:?J? src:?gambar$top.png? idth:WNJW height:WNJW title:?8embali ke atas? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$diP# !diP style:?positionE &i"edR T1PE Jp"R rightE =Jp"R idthE=LJp"RheightE=OJp"R?#!a hre&:Wlogin.htmlW# !img border:?J? src:?gambar$c.png? idth:WMJW height:WMJW title:?8embali ke login? alt:?animasi bergerak gi&? $#!$a#!small#!center# !$diP# !body background:Wgambar$yy.0pgW# !$body# !'MB'D )*7:?MPL$.DKJWonDK>tDKJ)eeDKJ2ouDKJTonightDKUPart=DKS.s &? (5T1)T(*T:?T*5'? L11P:?T*5'? W.DTH:?=? H'.4HT:?=? (L.4N:?7'NT'*?#!$'MB'D# !$html# Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ anda bisa menganti gambar6gambarnya sesuai yang anda inginkan/ dan anda 0uga dapat menganti background dan animasi yang sesuai dengan anda. Hasilnya akan seperti pada gambar == berikutE 4ambar ==. Membuat data pribadi M. Membuat album galery/ buka notepad++/ kemudian ketikan atau bisa copy sa0a code diba ah iniE !html# !head# !title#Pro&ilku!$title# !link rel:WiconW hre&:Wgambar$alien.icoW# !$head# !body# !center# !table idth:W=JJJW height:WMJJW border:?J? background:Wgambar$"".0pgW cellpadding:?J? cellspacing:?KJ? # !tr# !td colspan:?K? color:? hite? align:WcenterW#

!img src:?gambar$=.png? idth:?=JJJ? height:?MJJ?# !$td# !$tr# !tr height:?NJ?# !td colspan:WKW background:Wgambar$<<.0pgW align:Wle&tW height:?KJ?# !p#!ul#!ul#!le&t#!BL.N8#!b#!&ont color:?@JJ7733? si<e:?N?#!img src:Wgambar$halo.gi&W border:WJW idth:WMJW height:WMJW#X )elamat datang di ebsite pertama saya X !img src:Wgambar$halo.gi&W border:WJW idth:WMJW height:WMJW#!$&ont#!$BL.N8#!$b#!$ul#!$ul#!$p#!$le&t# !le&t# !ul#!a hre&:?home.html? title:?ke *umah?#!img src:Wgambar$H1M'.0pgW B1*D'*:WJW idth:WUJW height:WLJW#!$a# !a hre&:?httpE$$mpLskull.com$? title:?MPL?#!img src:Wgambar$MPL.0pgW B1*D'*:WJW idth:WUJW height:WLJW#!$&ont#!$a# !a hre&:?pro&ilku.html? title:?Pro&ilku?#!img src:Wgambar$P*13.L.0pgW B1*D'*:WJW idth:WSJW height:WLJW#!$a# !a hre&:?htmlVcolors.html? title:?8ode Warna Pada HTML?#!img src:Wgambar$81D' W(*N(.0pgW B1*D'*:WJW idth:W=KJW height:WLJW#!$a# !a hre&:?httpE$$ .gametop.com$? title:?Tempat 4ame?#!img src:Wgambar$4(M'.0pgW B1*D'*:WJW idth:WUJW height:WLJW#!$a# !a hre&:?httpE$$ . Lschools.com$html$htmlVintro.asp? title:?Tutorial HTML. Lschools.com?#!img src:Wgambar$T5T1*.(L.0pgW B1*D'*:WJW idth:WSJW height:WLJW#!$a# !a hre&:?kumpulanDKJpuisi.html? title:?kumpulan 8ata6kata Mutiara?#!img src:Wgambar$8(T(.0pgW B1*D'*:WJW idth:W=JJW height:WLJW#!$a# !$ul#!$le&t# !$td#!$tr# !tr# !td idth:W>SOW height:W>JJW background:Wgambar$<<.0pgW Palign:WtopW # !p#!table align:?center? border:?J? bgcolor:?? cellpadding:?J? cellspacing:?U? # !td# !p#!b#!center#!&ont &ace:?Bauhaus SL? si<e:?>? color:W@JJJJ33W#4alery!$&ont#!$center#!$b#!$p#!b# !table color:?blue? align:?center? border:?Sp"?# !tr#!p align:?center?#!&ont color:?@JJ3333? si<e:WOW#(lbum 8egiatan Teknisi!$&ont# !td#!img src:?&ileE$$$DE$TugasDKJHTML$4ambar$a.png? border:?L? idth:?LJJ? height:?LJJ? $#!$td# !td#!img src:?&ileE$$$DE$TugasDKJHTML$4ambar$b.png? border:?L? idth:?LJJ? height:?LJJ? $#!$td# !tr#!td#!img src:?&ileE$$$DE$TugasDKJHTML$4ambar$c.png? border:?L? idth:?LJJ? height:?LJJ? $#!$td# !td#!img src:?&ileE$$$DE$TugasDKJHTML$4ambar$d.png? border:?L? idth:?LJJ? height:?LJJ? $#!$td# !tr#!td#!img src:?&ileE$$$DE$TugasDKJHTML$4ambar$e.png? border:?K? idth:?LJJ? height:?LJJ? $#!$td# !td#!img src:?&ileE$$$DE$TugasDKJHTML$4ambar$&.png? border:?L? idth:?LJJ? height:?LJJ? $#!$td#!$p#!$tr# !$table# !$td# !td idth:WKJJW height:W>JJW bgcolor:WW Palign:WtopW# !table align:?le&t? idth:WKJJW border:WJW bgcolor:WW bordercolor:WgreenW#!tr align:WcenterW# !td#!p#!a hre&:?httpE$$ .&acebook.com$? target:?Vblank? title:?Masuk ke 3acebook?# !img src:?gambar$&acebook.ico? border:?J? idth:?SJ? height:?>J?$#!$a#!$td#

!td#!p#!a hre&:?httpE$$ .youtube.com$? target:?Vblank? title:?Masuk ke youtube?# !img src:?gambar$youtube.ico? border:?J? idth:?SJ? height:?>J?$#!$a#!td# !$p#!$tr#!$table# !table align:Wle&tW idth:WKJJW border:WJW bgcolor:WW bordercolor:WgreenW# !center# !td idth:?KJJ? Palign:?top?#!&ont color:?@3333JJ? &ace:?7ooper )td Black?# !b#T5T1*.(L HTML!$b#!ul# !li#!a hre&:?buatDKJayatDKJbergerak.html? title:Wmembuat tulisan bergerakW#!&ont color:W@JJJJ33W &ace:WTimes Ne *omanW#7ara membuat tulisan bergerak!$a#!$&ont#!$li# !li#!a hre&:WMenbuatDKJ&romDKJkomentar.htmlW title:Wmembuat &rom komentarW#!&ont color:W@JJJJ33W &ace:WTimes Ne *omanW#7ara membuat &rom komentar!$a#!$&ont#!$li# !li#!a hre&:WMembuatDKJlogin.htmlW title:Wmembuat halaman loginW#!&ont color:W@JJJJ33W &ace:WTimes Ne *omanW#7ara membuat halaman login!$a#!$&ont#!$li# !$ul#!$&ont#!$table#!$td#!$tr# !tr height:?NJ?# !td colspan:WKW background:Wgambar$<<.0pgW#!center#!b#!marYuee#!&ont &ace:?7ooper )td Black? color:?@JJ7733? si<e:?>?#X Meskipun banyak kendala dalam pembuatan desain eb/ tapi tetap berusaha untuk mencapai hasil yang terbaik X!$&ont#!$b#!$marYuee#!$center#!$td# !$tr#!$table# !diP style:?positionE &i"edR bottomE Jp"R le&tE =Jp"R idthE=LJp"RheightE=OJp"R?# !img border:?J? src:?gambar$t itter.ico? title:?&ollo my t itter? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$diP# !diP style:?positionE &i"edR bottomE Jp"R rightE Jp"R idthE=JJp"RheightE=JJp"R?#!a hre&:W@topW# !img border:?J? src:?gambar$top.png? idth:WNJW height:WNJW title:?8embali ke atas? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$diP# !diP style:?positionE &i"edR T1PE Jp"R rightE =Jp"R idthE=LJp"RheightE=OJp"R?#!a hre&:Wlogin.htmlW#!img border:?J? src:?gambar$c.png? idth:WMJW height:WMJW title:?8embali ke login? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$diP# !body background:Wgambar$yy.0pgW# !$body# !'MB'D )*7:?MPL$.DKJWonDK>tDKJ)eeDKJ2ouDKJTonightDKUPart=DKS.s &? (5T1)T(*T:?T*5'? L11P:?T*5'? W.DTH:?=? H'.4HT:?=? (L.4N:?7'NT'*?#!$'MB'D# !$html# Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ anda bisa menganti gambar6gambarnya sesuai yang anda inginkan/ dan anda 0uga dapat menganti background dan animasi yang sesuai dengan anda. Hasilnya akan seperti pada gambar =K berikutE 4ambar =K. 4alery N. Membuat artikel html tentang cara membuat tulisan bergerak/ buka notepad++/ kemudian ketikan atau copy sa0a code diba ah iniE !html# !head# !title#7ara membuat tulisan bergerak!$title# !link rel:WiconW hre&:Wgambar$alien.icoW# !$head#

!body# !center# !table idth:W=JJJW height:WMJJW border:?J? background:Wgambar$"".0pgW cellpadding:?J? cellspacing:?KJ? # !tr# !td colspan:?K? color:? hite? align:WcenterW# !img src:?gambar$=.png? idth:?=JJJ? height:?MJJ?# !$td# !$tr# !tr height:?NJ?# !td colspan:WKW background:Wgambar$<<.0pgW align:Wle&tW height:?KJ?# !p#!ul#!ul#!le&t#!BL.N8#!b#!&ont color:?@JJ7733? si<e:?N?#!img src:Wgambar$halo.gi&W border:WJW idth:WMJW height:WMJW#X )elamat datang di ebsite pertama saya X !img src:Wgambar$halo.gi&W border:WJW idth:WMJW height:WMJW#!$&ont#!$BL.N8#!$b#!$ul#!$ul#!$p#!$le&t# !le&t# !ul#!a hre&:?home.html? title:?ke *umah?#!img src:Wgambar$H1M'.0pgW B1*D'*:WJW idth:WUJW height:WLJW#!$a# !a hre&:?httpE$$mpLskull.com$? title:?MPL?#!img src:Wgambar$MPL.0pgW B1*D'*:WJW idth:WUJW height:WLJW#!$&ont#!$a# !a hre&:?pro&ilku.html? title:?Pro&ilku?#!img src:Wgambar$P*13.L.0pgW B1*D'*:WJW idth:WSJW height:WLJW#!$a# !a hre&:?htmlVcolors.html? title:?8ode Warna Pada HTML?#!img src:Wgambar$81D' W(*N(.0pgW B1*D'*:WJW idth:W=KJW height:WLJW#!$a# !a hre&:?httpE$$ .gametop.com$? title:?Tempat 4ame?#!img src:Wgambar$4(M'.0pgW B1*D'*:WJW idth:WUJW height:WLJW#!$a# !a hre&:?httpE$$ . Lschools.com$html$htmlVintro.asp? title:?Tutorial HTML. Lschools.com?#!img src:Wgambar$T5T1*.(L.0pgW B1*D'*:WJW idth:WSJW height:WLJW#!$a# !a hre&:?kumpulanDKJpuisi.html? title:?kumpulan 8ata6kata Mutiara?#!img src:Wgambar$8(T(.0pgW B1*D'*:WJW idth:W=JJW height:WLJW#!$a# !$ul#!$le&t# !$td# !$tr# !tr# !td idth:W>SOW height:W>JJW background:Wgambar$<<.0pgW Palign:WtopW # !b#!center#!span style:?&ont6si<eE largeR? align:WcenterW#!&ont color:W@JJOO33W si<e:WNW#Tutorial Membuat Tulisan Men0adi Bergerak!$&ont#!$span#!$center#!$b# !br $# !br $#!&ont color:W@JJ3333W#MarYuee tag digunakan untuk menggerakkan sama ada perkataan ataupun gambar. Dalam contoh ini/ saya akan tun0ukkan beberapa cara untuk menggunakan MarYuee tag ini untuk menggerakkan tulisan anda.!$&ont#!br $# !br $# !diP style:?colorE @3333JJR?# !marYuee direction:?do n? height:?NJ?#!center# !b#Teks Bergerak 8e Ba ah...!$b#!$center# !$marYuee# !$diP# !diP style:?colorE @3333JJR?#!marYuee direction:?right?#!b#Teks Bergerak 8e 8anan...!$b#!$marYuee# !$diP#

!diP style:?colorE @3333JJR?#!marYuee direction:?le&t?#!b#Teks Bergerak 8e 8iri...!$b#!$marYuee# !$diP# !br $# !diP style:?colorE @3333JJR?# !marYuee direction:?up? height:?NJ?#!center# !b#Teks Bergerak 8e (tas...!$b#!$center# !$marYuee# !$diP# !br $# !a name:WmoreW#!$a#!br $#!br $#!span style:?&ont6si<eE largeR?#!&ont color:W@JJ3333W#!b#=.!$b#!$span# )eperti yang anda lihat di atas/ Teks ini bergerak ke kiri dan ke kanan. (nda boleh gunakan kode diba ah ini untuk melakukan tricks tersebut.!$&ont#!br $# !br $# !diP class:?code?#!br $#!span style:?colorE hiteR?#QltRmarYuee direction:?!$span# !b#!span style:?colorE @3333JJR?#right!$span#!$b#!span style:?colorE hiteR?#?QgtRThis te"t scrolls right...QltR$marYueeQgtR!$span#!$diP#!br $# !br $#!&ont color:W@JJ3333W#(pa yang anda perlukan/ gantikan teks yang be arna !b#!span style:?colorE@3333JJR?#kuning!$span#!$b# kepada arah mana anda akan teks tu )croll. (nda boleh pilih sama ada 6 up/ do n/ right/ le&t.!$&ont#!br $#!br $# !diP style:?colorE @33JJJJR?#!marYuee scrollamount:?LJ?#!b#Teks ini Macam 3erari..!$b#!$marYuee#!$diP#!br $#!span style:?&ont6si<eE largeR?#!&ont color:W@JJ3333W#!b#K.!$b#!$span# (nda boleh mengubah kela0uan teks dengan menggunakan kod di ba ah ni.!$&ont# !br $#!br $# !diP class:?code?#!br $#!span style:?colorE hiteR?#QltRmarYuee scrollamount:?!$span#!b#!span style:?colorE@33OOJJR?#LJ!$span#!$b#!span style:?colorE hiteR?#?QgtR!$span#!span style:?colorE @33JJJJR?#Teks ni Macam 3erari..!$span#!span style:?colorE hiteR?#QltR$marYueeQgtR !$span#!$diP#!br $#!br $#!&ont color:W@JJ3333W#5bah nomer yang be arna !b#!span style:?colorE@33OOJJR?#1ren!$span#!$b# untuk mengubah kela0uan.!$&ont# !br $#!br $# !diP style:?colorE @&=cKLKR?#!marYuee scrolldelay:?LJJ?#!b#Teks ini seperti )iput..!$b#!$marYuee#!$diP#!br $# !diP class:?code?#!br$#!span style:?colorE hiteR?#QltRmarYuee scrolldelay:?!$span#!b#!span style:?colorE@JJ33JJR?#LJJ!$span#!$b#!span style:?colorE hiteR?#?QgtRTeks ini seperti )iput..QltR$marYueeQgtR !$span#!$diP#!br $#!br $#!b#!span style:?&ont6si<eE largeR?#!&ont color:W@JJ3333W#L.!$span#!$b# 5bah nomer yang be arna !b#!span style:?colorE@JJ33JJR?#hi0au!$span#!$b# untuk mengubah kela0uan. !$&ont#!br $#!br $#!diP style:?colorE @OOJJ77R?#!marYuee behaPior:?alternate?#!b#Teks ini Melantun!$b#!$marYuee# !$diP#!br $#!&ont color:W@JJ3333W#5ntuk membuatkan teks anda melantun seperti di atas ini. 4unakan kode di ba ah. !$&ont#!br $#!br $# !diP class:?code?#!br $#!span style:?colorE hiteR?#QltRmarYuee behaPior:?alternate?QgtR!$span#!b style:?colorE @OOJJ77R?#Teks ini Melantun!$b#!span style:?colorE hiteR?#QltR$marYueeQgtR

!$span#!$diP#!br $#!br $#!b#!&ont color:W@JJ3333W#M.!$b# 1k. )eterusnya cara untuk menetapkan ruangan untuk MarYuee bergerak !$&ont#!br $#!br $#!diP style:?colorE @JJOO33R?# !marYuee idth:?KJJ?#!b#Teks ini bergerak dalam kelebaran KJJ idth!$b#!$marYuee#!$diP#!br $#!diP class:?code?#!br $# !span style:?colorE hiteR?#QltRmarYuee idth:?!$span#!span style:?colorE @JJ33JJR?#KJJ!$span#!span style:?colorE hiteR?#?QgtRTeks ini bergerak dalam kelebaran KJJ idthQltR$marYueeQgtR!$span#!$diP# !br $#!&ont color:W@JJ3333W#(nda boleh tentukan idth mengikut kesukaan anda dengan menukarkan nomer yang be arna !b#!span style:?colorE @JJ33JJR?#hi0au!$span#!$b#. !$&ont#!br $#!br $#!span style:?&ont6si<eE largeR?#!b#!&ont color:W@JJ3333W#N.!$b#!$span# )eterusnya saya akan menggabungkan beberapa kode MarYuee ini bersama. !$&ont#!br $#!br $# !diP style:?colorE @LL33LLR?#!marYuee behaPior:IalternateI scrollamount:ILJI idth:IMJJI#!b#Teks Paling ( esome!$b#!$marYuee#!$diP# !br $#!&ont color:W@JJ3333W#.ni merupakan kode yang saya gunakan untuk membuat teks bergerak seperti yang di atas. !$&ont#!br $#!br $# !diP class:?code?# !br $# !span style:?colorE hiteR?#QltRmarYuee behaPior:?alternate? idth:?MJJ? scrollamount:?LJ?QgtR!$span#!b style:?colorE @LL33LLR?#Teks Paling ( esome!$b#!span style:?colorE hiteR?#QltR$marYueeQgtR !$span#!$diP# !br $# !br $#!&ont color:W@JJ3333W#)ekarang/ anda boleh coba dalam blog anda/ anda 0uga boleh gabungkan kode6kode marYuee ini mengikut kesukaan anda masing6masing.!br $#!$&ont#!br $#!$td# !td idth:WKJJW height:W>JJW bgcolor:WW Palign:WtopW# !table align:?le&t? idth:WKJJW border:WJW bgcolor:WW bordercolor:WgreenW# !tr align:WcenterW# !td#!p#!a hre&:?httpE$$ .&acebook.com$? target:?Vblank? title:?Masuk ke 3acebook?# !img src:?gambar$&acebook.ico? border:?J? idth:?SJ? height:?>J?$#!$a#!$td#!td#!p#!a hre&:?httpE$$ .youtube.com$? target:?Vblank? title:?Masuk ke youtube?# !img src:?gambar$youtube.ico? border:?J? idth:?SJ? height:?>J?$#!$a#!td# !$p#!$tr#!$table# !table align:Wle&tW idth:WKJJW border:WJW bgcolor:WW bordercolor:WgreenW# !center# !td idth:?KJJ? Palign:?top?#!&ont color:?@3333JJ? &ace:?7ooper )td Black?# !b#T5T1*.(L HTML!$b# !ul#!li#!a hre&:?buatDKJayatDKJbergerak.html? title:Wmembuat tulisan bergerakW#!&ont color:W@JJJJ33W &ace:WTimes Ne *omanW#7ara membuat tulisan bergerak!$a#!$&ont#!$li# !li#!a hre&:WMenbuatDKJ&romDKJkomentar.htmlW title:Wmembuat &rom komentarW#!&ont color:W@JJJJ33W &ace:WTimes Ne *omanW#7ara membuat &rom komentar!$a#!$&ont#!$li# !li#!a hre&:WMembuatDKJlogin.htmlW title:Wmembuat halaman loginW#!&ont color:W@JJJJ33W &ace:WTimes Ne *omanW#7ara membuat halaman login!$a#!$&ont#!$li# !$ul#!$&ont#!$table#!$td#!$tr#!tr height:?NJ?#!td colspan:WKW background:Wgambar$<<.0pgW#!center#!b#!marYuee#!&ont &ace:?7ooper )td Black? color:?@JJ7733? si<e:?>?#X Meskipun banyak kendala dalam pembuatan desain eb/ tapi tetap berusaha untuk mencapai hasil yang terbaik X!$&ont#!$b#!$marYuee#!$center#!$td# !$tr#

!$table# !diP style:?positionE &i"edR bottomE Jp"R le&tE =Jp"R idthE=LJp"RheightE=OJp"R?# !img border:?J? src:?gambar$t itter.ico? title:?&ollo my t itter? alt:?animasi bergerak gi&? $#!$a#!small#!center# !$diP# !diP style:?positionE &i"edR bottomE Jp"R rightE Jp"R idthE=JJp"RheightE=JJp"R?#!a hre&:W@topW# !img border:?J? src:?gambar$top.png? idth:WNJW height:WNJW title:?8embali ke atas? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$diP# !diP style:?positionE &i"edR T1PE Jp"R rightE =Jp"R idthE=LJp"RheightE=OJp"R?#!a hre&:Wlogin.htmlW# !img border:?J? src:?gambar$c.png? idth:WMJW height:WMJW title:?8embali ke login? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$diP#!body background:Wgambar$yy.0pgW# !$body# !'MB'D )*7:?MPL$(>"V(&terli&e.s &? (5T1)T(*T:?T*5'? L11P:?T*5'? W.DTH:?=? H'.4HT:?=? (L.4N:?7'NT'*?#!$'MB'D# !$html# Langkah selan0utnya simpan dalam &ormat HTML dan buka &ile dengan &ire&o" atau se0enisnya/ anda bisa menganti gambar6gambarnya sesuai yang anda inginkan/ dan anda 0uga dapat menganti background dan animasi yang sesuai dengan anda. Hasilnya akan seperti pada gambar =K berikutE 4ambar =L. (rtikel tulisan bergerak

Anda mungkin juga menyukai