Membuat Desain Website Berbasis HTML Dengan Notepad

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 HTML-

31*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 )iWarna Huru& !31NT 71L1*:?@AAAAAA?#!$31NT# Pilih enis Huru& !31NT 3(7':??#!$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
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:??# ,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 3irst HTML Pro0ect Pro0ect !$title# !$title# !$head# !body B471L1*:4reenI T'FT:*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  baris. Baris satu/ dua dan tiga. !br#!br#!$p#

 !p#ni adalah paragra& kerdua/ yang berisi garis hori
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# !h# Heading  !$h# !h# Heading  !$h# !h# Heading  !$h# !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  berikutE 4ambar . 5kuran Huru& .

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
!$&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  berikutE 4ambar . 3ormat tulisan .

Membuat &rom komentar/ buka notepad++/ kemudian ketikan code dibaah iniE

!html# !head# !title# 3rom komentar !$title# !$head# !body# !table# !tr# !tdcolspan:??#QnbspR!$td#!$tr#!tr# !td colspan:??#!h#)ilahkan colspan:??#!h#)il ahkan Berkomentar E !$h#!$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 align:top#8omentar!$td# !td align:top#E!$td# !td#!te"tarea name:?komentar? ros:O idth:KJJ#!$te"tarea#!$td# !$tr# !tr# !td colspan:??#!input type:submit name:?submit? alue: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  berikutE 4ambar . 3rom komentar

O.

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

!html# !head# !title#arna6arna!$title# !$head# !body# !table idth:?JJ? border:?=?# !tr# !td colspan:?? align:?center?#arna6arna align:?center?# arna6arna !$td# !$tr# !tr# !td bgcolor:?@JJ33JJ?#Hi0au!$td# bgcolor:?@JJ33JJ?# Hi0au!$td# !td bgcolor:?@3333JJ?#8uning!$td# bgcolor:?@3333JJ? #8uning!$td# !td bgcolor:?@33JJJJ?#Merah bgcolor:?@33JJJJ?# Merah !$td# !$tr# !tr# !td bgcolor:?@SSSSSS?#(bu6 bgcolor:?@SSSSSS?#(bu6abu!$td# abu!$td# !td bgcolor:?@JJJJ33?#Biru!$td# bgcolor:?@JJJJ33?# Biru!$td# !td bgcolor:?@33SSJJ?#1r bgcolor:?@33SSJJ?#1range!$td# ange!$td# !$tr# !tr# !td bgcolor:?@OOJJ?#7ok bgcolor:?@OOJJ?#7okelat!$td# elat!$td# !td bgcolor:?@SS77?#B bgcolor:?@SS77?#Biru iru muda!$td# !td bgcolor:?@33JJ33?#Merah 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.c hre&:?httpE$$ .ordpress.com$? om$? title:?Masuordpress?# title:?Masuordpr ess?# Wordpress !$a# !br#8lik dan masuk ke yahoo!a hre&:?httpE$$.yahoo.com$? 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($Documents$HTML.=$desainKJeb$home.html? title:?ke *umah?#!img src:?&ileE$$$7E$5sers$71MP($Documents$HTML.=$gambar$4raphic=.0pg? border:?J? idth:?UJ? height:?J?$#!$a# !ahre&:?&ileE$$$7E$5sers$71MP($Documents$HTML.=$desainKJeb$pro&il.html? title:?Pro&ilku?#!img src:?&ileE$$$7E$5sers$71MP($Documents$HTML.=$gambar$pro&il.0pg? border:?J? idth:?=JJ? height:?J?$#!$a# !ahre&:?&ileE$$$7E$5sers$71MP($Documents$HTML.=$htmlVcolors.html? title:?8ode Warna Pada HTML?#!img src:?&ileE$$$7E$5sers$71MP($Documents$HTML.=$gambar$8ode KJWarna.0pg? border:?J? idth:?=J? height:?J?$#!$a# !a hre&:?&ileE$$$7E$5sers$71MP($Documents$HTML.=$kumpulanKJpuisi.html? title:?kumpulan 8ata6kata Mutiara?#!img src:?&ileE$$$7E$5sers$71MP($Documents$HTML.=$gambar$kataKJkata.0pg? border:?J?  idth:?=JJ?  idth:?=JJ? height:?J?$#!$a height:?J?$#!$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:icon hre&:gambar$B.png# !$head# !body#

