Tugas Praktek WEB

5/16/2018 Tugas Praktek WEB - slidepdf.com

http://slidepdf.com/reader/full/tugas-praktek-web 1/43

1. HTML

HTML adalah sebuah bahasa baru yang akan menjadi upgrade dan perbaikan dari

generasi bahasa web sebelumnya yang tentunya kali ini, HTML 5 akan banyak mengalami

upgrade pada spesifikasi Web presentation, tidak menutup kemungkinan, kalau HTML 5 juga

akan menjadi pengganti game untuk Web application development, walaupun sebelumnya

sudah mendukung sistem plug-in-dengan Internet application (RIA) yang kaya akan

teknologi seperti Adobe Flash, Microsoft Silverlight, dan Sun JavaFX.

World Wide Web Consortium (W3C) baru baru ini membuat proposal mengenai

spesifikasi HTML 5 hal ini dipicu dari pengembangan akan aplikasi web yang terus

berkembang sesuatu yang tidak dapat di penuhi oleh HTML pada masa saat ini. Dengan kata

lain HTML 5 nantinya akan menghilangkan gap antara Flash, Silverlight, dan JavaFX yang

sedang mengisi pangsa pasar web application.

Sebagaimana yang kami ketahui InfoWorld Test Center telah melakukan penelitian

mengenai teknologi baru pada Microsoft Silverlight 3 dan Adobe Flex 4, Flash 4, dan juga

Catalyst rich Internet application. HTML 5 juga nantinya akan menyandang posisi yang sama

misalnya nantinya spesifikasi HTML 5 mampu mendongkrak kemampuan web untuk

menangani video dan graphic di Web. Teknologi HTML 5 yang disebut sebut dengan

Canvas, digunakan untuk 2-D drawing pada sebuah Web page akan menjadi andalan bagi

pengguna web yang suka mendesain web kelas berat hal ini telah di coba oleh Apple, Google,

dan Mozilla. “Beberapa fitur dari HTML 5 seperti Canvas, local storage, dan Web Worker

akan mengizinkan kita untuk melakukan hal yang lebih banyak melalui browser” ungkap Ben

Galbraith, yang merupakan co-founder dari Ajaxian Web site dan co-director dari developertools di Mozilla. Local storage akan mengizinkan anda untuk bekerja dengan menggunakan

walaupun koneksi internet anda ngedrop anda masih dapat bekerja, ini akibat dari the “next

generation” applications yang mampu menjalankan task lewat background, ungkapnya.

Web applications tentu saja akan lebih menarik, kata Ian Fette, project manager dari

Google untuk Chrome browser: “Web application akan bekerja lebih cepat dan akan

memberikan user experience yang lebih baik dan menghilangkan batasan antara online apps

dan desktop apps”. http://hendynoize.net



Jadi bagi anda para web developer, programmer, bersiap siaplah untuk mengupgrade

pengetahuan anda karena pemrograman HTML akan ber evolusi di waktu dekat ini. Tentu

saja, kehadiran HTML 5 ini menimbulkan ketakutan bagi para developer flash, silverlight dan

JavaFX, karena sebagian fitur utama yang mereka miliki telah sanggup di adopsi oleh HTML

HTML5 adalah sebuah bahasa marka untuk menstrukturkan dan menampilkan isi dari

Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari

HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada

tahun 1997[1]) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama

pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung

teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh

mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web

Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis

dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan

HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan

secara berbeda-beda oleh banyak perangkat lunak]] pembuat web.

A. Vidio

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari

Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari

HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada

tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama

pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung

teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh

mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web

Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis

dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan

HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan

secara berbeda-beda oleh banyak perangkat lunak pembuat web.

http://id.wikipedia.org/wiki/Konsortium_Waring_Wera_Wanua

http://id.wikipedia.org/wiki/HTML

http://id.wikipedia.org/wiki/Juni_2011

http://id.wikipedia.org/wiki/HTML5

http://id.wikipedia.org/wiki/1997

http://id.wikipedia.org/wiki/1990

http://id.wikipedia.org/wiki/HTML

http://id.wikipedia.org/wiki/Internet

http://id.wikipedia.org/wiki/Waring_Wera_Wanua



Berikut script yang digunakan untuk menampilkan video pada html 5

<!DOCTYPE HTML>

<html>

<body>

<video width="320" height="240" controls="controls">

<source src="link video format mp4" type="video/mp4" />

<source src="link video format ogg" type="video/ogg" />

<source src="link video format webm" type="video/webm" />

Your browser does not support the video tag.

</video>

</body>

</html>

2. Bingung biasanya tentang code html buat menampilkan flash dalam web. Berikut kode

html yang akan digunakan dalam menampilkan flash.

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”

codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version

=7,0,19,0” width=”135” height=”123” title=”s”>

<param name=”movie” value=”">

<param name=”quality” value=”high”>

<embed src=”http://alamat.flash.com/yang/akan.di/tampilkan.flv” quality=”high”

pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-

shockwave-flash” width=”135” height=”123”></embed>

</object>

Sumber Code Html Cara Memasukkan Video Dalam Html | Mawar Hitam

http://www.mawarhitam.info/tag/code-html-cara-memasukkan-video-dalam-html





















http://www.mawarhitam.info/tag/code-html-cara-memasukkan-video-dalam-

html#ixzz1r8I2kjmW

3. Kali ini saya akan membahas mengenai HTML 5, HTML 5 merupakan versi terbaru dari

html dimana ada beberapa tag-tag baru yang disuntikkan didalamnya.

Anda pasti akan menjumpai tag seperti <article>, <header>, <footer>, dll.. dan tentunya yang

paling mencolok dari itu semua adalah tersedianya fitur pemutar Video / Audio..

Kali ini, saya ingin men-share mengenai pemutar Audio / Video.. mengapa?.. karena menurut

saya, kedua fitur tersebut memang yang paling menarik..

pada html versi sebelumnya, bagaimana caranya agar kita dapat memutar video didalam

web?.. Wah.. ribet banget deh.. kita harus menggunakan tag <embed embed wewewe

gombel> walah.. wewe gombel dibawa-bawa.. piye toh?..

