MAKALAH HTML WEB PROGRAMING

Disusun Oleh : Abdul Rachim Nurul Ismy Algi Fahmi

TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH PROF. DR. HAMKA 2014

BAB I PENDAHULUAN

1.1

Lata B!"a#a$% Ma&a"a' Dunia informatika akan selalu bersifat dinamis, dalam artian akan selalu

berkembang mengikuti jaman !al yang "aling nam"ak adalah "erkembangan internet #aat ini semakin banyak bermunculan $ebsite-$ebsite di dunia maya #ebagai user tentunya kita sangat sering menggunakan $ebsite tersebut Ada banyak sekali "rogram-"rogram yang da"at digunakan untuk membuat $ebsite tersebut, contohnya : "h", dream$a%er, joomla, dll Namun dasar dari "emrograman tersebut teta"lah satu yakni !&'( #ebagai dasar "embuatan $eb sebaiknya bahasa "emrograman !&'( harus dikuasai oleh web maker atau "embuat $eb Namun dikarenakan banyaknya soft$are atau"un $eb yang mena$arkan "embuatan $eb secara instan, bahasa "emrograman !&'( sering dilu"akan, "adahal ini meru"akan dasar )erlatar belakang ini maka "enulis "ada makalah ini akan membahas mengenai bahasa "emrograman !&'(

1.2 T()(a$ P!$("*&a$ #etia" melakukan "erkerjaan tentunya ada sasaran yang hendak dica"ai Demikian "ula yang terjadi dalam "enyusunan makalah ini &ujuan "enyusunan makalah ini adalah sebagai sarana "emenuhan atas tugas mata kuliah "emrograman terstruktur #elain itu makalah ini juga disusun untuk menja$ab "ermasalahan yang telah dijabarkan "ada latar belakang masalah *enulis berhara" makalah ini "ada akhirnya akan berguna sebagai sumber referensi bagi sia"a saja yang ingin mem"elajari mengenai bahasa "emrograman !&'(

1.+

M!t,-! P!$%(./("a$ Data Dalam "embuatan makalah ini "enulis menggunakan + metode yakni

ke"ustakaan dan obser%asi 'etode ke"ustakaan disini maksudnya "enulis menyusun makalah ini dengan menggunakan sumber referensi yang sudah ada #edangkan metode obser%asi maksudnya menganalisanya "enulis mengambil bebera"a

sam"el listing "rogram dan dida"at, mem"raktekkannya dan mencoba

1.4 S*&t!.at*#a P!$("*&a$ 'akalah ini terbagi daslah , bagian inti, yakni: )A) I : *-NDA!.(.AN *ada bab ini akan dijelaskan mengenai latar belakang "emilihan tema, tujuan "enulisan, metode yang digunakan "enulis dan sistematika "enyusunan makalah ini )A) II : *-')A!A#AN *ada bagian ini akan dijelaskan mengenai dasar-dasar !&'(, "engertian !&'(, dan bebera"a contoh "emrograman menggunakan bahasa "emrograman !&'( )A) III : *-N.&.* *ada bagian ini akan diberikan kesim"ulan dari "embahasan yang sudah ada sebelumnya

BAB II DESAIN WEB DENGAN MENGGUNAKAN HTML

2.1. P!$%! t*a$ HTML !&'( atau !y"erte/t 'arku" (anguage meru"akan "rotokol yang digunakan untuk mentransfer data atau document dari $eb ser%er ke bro$ser kita 0Internet -/"lorer, Netsca"e Na%igator, Neo*lanet, dll1 !&'( dirancang untuk digunakan tan"a tergantung "ada suatu "latform tertentu Dokumen !&'( adalah suatu te/t biasa, dan disebut sebagai marku" language karena mengandung tanda 2 tanda 0 tag 1 tertentu yang digunakan untuk menetukan tam"ilan suatu teks dan tingkat ke"entingan dari teks tersebut dalam suatu dokumen !&'( inilah yang memungkinkan Anda menjelajah internet dan melihat halaman $eb yang menarik *ada dokumen !&'( yang termasuk system by"erte/t, maka dari itu kita tidak harus membaca dokumen tersebut secara urut dari atas keba$ah atau sebaliknya 3iri utama !&'( adalah adanya tag dan elemen -lemen tersebut adalah !-AD ini berfungsi memberikan informasi tentang dokumen tersebut dan )OD4 yang berfungsi menentukan bagaimana isi suatu dokumen ditam"ilkan didalam bro$ser #ekarang ini di "asaran terda"at banyak sekali !&'( authoring 0soft$are yang digunakan untuk membuat atau mendesain halaman $eb1 'acromedia Dream$ea%er, Adobe 5o(i%e, '# Front*age sebagai contohnya &eta"i tan"a mengetahui dasar-dasarnya kita tidak akan mem"eroleh hasil yang maksimal 6arena $alau"un soft$are-soft$are tersebut semakin mena$arkan kemudahan dalam membuat halaman $eb, teta"i biasanya seseorang masih "erlu untuk

mengedit halaman $eb tersebut secara manual &erutama untuk halaman $eb yang sangat kom"lek Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain $eb 4ang dibutuhkan hanya sebuah $ord "rocessor Anda bisa menggunakan Note"ad, 7ord*ad, '# 7ord atau yang lainnya &a"i yang "aling mudah adalah menggunakan Note"ad

2.2

St (#t( -a&a HTML !&'( 0!y"ert &e/t 'arku" (anguage1 meru"akan bahasa "emrograman

yang digunakan dalam "embuatan halaman $eb Dalam "enggunaannya sebagian besar kode !&'( tersebut harus terletak di antara tag kontainer 4aitu dia$ali dengan 8namatag9 dan diakhiri dengan 8:namatag9 0terda"at tanda ;:;1 )erikut ini adalah kerangka dasar dokumen !&'( yang meru"akan aturan dari 7, 3onsortium 8!&'(9 8!-AD9<<<bagian dari head<<<8:!-AD9 8)OD49<<<bagian dari body<<<8:)OD49 8:!&'(9

#ebuah halaman $eb minimal mem"unyai em"at buat tag, yaitu : 0HTML1 #ebagai tanda a$al dokumen !&'( 0HEAD1 #ebagai informasi "age header Di dalam tag ini kita bisa meletakkan tag-tag &I&(-, )A#-, I#IND-=, (IN6, #3RI*&, #&4(- > '-&A 0TITLE1

#ebagai titel atau judul halaman 6alimat yang terletak di dalam tag ini muncul "ada bagian "aling atas bro$ser Anda 0"ada title bar1 3ontoh : 8&I&(-9&i"s !&'( -- $$$ klik-kanan com8:&I&(-9 0BODY1

akan

Di dalam tag ini bisa diletakkan berbagai page attribute se"erti $arna latar belakang, $arna teks, $arna link, $arna %isited link, $arna acti%e link dan lainlain Atribut : )53O(OR, )A365RO.ND, &-=&, (IN6, ?(IN6, A(IN6, (-F&'AR5IN > &O*'AR5IN 3ontoh : 8)OD4 bgcolor@;ABBBBBB; background@;images:"cb gif; te/t@;AFFFFFF; link@;AFFBBBB; %link@;FFFFBB; alink@;ABBBBFF;9 #ebuah contoh sederhana dokumen !&'( : 8!&'(9 8!-AD9 8&I&(-9!alaman "embuka 8:&I&(-9 8:!-AD9 8)OD4 bgcolor@;AFFFFFF; background@;images:gambarC gif; te/t@;AFFBBBB;9 L!ta##a$ t!2t3 *.a%!&3 -a$ "*$# A$-a -* &*$* 8:)OD49 8:!&'(9

a.

M!.4(at H,.!/a%! S!-! 'a$a Dalam "embuatah sebuah home"age, ada bebera"a soft$are yang da"at

digunakan antara lain: C Note"ad

6

*rogram teks sederhana milik 7indo$s yang da"at digunakan untuk mengetikkan "erintah !&'( Dika kita menggunakan (inu/ atau uni/, maka kita bisa menggunakan %i atau "ico sebagai "engganti Note"ad Ada"un langkah kerja membuat home"age dengan menggunakan Note"ad adalah: 6lik #tart "ada menu utama 7indo$s All *rograms Accessories Note"ad + *embuat 5rafis .ntuk membuat gambar yang menarik "erhatian #e"erti Adobe *hotosho", 3orelDra$, dsb , )ro$ser .ntuk melihat hasil:tam"ilan home"age dari "rogram -"rogram !&'( yang telah kita ketikkan di Note"ad 4ang kita gunakan kali ini adalah 'icrosoft Internet -/"lorer Ada + hal "enting yang "erlu kita ketahui yaitu fasilitas ?ie$ #ource dan Refresh yang berguna mem"erce"at "ekerjaan jika kita menggunakan Internet -/"lorer, yaitu : ?ie$ #ource, untuk melihat source 0isi "erintah !&'(1 dari sebuah dokumen !&'( *ada bro$ser internet e/"lorer,jika mengklik ?ie$ lalu "ilih #ource, maka akan terlihat source dari dokumen tersebut se"erti "ada Note"ad #ehingga kita akan lebih mudah melakukan "erubahan:edit dengan ce"at Refresh, melihat dengan ce"at tam"ilan baru dokumen !&'( yang telah di ubah Dengan cara mengklik symbol refresh atau tekan FE
7

4.

P!$%at( a$ Ta./*"a$ H,.!/a%! Agar tam"ilan desain lebih menarik, maka dalam membuat "rogram !&'(

sebaiknya juga mem"erhatikan bebera"a "ro"erti, yaitu : 15 HTML F, .at T!#&

.ntuk menda"atkan halaman $eb yang baik Anda harus melakukan "engaturan terhada" teks se"erti memilih jenis dan ukuran huruf, "erataan, dll &ag-tag di ba$ah ini yang biasa digunakan dalam "engaturan teks : !eaders: 8!n9 8:!n9 Digunakan untuk mengatur ukuran huruf "ada header ;n; mem"unyai nilai antara C - F atau antara 8!C9 sam"ai 8!F9, dengan 8!C9 meru"akan ukuran terbesar dan 8!F9 meru"akan ukuran terkecil 3ontoh tulis dalam note"ad :

<HTML><BODY> <H1>Header level 1</H1> <H2>Header level 2</H2> <H3>Header level 3</H3> <H4>Header level 4</H4> <H5>Header level 5</H5> <H6>Header level 6</H6> <HTML><BODY>

*aragra"h )aru: 8*9 Digunakan untuk "indah alinea atau "aragraf &ag ini bisa diberi akhiran 8:*9 ta"i juga bisa tidak diberi
8

*erhatikanlah contoh tulisan di ba$ah ini: 8!&'(98)OD49

Paragraf perta a <P>Paragraf !ed"a <P>Paragraf !et#ga </BODY></HTML> (ine )reak: 8)R9 (ine break digunakan untuk "indah ke baris baru 3obalah membuat tulisan berikut "ada Note"ad:

<HTML><$%d&> $ar#' perta a Bar#' !ed"a Bar#' !et#ga <HTML><BODY>

6esim"ulannya, "enekanan tombol E$t! tidak menghasilkan baris dalam tam"ilan bro$ser Demikianlah sifat "enulisan dokumen !&'( (antas, bagaimana caranya membuat barisG 5unakanlah tag 8)R9 &ag ini tidak mem"unyai tag "enutu" )ukalah source kode file !&'( tadi lalu edit se"erti berikut:

<HTML><BODY> Bar#' perta a <B(>Bar#' !ed"a <B(>Bar#' !et#ga </HTML></BODY>

)

#im"an kemudian lihat hasilnya dengan me- refresh "ada bro$ser !asilnya akan se"erti ini: Bar#' perta a Bar#' !ed"a Bar#' !et#ga

'embuat baris kalimat, &ag 8)R9 tersebut da"at "ula digunakan untuk membuat baris kosong, artinya baris yang tidak mem"unyai kalimat a"a-a"a -ditlah sekali lagi source code menjadi se"erti ini:

<HTML><BODY> Bar#' !ee*a </BODY></HTML> perta a<B(><B(>Bar#' !ed"a !%'%*g+ da* #*# $ar#'

!et#ga<B(><B(><B(>Bar#' !ee pat da* !el# a !%'%*g+ da* #*# $ar#'

#im"an lalu refresh sekali lagi maka hasilnya akan se"erti ini: Bar#' perta a Bar#' !ed"a !%'%*g+ da* #*# $ar#' !et#ga Bar#' !ee pat da* !el# a !%'%*g+ da* #*# $ar#' !ee*a

Di sini kita lihat bah$a tag 8)R9 yang ditulis dua kali akan menghasilkan dua baris, demikian seterusnya

No (ine )reak: 8NO)R9 )ila digunakan tag ini maka teks yang "anjang tidak secara otomatis "indah baris ba$ahnya bila baris "ertama sudah terlalu "anjang

1,

 Font 8FON&9 .ntuk mendefinisikan berbagai attribut FON&, yaitu : #IH-, FA3-, 3O(OR #iIe adalah .kuran font yang digunakan, berkisar antara C - J dengan C meru"akan ukuran terkecil dan J meru"akan ukuran terbesar Face adalah jenis atau nama font Anda bisa memilih maksimal , jenis font yang masing-masing di"isahkan oleh koma )ila terda"at s"asi yang terletak "ada nama font maka harus digunakan tanda garis ba$ah 0 K 1 Dalam memilih jenis font ini harus di"ertimbangkan a"akah font yang kita gunakan "ada halaman $eb kita nantinya akan terda"at "ada kom"uter "engguna yang lain 0"engakses $eb kita1 *endeknya kita tidak usah menggunakan font-font yang bentuknya anehaneh, gunakan saja font standar &a"i bila Anda ingin menggunakan font yang sedikit ;aneh; Anda bisa menggunakan gra"hic 3O(OR adalah 7arna font, didefinisikan dengan menggunakan nilai R5):!-= atau bisa juga langsung menggunakan nama $arna 0red misalnya1 3ontoh : <-O.T /01234 -452367erda*a+ 4r#al+ Helvet#8a6 5OLO(369--,,,,6>5%*t%: te!' &a*g $er;ar*a !asilnya akan terlihat se"erti : 5%*t%: te!' &a*g $er;ar*a 8)A#-FON&9 Digunakan untuk mendefinisikan ;default te/t; Attribut sama dengan attribut FON& &ag FON& akan mengo%er$rite setting "ada )A#-FON& 3ontoh : <B4/2-O.T /01232 -452364r#al+Helvet#8a6 5OLO(369--,,,,6> era: era:</-O.T>

03I&-1Digunakan untuk Luoting te/t 03OD-1

11

'onos"aced font 0digunakan bila Anda ingin meletakkan 0mem"erlihatkan1 kode !&'( "ada dokumen !&'( Anda1

0#A'*1 'onos"aced font 0digunakan bila Anda ingin meletakkan 0mem"erlihatkan1 kode !&'( "ada dokumen !&'( Anda1 06)D1 'onos"aced font 0digunakan bila Anda ingin meletakkan 0mem"erlihatkan1 kode !&'( "ada dokumen !&'( Anda1 0BIG1 .kuran teks akan lebih besar satu ukuran 0#'A((1 .kuran teks akan lebih kecil satu ukuran 0#.*1 'embuat tekssu"erscri"t 0#.)1 membuat tekssub scri"t 0A))R-?1Abbre%iations 0A3RON4'1 .ntuk akronim 0*-R#ON1 Digunakan untuk inde/ing 0M1 'embuat short inline Luotation 0?AR1 Membuat variable name, selalu dalam ITALICS. #elain tag dan atribut di atas, masih terda"at lagi tag-tag yang berhubungan dengan "engaturan teks, yaitu : 8I9 Italic te/t 8.9 .nderscore 0&&1 &y"e$riter 0#1 #trikeout - dra$s a line through the te/t 0*R-1 *reformatted &e/t

12

 0DFN1 efinition 0)(IN61 &e/t berkedi" 0lebih baik jangan digunakan1 0#&RON51 #trong 0ADDR-##1 &ag-tag ini berfungsi untuk mengubah ti"e huruf yaitu menebalkan 0 4,"-1, membuat tulisan miring 0italic1 atau memberi garis ba$ah 0underline1 )uka lagi "rogram Note"ad kemudian tuliskan se"erti berikut ini: <HTML> <H24D> <T0TL2>T#pe<t#pe Te!'</T0L2> </H24D> <BODY>

Ada tiga macam ti"e tulisan yang "aling sering digunakan dalam "enulisan dokumen a"a saja 6etiga ti"e tersebut ialah tulisan tebal, tulisan miring dan tulisan bergaris ba$ah )isa "ula dua ti"e huruf di"adukan misalnya tulisan tebal dan miring, tulisan tebal dan bergaris ba$ah atau tulisan miring dan bergaris ba$ah )ahkan bisa "ula ketiga ti"e tulisan tersebut sekaligus bergabung menjadi satu beru"a tulisan tebal, miring dan bergaris bawah

25

HTML I.a%! 6 %a.4a 5

Digunakan untuk menam"ilkan image atau animasi gif "ada halaman $eb Anda Atributnya adalah : alt, align@0center, left, right1, hs"a%e, %s"ace, border, $idth > height 3ontoh : <0M= /(536l%g%>g#f6 alt360*# adala: l%g% :ala a* pe $"!a6 ;#dt:32,, :e#g:t31,,> <0M= /(536l%g%>g#f6 :'pa8e31, v'pa8e35 al#g*3r#g:t $%rder32>
13

+5

HTML L*$#& 7

Digunakan untuk membuat link ke halaman lain &ulisan yang terletak antara 8A9 dan 8:A9 akan terda"at garis ba$ah 3ontoh : <4 H(2-36:ala a*2>:t l6>?l#! d# '#*#</4> .ntuk membuat link ke halaman lain <4 H(2-36 a#lt%@;e$ a'terA!l#!<!a*a*>8% 6>?l#! d# '#*#</4> .ntuk membuat link "ada alamat e-mail <4 H(2-369apl#!a'#6>?l#! d# '#*#</4> .ntuk membuat link ke bagian lain "ada halaman yang sama <4 H(2-36:ala a*la#*>:t l9apl#!a'#6>?l#! d# '#*#</4> .ntuk membuat link kebagian lain "ada halaman yang berbeda <4 H(2-36:ala a*2>:t l6><0M= /(536ga $ar>g#f6></4> .ntuk membuat link dengan menggunakan gambar 45 HTML L*&t 6 -a&a ( (ta$ 5

&erda"at tiga ti"e list yang da"at digunakan, yaitu : U$, -! !- L*&t& 0UL1 .ntuk membuat daftar item dengan tanda bullet (ist entries didefinisikan dengan tag 8(I9 3ontoh : <BL> <L0> 0te <L0> 0te <L0> 0te </BL> !asil dari kode di atas adalah: 0te 0te *% er 1 *% er 2
14

*% er 1 *% er 2 *% er 3

0te

*% er 3 Dengan atribut &4*- Anda da"at mendefinisikan bentuk disc, circle atau

sLuare bullet "oint 3ontoh : 8.( 3O'*A3& &4*-@sLuare9 O -! !- L*&t&7 0OL1 Duga digunakan untuk membuat daftar item, dengan tia" item da"at menggunakan angka arab atau roma$i (ist entries juga didefinisikan dengan 8(I9 tag 3ontoh : <OL TYP230> <L0> 0te <L0> 0te <L0> 0te </OL> !asil dari kode di atas adalah : 0te 0te 0te *% er 1 *% err 2 *% err 3 *% er 1 *% er 2 *% er 3

.ntuk &4*- Anda da"at juga menggunakan : 1- Default numbers, C, +, ,, etc A- !uruf besar A, ), 3, etc a- !uruf kecil a, b, c, etc I- Roma$i huruf besar I, II, III, etc *8 Roma$i huruf kecil , i, ii, iii, etc D!9*$*t*,$ L*&t&7 0DL1 3ontoh : <DL> <DT> 0te perta a>
15

<DD> Pe*Cela'a* te*ta*g #te <DT> 0te </DL> !asil dari kode di atas adalah : 0te 0te perta a> Pe*Cela'a* te*ta*g #te !ed"a> !ed"a Pe*Cela'a* te*ta*g #te :5 !ed"a> <DD> Pe*Cela'a* te*ta*g #te

perta a> !ed"a

perta a>

HTML Ta4"! 6 ta4!" 1 6arena dengan

&abel sangat "enting artinya dalam desain $eb

menggunakan tag table Anda da"at membuat halaman $eb ;terbagi; "ada bebera"a kolom atau baris 3ontohnya se"erti "ada halaman $eb yang sedang Anda baca ini &erda"at tiga tag atau elemen utama yang digunakan dalam "embuatan table : 0TABLE13 0TR13 dan 0TD1. 4ang "erlu diingat adalah bah$a tab 0TR1 dan 0TD1 harus terletak di antara tag 0TABLE1 dan 0;TABLE1 0TABLE1 &erdiri dari atribut : a"*%$ - "erataan : rata kiri 0left1, tengah 0center1 atau kanan 0right1 4%<,", - $arna latar belakang 0background1 dari tabel 4, -! - ukuran lebar border tabel 0dalam "i/el1 <!""/a--*$% - jarak antara isi cell dengan batas cell 0dalam "i/el1 <!""&/a<*$% - jarak antar cell 0dalam "i/el1 =*-t' - ukuran tabel dalam "i/el atau "ercent 3ontoh : <T4BL2 al#g*368e*ter6 $g8%l%r369,,,,--6 $%rder3626 8ellpadd#*g3656 8ell'pa8#*g3626 ;#dt:36),D6>
16

0TR1 &ag ini digunakan untuk membuat baris baru 0"ada tabel1 &erdiri dari atribut: a"*%$ - "erataan : rata kiri 0left1, tengah 0center1 atau kanan 0right1 4%<,", - $arna latar belakang dari baris >a"*%$ - "erataan %ertikal : to", middle atau bottom 3ontoh : 8&R align@;right; bgcolor@;ABBBBFF; %align@to"9 0TD1 &ag ini digunakan untuk membuat kolom baru "ada tabel a"*%$ - "erataan 4a<#% ,($- - image yang digunakan sebagai latar belakang dari kolom 4%<,", - $arna latar belakang <,"&/a$ - lihat gambar contoh '!*%'t - ukuran tinggi cell dalam "i/els $,= a/ - membuat su"aya isi dari kolom teta" berada "ada satu baris ,=&/a$ - lihat gambar contoh >a"*%$ - "erataan %ertikal :to", middle atau bottom =*-t' - ukuran kolom dalam "i/el atau "ercen 3ontoh : <TD al#g*36r#g:t6 $a8!gr%"*d36$a8!>g#f6 $g8%l%r369,,,,--6 8%l'pa*3636 :e#g:t362,,6 *%;rap r%;'pa*3626 val#g*36$%tt% 6 ;#dt:363,,6 <ta$le ;#dt:361,,6 $%rder3616 8ell'pa8#*g3626 8ellpadd#*g3626> <tr> <td $g8%l%r369,,,,--6> E*$'pF</td> <td $g8%l%r369----666>E*$'pF</td> <td r%;'pa*3626 $g8%l%r369--33666>E*$'pF</td> </tr>
17

<tr> <td 8%l'pa*3626 $g8%l%r3693355666>E*$'pF</td> </tr> <tr> <td 8%l'pa*3636 $g8%l%r369--55))6>E*$'pF</td> </tr> </ta$le> <ta$le ;#dt:361,,6 $%rder36,6 8ell'pa8#*g36,6 81<FRAMESET cols="*,140"> <FRAME ellpadd#*g36,6>
SRC="homepage.htm" NAME="F ame1"> <FRAME SRC="me!".htm" NAME="F ame#"> <$FRAMESET>

<

tr> <td $g8%l%r369,,,,--6>E*$'pF </td> <td $g8%l%r369----666>E*$'pF</td> <td r%;'pa*3626 $g8%l%r369--33666>E*$'pF</td>

2<FRAMESET cols="100,*"> <FRAME SRC="homepage.htm" NAME="F ame1"> <FRAME SRC="me!".htm" NAME="F ame#"> <$FRAMESET>

3<FRAMESET o%s="100,*"> <FRAME SRC="homepage.htm" NAME="F ame1"> <FRAME SRC="me!".htm" NAME="F ame#"> <$FRAMESET>

</tr

<FRAMESET o%s="*,&0"> <FRAME A. ?. 4 HTML F a.!& SRC="homepage.htm" NAME="F ame1"> <FRAME SRC="me!".htm" NAME="F ame#"> <$FRAMESET>

5<FRAMESET o%s="*,&0"> <FRAME SRC="homepage.htm" NAME="F ame1"> <FRAMESET cols="'0(,'0("> <FRAME SRC="me!".htm" NAME="F ame#"> <FRAME SRC="me!"#.htm" NAME="F ame)"> <$FRAMESET><$FRAMESET>

B.

6<FRAMESET cols="*,'0("> <FRAME SRC="homepage.htm" NAME="F ame1"> <FRAMESET o%s="1'(,1'(,*0("> <FRAME SRC="me!".htm" NAME="F ame#"> <FRAME SRC="me!"#.htm" NAME="F ame)"> <FRAME SRC="me!").htm" NAME="F ame4"> <$FRAMESET><$FRAMESET> 7<FRAMESET cols="'0(,'0("> <FRAMESET o%s="'0(,'0("> <FRAME SRC="homepage.htm" NAME="F ame1"> <FRAME SRC="homepage#.htm" NAME="F ame#"> <$FRAMESET> <FRAMESET o%s="'0(,'0("> <FRAME SRC="me!".htm" NAME="F ame)"> <FRAME SRC="me!"#.htm" NAME="F ame4"> <$FRAMESET><$FRAMESET> 8<FRAMESET o%s="1'(,*0(,1'("> <FRAME SRC="homepage.htm" NAME="F ame1"> <FRAMESET cols="1'(,*0(,1'("> <FRAME SRC="me!".htm" NAME="F ame#"> <FRAME SRC="me!"#.htm" NAME="F ame)"> <FRAME SRC="me!").htm" NAME="F ame4"> <$FRAMESET> <FRAME SRC="homepage.htm" NAME="+,-"> <$FRAMESET><$FRAMESET>

18

<.

K(./("a$ Ta% HTML 0@88 881 'emberi komentar atau keterangan 6alimat yang terletak "ada tag kontiner ini tidak akan terlihat 0a ' !91 0a $a.!1 0a//"!t1 0a !a1 041 04a&!9,$t1 04%&,($-1 04*%1 04"*$#1 04,-A1 04 1 0<a/t*,$1 0<!$t! 1 0<,..!$t1 0--1 0-*>1 0!.4!-1 09$1 09,$t1 09, .1 09 a.!1 "ada bro$ser 'embuat link ke halaman lain atau ke bagian lain dari halaman tersebut 'embuat nama bagian yang didefinisikan "ada link "ada halaman yang sama #ebagai a$al dari Da%a a""lets 'endefinisikan daerah yang da"at diklik 0link1 "ada image ma" 'embuat teks tebal 'embuat atribut teks default se"erti jenis, ukuran dan $arna font 'emberi 0suara latar1 background sound "ada halaman $eb 'em"erbesar ukuran teks sebesar satu "oint dari defaultnya 'embuat teks berkedi" &ag a$al untuk melakukan berbagai "engaturan terhada" te/t, $arna link > %isited link *indah baris 'embuat ca"tion "ada tabel .ntuk "erataan tengah terhada" teks atau gambar 'eletakkan komentar "ada halaman $eb tidak tidak akan nam"ak "ada bro$ser Indents teks Re"resents different sections of te/t 'enambahkan sound or file a%i ke halaman $eb #e"erti tag 8a name9 'engganti jenis, ukuran, $arna huruf yang akan digunakan utk teks 'endefinisikan in"ut form 'endefinisikan frame
1)

09 a.!&!t1 0'11 ... 0'?1 0'!a-1 0' 1 0't."1 0*1 0*.%1 0*$/(t1 0"*1

'endefinisikan

attribut

halaman

yang

akan

menggunakan frame .kuran font 'endefinisikan head document 'embuat garis horiIontal )ararti dokumen html 'embuat teks miring Image, imagema" atau an animation 'endefinisikan in"ut field "ada form 'embuat bullet "oint atau baris baru "ada list 0ber"asangan dengan tag 8dir9, 8menu9, 8ol9 and 8ul9 1 'endefinisikan client-side ma" 'embuat scrolling teks 0teks berjalan1 - hanya "ada '# I'encegah ganti baris "ada teks atau images Dika bro$ser user tidak mendukung frame 'endefinisikan a$al dan akhir list 5anti "aragraf 'embuat teks dengan ukuran huruf yg sama

0.a/1 0.a B(!!1 0$,4 1 0$,9 a.!&1 0,"1 0/1 0/ !1

-.

K,-! ($t(# #a a#t! #'(&(& S*.4," >LuotN >am"N >ltN >gtN >O-ligN >oeligN >#caronN >scaronN >4umlN >circN >tildeN >ens"N >ems"N >thins"N >I$njN >I$jN >lrmN
2,

Ka a#t! -*ta./*"#a$ ; > 8 9 Ooe O P Q R S

A%

>rlmN >ndashN >mdashN >lsLuoN >rsLuoN >sbLuoN >ldLuoN >rdLuoN >bdLuoN >daggerN >DaggerN >"ermilN >lsaLuoN >rsaLuoN >euroN

2 T U V W X Y Z [ \ ] ^ _ `

8html9 8head9 8title9 3ontoh scri"t !&'( 8:title9 8:head9 8body9 8h+9)elajar Desain 7-) dengan !&'(8:h+9 !&'( adalah dasar "embuatan $ebsite,8br9 dimana "erintah 2 "erintah !&'( da"at diketik 8br9 "ada note"ad 0bila menggunakan # O 7indo$s1 atau ?i0bila menggunakan (inu/1 8:body9 8:html9

21

#im"an dengan nama #ourceC htm dengan memilih ty"e All files 6emudian buka dengan )ro$ser dan lihat hasilnya

BAB III KESIMPULAN

*ada akhir makalah ini, "enulis akan memberikan sedikit kesim"ulan tentang isi makalah 6eberadaan Internet atau lebih dikenal dengan istilah dunia maya "ada saat sekarang ini meru"akan bukan hal yang asing lagi bagi setia" orang melainkan telah dikenal oleh seluruh orang hm"ir diseluruh "enjuru dunia 'aka dari itu dalam "embuatan 7ebsite dituntut untuk lebih maju lagi dan berkembang tentunya mengikuti "erkembangan Iaman *ara "rogrammer saling berusaha membuat sesuatu yang lebih baru lagi yang tentunya lebih u"tudate dengan merancangkan "rogram 2 "rogram yang lebih canggih, salah satunya dengan menggunakan "emrograman !&'( &entunya sebelum kita melangkah lebih maju lagi dalam "embuatan $ebsite dalam menggunakan "emrograman tersebut kita harus mengerti terlebih dahulu a"a itu !&'(, bagian 2 bagian utama dari !&'( dan seluruh layout $eb dalam "emrograman !&'(

22

)erbagai macam bentuk layout "ada "emrograman !&'( dalam mendesain $ebsite meru"akan bagian 2 bagian yang harus diketahui, karena itu menentukan dari hasil rancangan dalam "embuatan suatu "ogram: $ebsite A"alagi dengan "erkembangan I"tek sekarang ini lebih menuntut untuk menghasilkan sesuatu "rogram atau"un $ebsite yang lebih menarik lagi #ehingga "ara "engguna dunia maya lebih merasa tertarik dan tentunya tidak membuat bosan dengan hasil: bentuk $ebsite atu"un "rogram tersebut

DAF&AR *.#&A6A

htt":::hans "olin"dg ac id:html:htmlKa:inde/ html htt":::riIkyramadhansttg $ord"ress com: htt":::agung"m ashatec com:+BBb:BF:Bb:dasar-html:, htt":::$$$ baka$an com:log:tag:html:

23