!p align:?center?# align:?center? # !&ont si?#>!$option# !option alue:?U?#U!$option# !option alue:?S?#S!$option# !option alue:?=J?#=J!$option# !option alue:?==?#==!$option# !option alue:?=K?#=K!$option# !option alue:?=?#=!$option# !option alue:?=?#=!$option# !option alue:?=?#=!$option# !option alue:?=O?#=O!$option# !option alue:?=>?#=>!$option# !option alue:?=U?#=U!$option# !option alue:?=S?#=S!$option# !option alue:?KJ?#KJ!$option# !option alue:?K=?#K=!$option# !option alue:?KK?#KK!$option# !option alue:?K?#K!$option# !option alue:?K?#K!$option# !option alue:?K?#K!$option# !option alue:?KO?#KO!$option# !option alue:?K>?#K>!$option# !option alue:?KU?#KU!$option# !option alue:?KS?#KS!$option# !option alue:?J?#J!$option# !option alue:?=?#=!$option# !$select# !select name:?selectK?# !option alue:?=?#anuari!$option# !option alue:?K?#3ebruari!$option#

!option alue:??#Maret!$option# !option alue:??#(pril!$option# !option alue:??#Mei!$option# !option alue:?O?#uni!$option# !option alue:?>?#uli!$option# !option alue:?U?#(gustus!$option# !option alue:?S?#)eptember!$option# !option alue:?=J?#1ktober!$option# !option alue:?==?#Nopember!$option# !option alue:?=K?#Desember!$option# !$select# !select name:?select?# !option alue:?KJJ=?#=SUU!$option# !option alue:?KJJK?#=SUS!$option# !option alue:?KJJ?#=SSJ!$option# !option alue:?KJJ?#=SS=!$option# !option alue:?KJJ?#=SSK!$option# !option alue:?KJJO?#=SS!$option# !option alue:?KJJ>?#=SS!$option# !option alue:?KJJU?#=SS!$option# !option alue:?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:?MP$4reendayKJ6KJKJalkKJ(lone.s&? (5T1)T(*T:?T*5'? L11P:?T*5'? WDTH:?=? H'4HT:?=? (L4N:?7'NT'*?#!$'MB'D# !p align:?center?# align:?center? # !&ont si
Membuat halaman aal/ buka notepad++/ kemudian ketikan atau copy sa0a code dibaah

!html# !head#   !title#Home!$title# !link rel:icon hre&:gambar$alien.ico# !$head#

!body# !center#!table idth:=JJJ height:JJ border:?J? background:gambar$"". background:gambar$"".0pg 0pg cellpadding:?J? cellspacing:?!tr# !td colspan:?K? color:?hite? align:center# !img src:?gambar$=.png? idth:?=JJJ? height:?JJ?# !$td# !$tr# !tr height:?J?#!td colspan:K background:gambar$<<.0pg align:le&t height:?KJ?# !p#!ul#!ul#!le&t#!BLN8#!b#!&ont color:?@JJ7733? siSO height:>JJ background:gambar$<<.0pg align:top # !p#!&ont color:?yello? si=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@UKJRtag 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 seperti iniE!br $#QltRheadQ $#QltRheadQgtR gtR QltRtitleQgtR QltRtitleQgtR 0udul 0udul halaman eb QltR$titleQgtR QltR$titleQgtR QltR$headQ QltR$headQgtR!br gtR!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 sae dengan nama dasarHTML.!br $# kalo udah disae/ buka data yang tadi di sae.!br $#;!br $#Pada bagian ini/ kalian mungkin akan bingun/g karena html yang tadi disae dan cape cape diketikkan/ ternyata gagal. Malah yang terbuka adalah &ile di notepad$ordpad. tau kenapa;;;!br $#8arena ketika men6sae/ &ile tersebut di sae dalem bentuk TFT/ bukan HTML. Nah cara men6sae dalem bentuk HTML yaituE ketika mensae/ ada satu tempat di baah tempat kita menulis nama &ile/; yakni )ae (s Type. )ilahkan ubah dari te"t document,.t"t- men0adi all &iles/ ketika menulis nama/ di akhir di berikan e"tensi .html/ contohE dasarHTML.html. !di style:clearE bothR#!$di# !$te"tarea# !&ont:?le&t? &orm method:?post? action:?&ileE$$$7E$5sers$71MP($Documents$HTML.=$ne KJ.html?# !input type:?hidden? name:?&riendD? alue:?=KO?# !te"tarea name:?&Vcomments? cols:?J? ros:???# 'nter your comments here...