Nah, pada html 5, cukup kita menggunakan tag <audio> untuk memutar audio/suara dan

<video> untuk memutar video.

Format dasarnya seperti berikut :

view plainprint?

1. <audio controls="controls">

2. <source src="NamaLagu.mp3" type="audio/mp3">

3. </source>

sedangkan untuk Video :

view plainprint?

1. <video controls="controls">

2. <source src="movie.ogg" type="video/ogg" />

3. <source src="movie.mp4" type="video/mp4" />

4. <source src="movie.webm" type="video/webm" />

5. Web Browser tidak mendukung tag Video HTML 5

6. </video>

http://dotcom-ilmu.blogspot.com/2011/11/memasukan-audio-dan-video-pada-html-5.html










Oh iya, didalam HTML 5, Video hanya mengenal 3 jenis format yaitu Ogg, MP4, dan

WebM. jadi pastikan format yang ingin ditampilkan adalah demikian ya. Untuk type format

jenis lain silakan tinggal di convert aja ke format yang didukung HTML 5.

Berikut keterangan Format Video :

- Ogg = File Ogg dengan Video Codec Theora dan Audio Codec Vorbis.

- MPEG4 = file MPEG 4 dengan Video Codec H.264 dan Audio Codec AAC.

- WebM = file WebM dengan Video Codec VP8 dan Audio Codec Vorbis.

Berikut adalah contoh penggunaan dalam html untuk memainkan fitur Audio :

view plainprint?

1. <title> HTML 5 </title>

2. <h4>7 Ikans (OVJ) - Andeca andeci</h4><audio controls="controls">

3. <source src="7 Ikans (OVJ) - Andeca andeci.mp3" type="audio/mp3">

4. </audio>

Dan Berikut adalah contoh penggunaan dalam html untuk memainkan Video :

view plainprint?

1. <title> HTML 5 </title>

2. <h4>7 Ikans (OVJ) - Andeca andeci</h4><video controls="controls">

3. <source src="7 Ikans (OVJ) - Andeca andeci.mp4" type="video/mp4">

4. </video>

Ada kelemahan dari HTML5 ini, yaitu belum semua web browser mendukung HTML 5, tapi

tunggu saja ke depannya pasti web browser akan mendukung HTML versi ini, untuk mencobanya pastikan web browser Anda adalah :

- Internet Explorer (IE) versi 9.0+

- Firefox versi 3.5+

- Opera versi 10.5+

- Google Chrome versi 5.0+

- Safari versi 3.0+

Namun, disini saya mencobanya dengan menggunakan Google Chrome dan semua tanpa












kendala.

Semoga postingan ini dapat memberikan manfaat yang sebesar-besarnya untuk Anda..

Label: HTML 5, PHP

5. Wah saya baru inget punya janji untuk bahas tentang HTML 5 maaf ya , sekarang

saya coba mulai dasar – dasar penggunaan tag HTML 5 itu sendiri. Kali kita mulai

bahas tentang tag

6. <audio></audio>

7. Seperti yang di bahas pada artikel saya yang sebelumnya tentang apa saja yang perlu

di ketahui pada HTML 5 saya sudah menjelaskan prinsip dasar dari HTML 5 dan

bagaimana penggunaannya, kali ini kita akan bahas langsung sambil praktek jadi bisa

lebih jelas .

8. Bagi kebanyakan coder masih agak ragu dalam penggunaan HTML 5 terutama untuk

fungsi – fungsi baru, yang dikhawatirkan adalah tag – tag ini tidak dapat berjalan

sebagaimana mestinya pada browser – browser tertentu terutama browser kawakan ,

kali ini saya akan berikan semacam sebuah fallback yang akan di panggil ketika tag

<audio> tidak dapat di jalankan oleh browser.

9. <audio>

10.

11. <object type="application/x-shockwave-flash"

12. data="player_mp3_mini.swf" width="200" height="20">

13. <param name="movie" value="player_mp3_mini.swf" />

14. <param name="bgcolor" value="#085c68" />

15. <param name="FlashVars" value="mp3=test.mp3" />

16. <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"

17. height="20" name="movie" align=""

18. type="application/x-shockwave-flash" flashvars="mp3=test.mp3">

19. </embed>

20. </object>

21.

22. </audio>

http://blog.roliesthebee.com/2011/09/22/html-5-apa-saja-yang-perlu-di-ketahui/

http://blog.roliesthebee.com/2011/09/22/html-5-apa-saja-yang-perlu-di-ketahui/

http://dotcom-ilmu.blogspot.com/search/label/PHP

http://dotcom-ilmu.blogspot.com/search/label/HTML%205



23. Pada contoh tag itu bisa anda lihat ada tag <object> yang biasa di gunakan untuk

menampilkan player audio atau flash di website, bungkus tag tersebut kedalam tag

<audio> terlebih dahulu.

24. Anda dapat memasukan berpuluh-puluh baris tag <source> di dalam tag <audio>

anda, karena secara prinsip dasarnya browser akan mengeksekusi tag selanjutnya jika

format file pada tag <source> sebelumnya tidak di dukung oleh browser tersebut.

25. <audio>

26. <source src="test.mp3" type="audio/mpeg" />

27. <source src="test.ogg" type="audio/ogg" />

28.








36.

type="application/x-shockwave-flash" flashvars="mp3=test.mp3">37. </embed>

38. </object>

39.

40. </audio>

41. Agar lebih aman, kita harus menambahkan fallback ke Flash audio player , ini untuk

jaga – jaga kalau browser tidak mendukung format manapun yang anda berikan.

Sebagai contoh, Firefox 3.5 hanya mendukung <audio> dengan format “Ogg”, tapi

mungkin anda hanya memiliki format “mp3”.

42. Catatan: Ada banyak tools dan converter online yang dapat anda gunakan untuk

merubah format mp3 ke ogg atau sebaliknya, anda bisa mencarinya melalui google.

43. <audio>


45.











54. </embed>

55. </object>

56.

57. </audio>

58.

59. <div id="player_fallback"></div>

60. <script>

