01_Pengenalan Pemrograman Web

(1)

Pengenalan Pemrograman Web

Aryo Pinandito, ST, M.MT

Fajar Pradana, S.ST, M.Eng Issa Arwani, S.Kom, M.Sc

1 . PEN D AH U LUAN 1.1 Pengant ar 1.2 Tuj uan

2 . Se j a r a h sin gk a t

3 . Je n is Pe m r ogr a m a n W e b 3.1 Client Side Script ing 3.2 Serv er Side Script ing 4 . Kon se p da sa r w e b se r ve r 5 . Pe n ge n a la n H TM L

6 . Pe n ge n a la n CSS 6.1 Ex t ernal St ly e Sheet 6.2 I nt ernal St ly e Sheet 6.3 I nline St y le Sheet 6.4 Mult iple St y le Sheet

1 . PEN D AH ULUAN

1 .1 Pe n ga n t a r

Web Program m ing adalah adalah proses m enulis, m encoba, m em erik sa dan m em per baik i ( debug) , sert a m em elihara k ode unt uk m em buat sebuah program k om put er. Kode ini dit ulis dalam berbagai bahasa pem rogram an. Tuj uan dari pem rogram an adalah unt uk m em uat suat u program y ang dapat m elak uk an suat u perhit ungan at au proses sesuai dengan k einginan si pem r ogr am . Jadi Secara singk at unt uk Web progr am m ing adalah proses pem buat an program y ang out put ny a disaj ik an oleh Web Brow ser.

1 .2 Tu j u a n

Tuj uan pem belaj aran pada bab ini adalah: 1. Mem aham i k onsep pem r ogram an w eb

2. Dapat m enj elask an perbedaan server side script ing dan client side script ing

3. Mem aham i dasar- dasar HTML dan CSS

1

MODUL

S

E

L

F

-P

RO

P

A

G

A

T

IN

G

E

N

T

RE

P

RE

N

E

U

RI

A

L

E

D

U

C

A

T

IO

N

D

E

V

E

L

O

P

M

E

N

T

(2)

2 . SEJARAH SI N GKAT

Pem rogram an Web t erm asuk dalam k at egori pem rogram an t ek s, art iny a dalam m em buat sebuah program , program m er t idak ak an dim anj ak an dengan drag and drop sepert i y ang t erj adi pada pem r ogr am an v isual. Tet api pem r ogram an Web j uga t idak m irip dengan pem rogram an t ek s pada um u m n y a y ang m em but uhk an com piler unt uk m engek sek usi program m enj adi sebuah aplik asi t et api pem rogram an Web m em but uhk an int erpret er unt uk m engek sekusi program y ang dik et ik an, perangk at lunak y ang digunak an sebagai int erpret er ini ant ara lain sem ua perangk at lunak y ang dik at agorik an sebagai Web Brow ser.

Bahasa y ang digunak an unt uk m em buat Web j uga berm acam - m acam , t et api y ang paling bany ak digunak an adalah HTML dan PHP. I st ilah w eb sebet ulny a diam bil dari singk at an WWW ( World Wide Web) y ang didefinisik an sebagai suat u k olek si dok um en m ult im edia y ang saling t erk ait y ang disim pan di int ernet dan diak ses m enggunak an prot ok ol y ang um um ( HTTP) . Web t idak sam a dengan int ernet , t et api w eb diak ses m enggunak an j aringan k om put er y ang bernam a int ernet . I nt ernet m erupak an j aringan k om put er y ang secara fisik digunak an unt uk m enghubungk an j ut aan k om put er y ang m enggunak an prot ok ol y ang sam a unt uk berbagi / t ransm isi infor m asi ( TCP / I P) pada k eny at aanny a, I nt ernet adalah j aringan dari j aringan y ang lebih k ecil. Sehingga j ik a diam bil k at a k unciny a, int ernet m erupak an perangk at k eras dan w eb m erupak an perangk at lunak ny a.