!$te"tarea#!br# !input type:?submit? alue:?coments? $# !input type:?reset? alue:?*eset? $# !$&orm# !$td# !td idth:KJJ height:>JJ bgcolor: align:top# !table align:?le&t? idth:KJJ border:J bgcolor: bordercolor:green# !tr align:center# !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:le&t idth:KJJ border:J bgcolor: bordercolor:green# !center# !td idth:?KJJ? align:?top?#!&ont color:?@3333JJ? &ace:?7ooper )td Black?# !b#T5T1*(L HTML!$b# !ul# !li#!a hre&:?buatKJayatKJbergerak.html? title:membuat tulisan bergerak#!&ont color:@JJJJ33 &ace:Times Ne *oman#7ara membuat tulisan bergerak!$a#!$&ont#!$li# !li#!a hre&:MenbuatKJ&romKJkomentar.html title:membuat &rom komentar#!&ont color:@JJJJ33 &ace:Times Ne *oman#7ara membuat &rom komentar!$a#!$&ont#!$li# !li#!a hre&:MembuatKJlogin.html title:membuat halaman login#!&ont color:@JJJJ33 &ace:Times Ne *oman#7ara membuat halaman login!$a#!$&ont#!$li# !$ul#!$&ont#!$table#!$td# !$tr# !tr height:?J?# s!td colspan:Kbackground:gambar$<<.0pg#!center#!b#!marYuee#!&ont &ace:?7ooper )td Black? color:?@JJ7733? si?#X Meskipun banyak kendala dalam pembuatan desain eb/ tapi tetap berusaha untuk mencapai hasil yang terbaik X!$&ont#!$b#!$marYuee#!$center#!$td#!$tr# !$table#!di style:?positionE &i"edR bottomE Jp"R le&tE =Jp"RidthE=Jp"RheightE=OJp"R?# !img border:?J? src:?gambar$titter.ico? title:?&ollo my titter? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$di# !di style:?positionE &i"edR bottomE Jp"R rightE Jp"RidthE=JJp"RheightE=JJp"R?#!a hre&:@top# !img border:?J? src:?gambar$top.png? idth:J height:J title:?8embali ke atas? alt:?animasi bergerak gi&? $#!$a#!small#!center# !$di# !di style:?positionE &i"edR T1PE Jp"R rightE =Jp"RidthE=Jp"RheightE=OJp"R?#!a hre&:login.html# !img border:?J? src:?gambar$c.png? idth:J height:J title:?8embali ke login? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$di# !body background:gambar$yy.0pg#!$body# !'MB'D )*7:?MP$KJWonK>tKJ)eeKJ2ouKJTonightKUPart=KS.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 . 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:icon hre&:gambar$alien.ico# !$head# !body# !center#!table idth:=JJJ height:JJ border:?J? background:gambar$"". background:gambar$"".0pg 0pg cellpadding:?J? cellspacing:?KJ? # !tr# !td colspan:?K? color:?hite? align:center# !img src:?gambar$=.png? idth:?=JJJ? height:?JJ?# !$td# !$tr#  !tr height:?J?# !td colspan:K background:gambar$<<.0pg align:le&t height:?KJ?# !p#!ul#!ul#!le&t#!BLN8#!b#!&ont color:?@JJ7733? siSO height:>JJ background:gambar$<<.0pg align:top # !p#!table align:?center? border:?J? bgcolor:?? cellpadding:?J? cellspacing:?U? cellspacing:?U ? # !td#!tr#!td colspan:?K? align:?center?#!&ont align:?center? #!&ont &ace:?Bauhaus S? si
!P align:?center?#!&ont color:?@JJ3333?# !img src:?gambar$rian.P4? src:?gambar$r ian.P4? border:?>? idth:?KJ? height:?JJ?# !tr#!td align:?right?#!&ont siKUKUKJOO!$td#!$tr# !td align:?right?#!&ont align:?right ?#!&ont si?  idth:?KJ?  idth:?KJ? height:?JJ?#!$ height:?JJ?#!$p# p# !tr#!td align:?right?#!&ont align:?right? #!&ont siJJ bgcolor: align:top# !table align:?le&t? idth:KJJ border:J bgcolor: bordercolor:green# !tr align:center#!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:le&t idth:KJJ border:J bgcolor: bordercolor:green#   !center# !td idth:?KJJ? align:?top?#!&ont color:?@3333JJ? &ace:?7ooper )td Black?# !b#T5T1*(L HTML!$b# !ul#!li#!a hre&:?buatKJayatKJber hre&:?buatKJayatKJbergerak.html? gerak.html? title:membuat tulisan bergerak#!&ont color:@JJJJ33 &ace:Times Ne *oman#7ara membuat tulisan bergerak!$a#!$&ont#!$li#