61. if (document.createElement('audio').canPlayType) {

62. if (!document.createElement('audio').canPlayType('audio/mpeg')) {

63. swfobject.embedSWF(

64.

"player_mp3_mini.swf",65. "player_fallback",

66. "200",

67. "20",

68. "9.0.0",

69. "",

70. {"mp3":"test.mp3"},

71. {"bgcolor":"#085c68"});

72. }

73. }

74. </script>

75. Agar lebih mudah saya menggunakan librari SWFObject untuk memasukan Flash

Player melalui Javascript. Untuk mengambil librarinya anda bisa menggunakan

Google AJAX Libraries API dengan cara memasukan baris ini di header website

anda.

http://code.google.com/apis/ajaxlibs/

http://code.google.com/p/swfobject/



76. <script src="http://www.google.com/jsapi"></script>

77. <script>google.load("swfobject", "2.2");</script>

78. <audio id="audio_with_controls" controls>


80.









89. </embed>

90. </object>

91.

92. </audio>

93.


95. <script>



98. ... SWFObject script line here ...

99. document.getElementsById('audio_with_controls').style.display = 'none';

100. }

101. }

102. </script>

103. Atau anda bisa membuat player anda sendiri dengan menggunakan CSS dan

Javascript seperti ini :

104. <audio id="audio">


106.











115. </embed>

116. </object>

117. 118. </audio>

119.


121. <div id="player" style="display: none">

122. <button onClick="document.getElementById('audio').play()">Play</button>

123. <button onClick="document.getElementById('audio').pause()">Pause</button>

124.

</div>125.

126. <script>



129. ... SWFObject script lines here ...

130. } else { // HTML5 audio + mp3 support

131. document.getElementById('player').style.display = 'block';

132. }

133. }

134. </script>



2. CSS

CSS (Cascading Style Sheets) adalah: kumpulan kode-kode yang berurutan dan saling

berhubungan untuk mengatur format / tampilan tata letak sebuah halaman web. CSS ini

bersifat embeded pada tag HTML yang artinya menempel atau melekat pada tag HTML.

Sebelum CSS lahir dan berkembang, web programer hanya menggunakan tag <table> pada

HTML untuk mengatur tata letak tampilan.

Keuntungan menggunakan CSS :

· Untuk mengatur dan memperindah tampilan web (lebih rapi).

· Lebih praktis dan menghemat penggunaan tag yang berulang-ulang.

· Bisa digunakan pada website atau webpage yang lain, misalnya website kita

mempunyai 5 halaman (webpage), maka kita tidak perlu membuat pengaturan tampilan atau

menulis ulang code-code untuk mengatur tata letak tampilan pada masing-masing

halaman/page sebanyak lima kali. Kita bisa memanfaatkan code yang sudah ada dengan

memanggil tag CSS yang dibuat pada file terpisah (file.css).

CSS3 tidak sama dengan CS(S-nya 3 kali) atau CSSSS (Cascading Style Sheets

Sheets Sheets). CSS3 merpukan generasi ke-3 dari perkembangan CSS sebelumnya. Jadi

pada dasarnya, pengertian CSS3 sama saja dengan pengertian CSS generasi paling awal.

Hanya saja, beberapa standar baru untuk CSS3 menggantikan CSS2 dan mungkin akan

membuat kiat dapat bereksplorasi lebih dalam lagi untuk membuat tampilan situs lebih

menarik dan mulai meninggalkan situs yang membuat menunggu dengan loading yang lama.

Beberapa kelebihan yang ada pada CSS3 :

· CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style.

Contohnya di dalam objek ‘blockquote’ bisa membuat (quote) di awal dan akhirnya

menggunakan font lebih besar dari konten blockquote itu sendiri.



· CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang sebelumnya

tidak bisa dilakukan oleh CSS2/CSS2.1, dan bisa menggantikan peran gambar. Standar web

2.0 atau situs interaktif dan efisien berdasar dari penggunaan CSS.

· Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan

pengunjung.

· Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis

mengurangi bandwidth inbound/outbound situs.

CSS3 memiliki fasilitas untuk shadow dari suatu div layout, fitur transparansi, gradien warna

pada border, warna pada teks yang diseleksi, fitur skala memperkecil atau memperbesar

layout, kolom pada teks, dan fitur gradien pada background.

Pekembangan CSS3 Seperti Apa?

Dari hasil pengamatan saya pada beberapa situs yang sudah menerapkan CSS3 + HTML5,

saya beranggapan bahwa fungsi jQuery sepenuhnya akan tergantikan oleh CSS3. Perkiraan

ke depan, tidak ada lagi web yang menggunakan jQuery karena sizenya lebih besar dibanding

CSS3. Bukan cuma jQuery, saat ini penggunaan flash juga mulai terakusisi dengan semakin

berkembangnya CSS3. Menurut saya, CSS3 merupakan bahasa pemrograman olah digital

gambar/citra tingkat tinggi karena dengan CSS3, anda bisa menggambar Tokoh Kartun

Doraemon seperti contoh berikut :

1. CSS Font

CSS Font digunakan untuk mengatur font dalam tampilan halaman website. CSS Font antara

lain :

Font digunakan untuk mengatur font secara umum, penulisan perntah font adalah sebagai

berikut :

font: normal 12px/14px Arial, helvetica, sans serif;

- normal untuk menentukan tebal atau tipisnya font

- 12px/14px untuk menentukan ukuran terkecil font dan ukuran maximalnya

- Arial, helvetica dst digunakan untuk memilih jenis font yang akan digunakan



Font-family digunakan untuk menentukan jenis font yang akan digunakan

Font-size digunakan untuk menentukan ukuran font

Font-style digunakan untuk mentukan style dari font yang kita gunakan, misalnya italic atau

normal

Font-weight juga digunakan untuk menentukan tebal tipisnya font yang dipakai

2. CSS Background

Digunakan untuk mengatur background suatu area atau bagian dalam halaman website.

Berikut penjelasan dari beberapa perintah css backgroundbackground digunakan untuk mengatur background secara umum, yaitu bisa berbentuk

background gambar atau background warna. Perhatikan contoh berikut :

background:blue;

background:url(images/gambar.gif);

background-attachment digunakan untuk mengatur posisi background gambar pada halaman

website, dimana background gambar dapat di set statis, sehingga walaupun pengunjung

menggerakan scroll browser ke atas atau ke bawah, background akan tetap pada posisinya.

