Belajar HTML Dan CSS

i

Mempersembahkan :

Belaja r HTML dan CSS “Tutorial fundamental dalam mempelajari HTML & CSS”

Oleh :

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTM

i

Mempersembahkan :

Belaja r HTML dan CSS “Tutorial fundamental dalam mempelajari HTML & CSS”

Oleh :

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTM

i Rian

Ariona

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTM

ii

Belajar HTML dan CSS “Tutorial fundamental dalam mempelajari HTML & CSS”

Penulis S!ST Pen"untin#

: Rian Ariona : $ndra A%dul

Hadi A!Md

Cop"ri#t ' ariona!net ()*+

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTM

iii

“Jangan langsung Meng-copy Kode-kode dari  buku ini dan Mem-

 paste-nya ke Text Editor , karena sebagian kode tidak akan  berjalan dengan benar jika anda melakukannya”

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTM

i,

 Jika anda merasa terbantu dengan ebook ini dan ingin berbagi kepada teman anda, bagikanlah link di bawah ini, dengan demikian Anda telah ikut berkontribusi terhadap ebook ini

http://wwwarionanet/ebook- bela jar-html-dan-!ss/

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTM

,

PR-L-. /ntu0 siapa %u0u ini 1 "uku ini !o!ok untuk anda yang ingin mem pelajar i #$M% dan &'', baik anda yang tidak tahu

sama sekali apa itu #$M% dan &'' hingga anda yang ingin mem pe lajar i se!ara lanjut #$M%

dan &'', serta menget ahui konsep (undamental dari #$M% dan &'' itu sendiri )embahasan dalam buku ini menitikberatkan pada study kasus, !ontoh penggunaan setia p kode

#$M% dan

&'' dan tidak akan menjelaskan se!ara terperin!i

tag-tag yang

terdapat/disediakan dalam #$M% atau  pr o per ty- pr o per ty yang ada dalam &'' yang ak an membosankan and a *ndapun akan diajak untuk mengkon+ersi sebuah desain web me n jadi sebuah (ile #$M% dan &'' se!ara utuh, setiap langkah dije laskan sesederhana mungkin agar mudah di!erna dan

dipahami

2at3 si#n4

te

alam buku ini, anda akan menemukan beberapa tanda se per ti  ber ik ut

C at at an , berisi

catatan singkat tentang apa yang harus anda  perhatikan dan l akukan

atau  sebuah per ingatan.

 I n f ormasi   , 

berisi infor masi singkat yang menjel askan  poin poin tertentu dal am

 pembahasan setiap mat er i

*! (! +!

Apa "an# terdapat dalam %o5 ini adala 0ode dari pem%aasan! 6ode HTML dan CSS ditulis di dalam %o5 ini! 6adan# setiap %aris 0ode "an# panjan# memili0i penomoran seperti %o5 ini! Baris 0ode "an# tida0 memili0i nomor %erarti ditulis satu %aris den#an %aris se%elumn"a 7seperti %aris ini dan %aris setela nomor *8!

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTM

,i

Apa "an# diserta0an dalam Pa0et $%oo0 alam paket ebook yang telah anda download, saya  juga menyertakan (ile resour!esip yang  berisi (ile-(ile latihan yang terdapat dalam ebook ini Jik a suatu saat anda merasa b ingung

mengapa kode yang anda ketik tidak berjalan seharusnya, *nda dapat menyamakan k ode yang anda ketik dengan kode yang terdapat dalam (older resour!es ini

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTM

,ii

9AFTAR S PROLOG

V

.ntuk siapa buku ini 

+ + +i

0at!h the sign1 *pa yang disertakan dalam )aket 2book 

DAFTAR ISI BAB 1 PERSIAPAN 33 34 37

0eb "r owser  $e5t 2ditor  * dd-On

BAB 2 PENGENALAN HTML 43 44 47 4

*pa itu #$M% Membuat 0ebsite dalam 3 Menit )engenalan $ag #$M% 'truktur (ile #$M%

BAB 3 MEMUAT GAMBAR 73 74

Mengenal * tribut #$M%

&ara  penulisan lokasi (ile

BAB ! MEMBUAT LIN" 3

%ink 'tandar 

4

%ink 2mail

VII 2 4 6 8

10 39 33 34 37

1 3; 3<

20 49 4

BAB # HEADING$PEN%UDULAN

2#

BAB  MEMBUAT DAFTAR$LIST

2&

;3 ;4 ;7 ;

Ordered %ist .nordered %ist e(inition %ist %ist/a(tar bers arang

BAB ' MEMAHAMI TAG DIV (DIVISION) 83 84

)akai > atau &lass/ Memahami hubungan &hild, )arent dan 'iblings

BAB & FORM &ontrol-!ontr ol ?orm

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTM

4= 4< 79 79

32 77 7

3# 7;

,iii BAB * TABEL <3 <4

'truktur tabe l yang dianjurk an

Kesalahan dalam penggunaan @tableA

BAB 10 STUDI "ASUS 1+ "ONVERSI DESAIN "E HTML 393 394 397 39 396 39;

)esiapan 0r apper  #eade r 

&ontent 'ide bar  ?ooter 

!1 4 7

!!  6 6 ; = <

BAB 11 VALIDASI MAR"UP HTML

#2

BAB 12 SEMANTI"

##

343 344

Maksud 'emantik dalam #$M% )entingkah 'emantik /

BAB 13 CASCADING ST,LE SHEET (CSS) 373 374

)engenalan &'' )enulisan &''

BAB 1! BO-+MODEL

6; 6;

#& 6= ;9

2

33

Margin

34 37

)adding &''-'horthand "order 

;4 ;7 ; ;;

BAB 1# T,POGRAPH,

&