Kom unik asi dat a y ang m enggunak an k om put er dengan j arak y ang t erpisah sudag m ulai dik aj i dan dit elit i m ulai t ahun 1960an Dalam perk em bangan sej arahny a hingga t ahun 2000an ini int ernet digunak an lebih dari 600 m ily ar lebih penggunany a. Perk em bangan y ang cuk up fant ast is ini dipicu oleh penem uan prot ok ol HTTP y ang dit em uk an oleh Tim Berners- Lee pada t ahun 1989. Websit e y ang sek arang k it a nik m at i saat berselancar di int ernet t idak t erlepas dari j asa beliau, sehingga w eb berk em bang m enj adi dua j enis, st at is dan dinam is. Sebuah w eb dik at ak an sebagai w eb st at is j ik a infor m asi y ang dit am pilk an dalam w eb t ersebut t idak pernah berubah- ubah at au selalu sam a set iap diak ses pada w ak t u y ang berbeda- beda. Sedangk an w eb dinam is m erupak an sebuah w ebsit e y ang m em ilik i t am pilan y ang berbeda-beda m esk i diak ses dalam w ak t u y ang bersam aan at au t idak , k arena sem ua t ergant ung pengguna y ang m engak ses w eb t ersebut .

3 . JEN I S PEM ROGRAM AN W EB