!li#!a hre&:MenbuatKJ&rom hre&:MenbuatKJ&romKJkomentar.html KJkomentar.html title:membuat &rom komentar#!&ont color:@JJJJ33 &ace:Times Ne *oman#7ara membuat &rom komentar!$a#!$&ont#!$li# !li#!a hre&:MembuatKJlogi hre&:MembuatKJlogin.html n.html title:membuat halaman login#!&ont color:@JJJJ33 &ace:Times Ne *oman#7ara membuat halaman login!$a#!$&ont#!$li#   !$ul#!$&ont#!$table#!$td#!$tr# !tr height:?J?#!td colspan:K background:gambar$<< background:gambar$<<.0pg#!center#!b# .0pg#!center#!b#!marYuee#!&ont !marYuee#!&ont &ace:?7ooper )td Black? color:?@JJ7733? si?#X Meskipun banyak kendala dalam pembuatan desain eb/ tapi tetap berusaha untuk mencapai hasil yang terbaik X!$&ont#!$b#!$marYuee#!$center#!$td# !$tr#!$table#!di !$tr#!$table#! di style:?positionE style:?posit ionE &i"edR bottomE Jp"R le&tE =Jp"RidthE=Jp"RheightE=OJp"R?# =Jp"RidthE=Jp"Rhei ghtE=OJp"R?# !img border:?J? src:?gambar$titter.ico? title:?&ollo my titter? alt:?animasi bergerak gi&? $#!$a#!small#!center# !$di# !di style:?positionE &i"edR bottomE Jp"R rightE Jp"RidthE=JJp"RheightE=JJp"R?#!a Jp"RidthE=JJp"Rhei ghtE=JJp"R?#!a hre&:@top# !img border:?J? src:?gambar$top.png? idth:J height:J title:?8embali ke atas? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$di# !di style:?positionE &i"edR T1PE Jp"R rightE =Jp"RidthE=Jp"Rheig =Jp"RidthE=Jp"RheightE=OJp"R?#!a htE=OJp"R?#!a hre&:login.html# !img border:?J? src:?gambar$c.png? src:?gambar$ c.png? idth:J height:J title:?8embali ke login? alt:?animasi bergerak gi&? $#!$a#!small#!center#   !$di# !body background:gambar$ background:gambar$yy.0pg# yy.0pg# !$body# !'MB'D )*7:?MP$KJWonK>tKJ)eeKJ2ouKJTonightKUPart=KS.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 . Membuat album galery/ buka notepad++/ kemudian ketikan atau bisa copy sa0a code dibaah iniE !html# !head#   !title#Pro&ilku!$title# !link rel:icon hre&:gambar$alien.ico# !$head# !body#   !center# !table idth:=JJJ height:JJ border:?J? background:gambar$"".0pg cellpadding:?J? cellspacing:?KJ? #   !tr# !td colspan:?K? color:?hite? align:center#