*pa itu 'ans-seri( dan 'eri( 

;<

3

BAB 1 CSS+IMAGE 3;3 3;4 3;7 3;

 ba!k ground-image  ba!k ground-repeat  ba!k ground- position >mage ' pr ite

BAB 1' FLOATING 383 384

)ermasalahan pada (loating &'' B eset

BAB 1& POSITIONING 3=3 3=4 3=7 3=

'tati! B elati+e * bs olute ?i5ed

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTM

'2 84 87 8 8;

'& 8< =3

&2 =4 =7 = =8

i5 BAB 1* PSEUDO+CLASS 3<3 3<4

)seudo-&lass untuk %ink /* n!hor  )seudo-&lass :(irst-!hild dan :last-!hild

BAB 20 STUDI"ASUS 2 . PEMBERIAN ST,LE$CSS 493 494 497 49 496 49;

&'' B eset "ody 0rapper #eader Menu ?orm

498 a(tar *rtikel 49= *rtikel 49< 'idebar ?ooter 4939

&* =< <9

*2 <7 <7 <7 < <6 <; <8 <8 << 399

BAB 21 STUDI "ASUS 3 . SLICING 102 433 434 437

)enulisan Markup #$M%

'li!ing )emberian 'tyle

39 39= 334

BAB 22 %AVASCRIPT 11' 443 444 447

)engenalan Ja+as!ript  jCuery  jCuery )lugin

BAB 23 STUDI "ASUS ! . PENAMBAHAN %/UER, SLIDER &ara  penggunaan basi!-slider  )enerapan pada 'tudi Kasus k e -7

BAB 2! E-TRAS 43

e+eloper $ools dan ?ir e bug

44 47 4 46

Den &oding Menambahkan ummy $e5t "uat situs anda “online” Menggunakan ?$) &lient

338 33< 349

122 344 347

12 34; 348 34< 379 37

EPILOG

13

DAFTAR PUSTA"A

13'

"uk u 0e bsite

378 378

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTM

*

Ba#ian 

HTML

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

(

Ba% *

Persiapa n 'ebelum kita

mem pe lajar i #$M% dan &'', ada beberapa persiapan yang  pe r lu

dilak uk an 'e per ti  penginstallan aplik asi-aplik asi yang dibutuhkan dan aplik asi-aplik asi  pendukung dalam mem pe lajar i #$M% dan &''

*!*! Bro;ser

2e%

0eb  browser adalah perangkat utama yang akan kita gunakan untuk me nam pilk an halaman web yang  pada dasarnya terbuat dari #$M% dan &'' 'aya yakin di setia p

komputer telah te r install 0eb "rowser bawaan se per ti >nte rnet 25plorer E0indowsF, 'a(ari EMa!F dan ?ire(o5 E%inu5 .buntuF 'etiap browser memiliki  perbedaan dalam hal menam pilk an halaman web dan (itur -

(itur yang

didukung dalam #$M% dan &'' "oleh

jadi

halaman web yang

anda

 buat ditam pilk an  benar pada salah satu browser namun a!ak-a!akan pada browser  lainnya .ntuk itu  perlu beberapa browser yang te r install dalam komputer anda untuk  mengu ji pe nam pilan website yang dibuat

>su-isu k om patibilitas ini akan anda te mui ketika mem pelajar i &'' nantinya yang  berhubungan dalam pe nam pilan halaman we b "erikut ini adalah beberapa browser yang dapat anda download dari >nternet serta re+iew singk at

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

+ Firefo5 0eb  browser ini bisa dikatakan web browser yang  paling disenangi oleh para de +elope r  web karena kekayaannya dalam hal

*dd-on* *nda

dapat mendownloadnya di

ttp:<
Gambar 3 Moilla ?ire(o5 <

.oo#le Crome Google &hrome adalah web browser

besutan

Google yang

memiliki  be berapa

keunggulan &hrome  bisa dikatakan browser yang sangat ringan, !epat ( dan kaya ak an

aplik asi/*dd-on 'elain itu &hrome menggunakan engine + 0ebkit, engine browser yang r ata-r ata mendukung (itur-(itur terbaru dari teknologi #$M% dan &'' *nda dapat mendownloadnya di htt p://google!om/!hrome

3

* dd-on/)lugin adalah *plikasi tambahan yang dapat dipasang sehingga memperkaya (itur so(tware yang  bersangk utan 4 Ke!epatan loading web tergantung dari ke!epatan internet yang anda guna k an 7 2ngine/Mesin adalah kode utama dalam aplik asi untuk menampilkan halaman web !onto hnya Moilla untuk (ire(o5, 0ebkit untuk Google &hr ome dan 'a( ari

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

=

Gambar 4 Google &hrome 38

Safari 'a(ari

adalah web browser

dari

*pple

'ama

halnya dengan

&hrome,

sa(ar i

menggunakan engine webkit sehingga mendukung (itur-(itur terbaru #$M% dan &''

"rowser ini tersedia untuk Ma! dan 0indows saja ttp :<< ;;;!apple!3om
Gambar 7 'a(ari 6

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

>

nternet $5plorer "rowser yang  pasti sudah te r insta ll pada komputer dengan sistem operasi windows Jik a

anda masih menggukan >nte rnet 25plorer +ersi ;, 8 dan =, saya anjurkan untuk  mendownload +ersi terbaru yakni >nternet 25plorer nternet 25plorer dalam  pengu jian halaman web sangat tidak dian jur ka  n +ersi 8 ke  bawahF karena dukungannya yang

Eterutama

 penam pilan halaman web yang

kurang serta proses

terkadang men jadi  berantakan Iamun karena

 pengguna >nte rnet e5plorer di dunia masih mendominasi, mau tidak mau kita harus

menggunakan >nte rnet 25plorer

Gambar  >nternet 25 plor er =

*!(! $ditor .ntuk membuat

Te5t halaman 0eb anda memerlukan sebuah te5t editor

mem punyai *dobe reamwea+er, saya sarankan

untuk

Jik a

anda

tidak menggunak annya,

Mengingat anda masih dalam tahap  belajar 

$e5t editor yang akan kita gunakan adalah te5t editor ringan namun penuh dengan

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

? (itur yang sangat membantu dalam proses Coding!enulisan  "ode# #$M% dan &''

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

?

@otepad  $ersedia

untuk

0indows,  Iote padJJ

memiliki  beragam

mendukung

(itur yang

para

sangat

 pr ogr ammer 

K emam puannya untuk memperkaya diri dengan  pluginpun

men jadi

k elebihan

lainnya dengan te5t editor se jenisnya *nda dapat mendownload Iotepad di

ttp:<
Gambar 6  IotepadJJ

Su%lime  Te5t $e5t editor yang te rbilang masih baru yang sangat mudah digunakan,  penam pilan simple namun enak dipandang 'ublime te5t adalah aplik asi  berbayar tapi anda dapat mendownload +ersi demo-nya Eme ski pun +ersi demo tapi tidak ada batasan dalam

 penggunaannyaF 'ublime te5t tersedia untuk sistem Operasi 0indows, %inu5 dan Ma!, download di alamat berikut ttp :<< ; ;;!su%limete5t! 3om<(

Gambar ; 'ublime $e 5t4

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML & CSS

 .edit *nda  pengguna %inu5 K hususnya %inu5 dengan desktop Gnome sudah memiliki te 5t

editor  bawaan, G2dit G2dit bisa digunakan untuk menuliskan  berbagai ma!am  bahasa

 pemr ogr aman *nda  pengguna

0indows-pun dapat mendownload

G2dit +ersi

windows di situs

resminya ttp :<< proje3ts!#nome!or#!

Gambar 8 G2dit untuk 0indows

*!+! -n

Add

Fire%u# ?ire bug akan kita gunakan untuk memeriksa kode #$M% dari setiap halaman we b,

melihat &'' yang

digunak an dan untuk mengu ji s!ript ja+as!ript *nda

da pat

menginstallnya pada browser ?ire(o5 .ntuk menginstallnya !ukup masuk ke halaman *dd-on dan !ari add-on (ir e bug

D Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML & CSS

D

Gambar = $a m pilan ?ir ebug pada ( ir e( o5

Jik a

anda menggunakan Google &hrome atau 'a(ari, tidak usah menginstall (ir e bug

karena kedua browser dengan engine webkit ini sudah memiliki tool serupa yang dinamai dengan e+elo per $ool

Gambar < e+eloper $ools  pada Google &hrome

2e%  Tools

9e,eloper

*dd-on ini

digunak an

untuk mengu ji halaman

web dan

me lak uk an  be ber apa

 perubahan/perbaikan sementara terhadap halaman web *nda dapat menginsta llnya dari add-on (ire(o5 atau dari &hrome 0eb 'tor e

Gambar 39 0eb e+eloper $ools memiliki sejumlah tools yang sangat membantu

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML & CSS

E >tulah aplik asi-aplik asi yang diperlukan untuk mem pelajar i #$M% dan &'', tapi yang terpenting adalah kehadiran Web Browser dan Text editor, sisanya adalah o ptional  yang keberadannya hanya mendukung akti(itas kita dalam pembangunan halaman we b

'e pe r ti ?ire bug dan e+elo per tools memang penting namun anda tidak harus menginstall keduanya K e ber adaan kedua tools tersebut sangat membantu untuk  mengu ji

dan me m perbaik i

kesalahan

yang

ditimbulkan  baik

kesalahan

dalam

 pengetikan kode atau lainnya

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML & CSS

*)

Ba% (

Pen#enalan HTML (!*! Apa HTML1

itu

'emua halaman web yang

sering anda buka, se per ti (a!ebook!om, twitter !om,

google!om dan lain sebagainya ditam pilk an dengan menggunakan #$M% Jadi  bisa dikatakan #$M% adalah bahasa dasar untuk menam pilk an halaman web pada we b

 br owser  "uka 0eb  browser anda lalu  bukalah sebuah situs, misalnya

ttp:<<;;;!#oo#le!3om

3 %alu klik kanan di sembarang ar ea, dan  pilih “ I ns pect  el ement  Emenu  paling $

ak hir F

Gambar 33 >nspe!t 2lement

4 )erhatikan kode hasil inspe!t element, yang ter lihat adalah sebagai berikut : Gambar 34 >nspe!t 2lement akan menampilkan kode #$M% dari situs yang  ber sangk uta n

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML & CSS

** "aris

 pertama

pasti diawali dengan

 bahwa dokumen yang

49-CTGP$ HTML ,

ini

menandakan

sedang anda buka saat ini adalah #$M% "egitu  juga

dengan  bar is kedua : HTML, kode tersebut menandakan bahkan k ode -k ode yang ditulis di dalamnya adalah kode #$M% Jik a

anda ingin

tahu kepanjangan #$M%, #$M% adalah kependekan dari

 %   y per text  &arkup 'anguage *rtinya adalah bahasa markup Epe nandaF  berbasis

te5t atau  bisa

juga

disebutsebagai  formatting

language Ebahasa untuk 

mem(or matF, Jadi sudah  jelas  bahwa #$M% bukanlah bahasa  pe mr ogr aman, melainkan  bahasa mar ku   p/( or matting

(!(! Mem%uat 2e%site dalam * Menit 'udah siap membuat website Kita mulai membuat website hanya dalam 3 menit1 3 "ukalah Iotepad All !rograms

(  Accessories ( ) otepad F

4 K et ik ka   n teks berikut : 2e%site pertama sa"a

7 )ilih menu ?ile A 'a+e *s  "eri nama Ilati&an*!&tmlJ Etanpa tanda k utipF 6 )ada bagian 'a+e as type,  pilih  All  * il e s +.+# %alu klik tom bol sa+e

Gambar 37 'a+e *s type

; 'ekarang klik dua kali (ile #$M% yang telah anda  buat, Eatau Klik dan rag ke 0e b "rowser anda, disini saya menggunakan Google &hr ome F

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

*(

Gambar 3 0ebsite pertama anda

emonstrasi di atas hanyalah langkah untuk membuat (ile #$M%, mudah bukan/

(!+! Pen#enalan HTML 'e pe r ti  yang

Ta#

saya sebutkan se belumnya,  bahwa #$M% adalah bahasa

Markup,

ar tinya  bahasa #$M% hanya digunakan untuk me-markup suatu dokumen 'e bagai  penyederhanaan  kita analogikan dengan pembuatan dokumen di Mi!roso(t 0ord atau

aplik asi 0ord )ro!essing lainnya K et ik a membuat sebuah dokumen word, biasanya kita melakukan  formatting pada te k s se per ti menebalkan teks, memiringkan, mem ber i garis  bawah, Membuat )en judulan E#eadingF, membuat list Ea( tar F dan lain sebagainya )ada #$M%, formatting ini bisa k ita

sebut dengan )roses  &arkup dan akan dilak uk an dengan menggunakan tag #$M% Misalnya, untuk FemH atau i!

mem-( or mat

suatu

teks

menjadimiring

kita

tambahkan

tag

2dit (ile sebelumnya, me n jadi se per ti berikut : 2e%site empertama
an ketika d ibuk a k e m bali  pada br owser , anda dapat me lihat kata pertama

men jadi miring em !! 
Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

*+ dokumen #$M% )erhatikan bahwa setiap tag memiliki pasangan yakni tag penutupnya

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

*= *rtinya hanya teks yang  berada di dalam tag tersebut yang akan d iber i (ormat mir ing $ag  penutup ditandai dengan penambahan tanda slash E/F se belum nama tagnya

"erikut ini adalah anatomi dari tag #$M% : namata# atri%utKInilai Atri%utJ si atau 6onten 
'etiap tag #$M% bisa

men jadi “isi” dari

tag #$M% lainnya, untuk membuat suatu

hier ar ki  dari dokumen #$M% alam setiap tag #$M% bisa

disisipkan berbagai

atribut

yang  ber(ungsi untuk 

menampung in(ormasi-in(ormasi te r te ntu, misalnya atribut id dan !lass yang  ber (ungsi untuk mem ber i nama suatu tag sebagai re(erensi &'' atau ja+as!ript nan tinya 'ekarang bagaimana  jika teks yang dimiringkan tersebut ingin kita tebalkan .ntuk 

menebalkan teks anda dapat menggunakan tag Fstron#HatauF%H, men jadi se per ti

 ber ik ut: 2e%site rn45empertama
(!=! Stru0tur HTML

le

'uatu dokumen #$M% juga mempunyai aturan dalam  penulisannya, ada beberapa tag yang harus anda tulisk an dan sudah men jadi ketentuan Jik a kita  pe rbaik i latihan k ita sebelumnya men jadi dokumen #$M% yang  benar maka kodenya me n jadi se per ti

 ber ik ut: *! 49-CTGP$ HTML (! HTML +! ead =! titleudul File HTML! <ead ?! ! %od" D! 2e%site stron#empertama
Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

*> "ingung $enang, saya  jelaskan tiap baris kode te rse but 49-CTGP$ HTML

*dalah $ag awal dari setiap dokumen #$M%, tag ini  ber(ungsi untuk mengin(or masik an

 pada browser bahwa dokumen yang sedang dibuka adalah dokumen #$M% $ag ini  perlu di!antumkan disetiap dokumen #$M% yang akan anda  buat HTML 
N

*wal dari isi dokumen #$M% dimulai dari sini, semua kode #$M% yang akan anda  buat akan ditulis di dalam tag ini,  perhatikan  juga  bahwa setiap tag harus memiliki tag

 penutup ead ead

N

dok umen

$ag #ead akan digunakan untuk menyimpan berbagai in(ormasi tentang #$M%, lebih

detailnya akan kita te mui  pada bab selanjutnya *pa yang

terdapat di

dalam tag ini, tidak akan ditam pilk an se!ara langsung pada web  br owser  title N 
'alah satu !ontoh in(ormasi yang terdapat di dalam tag #ead adalah title $itle ak an

menam pilk an teks pada  judul  browser atau pada tab br owser  %od" <%od"

N

 )ah, apa yang ingin anda tam pilk an pada browser akan ditulis di dalam tag ini, tag body

merupakan tag pembuka dari  badan dokumen #$M% Mudah dimenger ti  bukan %alu apakah  penulisan tag-tag #$M% harus se per ti !ontoh di

atas 'e per ti  penambahan tab/indentasi  pada setiap tag 'ebenarnya *nda bisa saja

menuliskan kode #$M% se per ti ini : 49-CTGP$ HTMLHTMLeadtitleudul ipertama
an yang

File

HTML
anda dapatkan dalam browserpun sama, namun anda akan kesulita n

memba!a dokumen #$M% tersebut Kalau saja dokumen #$M% yang anda buat han ya

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

*? 39  baris mungkin hal ini tidak akan men jadi masalah, namun bagaimana  jika 3999  bar is  )ah l oh,-

.ntuk itu kita menambahkan indentas i, disetiap isi Ek onte nFdar i suatu tag Misalnya : ead titleudul File HTML
>ni menandakan bahwa tag title  berada di dalam tag head 'elain itu k ita  juga  bisa

mengontr ol, apakah suatu tag sudah ditut up atau belum

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

Ba% +

Memuat .am%ar 'etelah anda me nget ahui struktur dari

sebuah (ile #$M% dan apa saja yang harus

ditulis pertama kali 'elanjutnya saya akan mengajak anda untuk mem pelajar i !ar a memuat/menam pilk an sebuah gambar dan m emahami apa itu atribut #$M% .ntuk memuat sebuah gambar pada dokumen #$M%, kita akan menggunakan tag   n gambar te r se but/ i dalam tag Fim#H k ah/ Fim#H  %alu dimana kita melet ak ka

+!*! Men#enal HTML

Atri%ut

'etiap tag #$M% dapat memiliki satu atau le bih atr ibut, atribut ini  ber(ungsi untuk  menyimpan in(ormasi yang  berkaitan dengan tag terse but

)ada tag Fim#H kita akan menggunakan atribut sr3 untuk menyimpan lokasi gambar : im# sr3

'elanjutnya untuk memasukkan nilai  pada atr ibut, kita gunakan operator sama dengan EF diikuti dengan lokasi gambar yang diapit oleh tanda k utip im# sr3KI#am%ar!jp#J

$ag img termasuk ke dalam tag spesial dan tidak memiliki tag penutup Eise but  juga sebagai elf Closed Tag F, se per ti tag-tag lainnya >ni dikarenakan tag ini tidak  me milik i

konten se per ti : titleni adala 6onten ta# title
'ebagai pe ngganti, kita tambahkan tanda slash E/F sebelum kurung tutup :

im# sr3KI#am%ar!jp#J <

'ekarang saatnya anda men!oba memuat gambar pada (ile #$M% 3 "uatlah (ile #$M% baru dengan nama latihan4html 4 &arilah sebuah gambar dan simpan satu (older dengan (ile #$M% anda

Gambar 36 )enempatan gambar sesua i dengan lokasi (ile #$M%

  nlah kode #$M% berikut : 7 K et ik ka *! 49-CTGP$ HTML (! HTML +! ead =! titleudul File HTML! <ead ?! ! %od" D! pini adala 3onto pemuatan #am%ar pada le HTMLp E! im# sr3KIlo#o!pn#J < *)! <%od" **! 
 "ukalah pada  br owser , anda akan me lihat gambar telah termuat pada (ile #$M%

anda

Gambar 3; Gambar ditampilkan pada  browser 

'etiap tag img, selain memiliki atribut sr! untuk menyimpan lokasi gam bar , anda  juga

harus menyertakan atribut alt yang akan digunakan sebagai teks alternati(  k et ik a gambar tidak berhasil dimuat atau gambar hilang im# sr3KIlo#o!pn#J altKIni adala te0s alternatifJ <

an atribut lainnya adalah atribut ;idt dan ei#t, yang  ber(ungsi untuk menentuk an lebar dan tinggi dari gambar tersebut Memang hal ini tidak perlu dilak uk an k ar e na

gambar se!ara otomatis akan te r load dengan ukuran sebenarnya, namun hal ini san gat dianjurkan untuk memper!epat proses pemuatan gam bar  im# sr3KIlo#o!pn#J altKIni adala te0s alternatifJ ;idtK+?( ei#tK*(+ <

*nda tidak perlu mem ber i tanda k ut ip pada nilai lebar dan panjang  Iilai ini bisa

anda

dapatkan dengan m e ngk lik kanan gam bar 

tersebut dan  pilih menu properties )ada tab details akan

anda

te mui ukuran gam bar 

te rse but

engan

penambahan

gambar yang

atribut

dimaksud

alt,

k etik a

hilang/tidak /gagal

termuat maka akan m un!ul sebuah i!on  broken (ile, dan Gambar 38 ?ile )roperties gam bar 

ditam pilk an disana

isi dari

atribut alt ak an

+!(! Cara penulisan lo0asi file Jik a

anda menyim pan gambar tersebut pada sebuah (older se per ti ber ik ut

Gambar 3= Menyimpan gambar pada (older images

Maka yang  perlu anda lakukan adalah menambahkan nama (older tersebut diik uti

dengan tanda  slash E/F dan nama (ile gambar yang akan dimuat: im# sr3KIima#es
Jik a

dalam (older tersebut terdapat (older lagi, dan gambar yang ingin anda muat ada di

dalamnya maka pe nulisannya men jadi se per ti berikut : im# sr3KIima#es
'elain penggunaan lokasi gambar se per ti di atas, anda  juga bisa menam pilk an gam bar 

yang

sudah terdapat di inte rnet ,  penulisan se per ti  ini disebut dengan

hotlinking 

misalnya: im# sr3KIttp:<< ariona! net
)enggunaan hotlink ing sangat tidak  dianjurkan karena gambar yang dimuat  buk anlah milik kita dan tentunya  juga akan merugikan si pemilik gam bar 

Ba% =

Mem%uat Lin0 Lang

sering anda te mui dalam sebuah website adalah link %ink ini akan me m buat

konten atau el emen  %T&'= dapat di klik dan akan mengarahkan/membawa anda k e halaman

web

lainnya "iasanya suatu

link

ditam pilk an  berwarna  biru

dan

 ber gar is bawah Eselama belum diber i styleF

=!*! Standar

Lin0

%ink atau biasa disebut dengan an!hor Epe ngaitF dapat dibuat dengan me nam bahk an tag FaH pada teks yang ingin kita buat men jadi link 6li0 adisini
 Iamun anda tidak akan melihat  perubahan pada teks “disini” karena kita  belum “me ngaitk annya” ke halaman web lain .ntuk itu kita akan menggunakan attribut ref  untuk menyimpan alamat web yang akan dituju ketika link di klik E penulisan lokasi sama halnya dengan attribut sr!  pada tag imgF *! 6li0 a refKIttp:< <;;;!alamattu juan!3omJdisini
'ebagai latihan kita

akan membuat (ile #$M%  baru dan membuat link untuk 

mengaitkannya ke latihan-latihan se be lumnya

3 "uatlah (ile  baru dengan nama latian+!tml, simpanlah di (older yang sam a

dengan latihan-latihan se belumnya



$ag-tag #$M% juga  biasa sebut dengan elemen

Gambar 3< )enempatan (ile pada (older yang sama

  n kode berikut pada (ile latihan7html 4 K et ik ka *! 49-CTGP$ HTML (! HTML +! ead =! titleudul File HTML! <ead ?! %od" ! *Selamat datan# di ;e%site sa"a<* D! a refKIlatian*!tmlJ%u0a Latian *
7 "uka k em bali (ile latihan1.html dan latihan2.html, dan tambahkan sebuah link yang akan mengait ke (ile latihan7html tepat sebelum penutup tag

 body E @/bodyA F

N a refKIlatian+!tmlJ6em%ali 0e alaman

utama a

<%od" 
 'a+e  pekerjaan anda, dan bukalah (ile latihan7html  pada browser *nda dapat

mengk lik link nya satu per satu

Gambar 49 tampilan (ile %atihan7html

K et ik a link “ buk a latihan 3” di klik, browser akan menam pilk an (ile latihan3html

Gambar 43 %ink untuk k emb ali ke halaman uta ma

an Klik link “K em bali ke halaman utama” untuk me nam pilk an latihan7html k em bali Jik a

anda perhatikan pada kode yang terdapat dalam latihan7html, ada beberapa tag

yang  belum saya  jelask an, yaitu tag F&*H dan %r! $ag %r digunakan untuk memindahkan teks kebaris  baru, sehingga teks yang dipisahkan dengan tag ini akan ditam pilk an di baris yang  berbeda Jik a anda me nghapus tag F%rH ini, maka teks akan ditampikan satu  bar is

Gambar 44 link ditampilkan satu baris tanpa tag @br A

.ntuk membuat link yang menga!u ke halaman web lain,  pastikan anda menyer tak an ttp:<< pada atribut hre( link ter se but

a refKIttp:<<;;;!#oo#le!3omJ Bu0a .oo#le 
Jik a

anda tidak menyertakan ttp:<< maka link tersebut tidak akan bekerja se bagaimana

mestinya

Gambar 47 2rror ketika http:// tidak ditambahkan pada alamat web lain

'etiap link yang diklik akan ditam pilk an di window/tab yang sama, bagaimana  jika and a

ingin membuka link tersebut di tab/window baru/ $ambahkan atribut tar get “ blank ” a ref Kttp: <
=!(! $mail

Lin0

*nda juga dapat membuat link e mail, link ini  berisi alamat email yang ketika dik lik ,

aplik asi untuk mengirim email akan otomatis terbuka dan tujuan email se!ara o tomatis terisi dengan alamat yang telah dite ntuk an .ntuk membuat link email, anda tinggal menambahkan mailto:alamatNemail di dalam

atribut hr e( a refKImail to:mr5"Q"au!3omJ6irim $mail
elain tipe link/link di atas, masih banyak lagi tipe link lainnya, seperti link )o. Telp, Apl ikasi dan l ainnya.

Ba% >

Headin#
#$M%

"ayangkanlah sebuah skripsi atau buku yang memiliki bab dan subbab-subbab di

dalamnya .ntuk mem(ormat penjudulan dalam #$M%, kita gunakan tag * unt uk   judul utama dan untuk  judul subbabnya anda dapat menggunakan tag ( sam pai

dengan? 'etiap le+el judul memiliki ukuran huru( yang  be rbeda- beda Enamun anda masih  bisa

merubah ukurannya me lalui &''F 'ebagai latihan, buatlah (ile #$M% baru dengan nama latian=!tml lalu ketikkan k ode #$M% ber ik ut: *! 49-CTGP$ HTML (! HTML lan#KIen/SJ +! ead =! titleHeadin#! <ead ?! %od" ! *Ba% * : Pendauluan<* D! (*!* Latar Bela0an#<( E! pPara#raf pendauluan %la!!%la!! ! ((!( Al#oritma Pemro#raman<( *?! pPara#raf pendauluan %la!!%la!! 
Gambar 4 )enjudulan pada dokumen #$M%

*danya penjudulan dimak sudk an agar suatu dokumen #$M% lebih terstruktur layak nya

sebuah

dokumen r esmi

se per ti

skripsi /paper

yang

mengharuskan adanya

 perbedaanantara "ab utama dan sub- babnya )erhatikan !ontoh penggunaan #eading dalam suatu website di di halaman selan jutnya alam website te r se but, %ogo/Judul dari website diber i #eading %e+el 3, untuk  judul

ar tik el

diber i heading le+el

heading le+el 7 sd 

4 dan  judul

dari  bagian- bagian

di dalamnya diber i

(

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

(D

Ba% ?

Mem%uat daftar
menggunakan penomoran disebut

dengan ordered list dan yang menggunakan sim bol disebut dengan unordered li st 

?!*! List Ordered

-rdered list

atau

a(tar berurutan

dapat

dibuat

dengan

menggunakan tag

ol

Esingkatan dari ordered listF dan untuk setiap listnya  kita gunakan tag li Esingk atan

dari list item/item da( tar F 'ebagai !ontoh, perhatikan kode #$M% berikut : *! (Gan# arus dila0u0an ari ini<( (! ol +! liPer#i 0e pasar! liMen#erja0an tu#as 0ulia
)enomoran da(tar akan dilak uk an se!ara otomatis ketika anda menambahkan da( tar  item

 ,   kan urutan  yang benar  0unakan 1rdered list, ketika  sebuah li st2daft ar  memer lu  seperti cara menyalakan motor dan lain  sebagain ya.

an jika ditam pilk an  pada br owser , maka yang akan anda dapatkan adalah se per ti  berikut :

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

(E

Gambar 46 a(tar ber ur uta n

?!(! List

/nordered

"erbeda dengan da(tar  berurut, unordered list akan menandai setiap item dengan simbol "aik  berupa lingk aran atau  per segi Eanda masih bisa merubahnya dengan &''F

.ntuk membuat da(tar tidak berurut kita gunakan tag ul dan se per ti tag ol item yang terdapat di dalamnya harus diapit dengan tag li! Jik a 

kita modi(ikasi !ontoh sebelumnya dengan merubah

ol men jadi ul maka

yang akan kita dapat adalah se per ti berikut : *! (Gan# arus dila0u0an ari ini<( (! ul +! liPer#i 0e pasar! liMen#erja0an tu#as 0ulia
Gambar 4; a(tar tidak ber ur ut

'e!ara de(ault, item akan ditandai dengan lingk aran

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

+)

?!+! List

9enition

"erbeda dengan Ordered %ist dan .nordered %ist yang memiliki struktur sam a, ata list memiliki struktur te r sendir i "iasanya data list ini digunakan untuk membuat da( tar  istilah beserta de(inisinya se per ti halnya dalam kamus dl dtTest
$ag dt Ede(inition te r mF digunakan untuk menampung istilah  yang akan dide(inisik an,

dan tag dd digunakan untuk me nuliskan de(inisi dari dt sebelumnya "erikut !ontoh  penggunaan dari e(inition %ist : dl5 d5Man#a$ d5 dd5Man#a 7%a3a: man#a atau man##a8 merupa0an 0ata 0omi0 dalam %aasa  epan# di luar epan# 0ata terse%ut di#una0an 0usus untu0 mem%i3ara0an tentan# 0omi0 epan#! $dd5 d5Man#a0a$d5 $dd5Man#a0a 7%a3a: man#a0a men##am%ar man#a$dd5

atau

man##a0a8

adala

oran#

"an#

$dl5

?!=! %ersaran#

List<9aftar

'e buah

saja

da(tar  bisa

lagi di dalamitemnya, atau biasa k ita

memiliki da(tar

se but dengan da(tar/list bersarang Enested

list F &ontohnya se per ti  pada latihan yang

akan k ita  buat ber ik ut "uat (ile  baru dengan nama (ile latihan6html lalu ketikkan kode #$M% ber ik ut *! 49-CTGP$ HTML (! HTML +! ead =! titleList<9aftar! <ead ?! %od" ! (Gan# arus dila0u0an ari ini<( D! ol E! liPer#i 0e pasar *)! ul **! liBeli sa"uran
Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

+* *=! *>!

liA=
Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

*?! ! 
an  berikut tam pilan pada br owser 

Gambar 48 %ist ber sar ang Lang perlu

anda perhatikan adalah di mana anda meletakkan tag FolHatau ul jika

anda ingin menempatkannya pada suatu item, yaitu sebelum penutup tag list item E
lainnya yang memang membutuhkan penomoran atau sesuatu yang memiliki poin- poin

Ba% 

Memaami Ta# di, 79i,ision8 *nda

dapat membuat suatu group dari

tag-tag  #$M% yang

anda buat dengan

menggunakan tag di,, se per ti pada !ontoh kasus berikut : 'etiap we bsite /we blog  yang

anda buka,  jika diperhatikan  pasti memiliki em pat

 bagian/group K ee m pat bagian/group ini antara lain : 3 #eader  "agian kepala website yang  berisi logo website, nama website, slogan we bsite,

menu website dan lainnya 4 &onte nt "erisi isi dari website itu sendiri,  jika website berupa weblog, maka content nya

 berisi postingan terbaru atau in(ormasi lainnya 7 'ide bar 

"erada di samping &ontent dan biasanya berisi iklan, k ate gor i ar tik el dan widget atau hiasan situs lainnya  ?oote r 

"agian kaki dari website yang  pada umumnya diisi dengan tag website te r se but, misalnya copyright 3 4564 by  someone.

%ebih sederhananya, bayangkanlah 'urat r esmi  yang memiliki Kop sur at,  badan sur at

dan penutup sur at alam #$M%, kita dapat mem bagi  bagian- bagian tersebut dengan menggunakan tag di, Edi+ision/ba gianF dan untuk menamai setiap  di+ k ita gunakan atribut id atau

!lass> "erikut !ontoh penggunaan tag di+ jika k ita terapkan pada  bagian- bagian

website yang telah kita sebutkan se be lumnya:

6

* tribut > dan &lass tidak  hanya digunakan dalam tag di+ saja melainkan dapat digunakan di setiap tag #$M% untuk memberikan penamaan sebagai re (erensi jika diperluk an

*! di, idKIeaderJ (! ! 
Jik a

anda menam pilk annya  pada br owser , anda tidak akan melihat apa-apa karena tag

di+ tidak akan me nam pilk an e(ek +isual $ag ini hanya digunak an untuk me m buat

dokumen #$M% lebih terstruktur dengan mem bagi- bagi dokumen ke dalam  bagian bagian yang lebih spesi( ik 

!*! Pa0ai Class1 "agi

9

atau

seorang  pemula, termasuk

saya ketika masih belajar

#$M%  &''  pasti

menanyakan hal yang sama )asalnya atribut > dan &lass digunakan untuk me namai tag #$M% %alu apa perbedaan dari k eduanya

9 *tribut > digunakan untuk penamaan elemen #$M% yang

memiliki k ar ak te r istik 

unik/berbeda $idak  boleh ada dua atau lebih elemen yang mempunyai > yang sama )erhatikan !ontoh  ber ik ut : *! (! +! =! >! ?!

di, idKImenuJ ul idKImenuJ liBeranda
)enggunaan atribut > pada !ontoh di atas adalah

SALAH,

karena terdapat dua > yang

sama, yaitu “me nu” pada tag Fdi,H dan ul! )erhatikan !ontoh sebelumnya, bahwa kita menggunakan > yang  berbeda untuk setia p di+ yakni, he ade r , !ontent, sidebar dan (ooter karena semuanya memiliki struktur dan

(ungsi yang  berbeda dalam suatu dokumen #$M%

Class &lass digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan

dapat digunakan berulang kali dalam markup EK ode #$M%F 'ebagai !ontoh, perhatik an kode #$M% berikut : *! ul idKImenuJ (! li 3lassKImeraJBeranda! liideo
)ada K ode #$M% di atas, saya menggunakan !lass Merah pada beberapa list item, karena nantinya list item yang memiliki !lass merah akan diber i warna  ba!kgr ound

mer ah

K esim pulannya adalah, ketika anda memiliki  beberapa elemen dengan k ar ak ter /( or mat yang sama, gunakan &lass sebagai penamaannya dan Gunakan > untuk elemen yang

 berbeda dan membutuhkan tanda pengenal lebih spesi( ik 

!(! Memaami u%un#an Cild Parent dan Si%lin#s K et ik a suatu tag memiliki tag/konten didalamnya maka hubungan antar tag-tag tersebut disebut dengan !hild- par e nt dan sibling )erhatikan !ontoh berikut : *! di, idKI;rapperJ (! di, idKI3ontentJ +! di, idKIarti3leJ! 
alam !ontoh kode #$M% tersebut : •

di, idKI;rapperJ disebut Parent, dan tag #$M% yang ada di dalamnya disebut

dengan hildEdi, idKI3ontentJF •

Be#itu ju#a den#an di, idKI3ontentJ dise%ut 6aren untu0 di, idKIarti3leJ dan di, idKIside%arJ

•

dan hubungan antara Fdi, idKIarti3leJ dan di, idKIside%arJ disebut dengan sibling, atau saudar a

Ba% D Form alam sebuah website biasanya te rdapat (orm, se per ti

satu atau lebih

(or m

 pen!ar ian, registrasi dan lain se bagainya ?orm

ini

 biasa

digunakan

mengumpulkan data dari

untuk 

 pengun jung

we bsite 

'e buah

(orm,

boleh

 jadi

 beragam k ontr ol, mulai dari

memilik i te5t in put,

&ombo  bo5, "utton dan lain se bagainya

Kita akan mem pelajar i sebagian k ontr ol yang disebutkan diatas karena k ontr ol di

atas adalah yang  paling sering digunak an dalam halaman we b )er tama-tama,  pembuatan sebuah (or m

diawali dengan tag @(ormA, dan setia p k ontr ol-k ontr ol 

yang

dibutuhk an

Gambar 4= ?ormulir E?OBMF penda(taran Lahoo1

ditempatkan di dalam tag ini form *Formulir Pendaftaran<* N 
 J ika

anda merasa asing dengan istilah

 , FORM 

bayangkan saja  sebuah

FO RMU  L I  R

 yang sering ditemui di sekitar kita seperti formulir  pendaftaran  siswa bar u, ormulir  pembuatan  "T! dan lain sebagainya.  f 

Control3ontrol Form 'etiap !ontr ol  pada (orm dapat dibuat dengan menggunakan tag @inputA an yang

membedakan tipe dari !ontr ol tersebut berada pada atribut type Etipe k ontr olF "er ik ut ini adalah sebagian tipe kontr ol yang  biasa ditemui :

La%el %abel digunakan untuk memberikan keterangan pada setiap input yang ada Jik a anda

 perhatikan (or mulir  penda(taran situs yahoo, yang disebut dengan la bel adalah yang ditandai berikut ini :

Gambar 4< &ontoh %abel  pada ( orm

la%el forKI@ameJ 6eteran#an nput 
*tribut (or diisi dengan isi dari atribut name pada k ontr ol yang ingin d iber i label

 Te5t &ontr ol input ini dapat diisi dengan teks yang

memiliki kata

yang

tidak te r lalu

 panjang/hanya satu baris, biasa digunakan dalam (orm  pen!ar ian, nama dan lain

se bagainya la%el forKInamaJ@ama Len#0ap
Gambar 79 $e5t >nput Jik a

te5t input yang akan ditam pilk an ingin memiliki nilai, maka tuliskan nilai tersebut di

dalam atribut +alue input t"peKIte5tJ nameKInamaJ ,alueKIRian ArionaJ <

engan begitu, ketika halaman dibuka, te5t input ini se!ara otomatis akan terisi dengan

nilai dari atribut +alue

 Te5t Area 'ama halnya dengan >nput $e5t, namun te5tarea dapat diisi lebih dari satu baris, !o!ok  digunakan untuk isian yang  panjang, se per ti alamat, deskripsi, atau  biodata

"erbeda dengan k ontr ol lainnya yang menggunakan tag input te5t area memiliki

tag sendiri yaitu te5tarea
Gambar 73 $e5t ar ea

Com%o Bo5 &ombo "o5 adalah k ontr ol  yang memiliki  pilihan ketika diklik )embuatannya sam a

se per ti pembuatan a(tar/%ist namun dengan tag yang  berbeda la%el forKI0otaJ6ota
Gambar 74 &ombo "o5

Su%mit
Gambar 77 "utton

'ebagai latihan, kita !oba menggabungkan k ontr ol-k ontr ol  yang telah anda  pelajar i

sebelumnya men jadi satu (orm utuh "uatlah (ile  baru, dengan nama (ile latian?!tml, lalu ketikkan kode #$M% berikut pada

(ile latian?!tml *! 49-CTGP$ HTML (! HTML +! ead =! titleForm! <ead ?! %od" ! form D! la%el forKInamaJ@ama! optiona0arta
"erikut ini adalah tam pilan  yang anda dapatkan  jika (ile latihan;html dibuka di dalam

 br owser 

Gambar 7 ?orm utuh

alam buku ini, saya tidak akan membahas bagaimana !ara memroses data yang dikumpulkan dari (orm terse but, karena dalam #$M% kita tidak  bisa melakukan  pr oses

 pengolahan data >ngat  bahwa #$M% hanya digunakan untuk mem(ormat dok umen,  bukan untuk memroses data .ntuk memroses data, kita bisa menggunakan bahasa pemrograman web, se pe r ti Ja+as!r ipt

atau )#) atau bahasa pemrograman web lainnya

engan bahasa pemrograman se per ti Ja+as!r  ipt atau )#) anda dapat mengolah data -

data yang dikumpulkan dari ?orm #$M% untuk diproses dan dikeluarkan k em bali men jadi suatu in(or mas i baru

Ba% E

 Ta%el .ntuk menam pilk an data dengan tipe tabel dalam #$M%, kita bisa menggunakan tag ta%le! ta%le
.ntuk membuat baris tabel,  kita gunakan tag tr P singkatan dari table row Editulis di dalam tag tableF ta%le tr
'edangkan untuk menentukan banyaknya k olom, tergantung dari  banyaknya tag td Etable dataF yang digunakan di dalam tag tr! *! ta%le (! tr +! =! >! ?! 
td@o
.ntuk menyatukan k olom atau baris Emerge/cell F k ita tambahkan atribut !olspan Euntuk 

merge hor  i7ontal ly/se!ar a hor iontalF atau rowspan Euntuk merge 8ertical lyF

*! ta%le (! tr +! td ro;spanK(@o! td ro;spanK(@ama
*>! *?! *!

Jik a

tdRian
anda tam pilk an dalam  br owser , maka tabe l tersebut tidak akan memiliki gar is,

untuk mem ber i  garis  pada tabe l anda dapat menambahkan atribut border3 pada tag

atau anda dapat menambahkan border lewat nantinya ta%le

&''

Gambar 76 $abel setelah pemberian atribut bor der 

'ebagai latihan, anda tulis kode tabel di atas dan tambahkan beberapa data lagi, lalu simpan dalam (ile latian!tml

E!*! Stru0tur dianjur0an

ta%el

"an#

*gar (ormat tabel sesuai dengan k ete ntuan,  *nda

dapat menggunakan tag tead

untuk  baris yang men jadi Judul tabel, t%od" untuk data/isi dari tabel dan tfooter untuk k ak i tabe l Ebisa diisi sama dengan thead atau lainnyaF *! ta%le %orderK* (! tead +! tr =! td ro;spanK(@o! td 3olspanK(enis 6elamin! tr *?! td*
E!(! 6esalaan ta%le

dalam

pen##unaan

$ag table digunakan untuk mem(ormat data tabular/data yang membutuhkan (or mat

tabel dalam menam pilk annya, se per ti !ontoh penggunaan tabel untuk menam pilk an data nilai  berikut :

 Io  Iama

 Iilai *k hir 

3

Jono

<9

4

Joni

86

7

edi

=4

>nde5 * " *

Masih  banyak yang menggunakan tabel untuk keperluan layouting sebuah we bsite , misalnya menggunakan tag table untuk membuat layout 4 kolom, 7 kolom, atau 

kolom se per ti !ontoh berikut :

Gambar 7; )enggunaan table untuk layout adalah menyalahi atur a n

)enggunaan tag ta%le untuk keperluan layout adalah menyalahi aturan/(ungsi dari

tag table te rse but %ayout table biasanya dibuat se!ara otomatis oleh aplik asi se per ti atau

)hotoshop Edi- generate oleh sli!ing toolF

reamwea+er 

Ba% *)

Studi 0asus * 6on,ersi desain 0e HTML 'ebagai seorang web designer, *nda harus mampu menerjemahkan suatu desain we b ke dalam bahasa #$M% dan &'' )roses  pener   jemahan  dari

desain ke dalam kode

#$M% ini disebut dengan )embuatan  &arkup, yang dilan jutk an dengan proses 'tyling E)enambahan &'' yang akan kita pelajar i pada bab selan jutnyaF

Gambar 78 esain web yang akan kita k on+er si

)ada bab ini anda akan belajar membuat markup dari sebuah desain web yang te lah disiapkan 'aya tidak akan memberikan desain web yang rumit, sebagai latihan k ita

gunakan desain yang sederhana dulu

*)!*! Pesiapan 'ebelum kita mulai  proses pembuatan markup untuk desain web terse but, kita  buat

(older baru terlebih dahu lu, agar pekerjaan kita rapih dan te r struk tur 

"uatlah (older baru dengan nama

!Latihan

"arku#$

dan buatlah (ile #$M%  baru

dengan nama !latihan%marku#.html$. alam (older tersebut buat lagi satu buah (older dengan nama “ima&es ” untuk  menyimpan seluruh gambar yang diperlukan dalam (ile #$M% yang kita  buat %alu !o py

gambar yang terdapat di dalam (older resour!es/images yang disertakan  be r sama ebook ini

*)!(! 2rapper Kita mulai  dari  pembuatan sebuah di+ untuk menampung seluruh konten situs yang akan dibuat 'aya akan menggunakan di+ dengan id wrapper Iantinya di+ ini akan k ita

 buat r ata-tengah,  jadi setiap browser di oom-in atau di oom-out, konten situs tet ap  berada di te ngah *! 49-CTGP$ HTML (! HTML +! ead =! titleLatian Mar0up! <ead ?! ! %od" D! di, idKI;rapperJ E! *)! 
*)!+! Header Kita mulai dari  pembuatan h eade r , perhatikan gambar berikut :

Gambar 7= "agian header web

'udah ada bayangan, pertama kita  buat sebuah di+ dengan nama id header Eatau

terserah andaF alam gambar di atas  bisa anda perhatikan terdapat gambar logo, lalu Menu Ekita  buat dengan unordered listF dan terakhir sebuah te5t input untuk  pen!ar ian

'emuanya telah anda  pelajar i  pada bab- bab sebelumnya Jadi, Markup untuk  bagian

header adalah se per ti berikut : D! di, idKI;rapperJ E! di, idKIeaderJ *)! im# sr3KIlo#o!pn#J altKIlo#oJ < **! *(! ul idKImenuutamaJ *+! lia refKIIHome! lia refKIIideo
Mudah bukan, semua tag-tag tersebut telah saya jelaskan sebelumnya Jik a anda

masih tidak me nge r ti atau lupa anda dapat membuka kem bali bab se be lumnya

*)!=!

Content

Kita lan jutk an dengan proses markup &ontent/isi 'itus

Gambar 7< "agian Konten 0eb

Jik a

anda perhatik an, disan a terdapat tiga * r tik e l yang memiliki penam pilan dan struk t ur 

yang sama, untuk itu kita akan menggunakan penamaan dengan &lass  pada di+ ini  Iamun sebelumnya, kita tulis sebuah di+ untuk menampung ar tik el yang akan kita  buat

dengan nama !da' tar%artikel$ ((! di, idKIdaftararti0elJ (+! di, 3lassKIarti0elJ (=! (>! 
Gambar 9 eta il setiap post

Kita masuk ke detail setiap artikel i dalam ar tik e l  ini terdapat sebuah gam bar ,  judul artikel, tanggal, ringkasan dan sebuah link “wat!h this” 'udah terbayang bagaimana kode #$M% nya ((! di, idKIdaftararti0elJ (+! di, 3lassKIarti0elJ (=! im# sr3KIima#es<#am%ararti0el!jp#J altK I.am%ar Arti0elJ < (>! * .ates ,s o%s<* (?! %Fe% *( ())<%%ie;s : +=D=E<% (! pBill .ates and Ste,e o%s suare off in te 3lean ;ite ,irtual ;orld of  te i3oni3 Ma3 ads
'elanjutnya anda tinggal &opy di+ !lass artikel ini sebanyak tiga kali 'ehingga me n jadi

se per ti berikut : ((! di, idKIdaftararti0elJ (+! di, 3lassKIarti0elJ (=! im# sr3KIima#es<#am%ararti0el!jp#J altKI.am%ar Arti0elJ < (>! * .ates ,s o%s<* (?! %Fe% *( ())<%%ie;s : +=D=E<% (! pBill .ates and Ste,e o%s suare off in te 3lean ;ite ,irtual ;orld of  te i3oni3 Ma3 ads
+*! +(! ++! +=! +>! +?! +! +D! +E! =)! =*! =(! =+! ==! =>! =?!

im# sr3KIima#es<#am%ararti0el!jp#J sr3KIima#es<#am%ararti0el!jp#J altKI.am%ar Arti0elJ < * .ates ,s o%s<* %Fe% *( ())<%%ie;s : +=D=E<% pBill .ates and Ste,e o%s suare off in te 3lean ;ite ,irtual ;orld of te i3oni3 Ma3 ads
*)!>! Side%ar Kita lanjutkan dengan pembuatan side bar ,  perhatikan apa yang terdapat di dalam alam side bar 

Gambar 3 'idebar 

'etiap item dalam sidebar memiliki judul )ertama terdapat deskripsi singkat tentang situs,

dan

sebuah

menu

na+igasi  berdasarkan  berdasarkan

kategori 'ama

se per ti

menu

unorde red list se belumnya, kita  buat dengan menggunakan unordered =?! =! =D! =E! >)! >*! >(! >+!

di, idKIside%arJ (2o ;e are1<( pAriona!net adla tempat anda %er%a#i pen#etauan seputar ;e% desi#n dan ;e% de,elopment serta se#ala informasi "an# %eru%un#an den#an internet
>=! >>! >?! >! >D! >E! ?)! ?*!

li li li li li li li li

refKII refKIIP Poto otoso sop< p

*)!?!

Footer

$erakhir, kita buat markup untuk bagian (oo (ooter 

Gambar 4 "agian ?ooter 0eb

"agian ini hanya mempunya te5t !opyright, dan saya yakin anda dapat mem buat markup dari  bagian (ooter (ooter ini : ?*! di, idKIfooterJ ?(! pAriona!net 3op"ri#t ()*( %" Ariona Rian
Mudah bukan Jik a anda merasa bingung bagaimana  pe nulisan kode sele ngk apn apnya,

 berikut  berikut ini kode lengkap dari  proses markup kita se belumnya *! 49-CTGP$ HTML (! HTML +! ead =! titleLatian Mar0up! <ead ?! %od" ! di, idKI;rapperJ D! di, idKIeaderJ E! im# sr3KIlo#o!pn#J altKIlo#oJ < *)! ul idKImenuutamaJ **! lia refKIIHome! form *?! input t"peKIte5tJ nameKIsear3J < *! 
(>!

pB pBil illl .at .ates and Ste Ste,e o%s o%s su suare are off off in te ;ite ,irtual ;orld of te i3oni3 Ma3 ads
(?! (! (D! (E! +)! +*! +(! ++! +=! +>! +?! +! +D! +E! =)! =*! =(! =+! ==! =>! =?! =! =D! =E! >)! >*! >(! >+! >=! >>! >?! >! >D! >E! ?)! ?*! ?(!

3lean lean

3lean lean

3lean lean

di, idKIside%arJ (2o ;e are1<( pAriona!net adla tempat anda %er%a#i pen#etauan seputar ;e%desi#n dan ;e% de,elopment serta se#ala informasi "an# %eru%un#anden#an internet
*gar tidak  bingung membedakan penutup di+ yang satu dengan yang lainya, saya ilk an menambahkan komentar di setiap penutup di+ K om omentar ini tidak akan ditam pilk 

 pada br owser  )embuatan komentar dapat dilak uk an dengan menambahkan 4 dan ditutup dengan BBH!ontohnya :

4 6omentar 6omentar ditulis0an di sini 

Jik a

anda buka (ile #$M% ter se se but, maka yang akan anda lihat adalah se per ti berikut :

Gambar 7 $am pilan  dari 'tudi Kasus

?ile #$M% yang

desain web yang

ditam pilk an

akan te r lihat  plain/polos, tidak sama se pe r ti  pada

diberikan $api inilah

tugas dari

#$M% yakni  &ar ku   p 2  * or matt ing 

*dapun !ar a kita me nam pilk an  bagian- bagian kode #$M% agar te r lihat se per ti  pada

desain web yang diberikan, kita akan menggunakan &'' dan akan kita  pe lajar i pada "ab &''

Ba% **

alidasi HTML

Mar0up

Halidasi markup adalah proses dimana kode #$M% kita di+alidasi apakah sudah  benar 

atau belum oleh aplik asi +alidator dari 07&? Halidasi ini sangatlah diperlukan unt uk  memeriksa apakah ada yang salah dengan markup #$M% yang telah kita  buat atau ada  beberapa bagian yang te r le wat se per ti penutup tag, atribut dan lain se bagainya 'ebagian orang  berpendapat bahwa markup #$M% yang +alid akan mem per !e pat

 proses loading website dan lebih  bersahabat dengan 'ear!h 2ngine .ntuk melakukan +alidasi, silahkan buka alamat berikut: ttp :<< , al idator!;+ !or#
Gambar  Halidator #$M% dari 07&

*da tiga !ara  pe ngu jian Markup #$M%, yakni dengan mengetikkan alamat (ile #$M% yang akan diuji EHalidate  by .B%F opsi ini adalah untuk mem+alidasi halaman #$M% yang

;

07& E0orld 0ide 0eb &onsortiumF adalah komunitas internasional yang  bekerja untuk membangun standar web seperti #$M% dan &'' htt p://wwww7org/

8

earch

 E ngineatau

mesin pen!ari adalah aplik asi untuk men!ari berbagai in( ormasi di inte rnet,

seperti Google!om, bing!om dan lain se bagainya

sudah “online” atau website yang mengupload (ile

#$M% anda

mem+alidasi kode #$M% yang adalah

dengan

sudah online  ara

EHalidate  by

terdapat

(ile

kedua adalah dengan

uploadF,

dan +alidator akan

dalam (ile te r se but, dan (ara

terakhir

  n langsung kode #$M% dan mem+alidasinya EHalidate by me nget ik ka

dire!t inputF 'ebagai !ontoh, kita !oba mem+alidasi latihan markup yang kita  buat se belumnya

dengan !ara “Halidate   by (ile upload”  Klik tab “Halidate   by (ile upload”,  lalu klik &hoose (ile untuk memilih (ile #$M% dan pilihlah latihan Markup yang telah kita  buat pada study

kasus dan Klik tom bol &he!k untuk mulai mem+alidasi (ile #$M% kita

Gambar 6 Halidate by ?>le . ploa d Jik a pengu jian

sukses, maka akan mun!ul pesan lulus uji markup #$M% se per ti ber ik ut:

Gambar ; #asil +alidasi markup #$M%

)erhatikan, bahwa kita mendapatkan   per ingatan, !oba s!roll ke bawah dan anda ak an menemukan peringatan tersebut Ebegitu  juga dengan error  P Jik a adaF

Gambar 8 )eringatan +alidasi

K esim pulan dari  peringatan di atas adalah k ita belum menyertakan in(ormasi !har a!ter  en!oding .ntuk memperbaikinya tambahkan kode berikut di dalam tag head dari (ile latihan markup ki ta ead titleLatian Mar0up
Maksud dari tag tersebut adalah menentukan tipe karakter en!oding yang digunak an

dalam (ile #$M%, dan kita

gunakan tipe “.$?-=” 'ekarang kita

!oba Be+alidate

EMem+alidasi ulangF (ile #$M% kita

Gambar = %ulus uji + alidasi #$M%

'ekarang kita telah lolos uji +alidasi, 3  peringatan yang tersisa adalah karena +alidator 

(ile #$M% +ersi 6 dari 07& ini masih berupa ek sper imen,so it9s not  problem and you ar e ready for the next l e8el -

Ba% *( Semanti 0 'e buah dokumen #$M% tidak lain adalah kumpulan dari tag-tag #$M% dan se per ti yang telah anda k et ahu i  bahwa #$M% adalah bahasa untuk me-markup atau mem- for mat  suatu

dokumen #$M% B)*A+ untuk membuat bagaimana dokumen tersebut

ditam pilk an 'ama halnya dengan aplik asi  pengolah kata, (ormating yang dilak uk an pada suatu dokumen ditujukan untuk memberikan mak na-mak na tersendiri pada setiap k ata -k ata yang di olahnya Misalnya, ketika suatu teks ditam pilk an miring, biasanya ada makna tertentu pada te k s

terse but, se per ti pada pertanyaan berikut : IBeri0ut ini adala ta#ta# HTML kecuali :J

K ata “k e!uali” di sana diber i (ormat mir ing karena  penulis ingin menegaskan  bahwa  jawaban yang  benar adalah yang  bukan tag #$M% Jik a kalimat pertanyaan ter se but diba!a, biasanya akan ada perbedaan intonasi pada kata “k e!uali”

alam #$M%, terdapat dua tag yang :em(

dan :i(. ter se but/ Jik a 

%alu

apa

perbedaan

dapat membuat suatu teks miring yakni

kedua

tag

tag

kita sangkutpautkan pertanyaan ini dengan !ontoh kasus di atas, penggunaan tag

@emA untuk memir ingk an kata “k e!uali” adalah !ara yang  benar Mengingat tag @emA

ini memang ber(ungsi untuk memberikan tekanan pada suatu teks EemphasisF

"e rbeda dengan tag @iA yang hanya ber(ungsi untuk me nam pilk an teks men jadi miring tanpa ada makna sama sek ali

*(!*! HTML

Ma0sud Semanti0 dalam

'emantik  ber ar ti makna yang terkandung dari

suatu kata alam #$M%, semantik 

 ber ar ti makna yang terkandung dari suatu tag #$M% 'e per ti  pada !ontoh k asus

se belumnya, penggunaan tag @emA le bih memiliki nilai semantik dari  pada tag @iA )ada dasarnya, Gunakanlah ta g-tag  #$M% sesuai dengan maksud/(ungsi dari tag #$M%

terse but,

Jangan

menggunakan suatu tag #$M% karena tag tersebut m e milik i

 penam pilan berbeda Misalnya, penggunaan tag @tableA $ag ini  ber(ungsi untuk membuat suatu tabe l atau

data ta bular ,  penggunaan diluar itu adalah salah, se per ti  penggunaan tag table untuk   pembuatan layout we b

.ntuk me nget ahui

(ungsi dari

setiap

tag #$M% anda

dapat

memba!anya di

ttp:<<;;;!;+s3ools!3om
*(!(! Semanti01

Pentin#0a

)enulisan dokumen #$M% yang

semantik ditu juk an agar dokumen #$M% dapat

dipahami oleh k om puter , karena pada dasarnya !ara ber(ikir komputer berbeda dengan !ara ber(ikir manusia Manusia  bisa memahami suatu dokumen dengan adanya tanda ba!a, atau ( or matting

Eseper ti teks mir ing tebalF "erbeda dengan k om puter , dan pada kasus ini tag-tag #$M% lah yang

me n jadi tanda ba!a yang

akan membantu komputer untuk memahami

dokumen #$M%

K em bali kepada  penting tidaknya semantik, boleh  jadi dokumen yang semantik dapat mempermudah sistem komputer untuk mengolah in(ormasi dalam dokumen untuk  keperluan ter te ntu, misalnya untuk keperluan Mesin )en!arian E'ear!h 2ngineF agar  hasil  pen!arian lebih akurat dan sesuai dengan yang diingink an

Ba#ian 

CSS

Ba% *+

Cas3adin# 7CSS8 *+!*! CSS

St"le

Seet

Pen#enalan

&'' adalah kependekan dari &as!ading 'tyle 'heet, ber(ungsi untuk me m pe r !antik 

 penam pilan #$M% atau menentukan bagaimana elemen #$M% ditam pilk an, se per ti menentukan posisi, merubah warna teks atau ba!kground dan lain se bagainya )erhatikan !ontoh kode &'' berikut :

Gambar < &ontoh Kode &''

Sele3to r 'ele!tor adalah elemen/ta g #$M% yang ingin diber i style

*nda dapat menuliskan

langsung nama ta& yang ingin diber i style tanpa perlu menambahkan tanda  )ada !ontoh kode &'' di atas, kita akan mem ber i style  pada seluruh tag h3 yang te rdapat dalam (ile #$M% Jik a

tag #$M% yang ingin diber i  style memiliki >, anda dapat menuliskan nama >

tersebut dengan diawali tanda kress EQF Ueader

an jika tag yang dibe r i  style memiliki &lass, maka  penulisan sele!tor  bisa dilak uk an

dengan tanda titik EF diikuti dengan nama !lass

!arti0el

Jik a

anda hanya me nuliskan satu sele!tor, se per ti !ontoh kode &'' di atas, maka se luruh

tag h3 yang terdapat dalam (ile #$M% akan memiliki style yang sama "agaimana  jik a kita hanya ingin mem ber i  style  pada tag h3 yang han y a terdapat di dalam &lass artikel Maka  penulisan sele!tornya se per ti berikut : !arti0el *

K ode tersebut akan memerintahkan pada browser untuk m em ber i  style  pada tag h3 yang hanya terdapat di dalam class ar ti   kel Eatau - h3 yang merupakan !hild dari !lass

ar tik elF

* nda- pun dapat memilih lebih dari satu tag untuk penghematan kode &'' Misalnya ketika anda memiliki dua atau lebih tag dengan warna ba!kground yang sama, dari  pada

menuliskan kode se per ti ini : *V %a30#round3olor: U?????? W P V %a30#round3olor: U?????? W a V %a30#round3olor: U?????? W

anda dapat menggabungkan sele!tor dengan menambahkan tanda koma pada nama tag yang ingin diber i style * p a V %a30#round3olor: U????? W

Propert" alue

dan

)roperty adalah si(at-si(at yang ingin diterapkan pada sele !tor , se per ti warna te 5t,

warna ba!kground, jarak antar e leme n, garis  pinggir dan lain se bagainya .ntuk memberikan nilai/+alue  pada property kita gunakan tanda titik dua E : F 'et ia p  property diakhiri dengan titik koma ERF, jika anda tidak mengakhirinya maka  br owser 

tidak akan mengetahu i maksud dari  property te rse but )r o per ty- pr o per ty  pada &'' sangat mudah dimenger ti karena lebih mirip  bahasa k ita

sehar i-har i Misalnya untuk merubah warna te5t kita gunakan property !olor, untuk 

merubah warna ba!kground kita gunakan property ba!kground-!olor, untuk merubah

an/ ukuran huru( kita gunakan property (ont-sie Mudah dimenger ti buk an !arti0el * V 3olor : red %a30#round3olor : %lue fontsie : ()p5 W

Menurut saya, K ode &'' sangat mudah dimenge r ti, karena k ata an ata -k ata ata yang digunak an

sudah tidak asing lagi,  perhatikan !ontoh kode &'' sebelumnya,  jika kita ubah k e  bahasa kita sehar i-har i, kira-kira men jadi se per ti berikut : “#ey "row

E"r owser F &ari

tag h3

yang

terdapat di

dalam !lass

 jik a ar tik el,  jik 

ditemuk an an/ada, ubah warnanya men jadi merah, warna ba!kground men jadi  biru dan ukuran huru( men jadi 49  pi5el” &ukup perkenalan dengan &''-nya, lalu yang men jadi  pertanyaan besar anda saat ini

adalah : “im imana saya mengetikkan kode te rse but/”

*+!(! CSS

Penulisan

anda et iganya bisa and *da tiga !ara penulisan kode &'', yaitu inline , internal dan e5ternal K et lakukan sesuai dengan kebutuhan kebutuhan "erikut !ontoh penggunaan dari metode-metode

terse but:

nline )enulisan kode &'' dengan metode inline ini bisa bisa

dilak uk an an langsung pada tag

yang ingin diber i style dengan menggunakan atribut style * st"leKI3olor : red I udul Situs <*

ar ena anda menuliskan &'' )ada metode ini, anda tidak perlu menuliskan sele!tor K ar  langsung pada tag yang ingin diber i style

&ara ini sangat tidak dian jur k  kan   n, karena *nda akan men!ampurkan antara “?or mat” dan a “)r esentasi” &ara ini juga tidak e(ekti( ketika anda akan melakukan perubahan  pada &''

nterna l stylee Metode &'' internal ditulis di dalam tag styl head

yang yang ditempatkan pada tag

HTML

!!!

ead  titleudul HTML
kan   n untuk  pengu jian  style, atau ketika anda hanya a Metode kedua ini sangat dian jur k 

memiliki satu halaman we b

$5ternal Metode yang terakhir adalah dengan membuat (ile &'' dan dipanggil di dalam tag head ?ile &'' memiliki ekstensi Eak hiranF &'' misanya nama f il  il e. e.C  SS 

)emanggilan (ile &'' dilak uk an an dengan menggunakan tag link : HTML ead  titleudul HTML
<ead 

*tribut r el adalah in(ormasi hubungan ErelationshipF dari tag link te rse but, yaitu se bagai

annya sam a stylesheet #re( diisi dengan lokasi (ile &'' yang ingin dimuat )e manggilann dengan pemanggilan gambar atau link

Ba% *= Bo5Model *=!*!

Mar#in

)roperty margin digunakan digunakan untuk memberikan jarak antar ele men/tag #$M% ag #$M% Misalnya  jarak antar Fdi,H dan ta g-tag #$M% lainnya 'ebagai !ontoh,  buatlah (ile #$M%  baru dengan nama latianD!tml, lalu tam bahk an an

kode ber ik  ik ut: di, 3lassKI%o5J Bo5 0e satu 
 ;ngat, tambahkan kode tersebut  pada  struktur  %T&' standar  yang memi memiliki :-<1CT=!E %T&'(, :%T&'(,:head( dan  seter us usnya.

kode &'' berikut %alu tambahkan tag style dalam tag head, dan ketikkan kode &'' berikut : !%o5V %a30#round3olor:#reen 3olor: "ello; ;idt:*))p5 ei#t:*))p5 mar#in%ottom:>)p5 W

"erikut adalah tam pilan yang akan anda dapatkan :

Gambar 69)enambahan mar gin- bottom pada bo5

Jar ak  antar  bo5

ke satu dan  bo5 ke dua sedikit ber   jauhan, karena kita menam bahk an

margin bawah Emar gin- bottomF sebesar 69 p5

.ntuk melihat  perbedaan ketika kita memberikan margin atau tidak, anda dapat menghapus property mar gin- bottom dan perhatikan pe rbedaannya *nda juga dapat memberikan jarak dari kanan ErightF, kiri Ele(tF dan atas EtopF Misalnya : mar#intop:()p5 mar#inri#t:+)p5 mar#in%ottom:>)p5 mar#inleft:=)p5

*=!(! Paddin# )ada latihan sebelumnya, kita telah memberikan jarak antar elemen #$M% dalam !ontoh sebelumnya jarak antar di, namun !oba perhatikan antara te5t E"o5 ke 5F

dengan garis  pinggir kotak, tidak ada  jar ak sama sekali, merapat ke sisi bo5 ter se but .ntuk itu  property padding lah yang akan memberikan jarak antara konten elemen dengan elemen terse but

'ebagai !ontoh tambahkan kode

&''  berikut, pada

!lass

bo5

yang

kita  buat

se belumnya: !%o5V %a30#round3olor:#reen 3olor: "ello; ;idt:*))p5 ei#t:*))p5 mar#in%ottom:>)p5 paddin#left:()p5 W

an sek arang, anda dapat melihat  jarak antar a te5t yang  berada di dalam bo5 )erlu diperhatikan  juga,

 bahwa

k etik a

k ita

menambahkan padding, ukuran bo5 juga ak an

 berubah Misalnya kita menentukan ukuran lebar dari  bo5 sebesar

399p5 K et ik a

kita

me nam bahk an

 padding-le(t sebesar 49p5, maka total lebar dar i

bo5 tersebut me n jadi 349 p5 Jadi jika

Gambar 63 )emberian padding pada bo5

anda ingin ukuran bo5 tetap 399p5, k ita

harus menghitung ulang width dari bo5 ter se but Misalnya kita ubah men jadi =9p5 engan  begitu, =9p5  49p5 men jadi 399 p5

*=!+! Sortand

CSS

)ada pembahasan sebelumnya,  bisa memiliki lebih dari

kita simpulkan bahwa setiap property dapat

satu  jenis, misalnya margin dapat memiliki  jenis mar gin-to p,

margin-right, mar gin- bottom, dan mar gin-le (t mar#intop:()p5 mar#inri#t:+)p5 mar#in%ottom:>)p5 mar#inleft:=)p5

aripada menuliskan seluruh property te rse but, kita bisa menggunakan C.. / hor thand  yaitu menggabungkan seluruh +alue Etop,

right,  bottom, dan le( tF ke dalam satu

 pr o per ty 'ebagai !ontoh,  kita akan menggunakan C/shorthand untuk )roperty margin men jadi

se per ti berikut : mar#in : ()p5 +)p5 >)p5 =)p5

Masing-masing dari nilai tersebut adalah : mar#in : top ri#t %ottom left

 bisa kita simpulkan bahwa nilai dari &''-shorthand margin ini memiliki urutan searah  jarum jam dan dimulai dari mar gin-to p Kita juga bisa  be r main-main dengan property margin ini,  perhatikan dengan sek sama !ontoh ber ik ut: •

K etik a  kita memberikan satu nilai  pada property margin, ini artinya k ita memberikan nilai tersebut pada seluruh sisi

mar#in: ()p5

engan  penulisan se per ti  ini, maka nilai dari margin-top, right, bottom dan le(t adalah 49 p5R •

K etik a kita memberikan dua nilai  pada property margin, berar ti nilai selan jutnya mengik uti nilai sebelumnya &ontohnya se pe r ti ini :

mar#in: ()p5 +)p5

)ada !ontoh di atas  ber ar ti  kita memberikan nilai mar#intop dan right  buk an/,

nah nilai dari mar gin- bottom akan disamakan dengan nilai mar gin-to p dan mar gin-le(t sama dengan m ar gin-r ight

  an ketika k ita menuliskan ti&a nilai, maka nilai yang tidak diisi akan mengik uti

•

nilai yang diisi, sama halnya ketika kita mem ber i 4 nilai mar#in: ()p5 +)p5 =)p5

)ada !ontoh di atas, kita memberikan nilai untuk to p, right dan  bottom ight 'edangkan untuk le(t akan disamakan dengan r ig

)enggunaan nilai se pe r ti  ini juga  berlaku pada padding,  pr o per ty padding, dan  pr o pe r ty- pr   jenis lainnya se jenis

*=!=!

Border

)roperty border digunakan untuk memberikan garis  pinggir pada pada eleme n, setidak nya ada tiga property yang harus anda set, yaitu !olor, style dan width %order3 %order3olor olor : %la30 %la30 %ord %orders erst"le t"le : solid solid %order;idt : >p5

namun anda  juga dapat menggunakan C shorthand sehingga men jadi se per ti berikut : %order : ;idt st"le 3olor

 jadi jika kita ubah !ontoh kode di atas me n jadi &''-shorthand, kodenya me n jadi se pe r ti  berikut  berikut : %order : >p5 solid %la30

&oba &obala lah h tamb tambah ahka kan n

kode kode

terse tersebu butt

pada pada

latihan

sebelumnya dan yang akan anda dapatkan adalah se per ti  berikut : 'ama halnya halnya dengan dengan )adding, )adding,  penambahan pr o per ty

 border  juga akan merubah ukuran dari  b  bo5 Jad i,

Gambar 64 )enambahan bor der  der 

anda se per ti  yang saya jelaskan sebelumnya K et et ik a and

ingin membuat ukuran lebar bo5 tetap 399p5, maka anda harus menghitung ulang width dari bo5 ter se se but

Kali ini  perhatikan bahwa kita memberikan border pada seluruh sisi bo5, artinya  jik   jik a kita tentukan ukuran border sebesar 6p5, maka 39p5 Euntuk width, karena 6p5 untuk  le(t, dan 6p5 untuk r ightF akan ditambahkan pada ukuran bo5 tersebut 'e hingga

ukuran bo5  berubah kem bali me n jadi 339 p5

uran gi width dari bo5 tersebut men jadi  89p5 sehingga : 89p5 EwidthF J .ntuk itu kita k uran E padd E border F  399 p5 49p5  pad dingF  39p5  b

alam dunia &'', kasus se per ti  ini disebut dengan bo5-model $erdapat dua  pr o per ty

yang mem pengaruhi ukuran dari sebuah  bo5 yaitu padding dan border )erhatik an an skema bo5 skema bo5 model berikut untuk !ontoh kasus kasus di atas :

Gambar 67 skema bo5-model

tag   %T&' ditampil kan Tahukah anda, bahwa  setiap el emen2 tag  kan dalam bentuk   x/model  berlaku  berlaku untuk seluruh untuk seluruh el emen %T&' box2kotak, jadi aturan bo x/

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

Ba% *>  T"po#rap" 'e!ara default EbawaanF, halaman web yang k ita  buat akan menggunakan (ont standar  yaitu Times )ew  >oman  >oman Iamun anda dapat merubahnya dengan property (ont(ont -(amily "erikut !ontoh penggunaan property (ont-(amily : fontfamil": 3ali%ri

 Iamun perlu diperhatikan bahwa tidak semua )& memiliki (ont yang kita te ntuk an an, (ont-(amily dengan !alibri, maka pada )& dengan misalnya ketika kita menentukan (ontsistem operasi %inu5, tidak akan ditemukan ( ont-te r se se but (ont -(ont yang disebutk an an .ntuk itu anda dapat memberikan lebih dari satu  jenis (ont, (ontselanjutnya akan

men jadi  pengganti ketika

(ont

sebelumnya

tidak

ditemuk an an

&ontohnya : fontfamil": 3ali%ri arial taoma ,erdana sansserif

(ont  jenis !alibri tidak dite muk an an, maka yang akan digunak an adalah arial, k et K et et ik a (ont jenis etik a

an (ont arial maka tahoma yang akan digunak an,  begitu sete rusnya tidak ditemuk an sampai kita tentukan  jenis (ont yang dipakai, sans-ser i(  an i(  atau seri( dan browser ak an

sans-ser i(  menggunakan (ont yang sesuai dengan  jenis yang disebutkan Eseri( atau sans F i( F

 "etika nama  font memiliki

spasi, maka anda

harus

member ikan tanda

 petik2kutip pada  petik2kutip pada nama  font tersebut. &isalnya tersebut. &isalnya  se goe ui . ? 

$

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

Apa itu San Sansse sserif rif dan Serif  ibagi me n jadi dua yakni seri( dan sans -ser i(  alam typography  jenis (ont dibag i(  "agian ini akan menjelaskan se!ara singkat perbedaan dari kedua  jenis (ont ini

Serif   jung K ata ata 'eri(  bisa diartikan sebagai kait, jadi jenis huru( seri( memiliki kait disetiap u jung  paling terkenal terkenal adalah $imes $imes Iew B oman )erhatik an huru(nya ?ont  jenis seri( yang  paling an

det ail huru(nya

?ont  jenis

ini bisa

kita gunakan untuk teks dengan

konteks (ormal atau gaya klasik  Iamun anda dapat

an ik an memadupadankan  jenis (ont ini sehingga mem ber ik  kesan tertentu pada web and a

Gambar 6 ?ont jenis 'eri( memil emilik  ik i kait disetiap ujungnya

Sans serif  *rti dari

sans, adalah “tanpa”

diartikan sebagai  jenis

Jad i

sans-ser i( i(  bisa

(ont tanpa kait

Lang

 paling

umum digunakan untuk  jenis sans-ser i( adalah i( adalah ar ial ial is  ini Je nis 

memberikan kesan dynamis dan luwes 'e per ti

saya sebutkan sebelumnya anda dapat membuat k esan tersendiri ketika memadupadank ann ann ya

i(  Gambar 66 ?ont jenis 'ans 'er i( 

et ik a alam pengaturan  br owser ,  kita bisa memilih (ont untuk seri( dan sans -ser i(  i(  Jadi k et (ont(ont-(amily menggunakan seri(, maka (ont yang telah kita pilihlah yang akan digunak an

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

Gambar 6; pengaturan (ont pada browser Google &hr ome

Gambar 68 )engaturan (ont pada ( ir e( o5

.ntuk menentukan ukuran (ont, kita gunakan property fontsie : fontsie : *(p5

anda  juga dapat menggunakan satuan pt EpointF untuk ukuran (ont : fontsie : *(pt

(ont yang kita gunakan pun dapat ditentukan ketebalanna dengan menggunak an  property (ont-weight  Iilai yang bisa dipakai pada property ini adalah normal,  bold,

 bolder  font;ei#t : %old

"ukan tidak mungkin untuk mengatur kerning atau jarak antar huru( alam &'' k ita

 bisa merubah jarak antar huru( dengan property letter -spa!ing letterspa3in# : *>p5

'emakin besar nilai  pi5e l yang diberikan semakin jauh jarak antar huru( *ndapun dapat menggunakan nilai negati( untuk memperdekat jarak antar huru( letterspa3in# :(p5

'edangkan untuk memberikan jarak antar baris, kita gunakan property line -he ight lineei#t : +)p5

an untuk membuat te5t m e n jadi rata kiri, tengah atau k anan, k ita gunakan

 pr o per ty te5t align Iilai yang dapat digunakan adalah le(t, !ente r , right, dan  justi(y untuk r ata k iri-k anan te5tali#n : 3enter

&o balah untuk  be main-main dengan property tersebut dan perhatikan perubahan yang didapatkan "uatlah (ile latianE!tml, isi dengan beberapa paragra( beserta headingnya

dan terapkan pr o per ty- pr o per ty yang telah anda  pelajar i di atas

Ba% *? CSS ma#e 'ebenarnya, berbi!ara tentang image dalam &'', maka kita sedang mem bi!arakan

 ba!kgr ound-image "agaimana menggunakan sebuah gambar men jadi  ba!kgr ound untuk suatu elemen )ada bagian ini anda akan mem pe lajar i  penggunaan %a30#round ima#e, teknik spr ite , dan %a30#roundBrepeat

*?!*! ima#e

%a30#round

.ntuk me manggil gambar sebagai ba!kground dari e lemen, kita gunakan  pr o per ty

 ba!kgr ound-image )erhatikan !ontoh penggunaan property ini : %a30#roundima#e : url 7Iima#es<%a30#round!jp#J8

K et ik a anda menggunakan gambar dengan ukuran ke!il maka anda akan melihat  ba!kground ditam pilk an se!ara berulang untuk meme nuhi seluruh element te rse but .ntuk per!obaan buatlah (ile latian*)!tml dan selanjutnya buatlah sebuah di+, dan menentukan ukuran width dan heightnya di, id K I%o5J
an tambahkan style/&'' se pe r ti berikut : U%o5V ;idt : +))p5 ei#t :+))p5 %a30#round : url7lo#o(!pn#8 W

Gambar 6= "a!kground akan terus diulang untuk memenuhi ukuran elemen

*?!(! repeat

%a30#round

)engulangan gambar ba!kground tersebut  bisa

kita

atur dengan menggunak an

 property  ba!kgr ound-r e peat *nda bisa mengulang gambar se!ara horiontal Esesuai sumbu 5F atau se!ara +ertikal EyF atau anda pun dapat tidak m engulangi  ba!kgr ound

terse but %a30#roundrepeat : repeat5

Gambar 6< B epeat S akan mengulang ba!kground se!ara hor ionta l

%a30#roundrepeat : repeat"

Gambar ;9 )engulangan ba!kground se!ara +er ti!al dengan r epeat-y

%a30#roundrepeat : norepeat

Gambar ;3 "a!kground tidak diula ng

*?!+!

%a30#roundposition

)osisi gambar ba!kground dapat kita tentukan letaknya dengan menentukan jarak 5 Ehor iontalF dan y E+er ti!alF 'ebagai !ontoh, kode berikut akan menggeser  ba!kgr ound-image sebesar 69p5 dari k iri

%a30#roundposition5 : >)p5

Gambar ;4 ba!kground bergeser selebar 69p5 dari k ir i

an !ontoh berikut akan menggeser  ba!kgr ound-image sebesar 69p5 ke bawah %a30#roundposition" : >)p5

Gambar ;7 "a!kground turun 69p5 dari  posisi sebelumnya

*ndapun dapat menggunakan &''-shorthand untuk  ba!kgr ound- position : %a30#roundposition : nilaiX nilaiG

misalnya %a30#roundposition: >)p5 >)p5

Gambar ; posisi ba!kground ada pada 69p5 dari kiri dan a ta s

*?!=! Sprite

ma#e

engan adanya property %a30#roundposition untuk menentukan lokasi  pene m patan gam bar ,

kita

dapat

be r main-main

dengan

image-spr ite

>mage

'prite

adalah sekumpulan gambar berbeda yang disatukan dalam satu (ile gam bar 

Gambar ;6 !ontoh >mage spr ite

$eknik ini dilak uk an untuk memper!epat loading website tanpa harus m emanggil

 beberapa (ile gambar yang  banyak &ukup satu gambar dan k ita tentukan lokasi gam bar yang ingin ditam pilk an "uatlah (ile  baru dengan nama (ile latian**!tml dan ketikkan markup #$M% se per ti

 berikut : di, idKI%uttonJ
%alu tambahkan style &'' berikut :

U%utton V ;idt:(=)p5 ei#t:D+p5 %a30#roundima#e : url7sprite!jp#8 %a30#roundposition" : ) W U%utton:o,erV %a30#roundposition" : D+p5 W

'tyle tersebut akan me ngabil gambar yang terdapat di  posisi 5, 9 dan posisi y turun =7p5 'ehingga gambar yang ditam pilk an adalah bagian berikut :

Gambar ;; #anya sebagian gambar yang dita m pilk an

%alu apa maksud dari sele!tor Q button:ho+er / :ho+er adalah salah satu )seudo &lass, saya akan membahasnya di  bab selan jutnya &ontoh penggunaan >mage sprite ini  banyak diim plementasik an pada beberapa situs

 besar se per ti Google atau (a!ebook, berikut ini adalah image sprite untuk i!on-i!on yang ada dalam google plus

Gambar ;8 >mage 'prite Google )lus

Ba% * Floatin # Jik a

sebelumnya untuk mengatur te5t/paragra( rata kanan atau kiri kita me nggunak an

 property te5t-align, namun bagaimana  jika yang ingin k ita atur rata kiri atau rata k anan

adalah elemen #$M% .ntuk itu k ita dapat menggunakan property (loat Iilai yang digunakan yaitu le(t dan right )ehatikan !ontoh pada lati&an*(!&tml ber ik ut dan perhatikan apa yang te r   jadi : "uatlah markup #$M% se per ti berikut : im# sr3KIlo#o!pn#J altKI#am%arJ < pLorem ipsum dolor sit amet 3onse3tetuer adipis3in# elit! Mae3enas porttitor 3on#ue massa! Fus3e posuere ma#na sed pul,inar ultri3ies purus le3tus malesuada li%ero sit amet 3ommodoma#na eros uis urna!
%alu tambahkan &'' berikut : im# V Yoat: left W

'tyle diatas akan meratakirikan elemen gambar dan membuat paragra( naik keatas

Gambar ;= )enambahan ?loat akan mempengaruhi element disek itar nya

*!*!

Permasalaan pada floatin#

*da satu permasalahan ketika anda menambahkan (loating pada suatu e leme n,

 permasalahan ini bisa anda te mui pada !ontoh kasus dalam (ile latian*+!tml ber ik ut "uatlah markup #$M% se per ti berikut : *! di, idKI;rapperJ (! di, idKIeaderJ! di, idKIarti0elJ
%alu  ber ilah style berikut : *! U;rapperV (! ;idt : E?)p5 +! mar#in : ) auto ! Ueader V ?! ;idt:*))[ ! ei#t:>)p5 D! %a30#round: oran#e E! mar#in%ottom: *)p5 *)! W **! U3ontentV *(! paddin#:()p5 *+! %a30#round : #reen *=! mar#in%ottom : *)p5 *>! W *?! Uarti0elV *! ;idt : ?))p5 *D! ei#t : ))p5 *E! Yoat : left ()! %a30#round: oran#e (*! W ((! Uside%ar V (+! ;idt : +))p5 (=! ei#t: ())p5 (>! Yoat : ri#t (?! %a30#round: oran#e (! W (D! footerV (E! ;idt : *))[ +)! ei#t: >)p5 +*! %a30#round: #reen +(! W

Jik a

anda buka dalam br owse r , maka tam pilan yang akan dapat adalah se per ti ini

Gambar ;< )ermasalahan ketika anda menerapkan ?loating

*da yang  janggal La U3ontent tidak me menuhi isi dari Uarti0el dan Uside%ar 'e harusnya tinggi U3ontent otomatis sama dengan tinggi dari elemen te r tinggi di dalamnya, dalam

kasus ini adalah ar tik e l dengan tinggi 899p5 engan begitu seharusnya tinggi dar i U3ontent adalah 89p5 Editambah dengan  padding-to p

anda tidak me nge r ti !obalah untuk membuang  perhatik an bahwa

Qar tik el

U3ontentmenganggap

property

dan Qsidebar berada di dalam

#al ini dikarenakan k ita sehingga

dan padding- bottomF

element

ada, dan

Q!onte nt

menambahkan (loating pada

tidak  ada

(loat yang

Jik a

didalamnya

Uarti0el

*da

dua

dan Uside%ar, !ara

untuk 

menye lesaik an kasus ini : 3 Menambahkan style o+er(low:hidden pada

Q!onte nt

U3ontentV N o,erflo;:idden W

4 Menambahkan di+ kosong dengan style !lear  :bothR sebelum penutup !onte nt N di, idKIside%arJ
  at    * lo

berarti melayang.  "etika kita member ikan  float pada el emen maka

el emen tersebut

seolah/olah mel ayang   dan

el emen di atasnya par ent#

menganggap tidak ada el emen didalamnya chil d#.

Gambar 89 )enyelesaian masalah ?loa t

*!(! Reset

CSS

)ernahkah anda bertanya darimana warna link dari tag a  be r asal, atau mengapa tag %  bisa

menebalkan teks, atau kenapa tag * sampai tag ? memiliki ukuran

(ont yang  berbe da- beda dan ketebalan yang  berbeda

)adahal k ita sama sekali

 belum menambahkan &'' pada markup yang kita buat / 'etiap browser memiliki 'tyle atau ?ile &'' yang akan diterapkan pada setiap halaman web yang dibuka K e beradaan style yang dimiliki  browser ini sangat membantu namun

terkadang  juga membingungkan  bagi sebagian oran g &'' Beset ber(ungsi untuk mereset atau mengatur ulang seluruh  pr o per ty- pr o per ty yang telah disetting oleh  br owser , se per ti margin, padding, warna huru( ElinkF uk uran

huru( heading dan lain sebagainya )erhatikan &'' !ontoh berikut : ZV mar#in:) paddin#:) W

'ele!tor bintang ETF digunakan untuk memberikan style  pada 'eluruh elemen/$ag

#$M% alam kasus ini, kita akan mengatur ulang margin dan padding men jadi 9  pada

seluruh elemen #$M% yang ada

Ba% *D Positionin # alam &'' k itapun dapat memposisikan E !ositioning F elemen sesuai kehendak kita #al ini membuat desain web dengan &'' lebih ( leksi bel karena kita bisa menem patk an

elemen-elemen #$M% sesuai dengan keinginan kita atau tuntutan desain we b

*D!*! Stati3 'e!ara de(ault, seluruh elemen/tag #$M% memiliki positioning stati! *rtinya

anda

 belum bisa/tidak dapat menentukan posisi elemen tersebut K et ik a anda ingin me rubah  posisi dari

elemen tersebut maka anda harus memberikan position:relati,e dan

selanjutnya anda dapat menggunakan property to p, right,  bottom,

dan le(t untuk 

menentukan posisi elemen yang  bersangk utan 'ebagai !ontoh perhatikan kode #$M% dan &'' berikut : di, idKI%o5J
"erikut kode &''nya U%o5V W

;idt : +))p5 ei#t : +))p5

K et ik a anda tidak memberikan nilai  pada property position, maka se!ara de(ault, Q bo 5 memiliki position:stati!, jadi anda tidak dapat menggunakan property to p, right,  bottom

dan le(t untuk menentukan posisi Qbo5 tersebut : U%o5V

W

%a30#round : #reen ;idt : +))p5 ei#t : +))p5 top : *))p5 left : ())p5

Gambar 83 "o5 stati! tidak dapat ditentukan posisinya

*D!(!

Relati,e

'ekarang !obalah untuk menambahkan position:relati,e  pada Qbo5 dan  pe rhatik an  bahwa bo5 tersebut bergeser 399p5 dari atas dan 499p5 dari kiri U%o5V %a30#round : #reen ;idt : +))p5 ei#t : +))p5 top : *))p5 left : ())p5 position:relati,e W

Gambar 84 )enambahan position relati+e memungkinkan penempatan  bo5

*D!+! A%solute )enambahan  position:absolute akan membuat elemen tersebut terlepas dari aturan  penempatan elemen dan dibatasi oleh parent yang memiliki positioning relati+e 'ulit memahami apa yang saya tulis diatas, kita langsung ke !ontoh kasus "uatlah markup #$M% se per ti berikut :

di, idKI%o5J di, idKI%o5(J
%alu  ber ilah style se per ti berikut : U%o5V ;idt:+))p5 ei#t:+))p5 %a30#round:#reen W U%o5(V ;idt:>)p5 ei#t:>)p5 %a30#round:"ello; W

Gambar 87 &hild elemen akan berada di dalam par entnya

Qbo54 se!ara aturan ditam pilk an  berada di dalam di+ Qbo5, anda dapat terlepas dar i aturan tersebut dengan menambahkan positioning absolute 'ekarang tam bahak an

 position:absolute dan tentukan property bottom dan r ight U%o5(V ;idt:>)p5 ei#t:>)p5 %a30#round:"ello; position:a%solute %ottom:) ri#t:) W

Gambar 8 Qbo54 akan terlepas dari  parent ketika ditambahkan position a bsolute

Qbo54 akan te r le pas dari aturan penempatan elemen Ekeluar dari Qbo5F dan berada di kanan bawah browser .ntuk membatasi pergerakan  positioning absolute , maka kita

 parentnya yakni Q bo5 U%o5V ;idt:+))p5 ei#t:+))p5 %a30#round:#reen position:relati,e W

harus

dari

Qbo54 yang

memilik i

menambahkan  positioning relati+e  pada

Gambar 86 )osisi absolute position dapat dibatasi oleh oleh elemen denga posisi r elati+e

'ekarang Qbo54 berada di kanan bawah parentnya Qbo5 *ndapun dapat  ber main

dengan nilai negati+e untuk mendapat e(ek ter te ntu U%o5(V ;idt:>)p5 ei#t:>)p5 %a30#round:"ello; position:a%solute %ottom:(>p5 ri#t:()p5 W

Gambar 8; )engaturan posisi dengan a bsolute

)erhatikan !ontoh penggunaan absolute position yang sering ditemukan di inter net  berikut :

Gambar 88 &ont oh Kasus  penggunaan * bsolute )osition

)erhatikan !ontoh  be r ik ut tom bol untuk shar ing  +ia (a!ebook atau twitter dan

nomor posting ditam pilk an berjajar sea!ara +erti!al dan setengah keluar dari kotak ar tik el

ulit memahami  >elati8e/Absolute @ayangkan  >el ati8e  sebagai sangkar bagi ? 

$

 Absol ute  , oleh karena itu  pergerakan  Absol ute dibatasi oleh  >el ati8e .

? 

$

? 

$

? 

$

*D!=! Fi5ed 'i(at dari  position (i5ed hampir sama dengan absolute , namun posisi dari elemen (i5ed

akan tetap berada posisi yang

ditentukan walaupun browser d i7oom/in2 out atau

di scroll ke atas atau ke  bawah

)erhatikan !ontoh kode #$M% dan &'' berikut : di, idKIso3ialJ
&'' : Uso3ialV ;idt:+)p5 ei#t:*))p5 position:fi5ed left:) top:*))p5 W

"erikut ini adalah !ontoh penggunaan position:(i5ed yang sering ditemui di inte rnet 

Gambar 8= &ontoh Kasus “Jadul”  penggunaan (i5ed  position

"agian 'ign .p di situs kaskus!oid menggunakan position (i5ed sehingga ketika anda men-s!r oll halaman web, bagian tersebut tetap berada disana

Ba% *E

Pseudo Class )seudo &lass digunakan untuk memberikan e(ek-e(ek tertentu pada sele!tor Misalnya e(ek ketika !ursor berada di atas suatu elemen Eho+er F, ketika !ursor me ng-k lik suatu

elemen dan lain se bagainya "erikut adalah !ara pe nulisan pseudo !lass : sele3tor:pseudo3lass V propert":,alue W

Misalnya kita akan menambahkan  pseudo-!lass :ho+er pada sebuah link  a:o,er V 3olor : red W

'tyle tersebut akan memberikan e(ek perubahan warna link men jadi merah ketik a

!ursor berada di atasn ya

Gambar 8< )seudo-&lass :ho+er memberikan e(ek ketika !ursor berada di atas elemen

*E!*!

PseudoClass untu0 Lin0
*da  beberapa pseudo-!lass untuk an!hor/link yakni :

a:a3ti,e V 3olor: oran#e W

)erhatikan  juga urutan ketika  penulisan semua pseudo !lass

tersebut EJika and a

 bermaksud menuliskan seluruh pseudo !lass untuk link F: •

:ho+er harus ditulis sesudah :link dan :+isite d

•

:a!ti+e harus ditulis sesudah :ho+er 

Jik a

tidak demikian maka e(ek tersebut tidak akan berjalan dengan  baik

 !seudo Class ho8er dan acti8e tidak hanya bisa digunakan untuk link saja mel ainkan bi sa diterapkan  pada el emen2 tag /tag  %T&' lainnya.  Sprite pada

bab

*E!(!

 Masih

  si   I ma ge i ng at  dengan demonst ra

sebel umnya

PseudoClass :rst3ild dan :last3ild

'elain  pseudo-!lass untuk link /an !hor  ada  juga  pseudo !lass :(irst-!hild dan :last-!hild

K eduanya digunakan untuk memilih elemen pertama dan terakhir dari suatu sele!tor  Misalnya kita mem punyai sebuah unordered list EulF, dengan beberapa list-item di dalamnya K ita  bisa memberikan style khusus untuk list-item  yang  pertama dan yang terakhir dengan menggunakan :(irst-!hild dan :last-!hild ul litem litem litem litem litem

0e 0e 0e 0e 0e

*

an Jik a kita tambahkan style  berikut : ul li:rst3ildV 3olor:#reen W ul li:last3ildV 3olor:oran#e W

Maka yang akan kita dapatkan adalah tam pilan se per ti berikut :

Gambar =9 )emberian pseudo !lass :(irst-!hild dan :last-!hild

%ist-item yang  pertama akan memiliki warna huru( hijau dan yang terakhir memilik i

warna orange $idak hanya pada unordered list, andapun dapat menerapkannya  pada

deretan elemen lainnya Misalnya elemen  p yang terdapat dalam suatu di+ di, p p p p 
Para#raf pertama 
Ba% ()

Studi6asus St"le
(

\

Pem%erian

)ada studi kasus sebelumnya, anda telah membuat markup #$M% dari sebuah desain

web sederhana #asil yang didapatpun terasa polos, tidak menarik dan yang terpe nting tidak sama dengan desain web yang diingink an )ada bagian ini kita akan belajar menambahkan style/&''  pada (ile studi kasus yang k ita

 buat se belumnya

Gambar =3 Markup #$M% tanpa &''

)er tama-tama, buatlah (ile &'' baru dengan nama style!ss, simpan di (older yang sama

dengan lokasi (ile #$M%

Gambar =4 )enempatan (ile la tihan

%alu tambahkan tag link untuk memanggil (ile style&'' pada bagian he ader  ead titleLatian Mar0up
()!*!

CSS Reset

)er tama-tama  kita atur ulang margin dan padding agar tidak menggunakan style

 bawaan dari  br owser , dan kita tentukan  jenis (ont standar yang akan kita gunak an ZV mar#in:) paddin#:) fontfamil":3ali%ri Ise#oe uiJ arial taoma sansserif W

()!(!

Bod"

asar ba!kground dari desain web berwarna abu-abu,  jadi kita tentukan warna terse but

 pada tag  body: %od"V %a30#round3olor:U999999 W

()!+! 2rapper Kita mulai  dari wrapper 'e per ti saya  jelaskan sebelumnya, kita membutuhkan se buah di+ untuk menampung seluruh isi situs karena kita akan membuatnya men jadi r ata

tengah Jadi meskipun browser di oom-in atau di oom-out, konten tetap berada di

tengah U;rapperV ;idt : D)p5 mar#in: ) auto o,erflo;: idden W

Margin: 9 auto, akan memberikan jarak dari atas sebesar 9, dan untuk sisi k iri-k anannya kita  be r i nilai auto sehingga membuat di+ ini berada di tengah

E=

Gambar =7 Kontent tetap berada ditengah mesk i di- 7oom/in atau  7 oom/out 

)emberian nilai 8=9p5 untuk width bukan tanpa alasan, ini dikarenakan r ata-r ata

 pengguna inte rnet didunia menggunakan layar dengan resolusi minimal 39458;= p5  jadi lebar dari situs kita  berada pada ukuran aman meskipun resolusi layar yang digunakan minimal 'ebenarnya ukuran lebar minimal standar dari

sebuah desain web adalah <;9p5

namun karena pada desain lebar dari web sebesar 8=9p5 maka kita gunakan nilai ini )enambahan o,erflo;:idden karena kita akan menambahkan (loating pada da( tar -ar tik el dan sidebar E"a!a k em bali : ?loatingF

()!=! Header )ada bagian header , k ita akan menggunakan gambar yang telah saya sia pk an, ukuran lebar gambar hanya 39p5 namun dengan metode  pengulangan/re peat -5 kita akan mendapatkan tam pilan yang sama dengan yang ada di dalam desain

Gambar = #asil akhir dari #ea d

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML & CSS

E> UeaderV %a30#round: url7ima#es<eader!jp#8 repeat5 U>>> ei#t : )p5 ;idt : *))[ paddin#:>p5 mar#in : ()p5 ) o,erflo; : idden W Ueader im#V ;idt:*+)p5  ei#t:+>p5  W

Kita menggunakan nilai 399U agar lebar dari header sama dengan lebar U;rapper an

untuk ba!kground anda  bisa tebak apa yang saya lakukan La, saya menggunakan &''shorthand untuk memanggil gam bar  )ertama kita tentukan lokasi

gambar Eba!k gr ound-imageF lalu  jenis  pengulangan

Eba!kg r ound-r e peat F dan terakhir kita tentukan  ba!kgr ound-!olor sebagai (all ba!k k etik a

gambar tidak berhasil dimuat Kita juga

tambahkan o,erflo; : idden karena di dalam header nantinya akan ada

elemen yang memiliki (loating Emenu dan (or mF

Gambar =6 tampilan #eader setelah diber i style

()!>! Menu $idak ada style yang  perlu anda tambahkan pada logo, jadi kita lanjut ke bagian me nu Menu yang

k ita  buat adalah sebuah da(tar/list yang

se!ar a-de(ault

ditam pilk an

menurun Kita dapat membuat da(tar tersebut m e n jadi rata -k anan dengan teknik  (loating UmenuutamaV mar#intop:+p5 listst"le:none W

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

E? Kita ber i  jar ak antara menu dengan logo sebesar 7p5, dan property listst"le:none

 ber (ungsi untuk menghilangk an lingk aran didepan setiap list 'elanjutnya

k ita

akan

membuat

list/da(tar 

me n jadi

rata-kiri/sejajar

dengan

menggunakan  pr o per ti displa":inline : Umenuutama liV Yoat:left paddin#:Dp5 ()p5 %orderri#t:*p5 solid U>>>>>> W

0arna teks pada menu EbiruF dan garis  bawah berasal dari tag @aA jadi kita ubah warna

dan menghilangk an garis  bawahnya Umenuutama li aV 3olor : Uf]fff te5tde3oration:none W

Gambar =; )enampilan Menu utama setelah diber i s tyle

()!?!

Form

"agian (orm pen!arian ini sangat sederhana, kita hanya akan menentukan tinggi dan

meratakanankan (orm ini Ueader formV Yoat:ri#t mar#intop:p5 mar#inri#t: *)p5 W

'elanjutnya k ita hilangk an  border bawaan dari tag input, dan kita tentukan tinggi dar i

input ini Ueader form inputV %order:none ei#t:()p5 W

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

E

Gambar =8 )enampilan akhir header 

()!!

9aftar Arti0el

'elanjutnya k ita  ber i style  pada Udaftararti0el Lang akan kita tentukan adalah

lebar /width dari di+ ini Udaftararti0elV ;idt:=)p5 Yoat:left W

Gambar == )engaturan 0idth dan rata kiri pada a(tar *r tik el

()!D! Jik a

Arti0el

anda perhatik an, setiap di+ ar tik el memiliki  ba!kground  putih dan antar ar tik el

memiliki  jar ak  !arti0elV %a30#round:Uff]ff paddin#:*)p5 mar#in%ottom:()p5 o,erflo;:idden W

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

ED )erhatikan  juga, gambar dari setiap ar tik el  bisa kita setting denga (loating agar sama

dengan desain yang diberikan Ekarena gambar memiliki nilai (loat, maka kita tam bahk an o+er(low:hidden pada ar tik elF !arti0el im#V Yoat:left mar#inri#t:*)p5 ;idt:())p5 ei#t:*?>p5 W

$ak ada yang  perlu dirubah untuk  judul artikel Lang perlu kita  be r i style adalah tanggal

dan +iew Kita akan menambahkan warna ba!kground pada kedua bagian te r se but !arti0el %V 3olor:U?*?)?) %a30#round:U9999 99 paddin#:+p5 fontsie:*(p5 font ;ei#t:%old mar#inri#t:*)p5 W

K ar ena kedua elemen tersebut menggunakan tag  b, maka kita tinggal menam bahk an sele!tor tersebut Kita juga

mengatur ulang ukuran (ont dan ketebalan dari

(ont

terse but "eri jar ak antar sinopsis dengan tanggal dan link di  bawahnya !arti0el pV mar#in:*)p5 ) W

$erakhir dari  bagian ar tik el ini, adalah penembatan link “wat!h this” ke sebelah ki r i !arti0el aV displa":%lo30 te5tali#n:ri#t 3olor:U?+?+?+ W

Kita menggunakan metode lain, selain menggunakan (loating Laitu dengan te5t-align  Iamun pe r tama-tama kita harus mengatur elemen tersebut men jadi blo!k

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

EE

Bkuran lebar dari el emen adalah lebar dari konten2text  yang terdapat di dalamnya.  
Gambar =< )engaturan link 0at!h $his

()!E!

Side%ar

Kita lan jut ke bagian 'idebar,  per tama-tama  kita tentukan lebar dari sidebar ini dan mengatur posisinya men jadi rata-k anan Uside%arV ;idt:() p5 Yoat:ri#t W

>si dari sidebar sangat mudah untuk disesuaikan dengan de sain,  kita mulai  dari  judul setiap item dalam side bar  Uside%ar (V fontsie:*Dp5 mar#in:*)p5 ) W

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

*) %alu kita tentukan jarak perbaris dari te 5t Uside%ar pV lineei#t:()p5 3olor : U?+?+?+ W

Lan g

 perlu kita  ber i style

k ategor i yang

selanjutnya adalah da( tar 

terlalu menjorok ke kiri Kita dapat

merubahnya dengan menambahkan margin-le(t  pada tag ul Uside%ar ulV mar#inleft:*)p5 W

'ama halnya dengan menu utama, warna  biru dan gar is

 bawah berasal dari tag link Jadi style yang diber ik an Gambar <9 )emberian style  pada sidebar 

tidak jauh be rbeda

Uside%ar ul li aV 3olor:U?+?+?+ te5tde3oration:none W

()!*)! Footer $erakhir kita akan menggarap bagian (ooter )erhatikan bahwa lokasi (ooter  berada  pada sidebar >ni disebabkan oleh (loating yang kita tambahkan pada da( tar -ar tik e l dan side bar  .ntuk memperbaikinya kita bisa (oote r 

menggunakan 3lear:%ot  pada

UfooterV 3lear:%ot mar#in:()p5 ) te5tali#n:3enter %a30#round3olor: Uf)f)f) paddin#:>p5 3olor:U>>>>>> W

'aya yakin anda sudah me nge r ti mengapa saya menambahkan  pr o per ty- pr o pe r ty

terse but, jika masih bingung silahkan ba!a k em bali bab- bab se belumnya Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML

Gambar <3#asil *khir %atihan 3

*)

Ba% (*

Studi 6asus Sli3in#

+

\

)ada bab ini kita k e m bali melakukan latihan K on+er si desain web ke dalam #$M%  &'', namun dengan desain web yang  berbeda, kita juga akan mem pelajar i  bagaimana

tek nik sli!ing gam bar -gam bar   yang d iper luk an dalam desain web tersebut untuk  bagian bagian tertentu se pe r ti ba!kground, logo, dan slide Lang

akan kita kon+ersi kali ini adalah desain web bertema minimalis Jik a diperhatik an,

desain kali ini le bih sederhana dibandingkan desain se belumnya

Gambar <4 esain 0eb untuk %atihan 'li!ing

Belajar HTML & CSS : Tutorial Fundamental dalam mempe lajari HTML & CSS

*) *gar lebih mudah dalam proses m ar ku   p, saya buatkan +ersi wire(rame untuk desain

web tersebut :

Gambar <7 0ire(rame dari esain 0eb

engan begitu kita bisa menentukan  bagian- bagian yang akan kita  buat di+ 'elan jutnya

saya  juga sudah menambahkan beberapa keterangan tentang nam a -nama di+ yang akan digunak an:

Gambar < B en!ana pemberian nama elemen

*) engan be gitu pasti anda sudah memiliki bayangan akan apa yang anda tulis bukan La,

mar i kita mulai ke dalam proses markup #$M%

(*!*! HTML

Penulisan Mar0up

'ebelum memulai  proses kon+ersi, buat (older baru untuk latihan kon+ersi kita kali ini

dengan nama “%atihan 'li!ing” atau terserah anda "uat lagi satu (older dengan nama “image s” untuk menyimpan gam bar -gam bar  pendukung hasil sli!ing nanti

;rapper 'e pe r ti kasus sebelumnya, seluruh konten website yang ada ditampung dalam se buah di+ dengan id wr ap per , jadi sebagai permulaan kita  buat markup standar #$M% beserta

sebuah di+ dengan id wrapper : *! 4do3t"pe HTML (! HTML +! ead =! titleMiniml! <ead ?! %od" ! di, idKI;rapperJ D! E! 
K ode-k ode selanjutnya ditulis di dalam di+ wrapper ini

Heade r Jik a

anda perhatik an,  bagian header memiliki dua eleme n,  logo dan menu .ntuk logo

kita bisa gunakan heading le+el 3 Eh3F atau dengan gam bar , namun kali ini kita !o ba dengan menggunakan #eading le+el 3 saja an untuk menu kita gunakan unorde r ed list EulF

Gambar <6 #eader 

*) *! di, idKIeaderJ (! * idKIlo#oJMiniml<* +! ul idKImenuJ =! li refKIUJHome! li refKIUJPortfolio
Slideso ; "agian selanjutnya adalah slideshow, bagian ini akan me nam pilk an gam bar -gam bar  se!ara bergantian EslideshowF 2lemen di dalamnya antara lain gam bar -gam bar  slide

dan sebuah heading untuk  judul setiap slide disertai dengan link

Gambar <; 'lideshow

*! di, idKIslideso;J (! im# sr3KIima#es
.ntuk sementara

kita

gunakan gambar statis terlebih dahulu, untuk mem buat

slideshow ini ber(ungsi sebagai mestinya kita akan bahas di  bagian jCuery selan jutnya

Lan#0a

Gambar <8 %ayout Kolom untuk bagian Q%angk ah

*) "agian ini  berisi langkah-langkah Esesuai dengan desainF se!ara k onse p,  bagian ini memiliki layout tiga kolom .ntuk itu kita gunakan di+ dengan !lass kolom Jadi k ir a -k ira

kodenya men jadi se per ti berikut : *! di, idKIlan#0aJ (! (Ba#aimana menjadi seoran# 2e% 9esi#ner1<( +! =! >! ?! ! D! E! *)!

di, 3lassKI0olomJ +Belajar HTML<+ pPe lajari terle%i daulu apa itu HTML %a#aimana 3ara pem%uatan file HTML  Ta#ta# HTML "an# ada %eserta fun#sin"a
**! *(! *+!

di, 3lassKI0olomJ +Buat 2e%site<+ pSetela mempelajari HTML & CSS saatn"a untu0 menerap0an 0eduan"a dalam 0asus 0on,ersi desi#n ;e% menjadi le HTML & CSS! 
Foote r "agian terakhir adalah (oote r ,  pada bagian ini terdapat dua element, yang  per tama

adalah te5t !opyright Eseper ti  biasaF dan menu (ooter yang akan kita  buat dengan

unordered list P ul ElagiF

Gambar <= ?ooter 

di, id KIfooterJ p&3op" 3op"ri#t ()*( %" ariona!net
$idak sulit bukan untuk membuat markup #$M% dari desain yang diberikan Lang pe r lu anda lakukan adalah membayangkan layout dan pembagian masing-masing elemen

yang akan digunakan lalu mengkodekannya me n jadi #$M%

K ode lengkap dari  proses Markup yang telah kita lak uk an adalah se per ti berikut : *! 4do3t"peHTML (! HTML +! ead =! titleMiniml! <ead ?! %od" ! di, idKI;rapperJ D! di, idKIeaderJ E! * idKIlo#oJMiniml<* *)! ul idKImenuJ **! lia refKIUJHome! ! pPelajari terle%i daulu apa itu HTML%a#aimana 3ara pem%uatan file HTML Ta#ta# HTML "an# ada %eserta fun#sin"a! ! 
'impan dengan nama “inde5html” di dalam (older yang kita  buat sebelumnya “%atihan

'li!ing”

(*!(! Sli3in# licing adalah proses pemotongan gam bar -gam bar   yang akan digunakan dalam we bsite

agar sesuai dengan desain yang

diingink an Gam bar -gam bar tersebut meli puti

 ba!kground, logo, slide, i!on dan gambar pendukung lainnya esain 0ebsite tersebut

saya

sertakan

dalam

?ile  penyerta

buku

membukanya anda membutuhkan so(tware *dobe )hotoshop "uka

ini,

untuk 

(ile miniml%

web sit e%de si&n.#sd dan kita mulai proses s li!ing *da tiga !ara untuk melak uk an sli!ing dengan photosho p: 3 'li!e $ool : &ara

ini lebih

e(ekti( untuk melakukan proses

sli!ing

se!ar a

 bat!h/sekaligus Kita tinggal menyeleksi  bagian- bagian yang akan di sli!e dengan

tool ini kemudian pilih menu sa+e (or web  de+i!e

Gambar << &ontoh )enggunaan 'li!e $ool

4

&ropping $ool : "uat seleksi ada bagian yang ingin diam bil, !rop, sa+e me n jadi gam bar ,  lalu kembalikan ke kondisi awal dengan &$B%*%$D &ukup r ibet

namun terkadang menguntungk an

Gambar 399 'li!ing dengan teknik &ro pping

7

Manual 'li!ing : &ara ini adalah !ara manual namun lebih e(ekti( Mengingat

hanya bagian- bagian tertentu yang akan kita am bil,  jadi kita !ukup memilih layer  yang dibutuhk an,  !opy,  buat (ile  baru,  paste dan sa+e an &ara ini yang akan kita gunakan untuk melakukan sli!ing  pada desain website yang

sedang kita

k er   jak an

)er tama-tama kita akan me ngam bil ba!kground, tepatnya di  bagian atas gambar )ada

window layer  pilih layer dengan nama  ba!kgr ound-gr unge,  lalu tekan TRL dan *lik   pada Laer Thumbnail  %angkah ini akan menyeleksi bagian yang

layer te rse but

Gambar 393 &tr l&li!k untuk menyelek si konten dari layer 

terdapat dalam

'elanjutnya tekan K om binasi tom bol

TRL-

"uat dokumen/!an+as baru dengan menekan

untuk meng-copy isi dari layer te r se but TRL-+

./ile 0 +ew .kuran dari !an+as

 baru akan sesuai dengan isi dari selek si yang kita co py

Gambar 394 Membuat (ile baru untuk hasil sli!e

$ekan OK, lalu tekan tom bol

TRL-2

untuk mem- paste apa yang kita copy se belumnya

#ilangk an tanda “mata” pada layer ba!kground untuk menyembunyikan layer ini k ar ena

kita akan membuatnya transparan 

Gambar 397 #ilangkan i!on mata untuk menyembunyikan layer 

'elanjutnya kita tinggal menekan tom bol

TRL-ALT-SH3/T-S

untuk menyimpan se bagai

gambar web/de+i!e atau  pilih menu !/ile 0 Sa4e 'or Web 5 6e4i(es $ )ilih (ormat ) IG

agar gambar yang

dihasilkan dapat memiliki area transparan $ek an 'a+e

untuk 

menyimpan gam bar , simpan di (older >mages yang ada di dalam (older latihan yang k ita

 buat dengan nama “ba(k&roun d.#n&” Etanpa tanda k utipF

Gambar 39 )IG-4 mendukung transparansi pada gam bar 

 J ika

 gambar  yang dibutuhkan memiliki area transparan,  selalu pilih  pr eset 

 !   " #$%&

'elanjutnya kita membutuhkan gambar untuk 'lide show )ada 0indow %ayer, "uk a (older 'lideshow  lalu klik layer 'lide %akukan  proses sli!ing se per ti langkah se belumnya, TRL-*lik ,

Copy, "uat okumen "aru,  !aste Kali ini pilih  preset

7P89 Hi&h,

dan sim pan

di (older yang sama se per ti sebelumnya dengan nama “slide.:#&”

Gambar 396 )reset J)G #igh untuk kualitas gambar tingg i

Gambar terakhir yang kita  butuhkan adalah tanda panah pada  bagian “%angk ah” &ari %ayer

“'e par ator ” di

dalam (older langkah lalu

lakukan langkah sli!ing

se per ti

sebelumnya 'impan dengan nama “lan&kah.:#&” .ntuk bagian ini !ukup satu saja yang di sli!e, OK Kini dalam (older images, kita mempunyai 7 gambar  penduk ung,  ba!kgr ound png, slidejpg dan langk ah  jpg

Gambar 39; ?ile-(ile hasil sli!ing

(*!+! St"le

Pem%erian

%anjut ke bagian  paling menyenangkan Emenurut sayaF,  pemberian 'tyle atau &'' "uat

(ile  baru dengan nama style&'', simpan di ( older  yang sama dengan (ile #$M% yang kita

 buat se belumnya

CSS Reset 'e pe r ti biasa, kita  buat dulu &'' Beset untuk mereset margin dan padding bawaan dar i tiap br owser  ZV mar#in:) paddin#:) fontfamil":Jse#oe uiJarialsansserif W

Bod" .ntuk body kita akan tambahkan warna ba!kground dan gambar ba!kround yang telah

kita  slice %od"V %a30#round3olor:UfDf%f= %a30#roundima#e: url7Iima#es<%a30#round!pn#J8 %a30#roundrepeat: norepeat %a30#roundposition: 3enter top fontsie: *=p5 W

>ngat, kode diatas  bisa

anda singkat dengan menggunakan &''-shorthand untuk 

 ba!kground se per ti ber ik ut : %a30#round:url7Iima#es<%a30#round!pn#J8 3enter top norepeat UfDf%f=

'aya uraikan agar anda m enger ti masing-masing  bagiannya

Headin # .ntuk heading,

kita

akan menggunakan  jenis

(ont yang  berbeda

dengan (ont

keseluruhan ?ont yang digunakan adalah museo slab *nda dapat menginstallnya dar i (older resour!es yang disertakan dalam buku ini *(+=>?V fontfamil":^Museo Sla% >))^ impa3tarialsansserif font;ei#t: normal W

2rapper ari desain, ukuran wrapper adalah 849p5 *nda bisa menggunakan Buler $ool untuk  mengukur lebar wrapper dengan patokan gambar slide  U;rapperV ;idt:()p 5 mar#in:) auto W

Masih ingat (ungsi mar#in:) auto  La, property ini  ber(ungsi untuk membuat

Qwrapper

men jadi rata tengah meski di oom-in atau di oom-out

Header i dalam header kita akan ada 4 elemen yang memiliki (loating Jadi gunakan solusi (loating pada di+ header  UeaderV o,erflo;: idden mar#in%ottom: ()p5 paddin#:+)p5 ) W

.ntuk %ogo, karena kita menggunakan h3 maka yang kita perlukan adalah merubah (ont sesuai dengan yang ada dalam desain ?ont  yang digunak an adalah "useo ;<
Slab

Ulo#oV fontfamil":JMuseo Sla% >))J impa3t sansserif Yoat:left fontsie:=)p5 W

K emudian untuk menu, kita  buat rata k anan,  lalu membuat list -item men jadi satu bar is serta memberikan sentuhan border sebagai separator : UmenuV Yoat:ri#t listst"le:none mar#intop:*)p5 W Umenu liV displa": inline W Umenu li aV paddin#:>p5 *)p5 %orderri#t: *p5 dased Uae%>E3 te5tde3oration:none 3olor:%la30 W Umenu li:last3ild aV %orderri#t:none W

Slideso; .ntuk slideshow kita akan menerapkan positioning pada elemen Qslideshow dan h3 Uslideso;V position:relati,e W

Kita set position men jadi relati+e karena h3 akan kita  buat men jadi absolute 'ehingga  pergerakan posisi h3 te r gantung/re lati+e pada

Qslideshow

Uslideso; *V position:a%solute %ottom:()p5 left:()p5 font;ei#t:normal W

K ar ena di dalam heading k ita menambahkan link /an !hor   kita juga harus mem ber ik an style  pada link tersebut agar tidak ditam pilk an dengan style  bawaan Uslideso; * aV 3olor:%la30 te5tde3oration:none fontfamil":^Museo Sla% >))^impa3tsansserif font;ei#t: normal W

La"out 6olom untu0 Ulan#0a 'e pe r ti  yang telah saya singgung, pada bagian Qlangkah kita akan menerapkan layout kolom &aranya sangatlah mudah Kita hanya akan menambahkan (loating pada k olom Ulan#0aV o,erflo;:idde n %a30#round:;ite mar#in:()p5 ) W Ulan#0a (V paddin#:*)p5 W Ulan#0a !0olomV ;idt:(()p5 mar#in:*)p5 paddin#:) +)p5 ) ) Yoat:left %a30#round:url7Iima#es
)er tama-tama  kita tambahkan o+er(low:hidden pada Qlangkah, karena di dalamnya

akan ada elemen yang memiliki property (loat Eba!a lagi Masalah ?loatingF 'elanjutnya kita

tentukan width/lebar dari

kolom, tentukan

padding-right untuk 

 ba!kground Etanda sik uF

$erakhir kita hilangk an  ba!kground pada kolom paling akhir dengan menggunak an

 pseudo-!lass Ek olom:last-!hildF

Footer .ntuk bagian Q(ooter

kita

hanya memerlukan  border -to p dan membuat menu

ditam pilk an satu baris serta merata kirikan elemen terse but UfooterV %ordertop:*p5 dased Uae%>E3 paddin#:*)p5 W Ufooter pV Yoat:left W UfootermenuV Yoat:left mar#inleft:+)p5 listst"le:none W Ufootermenu liV displa":inline mar#inri#t:()p5 W Ufootermenu li aV 3olor:U

te5tde3oration:none W

*khirnya proses

K on+er si telah selesai, Jik a anda membukanya di  browser anda

ak an mendapatkan tam pilan  yang

sama dengan desain Iamun masih ada yang

kurang, K ita  belum membuat 'lideshow ber(ungsi sebagaimana mestinya Mengingat #$M%  &'' tidak

memiliki ( ungsionalitas

untuk membuat

se buah

slideshowD, maka bersama dengan ini saya akan memperkenalkan Ja+as!r ipt pada * nda

=

)ada kenyataannya kita bisa membuat slideshow dengan menggunakan tek nologi &''7, namun mengingat teknik tersebut adalah teknik lanjut

Ba% ((  a,as3rip t ((!*!  a,as3ript Ja+as!r ipt

Pen#enalan

adalah bahasa pemrograman web yang  berjalan disisi

Ja+as!ript biasa

digunakan

untuk

memanipulasi

&lient/"r owser 

element-element

#$M% dan

menambahkan 'tyle se!ara otomatis atau le bih sede rhanan ya membuat dok umen #$M% me n jadi le bih >nte r ak ti(  .ntuk

menambahkan

'!ript

ja+as!ript

pada

dokumen

#$M%,

anda

dapat

  n di dalam head atau di area manapun di dalam menggunak an tag s!ript dan dilet ak ka

tag body N ead titlea,as3ript
'aya akan memberikan !ontoh sederhana dari  ja+as!ript ini, tambahkan s!ript  ber ik ut

 pada latihan sebelumnya atau anda dapat membuat (ile #$M% baru dengan nama (ile latian*=!tml

N ead

<ead N

titlea,as3ript
'!r  ipt tersebut akan menam pilk an Message"o5 dengan teks “#ello  > am

Ja+as!r ipt”

ketika (ile #$M% dibuk a

Gambar 398 Kotak pesan dengan ja+as!ript

"erikut !ontoh lain dari  penggunaan

Ja+as!r ipt

yang

bias

anda lihat dalam (ile

latian*>!tml:

*! s3ript t"peKIte5t! alert7_Apa 0a%ar _nama_4 Sa"a a,as3ript senan# %er0enalan den#an Anda_8 ?! WelseV ! alert7_Hmm sepertin"a anda tida0 mau %er0enalan den#an sa"a!_8 D! W E! 
Pen:elasan S(ri#t = )er tama, kita  buat sebuah +ariabel nama K e mudian kita meminta Ja+as!r ipt untuk 

menanyakan nama pengunjung lalu menyimpannya di dalam +ar ia be l nama 'elanjutnya, K ita memilih, apakah +ariabe l nama terisi Epengunjung mengetikkan namaF,

maka akan ditam pilk an Message "o5 dengan teks “*pa kabar EIama yang dimasukk anF1, 'enang berkenalan dengan *nda” Jik a

 pengunjung tidak memasukkan nama Elangsung mengk lik ok atau !an!elF mak a

akan ditam pilk an message  bo5 “#hmm sepertinya anda tidak  mau berkenalan de ngan saya”

Gambar 39= &ontoh penggunaan k ondisi

'!ript tersebut adalah !ontoh sederhana

dari  penggunaan

Ja+as!r ipt,

*nda

dapat

mempelajarinya se!ara lanjut di htt p://wwww7s!hools!om/js/

((!(!  j`uer"  jCuery, adalah li brar y atau sekumpulan kode ja+as!ript siap  pakai untuk me manipulasi

elemen #$M% dengan mudah dan !epat *nda dapat mendownload jCuery di situs resminya htt p://www jVuery!om .ntuk

menggunakan

jCuery,

*nda

diharuskan

menyertakan

jCuery

dengan

menggunakan tag '!r ipt s3ript t"peKIte5t
"erikut ini adalah !ontoh sederhana penggunaan jCuery untuk memanipulasi #$M%, tambahkan s!ript berikut pada (ile latihan anda s3ript t"peKIte5t
)enjelasan '!ript : 7do3ument8!read"7fun3tion78V N W8

"lo!k kode ini memastik an s!ript dijalank an setelah (ile #$M% selesai dimuat 7%od"8!CSS7b%a30#round3olorccredc8

'!ript tersebut akan merubah warna body dengan menambahkan atribut style yang memiliki nilai “%a30#round3olor:red”!

((!+! Plu#in

j`uer"

 jCuery )lugin adalah plugin/suplemen untuk menambah (ungsionalitas dari  jCuer y )lugin

ini  biasanya d ibuat untuk memudahkan pengguna dalam membuat suatu

aplik asi 'alah satunya adalah membuat 'lider, 'lideshow dan lain se bagainya *nda tinggal memanggil li brar y  plugin  jVuer y tersebut se per ti anda memanggil (ile  ja+as!ript, selanjutnya tinggal memanggil (ungsi yang disediakan oleh li brar y te rse but 'ebagai !ontoh, ada sebuah plugin jCuery 'lider  dan kita akan menerapkannya  pada

elemen #$M% yang memiliki id slider, )lugin tersebut menyediakan (ungsi “slider EF” untuk membuat markup #$M% kita

men jadi sebuah

slider  jadi

anda tinggal

mengetikkan s!ript ber ik ut : 7IUsliderJ8!slider78

*nda dapat men!ar i  plugin- plugin  jCuery yang anda butuhkan di internet atau anda

dapat men!ar i sebagian plugin  jVuer y di ttp: <<;;;!juer"=u!3om
Gambar 39<  jCueryu telah merangkum sebagian plugin jCuery dari *-D

Ba% (+

Studi 6asus = \ Penam%aan j`uer" Slider $erkait dengan %atihan 'li!ing sebelumnya kita akan menambahkan (ungsionalitas pada

'lider  agar berjalan sebagaimana mestinya alam kasus ini kita akan menggunak an )lugin "asi!  jCuery 'lider yang bisa anda download di htt p:// basi!-slider!om/

ebel um

menggunakan

 plugin

juery,

 sebagiknya

anda

 @aca

 ! anduannya terlebih dahul u  
Cara pen##unaan %asi3slider ari

okumentasi

basi!-slider

yang

bisa

anda

ba!a

di

htt p:// basi!-

slider!om/do!umentation/ "erikut ini adalah !ara penggunaan dari  plugin tersebut : 3 ownload pluginnya lalu sertakan dalam (ile #$M% and a 4 Serta0an le j`uer"  s3riptsr3KIjs
4 Markup #$M% untuk slider mengik uti struktur yang dite ntuk an oleh  basi!-slider 

se per ti berikut : di,idKIidslideso;andaJ ul3lassKI7j8J li4 si Slide Anda 
7

Jik a

sudah melakukan poin 3 dan 4 di atas, baru kita  panggil (ungsinya se pe r ti

 berikut : 7do3ument8!read"7fun3tion78V 7IUidslideso;andaJ8!%js7V _;idt_: E=) _ei#t_: +=) _so;Mar0ers_: true _so;Controls_: true _3enterMar0ers_: false W8 W8

i dalam (ungsi bjVs terdapat beberapa parameter untuk pengaturan slider, *nda

dapat memba!a penjelasan tiap parameternya di link yang saya sebutkan di atas

Penerapan pada Studi 6asus 0e+ )ada 'tudi kasus ke- ini, kita akan membuat slider yang terdapat pada studi kasus k e -7  ber(ungsi sebagaimana mestinya yakni sebagai slider 

Peru%aan Mar0up HTML 'ebelum kita mulai membuat slider ber(ungsi dengan  baik, rubah markup #$M%

 ber ik ut: *! (! +! =!

di, idKIslideso;J im# sr3KIima#es
fundamental mempelajari HTML dan

Men jadi se per ti di bawah ini : *! (! +! =! >! ?! ! D! E!

di, idKIslideso;J ul 3lassKI%jsJ li im# sr3KIima#es
*)! **! *(! *+! *=! *>! *?!


)ada dasarkan kita akan me nam pilk an 7  buah slide/gambar Kita juga akan merubah dan menambah style untuk bagian slideshow ini Gam bar -gam bar tambahan  bisa anda  buat sendiri atau !opy

gambar yang

terdapat di dalam (older “miniml  P with

slider /images”

&lass bjVs yang terdapat pada unordered list adalah ketentuan yang diberikan oleh li brar y jVuery slider yang akan kita gunakan Esudah dijelaskan se be lumnyaF

Peman##ilan Li%rar" 'elanjutnya kita  panggil  beberapa (ile  ja+as!r  ipt yakni (ile  jCuery, plugin jCuery  basi!-

slider, dan (ile &'' bawaan dari  jVuer y- basi! slide r 

.bah bagian header dan tambahkan kode yang ditebalkan berikut : 49-CTGP$ HTML HTML ead titleMiniml
$ambahkan juga style  berikut ke dalam (ile style!ss yang kita buat sebelumnya : !%jsne5t a !%jspre, a V 3olor: oran#e te5tde3oration: none %a30#round: ;ite paddin#: >p5 *)p5 W

A0ti,asi Plu#in %angkah terakhir adalah  pemanggilan (ungsi  basi! slider yang akan merubah mar ku  p

#$M% kita men jadi 'lide r “ beneran ” $ambahkan kode berikut setelah kode  pemanggilan li brar y %asi3juer"slider!js di atas *! !!! (! s3ript t"peKIte5t! 7_Uslideso;_8!%js7V ?! _;idt_ : () ! _ei#t_ : (+D D! _so;Mar0ers_ : false E! _so;Controls_ : true *)! W8 **! W8 *(! 
)arameter width dan height menga!u pada lebar dan tinggi gambar slide "e rbeda dengan !ontoh  pemanggilan  basi!-slider yang telah saya jelaskan se belumnya, saya hanya

menam pilk an

parameter

“show&ontr ols” untuk

na+igasi tiap

slider dan

menyembunyikan Markers dengan me m be r i nilai ' alse Kini, jika anda tam pilk an dalam web  br owser , "agian slider memiliki link “ pr e+” dan “ne5t”, klik link tersebut untuk memajumundurkan slide 

Gambar 339 %ink )re+ dan Ie5t untuk na+igasi slider 

Ba% (= $XTRA S (=!*! Fire%u#

9e,eloper Tools dan

K edua add-on ini telah saya !eritakan se!ara singkat di awal  buku ini ?ungsi k eduanya hampir sama yakni menyediakan berbagai in(or masi untuk e+eloper web ter masu k  in(ormasi tentang dokumen #$M% dan &'' yang men jadi konsentrasi dalam buku ini $ool ini  biasa digunakan untuk mem pe lajar i struktur #$M% dan &'' dari web lain,

misalnya ketika kita ingin menget ahui  bagai mana struktur dari suatu bagian dalam we b, anda tinggal klik kanan bagian te r se but, dan  pilih menu >nspe !t 2lement

'e!ara otomatis  blo!k

#$M%  bagian tersebut akan ditam pilk an

lengkap dengan

style/&'' yang diterap k an

Gambar 333 Kode #$M% beserta 'tyle yang ditera pk a n

engan begitu anda dapat m e m pe lajar i style

yang

digunakan *nda-pun dapat

menam bah, menghapus, dan mengeditnya dengan me ngk lik dua kali  pada kode yang

 bersangkutan dan anda dapat melihat langsung perubahan yang ter   jadi dalam br owser  )erubahan yang anda lakukan tidak bersi(at  per manen, ketika browser anda r e(r esh semuanya akan kem bali se per ti semula

(=!(! Codin#

en

Den &oding adalah  plugin tambahan yang tersedia untuk beberapa te5t editor, se per ti  Iotepad, 'ublime te5t dan masih banyak lagi .ntuk da(tar te5t editor yang diduk ung oleh en !oding  bisa dilihat disitus of   ficial nya

htt p://!odegoogle!om/p/en-!oding/ .ntuk instalasi en !oding di  Iotepad, anda !ukup masuk ke menu $ools, )lugin Manager 'elanjutnya s!roll sampai anda melihat Den &oding "eri tanda dan klik tom bol

install untuk mulai menginstall en !oding )enggunaan en

!oding sangatlah mudah )lugin

ini dibuat untuk mem per !e pat

 penulisan kode #$M% dan &'', sebagai !ontoh perhatikan kode #$M% berikut : di, idKI;rapperJ di, idKI3ontentJ
.ntuk ukuran anda yang sudah terbiasa mengetik dengan sepuluh  jari mungkin han ya

membutuhkan 6 menit untuk me nulis kode di atas %alu  bagaimana  jika anda tidak  menguasai teknik te r se but/ Mungkin akan memakan waktu 39 menit atau bahkan lebih engan en !oding, kode tersebut  bisa disingkat me n jadi satu baris se pe r ti berikut : U;rapperU3ontentUside%arUfooter

'elanjutnya anda tinggal menekan kombinasi tom bol yang

telah ditentukan untuk 

  n Ee5pandF kode ter se but, dan 6  baris kode diataspun akan anda dapatk an mele bar ka

'angat !epat  buk an/ %alu apa arti dari satu baris kode en !oding se belunya

U;rapper U3ontent  Uside%ar dan Ufooter U;rapper U3ontent  Uside%ar dan Ufooter  berar ti  kita membuat sebuah di+ de ngan

nama id wrapp er , !onte nt, sidebar dan (ooter )enambahan tanda pagar menga!u  pada

 penulisan sele!tor &'' untuk id Eba!a k em bali  bab pengenalan &''F engan  be gitu untuk  penulisan sebuah di+ dengan nama !lass ar tik el anda tinggal menuliskan titik 

sebelum nama !lass E.ar tik elF

K et ik a anda tidak menambahkan nama tag yang akan dibuat, maka tag yang ak an dibuat adalah tag di+ Jik a *nda ingin membuat tag tertentu anda tinggal me nget ik ka  n

nama tag tersebut Misal : ulUmenu

*kan me nghasilk an ul idKImenuJ
Cild 'elanjutnya tanda “lebih  besar dar i”  EAF digunakan untuk membuat !hild dari

tag

sebelumnya )ada !ontoh kasus di atas adalah : U;rapper >ni menandakan k ode-k ode setelah tanda “A“7yak niU3ontentUside%ar dan UfooterF ak an

 berada di dalam U;rapper E&hild dari U;rapperF

Perulan#an 0ode .ntuk me nuliskan beberapa baris kode yang sama, anda dapat menggunakan o pe r ator  Tn dimana n adalah jumlah yang diingink an &ontoh kasusnya adalah pembuatan list item me nu ul idKImenuJ lia refKII
)enulisan kode en !oding dari  beberapa baris kode diatas adalah se pe r ti berikut : ulUmenuliZ>a

 Den Coding sangat dian'urkan untuk anda yang  sudah memahami  %T&' dan C, jika anda masih bel um mengerti sepenuhnya akan %T&' dan C saya

 sarankan untuk mengetik kode secara manual agar anda mengingat apa  yang   sedang anda  pel ajar i. 'ebenarnya masih banyak lagi tata !ara  pe nulisan kode #$M% dengan bantuan Den &oding ini,  begitu pula  penulisan  pr o pe r ty- pr o per ty &'', anda dapat memba!a da (tar  singkatan en-!oding yang bisa di download dari situs r esminya

(=!+!  Te5t

Menam%a0an 9umm"

K et ik a anda membutuhkan sejumlah teks/kalimat/paragra( untuk kepentingan +isual, *nda

akan

membutuhkan

dummy

te5t

ummy

te5t

adalah

sek um pulan

kalimat/paragra( tanpa makna se per ti : Lorem ipsum dolor sit amet 3onse3tetur adipisi3in# elit sed do eiusmod tempor in3ididunt ut la%ore et dolore ma#na aliua! /t enim ad minim ,eniam uis nostrud e5er3itation ullam3o la%oris nisi ut aliuip e5 ea 3ommodo 3onseuat!

)aragra( tersebut tidak memiliki makna namun berguna ketika kita mem butuhk an konten !e pat .ntuk mendapatkan teks te rse but,  jika anda menggunakan te5t editor sublime te 5t,

anda tinggal mengetikkan lorem lalu tekan tom bol $ab *nda juga dapat membuatnya dengan menggunakan *plikasi  pengolah kata Mi!r oso(t 0ord, !aranya dengan mengetikkan : Klorem7jumlaPara#raf jumla6alimat8

%alu tekan 2nter untuk mendapatkan te5t dummy sesuai dengan jumlah kalimat dan  paragra( yang dite ntuk an Jik a

anda menggunakan te5t editor 'ublime te5t, anda tinggal mengetikkan kata lor e m

dan tekan tab untuk mendapatkan dummy te5t ini

(=!=! “online”

Buat situs anda

.ntuk membuat halaman web yang anda buat “online ” sehingga dapat diakses oleh

semua orang melalui internet , anda harus menyimpan seluruh  (ile yang anda buat

di

tempat

o nline  yang

penyimpanan

 biasa

disebut

dengan

hostin&

dan

mengarahk ann ya dengan domain

Men#enal 9omain 'ebelumnya

Hostin# telah

 penyimpanan online

dan

dijelaskan

se!ara

untuk (ile-(ile

mengaksesnya di internet

singkat

bahwa

website anda

sedangkan

untuk

#osting

adalah

sehingga semua

mengarahkan

tempat

orang dapat

orang-oran g

agar 

membuka halaman we b anda, diperlukan sebuah alamat yang  biasa disebut dengan domain misalnya ;;;!fa3e%oo0!3om .ntuk menyederhanakan

istilah-istilah tese but,  bayangkanlah Hostin& itu se buah

Bumah, dan domain sebagai Alamat dari rumah terse but

%alu dimana saya  bisa mendapatkan domain dan hosting ini Jawabann ya,  *nda dapat menyewa keduanya 'udah banyak  jasa - jasa #osting indonesia yang menawarkan  jasa sewa #osting dan domain dengan harga yang

mur ah, anda dapat me nyewanya

 perbulan atau bahkan pertahun dengan berbagai paket sesuai kebutuhan

 Tips Hostin#

memili

Murah saja tidaklah !ukup, jangan terpengaruh oleh harganya yang mir ing, tapi lak uk an

sur+ey terlebih dahulu akan kinerja dari hosting yang akan k ita sewa K ar ena  biasanya kendala dari sewa hosting sangat banyak, mulai  dari ser+er yang selalu down sehingga halaman web anda tidak  bisa dibuka oleh orang lain 'esuaikan pemilihan  paket data sesuai dengan ukuran situs anda, semakin ke!il uk ur an

hosting yang akan disewa semakin murah pula harga yang harus anda bayar 

 Tips 9omain

memili

Gunakanlah nama domain yang  pendek atau yang lebih mudah diingat oleh semua orang, misalnya tok o- bagus!om, ilmu-k om pute r !om atau nama lain yang akan mudah

diingat #arga domain tergantung dari ekstensi yang anda  pilih misalnya !om , net , org , !oid

dan lain se bagainya )ada &ontoh yang akan saya berikan, kita akan menyewa hosting dari salah satu  jasa hosting lokal 'ebagai !ontoh saya akan memilih paket domain dan hosting dengan sie 369mb, !ukup untuk menampung seluruh situs saya 'etelah proses  pem bayaran selesai, kita tinggal menggunakan hosting tersebut tanpa harus  bingung mengatur 

hosting dan domain karena semuanya sudah dilak uk an oleh penyedia  jasa

Gambar 334 $abel harga hostingdomain di salah satu jasa hosting lok al

)er tama-tama, kita masuk ke pusat pengaturan #osting yang  biasa disebut dengan !panel "iasanya dapat

diakses melalui alamat :;;;!domainanda!3om<3panel!

*ndapun akan dibawa ke halaman be r ik ut

Gambar 337 #alaman login !)anel

Masukkan username dan password yang telah diberikan oleh  jasa hosting yang anda gunakan untuk memasuk i !panel 'etelah anda login,  berikut ini adalah tam pilan halaman web yang akan anda dapatk an

Gambar 33 #alaman !)anel

Kita mulai dengan mengupload seluruh (ile-(ile #$M% dan (ile-(ile yang  ber sangk utan E&'', gambar dan lain sebagainyaF, !ar ilah >!on ?ile Manager, ketika anda klik,  ber ik ut

tam pilan yang akan anda dapatk an, hampir sama dengan e5plorer atau aplik asi pe n!ar i  berkas yang terdapat dalam komputer anda

Gambar 336 ?ile Manager untuk mengatur (ile di hos ting

%alu dimana kita harus meletakkan (ile yang kita  punya agar dapat diak ses oleh oran g lain di inte rnet/ *nda

harus mengupload (ile-(ile web anda ke (older www atau

#ubli( > HT"L. Klik tom bol upload, dan uploadlah (ile anda satu per satu

Gambar 33; #alaman untuk mengupload ( ile Jik a

semua (ile-sudah anda upload, andapun dapat mengaksesnya melalui alamat

domain anda ;;;!domainBanda!3om Jik a

anda membuat (older lagi dalam (older www, anda dapat mengaksesnya lewat

alamat : ; ;;!d om ai n an da! 3 om
(=!>! Client Jik a

Men##una0an FTP

sebelumnya kita

mengupload (ile satu per satu, sekarang kita

menggunakan ?$)E !lient untuk mengupload

akan  belajar 

(ile-(ile web ke hosting kita ?$) &lient

adalah aplik asi ke!il, untuk mengupload (ile-(ile dengan mudah ke hosting tanpa harus membuka &panel 'alah satu aplik asi yang  paling sering digunakan adalah (ileilla yang  bisa anda download dari ( ile illa!om

Gambar 338 ?ileDilla, *plikasi ?$) !lient (ree dan r ingan

Masukkan, #ost Edomain-anda!omF, username dan password !pane l anda, pada k olom login 'etelah login, maka dibagian kanan akan

ditam pilk an seluruh (ile dan (older 

dalam hosting anda an di  bagian kiri adalah (ile-dan (older di komputer  anda

<

?$) merupakan kependekan dari ?ile $rans(er  )roto!ol, ?$) digunakan untuk  berinterak si dengan (ile-(ile yang terdapat dalam ser+er hosting dengan mudah

&ara mengupload (ile yang diinginkan sangatlah mudah, anda tinggal me nyele k si (ile-(ile yang dinginkan dan klik upload atau drag ke bagian kanan dan se!ara otomatis (ile-(ile tersebut akan diupload oleh ?ileDilla 'elain me ngupload, andapun dapat mendownload (ile yang terdapat dalam hosting

anda dengan !ara yang sama, yaitu memindahkannya dari kolom se belah kanan ke kir i

$PL-. That  s it, 'ekarang anda telah mem pelajar i dasar -dasar dari #$M%, &'' dan sedik it 9 

 pengetahuan tentang Ja+as!r ipt "uku ini hanyalah sebagian ke!il dari  pe m bahasan seputar 0eb esign, #$M%, &'' dan Ja+as!r ipt

'etelah selesai memahami  buku ini  bukan  berar ti  perjalanan anda dalam m em pe lajar i #$M% dan &'' telah usai, masih banyak yang harus anda p elajar i se per ti $ag-tag  baru #$M%6, 2(ek-e(ek yang bisa diterapkan dengan &''7, )enggunaan Ja+as!r ipt untuk  interakti(itas

website,

$eknik

Mendesain 0ebsite dengan

)hotoshop

dan

lain

se bagainya Mater i-mate r i yang saya sebutkan di atas  bisa didapatkan dengan mudah di inte rnet ataupun dalam  buk u- buk u tentang 0eb esign/0eb e+elopment yang terdapat di toko-toko buk u

9aftar Pusta0a Bu0u   m !hotoshop to  %T&'  C. 499<Bo!kable )r ess 0ay, Je(( r ey Jordan  * ro

$aWeed, &ollis #ow to be B o!kstar 0ordpress esigner 499<Bo!kable )r ess

2e%site htt p://wwww7s!hools!om htt p://learn!sstutsplus!om htt p://wwwarionanet