Background-position digunakan untuk mengatur posisi background gambar. Dimana

background gambar dapat diset pada bagian atas, bawah, kanan atau kiri pada sebuah area

tertentu

Background-repeat digunakan untuk mengatur perulangan background gambar

3. CSS Border atau garis tepi

Berikut penjelasan dari beberapa macam perintah css border:

Border digunakan untuk membuat garis tepi pada sebuah area dalam halaman website.

Perintah yang umum digunakan antara lain:

Border: #warna ukuran tipe_border

perhatikan contoh berikut :

Border: silver 1px solid;

perlu diingat bahwa perintah diatas akan membuat border keseluruha, yaitu border atas,

kanan, bawah dan juga border kiri. Jika kita hanya memerlukan border pada bagian tertentu,

gunakan perintah



border-top, border-right , border-bottom dan border-left, contoh border-bottom:#ff9900

2px solid;

Border

Border adalah salah satu property css, border memiliki fungsi untuk memberi

batas/garis(seperti) pada suatu bidang/box/tag html.

Garis atau batas ini bisa kita tentukan bentuk/tampilan atau stylenya, seperti warna,

ketebalan, serta style/gaya.

Property Border Antara Lain

· Border-color

· Border-style

· Border-width

Property Border Individu

· Border-top-style

· Border-top-color

·

Border-top-width· Border-rigth-style

· Border-right-color

· Border-right-width

· Border-bottom-style

· Border-bottom-color

· Border-bottom-width

· Border-left-style

· Border-left-color

· Border-left-width

Property Border Shorthand(Singkat)

· Border

· Border-top

· Border-right

· Border-bottom



· Border-left

Value Border-Style

Antara lain

· Solid

· Double

· Dotted

· Dashed

· Groove

· Ridge

· Inset

· Outset

Value Border-Color

Antara lain

· Hex color

· Red, blue, pink, silver, dan lain lain

· Rgb color

Value Border-Width

· Angka(panjang) dalam px misal (1px, 2px, 3px, 4px dst)

· Medium

Khusus untuk border, dan border individu kita akan bahas secara singkat saja. ini karena

penggunaanya boros lebih size, nantinya kita akan menbahas border shorthand secara detail

untuk menghemat size dan waktu.

Contoh border dalam inline style

Border-Color, Border-Style, Border-Width

Contoh code1

<div style="background-color:blue;width:300px;border-style:solid;border-color:red;border-

width:5px;">

a n g g a p

d i s i n i

a d a l a h



k o n t e n t / i s i

</div>

Tampilan

a n g g a p

d i s i n i

a d a l a h


Contoh code2

<div style="background-color:blue;width:300px;border-style:double;border-

color:pink;border-width:3px;">

a n g g a p

d i s i n i

a d a l a h


</div>

Tampilan

a n g g a p

d i s i n i

a d a l a h


Contoh code3

<div style="background-color:blue;width:300px;border-style:dotted;border-

color:#00ff00;border-width:7px;">

a n g g a p

d i s i n i

a d a l a h


</div>

Tampilan

a n g g a p

d i s i n i



a d a l a h


Keterangan

· Penulisan style border sperti diatas sangat tidak saya sarankan

· Yah, karena kita harus menulis propertynya satu-persatu

· Dibawah kita akan membahas versi shorthand(singkatnya)

Border-Top-Style, Border-Bottom-Width, Border-Right-Color Dan Lain-Lain

Contoh code1

<div style="background-color:blue;width:300px;height:300px;border-top-style:solid;border-

top-color:red;border-top-width:5px;">

a n g g a p

d i s i n i

a d a l a h


</div>

Tampilan

a n g g a p

d i s i n i

a d a l a h


Contoh code2

<div style="background-color:blue;width:300px;height:300px;border-top-style:solid; border-

top-color:red;border-top-width:5px;border-right-style:dotted;border-right-color:silver;

border-right-width:8px;">

a n g g a p

d i s i n i

a d a l a h


</div>

Tampilan



a n g g a p

d i s i n i

a d a l a h


Contoh code3

<div style="background-color:pink;width:300px;height:300px;border-top-style:solid;border-

top-color:red; border-top-width:5px;border-right-style:dotted;border-right-

color:silver;border-right-width:8px;border-bottom-style:double; border-bottom-

color:black;border-bottom-width:4px;">

a n g g a p

d i s i n ia d a l a h


</div>

Tampilan

a n g g a p

d i s i n i

a d a l a h


Keterangan

· Penulisan style border sperti diatas sangat tidak saya sarankan

· Yah, karena kita harus menulis propertynya satu-persatu

· Dibawah kita akan membahas versi shorthand(singkatnya)

Shorthand Border

Penulisan border dengan teknik shorthand ini sangat dianjurkan, selain efisian kita juga ngga

perlu nulis sylenya panjang-panjang

Penulisan property border shorthand(singkat)

Seperti ini

· Border

· Border-bottom

· Border-right



· Border-bottom

· Border-left

Dengan teknik ini, kita sudah tidak mengenal property border-top-style, border-bottom-width,

border-right-color dan lain-lain

Value border dengan teknik shorthand seperti ini

· Value border-width(spasi)value border-style(spasi)value border-color

Border

Border:value; fungsinya untuk membuat sekeliling bidang/tag/box memiliki style garis

pinggir, sedangkan value masing-masing sisi akan bernilai sama!

Contoh kode ini

<div style="background-color:blue;width:300px;height:300px;border-style:solid;border-

color:red;border-width:5px;">

a n g g a p

d i s i n i

a d a l a h


</div>

Jika dibuat dengan teknik shorthand akan menjadi seperti ini

<div style="background-color:blue;width:300px;height:300px;border:5px solid red;">

a n g g a p

d i s i n i

a d a l a h


</div>

Sedangkan tampilanya akan sama seperti ini

a n g g a p

d i s i n i

a d a l a h


Border-Top



Border-top:value; fungsinya untuk membuat style garis pinggir bagian atas!

Contoh kode ini

<div style="background-color:blue;width:300px;height:300px;border-top-style:solid;border-

top-color:red;border-top-width:5px;">

a n g g a p

d i s i n i