!img src:?gambar$=.png? idth:?=JJJ? height:?JJ?# !$td# !$tr# !tr height:?J?# !td colspan:K background:gambar$<<.0pg align:le&t height:?KJ?# !p#!ul#!ul#!le&t#!BLN8#!b#!&ont color:?@JJ7733? siSO height:>JJ background:gambar$<<.0pg align:top # !p#!table align:?center? border:?J? bgcolor:?? cellpadding:?J? cellspacing:?U? cellspacing:?U ? #   !td# !p#!b#!center#!&ont &ace:?Bauhaus S? si? color:@JJJJ33#4alery!$&ont#!$center#!$b#!$p#!b# !table color:?blue? align:?center? border:?Sp"?# !tr#!p align:?center?#!&ont color:?@JJ3333? siJJ bgcolor: align:top# !table align:?le&t? idth:KJJ border:J bgcolor: bordercolor:green#!tr bordercolor: green#!tr align:center# align:center # !td#!p#!a hre&:?httpE$$.&acebook.com$ 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$? 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:le&t idth:KJJ border:J bgcolor: bordercolor:green#   !center# !td idth:?KJJ? align:?top?#!&ont color:?@3333JJ? &ace:?7ooper )td Black?# !b#T5T1*(L HTML!$b#!ul# !li#!a hre&:?buatKJayatKJberger hre&:?buatKJayatKJbergerak.html? ak.html? title:membuat tulisan bergerak#!&ont color:@JJJJ33 &ace:Times Ne *oman#7ara membuat tulisan bergerak!$a#!$&ont#!$li# !li#!a hre&:MenbuatKJ&rom hre&:MenbuatKJ&romKJkomentar.html KJkomentar.html title:membuat &rom komentar#!&ont color:@JJJJ33 &ace:Times Ne *oman#7ara membuat &rom komentar!$a#!$&ont#!$li# !li#!a hre&:MembuatKJlogi hre&:MembuatKJlogin.html n.html title:membuat halaman login#!&ont color:@JJJJ33 &ace:Times Ne *oman#7ara membuat halaman login!$a#!$&ont#!$li#   !$ul#!$&ont#!$table#!$td#!$tr# !tr height:?J?# !td colspan:K background:gambar$<<.0pg#!center#!b#!marYuee#!&ont &ace:?7ooper )td Black? color:?@JJ7733? si?#X Meskipun banyak kendala dalam pembuatan desain eb/ tapi tetap berusaha untuk mencapai hasil yang terbaik X!$&ont#!$b#!$marYuee#!$center#!$td#   !$tr#!$table# !di style:?positionE &i"edR bottomE Jp"R le&tE =Jp"RidthE=Jp"RheightE=OJp"R?# !img border:?J? src:?gambar$titter.ico? title:?&ollo my titter? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$di# !di style:?positionE &i"edR bottomE Jp"R rightE Jp"RidthE=JJp"RheightE=JJp"R?#!a hre&:@top# !img border:?J? src:?gambar$top.png? src:?gambar$t op.png? idth:J height:J title:?8embali ke atas? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$di# !di style:?positionE &i"edR T1PE Jp"R rightE =Jp"RidthE=Jp"RheightE=OJp"R?#!a hre&:login.html#!img border:?J? src:?gambar$c.png? idth:J height:J title:?8embali ke login? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$di# !body background:gambar$yy.0pg# !$body# !'MB'D )*7:?MP$KJWonK>tKJ)eeKJ2ouKJTonightKUPart=KS.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 . 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# bergerak!$tit le# !link rel:icon hre&:gambar$alien.ico# !$head#