Secaraum um j enispem rogram an w eb t erbagi 2 ( duay ait u client side script ing dan serv er side

script ing. Perbedaank eduaj enis script iniadalahbagaim anacar ak erj any adanpem rosesanny adilak uk andim ana. Aplik asiberbasis w eb

adalahaplik asi y ang arsit ek t urny aberbasis client - serv er. Mak sudnyaadalahaplik asi w eb dapat diolah di sisi client dan di sisi serv er.

3 .1 Clie n t Side Scr ipt in g

Secara um um , suat u client adalah sat u aplik asi k om put er, sepert i w eb brow ser y ang berj alan pada sat u k om put er lok al dari pen gguna at au w ork st at ion, dan t erhubung k e suat u serv er. Client - side program m ing adalah pr ogram k om put er pada w eb y ang dij alank an pada sisi client , oleh w eb brow ser; Hal ini ber law anan art i dengan Serv er- side script ing. Operasi dapat dilak uk an oleh client - side k arena operasi t ersebut m em but uhk an ak ses k e inform asi at au fungsi y ang t ersedia pada client t et api t idak pada serv er, k arena pengguna m em but uhk an observ asi t erhadap operasi t ersebut at au m enyediak an input , at au serv er k ekurangan k ek uat an pem em rosesan unt uk m elak uk an operasi y ang t epat w ak t u unt uk seluruh client y ang harus dilay aniny a. Sebagai t am bahan, j ik a operasi dapat dilak ukan oleh client t anpa

(3)

Halaman3

Pemrograman Web /Pengenalan Pemrograman Web

Brawijaya University

2012

m engirim dat a m elalui j aringan, m ak a hal it u m em ak an w ak t u lebih sedik it , m enggunak an lebih k ecil bandw idt hdan m engurangi resik o k eam anan.

Client - side Script seringk ali dim asuk k an ( em bedded) di dalam dok um en HTML, t et api dapat j uga berada di dalam file t erpisah, y ang direferensik an oleh dok um en y ang m enggunak anny a. At as sebuah request , file y ang diper luk an dik irim k an oleh w eb serv er k epada k om put er user. Web br ow ser m ilik user m elak uk an ek sek usi t erhadap Script , lalu m enam pilk an dok um en, t erm asuk out put y ang dapat t erlihat dari Script . Client - side Script j uga dapat berisik an perint ah y ang harus diik ut i oleh w eb brow ser j ik a user berint erak si dengan dok um en dengan cara t ert ent u, cont ohny a k lik sebuah t om bol.

Berik ut adalah beberapa t ek nologi client side y ang sering digunak an: • Act iv e X Con t r ols

Act iveX Cont rol adalah program y ang berdiri sendiri, y ang biasa disebut k om ponen y ang dit ulis dalam bahasa C+ + at au Visual Basic. Ket ik a dit am bahk an ke sebuah halam an w eb, program ini m em puny ai beberapa fungsi, sepert i t im er, client aut hent icat ion at au ak ses t erhadap basis dat a. Oby ek Act iveX cont rol dit am bahk an k e HTML dengan m enggunak an t ag < OBJECT> , y ang sek arang ini sudah m enj adi st andard HTML. Act iveX cont rol dapat diek sekusi oleh brow ser at au ser ver k et ik a m erek a dit em pelk an k e dalam sebuah halam an w eb.

Act iveX cont rol dik em bangk an oleh Microsoft , dan m esk ipun k om pat ibel dengan HTML st andar, t api t idak di- support oleh Net scape brow ser y ang t anpa m enggunak an Act iv eX plug- in. Act iveX cont rol hany a dapat berfungsi di I nt ernet Ex plorer ( m esk ipun begit u beberapa fungsi Act iveX disediak an unt uk Net scape m elalui plug- in dari Ncom pass) .

• Ja v a Apple t s

Applet s adalah sebuah program y ang dit ulis dengan m enggunak an bahasa pem rogram an Jav a y ang bisa dim asuk k an k e dalam halam an HTML, sam a sepert i sebuah im age dim asuk k an k e halam an HTML. Ket ik a k it a m enggunak an brow ser dengan Jav a diak t ifk an unt uk m elihat halam an y ang m em uat applet , m ak a k ode applet dit ransfer k e sist em k it a dan diek sek usi oleh brow ser. Karena applet dit ulis dengan Jav a, m ak a applet ini m em puny ai k elebihan- kelebihan Jav a, sepert i bisa m enj adi st and- alone dan cross plat for m .

• Clie n t Side Scr ipt da n D H TM L

Client side script ing dik em bangk an unt uk m eny ediak an alt ernat if unt uk m engubah HTML y ang st at is m enj adi dinam is. Ket ik a brow ser m enem uk an inst ruk si- inst ruk si y ang berupa script y ang dit em pel di dalam k ode HTML, m ak a br ow ser ak an m ent erj em ahk anny a ke dalam HTML m urni ( dengan asum si brow ser m engert i bahasa script ing y ang dit em uk anny a) . I ni m em ungk ink an para pengem bang unt uk m em buat halam an w eb y ang int erak t if y ang lebih bany ak m em pu ny ai fungsi daripada sebuah HTML m urni.

Jav aScript adalah bahasa script y ang ut am a digunak an di I nt ernet . Bahasa script ini di-support oleh Net scape Nav igat or ( m ulai v ersi 2) dan Microsoft I nt ernet Ex plorer ( m ulai v ersi 3) . Client - Side VBScript , hany a diduk ung oleh I nt ernet Ex plorer, dan m ak a dari it u buk an m erupak an pilihan y ang baik dalam script ing I nt ernet sehari- har i, t et api m ungk in k adang- k adang digunak an dalam m em buat aplik asi I nt ranet y ang sem ua produk ny a berasal dar i Micr osoft .

Dy nam ic HTML adalah script y ang lebih dit uj uk an unt uk m em buat respresent asi dari sebuah halam an HTML. DHTML m em puny ai lebih bany ak ak ses k e fit ur- fit ur sepert i k em am puan unt uk m enganim asik an halam an dan m enem pat k an gam bar gr afis dan t ek s secara t epat dengan m enggunak an absolut e posit ioning.

(4)

Karak t erist ik client side script ing :

• Kode program didow nload bersam a dengan halam an w eb • Bersifat int erpret er dan dit erj em ahk an oleh br ow ser

• Model ek sek usiny a sim ple dan sk rip dapat dij adik an sat u dengan HTML Kelebihan j ik a m enggunak an client side script ing :

• Mudah unt uk dipelaj ari dan digunak an, art iny a unt uk m em pelaj ari client side script ing cuk up m udah

• Tidak m em but uhk an penget ahuan pem rogram an y ang t inggi at au pengalam an pem rogram an y ang cuk up ahli

• Perubahan dan pem rosesan k ode program ny a lebih cepat k arena langsung dilak uk an di sisi client / k om put er host t anpa perlu m elak uk an proses di sisi serv er m elalui j aringan int ernet .

• Mam pu m enam pilk an lay out dan desain halam an w eb y ang lebih int erak t if dan dan user friendly . User dapat berint erak si den gan halam an w eb m elalui for m isian y ang disediak an.

3 .2 Se r v e r Side Scr ipt in g

Server Side Program m ing adalah t ek nik pem rogram an w eb dim ana k it a m enulis program di k om put er server y ang k em udian pr ogram it u ak an diek sek usi di server dan hasilny a y ang sudah berupa HTML ak an dik irim balik k e client y ang request t erhadap halam an program y ang k it a buat t ersebut . Beberapa t ahun y ang silam , sat u- sat uny a solusi agar m enam pilk an dat a y ang dinam is k e web adalah dengan m enggunak an sesuat u y ang di sebut Com m on Gat ew ay I nt erface ( CGI ) . Dengan m eggunak an program CGI m em ungk ink an cara y ang relat if sederhana unt uk dapat m enerim a input dari user, m elak uk an query t erhadap dat abase, dan m engem balik an hasilny a k e brow ser .

Baik Microsoft m aupun Net scape t elah m engem bangk an API y ang cocok y ang bisa digunak an unt uk m em buat di dalam k ode proses unt uk m elay ani request - request w eb. Tek nologi server side t erbaru sek arang ini y ang dit aw ark an t erm asuk Act ive Server Page ( ASP) , Java Servlet s, Java Server Pages ( JSP) , PHP: Hy per t ex t Preprocessor ( PHP) , dan m asih bany ak lagi.

Berik ut adalah beberapa k eunggulan penggunaan server side script ing daripada k it a hany a m enggunak an t ek nologi client - side saj a :

• Mem inim alisasinet w ork t raffic denganm em bat asik ebut uhanbrow ser danserver unt uk t alk back diant arak eduany a.

• Wak t uloading ak anm enj adilebihsingk at k arena y ang didow nload hany ahalam an y ang m engandung HTML saj a.

• Masalahk om pat ibilit asbr ow ser dapat dihindari.

• Mem ungk ink ank it am em berik an dat a y ang t idak adapadasisiclient

• Lebih am an, k arena program diek sek usi di server sehingga k ode program t idak bisa dilihat dari br ow ser.

4 . KON SEP D ASAR W EB SERV ER

Web Serv er adalah sebuah at au beberapa k om put er y ang difungsik an unt uk m elay ani lay anan/ service ht t p ( hy pert ext t ransfer prot ocol) . Sebuah/ beberapa k om put er dapat dibuat m enj adi w eb server dengan cara m enginst all soft w are w eb server sepert i APACHE, I I S, PWS, Xit am i dan lainny a. APACHE adalah w eb server open source y ang paling bany ak digunak an di

(5)

Halaman5

Pemrograman Web /Pengenalan Pemrograman Web

Brawijaya University

2012

I nt ernet ( ham pir 60% ) , sedangk an I I S ( I nt ernet I nform at ion Service) dari Microsoft digunak an di m esin ber basis NT dan PWS ( Personal Web Ser ver) digunak an di m esin Win98. Web Serv er ak an m elay ani sebuah request dari Web Client dengan m engeluark an server response k e client berupa t ransfer file HTML y ang dit erim a oleh brow ser di client .

Gam bar 1. Cara kerj a Web Serv er

Apache m erupak an salah sat u dari w eb serv er open source y ang cukup handal. dik at ak an cuk up handal disebabk an selain dari apache m erupak an w eb serv er gr at isan, t et api apache m em ilik i perform a y ang t idak k alah baik dibanding w eb serv er lainny a

Selain perform any a y ang t idak k alah baik , apache w ebserv er j uga dapat dij alank an di berbagai m acam Operat ing Syst em sepert i Window s, Linux , FreBSD, dll. Selain it u, Apache m em ilik i fit ur- fit ur canggih sepert i pesan kesalahan y ang dapat dik onfigur( m elalui ht t pd) , aut ent ik asi berbasis sej um lah m enj adi m udah.

5 . PEN GEN ALAN H TM L

Hy perTex t Mark up Language ( HTML) adalah

Versi t erak hir dari HTML adalah HTML 4.01, m esk ipun saat ini t elah berkem bang XHTML y ang m erupak an pengem bangan dari HTML. HTML berupa k ode- k ode t ag y ang m enginst ruk sik an w eb brow ser unt uk m enghasilk an t am pilan sesuai dengan y ang diingink an. Sebuah file y ang sebuah bahasa m ark up y ang digunak an unt uk m em buat sebuah halam an w eb dan m enam pilk an ber bagai in for m asi di dalam sebuah Web Brow ser. Berm ula dari sebuah bahasa y ang sebelum ny a bany ak digunak an di dunia penerbit an dan percet ak an y ang disebut dengan SGML, HTML adalah sebuah st andar y ang digunak an secara luas unt uk m enam pilk an halam an w eb dan HTML k ini m erupak an st andar I nt ernet y ang saat ini dik endalik an oleh World Wide Web Consort ium ( W3C) .

(6)

m erupak an file HTML dapat dibuk a dengan m enggunak an brow ser w eb sepert i Mozilla Firefox at au Microsoft I nt ernet Ex plorer. HTML j uga dapat dik enali oleh aplik asi pem buk a em ail at aupun dari PDA dan program lain y ang m em ilik i k em am puan br ow ser.

Secara garis besar, t erdapat 4 j enis elem en dari HTML: 1. St ruct ural

Tanda y ang m enent uk an level at au t ingk at an dari sebuah t ek s ( cont oh, <h1>Golf</h1>

ak an m em erint ahk an brow ser unt uk m enam pilk an " Golf" sebagai t ek s t ebal besar y ang m enunj uk k an sebagai Heading 1

2. Present at ional.

Tanda y ang m enent uk an t am pilan dari sebuah t ek s t idak peduli dengan lev el dari t eks t ersebut ( cont oh, <b>boldface</b> ak an m enam pilk an bold. Tanda present at ional saat ini sudah m ulai digant ik an oleh CSS dan t idak direk om endasik an unt uk m engat ur t am pilan t ek s.

3. Hypert ex t

Tanda y ang m enunj ukk an pranala k e bagian dari dok um en t ersebut at au pranala k e dok um en lain ( cont oh, <a href="http://www.wikipedia.org/">Wikipedia</a>ak an m enam pilk an Wik ipedia sebagai sebuah hy perlink k e URL t ert ent u)

4. Elem en w idget , y ang m em buat obj ek - obj ek lain sepert i t om bol (<button>) , list (<li>) , dan garis horizont al (<hr>) .

Set iap dok um en HTML harus diaw ali t ag <HTML>. Tag ini digunak an oleh w eb serv er dan w eb brow ser unt uk berk om unik asi. Tag ini ak an m em berit ahuk an w eb brow ser bahw a y ang dik irim adalah dok um en HTML. Tag ini harus berada di baris pert am a pada dok um en HTML. Tag <HTML> m em puny ai t ag penut up, t ag ini digunak an unt uk m em berit ahu brow ser ak hir dari dok um en HTML. Tag penut up unt uk t ag <HTML> adalah </HTML>. Tag penut up ini harus berada t erak hir pada dok um en HTML

• Tag HTML

• Tag <HTML> dan </HTML>

• Tag <HEAD> dan </HEAD>

• Tag <BODY>dan </BODY>

• Judul Page ( t ag <TITLE>)

• Pem buat an Paragraf (tag<p>)

Secara um um for m at t ag HTML t ersebut dapat dit ulisk an sebagai berik ut : <TAG>Teks yang akan dipengaruhi oleh tag</TAG>

Sebagai cont oh k alau k it a ak an m em buat t ulisan dalam form at t ebal m ak a y ang harus k it a t ulisk an dalam ﬁle HTML adalah:

<B>Tulisan yang tercetak tebal</B>

Unt uk m endeﬁnisikan head, kita dapat menambahkan tag <HEAD>dan </HEAD> set elah penggunaan t ag <HTML>

Sedangk an bagian body adalah t em pat dim ana k it a dapat m enem pat k an t ek s dan berbagai ak sesori penduk ung lainny a y ang ak an dit am pilk an pada w eb page. Bagian ini dapat

(7)

Halaman7

Pemrograman Web /Pengenalan Pemrograman Web

Brawijaya University

2012

didefinisik an dengan m elet ak k an t ag <BODY> dan </BODY> di ant ara t eks y ang ak an k it a t am pilk an. St ruk t ur dasar sebuah page dapat

dit ulisk an sebagai : <HTML>

Unt uk m endeﬁnisikan judul page (title) maka kita dapat melakukannya dengan meletakkan nask ah j udul di ant ara t ag <TITLE> dan </TITLE>. Judul ini ak an dit am pilk an pada t it le bar w eb brow ser . Misalk an k it a ak an m em buat sebuah page dengan j udul " Lat ihan HTML" m ak a k it a harus m enam bahk an:

<TITLE>Latihan HTML</TITLE> Tag – Tag HTML

1.<FONT></FONT>

Tag ini m enerangk an bahw a sebuah t ulisan m em puny ai beberapa pelengk ap. Pelengk apny a adalah:

a. Uk uran ( Size) : Menerangk an ukuran dari t ulisan ant ara angk a 1- 7, t ergant ung k epada angk a 1 adalah y ang t erk ecil dan an gk a 7 adalah y ang t erbesar.

b. Jenis Tulisan ( FACE) : Menerangkan huruf ak t ual y ang Anda m au t am pilk an j ik a huruf ini t erinst al pada k om put er pengguna. I ni adalah huruf- huruf y ang populer. Cont oh : <FONT FACE="Helvetica, Times New Roman, Arial>

c. Warna ( COLOR) : Menerangk an w arna dah huruf dengan nam any a at au dengan k ode w arna. Cont oh: <FONT color="RED">

Cont oh penggunaan TAG :

<FONT SIZE="4" FACE="Arial" COLOR="Red"> BELAJAR HTML ITU MUDAH </FONT> 2. <b></b>Gay a Tulisan Huruf Tebal/ Miring dan Garis Baw ah

Unt uk m em for m at t ek s, gunak anlah t ag <b></b>unt uk m encet ak t ebal, t ag <u></u> unt uk cet ak m iring dan <u></u > unt uk m em buat t eks bergaris baw ah. Berik ut ini adalah cont oh penggunaan t ag- t ag t ersebut .

<u>This is underlined </u> <i>This is italic </i>

3.Perint ah Header digunak an unt uk m enam pilk an Judul Baba t au Sub bab dari isi dok um en. Uk uran header biasany a lebih besar dari uk uran isi body dok um en. Nam un disediak an j uga uk uran k ecil. HTML m eny ediak an hingga 6 ( enam ) uk uran header m ulai dari <H1>, <H2>,

(8)

Dibaw ah ini adalah t abe y ang biasa digunak ansepert i y ang diperlihat k anpadaTabel 1.1.

Tabel 1.1 Tag HTML

Ta g H TM L Ke t e r a n ga n

< ht m l> < / ht m l> Tag unt uk m engapit halam an HTML

< head> < / head> Tag y ang berisi infor m asi um um dari halam an

< t it le> < / t it le> Judul Halam an, berada didalam t ag < head> ...< / head> < body > < / body > Kont en y ang ak an dit am pilk an di brow ser

< st y le> < / st y le> Unt uk CSS

< st rong> < / st rong> Unt uk m enebalk an t ek s < div > < / div > Unt uk m em buat lay er < a> < / a> Unt uk m em buat hy perlink < p> < / p> Unt uk m em buat paragraf

< hn> < / hn> Unt uk m em buat header, n berupa angk a dari 1 – 5 < span> < / span> Unt uk inline st y le ( m anipulasi t ek s)

< ! > Kom ent ar

< br> Unt uk gant i baris

6 . PEN GEN ALAN CSS

Cascading St y le Sheet at au y ang disingk at CSS m em ungk ink an anda unt uk m endesain t am pilan dok um en ( Php dan HTML) dengan m em isahk an isi dari dok um en HTML dengan k ode unt uk m enam pilk anny a ( CSS) .

Didalam dunia desain w eb, lay out at au m engat ur let ak web, form at huruf, dan lain ny a y ang ada dalam sebuah w eb m enj adi bagian y ang am at pent ing bahk an bisa j adi y ang paling lam a dibanding dengan bagain desain web lainny a. Karena j ik a k it a m em bua lay out y ang salah, m ak a w eb k it a j uga ak an salah dit erj em ahk an oleh brow ser. Hal it u j uga bisa disebabk an k arena set iap brow ser m em illik i duk ungan bahasa( CSS) y ang berbeda dan t ent uny a default dari brow serny a sendiri y ang berbeda- beda. Brow ser y ang paling rew el soal lay out css adalah I E k arena k urang duk unganny a t erhadap CSS.

Jik a k it a m em ilik i bany ak file HTML, k it a hany a perlu sat u file CSS, sehingga k et ik a k it a m enggant i j enis huruf pada file CSS m ak a sem ua file HTML y ang berhubungan pada file CSS t ersebut ak an berubah. CSS dist andarisasi oleh W3C ( World Wide Web Consort ium ) . CSS dapat dipasang pada dik um en HTML y ang t elah j adi.

Ada em pat caraunt uk m em asuk k an script CSS k edalam w eb page anda y ait udengan : • Ex t ernal St y le Sheet

• I nt ernal St y le Sheet • I nline St y le

(9)

Halaman9

Pemrograman Web /Pengenalan Pemrograman Web

Brawijaya University

2012

6 .1

Ex t e r n a l St yle Sh e e t

Cara ini adalah cara y ang paling ideal unt uk m em buat CSS, dengan m enggunak an cara ini, anda hany a perlu m engubah sat u file sat u apabila anda m engingink an perubahan st y le pada CSS. Anda harus m em buat sat u file t ex t y ang berek st ensi css, file ini y ang nant iny a dihubungk an k edalam halam an w eb anda.

Cont oh :

File m y st y le.css hr {color: sienna} p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

Anda dapat m em asuk k anfilediat ask edalam halam an w eb page anda dengancarasebagaiberik ut :

<head>

</head>

Terlihat bahw alink file CSS t erlet ak diant ara t ag <head>

6 .2 I n t e r n a l St y le Sh e e t

Apabila anda m enggunak ancara ini m ak a anda harusm enggabungk anlangsung script CSS anda k edalam halam an w eb anda, cara ini t idakefisienapabila anda m engingink anperubahanpadasalahsat u st y le CSS anda y ang t erny at at erdapat padabeberapahalam an w eb anda, m ak a anda harusm engubahsem uahalam an

w eb page t ersebut . Cont oh :

<head>

body {background-image: url("images/back40.gif")} </style>

</head>

6 .3 I n lin e St y le s

I nlinest y lesm engharusk an anda m enulisk an st y le y ang anda definisik ank epada t ag- t ag HTML y ang anda ingink ansat upersat u.

Cont oh :

<p style="color: sienna; margin-left: 20px"> This is a paragraph

</p>

6 .4 M u lt iple St y le She e t

(10)

REFEREN SI

Anonim . Modul Pengaj aran PPPGT Malang. 2006. Saput ra, Ridw an S. Pem rogram an HTML. 2010

PROPAGASI

A. La t ih a n da n D isk u si ( Pr opa ga si V e r t ik a l da n H or iz on t a l)

1. Buat sebuah halam an y ang m enam pilk an biodat a anda dengan form at HTML! 2. Berik an st y le CSS pada halam an t er sebut

B. Tu ga s ( Ev a lu a si m a n dir i)

1. Jelask an sej arah pem rogram an w eb!

2. Sebut k an dan j elask an cont oh client side script ing! 3. Sebut k an 3 ( t iga) cara penulisan CSS!

(1)

Gam bar 1. Cara kerj a Web Serv er

5 . PEN GEN ALAN H TM L

Hy perTex t Mark up Language ( HTML) adalah

(2)

Secara garis besar, t erdapat 4 j enis elem en dari HTML: 1. St ruct ural

Tanda y ang m enent uk an level at au t ingk at an dari sebuah t ek s ( cont oh, <h1>Golf</h1> ak an m em erint ahk an brow ser unt uk m enam pilk an " Golf" sebagai t ek s t ebal besar y ang m enunj uk k an sebagai Heading 1

2. Present at ional.

3. Hypert ex t

Tanda y ang m enunj ukk an pranala k e bagian dari dok um en t ersebut at au pranala k e dok um en lain ( cont oh, <a href="http://www.wikipedia.org/">Wikipedia</a>ak an m enam pilk an Wik ipedia sebagai sebuah hy perlink k e URL t ert ent u)

4. Elem en w idget , y ang m em buat obj ek - obj ek lain sepert i t om bol (<button>) , list (<li>) , dan garis horizont al (<hr>) .

Set iap dok um en HTML harus diaw ali t ag <HTML>. Tag ini digunak an oleh w eb serv er dan w eb brow ser unt uk berk om unik asi. Tag ini ak an m em berit ahuk an w eb brow ser bahw a y ang dik irim adalah dok um en HTML. Tag ini harus berada di baris pert am a pada dok um en HTML. Tag <HTML> m em puny ai t ag penut up, t ag ini digunak an unt uk m em berit ahu brow ser ak hir dari dok um en HTML. Tag penut up unt uk t ag <HTML> adalah </HTML>. Tag penut up ini harus berada t erak hir pada dok um en HTML

• Tag HTML

• Tag <HTML> dan </HTML> • Tag <HEAD> dan </HEAD> • Tag <BODY>dan </BODY> • Judul Page ( t ag <TITLE>) • Pem buat an Paragraf (tag<p>)

Secara um um for m at t ag HTML t ersebut dapat dit ulisk an sebagai berik ut : <TAG>Teks yang akan dipengaruhi oleh tag</TAG>

Sebagai cont oh k alau k it a ak an m em buat t ulisan dalam form at t ebal m ak a y ang harus k it a t ulisk an dalam ﬁle HTML adalah:

<B>Tulisan yang tercetak tebal</B>

Unt uk m endeﬁnisikan head, kita dapat menambahkan tag <HEAD>dan </HEAD> set elah penggunaan t ag <HTML>

Sedangk an bagian body adalah t em pat dim ana k it a dapat m enem pat k an t ek s dan berbagai ak sesori penduk ung lainny a y ang ak an dit am pilk an pada w eb page. Bagian ini dapat

(3)

didefinisik an dengan m elet ak k an t ag <BODY> dan </BODY> di ant ara t eks y ang ak an k it a t am pilk an. St ruk t ur dasar sebuah page dapat

dit ulisk an sebagai : <HTML>

Unt uk m endeﬁnisikan judul page (title) maka kita dapat melakukannya dengan meletakkan nask ah j udul di ant ara t ag <TITLE> dan </TITLE>. Judul ini ak an dit am pilk an pada t it le bar w eb brow ser . Misalk an k it a ak an m em buat sebuah page dengan j udul " Lat ihan HTML" m ak a k it a harus m enam bahk an:

<TITLE>Latihan HTML</TITLE> Tag – Tag HTML

1.<FONT></FONT>

Tag ini m enerangk an bahw a sebuah t ulisan m em puny ai beberapa pelengk ap. Pelengk apny a adalah:

a. Uk uran ( Size) : Menerangk an ukuran dari t ulisan ant ara angk a 1- 7, t ergant ung k epada angk a 1 adalah y ang t erk ecil dan an gk a 7 adalah y ang t erbesar.

b. Jenis Tulisan ( FACE) : Menerangkan huruf ak t ual y ang Anda m au t am pilk an j ik a huruf ini t erinst al pada k om put er pengguna. I ni adalah huruf- huruf y ang populer. Cont oh : <FONT FACE="Helvetica, Times New Roman, Arial>

c. Warna ( COLOR) : Menerangk an w arna dah huruf dengan nam any a at au dengan k ode w arna. Cont oh: <FONT color="RED">

Cont oh penggunaan TAG :

<FONT SIZE="4" FACE="Arial" COLOR="Red"> BELAJAR HTML ITU MUDAH </FONT> 2. <b></b>Gay a Tulisan Huruf Tebal/ Miring dan Garis Baw ah

Unt uk m em for m at t ek s, gunak anlah t ag <b></b>unt uk m encet ak t ebal, t ag <u></u> unt uk cet ak m iring dan <u></u > unt uk m em buat t eks bergaris baw ah. Berik ut ini adalah cont oh penggunaan t ag- t ag t ersebut .

<u>This is underlined </u> <i>This is italic </i>

(4)

Dibaw ah ini adalah t abe y ang biasa digunak ansepert i y ang diperlihat k anpadaTabel 1.1.

Tabel 1.1 Tag HTML

Ta g H TM L Ke t e r a n ga n

< ht m l> < / ht m l> Tag unt uk m engapit halam an HTML

< head> < / head> Tag y ang berisi infor m asi um um dari halam an

< t it le> < / t it le> Judul Halam an, berada didalam t ag < head> ...< / head> < body > < / body > Kont en y ang ak an dit am pilk an di brow ser

< st y le> < / st y le> Unt uk CSS

< st rong> < / st rong> Unt uk m enebalk an t ek s < div > < / div > Unt uk m em buat lay er < a> < / a> Unt uk m em buat hy perlink < p> < / p> Unt uk m em buat paragraf

< hn> < / hn> Unt uk m em buat header, n berupa angk a dari 1 – 5 < span> < / span> Unt uk inline st y le ( m anipulasi t ek s)

< ! > Kom ent ar

< br> Unt uk gant i baris

6 . PEN GEN ALAN CSS

Ada em pat caraunt uk m em asuk k an script CSS k edalam w eb page anda y ait udengan : • Ex t ernal St y le Sheet

• I nt ernal St y le Sheet • I nline St y le

(5)

6 .1

Ex t e r n a l St yle Sh e e t

Cont oh :

File m y st y le.css hr {color: sienna} p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

Anda dapat m em asuk k anfilediat ask edalam halam an w eb page anda dengancarasebagaiberik ut :

<head>

</head>

Terlihat bahw alink file CSS t erlet ak diant ara t ag <head>

6 .2 I n t e r n a l St y le Sh e e t

w eb page t ersebut . Cont oh :

<head>

body {background-image: url("images/back40.gif")} </style>

</head>

6 .3 I n lin e St y le s

I nlinest y lesm engharusk an anda m enulisk an st y le y ang anda definisik ank epada t ag- t ag HTML y ang anda ingink ansat upersat u.

Cont oh :

<p style="color: sienna; margin-left: 20px"> This is a paragraph

</p>

6 .4 M u lt iple St y le She e t

(6)

REFEREN SI

Anonim . Modul Pengaj aran PPPGT Malang. 2006. Saput ra, Ridw an S. Pem rogram an HTML. 2010

PROPAGASI

A. La t ih a n da n D isk u si ( Pr opa ga si V e r t ik a l da n H or iz on t a l)

1. Buat sebuah halam an y ang m enam pilk an biodat a anda dengan form at HTML! 2. Berik an st y le CSS pada halam an t er sebut

B. Tu ga s ( Ev a lu a si m a n dir i)

1. Jelask an sej arah pem rogram an w eb!

2. Sebut k an dan j elask an cont oh client side script ing! 3. Sebut k an 3 ( t iga) cara penulisan CSS!