a d a l a h


</div>


<div style="background-color:blue;width:300px;height:300px;border-top:5px solid red;">

a n g g a p

d i s i n i

a d a l a h


</div>


a n g g a p

d i s i n i

a d a l a h


Border-Right

Border-right:value; fungsinya untuk membuat style garis pinggir bagian kanan!

Contoh kode ini

<div style="background-color:blue;width:300px;height:300px;border-r ight-

style:double;border-right-color:green;border-right-width:6px;">

a n g g a p

d i s i n i

a d a l a h




</div>


<div style="background-color:blue;width:300px;height:300px;border-r ight:6px double

green;">

a n g g a p

d i s i n i

a d a l a h


</div>


a n g g a p

d i s i n i

a d a l a h


Border-Bottom

Border-top:value; fungsinya untuk membuat style garis pinggir bagian bawah!

Contoh kode ini

<div style="background-color:blue;width:300px;height:300px;border-bottom-

style:solid;border-bottom-color:red;border-bottom-width:5px;">

a n g g a p

d i s i n i

a d a l a hk o n t e n t / i s i

</div>


<div style="background-color:blue;width:300px;height:300px;border-bottom:5px solid

red;">

a n g g a p

d i s i n i



a d a l a h


</div>


a n g g a p

d i s i n i

a d a l a h


Border-Left

Border-top:value; fungsinya untuk membuat style garis pinggir bagian kiri!

Contoh kode ini

<div style="background-color:blue;width:300px;height:300px;border-left-style:solid;border-

left-color:red;border-left-width:5px;">

a n g g a p

d i s i n i

a d a l a h


</div>


<div style="background-color:blue;width:300px;height:300px;border-left:5px solid red;">

a n g g a p

d i s i n i

a d a l a hk o n t e n t / i s i

</div>


a n g g a p

d i s i n i

a d a l a h




Contoh Border Dalam Internal Style Kompleks

Perhatikan code dibawah

<html>

<head>

<title>border css</title>

<meta content="indam url:http://www.indaam.com" name="author"/>

<style type="text/css">

#misalborder1{

border-style:solid;

border-color:blue;

border-width:5px;}

#misalborder2{

border-style:double;

border-color:#000000;

border-width:14px;

}

#misalborder3{

border-top-style:double;

border-top-color:#000000;

border-top-width:medium;

border-right-style:dotted;

border-right-color:silver;

border-right-width:medium;

}

#misalborder4{

border-bottom-style:dashed;

border-bottom-color:#000000;

border-bottom-width:8px;

border-left-style:groove;

border-left-color:silver;

border-left-width:12px;

}



#misalborder5{

border-bottom-style:dashed;

border-bottom-color:#000000;

border-bottom-width:30px;

border-left-style:groove;

border-left-color:silver;

border-left-width:12px;

border-top-style:double;

border-top-color:#000000;

border-top-width:medium;

border-right-style:dotted;

border-right-color:silver;

border-right-width:12px;

}

#misalborder6{

border:12px outset green;

}

#misalborder7{

border-top:12px inset green;

}

#misalborder8{


border-right:16px ridge green;

}

#misalborder9{


border-right:16px ridge blue;

border-bottom:12px groove black;

border- left:16px outset pink;

}

.anggapsebagaikotak{

background-color:red;

height:150px;

width:150px;



margin:10px;

padding:5px;

float:left;

}

/*salam www.indaam.com*/

</head>

</style>

<body>

<div class="anggapsebagaikotak" id="misalborder1">

isi/content isi/content isi/content isi/content

</div>





















</div>







</div>



<div style="clear:both;"></div>

<br/><br/><br/>

<p>salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam

site</a></p>

</body>

</html>

Untuk melihat hasilnya

· Copy markup style diatas

· Paste ke notepad

· Save as (pilih all types) dengan nama contohbordercss.htm

· Jalankan(double c lick), atau

· Open with (firefox, ie, opera, safari, chrome)

· Silakan edit valuenya

· Letak valuenya antara : (titik dua) dan ;(titik koma)

· Selamat belajar

Note* jika anda membuat style pada suatu tag html(contoh div) lalu anda memberi nilai

width:300px; kemudian anda menambahkan border-width:20px, maka nilai width tag tadi

akan menjadi 340px. dalam hal ini border ikut memberi nilai width pada tag tadi!

Font

Kode CSS3 untuk menentukan jenis font

Mari kita lihat kode CSS3 untuk contoh di atas

<style>

@font-face

{

font-family: fontsaya;



src: url('dokumen/Legion_Slab.ttf');

}

#konten

{

font-family: fontsaya;

font-size: 15pt;

}

</style>

<div id="konten">

Tulisan ini menggunakan font: Legion_Slab.ttf<br>

Hai apa kabar, selamat datang di website codingwear,<br>

Di sini kita akan belajar bersama mengenai CSS, Javascript, PHP

</div>

Pada properti @font-face , pertama kita definisikan nama font family kita, misalnya saya

kasih nama fontsaya, nama font family ini sesuka hati kita.

Setalah itu kita definisikan sumber filenya, jika anda mengupload file font di server yang

berbeda, kita bisa menulisnya menjadi seperti: src:

url('http://www.desrizal.com/css3/Legion_Slab.ttf') .

Setelah kita definisikan nama font family dan sumber file font-nya di @font-face. saatnya

kita atur elemen website kita, seperti kode CSS biasa menggunakan font-family

Bacground

Properti CSS yang bisa digunakan untuk efek background adalah:

· background-color

· background-image

· background-repeat

· background-attachment

· background-position



Background Color (Warna Latar belakang)

Properti background-color biasanya digunakan untuk menentukan warna latar belakang pada

suatu elemen.

Kode:

<p style="background-color:yellow;">Ini adalah text yang mempunyai warna latar

belakang.</p>

Hasilnya:

Ini adalah text yang mempunyai warna latar belakang.

Penentuan jenis warna pada background-color bisa di tentukan dengan:

Nilai HEX, misalnya: “#ff0000”

Nilai RGB misalnya: “rgb(255,0,0)”

Nama warna dalam bahasa inggris, misalnya: “red”

Background Image (Gambar Latar Belakang)

