cara membuat desain web

8/17/2019 Cara Membuat Desain Web

1/29

CARA MEMBUAT DESAIN WEB

Membuat Desain Website Berbasis HTML Dengan Notepad++

Pengenalan Tag Pada HTML

Dalam HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilanyang kita inginkan. Tag pada HTML selalu diawali dengan dan ditutup

dengan dimana x adalah perintah dari apa yang kita inginkan.

• Daftar Tag Pada HTML

ELEMEN DASAR

Jenis Dokumen (terdapat pada awal danakhir dari file HTML)

Judul (harus selalu terdapat padamukadimah)

Mukadimah

(Header)

(keterangan umum seperti !udul ds".)

Batang Tuuh (isi dari halaman HTML)

!"RMAT TAMP#LAN

Huru$ Teal (#old)

Huru$ Miring ($talic)

%aris Ba&ah (%nderline & !arangdigunakan)

Rata Tengah ('enter & "erlaku untuk teksmaupun gam"ar)

Huru$ 'edi (#linking & tag terlucusampai kini)

kuran Huru$ (ont i*e & "oleh diisi dari+ sampai ,)

*arna Huru$

Pilih Jenis

Huru$

http://riyant17.blogspot.my/http://riyant17.blogspot.my/


2/29

PEM#SAH

Paragra$

(tag penutupseringkali tak

diperlukan)

Align Te+t

Pndah Baris
(pindah ke "aris "erikut)

%aris Datar (Hori*ontal -ule)

Penataan

Letak %aris

Teal %aris (dalam satuan pixel)

Lear %aris (dalam satuan pixel)

Lear %aris

Persentasi

(dalam persentasiterhadap le"ar

halaman)

LATAR BELA'AN% DAN *ARNA

Latar Belakang

%amar

(Tiled #ackground)

*arna Latar

Belakang


3/29

Sel dalam Tael (harus ada dalam setiap "aris ta"el)

Penataan Letak

Sel

'eala Tael (Ta"le Header & sepertidata dengan #old dan

'enter)

Penataan Letak

'eala Tael

*arna 'eala

Tael

A- Dasar dasar HTML

1. Mem"uat !udul ta" dalam halaman we" "uka notepad00 terle"ih dahulu kemudian ketikan

code di "awah ini

Langkah selan!utnya simpan dalam format HTML dan "uka file dengan firefox atau se!enisnya

maka hasilnya akan seperti pada gam"ar + "erikut

1am"ar +. 2udul Ta" Halaman


4/29

2. Mengatur paragraf texs "uka notepad00 kemudin ketikan code di"awah ini

T+8 H+,-68

H+,-68 H+,-68 H+,-68

H+,-68 H+,-68 H+,-68


5/29


maka hasilnya akan seperti pada gam"ar 4 "erikut

1am"ar 4. %kuran Huruf

4. Mengatur format texs #uka notepad00 kemudian ketikan code di"awah ini

(6886+@+6 '+8 :16'


maka hasilnya akan seperti pada gam"ar 5 "erikut


6/29

1am"ar 5. ormat tulisan

5. Mem"uat from komentar "uka notepad00 kemudian ketikan code di"awah ini

N+(+

E(+-)


7/29

G+6+G+6+

G+6+G+6+

H-2+K6-68M+&

A4+4B-O+68

C1@)+'


8/29

,) '+4

I6- &.)-6@ @ G1,00 1,00 K)-@ ,+6 (+0@ @ .+&11 Y+&11 M+0@ @ :+3411@ +6,+

F+3411@


9/29

1am"ar , link halaman we" lain

2. Mem"uat hyperlink antar "agian dalam we" "uka notepad00 kemudian ketikan atau copy

sa!a code di "awah ini


10/29

1am"ar 8. Link 9ntar #agian Dalam :e"

/- Memuat *esite Sederhana

1. Mem"uat halaman login pada we"site "uka notepad00 kemudian ketikan atau copy sa!acode di "awah ini

N+(+ A6,+

A)+(+'


11/29

A-)M-6-)-A80'0S'(4O@'14N1(4D0(4


12/29

6-0 K)+(-6 +6-'+

Langkah selan!utnya simpan dalam format HTML dan "uka file dengan firefox atau se!enisnya "ackground dapat anda ganti sendiri sesuai dengan kesukaan anda.

Hasilnya seperti pada gam"ar ; "erikut

1am"ar ;. Halaman login

2. Mem"uat halaman awal "uka notepad00 kemudian ketikan atau copy sa!a code di"awah

ini


13/29

N+&; +6,+ +0'- 0,+& 4+6.+@()-&+' ''1-+) ''1-+) HTML .+68 +,+ ,- -)(G40-'31( T+-;(+0-& +,+ @@+68+6; ''1-+) HTML 6'@ '-68@+' ()+???

N88+@ +,+ @+6??? 6+&; (+@+ ,+- -'; 0+.+; R-+6 &-,+.+'; +@+6(62)+0@+6 4+8+-(+6+ G40-' ,- 4+686 (6886+@+6 '+8'+8 HTML;,+6 -6- 6)-0 0,-+@+6 6'@ ()+ T+- 04)( -';? +,+.+68 ) ,-@'+&-

'+8 J)'J8'


14/29

,-86+@+6 6'@ (6)-0@+6 0-6'+@; +,+ ,+ 26-0; .+-' '+8316'+-6 ,+6 '+8 4-+0+T+8 316'+-6 +,+)+& '+8 .+68 4-0- 'x' .+68 +@+6 ,-'+(-)@+60')+& '+8 ,-'' C16'1& J)'',J8' 'x' .+68 ,-'+(-)@+6J)'/',J8'

T+8 4-+0+; .+&&J#9'+8 +2+; 316'1& J)'BRJ8' V4+@J)'4J8' @+8+ ) ,-'' 1)& '+8 J)'/4J8'; '+- 2-@+0-6'+@ .+68 ,-86+@+6 '+8 316'+-6; 316'1& J)'&J8'; .+&(0'- ,-'' ,68+6 J)'/&J8'T+8 .+68 ,-86+@+6 6'@ (68+@&-- 0-6'+@ 6.+ @++@' /V0)+0& 04)( 0-6'+@6.+; 316'1&6.+ J)'',J8'J)'/',J8'K-'+ 28+ ,++' (68'-@ +''-4' ,- ,+)+( 04+& '+8; 316'1&J)'41,. 4831)1=J#,J#J8' J)'/41,.J8' +'+J)'-6' '.=J#'x'J#J8'LANKAH

MEMBUKA NOTEPAD

LANKAH

MENETIKKAN SINTAK/SYNTA

B-@' -6- +,+)+& 0.6'+x ,+0+ .+68 ((46'@ 0+' HTML'+(+; @'-@@+6J)'&'()J8''@+6 6'; @(,-+6 @'-@J)'&+,J8'D+)+(316'+-6 &+,; @-'+ 4-0+ (68'-@+6 44++ 0-6'+@; '+-.+68+)-68 6'-68 2+68+6 )+ (68'-@+6 0-6'+@ J)''-')J8'

2,) &+)+(+6 G4 J)'/'-')J8' U6'@ 0-6'+@ )+-6 6+6'-0+2+S@++68 @'-@@+6 0-6'+@ '-') '+,-; 2+,- 0'--6-J)'&+,J8' J)''-')J8' 2,) &+)+(+6 G4J)'/'-')J8' J)'/&+,J8'K(,-+6 @'-@@+6 J)'41,.J8' T+8 41,. (+@+64+,+6/'4&/-6'- ,+- &+)+(+6 G4; '+(-)+6 G4 .+68 @-'+ )-&+'-' 4+0+) ,+- J)'41,.J8'B1,. '& '+8 316'+-6; 2+,-(0'- ,-'' H+0-) 0+(+- 0@++68J)'&'()J8'J)'&+,J8'J)''-')J8' ,) H+)+(+64 J)'/'-')J8'J)'/&+,J8'

