PEMROGRAMAN WEB HTML, HTML 5, CSS, C SS, CSS 3, JA J AVA SCRIPT
Dosen Pengampu : Deni Sutaji S.Kom
Nama kelompok : Kevin Arbianto (13621!3" #r$as %a&ani
(13621!'"
Nur Aini Aini
(13621''"
am&an lut)i
(13621'*"
+uniar +uniar ,$an&ra (1362166"
TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH GRESIK
ii
Kata Pengantar
Puji s-ukur s-ukur ke $a&irat Alla$ Alla$ S/ karena atas berkat 0a$matN0a$matN-aa se$ingga kami &apat men-elesaikan tugas makala$ pemrograman eb. 4apan terima kasi$ juga &itujukan pa&a &osen pengampu kami -akni Deni Sutaji S.Kom -ang juga berperan membantu memberikan materi tentang pemrograman eb. %akala$ ini bertujuan bertujuan untuk memberikan memberikan in)ormasi &an pengeta$uan pengeta$uan tentang materi /%5 /%5 ,SS ,SS &an 7av 7ava s4ri s4rip pt -ang ang &ituj itujuk ukan an untu untuk k para para ma$as a$asis isa a univ univer ersi sita tass mu$amma&i-a$ 8resik k$ususn-a ma$asisa /eknik /eknik #n)ormatika. Semoga Semoga makala$ makala$ ini &apat &apat &iman) &iman)aatk aatkan an sebaik sebaik baiknbaikn-aa ole$ ole$ para para ma$asi ma$asisa sa univer universita sitass ss mu$amm mu$amma&ia&i-a$ a$ gresik gresik.. Dan apabil apabilaa ter&ap ter&apat at kesala$ kesala$an an &alam &alam penuli penulisan san makala$ kami mo$on mo$on maa) &an kami sangat ber$arap kritik &an saran untuk untuk kesempurnaan pembuatan makala$ ini.
8resik 11 %aret 21'
/im Pen-usun
DAFTAR ISI ii
KA/A KA/A P9N8AN/A0
i
DA/A0 #S#
ii
;A; # P9NDA5AN
1
A. 5atar ;elakang ;. 0umusan %asala$ ,. /ujuan Penelitian
1 2 3
;A; ## 5ANDASAN /9<0#
3
A. ;. ,. D. 9. . 8. .
/%5 ( -per -per /e=t %arkup 5anguage" 5anguage" Strukt Struktur ur /%5 /%5 Dokume Dokumen n /%5 ' (-per (-per /e=t /e=t %arkup %arkup 5anguage" 5anguage" Perbe&aan Perbe&aan /%5' &engan &engan /%5 sebelumn-a sebelumn-a /agtag /agtag /%5 &an /%5' /%5' ;eserta KegunaannKegunaann-aa ,SS (,as4a& (,as4a&ing ing St-le St-le S$eet" S$eet" ,SS3 ,SS3 (,as4a& (,as4a&ing ing St-le St-le S$eet" S$eet" 7ava 7avaS4 S4ri ript pt
3 ' 6 * * 1> 2! 26 26
;A; ### P9N/P
3
A. Kesi Kesimp mpul ulan an
3 3
;A; #? DA/A0 PS/AKA
31
BAB I
ii
PENDAHULUAN
A. 5atar 5atar belaka belakang ng Perkembangan teknologi saat ini -ang semakin 4epat menuntut seseorang untuk mengikutin-a. Dibalik perkembangan teknologi saat ini ban-ak para instansi ataupun perorangan meman)aatkan teknologi sebagai la$an bisnis maupun untuk berbagi ilmu. /eruta erutama ma para para ma$asis ma$asisa a -ang -ang mau ti&ak ti&ak mau $arus $arus mengik mengikuti uti perkem perkemban bangan gan teknologi saat ini. /eknologi /eknologi saat ini ti&ak ti& ak $an-a &i asumsikan untuk brosing atau $an-a sebagai mengikuti tren& so4ial me&ia saja namun teknologi saat ini &i man)aatkan untuk membua membuatt suatu suatu ebsite ebsite ataupun ataupun -ang -ang lainnlainn-aa se$ing se$ingga ga kita kita ti&ak ti&ak $an-a $an-a &apat &apat berkunjung pa&a ebsite orang lain saja namun kita &apat membuat ebsite kita sen&iri &an mengisi artikel -ang akan kita s$are pa&a ebsite kita. Deasa ini ebsite sangat berguna bagi kalangan remaja maupun -ang su&a$ &easa ebsite merupakan suatu $alamn -ang &apat kita kunjungi -ang bisa terkoneksi &engan jaringan internet. ntuk ntuk membuat membuat suatu ebsite kita memerlukan memerlukan suatu ba$asa pemrograman pemrograman seperti /%5 ($-per /e=t markup language" -ang ba$asan-a mu&a$ untuk &i pa$ami &an &an berp berpa& a&u u &eng &engan an ,SS ,SS (4as4 (4as4an an&i &ing ng st-le st-le s$ee s$eet" t" maup maupun un &eng &engan an javas4 javas4ri ript pt.. Sebenarn-a masi$ ban-ak -ang &apat &ipelajari untuk pembuatan ebsite namun untuk pembuatan ebsite kali ini kita $an-a mempelajari /%5 ,SS serta java s4ript.
;. 0umu 0umusan san %asa %asala la$ $ Pa&a Pa&a pembua pembuatan tan makala$ makala$ pemrog pemrograma raman n eb eb tim pen-u pen-usun sun menemu menemukan kan beberapa rumusan masala$ -aitu: 1. Apa pengertian pengertian serta serta )ungsi )ungsi &ari /%5 /%5 /%5 /%5 ' ,SS ,SS ,SS 3 serta serta 7avaS4ript@ 7avaS4ript@ 2. ;agaimana ;agaimana 4onto$ 4onto$ &ari aplika aplikasi si atau eb &ari ba$asa ba$asa /%5 /%5 /%5 ' ,SS ,SS ,SS 3@
,. /ujua /ujuan n Peneli Penelitia tian n ii
Dalam rumusan masala$ &iatas maka &itemukan beberapa tujuan penelitian makala$ -aitu: 1. ntuk mengeta$ui mengeta$ui penger pengertian tian serta )ungsi )ungsi &ari /%5 /%5 /%5 /%5 ' ' ,SS ,SS 3 serta 7avaS4ript. 2. ntuk ntuk mengeta$ mengeta$ui ui &an memberik memberikan an tampilan tampilan eb atau aplikas aplikasii &ari &ari /%5 /%5 /%5 ' ,SS ,SS 3.
D. %an)aa %an)aatt Peneliti Penelitian an A&apun man)aat &ari penulisan makala$ &engan materi /%5 ( -per /e=t %arkup 5anguage " &an ,SS ( ,as4an&ing St-le S$eet " serta javas4ript -ang &imana ketiga pemba$asan tersebut &apat membantu kita untuk membuat suatu ebsite. Serta kita juga &apat mempelajari tetntang s4ript &ari /%5 ,SS &an javas4ript.
BAB II
LANDASAN TEORI
A. /%5 ( -per /e= /e=tt %arkup 5anguage" 5anguage" -per /e=t %arkup 5anguage (/%5" a&ala$ sebua$ ba$asa -ang &igunakan untuk untuk membua membuatt sebua$ sebua$ $alama $alaman n eb eb menamp menampilk ilkan an berbag berbagai ai in)orm in)ormasi asi &i &alam &alam sebua sebua$ $ penjelaja$ eb eb #nternet &an pem)ormatan $iperteks se&er$ana -ang &itulis &ala &alam m berk berkas as )orm )ormat at AS,## S,## agar agar &apa &apatt meng meng$a $asil silka kan n tamp tampila ilan n uju uju& & -ang -ang terintegerasi. /%5 &isebut %arkup language karena ba$asa /%5 menggunakan tan&a atau mark untuk menan&ai bagian bagian &ari te=t. Dan juga/%5 &isebut sebagai -per/e=t karena &i &alam /%5 sebua$ te=t biasa &apat ber)ungsi lain &an kita kita &apat &apat membua membuatntn-aa menja& menja&ii link -ang &apat &apat berpin berpin&a$ &a$ &ari &ari satu $alamn $alamn ke $alaman $alaman lainn-a lainn-a &engan &engan $an-a $an-a mengklik mengklik te=t tersebut. tersebut. Kemampuan te=t inila$ -ang &inamakan $-perte=t alaupun pa&a implementasin-a ti&ak saja $an-a te=t -ang ii
&apat &ija&ikan &ija&ikan link. Dengan kata kata lain berkas -ang &ibuat &ibuat &alam perangkat perangkat lunak lunak pengola$ kata &an &isimpan &alam )ormat AS,## normal AS,## normal se$ingga menja&i $alaman eb &engan &engan perint perinta$ a$per perinta inta$ $ /%5. /%5. Dan &alam &alam penger pengertia tian n lain lain /%5 /%5 juga juga merupakan merupakan sebua$ stan&ar stan&ar -ang &igunakan &igunakan se4ara luas untuk untuk menampilkan menampilkan $alaman eb. /%5 &ibuat ole$ kolaborasi ,aillau /#% &engan ;ernerslee 0obert ketika mereka bekerja &i ,90N pa&a ta$un 1*>* (,90N a&ala$ lembaga penelitian )isika energi tinggi &i 7enea". Pa&a aaln-a ba$asa /%5 ban-ak &igunakan &i &unia penerbitan &an pen4etakan -ang &isebut &engan S8%5 (Stan&art 8eneralie& %arkup 5anguage" &isebut %arkup language karena ba$asa /%5 menggunakan . /%5 menja&i sebua$ stan&art -ang &igunakan se4ara luas untuk menampilkan $alaman eb. eb. ntuk ntuk saat ini /%5 /%5 merupa merupakan kan stan&ar stan&artt intern internet et -ang -ang &i&e)in &i&e)inisik isikan an &an &iken&alikan &iken&a likan penggunan-a penggunan -a ole$ orl& orl& i&e i&e eb eb ,onsortium ,onsorti um (3,".
Se4ara umum )ungsi /%5 a&ala$ untuk mengelola serangkaian &ata &an in)ormasi se$ingga suatu &okumen &apat &iakses &an &itampilkan &i #nternet melalui la-anan eb. Namun )ungsi /%5 -ang lebi$ spesi)ik -aitu sebagai berikut : 1. %engin %enginteg tegeras erasika ikan n gambar gambar &engan &engan tulisa tulisan. n. 2. %emb %embua uatt pran pranal ala. a. 3. %engintegerasi %engintegerasikan kan berkas suara &an rekaman gambar gambar $i&up. $i&up. !. %embu %embuat at )or )orm m int inter erak akti) ti).. '. %embu %embuat at $alam $alaman an eb. eb. 6. %enampilkan %enampilkan berbagai berbagai in)ormasi in)ormasi &i &i &alam &alam sebua$ sebua$ broser broser #nternet. #nternet. B. %embuat %embuat link menuju menuju $alaman $alaman eb eb lain &engan &engan ko&e ko&e tertentu tertentu ($-perte=t ($-perte=t". ". Dari beberapa )ungsi -ang tela$ &ijelaskan &iatas. Pen-usun juga memberikan 4onto$ &okumen /%5 se&er$ana -ang &apat &i4oba &an &an untuk membuat &okumen &okumen /%5 &apat menggunakan notepa& ataupun tools lainn-a.
;.
Strukt Struktur ur /%5 /%5 Dokume Dokumen n 1. tml Setiap &okumen /%5 selalu &iaali &an &itutup &engan tag /%5. ii
2. ea& ;agian $ea&er biasan-a berisi tag /#/59 meta tag &an semua s4ript java atau -ang lain -ang akan &ieksekusi &i broser. Di bagian inila$ memb member erika ikan n
book booksm smark ark untu untuk k
kepe keperl rlua uan n
pen4 pen4ar arian ian(se (sear ar4$ 4$in ing" g" &eng &engan an
ke-or&. 3. ;o&;agian ;agian ;o&;o&- &iguna &igunakan kan untuk untuk menamp menampilka ilkan n te=t te=t image image link link &an semua -ang akan &itampilkanpa&a eb page. ;erikut merupakan )ormat lengkap &okumen /%5 :
Belajar HTML belajar tentan HTML
Pa&a ko&e /%5 &iatas &apat &ili$at ko&e /%5 selalu &iapit ole$ tag. ntuk membuka ko&e /%5 maka &igunakan tag C$tml &an untuk menutup ko&e /%5 akan &itan&ai &engan tag penutup CE$tml se&angkan tag C$ea& CE$ea& merupakan kepala &ari &okumen /%5 tersebut. Selanjutn-a &iikuti ole$ tittle -ang merupakan ju&ul &ari $alamn eb -ang &itan&ai &engan tag Ctittle CEtittle untuk isi /%5 akan &itan&ai &engan tag Cbo&- &an &itutup &engan tag CEbo&- &i&alam bo&- tersebut kita bole$ mengisikan te=t sebagai isi &ari $alaman eb tersebut se&angkan ko&e Cp CEp merupakan sebua$ paragrap$ &ari bo&-. bo&-. /e=t %arkup 5anguage" ' ,. /%5 (-per /e=t /%5 /%5' '
a&al a&ala$ a$
seb sebua$ ua$
ba$as a$asaa
marka arka$ $
untu untuk k
mens menstr truk uktu turk rkan an
&an
menampilkan isi &ari aring era anua (orl& i&e eb ,onsortium 3," sebua$ teknologi inti &ari #nternet. /%5' a&ala$ revisi kelima &ari /%5 (-ang pertama kali &i4iptakan pa&a ta$un 1** &an versi keempatn-a /%5! pa&a ta$un ta $un 1**B" 1**B" &an $ingga $ingga bulan bulan 7uni 7uni 211 211 masi$ masi$ &alam &alam pengem pengemban bangan gan.. /ujua /ujuan n utama utama pengembangan /%5' a&ala$ untuk untuk memperbaiki teknologi /%5 agar men&ukung teknologi multime&ia terbaru mu&a$ &iba4a ole$ manusia &an juga mu&a$ &imengerti ole$ mesin./%5' a&ala$ versi terbaru te rbaru &ari /%5 (-per/e=t (-per/e=t %arkup 5anguage".
ii
Dimana Dimana tujuan tujuan utama utama pengem pengemban bangan gan /%5' /%5' a&ala$ a&ala$ untuk untuk memper memperbai baiki ki teknologi /%5 agar men&ukung teknologi multime&ia terbaru mu&a$ &iba4a ole$ manusia &an juga mu&a$ &imengerti ole$ mesin. ;eberapa /ujuan &ibuatn-a /%5' antara lain: 1. 2. 3. !. '. 6.
itur baru baru $arus $arus &i&asarkan &i&asarkan pa&a /%5 /%5 ,SS D<% &an &an 7ava S4ript. S4ript. %engurangi %engurangi kebutu$an kebutu$an untuk plugin plugin eksternal eksternal (seperti (seperti )las$". )las$". Penang Penangana anan n kesal kesala$a a$an n -ang -ang baik baik 5ebi$ ban-ak ban-ak markup markup untuk untuk mengga menggantikan ntikan s4ripting s4ripting /%5' /%5' meru merupak pakan an peran perangka gkatt man&i man&iri ri Proses Proses pemba pembangu ngunan nan &apat &apat terli$ terli$at at untuk untuk umum umum
Se&angkan )itur baru &alam /%5 ' -aitu sebagai berikut: 1. 2. 3. !.
nsur nsur kanvas kanvas untuk untuk mengga menggamba mbar r ?i&eo ?i&eo &an elemen au&io untuk me&ia pemutaran pemutaran Dukungan Dukungan -ang -ang lebi$ lebi$ baik baik untuk untuk pen-impana pen-impanan n se4ara o))line o))line 9lemen 9lemen konten konten -ang -ang lebi$ lebi$ spesi)ik spesi)ik seperti seperti artikel artikel )ooter )ooter $ea&er $ea&er nav nav
se4tion '. ;entuk ;entuk kontrol kontrol )orm seperti seperti kalen&er kalen&er tanggal tanggal aktu aktu email email url url sear4$. ntuk saat ini beberapa broser su&a$ men&ukung /%5' seperti sa)ari 4$rome )ire)o= &an opera. Kabarn-a #9* ( #nternet 9=plorer " akan men&ukung beberapa )itur &ari /%5'.
,onto$ ebsite ebsite 5a-out %enggunakan /%5' :
,onto$ S4ript : >
ii
> >City "allery< "allery >
>
> London< London
> Pari$< Pari$
> To%yo< To%yo
> >
<$e&tion $e&tion> >
>London< London >
London i$ the &apital &ity o' Enland( )t i$ the mo$t pop*lo*$ &ity in the +nited ,indom-
.ith
a
metropolitan
area
o'
o#er
million
inhabitant$(
>
0tandin on the 1i#er Thame$- London ha$ been a major $ettlement 'or t.o millenniait$ hi$tory oin ba&% to it$ 'o*ndin by the 1oman$- .ho named it Londini*m(
> >
<'ooter 'ooter> > Copyriht 2 30&hool$(&om
>
>
40*mber 5 http5//... http5//...(.$&hool$(&om/html/html6layo*t(a$p7 (.$&hool$(&om/html/html6layo*t(a$p7
8ambar ebsite 5a-out Se&er$ana
ii
D. Perbe&aan Perbe&aan /%5' /%5' &engan /%5 sebelumn-a sebelumn-a
/%5 Penulisan s-nta= D<,/+P9 lebi$ panjang %asi$ %enggunakan las$ untuk aplikasi &an vi&eo %enggunakan broser 4$a4e sebagai tempat pen-impanan &ata sementara ;ekerja &engan semua broser -g lama 7avaS4ript pa&a broser membuat kinerja komputer lebi$ lambat
/%5 ' Dekalarasi lebi$ se&er$ana $an-a menggunakan FD<,/+P9 $tml A&a ban-ak elemet baru seperti tag au&io vi&eo 4anvas pa&a $tml %emiliki lo4al storage untuk men-impan &ata &alam jumla$ -g besar Su&a$ support ole$ broser terbaru 7avaS4ript &apat &igunakan untuk melakukan proses sekaligus
40*mber 5 http5//belajar&(&om/inde8(php9%ode:; http5//belajar&(&om/inde8(php9%ode:;7 7
9. /agtag agtag /%5 /%5 &an /%5' /%5' ;eserta ;eserta Kegunaann Kegunaann-a -a Nama Tag
Keterangan / Kegunaan
Basic
Tag Tag untuk menentukan menentukan tipe dokumen dokumen
Tag Tag untuk membuat membuat sebuah dokumen dokumen HTML
<br />
<br />
Tag Tag untuk membuat membuat judul dari sebuah halaman<br />
<br />
ii<br />
<br />
<body><br />
<br />
Tag Tag untuk membuat membuat tubuh dari sebuah halaman<br />
<br />
<h> to <h=><br />
<br />
Tag Tag untuk membuat membuat heading<br />
<br />
<p><br />
<br />
Tag Tag untuk membuat membuat paragraf <br />
<br />
<br><br />
<br />
Memasukan satu baris putus<br />
<br />
<hr><br />
<br />
Tag Tag untuk membuat membuat perubahan dasar kata didalam isi<br />
<br />
<!(((><br />
<br />
Tag Tag untuk membuat membuat komentar komentar<br />
<br />
Formatting<br />
<br />
<a&ronym rel="nofollow"><br />
<br />
Tag Tag untuk membuat membuat sebuah akronim akronim (tidak disupport lagi di HTML5)<br />
<br />
<abbr rel="nofollow"><br />
<br />
Tag Tag untuk membuat membuat sebuah singkatan singkatan<br />
<br />
<addre$$ rel="nofollow"><br />
<br />
Tag Tag untuk membuat membuat kontak kontak alamat<br />
<br />
<b><br />
<br />
Tag Tag untuk membuat membuat huruf bercetak bercetak tebal<br />
<br />
<bdi><br />
<br />
Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5)<br />
<br />
<bdo><br />
<br />
Mengganti arah teks<br />
<br />
<bi><br />
<br />
Tag Tag untuk membuat membuat tet berhuruf berhuruf besar (tidak disupport lagi di HTML5)<br />
<br />
<blo&%?*ote><br />
<br />
Tag Tag untuk membuat membuat sebuah bagian tet tet yang dikutip dari sumber lain<br />
<br />
<&enter><br />
<br />
Tag Tag untuk membuat membuat jajaran teks menjadi menjadi ditengah (tidak disupport lagi di HTML5)<br />
<br />
<&ite><br />
<br />
Tag Tag untuk membuat membuat judul karya<br />
<br />
<&ode><br />
<br />
Tag Tag untuk membuat membuat potongan kode kode komputer komputer di antara tet<br />
<br />
ii<br />
<br />
<del><br />
<br />
Tag Tag untuk membuat membuat teks yang telah dihapus dihapus dari dokumen<br />
<br />
<d'n><br />
<br />
Tag Tag untuk membuat membuat sebuah istilah de!nisi<br />
<br />
<em><br />
<br />
Tag Tag untuk membuat membuat penekanan teks teks (tidak disupport lagi di HTML5)<br />
<br />
<'ont><br />
<br />
Tag Tag untuk membuat membuat font" #arna" #arna" dan ukuran ukuran untuk teks(tidak teks(tidak disupport lagi di HTML5)<br />
<br />
<i><br />
<br />
Tag Tag untuk membuat membuat sebuah bagian dari teks teks yang disesuaikan dengan mood<br />
<br />
<in$><br />
<br />
Tag Tag untuk membuat membuat teks yang telah dimasukkan ke dalam dokumen<br />
<br />
<%bd><br />
<br />
Tag Tag untuk membuat membuat input keyboard keyboard<br />
<br />
<mar%><br />
<br />
Tag Tag untuk membuat membuat teks yang disorot disorot $ ditandai (tag baru HTML5)<br />
<br />
<meter><br />
<br />
Tag Tag untuk membuat membuat pengukuran pengukuran skalar<br />
<br />
<pre><br />
<br />
Tag Tag untuk membuat membuat teks terformat terformat<br />
<br />
<prore$$><br />
<br />
Memperlihatkan kemajuan tugas (tag baru HTML5)<br />
<br />
<?><br />
<br />
Tag Tag untuk membuat membuat kutipan pendek pendek<br />
<br />
<rp><br />
<br />
Tag Tag untuk membuat membuat apa yang harus ditampilkan di bro#ser yang tidak mendukung penjelasan ruby (tag baru HTML5)<br />
<br />
<rt><br />
<br />
Tag Tag untuk membuat membuat sebuah anotasi $ pengucapan karakter (untuk tipogra! %sia Timur)<br />
<br />
<r*by><br />
<br />
Tag Tag untuk membuat membuat sebuah anotasi ruby ruby (untuk tipogra! %sia Timur) (tag baru HTML5)<br />
<br />
<$><br />
<br />
Tag Tag untuk membuat membuat teks yang tidak lagi benar<br />
<br />
<$amp><br />
<br />
Tag Tag untuk membuat membuat contoh keluaran keluaran dari program komputer<br />
<br />
ii<br />
<br />
<$mall><br />
<br />
Tag Tag untuk membuat membuat teks kecil kecil<br />
<br />
<$tri%e><br />
<br />
Tag Tag untuk membuat membuat teks yang di coret coret tengah (tidak disupport lagi di HTML5)<br />
<br />
<$tron><br />
<br />
Tag Tag untuk membuat membuat teks penting<br />
<br />
<$*b><br />
<br />
Tag Tag untuk membuat membuat teks subskrip (seperti (seperti dalam penulisan &at Kimia)<br />
<br />
<$*p><br />
<br />
Tag Tag untuk membuat membuat teks superscripted superscripted (seperti dalam penulisan akar kuadrat)<br />
<br />
<time><br />
<br />
Tag Tag untuk membuat membuat tanggal $ #aktu (tag baru HTML5)<br />
<br />
<tt><br />
<br />
Tag Tag untuk membuat membuat teks teletype (tidak disupport lagi di HTML5)<br />
<br />
<*><br />
<br />
Tag Tag untuk membuat membuat teks yang memiliki memiliki 'aya yang berbeda dari teks biasa lainnya<br />
<br />
<#ar><br />
<br />
Tag Tag untuk membuat membuat sebuah ariabel<br />
<br />
<.br><br />
<br />
Tag Tag untuk membuat membuat kemungkinan kemungkinan garisputus<br />
<br />
Forms<br />
<br />
<'orm><br />
<br />
Tag Tag untuk membuat membuat sebuah form form HTML untuk input pengguna<br />
<br />
<inp*t><br />
<br />
Tag Tag untuk membuat membuat sebuah kontrol kontrol input<br />
<br />
<te8tarea><br />
<br />
Tag Tag untuk membuat membuat sebuah kontrol kontrol input multibaris (tet area)<br />
<br />
<b*tton><br />
<br />
Tag Tag untuk membuat membuat sebuah tombol yang yang dapat diklik<br />
<br />
<$ele&t><br />
<br />
Tag Tag untuk membuat membuat sebuah daftar daftar dropdo#n<br />
<br />
ii<br />
<br />
<optro*p><br />
<br />
Tag Tag untuk membuat membuat sebuah kelompok kelompok pilihan yang terkait dalam daftar dropdo#n<br />
<br />
<option><br />
<br />
Tag Tag untuk membuat membuat pilihan dalam daftar daftar drop do#n<br />
<br />
<label><br />
<br />
Tag Tag untuk membuat membuat sebuah label untuk sebuah elemen *input+<br />
<br />
<'ield$et><br />
<br />
<leend><br />
<br />
<datali$t><br />
<br />
'rup unsur terkait dalam bentuk Tag Tag untuk membuat membuat sebuah caption untuk untuk sebuah elemen *!eldset+" * !gure+" atau *details+ Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5)<br />
<br />
<%eyen><br />
<br />
Tag Tag untuk membuat membuat keypair keypair generator kolom kolom input (tag baru HTML5)<br />
<br />
<o*tp*t><br />
<br />
Tag Tag untuk membuat membuat hasil penghitungan (tag baru HTML5)<br />
<br />
Frames<br />
<br />
<'rame><br />
<br />
Tag Tag untuk membuat membuat sebuah #indo# (bingkai) (bingkai) dalam sebuah frameset (tidak disupport lagi di HTML5)<br />
<br />
<'rame$et><br />
<br />
Tag Tag untuk membuat membuat satu set bingkai bingkai (tidak disupport lagi di HTML5)<br />
<br />
<no'rame$><br />
<br />
Tag Tag untuk membuat membuat sebuah konten konten alternatif alternatif untuk pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5)<br />
<br />
<i'rame><br />
<br />
Tag Tag untuk membuat membuat sebuah bingkai<br />
<br />
Images<br />
<br />
<im><br />
<br />
Tag Tag untuk membuat membuat gambar<br />
<br />
<map><br />
<br />
Tag Tag untuk membuat membuat gambarpeta gambarpeta<br />
<br />
<area rel="nofollow"><br />
<br />
Tag Tag untuk membuat membuat area dalam gambarpeta gambarpeta ii<br />
<br />
<&an#a$><br />
<br />
<'i&aption> <'i*re><br />
<br />
,igunakan untuk menggambar gra!k" melalui scripting (&aa-cript ) (tag baru HTML5) Tag Tag untuk membuat membuat sebuah caption untuk untuk elemen *!gure+ (tag baru HTML5) Menentukan konten mandiri (tag baru HTML5)<br />
<br />
Audio/Video Audio/Video<br />
<br />
<a*dio rel="nofollow"><br />
<br />
Tag Tag untuk membuat membuat isi suara (tag baru HTML5)<br />
<br />
<$o*r&e><br />
<br />
Tag Tag untuk membuat membuat sumber beberapa beberapa media untuk elemen media (*ideo+ dan *audio+) (tag baru HTML5)<br />
<br />
<tra&%><br />
<br />
Tag Tag untuk membuat membuat trek teks untuk elemen media (*ideo+ dan *audio+) (tag baru HTML5)<br />
<br />
<#ideo><br />
<br />
Tag Tag untuk membuat membuat sebuah ideo atau !lm (tag baru HTML5)<br />
<br />
Links<br />
<br />
<a><br />
<br />
Tag Tag untuk membuat membuat hyperlink<br />
<br />
<lin%><br />
<br />
Tag Tag untuk membuat membuat hubungan antara antara dokumen dokumen dan sumber daya eksternal (paling sering digunakan untuk link ke style sheet)<br />
<br />
<na#><br />
<br />
Tag Tag untuk membuat membuat naigasi link (tag baru HTML5)<br />
<br />
Lists<br />
<br />
<*l><br />
<br />
Tag Tag untuk membuat membuat daftar dengan dengan selain nomor<br />
<br />
<ol><br />
<br />
Tag Tag untuk membuat membuat daftar dengan dengan nomor<br />
<br />
<li><br />
<br />
Tag Tag untuk membuat membuat sebuah item daftar daftar<br />
<br />
<dir><br />
<br />
Tag Tag untuk membuat membuat sebuah daftar daftar direktori (tidak disupport lagi di HTML5)<br />
<br />
ii<br />
<br />
<dl><br />
<br />
Tag Tag untuk membuat membuat sebuah daftar daftar de!nisi<br />
<br />
<dt><br />
<br />
Tag Tag untuk membuat membuat istilah (item) dalam daftar de!nisi<br />
<br />
<dd><br />
<br />
,e!nes a description of an item in a de!nition list<br />
<br />
<men*><br />
<br />
Tag Tag untuk membuat membuat deskripsi dari item dalam daftar de!nisi<br />
<br />
<&ommand><br />
<br />
Tag Tag untuk membuat membuat sebuah tombol perintah perintah bah#a seorang pengguna dapat meminta (tag baru HTML5)<br />
<br />
Tables<br />
<br />
<table><br />
<br />
Tag Tag untuk membuat membuat tabel<br />
<br />
<&aption><br />
<br />
Tag Tag untuk membuat membuat sebuah caption tabel<br />
<br />
<th><br />
<br />
Tag Tag untuk membuat membuat sebuah sel header tabel tabel<br />
<br />
<tr><br />
<br />
Tag Tag untuk membuat membuat baris dalam sebuah sebuah tabel<br />
<br />
<td><br />
<br />
Tag Tag untuk membuat membuat sel dalam sebuah tabel<br />
<br />
<thead><br />
<br />
Mengelompokan Mengelompokan isi header dalam sebuah tabel<br />
<br />
<tbody><br />
<br />
Mengelompokanisi Mengelompokanisi tubuh dalam sebuah tabel<br />
<br />
<t'oot><br />
<br />
Mengelompokan Mengelompokan isi footer dalam sebuah tabel<br />
<br />
<&ol><br />
<br />
Menentukan properti kolom untuk setiap kolom dalam elemen *colgroup+<br />
<br />
<&olro*p><br />
<br />
Menentukan kelompok kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat<br />
<br />
Style/Sections<br />
<br />
<$tyle><br />
<br />
Tag Tag untuk membuat membuat informasi informasi style untuk dokumen<br />
<br />
<di#><br />
<br />
Tag Tag untuk membuat membuat sebuah bagian dalam dokumen ii<br />
<br />
<$pan><br />
<br />
Tag Tag untuk membuat membuat sebuah bagian dalam dokumen<br />
<br />
<header><br />
<br />
Tag Tag untuk membuat membuat sebuah header untuk untuk dokumen atau bagian (tag baru HTML5)<br />
<br />
<'ooter><br />
<br />
Tag Tag untuk membuat membuat footer untuk dokumen dokumen atau bagian(tag bagian(tag baru HTML5)<br />
<br />
<hro*p><br />
<br />
Pengelompokan Pengelompokan elemen heading (*h.+ sampai *h/+)(tag *h/+)(tag baru HTML5)<br />
<br />
<$e&tion><br />
<br />
Tag Tag untuk membuat membuat bagian dalam dokumen (tag baru HTML5)<br />
<br />
<arti&le rel="nofollow"><br />
<br />
Tag Tag untuk membuat membuat sebuah artikel artikel (tag baru HTML5)<br />
<br />
<a$ide rel="nofollow"><br />
<br />
Tag Tag untuk membuat membuat konten lain lain selain dari konten halaman (tag baru HTML5)<br />
<br />
<detail$><br />
<br />
Tag Tag untuk membuat membuat rincian tambahan tambahan yang pengguna dapat lihat atau sembunyikan sembunyikan (tag baru HTML5)<br />
<br />
<dialo><br />
<br />
Tag Tag untuk membuat membuat sebuah kotak kotak dialog atau jendela(tag jendela(tag baru HTML5)<br />
<br />
<$*mmary><br />
<br />
Tag Tag untuk membuat membuat sebuah judul terlihat untuk elemen *detil+ (tag baru HTML5)<br />
<br />
Meta Info<br />
<br />
<head><br />
<br />
Tag Tag untuk membuat membuat informasi informasi tentang dokumen<br />
<br />
<meta><br />
<br />
Tag Tag untuk membuat membuat metadata tentang tentang dokumen HTML<br />
<br />
<ba$e><br />
<br />
Menentukan 01L dasar $ target untuk semua 01L relatif dalam dokumen<br />
<br />
<ba$e'ont><br />
<br />
Menentukan standar #arna" ukuran" dan font untuk semua teks dalam dokumen (tidak disupport lagi di HTML5)<br />
<br />
Programming<br />
<br />
ii<br />
<br />
<$&ript><br />
<br />
Tag Tag untuk membuat membuat script di sisi klien<br />
<br />
<no$&ript><br />
<br />
Tag Tag untuk membuat membuat sebuah konten konten alternatif alternatif bagi pengguna yang tidak mendukung mendukung script di sisi klien<br />
<br />
<applet rel="nofollow"><br />
<br />
Tag Tag untuk membuat membuat sebuah jaa applet yang yang ditanam(tidak ditanam(tidak disupport lagi di HTML5)<br />
<br />
<em<br />
<br />
Tag Tag untuk membuat membuat sebuah #adah untuk untuk aplikasi eksternal (nonHTML) (tag baru HTML5)<br />
<br />
bed><br />
<br />
<obje&t><br />
<br />
Tag Tag untuk membuat membuat sebuah objek yang ditanam<br />
<br />
<param><br />
<br />
Tag Tag untuk membuat membuat sebuah parameter parameter untuk objek<br />
<br />
40*mber 5 http5//.'*n&tion(&om/blo/inde8(php9p:det@idn:AA http5//.'*n&tion(&om/blo/inde8(php9p:det@idn:AA7 7<br />
<br />
ii<br />
<br />
. ,SS (,as (,as4a& 4a&ing ing St-l St-lee S$eet" S$eet" ,SS merupakan sala$ satu ba$asa pemrograman eb -ang &igunakan untuk mengen&alikan beberapa komponen &alam sebua$ eb se$inggan akan terli$at lebi$ terstru terstruktu kturr &an seragam seragam.. ,SS sen&ir sen&irii merupa merupakan kan sebua$ sebua$ teknol teknologi ogi intern internet et -ang -ang &irekomen&asikan ole$ orl& i&e i&e eb,onsortium eb,onsortium atau 3, pa&a ta$un ta $un 1**6. ,SS &ikembangkan untuk mengatur ga-a tampilan pa&a eb. Pa&a aaln-a ,SS ,SS &ikem &ikemba bang ngka kan n pa&a pa&a SS8% SS8%5 5 pa&a pa&a ta$u ta$un n 1*B 1*B &an &an teru teruss &ikem &ikemban bangk gkan ann n se$ing se$ingga ga saat ini ,SS tela$ tela$ men&uk men&ukung ung ban-ak ban-ak ba$asa ba$asa %arkup %arkup seperti seperti /%5 /%5 G/%5 G/%5 G%5 G%5 S?8 (S4ala (S4alable ble ?e4tor 4tor 8rap$i 8rap$i4s" 4s" &an %oila %oila G5 (G%5 ser ser #nter)a4es #nter)a4es 5anguage". 5anguage". %enga4u &ari ba$asa ,SS memiliki arti ga-a menata $alaman bertingkat -ang berarti setiap satu elemen -ang tela$ &i)ormat memiliki anak maka anak &ari elemen tersebut se4ara otimatis mengikuti )ormat elemen in&ukn-a.,SS seperti seperti $aln-a $aln-a st-les st-les pa&a aplika aplikasi si<br />
<br />
pengol pengola$a a$an n kata kata %i4roso %i4roso)t )t or& or& -ang -ang bisa bisa<br />
<br />
mengatur beberapa st-le misaln-a subbab $ea&ing bo&-te=t )ooter images &an st-le st-le lainnlainn-aa untuk untuk &apat &apat &ipakai &ipakai bersam bersamasa asama ma &alam &alam beberap beberapaa )ile. )ile. Si)at Si)at ,SS A&a &ua si)at ,SS -aitu internal internal &an e=ternal. e=ternal. 7ika internal internal -ang &ipili$ &ipili$ maka skrip itu itu &ima &imasu sukk kkan an se4a se4ara ra lang langsu sung ng ke $ala $alama man n ebs ebsit itee -ang ang akan akan &i&e &i&esa sain in.. Si)at -ang ke&ua a&ala$ e=ternal &i mana skrip ,SS &ipisa$kan &an &iletakkan &alam berkas k$usus. ,SS mampu mengatur arna bo&- teks ukuran gambar ukuran bor&er arna mouse over arna tabel arna $-perlink margin kiriEkananEatasEbaa$ spasi antar paragra) spasi antar teks &an parameter lainn-a. Dengan a&an-a ,SS memungkinkan memungkinkan kita untuk menampilkan $alaman -ang sama &engan )ormat -ang berbe&a.<br />
<br />
A&apun beberapa kegunaan ,SS antara lain: 1. %emper %empersin singka gkatt penu penulisa lisan n tag tag /%5 /%5 Se$ingga ti&ak perlu lagi men&e)inisikan setiap tag &engan propert- &an nilai -ang sama. 2. %emp %emper er4e 4epa patt pros proses es ren& ren&er erin ing g atau atau pemb pemba4 a4aa aan n /%5 /%5 kare karena na ti&a ti&ak k ter&apat pengulangan tulisan. 3. %u&a$ %u&a$ &an &an 4epat 4epat &alam &alam memain memainten tenan4 an4ee ii<br />
<br />
&ika &ikaren renak akan an )ile )ile ,SS ,SS &ibu &ibuat at se4ar se4ar terp terpis isa$ a$ maka maka An&a n&a ti&a ti&ak k perl perlu u merombak semua elemen atau propert- &alam /%5 4ukup menge&it )ile ,SSn-a saja. A&apun a&a tiga istila$ &asar -ang &igunakan &alam ,SS -aitu sele4tor propert- &an value :<br />
<br />
1. Sele4tor Seba Sebaga gaii ba$a ba$asa sa -ang -ang &igu &iguna naka kan n untu untuk k memb member erik ikan an ga-a ga-a tamp tampil ilan an ,SS ,SS menggunak menggunakan an meto&e meto&e &eklarati) &eklarati) untuk menspesi) menspesi)ikasi ikasikan kan bagian bagian /%5 -ang ingin &iberika ikan<br />
<br />
ga-a<br />
<br />
tampilan.<br />
<br />
Pemili$an<br />
<br />
elem lemen<br />
<br />
/%5<br />
<br />
&ilak lakukan<br />
<br />
&engan<br />
<br />
menspesi)ikasikan selector menspesi)ikasikan selector . Ko&e Ko&e &i baa$ baa$ member memberika ikan n 4onto$ 4onto$ &ari &ari sebua sebua$ $ sele4t sele4tor or -ang &apat &igunakan untuk memberikan ga-a tampilan ter$a&ap seluru$ elemen p -ang a&a pa&a &okumen /%5: p2 3333 4<br />
<br />
Pa&a ko&e &i atas -ang &ikatakan sele4tor iala$ ko&e H pI. Singkatn-a sebua$ sele4tor merupakan seluru$ ko&e -ang bera&a sebelum H JI. Sele Sele4t 4tor or -ang -ang &ibe &iberi rika kan n pa&a pa&a ko&e ko&e &i atas atas mela melaku kuka kan n pemb pember eria ian n ga-a ga-a pa&a seluruh pa&a seluruh elemen elemen p -ang a&a &alam &okumen. Selain memberikan &esain pa&a seluru$ elemen seperti ini sele4tor juga &apat memberikan &esain se4ara lebi$ spesi)ik: melalui klasi)ikasi i&entitas ataupun berbagai atribut lainn-a &ari sebua$ elemen. Pemba$asan sele4tor se4ara men&alam &apat &itemukan pa&a bab.<br />
<br />
2. PropertSebua$ properti menentukan berbagai parameter &esain -ang &apat &iuba$ &ari sebua$ elemen -ang &ipili$ ole$ sele4tor. ntuk lebi$ mu&a$n-a per$atikan ko&e &i baa$: p2 color 3336 fontsi7e 3336 4<br />
<br />
Pa&a ko&e &i atas -ang &ikatakan propert- iala$ ko&e -ang bera&a sebelum titik &ua (H:I". Kegunaan &ari ke&ua properti tersebut tentun-a 4ukup jelas &ari nama -ang -ang &iberi &iberikan kan -aitu -aitu 4olor 4olor untuk untuk memberi memberikan kan arna arna pa&a pa&a elemen elemen p &an )ont )ont ii<br />
<br />
sie untuk untuk mengub menguba$ a$ ukuran ukuran teks. teks. /er&ap er&apat at sangat sangat ban-ak ban-ak proper properti ti -ang -ang &apat &apat &igunakan tetapi pemba$asan mengenai &etil pengunaan tiaptiap properti ti&ak akan &ilaku &ilakukan kan pa&a pa&a buku buku ini. ini. 7ika 7ika ter&apat ter&apat pengun pengunaan aan proper properti ti baru baru penjela penjelasan san akan akan &iberikan pa&a bagian -ang relevan. Da)tar properti sen&iri &apat &iba4a &i. 3. ?alue ?alue merupakan nilai &ari propert- -ang ingin kita berikan. Nilai -ang &apat &iberikan sen&iri berbe&abe&a tergantung &engan jenis propert-n-a. %isaln-a jika ingin memberikan nilai arna kita $arus memberikan nilai &alam )ormatL0088 )ormatL0088;; ;; (kombinasi (kombinasi nilai $eksa mera$$ijau mera$$ijaubiru biru -ang biasa &igunakan &igunakan pa&a program pengola$ gra)is seperti P$otos$op". Ketika ingin memberikan nilai ukuran kita &apat memberikan nilai &alam )ormat nilai p= atau nilai em. ntuk lebi$ jelasn-a ko&e berikut memberikan 4onto$ value &ari properti -ang a&a pa&a ko&e sebelumn-a: p2 color 89999::6 fontsi7e 5:p6 4<br />
<br />
,onto$ ebsite ebsite 5a-out %enggunakan /%5' &engan ,SS: <!DOCTYPE html> <html><br />
<br />
<head> <$tyle> header <br />
<br />
ba&%ro*nd&olor5bla&%<br />
<br />
<br />
<br />
&olor5.hite<br />
<br />
<br />
<br />
te8talin5&enter<br />
<br />
<br />
<br />
pa p addin5p8<br />
<br />
na# <br />
<br />
lineheiht5p8<br />
<br />
ii<br />
<br />
<br />
<br />
ba&%ro*nd&olor5Feeeeee<br />
<br />
<br />
<br />
heiht5p8<br />
<br />
<br />
<br />
.idth5p8<br />
<br />
<br />
<br />
'loat5le't<br />
<br />
<br />
<br />
pa p addin5p8<br />
<br />
$e&tion <br />
<br />
.idth5p8<br />
<br />
<br />
<br />
'loat5le't<br />
<br />
<br />
<br />
pa paddin5p8<br />
<br />
'ooter <br />
<br />
ba&%ro*nd&olor5bla&%<br />
<br />
<br />
<br />
&olor5.hite<br />
<br />
<br />
<br />
&lear5both<br />
<br />
<br />
<br />
te8talin5&enter<br />
<br />
<br />
<br />
pa p addin5p8<br />
<br />
</$tyle> </head> <body><br />
<br />
<header> <h>City "allery</h> </header><br />
<br />
<na#> London<br> Pari$<br> To%yo<br> </na#><br />
<br />
<$e&tion> <h>London</h> <p><br />
<br />
ii<br />
<br />
London i$ the &apital &ity o' Enland( )t i$ the mo$t pop*lo*$ &ity in the +nited ,indom.ith a metropolitan area o' o#er million inhabitant$( </p> <p> 0tandin on the 1i#er Thame$- London ha$ been a major $ettlement 'or t.o millenniait$ it$ hi$t hi$tor ory y Londini*m(<br />
<br />
oin oin <br />
<br />
ba&% ba&%<br />
<br />
to<br />
<br />
it$ it$<br />
<br />
'o*n 'o*ndi din n<br />
<br />
by<br />
<br />
the the<br />
<br />
1oma 1oman$ n$-<br />
<br />
.ho .ho<br />
<br />
name named d<br />
<br />
it<br />
<br />
</p> </$e&tion><br />
<br />
<'ooter> Copyriht 2 30&hool$(&om </'ooter><br />
<br />
</body> </html><br />
<br />
40*mber 5 http5//...(.$&hool$(&om/html/html6layo*t(a$p http5//...(.$&hool$(&om/html/html6layo*t(a$p7 7<br />
<br />
ebsite e bsite 5a-out tanpa ,SS<br />
<br />
ebsite 5a-out &engan ,SS<br />
<br />
ii<br />
<br />
8. ,SS3 (,as4a&ing (,as4a&ing St-le St-le S$eet" S$eet" ,SS3 merupakan merupakan generasi generasi ke3 &ari perkembangan perkembangan ,SS sebelumn-a sebelumn-a ja&i pa&a &asarn-a pengertian ,SS3 sama &engan pengertian ,SS generasi sebelumn-a $an-a saja beberapa stan&ar baru untuk ,SS3 menggantikan ,SS2 &an mungkin akan membuat kita &apat berkolaborasi lebi$ &alam lagi untuk membuat tampilan situs lebi$ menarik &an mulai meninggalkan situs -ang membuat kita menunngu &engan loa&ing -ang -ang lama.<br />
<br />
;eberapa kelebi$an -ang ter&apat pa&a ,SS 3 : 1. ,SS3 ,SS3 lebi lebi$ $ &eta &etail il untu untuk k men& men&ek ekla laras rasik ikan an objek objek -ang -ang akan akan &ibe &iberi rika kan n st-le st-le.. ,onto$n-a &i&alam objek Mblo4kuoteO bisa membuat(uote" &iaal &an ak$ir menggunakan )ont lebi$ besar &an konten blo4kuote itu sen&iri. 2. ,SS3 ,SS3 kaka-a akan akan )itu )iturr untu untuk k anim animas asii &an &an e)ek e)ek untu untuk k te=t te=t atau atau obje objek k -ang ang sebelumn-a ti&ak bisa &ilakukan ole$ ,SS1 &an ,SS2. 3. Dengan menggunaka menggunakan n ,SS3 situs situs -ang kita kita buat akan akan lebi$ berkemb berkembang ang &an bisa bisa lebi$ interakti) &engan pengunjung. !. ;isa ;isa meng mengur uran angi gi ukur ukuran an )ile )ile -ang -ang &il &iloa oa& & &an &an lebi lebi$ $ ring ringan an se4ar se4araa otom otomati atiss mengurangi ban&it$ inboun&Eoutboun& situs. ,SS3 juga memiliki )asilitas untuk s$a&o (ba-angan" &ari suatu &iv la-out )itur transparasi gra&ien arna pa&a bor&er arna pa&a teks -ang &iseleksi )itur skala skala untuk untuk memper memperke4 ke4il il atau memper memperbesa besarr la-out la-out kolom kolom pa&a pa&a teks teks &an )itur )itur gra&ien pa&a ba4kgroun&.,SS3 tak ber&eba jau$ &engan tingkattingkat sebelumn-a $an-a saja memiliki per)orma st-le -ang jau$ lebi$ baik &an tamba$an beberapa ii<br />
<br />
stan&ar )ungsi -ang lebi$ menarik. Setela$ 3, mengeluarkan stan&ar untuk ,SS3 ban-ak pengembang eb broser men4oba menga&opsi ,SS3 pa&a broern-a. %asingmasin %asingmasing g pengembang pengembang eb broser men&e)inisikan men&e)inisikan meto&e meto&e sen&iri sen&iri &alam mengembangkan ,SS3 pa&a eb broser mereka. ;eberapa &ari pro&-usen eb broser menetapkan aturan untuk menggunakan ,SS3 seperti %oilla -ang menggunakan Pre)i=mo pa&a brosern-a untuk menterjema$kan suatu properti ,SS3 sama $aln-a &engan Sa)ari -ang menggunakan Per)i=ebkit &an &iikuti ole$ <pera &engan Pre)i=o. ;eberapa perbe&aan ,SS3 &an ,SS: 1.<br />
<br />
,SS3 ,SS3 bisa lebi$ &etail &etail untuk untuk men&ekl men&eklaras arasika ikan n objek -ang -ang akan &iberik &iberikan an st-le. ,onto$n-a &i &alam objek Mblo4kuoteO bisa membuat (uote" &i aal &an ak$irn-a menggunakan )ont lebi$ besar &ari konten blo4kuote itu sen&iri.<br />
<br />
2.<br />
<br />
,SS3 ,SS3 ka-a ka-a akan akan )itur )itur untu untuk k anim animas asii &an &an e)ek e)ek untuk untuk te=t te=t atau atau objek objek -ang -ang sebelumn-a ti&ak bisa &ilakukan ole$ ,SS2E,SS2.1 &an bisa menggantikan peran gambar. Stan&ar eb 2. atau situs interakti) &an e)isien ber&asar &ari penggunaan ,SS.<br />
<br />
3.<br />
<br />
Dengan Dengan ,SS3 situs akan akan bisa lebi$ lebi$ berkemban berkembang g &an bisa bisa lebi$ interakti interakti)) lagi &engan pengunjung.<br />
<br />
!. ;isa ;isa menguran mengurangi gi ukuran ukuran )ile -ang &iloa &iloa& & &an lebi$ ringan ringan se4ara se4ara otomatis otomatis mengurangi ban&i&t$ inboun&Eoutboun& situs. '. ,SS3 ,SS3 tak berbe& berbe&aa jau$ jau$ &ari &ari tingka tingkatti ttingk ngkat at sebelumnsebelumn-a a $an-a saja memilik memilikii per)orma st-le -ang jau$ lebi$ baik &an tamba$an beberapa )ungsi -ang menarik.<br />
<br />
ii<br />
<br />
. 7avaS 7avaS4ri 4ript pt A&ala$ ba$asa A&ala$ ba$asa skrip skrip -ang populer &i internet&an internet&an &apat bekerja &i sebagian besar penjelaja$ eb populer eb populer seperti #nternet 9=plorer (#9" (#9" %oilla ire)o= ire)o= Nets4ape &an <pera.. Ko&e 7av <pera 7avaS4r aS4rip iptt &apat apat &isis isisip ipk kan &alam alam $a $ala lama man neb menggunakan tagS,0#P/. tagS,0#P/. ba$asa pemrograman berbasis prototipe -ang berjalan &isisi klien. 7ika kita berbi4ara &alam konteks eb se&er$anan-a kita &apat mema$ami 7avaS4ript sebagai ba$asa pemrograman -ang berjalan k$usus untuk &ibroser atau $alaman eb agar $alaman eb menja&i lebi$ $i&up. Kalau &ili$at &ari suku katan-a ter&iri &ari ari &ua suk suku kata kata -aitu aitu 7ava 7ava &an &an S4ri S4ript pt.. 7ava 7ava a&ala$ a&ala$ ;a$asa ;a$asa pemrog pemrogram raman an berorientasi objek se&angkan s e&angkan S4ript a&ala$ serangkaian instruksi program.7avas4ript merupakan merupakan ba$asa ba$asa scripting -ang &igunakan &igunakan untuk membuat aplikasi eb si)atn-a si)atn-a client-side se$ingga client-side se$ingga &apat &iola$ langsung &i broser tanpa $arus ter$ubung keserver terlebi terlebi$ $ &a$ulu &a$ulu.. alaup alaupun un namannaman-aa menggu menggunak nakan an kata H7avaI H7avaI 7avas4r 7avas4ript ipt ti&ak ti&ak ber$ubungan &engan ba$asa pemprograman java meskipun ke&uan-a memiliki kemiripan &alam $al s-nta= -ang meniru ba b a$asa ,. Kegunaan Kegunaan utama 7avaS4ript a&ala$ untuk untuk menuliskan menuliskan )ungsi -ang &isisipkan ke&alam /%5 baik se4ara langsung &isisipkan maupun &iletakan ke )ile teks &an &i link link &ari &ari &oku &okume men n /%5 /%5.. Se4a Se4ara ra )ung )ungsi sion onal al 7ava 7avaS4 S4ri ript pt &igu &iguna naka kan n untu untuk k menmen-e&i e&iak akan an akses akses s4rip s4riptt pa&a pa&a obje objek k -ang -ang &ibe &ibena namk mkan an (emb (embe& e&&e &e&" &".. ,ont ,onto$ o$ se&er$ se&er$ana ana &ari &ari penggu penggunaa naan n 7avaS4 7avaS4rip riptt a&ala$ a&ala$ membuk membukaa $alaman $alaman pop up )ungsi )ungsi vali&asi vali&asi pa&a )orm sebelum &ata &ikirimkan ke server server meruba$ image kursor ketika melea meleati ti objek objek tertent tertentu u &an lain lain.7a lain.7avaS vaS4ri 4ript pt pa&a pa&a aal aal perkem perkemban bangan gannn-aa ber)ungsi untuk membuat interaksi antara user &engan situs eb menja&i me nja&i lebi$ 4epat 4e pat tanpa $arus menunggu pemrosesan &i web server . Sebelum javascript Sebelum javascript setiap interaksi &ari user $arus &iproses ole$ web server . Akan tetapi karena si)atn-a -ang &ijalankan &i sisi 4lient -akni &i &alam eb broser -ang &igunakan ole$ pengunjung situs user sepenu sepenu$n$n-aa &apat &apat mengon mengontro troll ekseku eksekusi si 7avaS4r 7avaS4ript ipt.. ampir ampir semua semua eb brose broser r men-e&ia men-e&iakan kan )asilit )asilitas as untuk untuk mematik mematikan an 7avaS4 7avaS4ript ript atau atau ba$kan ba$kan mengub menguba$ a$ ko&e ko&e 7avaS 7avaS4r 4ript ipt -ang -ang a&a. a&a. Se$i Se$ing ngga ga kita kita ti&ak ti&ak bisa bisa berg bergan antu tung ng sepen sepenu$ u$nn-aa kepa kepa&a &a 7avaS4ript. Kelebi$an pemrograman java s4ript :<br />
<br />
ii<br />
<br />
1. 5ebi 5ebi$ $ 4epat 4epat &ika &ikaren renak akan an &ile &iletak takka kan n &i /%5 /%5 &an &an &apa &apatt lang langsu sung ng &i4o &i4oba ba &i broser. 2. %u&a$ %u&a$ karena karena memiliki memiliki se&ikit se&ikit sintaks sintaks -ang -ang lebi$ lebi$ mu&a$ mu&a$ &imengert &imengerti. i. 3. /erbu /erbuka ka (Plat) (Plat)orm orm #n&e #n&epen pen&en &ent". t". !. kurann-a kurann-a sangat sangat ke4il ke4il &iban&ing &iban&ingkan kan &engan &engan pemrog pemrograman raman java. java. Se&angkan untuk kekurangan &ari ba$asa pemrograman ba$asa java s4ript a&ala$: 1. /i&ak /i&ak &apat &apat membu membuat at program program apli aplikas kasii sen&iri sen&iri 2. <bjek -ang &ikelola$ &ikelola$ ole$ java s4ript s4ript sangat terbatas terbatas 3. S4ri S4ript pt -ang ang &apa &apatt &isa &isali lin n &ari &ari eb eb bro brose serr. Se$i Se$ing ngga ga seti setiap ap oran orang g &apa &apatt menggunakan program java s4ript -ang tela$ kita buat.<br />
<br />
,onto$ membuat /abel menggunakan 7avas4ript: <html> <head> <title>$&ript 0ederhana Memb*at Tabel men*na%an Ga#a$&ript <meta httpe?*i#:ContentType &ontent:te8t/html &har$et:i$oIIJ>
<$&ript type:te8t/ja#a$&ript> do&*ment(.rite 4
Memb*at Tabel Men*na%an Ga#a$&ript7 do&*ment(.rite 4
7 do&*ment(.rite 4tabel $at* %olom $at* bari$ 7 do&*ment(.rite4
7 do&*ment(.rite4| $at* %olom | 7
ii
do&*ment(.rite4
|---|
7 <$&ript type:te8t/ja#a$&ript> do&*ment(.rite 4
7 do&*ment(.rite 4tabel d*a %olom 7 do&*ment(.rite4
7 do&*ment(.rite4| %olom pertama | 7 do&*ment(.rite4,olom ,ed*a |
|---|
7 do&*ment(.rite4
7 <$&ript type:te8t/ja#a$&ript> do&*ment(.rite 4
7 do&*ment(.rite 4tabel d*a bari$ 7 do&*ment(.rite4
7 do&*ment(.rite4| bari$ pertama | 7 do&*ment(.rite4
|---|
| bari$ %ed*a | 7 do&*ment(.rite4
|---|
7
<$&ript type:te8t/ja#a$&ript> do&*ment(.rite 4
7 do&*ment(.rite 4tabel d*a bari$ d*a %olom 7 do&*ment(.rite4
7 do&*ment(.rite4| bari$ pertama | 7 do&*ment(.rite4bari$ %ed*a |
|---|
7 do&*ment(.rite4
| bari$ pertama | 7 do&*ment(.rite4bari$ %ed*a |
|---|
7 do&*ment(.rite4
7
ii