Properti background-image digunakan untuk menampilkan gambar sebagai latar belakang

pada suatu elemen.

Secara default, gambar akan tampil berulang dan menutupi seluruh bagian pada elemen.

Kode:

<p style="height: 35px; background-image:

url('http://alamindawa.com/code/icon_true_small.png');">Ini adalah text yang

mempunyai latar belakang gambar.</p>

Hasilnya:

Ini adalah text yang mempunyai latar belakang gambar.

Background Image Repeat

Gambar background bisa diatur hanya tampil berulang untuk vertikal atau horisontal saja.

Vertikal:



<p style="height: 40px; background-repeat: repeat-y; background-image:

url('http://alamindawa.com/code/icon_true_small.png');">Ini adalah text yang mempunyai

latar belakang gambar mengulang vertikal.</p>

Hasilnya:

Ini adalah text yang mempunyai latar belakang gambar mengulang vertikal.

Horisontal:

<p style="height: 40px; background-repeat: repeat-x; background-image:

url('http://alamindawa.com/code/icon_true_small.png');"><strong>Ini adalah text yang

mempunyai latar belakang gambar mengulang horisontal.</strong></p>

Hasilnya:

Ini adalah text yang mempunyai latar belakang gambar mengulang horisontal.

Background Image Position (Posisi gambar latar belakang)

Biasanya digunakan untuk mengatur posisi tampil dari gambar latar belakang.

<p style="height: 40px; background- image:

url('http://alamindawa.com/code/icon_true_small.png'); background-repeat: no-

repeat;background-position: 100px;">Mengatur posisi gambar latar belakang 100px dari

kiri.</p>

Hasilnya:

Mengatur posisi gambar latar belakang 100px dari kiri.

Mempersingkat properti background

Seperti yang dapat Anda lihat dari contoh di atas, ada banyak properti yang digunakan untuk

menentukan efek backround.

Dengan mempersingkat kode, kita dapat menentukan semua properti dalam satu properti

tunggal.

Contoh:



body {background:#ffffff url('http://alamindawa.com/code/icon_true_small.png') no-repeat

right top;}

Keterangan:

· background-color (warna)

· background-image (gambar)

· background-repeat (pengulangan gambar)

· background-attachment

· background-position

Contoh pada dokumen HTML lengkap:

<html>

<head>

<style type="text/css">

p.background_color

{

background-color:yellow;

}

p.background_image

{

height: 35px;

background-image: url('http://alamindawa.com/code/icon_true_small.png');

}

p.repeat_vertikal

{

height: 40px;

background-repeat: repeat-y;


}

p.repeat_horisontal

{

height: 40px;

background-repeat: repeat-x;




}

</style>

</head>

<body>

<p class="background_color">Ini adalah text yang mempunyai warna latar belakang.</p>

<p class="background_image">Ini adalah text yang mempunyai latar belakang gambar.</p>

<p class="repeat_vertikal">Ini adalah text yang mempunyai latar belakang gambar

mengulang vertikal.</p>

<p class="repeat_horisontal">Ini adalah text yang mempunyai latar belakang gambar

mengulang horisontal.</p>

</body>

</html>

Contoh diatas sekedar contoh, silahkan dikembangkan.

FORM

FORM merupakan elemen HTML yang berupa blangko yang digunakan untuk menjaring

informasi dari pengguna. Untuk membuat FORM dimulai tag <form> dan diakhiri dengan

</form>.

Untuk lebih jelasnya, lihat script berikut :

<html>

<head><title>macam-macam FORM</title></head>

<body>

<form>

<p><b><font face=”Verdana” size=”2”>1. contoh INPUT type TEXT:<br>

<input type=”text” name=”nama” size=”15” maxlength=”12”>

<p>2. contoh INPUT type PASSWORD:<br>

<input type=”password” name=”password” size=”30” maxlength=”30”>



<p>3. contoh INPUT type CHECKBOX:<br>

<input type=”checkbox” name=”checkbox1” value=”checkbox_value1”>cek bok

<input type=”checkbox” name=”checkbox2” value=”checkbox_value2”>cek bok

<p>5. contoh INPUT type RADIO #1:<br>

<input type=”radio” name=”pilih” value=”pilih1”>Ya

<input type=”radio” name=”pilih” value=”pilih2”>Tidak

<p>6. contoh INPUT type RESET:<br>

<input type=”reset”>

<input type=”reset” value=”bersihkan”>

<p>7. contoh INPUT type SUBMIT:<br>

<input type=”submit”>

<input type=”submit” value=”kirim”>

<p>8. contoh TEXTAREA :<br>

<textarea name=”komentar” rows=”4” cols=”40”>Text</textarea>

<p>9. contoh SELECT #1 :<br><select name=”situs”>

<option selected value=”Ethernet”>Ethernet

<option value=”token16”>Token Ring – 16MB


<option value=”localtalk”>Localtalk

</select>

<p>10. contoh SELECT #2 (bila size > atau = jumlah pilihan):<br>

<select size=”4” name=”jarkomp”>





</select>



<p>11. contoh SELECT #3 (bila size < jumlah pilihan, perhatikan pengaruh

MULTIPLE):<br>

<select size=”4” multiple name=”jarkomp”>





<option value=”wifi”>Wifi

</select>

<br>

Jika masih ada yang lain, silakan isi : <input type=”text” name=”jarkomp_lain”></b></font>

</form>

</body>

</html>

Form

FORM

Form adalah cara untuk mendapatkan umpan balik dari pengunjung ke situs web yang

diawali dan diakhir dengan tag<FORM> dan </FORM>. Field-field yang berada

diantaranya, digunakan untuk menentukan ukuran dan jenis dari masing- masing input field.

Walaupun dapat dimiliki banyak form dalam satu halaman, tetapi anda tidak dapat

melakukan form dalam form.

· Tag <FORM>

Atribut dari elemen form akan dijelaskan pada bagian berikut.

· ACTION

URL yang menentukan resource yang akan dilakukan oleh action pada form data, dan

memberi respon pada user.

· METHOD

Ini dapat berupa default GET atau POST. Menggunakan GET, query ditambahkan ke

URL; menggunakan POST, data dikirim melalui suatu transaksi post pada melalui

