CASCADING STYLE SHEET
HTML: Tag div (Division) Untk membuat grup dari tag-tg HTML. Contoh: <div class=“bagian_atas” id=“header”> </div> <div class=“bagian_isi” id= “isi" > <div id= “sisi" class=“bagian_isi” > <div class=“bagian_atas” id= “bagian_bawah" >
untuk menamai setiap div digunakan atribut id atau class Atribut ID dan Class tidak hanya digunakan dalam tag div saja melainkan dapat digunakan di setiap tag HTML untuk memberikan penamaan sebagai referensi jika diperlukan Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (Kode HTML)
CSS CSS adalah kumpulan kode yang digunakan untuk mendefinisikan desain dari bahasa markup , dimana bahasa markup ini salah satunya adalah HTML CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML Pembuatan markup yaitu proses penerjemahan dari desain ke dalam kode HTML
Peletakkan kode css dapat dilakukan di tiga cara berikut: Inline CSS Yaitu penulisan kode CSS dalam tag HTML Contoh: (simpan dengan nama: cssinline.php) <html> <p style="background: blue; color: white;">Style Menggunakan CSS</p> </body> </html>
2. Internal CSS Yaitu menuliskan langsung script CSS di file HTML-nya. Contoh: (simpan dengan nama: cssinternal.php) <html><head> <style type="text/css"> p {color: white; } body {background-color: black; } </style> </head> <body> <p>Selamat Datang CSS</p> </body></html>
3. External CSS Yaitu memanggil file CSS dari folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML.Eksternal style ditulis di text editor lain dengan ekstention .css Simpan file berikut dengan nama: CSS1.PHP <html> <head> <link rel="stylesheet" type="text/css" href="test.css"/> </head> <body> <h3> Selamat Datang CSS </h3> </body> </html> Simpan file berikut dengan nama: test.css <style type="text/css"> p {color: white; } body {background-color: pink; } </style>
Simpan file berikut dengan nama: CSS2.PHP <html> <head> <title>Membuat CSS External</title> <link rel="stylesheet" type="text/css" href="test2.css"> </head> <body> <h1>Contoh penggunaan Cascade Style Sheet External</h1> <p> Style Sheet external adalah style sheet yang didefinisikan secara terpisah dalam file tersendiri. Dikarenakan pendefinisian file terpisah, maka harus diberikan ekstensi penyimpanannya dengan diakhiri .css (contoh : external.css) dan tidak perlu didefinisikan di dalam tag HTML. Sedangkan untuk dokumen HTML-nya harus dihubungkan menggunakan sebuah link untuk mengakses atau memanggilnya.</p> </body></html>
Simpan file berikut dengan nama: test2.css H1{Font-family:"comic sans ms";font-size:16pt;font-weight:bold;Color:blue} P{Font-family:"monotype corsiva";font-size:12pt;font-weight:bold;Color:red;text-align:justify} body{font-family: verdana; font-size: 12px; background-color:#00FFFF}
Selector adalah elemen/tag HTML yang ingin diberi style Selector adalah elemen/tag HTML yang ingin diberi style. nama tag yang ingin diberi style dapat ditulis langsung tanpa menambahkan tanda <>. Jika tag HTML yang ingin diberi style memiliki ID, nama ID dapat dituliskan diawali tanda # Jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda titik (.) diikuti dengan nama class
<html><head> <style type="text/css"> #box{ width:500PX; height:500PX; background-image : url(logo.png); }</style> </head> <body> <div id ="box">LATIHAN CSS</div> </body></html>
<html><head> <style type="text/css"> <html><head> <style type="text/css"> .box{ background-color:green; color: yellow; width:100px; height:100px; margin-bottom:50px; padding-left:20px; </style> </head> <body> <div class="box">Box ke satu</div> <div class="box">Box ke dua</div> </body></html>
Property-property pada CSS Margin margin-top:20px; margin-right:30px; margin-bottom:50px; margin-left:40px; Border border-color : black; border-style : solid; border-width : 5px; CSS Shorthand margin : 20px 30px 50px 40px; border : 5px solid black;
Font font-size : 12px; atau font-size : 12pt; font-weight : bold; letter-spacing : 15px; atau letter-spacing : -2px; line-height : 30px; text-align : center; Image background-image : url (images/background.jpg); background-repeat : repeat-x; background-repeat : repeat-y; background-position : nilaiX nilaiY; background-position: 50px 50px;
Image Sprite sekumpulan gambar berbeda yang disatukan dalam satu file gambar. <html><head> <style type="text/css"> #button { width:240px; height:83px; background-image : url(gambar-artikel.jpg); background-position-y : 0;} #button:hover{ background-position-y : -83px;}}</style> </head> <body> <div id ="button"></div> </body></html>
CSS Reset *{ margin:0; padding:0; } Setiap browser memiliki Style atau File CSS yang akan diterapkan pada setiap halaman web yang dibuka. CSS Reset berfungsi untuk mereset atau mengatur ulang seluruh property-property yang telah disetting oleh browser, seperti margin, padding, warna huruf (link) ukuran huruf heading dan lain sebagainya. Perhatikan CSS contoh berikut : *{ margin:0; padding:0; }
JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web
Peletakan sintak java script pada dokumen HTML Script javascript diletakkan di antara <BODY> …. </BODY> Script javascript diletakkan di antara <HEAD> …. </HEAD> <html> <body> . . . <script> document.write(“di sini letak listing javascript”) </script> </body> </html> <html> <head> <script> document.write("di sini letak listing javascript") </script> </head> <body> . . . </body> </html>
Peletakan sintak java script pada dokumen HTML Menggunakan event tertentu Menggunakan file ekstern <html> <body> . . . <script src = “skripsaya.js”> </script> </body> </html> <html> <body> <input type = "button" onclick = "skripsaya()" value="klik">TES</button> <script> function skripsaya() { document.write("ini listing javascript"); } </script> </body> </html>
OBJEK JavaScript menggunakan object-based programming Fitur dari sebuah objek: Properti karakteristik objek Methods Apa yang bisa dilakukan oleh objek Events pesan yang dikirim sebuah objek ke objek lain Contoh, JavaScript memiliki sebuah objek yang disebut document. Objek document memiliki properti seperti pada tabel berikut:
Method dari objek document : Property Deskripsi bgColor Mengatur latar halaman taglastModified Tanggal terakhir suatu dokumen dimodifikasi Title Menuliskan judul dokumen url Menentukan alamat dokumen Domain Nama domain dimana dokumen dihosting referrer Jika user mendapatkan halaman ini via hyperlink, property ini menampilkan alamat dari halaman yang diacu halaman yang baru saja tampil Contoh: <html><body> <script> document.bgColor = "blue"; </script> </body></html> Method dari objek document : document.write() document.close()
Objek Form Banyak program JavaScript berelasi dengan form HTML karena form memiliki komponen seperti text boxes dan command button Event onClick Tombol HTML memiliki atribut onClick yang mempunyai nilai khusus yaitu kode JavaScript. Setiap user mengklik tombol, event onClick terpicu dan browser menjlankan JavaScript.
Menulis pada output HTML Menulis komentar <SCRIPT> // ini adalah komentar /* ini adalah Komentar Yang panjang */ </SCRIPT> Menulis pada output HTML document.write(“kalimat yang akan di tampilkan”);
Konversi jenis variabel Ada 2 fungsi dasar yang memungkinkan merubah jenis variabel yang dilewatkan dengan parameter tertentu : parseInt() Mengubah satu variabel yang dilewatkan dengan parameter tertentu (bisa dalam bentuk string ataupun dalam bentuk bilangan dalam basis yang disebutkan di parameter kedua) menjadi bilangan bulat. Sintaksnya adalah sebagai berikut : parseInt(string[, basis]); Contoh: ----------- <script> var a = "123"; var b = "456"; document.write(a+b,"<BR>"); // hasil 123456 document.write(parseInt(a)+parseInt(b),"<BR>"); // hasil 579 </script>
Konversi jenis variabel parseFloat() mengubah string menjadi bilangan. Jika fungsi menganggap string yang dimasukkan tidak dapat di konversikan menjadi bialangan real, maka fungsi akan mengembalikan nilai “NaN” (Not a Number). Sintaks dari fungsi parseFloat adalah sebagai berikut : parseFloat(string); Contoh: ------------ <script> document.write(parseFloat("10") + "<br />"); // hasil 10 document.write(parseFloat("10.33") + "<br />"); // hasil 10.33 document.write(parseFloat("34 45 66") + "<br />"); // hasil 34 document.write(parseFloat(" 60 ") + "<br />"); // hasil 60 document.write(parseFloat("40 years") + "<br />"); // hasil 40 document.write(parseFloat("He was 40") + "<br />"); // hasil NaN </script>
<html><head> <title>Senyum Sapa Salam</title> <script>function kopiNama(){ var userName = document.formSaya.txtNama.value; var salam = "Hai, "; salam += userName; salam += "!"; document.formSaya.txtSalam.value = salam;} </script></head> <body><center> <h1>Senyum Sapa Salam<br></h1> <form name = formSaya> <table border = 1> <tr><td>Ketik Namamu:</td> <td><input type = "text" name = "txtNama"></td></tr> <tr><td colspan = 2><center> <input type = "button" value = "klik di sini" onClick = "kopiNama()"> </center></td></tr> <tr><td colspan = 2><center> <input type = "text" name = "txtSalam"> </table></form></center> </body></html>
<head> <title>Password</title> <script> function cekPass(){ var tebak = document.myForm.pwdTebak.value; var rahasia = document.myForm.hdnRahasia.value; if (tebak == rahasia){ document.myForm.txtOutput.value = "Password diterima."; } else { document.myForm.txtOutput.value = "Password salah."; }} </script> </head> <body><center> <h1>Password<hr></h1> <form name = "myForm"> <table border = 1> <tr> <td>Password</td> <td><input type = "password” name = "pwdTebak"> </tr> <td colspan = 2><center> <input type = "button" value = "klik di sini" onClick = "cekPass()"> </center></td></tr> <tr> <td colspan = 2> <center> <textArea name = "txtOutput" rows = 1 cols = 35> </textarea> </center> </td></tr> </table> <input type = "hidden" name = "hdnRahasia" value = "JavaScript"> </form> <hr> </center> </body>
Pop Up Box Prompt Alert Confirm Contoh: <script> var p,l,L; p=prompt("Panjang = "); l=prompt("Lebar = "); L=eval(p)*eval(l); alert("Luas = "+L); </script>
<script> var txt; var r = confirm("tekan tombol <script> var txt; var r = confirm("tekan tombol!"); if (r == true) { txt = "Anda tekan tombol oke!"; } else { txt = "Anda tekan tombol cancel!"; } document.write(txt); </script>
Ketentuan Soal Jika STUDIO 1 maka bintang tamu “Opick” Jika STUDIO 2 maka bintang tamu “Raihan” Jika Jenis kelas VIP maka harga 500000 Selain itu kelas FESTIVAL maka harga 250000 Total Harga : jumlah beli * harga Jika klik Kembali Ke Awal akan kembali ke halaman input