J)'41,.J8'J)'/41,.J8'?J640 S)+62'6.+ 4+8+-(+6+ 3++ (6+(-)@+6 ')-0+6 @ ,+)+(HTML??? K'-@+6 0(4++68 'x' @ ,+)+( '+8 41,.; 316'1&6.+0'- -6- J)'41,.J8'C16'1& 'x' .+68 ,-'+(-)-6,- &+)+(+6 G4; B. R-+6 H-,+.+'J)'/41,.J8''0;


15/29

2-@+ 0,+&; @'-@@+6 J)'/&'()J8'; 03-' )68@+6.+ 0'- -6-J)'&'()J8'J)'&+,J8'J)''-')J8' ,) H+)+(+6 4 J)'/'-')J8'J)'/&+,J8'J)'41,.J8'C16'1& 'x' .+68 ,-'+(-)@+6,- &+)+(+6 G4; B. R-+6 H-,+.+'

J)'/41,.J8'J)'/&'()J8'@+)1 ,+&; 0@++68 0+ ,68+6 6+(+ ,+0+HTML@+)1 ,+& ,-0+; 4@+ ,+'+ .+68 '+,- ,- 0+?P+,+4+8-+6 -6-; @+)-+6 (68@-6 +@+6 4-686;8 @+6+ &'() .+68 '+,-,-0+ ,+6 3+ 3+ ,-@'-@@+6; '6.+'+ 8+8+) M+)+& .+68'4@+ +,+)+& :-) ,- 61'+,/G1,+, '+ @6++???K+6+@'-@+ (60+; :-) '04' ,- 0+ ,+)( 46'@ TT; 4@+6HTML N+& 3++ (60+ ,+)( 46'@ HTML .+-' @'-@+ (60+;+,+ 0+' '(+' ,- 4+G+& '(+' @-'+ (6)-0 6+(+ :-);? .+@6-S+ A0 T. S-)+&@+6 4+& ,+- 'x' ,13(6'V*'x' (62+,- +)):-)0; @'-@+ (6)-0 6+(+; ,- +@&- ,- 4-@+6 x'60- &'();316'1& ,+0+HTML&'()


16/29

C++((4+' ')-0+6 48+@C++ ((4+'&+)+(+6 )18-6 M0@-64+6.+@ @6,+)+ ,+)+( (4+'+6 ,0+-6 G4; '+- ''+ 40+&+6'@ (63++- &+0-) .+68 '4+-@


17/29

1am"ar +


18/29

R-+6H-,+.+' S@1&+21; 9N1(4 T-,


19/29

NAMA S+@+'+; A-)


20/29

:+3=T-(0 NG R1(+6>C++ ((4+' ')-0+648+@

C++ ((4+'&+)+(+6 )18-6 M0@-6 4+6.+@ @6,+)+,+)+( (4+'+6 ,0+-6 G4; '+- ''+ 40+&+ 6'@ (63++-&+0-) .+68 '4+-@


21/29

1am"ar ++. Mem"uat data pri"adi

4. Mem"uat al"um galery "uka notepad00 kemudian ketikan atau "isa copy sa!a code di"awahini


22/29


23/29

C++ ((4+' ')-0+6 48+@ C++ ((4+'&+)+(+6 )18-6 M0@-6 4+6.+@ @6,+)+,+)+( (4+'+6 ,0+-6 G4; '+- ''+ 40+&+ 6'@ (63++-&+0-) .+68 '4+-@


24/29

C++ ((4+' ')-0+6 48+@


25/29

S)+(+',+'+68 ,- G40-' '+(+ 0+.+


26/29

T@0 B8+@ K B+G+&J)'(+W,-3'-16="@6-68@+,+ ++& (+6+ +6,+ +@+6 '@0 ' S31)) A6,+ 41)& -)-& 0+(++,+ ; ,1G6; -8&'; ):'J)'(+W031))+(16'=""J8'J)'/(+WJ8'O6 6'@(684+& @)+2+6T@0-6- 0'- S-'


27/29


28/29

C++ ((4+' ')-0+648+@ C++ ((4+'&+)+(+6 )18-6 M0@-64+6.+@ @6,+)+ ,+)+( (4+'+6 ,0+-6 G4; '+- ''+ 40+&+6'@ (63++- &+0-) .+68 '4+-@


29/29

cara membuat desain web

Documents