HTTP. Untuk data yang membutuhkan keamanan anda diajurkan untuk menggunakan

metode POST.



Contoh :

Berlangganan New letter, masukkan alamat E-mail anda<br>

<Input Type=Text Width=25 Name=Email>

<Input Type=Submit Value=Kirim Name=Submit>

</Form>

Hasil :

Berlangganan New letter, masukkan alamat E-mail anda

Kirim

Elemen-elemen dalam suatu form

Bagian berikut menerangkan berbagai elemen yang dapat ditempatkan dalam suatu

form.

· INPUT

Elemen INPUT menentukan informasi dari user interface. Berikut ini adalah atribut

untuk INPUT tag.

· CHECKED

Untuk checkboxes dan radio button, atribut ini dapat di set ke TRUE (checked) atau

FALSE (unchecked).

· MAXLENGTH

MAXLENGTH menentukan jumlah maximum karakter yang mana dapat dimasukkan

dalam suatu textbox.

· NAME

Menentukan nama dari form control. Hal ini digunakan untuk menentukan eleme data

pada form ke resource yang memproses elemen ini.

..

· SIZE

Menentukan ukuran dari form control. Ini dapat berupa nilai tunggal yang

menentukan lebar kontrol dalam karakter, atau dalam width/height pair.

· SRC

Ini menentukan image yang akan ditampilkan dengan kontrol.

http://ariefew.com/about/

http://ariefew.com/



· TYPE

Ini akan menentukan jenis control yang akan digunakan. Berikut ini daftar dari

kontrol yang ada :

· CHECKBOX

Checkbox adalah kontrol sederhana TRUE/ FALSE, yang mana kalau di

check adalah TRUE, dan kosong menyatakan FALSE.

· HIDDEN

Kontrol ini tidak ditampilkan oleh viewer dari halaman. Kontrol ini dapat

digunakan untuk mengirim status informasi kembali ke program form-

processing.

· IMAGE

form data dikirim dan nilainya dilewatkan oleh image dalam x,y kordinat

pixel.

· PASSWORD

Fungsi ini seperti textbox, tetapi tulisan ditampilkan dengan

asteriks sebagai penggantinya.

· RADIO

Fungsi ini menyerupai checkbox control, tetapi hanya satu option button

dari group yang dapat dipilih setiap saat. Pilih Ya atau Tidak

· RESET

Reset

form data dikembalikan ke keadaan awal sesuai dengan nilai initial

masing-masing.

· SUBMIT

Submit

Klik pada tombol akan mengirim form data ke FORM ACTION URL.

· TEXT

Ketik disiniKontrol ini digunakan untuk menggumpulkan satu baris

tunggal dari tulisan. Atribut SIZE dan MAXLENGTH dapat ditentukan untuk membatasi pengetikkan.



SCRIPT

Java Scriptadalah bahasa scripting yang paling populer di internet dan bekerja pada banyak browser

seperti Internet Explorer, Mozilla, Firefox, Netscape, Opera.

JavaScript digunakan pada Web pages untuk meningkatkan design, validate forms, detect

browsers, create cookies, GUI dsb.

Java (dikembangkan oleh Sun Microsystems)

adalah sebuah bahasa pemrograman yang powerful & sangat kompleks – sama

dengan C & C++.

JavaScript dapat bereaksi terhadap events

- JavaScript dapat di-set untuk menjalankan saat terjadi sesuatu, seperti sebuah page telah

selesai dipanggil atau saat seorang user meng-klik pada HTML element.

JavaScript dapat membaca dan menulis HTML elements

- JavaScript dapat membaca dan mengubah isi dari HTML element.

JavaScript dapat digunakan untuk mem-validasi data

- JavaScript dapat digunakan untuk mem-validasi form data sebelum di-submitted ke server,

hal ini akan mengamankan server dari pemrosesan extra.

JavaScript dapat digunakan untuk mendeteksi browser pengunjung

- JavaScript dapat digunakan untuk mendeteksi browser pengunjung dan

– memanggil page lain yang secara specifik didesain untuk browser tersebut.

JavaScript dapat digunakan untuk membuat cookies

- JavaScript dapat digunakan untuk menyimpan dan memanggil informasi di komputer

pengunjung.www.google.com

Info ini saya peroleh dari:



miftachulseduluran

Back tu up | Menu

Nah sekian dulu info yg bisa saya berikan tentang html, xhtml, css, dan javascript

Akhir kata saya mon maaf jika ad kata kata yg salah

dan terima kasih Udah brkunjung

"WasSalamMualLaikum wrb"

2. Membuat Script Di Notepad

Fungsi notepad yaitu untuk membentuk file PDF, Elfima juga berfungsi untuk mengubah dan

mengatur berbagai parameter penting dalam file PDF tersebut. Anda dapat mengatur margin,

panjang dan lebar kertas, jarak antar-paragraf, serta memberikan header atau footer. Setting

tersebut dapat Anda atur secara mudah melalui option-option yang telah disediakan oleh tool

ini. Dan juga dapat digunakan untuk membuat file PDF, SVG, XHTML, dan XML.

Pembuatan file PDF melalui tool ini begitu kompleks karena file teks yang Anda buat dapat

digabungkan dengan fungsi-fungsi sintax HTML, SVG, dan XML. Dengan begitu, setiap file

PDF yang terbentuk memiliki bentuk serta gaya yang menarik.

Sayangnya, meskipun memiliki fungsi dan hasil kualitas PDF yang baik, saat diuji oleh

CHIP, ternyata tidak semua jenis file PDF dapat dibuka dan diubah beberapa parameternya

oleh tool ini.

Kesimpulan : Walaupun masih terdapat beberapa kekurangan, text editor ini memiliki feature

lebih sehingga fungsi utamanya tidak hanya mampu mengedit PDF saja.

Bentuk script yg akan dibentuk di dalam notepad merupakan bentuk kode(code).

Diawali dg <html> dan diakhiri dg </html>, dsb. Catatan penting: jika diawali dg <head>

harus diakhiri dg </head> menggunakan garis miring.

1. Contoh kode(code) untuk membuat suatu script menggunakan fasilitas notepad:

<html>

<head>

<title>script saya</title>

