Teo's Blog

Saturday

XML

What is XML?

XML stands for eXtensible Markup Language
XML was designed to carry data, not to display data
XML is important to know, and very easy to learn.
XML is a markup language much like HTML
XML tags are not predefined, so You must define your own tags
XML is designed to be self-descriptive
XML is a W3C Recommendation
XML is nothing special. It is just plain text

The Difference Between XML and HTML

XML is not a replacement for HTML.
XML was designed to transport and store data, with focus on what data is,
HTML was designed to display data, with focus on how data looks.
XML does not DO anything. XML was created to structure, store, and transport information.

Example :


<?xml version="1.0"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
</note>

this note is copied from w3schools.com/xml

Java Script 4

Array

Deklarasi Array :

var nama_var_array = new Array(isi_array);
contoh :
var hobi = new Array(“memancing”,”membaca”,”melukis”,”menyanyi”);

var nama_var_array = new Array(ukuran);
contoh :
var nama_var_array = new array();

pengisian :
nama_var_array[index] = isi_array_ke_index;
contoh :
negara[0] = "Indonesia";
negara[1] = "Jepang";

Java Script 3

Message Box

Window Alert

bentuk umum :
window.alert("pesan");
atau
alert("pesan");
contoh :
window.alert("Welcome");

Window Confirm

menampilkan box dengan tombol OK dan cancel
nilai yang dikembalikan berupa boolean (true / false)
bentuk umum :
window.confirm("pertanyaan");
contoh :
var answer;
answer = window.confirm("pertanyaan");
if (answer) {
document.write=("betul");
}
else {
document.write=("salah");
}

Window Prompt

menampilkan box yang meminta input dari user
bentuk umum :
window.prompt("pesan","value_default");
contoh :
var nama;
nama = window.prompt("Masukkan nama Anda", "Mbah Boedy");
document.write("Selamat Datang " + nama);

Java Script 2

Statement IF

bentuk umum :
if (kondisi) {
//statement yang akan dijalankan jika kondisi 1 benar
}
else (kondisi 2){
//statement yang akan dijalankan jika kondisi 1 salah dan kondisi 2 benar
}
else {
//statement yang akan dijalankan jika semua kondisi salah
}
contoh :
if (a>0) {
document.write("a = bilangan positif");
}
else (a<0) {
document.write("a = bilangan negatif");
}
else {
document.write("a = angka 0");
}

Statement SWITCH CASE

Merupakan bentuk ringkas dari if
switch (variabel) {
case nilai_penguji1: //statement pilihan 1
break;
case nilai_penguji2: //statement pilihan 2
break;
default : //statement default
};
contoh :
switch(hari) {
case 1: document.write("senin");
break;
case 2: document.write("selasa");
break;
case 3: document.write("rabu");
break;
case 4: document.write("kamis");
break;
case 5: document.write("jumat");
break;
case 6: document.write("sabtu");
break;
case 7: document.write("minggu");
break;
default: document.write("tidak terdaftar");
};

Perulangan While

bentuk umum :
while (kondisi) {
//statement yang diulang
increment/decrement;
}

Perulangan Do-While

bentuk umum :
do {
//statement yang diulang
increment/decrement;
} while (kondisi);

Perulangan For

bentuk umum :
for (inisialisasi; kondisi; increment/decrement;) {
//statement yang diulang
}
contoh :
for (counter=1;counter<=5;counter++) {
document.write("print ini ");
}

CSS (6)

InLine CSS

<h1 style="color:white;> <h1>

External CSS

// namafile.css
.namaclass {color:green;}
#namaid {color:red;}

// namafile.html
<body>
<link rel="stylesheet" type="text/css" href="style.css">
<h1 class="namaclass">Text dengan Class<h1>
<h1 id="namaid">Text dengan ID<h1>

</body>

Java Script 1

Java Script merupakan bahasa pemrograman yang dieksekusi di sisi client (client side programming)
tanpa harus terhubung dengan web server.
Java script dapat disisipkan ke dalam dokumen HTML, dalam tag <body> ataupun tag <head>,
dengan menggunakan tag <script type="text/javascript" > </script>
maupun dengan tag <script language="javascript" > </script>

Java Script merupakan bahasa pemrograman yang bersifat case sensitive, artinya Java Script akan
membedakan penggunaan huruf besar dan huruf kecil.
Setiap statement / pernyataan dalam kode program Java Script selalu diakhiri
dengan karakter ';' (titik koma / semicolon).

Mencetak text

document.write(“pesannya”);
contoh :
document.write("Welcome");
document.write(nama_variable);
document.write("x = "+nama_variable);
document.write("x = ",nama_var1*nama_var2);

