subakti.com...menambahkan object-object seperti image, audio, video dan juga java applet dalam...

57

Upload: others

Post on 28-Dec-2019

26 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 2: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 3: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 4: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Permainan Berkedok Web – Episode II

Page 5: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

review

Page 6: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 7: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 8: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 9: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 10: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 11: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 12: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Yes, now we talk about tag !

Page 13: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

standard bahasa yang digunakan untuk menampilkandokumen web

Mengontrol tampilan dari web page dan contentnya

Membuat online form yang bisa di gunakan untuk menanganipendaftaran, transaksi secara online

Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen

Page 14: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Browser

merupakan software yang di install di mesin client yang berfungsi untukmenterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator, Opera, Mozilla dan masih banyak yang lainnya.

Editor

Program yang di gunakan untuk membuat document HTML. Ada banyakHTML editor yang bisa anda gunakan diantaranya: Notepad, Notepad++, Microsoft FrontPage (obsolete), Macromedia Dreamweaver, dan lain-lain.

Page 15: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Kalo pada bahasa pemrograman kita mengenal code, maka pada HTML kita mengenal yang namanya tag.

Contoh tag html adalah <head>, <title>, <body>, <html>, <img>, dan lain-lain.

Tag html tidak bersifat case sensitive → <body> sama dengan <BODY>

Page 16: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Bentuk umum penulisan tag html adalah:

<ELEMENT ATTRIBUTE = value>

Dimana:

Element - nama tag

Attribute - atribut dari tag

Value - nilai dari atribut.

Contoh:

<BODY BGCOLOR=lavender>

Page 17: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Document HTML bisa di bagi mejadi tiga bagian utama: html, head, dan body.

<html>

<head>

</head>

<body>

</body>

</html>

Page 18: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Homepage

Kepala<head>

<Head>

<Title>Judul

Homepage

</Title>

</Head>

Tubuh<body>

<Body> Konten

</Body>

Page 19: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Setiap document HTML harus di awali dan di tutup dengan tag HTML → <html> …… </html>

Tag <html> memberi tahu browser bahwa yang di dalam keduatag tersebut adalah dokumen HTML.

Page 20: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Di dalam bagian ini biasanya dimuat tag <title> yang menampilkan judul dari halaman web.

<head>

<title>ITS – Institut Teknologi Sepuluh

Nopember</title>

</head>

Page 21: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Tag <body> di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.

<html><head>

<title>Selamat datang di halaman web-ku</title></head><body bgcolor="lavender">

<p>Document HTML yang Pertama</p></body>

</html>

Page 22: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Block level element: terdapat 6 tingkatan, yaitu H1 sampai H6.

<body>

<h1>Heading one</h1>

<h2>Heading two</h2>

<h3>Heading three</h3>

<h4>Heading four</h4>

<h5>Heading five</h5>

<h6>Heading six</h6>

</body>

Page 23: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Menampilkan teks dalam bentuk paragraf.

<body>

<h3>Salam Kenal</h3>

<p>

Saya monique dari jurusan

informatika ITS

Siapa ya yang mo kenalan dengan

saya.

</p>

<body>

Page 24: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Unordered list <ul>: List item tidak berurutan (bullet)

<body>

<P>Nama-nama buah</P>

<ul>

<li>Mangga</li>

<li>Duren</li>

<li>Sirsak</li>

</ul>

</body>

Page 25: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Ordered list <ol>: List item berurutan.

<body><P>Bidang minat di Informatika ITS</P><ol start="1" type=“1">

<li>Software Engineering</li><li>Intelligent System</li><li>Network Computer Centric</li>

</ol><body>

Page 26: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Horizontal Rule tag digunakan untuk menggambar garishorizontal dalam dokumen html.

Attribut dari <hr> adalah:Position: menetukan posisi dari <hr>, dengan nilai : center | right | left.

Width: untuk menentukan panjang <hr>. Nilai default 100%.

Size: untuk menentukan tebal dari <hr> dalam pixel.

Noshad: Efek bayangan.

Contoh:

<hr position=“center” width=90% size=3 noshad>

Page 27: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Break : memulai baris barutag : <br>

Font : menentukan format tampilan font<font color="#9966FF" size="5"> Belajar Web </font>

Color : attribute dgn 3 kategori warna (RGB) #RRGGBB, misal #FF0000 adalah Red

Page 28: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Alignment : untuk perataan objek (Left,Right,Center,Justify)

<P align="center">Daftar Bidang Minat Informatika ITS</P>

Format Text :

A. Physical Format

B. Logical Format

C. Preformatted Text : menampilkan text spt aslinya.

<pre> HTML sungguh menyenangkan. Mudah bukan… </pre>

Page 29: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Physical Format Logical Format

Page 30: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Untuk membuat link ke dokumen lain.

Contoh:

<a href=dua.html>Ke halaman dua</a>

<a href=“http://www.its.ac.id”>ITS Official Site</a>

Untuk membuat link ke bagian tertentu dlm dokumen.

Contoh:

<a name=“nama”>Topic name</a>

<a href=“#nama”>Menuju ke topic name</a>

Page 31: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Untuk membuat tabel : <table>Cell-nya dengan tag <td>

<html><head><title>Using Table</title></head><body><table border="1"><td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td></table></body></html>

Page 32: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Untuk membuat baris cell : <tr>Untuk title tabel : <caption>

<body><table border="1"><caption>Creating Table</caption><tr> <td>cell 1a</td>

<td>cell 1b</td></tr><tr> <td>cell 2a</td>