http://ghacoet.heck.in/pengertian-html-xhtml-css-dan-java-scrip.xhtml

http://ghacoet.heck.in/pengertian-html-xhtml-css-dan-java-scrip.xhtml

http://miftachulseduluran.blogspot.com/

http://miftachulseduluran.blogspot.com/



</head>

<body bgcolor="yellow">

<font size=5 color=”blue">hidup mulia atau mati sahid</font>

<marquee>

<h2><font size=5 color="red">selamat datang di situs orang berbahagia dunia dan

akhirat</h2>

</marquee>

</body>

Hasilnya seperti ini!

2. Contoh kode(code) untuk membuat tabel(table) / comment box menggunakan fasilitas

notepad.

<html>

<table border="2" cellspacing="2" BORDERCOLOR="#410082" cellpading="2"

ALIGN="Center">

<TR>

<TD><P ALIGN=Center><font size=5 color="red">

welcome to riyn's site!!

</font></TD>

</TR>

</table>

</html>

Hasilnya seperti ini!



Teks dg warna merah bisa diubah sesuai kehendak.

(Jangan lupa teks kode tersebut diketik di dalam notepad bukan Ms. Word atau dsb)

Untuk melihat hasilnya antara lain dg cara:

Setelah diketik di dalam notepad lalu di save as dg nama file sesuai kehendak diakhiri dg

.html (misal: script saya.html) setelah disimpan, file tersebut otomatis akan berbentuk file

internet explorer.

Buka kembali file notepad yg sudah disimpan dalam bentuk internet explorer.

Hasil akan terlihat.

Penjelasan tentang istilah beberapa kode(code) diatas:

<html> = untuk mengawali teks kode di dalam notepad

<body> = untuk mengatur segala macam yg akan tampil di body /bagian isi

<title> = untuk memberi nama judul pada internet explorer

bgcolor = untuk mengatur warna latar belakang/background

marquee = untuk mengatur teks berjalan

Jika tidak mau repot mengetik kode script diatas, di copy paste aja…. ^^

Anda bisa menambah dan mengedit code diatas sesuai kehendak untuk menghasilkan sesuatu

yg lebih menarik lagi.

Berikut adalah pencarian HTML tips di situs friendster.com untuk menambah referensi anda

dalam membuat kode html.

HTML Tips

Use HTML to add color and personality to the “About Me" and “Who I Want to Meet"

sections of your profile! There are just a few rules you need to follow:

What’s allowed: Feel free to modify and enhance your text with any standard HTML (<B>,

<A HREF>, <IMG SRC>, <FONT>, <TABLE>, etc.). Keep in mind that there is a character

limit for each field, so make sure to leave enough room to close your tags (otherwise you



might mangle the remaining code of your page).

What’s not allowed: Applets, frames, layers, forms, scripts, XML, or any mouse-over events

(they’ll be stripped from your code automatically). Adding elements to the page that cover

Friendster advertising is also a no-no.

New to HTML?

Don’t worry, HTML is incredibly easy to learn. All you have to do is surround whatever text

you want to modify with tags. Like this:

The Very Basic Basics

What You Type What You Get

<B>Men</B> Men

<I>Are</I> Are

<U>from</U> from

<S>Men are from Mars</S> Men are from Mars

You can even combine tags (just remember to next each pair of tags)

<B><I><U>Mars Needs Women</U></I></B> Mars Needs Women

And That’s Not All

<CENTER></CENTER> Centers text or image.

<A HREF="URL HERE"></a> Makes whatever text/image it surrounds into a link.

<IMG SRC="IMAGE URL HERE" WIDTH="100" HEIGHT="100" /> Add an image,

using optional WIDTH and HEIGHT attributes to control the sizing. Note: IMG code is

stand-alone (no seperate close tag necessary

<FONT FACE="verdana" SIZE="6" COLOR="green">Little Green Men</font> Alter the

size, style, and color of text.

Cross-browser friendly fonts: Arial, Arial Black, Comic Sans, Courier New, Georgia, Times

New Roman, Trebuchet, Webdings.

Cross-browser friendly colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,

olive, purple, red, silver, teal, white, and yellow. (Want more colors? Use a HEX code.)

Berikut adalah beberapa website yg dapat menambah referensi dan membantu anda dalam

membuat script html:

http://www.w3.org/MarkUp/Guide/

http://www.webmonkey.wired.com/webmonkey/authoring/html.basics/



http://www.htmlhelp.com/

http://cedesign.net/tablesj.htm

Fanction

Function, atau biasa disebut fungsi, pada javascript, bertugas melakukan proses tertentu pada

script, dan hanya dapat digunakan jika nama fungsi tersebut dieksekusi.

Sebuah fungsi berisi kode yang akan dieksekusi oleh peristiwa atau dengan panggilan melalui

fungsi itu sendiri (dah bingung sendiri ).

menentukan Function

sintaks function seperti berikut

1. function namafungsi(var1,var2,varX){

2. kode scriptnya

3. }

keterangan

Parameter var1, var2, varX adalah variabel atau nilai yang dikirimkan ke fungsi.

sedangkan { dan }mendefinisikan awal dan akhir fungsi.

Fungsi tanpa parameter harus menggunakan tanda kurung () setelah nama fungsi.

contoh function JavaScript

1. <html>

2. <head>

3. <script type="text/javascript">

4. function pesan() {



5. alert("Apa kabar!");

6. }

7. </ script>

8. </ head>

9. <body>

10. <form>

11. <input type="button" value="Klik disini!" onclick="pesan()" />

12. </ form>

13. </ body>

14. </ html>

keterangan

alert ("Apa kabar!") dalam contoh dimasukkan di dalam fungsi, itu akan membuat script tidak

dieksekusi pada saat halaman itu dimuat. script tersebut akan dieksekusi jika tombol input

diklik.

fuction juga dapat digunakan sebagai pernyataan kembali (return) sebuah nilai...

contoh

1. <html>

2. <head>


4. function barang(a,b){

5. return a*b;

6. }

7. </ script>

8. </ head>

9.

10. <body>


12. document.write(barang(4,3));

13. </ script>



14. </ body>

15. </ html>

keterangan

Documents

Tugas Praktek WEB