Komentar

menggunakan penanda // untuk komentar yang panjangnya 1 baris
menggunakan penanda /* pada awal baris dan */ pada akhir baris
untuk komentar yang panjangnya lebih dari 1 baris
contoh :
// komentar 1 baris
/* komentar lebih
dari 1 baris */

Tipe Data dan Deklarasi Variabel

Dalam Java Script terdapat tiga macam tipe data utama, yaitu tipe data String (kumpulan karakter),
tipe data bilangan / integer, dan tipe data logika / boolean.
Tipe data boolean akan mengenal dua buah nilai yaitu true dan false.
Pendeklarasian semua tipe data hanya menggunakan keyword var
contoh :
var kota = ”bandung”; // deklarasi variabel bernama kota bertipe data string
var gaji = 5000; // deklarasi variabel bernama gaji bertipe data integer
var ipk = 3.88; // deklarasi variabel bernama ipk bertipe data float
var married = false; // deklarasi variabel bernama status_cekal bertipe data boolean

Operator Aritmatika

Operator Aritmatika yang bisa digunakan dalam java script yaitu :
tambah (+) , kurang (-) , kali (*) , bagi (/) , modulus/sisa pembagian (%) , increment (++) , decrement (--)

Operator Assignment

Operator assignment adalah operator yang digunakan untuk memberikan / memasukkan nilai ke
dalam suatu variabel.
Operator assignment yang bisa digunakan dalam java script yaitu :
= , += , -= , *= , /= , %=
contoh : x = 5 ; x += 2 (x = x + 2)

Operator Perbandingan

Operator Perbandingan yang bisa digunakan dalam java script yaitu :
sama dengan (==) , tidak sama dengan (!=) , lebih besar (>) , lebih kecil (<) ,
lebih besar sama dengan (>=) , lebih kecil sama dengan (<=)

Operator Logika

Operator Logika yang bisa digunakan dalam java script yaitu :
and (&&) , or (||) , not (!)

Konversi Tipe Data

Tipe data yang memungkinkan untuk dikonversi adalah tipe data string ke tipe data numerik.
menggunakan function parseInt() // untuk konversi ke type integer
menggunakan function parseFloat() // untuk konversi ke type float

CSS (5)

list-style-type

disc

cicle

square

decimal

decimal-leading-zero

lower-roman

upper-roman

lower-alpha

upper-alpha

lower-greek

lower-latin

upper-latin

background-repeat

repeat-y

repeat-x

border-style

dotted

dashed

solid

double

groove

ridge

inset

outset

CSS (4)

text-align

left

right

center

justify

text-decoration

overline

underline

line-through

blink

text-indent (Satuan)

text-transform

uppercase

lowercase

capitalize

font-weight

bold

font-style

italic

CSS (3)