<td>cell 2b</td></tr></table></body>

Page 33: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Perataan tabel :

1. align (center, justify, left, right).

2. valign (baseline, top, middle, bottom)

Lebar tabel : width=“25%”

Warna cell : bgcolor=“red”

Spasi tabel :

cellspacing untuk memberi spasi antar sel

cellpadding untuk spasi dari border ke text dalam cell

Page 34: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

<body><table border=1 cellspacing=5 cellpading=10><tr align="left" valign="top"><td width="25%" bgcolor=red>cell 1a</td><td width="25%" bgcolor=yellow>cell 1b</td></tr><tr align="center" valign="baseline"><td>cell 2a</td><td>cell 2b</td></tr></table></body>

Page 35: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Cascading Style Sheet

Page 36: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

CSS : Cascading Style Sheet

Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.

Metode Pembuatan :

Style Sheet Inline

Style Sheet Internal

Style Sheet External

Page 37: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

mengetikkan langsung dalam tag html sebagai atribut .

<body><b style = “color : blue”> teks tebal dan biru </b>

</body>

Page 38: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Menggunakan tag style di dalam tag head.

<head><style type=“text/css”>

……… style definitions ………

</style></head>

Page 39: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Style definitions : adalah defenisi style yang ingin dibuat.

Format penulisannya adalah :

Selector { property1 : value1 ;

property2 : value2;….

propertyN : valueN ; }

Selector adalah tag yang digunakan web browser.

Property : value adalah efek dari style yang diinginkan untuk selector.

Page 40: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 41: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Menyimpan informasi style ke dalam sebuah file denganekstensi/type file .css

Memanggil file css dalam html dengan tag link yang diletakkandalam tag head.

<head><link rel=“stylesheet” type=“text/css” href=“namafile.css”/></head>

Page 42: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 43: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

<style type=“text/css” >hr { color : red ; height : 5px ; width : 50%; }

</style>

Keterangan :Tag adalah styleAtribut adalah type=“text/css”Selector adalah hrProperty adalah color, height, widthValue adalah red, 5px, 50%

Page 44: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 45: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 46: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

ID selector didefinisikan sendiri

ID selector diawali tanda # ( octothorpe)

CLASS diawali dengan tanda titik ( . )

Page 47: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 48: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk
Page 49: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Build the webpage interactively !

Page 50: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Bahasa yang berbentuk kumpulan skrip yang pada fungsinyaberjalan pada suatu dokumen HTML.

Sejalan dengan sedang giatnya kerjasama antara Netscape danSun (pengembang bahasa pemrograman “Java” ) pada masaitu, maka Netscape memberikan nama “JavaScript” kepadabahasa tersebut pada tanggal 4 Desember 1995

Pada saat yang bersamaan Microsoft sendiri mencoba untukmengadaptasikan teknologi ini yang mereka sebut sebagai“Jscript” di browser Internet Explorer 3

Page 51: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

JavaScript

Client-side Programming

Browser sebagai kompilator

Pengembangnya: Netscape

Code terlihat di dokumen HTML

Terintegrasi dengan dokumenHTML

JAVA

Server and Client Programming

JVM sebagai kompilator

Pengembangnya: SUN

Code (Applet) tidak terlihat dan

Terpisah dari dokumen HTML

Page 52: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

JavaScript dapat bereaksi terhadap events

JavaScript dapat membaca dan menulis HTML elements

JavaScript dapat digunakan untuk mem-validasi data

JavaScript dapat digunakan untuk mendeteksi browserpengunjung

JavaScript dapat digunakan untuk membuat cookies

Page 53: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Menggunakan tag <SCRIPT>Pada umumnya kita meletakkan tag <SCRIPT> diantara bagian kepaladari dokumen HTML, yaitu bagian antara tag <HEAD> dan </HEAD>.

Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan dibagian badan dokumen HTML atau bisa kita sebut diantara tag <BODY> dan </BODY>.

Menggunakan file ekstern<SCRIPT LANGUAGE=”Javascript” src=”url/file.js”> </SCRIPT>

Melalui event tertentuEvent adalah sebutan dari satu action yang dilakukan oleh user, contohnya seperti klik tombol mouse

<tag eventHandler=”kode Javascript yang akan dimasukkan”>

Page 54: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

<HTML><HEAD>

<TITLE>Contoh Program Javascript</TITLE></HEAD><BODY>

<SCRIPT language=”Javascript”><!–

alert(”Ini merupakan pesan untuk Anda”);// –></SCRIPT>

</BODY></HTML>

Page 55: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

<HTML><HEAD><TITLE>Pemasukan Data</TITLE></HEAD><BODY><SCRIPT LANGUAGE = "JavaScript"><!—var nama = prompt("Siapa nama Anda?");document.write("Hai, " + nama);//--></SCRIPT></BODY></HTML>

Page 56: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

<SCRIPT LANGUAGE="JavaScript"> function cari() {

var kata = document.formcari.keyword.value;var hasil = "http://www.google.com/search?q=" + kata ;window.open(hasil, 'google', config='height=500,

width=750, scrollbars=yes location=yes') } </SCRIPT> <FORM NAME="formcari" onSubmit="cari()“>Cari pakai Google: <INPUT NAME="keyword" SIZE="40" TYPE="text"> <INPUT TYPE="submit" VALUE="Cari .. !!"> </FORM>

Page 57: subakti.com...Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen. Browser merupakan software yang di install di mesin client yang berfungsi untuk

Nantikan kelanjutannya di episode 3: PHP: Hypertext Preprocessor