!body#   !center# !table idth:=JJJ height:JJ border:?J? background:gambar$"".0pg cellpadding:?J? cellspacing:?KJ? # !tr# !td colspan:?K? color:?hite? align:center# !img src:?gambar$=.png? idth:?=JJJ? height:?JJ?# !$td# !$tr# !tr height:?J?# !td colspan:K background:gambar$<<.0pg align:le&t height:?KJ?# !p#!ul#!ul#!le&t#!BLN8#!b#!&ont color:?@JJ7733? siSO height:>JJ background:gambar$<<.0pg align:top # !b#!center#!span style:?&ont6si
!di style:?colorE @3333JJR?#!marYuee direction:?le&t?#!b#Teks Bergerak 8e 8iri...!$b#!$marYuee# !$di# !br $# !di style:?colorE @3333JJR?# !marYuee direction:?up? height:?J?#!center# !b#Teks Bergerak 8e (tas...!$b#!$center# !$marYuee# !$di# !br $# !a name:more#!$a#!br $#!br $#!span style:?&ont6si
!$span#!$di#!br $#!br $#!b#!&ont color:@JJ3333#.!$b# 1k. )eterusnya cara untuk menetapkan ruangan untuk MarYuee bergerak !$&ont#!br $#!br $#!di style:?colorE @JJOO33R?# !marYuee idth:?KJJ?#!b#Teks ini bergerak dalam kelebaran KJJ  idth!$b#!$marYue  idth!$b#!$marYuee#!$di#!b e#!$di#!brr $#!di class:?code?#! class:?code?#!br 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$marYueeQ  idthQltR$marYueeQgtR!$span gtR!$span#!$di# #!$di# !br $#!&ont color:@JJ3333#(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:?&ont6siJJ bgcolor: align:top# !table align:?le&t? idth:KJJ border:J bgcolor: bordercolor:green# bordercolor: green# !tr align:center# !td#!p#!a hre&:?httpE$$.&acebook.com$ 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:le&t idth:KJJ border:J bgcolor: bordercolor:green# bordercolor:gr een#   !center# !td idth:?KJJ? align:?top?#!&ont color:?@3333JJ? &ace:?7ooper )td Black?# !b#T5T1*(L HTML!$b# !ul#!li#!a hre&:?buatKJayatKJber hre&:?buatKJayatKJbergerak.html? gerak.html? title:membuat tulisan bergerak#!&ont color:@JJJJ33 &ace:Times Ne *oman#7ara membuat tulisan bergerak!$a#!$&ont#!$li# !li#!a hre&:MenbuatKJ&rom hre&:MenbuatKJ&romKJkomentar.html KJkomentar.html title:membuat &rom komentar#!&ont color:@JJJJ33 &ace:Times Ne *oman#7ara membuat &rom komentar!$a#!$&ont#!$li# !li#!a hre&:MembuatKJlogi hre&:MembuatKJlogin.html n.html title:membuat halaman login#!&ont color:@JJJJ33 &ace:Times Ne *oman#7ara membuat halaman login!$a#!$&ont#!$li# !$ul#!$&ont#!$table#!$td#!$tr !$ul#!$&ont#!$t able#!$td#!$tr#!tr #!tr height:?J?#!td colspan:K background:gambar$<<.0pg#!center#!b#!marYuee#!&ont &ace:?7ooper )td Black? color:?@JJ7733? si?#X Meskipun banyak kendala dalam pembuatan desain eb/ tapi tetap berusaha untuk mencapai hasil yang terbaik X!$&ont#!$b#!$marYuee#!$center#!$td# !$tr#

!$table# !di style:?positionE &i"edR bottomE Jp"R le&tE =Jp"RidthE=Jp"RheightE=OJp"R?# !img border:?J? src:?gambar$titter.ico? title:?&ollo my titter? alt:?animasi bergerak gi&? $#!$a#!small#!center# !$di# !di style:?positionE &i"edR bottomE Jp"R rightE Jp"RidthE=JJp"RheightE=JJp"R?#!a hre&:@top# !img border:?J? src:?gambar$top.png? idth:J height:J title:?8embali ke atas? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$di# !di style:?positionE &i"edR T1PE Jp"R rightE =Jp"RidthE=Jp"RheightE=OJp"R?#!a hre&:login.html# !img border:?J? src:?gambar$c.png? idth:J height:J title:?8embali ke login? alt:?animasi bergerak gi&? $#!$a#!small#!center#!$di#!body background:gambar$yy.0pg# !$body# !'MB'D )*7:?MP$(>"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 =. (rtikel tulisan bergerak