<style type="text/css">
ul {list-style-type:circle;   {Unordered List}
    list-style-image:url('icon.gif'); {Image List}
ol {list-style-type:armenian;}   {Ordered List}

p {background-color:red;  {Background Color}
   background-image:url('pic1.jpg'); {Background Image}
   background-repeat:norepeat;  {Background Repeation}
   background-position:top right; {Background Postion}
   background-attachment:fixed;  {Background Attachment}

</style>

CSS (2)


<style type="text/css">
p {border-style:dotted;  {Mengatur Tipe Border}
   border-color:red;   {Mengatur Warna Border}
   border-width:10px;   {Mengatur Tebal Border} 
   
   padding-left:1cm;   {Mengatur Jarak Teks dan Border} 
   padding-top:0.5cm;    
   padding-bottom:1.5cm;   
   padding-right:1cm;   
   
   marginleft:2cm;   {Mengatur Margin}    
   margintop:2cm;         
  } 

</style>

CSS (1)


CSS bisa ditulis dalam dokumen XHTML
Menggunakan tag
<style type="text/css">
</style>
diletakkan di dalam tag <head> </head>
Antar atribut dipisahkan tanda ; (titik koma)
Pemberian nilai atribut menggunakan tanda : (titik dua)

<style type="text/css">
p {color:blue;    {Mengatur Warna Teks}
   text-align:center;   {Mengatur Perataan Teks}
   text-decoration:underline;  {Mengatur Dekorasi Teks}  
   text-indent:1cm;   {Mengatur Indentasi Paragraf}
   text-transform:uppercase;  {Mengatur Kapitalisasi Teks}
   
   font-family:arial;   {Mengatur Jenis Huruf}
   font-size:24;   {Mengatur Ukuran Huruf}   
   font-weight:bold;   {Mengatur Kejelasan Huruf}
   font-style:italic;   {Mengatur Style Huruf}   
  } 
.namaclass1 {text-transform:capitalize;} {penggunaan class umum}

p.namaclass2 {text-decoration:overline;} {penggunaan class khusus untuk p}

</style>

<body>
Pemakaian dalam body:
<p>Teks dengan CSS<p>
<p class="namaclass">Teks dengan CSS dan class <p>

</body>

TAG Option


Form digunakan untuk menampung komponen inputan
biasanya berkaitan dengan pemrograman.

<input type="text" />
Name : 
attribute : 
 name=" "
 size=" "
 maxlength=" "
 value=" "

<input type="submit"value="kirim" />


<input type="reset" value="hapus" />


<input type="password" />


<input type="checkbox" name="basket"/>Basket
<input type="checkbox" name="dotA"/>DotA
Hobby : 
Basket
DotA

<input type="radio" name="gender" value="Male" checked /> Male
<input type="radio" name="gender" value="Female" /> Female
 Male
 Female

Comment
<textarea > 
</textarea >
<br /><br />

Combo Box
<select name="Atlet">
 <option value="Doni" />Doni Purnomo
 <option value="Edgar" selected />Edgar Davids
</select>


List Box
<select name="Atlet" multiple >
 <option value="Susi" />Susi Susanti
 <option value="Davids" selected />Davids
 <option value="Budi" />Budi
</select>

Table n Frame


Table 
<table> 
<caption> Judul Table </caption> 
  <tr> {table row 1} 
 <td> {table col 1}
 Table Fill 1
 </td> 
 <td> {table col 2}
 Table Fill 2
 </td>  
  </tr> {table row 2} 
 <td> {table col 1}
 Table Fill 1
 </td> 
 <td> {table col 2}
 Table Fill 2
 </td> 
</table> 
 <th> </th> {digunakan untuk Cell Heading}

Border Table
<table border="5">
 <tr>
  
 </tr>
<table >

Background Table
<table bgcolor="red">
 <tr>
  
 </tr>
<table >

Cellpadding
NB:Mengatur jarak isi dan cell
<table cellpadding="10">
 <tr>
  
 </tr>
<table >

Cellspacing
NB:Mengatur jarak antarcell
<table cellspacing="10">
 <tr>
  
 </tr>
<table >

Width & Height
NB:Mengatur lebar dan tinggi table
<table width="300" height="200" >
 <tr>
  
 </tr>
<table >

Align & Valign
Align = mengatur perataan secara horizontal
Valign = mengatur perataan secara vertikal
<table align="center" >
 <tr>
  <td>align="left"</td>
  <td>align="right"</td>
  <td>align="center"</td>
 </tr>
 <tr>
  <td>valign="top"</td>
  <td>align="middle"</td>
  <td>align="bottom"</td>
 </tr>
<table >

Colspan & Rowspan
rowspan = digunakan untuk menggabungkan beberapa baris
colspan = digunakan untuk menggabungkan beberapa colom
<table align="center" >
 <tr rowspan="2">
  <td colspan="3"></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
 </tr>
<table >

Frame
digunakan untuk membuka beberapa halaman web dalam 1 tampilan
NB:diletakkan pada sesudah </head> dan sebelum <body>
nama file : Main.html
<html>
 <head>
  <title>Main</;title>
 </head>
  <frameset rows="40%,*">
   <frame src="atas.html">
   <frameset cols="20%,*">
    <frame src="kiri.html">
    <frame src="kanan.html" name="kanan" >
   </frameset>
  </frameset>
 <body>

 </body>
</html>

nama file : kiri.html
<html>
 <head>
  <title>Kiri.html</;title>
 </head>
  
 <body>
  <a href="http://google.com/ target="kanan">Click Google</a>
  ketika Click Google diklik, maka window yang terbuka adalah kanan.html
 </body>
</html>

nama file : kiri.html
<html>
 <head>
  <title>Kanan.html</;title>
 </head>
  
 <body>
  
 </body>
</html>

Frame Border
<frameset rows="50%,*" border="0">

<frameset>

iframe
NB:Implementasi frame yang lebih flexible
<iframe src="x.html
 width="200"
 height="100"
 align="right" />

List n Hyperlink

Tipe List

Ordered List

Memperhatikan urutan

Tag <ol>

Type : 1 , A , a , i , I

Pemakaian :

Unordered List

Tidak Memperhatikan urutan

Tag <ul>

Type : circle , disc , square

Definition List


<dl>
 <dt> HTML </dt>
 <dd> Dokumen yang digunakan untuk web </dd>
</dl>

HTML: Dokumen yang digunakan untuk web
Web Browser: Aplikasi yang digunakan untuk mengartikan dokumen HTML
HTTP: Protokol yang digunakan untuk web

Link / Hyperlink

<a href="halaman2.html"> ke halaman 2 </a>

Membuka link pada halaman baru (target="_blank")

<a href="halaman2.html" target="_blank"> ke halaman 2 </a>

Membuka link suatu website

<a href="http://google.com" target="_blank"> Google </a>

Gambar sebagai acuan hyperlink

<a href="http://google.com" target="_blank">

<img src="gambar.jpg" />

</a>

TAG HTML (Media)


Memberi Gambar pada latar(background)
nb:file gambar dan file html harus berada di satu lokasi yang sama
<body background="merapi.jpg" >
 Ini Isi
</body>

Menambahkan gambar pada halaman web
nb:file gambar dan file html harus berada di satu lokasi yang sama
<body>
<img
 src="gambar.jpg" -> menambahkan gambar
 align="middle"  -> rata tengah
 alt="nama_gambar" -> nama gambar
 width="200"  -> ukuran lebar gambar
 height="300" />  -> ukuran tinggi gambar

Membuat Animasi Sederhana
<body>
 <marquee direction="right" > </marquee>
</body>

Memutar Lagu
nb:file lagu dan file html harus berada di satu lokasi yang sama
<body>
 <bgsound src="lagu.mp3" loop="2" />
</body>

Memutar Video
nb:file video dan file html harus berada di satu lokasi yang sama
<body>
<embed 
 src="video.mpg" 
 loop="true"
 width="300"
 height=200"
 autostart="false" />
</body>

Pengenalan TAG HTML


Formating
<b>untuk cetak tebal (bold)</b>
<i>untuk cetak miring (italic)</i>
<u>untuk garis bawah (underscore / underline)</u>
<small>untuk ukuran teks kecil</small>
<big>untuk ukuran teks besar</big>
<del>StrikeOut </del>
<tt>Efek Mesin Tik </tt>
<sub>Subscript H₂O</sub>
<sup>Superscript 2m³ </sup>
<pre>Digunakan untuk preformating </pre>
Melakukan Pengaturan Huruf
<body>
 Mengatur Default Font 
 <basefont face="Arial" size="3" color="black" />
 Pengaturan Huruf
 <font face="Times New Roman" size="12" color="green">
   Ini efek Font
 </font>
</body>

Tag <acronim>

<acronym title="Korupsi Kolusi Nepotisme">KKN</acronym>

Pemberantasan
KKN


 Special Characters (diawali "&" diakhiri ";")
 
 © copy ® reg
 & amp
 × times ÷  divide
 < lt > gt
 ½ ¾ frac12 frac34

Pengenalan HTML

Fungsi Web Browser

Browsing di internet

Penerjemah dokumen HTML / XHTML

HTML (Hyper Text MarkUp Language)

format dokumen standar pada web

berupa teks murni / plain text

terbentuk dari tag-tag

xhtml merupakan pengembangan dari HTML

Aturan dalam dokumen XHTML

tag ditulis dalam huruf kecil

tag harus berpasangan

tidak memperhatikan enter atau spasi

nama file diakhiri .html atau .htm


 Kerangka Utama Dokumen HTML
 <html>
  <head>
   <title> Ini Judul </title> 
  </head>
  <body>
   Isi Dokumen
  </body>
 </html>

Tag

penanda dalam dokumen XHTML

diawal tanda

diakhiri tanda >

menggunakan huruf kecil

selalu berpasangan


contoh  <html> </html>
 <head> </head>
 <body> </body>
 <title> </title>


Mengganti Warna Latar (Background)
pada <body> tuliskan bgcolor="aqua"
contoh : <body bgcolor="aqua" >
  Ini Isi
  <body>
Menuliskan komentar pada dokumen
nb : komentar tidak akan muncul pada browser
pada awal komentar <!-- 
pada akhir komentar -->
contoh : <!--Ini Komentar-->
Membuat baris baru (Enter)
ketikkan </br> pada akhir kalimat
contoh : 
 baris 1</br>
 baris 2
Tag <p>
digunakan untuk mengelompokkan suatu text ke dalam suatu paragraf
<body> 
 <p align="center"> 
  digunakan untuk mengelompokkan suatu text ke dalam suatu paragraf
 <p> 
</body>
Tag Heading
<body> 
 <h1 align="center">Ada 6 ukuran heading dari h1 - h6<h1>
</body>
Tag <hr>
<hr width="5" size="20" align="center" noshade />

Linkbar