Puisi

Selasa, 10 Januari 2017

BAB 12. JAVASCRIPT KONDISI PERNYATAAN DAN PERULANGAN

1. imageover.html<html><head><title>Image Rollover</title></head><body><p>Hover over the image with you mouse to see thesimple rollover effect.<br/><a href=""onmouseover="document.images.button.src='download (2).jpg';"onmouseout="document.images.button.src='download (2).jpg'"><img src="download (2).jpg" width="100" height="50" border="0" alt="Example button"name="button"/></a></p></body></html>
2. onblur.html<HTML>
<BODY>
<SCRIPT LANGUAGE="Javascript">
function masukkannim()
{
if (dokumen.f.inim.value=="")
{
alert("kita belum memasukkan nim");
}
}
function masukkannama()
{
if (dokumen.f.inama.value=="")
{
alert("kita belum memasukkan nama");
}
}
function masukkanalamat()
{
if (dokumen.f.ialamat.value=="")
{
alert("kita belum memasukkan alamat");
}
}
function terimakasih()
{
if
((dokumen.f.inim.value!=="")&&(dokumen.f.inama.value
!=="")&&
(dokumen.f.ialamat.value!==""))
{
alert("Terima Kasih Telah Mengisi Data");
</SCRIPT>
</BODY>
</HTML>
3. alert.html
<html><head><title>Accessing form data</title></head><body><h1>Accesing Form Data</h1><form name="frmLogin"onsubmit="alert(document.frmLogin.txtUserName.value)"> UserName <input type="text" name="txtUserName" size="12"/><br/><br/> <input type="submit" value="Click here"/></form></body></html>

BAB 11. JAVASCRIPT 2

11.1 Objek Dalam Javascript

A. Objek Text

Untuk meng-input-kan data,kita dapat menggunakan komponen/objek text.

Contoh penggunaannya dapat kita lihat contoh dibawah ini:

<html>

<head><title>Objek Text</title></head>

<body>

<!--

function tekan()

{

var namastr = (dokumen.formisi.nama.value);

var alamatstr = (dokumen.formisi.nama.value);

dokumen.formisi.inama.value = namastr;

dokumen.formisi.ialamat.value = alamatstr;

}

//-->

</script>

<H1>Maukkan Teks Kita Disini</H1><hr>

<PRE>

Nama Kita : <input type="text" size="25" name="nama">

Alamat : <input type="text" size="25" name="alamat">

</PRE>

<BR>

<H3>Output</H3>

<PRE>

Nama Kamu adalah :<input type="text" size="11" name="inama">

Kamu tinggal di :<input type="text" size="25" name="ialamat">

</PRE>

</BR>

</form>

</body>

</html>

b. Objek Radio

Objek radio adalah komponen yang digunakan untuk melakukan suatu pemilihan data. Karena selalu berupa Array,untuk mengakses satu tombol radio digunakan radio (indeks). Objek radio juga memiliki nilai True jika dipilih dan False. Untuk memilih suatu objek radio digunakan properti Checked.

<!DOCTYPE html>

<html>

<head>

<title>Objek Radio</title>

</head>

<body>

<!--

function radio_box(form)

{

var ket = "";

if (form.wanita.checked == true)

{

ket ="Wanita";

}

else

{

ket ="Pria";

}

alert ('Jenis kelamin Kita Adalah ' +ket);

}

//-->

</script>

<form>

<H1>Pilih Objek Radio Jika Kita Wanita</H1><hr>

<p><input type="radio" value="wanita"

name="wanita">Wanita</p>

<hr>

<p><input type="button" value="Konfirmasi"

onclick="radio_box(this.form)">

</form>

</body>

</html>

c. Objek Checkbox.

Objek checkbox menyimpan informasi tentang elemen form yang berupa kotak cek.

Contoh :

<!DOCTYPE html>

<html>

<head>

<title>Objek Checkbox</title>

</head>

<body>

<!--

function radio_box(form)

{

var ket = "";

var ket1 ="";

if (form.bola.checked == true)

{

ket ="Main atau Nonton,Pokoknya Bola";

}

if (form.musik.checked == true)

{

ket1 = " Dengerin Musik";

}

alert('Kamu Punya Hobby ' +ket+' n '+ket1);

}

//-->

</script>

<form>

<H1> Pilihan dengan Objek Checkbox</H1><hr>

<p>Hobby kita :

<input type="Checkbox" value="ON" name="bola"> Sepak

Bola

<input type="Checkbox" value="ON" name="musik">Musik

(dengar ajah)</p>

<hr>

<p><input type="button" value="OK"

onclick="radio_box(this.form)">

</form>

</body>

</html>

d. Objek TextArea

Objek TextArea menyimpan informasi tentang elemen form yang berupa kotak teks dengan banyak garis.

Contoh :

<!--

function tekan()

{

var ketstr = (dokumen.form.Ket.value);

dokumen.form.hket.value = ketstr;

}

//-->

</script>

<H1> Masukkan Teks ke Dalam Objek TextArea </H1><hr>

<h3>Keterangan :</h3><br>

<H3>Output Keterangan :</H3>

</form>

e. Objek Select

Objek select menyimpan informasi tentang elemen form berupa kotak daftar. Objek select berguna apabila didalam form terdapat banyak pilihan yang telah mempunyai nilai tertentu.

Contoh :

<!--

function tekan()

{

var jurusanstr = (dokumen.form.Jurusan.value);

dokumen.form.hjurusan.value = jurusan;

}

//-->

</script>

<H1>Contoh denhan Objek Select</H1><hr>

<h3>Masukkan :</h3>

Jurusan di AMIK BINUS :<select name="Jurusan" Size="1">

<option value="Manajemen Informatika">Manajemen

Informatika</option>

<option value="Teknik Komputer">Teknik Informatika

</option>

</select>

<p><input type="button" value="kirim"

onclick="tekan()">

<H3>Hasil Jurusan :</H3>

</form>

Selasa, 06 Desember 2016

Bab 7. CSS HTML

Css html

1. PENGENALAN CSS

Ø CSS = Cascading Style Sheet adalah suatu teknik penulisan kode untuk memperindah dan mempermudah dalam pengkodean HTML dengan tujuan untuk memperindah tampilan situs.

2. SINTAKS CSS

Ø Secara umum CSS terdiri dari 2 bagian,yaitu:

o Selector,menunjukkan elemen yang akan diatur/diformat. Jika digunakan untuk lebih dari 1 elemen,gunakan pemisah berupa tanda koma (,).

o Declaration,merupakan pengaturan dari selector yang dipilih.

§ Property yaitu bagian dari elemen yang akan diatur

§ Value yaitu nilai dari property element yang diatur.

3. SELECTOR DALAM CSS

Pada CSS terdapat 3 macam selector,yaitu:

Ø CLASS

Selector diawali dengan tanda “.” (dot). Sebuah selector class dapat digunakan lebih dari satu tag HTML. Masukkan style css dalam selector class jika terdapat 2 atau lebih elemen/tag HTML yang bisa memiliki style yang sama dalam satu halaman.

Contoh kode selector class:

.post{background-color:#cdcdcd;}

Kode HTML untuk menggunakan selector class tersebut:

Class “.post” dapat digunakan lebih dari 1 kali pada sebuah halaman.

Ø ID

Selector id diawali dengan tanda “#”. Kebalikan dari selector class,selector id boleh digunakan sekali pada satu halaman.

Contoh kode selector id:

#header{backgorund-color:silver;padding:5px;}

Kode HTML untuk menggunakan selector id:

<div id=”header”> teks contoh </div>

Ø TAG HTML

Selector tag HTML tidak memerlukan tanda awalan apapun. Berbeda dengan selector ID dan selector class,selector HTML akan mempengaruhi tag HTML yang diberi style.

Contoh kodenya :

p {font-family:Arial;font-size:10pt;}

kode diatas akan membuat semua tag <p> {paragraf} agar ditampilkan menggunakan font Arial dengan ukuran 10pt (point).

4. PROPERTY YANG DAPAT DIATUR CSS

Property yang dapat diatur menggunakan CSS :

Type	Property
ð Font	o Font o Font-family o Font-size o Font-size-adjust o Font-stretch o Font-style o Font-variant o Font-weight
ð Text	Color Direction Color Letter-spacing Text-align Text-decoration Text-indent Text-shadow Text-transform Unicode-bidi White-space Word-spacing
ð Background	v Background v Background-attachment v Background-color v Background-image v Background-position v Background-repeat
ð Border	Ø Border Ø Border-color Ø Border-style Ø Border-width Ø Border-bottom Ø Border-bottom-color Ø Border-bottom-style Ø Border-bottom-width Ø Border-left Ø Border-left-color Ø Border-left-style Ø Border-left-width Ø Border-right Ø Border-right-color Ø Border-right-style Ø Border-left-width Ø Border-top Ø Border-top-color Ø Border-top-style Ø Border-top-width
ð Margin	ü Margin ü Margin-bottom ü Margin-left ü Margin-right ü Margin-top
ð Padding	§ Padding § Padding-bottom § Padding-left § Padding-right § Padding-top
ð Dimension	o Height o Line-height o Max-height o Max-width o Min-height o Min-width o Width
ð Position	Ø Bottom Ø Clip Ø Left Ø Overflow Ø Right Ø Top Ø Vertical-align Ø Z-indexs
ð Outline	i. Outline ii. Outline-color iii. Outline-style iv. Outline-width
ð Table	ü Border-collapse ü Border-spacing ü Border-side ü Empty-cells ü Table-layout
ð List and Marker	· List-style · List-style-image · List-style-position · List-style-type · Marker-offset
ð Generated Content	Content Counter-increment Counter-reset Quotes
ð Classification	v Clear v Cursor v Display v Float v Position v visibility

5. MENAMBAHKAN CSS PADA DOKUMEN WEB

Ada 3 cara menambahkan CSS pada dokumen web,yaitu:

1. Dengan membuat link dari dokumen HTML ke file CSS.\

Syarat utamanya adalah kita memiliki file berekstensi “.css”. Metode ini sering disebut disebut juga Eksternal Style Sheet. Bentuknya :

href=”css_files.css”>

Baris diatas biasanya diletakkan didalam elemen <head>.

Ada beberapa atribut yang dapat dibawa oleh elemen link,yaitu :

Ø Rel

Merupakan atribut yang dibutuhkan dan mengatur hubungan antara dokumen yang memuat <link> dengan dokumen tujuan. Value yang dibutuhkan untuk bekerja dengan style sheet adalah stylesheet.

rel=”stylesheet”

Ø Type

Menjelaskan tipe dokumen yang akan dihubungkan. Pada kasus ini,kita akan menghubungkan dengan CSS style sheet. Maka value dari type yang dibutuhkan adalah text/css.

type=”text/css”

Ø Href

Digunakan untuk mengatur URL dari dokumen yang akan dihubungkan.

href=”..../stylesheets/interface.css”

Ø Hreflang

Digunakan untuk mengatur sumber bahasa penulisan

hreflang=”en-US”

Ø Media

Digunakan untuk mendefenisikan media output yang miliki untuk digunakan bersama dokumen.

media=”screen”

beberapa value yang dapat digunakan untuk atribut media adalah :

Value	Fungsi
Screen	Layar komputer tanpa halaman (seperti komputer desktop dan laptop)
tty	Media dengan karakter grid,seperti teletype,terminal atau peralatan portable dengan kemampuan tampilan yang terbatas.
tv	Televisi dengan resolusi rendah,layar warna dan kemampuan untuk menggulung dokumen kebawah yan terbatas.
print	Dokument cetak,yang kadang-kadangditujukan sebagai pages media (dan mode pre-view dokumen didalam layar).
project	Proyektor
handheld	Peralatan handheld,yang sering memiliki layar kecil,untuk grafik bitmap,dqan memiliki bandwidth yang terbatas.
braille	Peralatan umpan balik tulisan braille.
embossed	Pencetak halaman braille.
aural	Synthesizer suara.
all	Cocok untuk semua peralatan.

2. Dengan menyisipkan kode CSS ke dokumen HTML.

3. Dengan mengisipkan secara inline pada tag HTML.