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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 2/43
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.
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 3/43
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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 4/43
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>
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 5/43
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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 6/43
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>
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 7/43
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.
29. <object type="application/x-shockwave-flash"
30. data="player_mp3_mini.swf" width="200" height="20">
31. <param name="movie" value="player_mp3_mini.swf" />
32. <param name="bgcolor" value="#085c68" />
33. <param name="FlashVars" value="mp3=test.mp3" />
34. <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
35. height="20" name="movie" align=""
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>
44. <source src="test.mp3" type="audio/mpeg" />
45.
46. <object type="application/x-shockwave-flash"
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 8/43
47. data="player_mp3_mini.swf" width="200" height="20">
48. <param name="movie" value="player_mp3_mini.swf" />
49. <param name="bgcolor" value="#085c68" />
50. <param name="FlashVars" value="mp3=test.mp3" />
51. <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
52. height="20" name="movie" align=""
53. type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
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.
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 9/43
76. <script src="http://www.google.com/jsapi"></script>
77. <script>google.load("swfobject", "2.2");</script>
78. <audio id="audio_with_controls" controls>
79. <source src="test.mp3" type="audio/mpeg" />
80.
81. <object type="application/x-shockwave-flash"
82. data="player_mp3_mini.swf" width="200" height="20">
83. <param name="movie" value="player_mp3_mini.swf" />
84. <param name="bgcolor" value="#085c68" />
85. <param name="FlashVars" value="mp3=test.mp3" />
86. <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
87. height="20" name="movie" align=""
88. type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
89. </embed>
90. </object>
91.
92. </audio>
93.
94. <div id="player_fallback"></div>
95. <script>
96. if (document.createElement('audio').canPlayType) {
97. if (!document.createElement('audio').canPlayType('audio/mpeg')) {
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">
105. <source src="test.mp3" type="audio/mpeg" />
106.
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 10/43
107. <object type="application/x-shockwave-flash"
108. data="player_mp3_mini.swf" width="200" height="20">
109. <param name="movie" value="player_mp3_mini.swf" />
110. <param name="bgcolor" value="#085c68" />
111. <param name="FlashVars" value="mp3=test.mp3" />
112. <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
113. height="20" name="movie" align=""
114. type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
115. </embed>
116. </object>
117. 118. </audio>
119.
120. <div id="player_fallback"></div>
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>
127. if (document.createElement('audio').canPlayType) {
128. if (!document.createElement('audio').canPlayType('audio/mpeg')) {
129. ... SWFObject script lines here ...
130. } else { // HTML5 audio + mp3 support
131. document.getElementById('player').style.display = 'block';
132. }
133. }
134. </script>
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 11/43
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.
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 12/43
· 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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 13/43
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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 14/43
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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 15/43
· 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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 16/43
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
k o n t e n t / i s i
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
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
k o n t e n t / i s i
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
k o n t e n t / i s i
</div>
Tampilan
a n g g a p
d i s i n i
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 17/43
a d a l a h
k o n t e n t / i s i
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
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
k o n t e n t / i s i
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
k o n t e n t / i s i
</div>
Tampilan
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 18/43
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
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
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
k o n t e n t / i s i
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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 19/43
· 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
k o n t e n t / i s i
</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
k o n t e n t / i s i
</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
k o n t e n t / i s i
Border-Top
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 20/43
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
k o n t e n t / i s i
</div>
Jika dibuat dengan teknik shorthand akan menjadi seperti ini
<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
k o n t e n t / i s i
</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
k o n t e n t / i s i
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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 21/43
k o n t e n t / i s i
</div>
Jika dibuat dengan teknik shorthand akan menjadi seperti ini
<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
k o n t e n t / i s i
</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
k o n t e n t / i s i
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>
Jika dibuat dengan teknik shorthand akan menjadi seperti ini
<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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 22/43
a d a l a h
k o n t e n t / i s i
</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
k o n t e n t / i s i
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
k o n t e n t / i s i
</div>
Jika dibuat dengan teknik shorthand akan menjadi seperti ini
<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>
Sedangkan tampilanya akan sama seperti ini
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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 23/43
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;
}
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 24/43
#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-top:12px inset green;
border-right:16px ridge green;
}
#misalborder9{
border-top:12px inset green;
border-right:16px ridge blue;
border-bottom:12px groove black;
border- left:16px outset pink;
}
.anggapsebagaikotak{
background-color:red;
height:150px;
width:150px;
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 25/43
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><!-- www.indaam.com -->
<div class="anggapsebagaikotak" id="misalborder2">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.com -->
<div class="anggapsebagaikotak" id="misalborder3">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.com -->
<div class="anggapsebagaikotak" id="misalborder4">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.com -->
<div class="anggapsebagaikotak" id="misalborder5">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.com -->
<div class="anggapsebagaikotak" id="misalborder6">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.com -->
<div class="anggapsebagaikotak" id="misalborder7">
isi/content isi/content isi/content isi/content
</div><!-- www.indaam.com -->
<div class="anggapsebagaikotak" id="misalborder8">
isi/content isi/content isi/content isi/content
</div>
<!-- www.indaam.com -->
<div class="anggapsebagaikotak" id="misalborder9">
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 26/43
isi/content isi/content isi/content isi/content
</div>
<!--// salam
www.indaam.com //-->
<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;
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 27/43
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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 28/43
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:
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 29/43
<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:
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 30/43
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;
background-image: url('http://alamindawa.com/code/icon_true_small.png');
}
p.repeat_horisontal
{
height: 40px;
background-repeat: repeat-x;
background-image: url('http://alamindawa.com/code/icon_true_small.png');
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 31/43
}
</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”>
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 32/43
<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=”token4”>Token Ring – 4MB
<option value=”localtalk”>Localtalk
</select>
<p>10. contoh SELECT #2 (bila size > atau = jumlah pilihan):<br>
<select size=”4” name=”jarkomp”>
<option selected value=”Ethernet”>Ethernet
<option value=”token16”>Token Ring – 16MB
<option value=”token4”>Token Ring – 4MB
<option value=”localtalk”>Localtalk
</select>
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 33/43
<p>11. contoh SELECT #3 (bila size < jumlah pilihan, perhatikan pengaruh
MULTIPLE):<br>
<select size=”4” multiple name=”jarkomp”>
<option selected value=”Ethernet”>Ethernet
<option value=”token16”>Token Ring – 16MB
<option value=”token4”>Token Ring – 4MB
<option value=”localtalk”>Localtalk
<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.
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 34/43
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.
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 35/43
· 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.
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 36/43
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:
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 37/43
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>
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 38/43
</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!
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 39/43
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
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 40/43
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/
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 41/43
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/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 42/43
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>
3. <script type="text/javascript">
4. function barang(a,b){
5. return a*b;
6. }
7. </ script>
8. </ head>
9.
10. <body>
11. <script type="text/javascript">
12. document.write(barang(4,3));
13. </ script>
5/16/2018 Tugas Praktek WEB - slidepdf.com
http://slidepdf.com/reader/full/tugas-praktek-web 43/43
14. </ body>
15. </ html>
keterangan
Top Related