nmr 1
<html>
<head>
</head>
<body>
<script language="javascript">
var a=window.prompt("Masukkan jumlah klik yang anda inginkan","");
var i=1;
while(i<=a){
window.alert("anda tinggal klik - "+ i);
i++;
}
document.write("Anda tadi meng-klik sebanyak "+a+" kali");
</script>
</body>
</html>
nmr2
<html>
<head>
</head>
<body>
<script language="javascript">
var tgl=new Array();
var hari= new Array("Senin","Selasa","Rabu","Kamis","Jumat","Sabtu","Minggu");
var bln=new Array("Januari","Febuary","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");
var thn=new Array();
var i;
for(i=0;i<=30;i++){
tgl[i]=i+1;
}
for(i=0;i<=5000;i++){
thn[i]=i;
}
document.write("<form>");
document.write("Generet tanggal : ");
document.write("<select name='hari'>");
for(i=0;i<=6;i++){
document.write("<option>"+hari[i]+"</option>");
}
document.write("</select>");
document.write("<select name='tanggal'>");
for(i=0;i<=30;i++){
document.write("<option>"+tgl[i]+"</option>");
}
document.write("</select>");
document.write(" - ");
document.write("<select name='bulan'>");
for(i=0;i<12;i++){
document.write("<option>"+bln[i]+"</option>");
}
document.write("</select>");
document.write(" - ");
document.write("<select name='tahun'>");
for(i=0;i<=5000;i++){
document.write("<option>"+thn[i]+"</option>");
}
document.write("</select>");
document.write("</form>");
</script>
</body>
</html>
nmr3
<html>
<head>
</head>
<body>
<script language="javascript">
var a=window.prompt("Masukkan jumlah baris :","");
var b=window.prompt("Masukkan jumlah kolom :","");
var i,j;
document.write("<table border='1' width='80%'>");
for(i=1;i<=a;i++){
document.write("<tr>");
for(j=1;j<=b;j++){
var x=i*j;
if(i==j)
document.write("<td bgcolor='black'><font color='white'>"+x+"</font></td>");
else
document.write("<td>"+x+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
nmr 4
<html>
<head>
</head>
<body>
<script language="javascript">
var a=window.prompt("Masukkan jumlah inputan","");
var b= new Array();
var i=1;
var x;
for(i=0;i<a;i++){
x=window.prompt("Masukan angka ke - " + (i+1),"");
b[i]=parseInt(x);
}
document.write("Array1 shorting ascending : <br>");
document.write(b.sort().join("<br>"));
document.write("<br> Array2 shorting ascending : <br>");
document.write(b.reverse().join("<br>"));
</script>
</body>
</html>
Rabu, 05 Mei 2010
Selasa, 27 April 2010
rangkuman 09
Teori :
Dibawah ini adalah contoh-contoh penggunaan CSS disertai dengan penjelasannya masing-masing. Perlu diingat bahwa penambahan script pada CSS hanya untuk mempercantik tampilan dari HTML.
Contoh 1.
< HTML>
< BODY>
< SPAN STYLE = "font-size: xx-small"> xx-small< /SPAN>
< SPAN STYLE = "font-size: x-small"> x-small< /SPAN>
< SPAN STYLE = "font-size: small"> small< /SPAN>
< SPAN STYLE = "font-size: medium"> medium< /SPAN>
< SPAN STYLE = "font-size: large"> large< /SPAN>
< SPAN STYLE = "font-size: x-large"> x-large< /SPAN>
< SPAN STYLE = "font-size: xx-large"> xxlarge< /SPAN>
< P STYLE = "font-size: 20px">
Teks berukuran 20 piksel< BR>
< SPAN STYLE = "font-size: larger">
Dalam paragraf yang sama teks ini lebih besar< BR>
< /SPAN>
< SPAN STYLE = "font-size: smaller">
Dalam paragraf yang sama teks ini lebih kecil< BR>
< /SPAN>
< SPAN STYLE = "font-size: 150%">
Dalam paragraf yang sama teks ini lebih besar 150%< BR>
< /SPAN>
< /P>
< /BODY>
< /HTML>
Contoh2.
< HTML>
< BODY>
< P STYLE = "text-decoration: underline">
Digarisbawahi
< /P>
< P STYLE = "text-decoration: line-through">
Dicoret
< /P>
< P STYLE = "text-decoration: blink">
Berkedip
< /P>
< P STYLE = "text-decoration: underline">
< SPAN STYLE = "text-decoration: blink">
Digarisbawahi dan berkedip
< /SPAN>
< /P>
< /BODY>
< /HTML>
Contoh3.
< HTML>
< HEAD>
< TITLE> Latihan gt deh< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {BACKGROUND-COLOR:AQUA;}
H1 { BACKGROUND-COLOR:RED; }
H2 { BACKGROUND-COLOR:YELLOW;}
P { BACKGROUND-COLOR:PINK; }
< /STYLE>
< /HEAD>
< BODY>
< H1> Header 1 warna merah< /H1>
< H2> Header 2 warna kuning< /H2>
< P>
Bintang Kecil
Di Langit yang Biru
Amat Banyak
Menghias Angkasa
< /P>
< /BODY>
< /HTML>
Contoh4.
< HTML>
< HEAD>
< TITLE> Ini Judulnya< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUND-IMAGE:
URL('gambar.jpg');
BACKGROUND-REPEAT:
REPEAT-Y;
}
< /STYLE>
< /HEAD>
< BODY>
< FONT COLOR="RED"> < H1>
Menggunakan Gambar Sebagai Background
dengan perulangan vertikal< /H1> < /FONT>
< /BODY>
< /HTML>
Contoh5.
< HTML>
< HEAD>
< TITLE> Ini Judulnya< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUND-IMAGE:
URL('gambar.jpg');
BACKGROUND-REPEAT:
REPEAT-X;
}
< /STYLE>
< /HEAD>
< BODY>
< FONT COLOR="RED"> < H1>
Menggunakan Gambar Sebagai Background
dengan perulangan horizontal< /H1> < /FONT>
< /BODY>
< /HTML>
Contoh6.
< HTML>
< HEAD>
< TITLE> Efron CSS3< /TITLE>
< STYLE TYPE="TEXT/CSS">
h1 {color:white;background-color:green;BORDER-STYLE:Dashed;BORDER-COLOR:blue;PADDING-LEFT:1cm;PADDING-TOP:1cm;PADDING-BOTTOM:1cm;PADDING-RIGHT:1cm;margin-left:5cm;}
h2 {color:white;background-color:red;BORDER-STYLE:Dashed;BORDER-COLOR:black;PADDING-LEFT:1cm;PADDING-TOP:1cm;PADDING-BOTTOM:1cm;PADDING-RIGHT:1cm;margin-right:5cm;}
h3 {color:white;background-color:blue;BORDER-STYLE:Dashed;BORDER-COLOR:yellow;PADDING-LEFT:1cm;PADDING-TOP:1cm;PADDING-BOTTOM:1cm;PADDING-RIGHT:1cm;margin-left:5cm;margin-right:5cm;}
< /STYLE>
< /HEAD>
< BODY>
< h1> ini paragraf 1...< /h1>
< h2> ini paragraf 2...< /h2>
< h3> ini paragraf 3...< /h3>
< /BODY>
< /HTML>
Penjelasan :
color:------; untuk pembuatan warna tulisan.
background-color:------; untuk pembuatan warna latar belakang.
BORDER-STYLE :----- ; untuk pembuatan tipe garis tepi ada dashed, dotted, dashed dotted.
BORDER-COLOR:----; untuk pembuatan warna garis tepi.
PADDING-(Left, Right, Top, Bottom):--cm; untuk mengatur jarak dari garis tepi.
margin-(Left, Right,Top, Bottom):--cm; untuk mengatur jarak dari batas yang ada.
Contoh7.
< HTML>
< HEAD>
< TITLE> Ini judulnya< / TITLE >
< style type="text/css">
h1.satu {front-style :italic;color:red;background-color:aqua;}
h1.dua{color:white;background-color:black;text-decoration:underline;}
h2.dua{font-family:arial;color:blue;background-color:yellow;}
< /style>
< /HEAD>
< BODY>
< h1 class="satu"> Header1 class satu< /h1>
< h1 class="dua"> Header1 class dua< /h1>
< h1 class="satu"> Header1 class satu< /h1>
< h2 class="dua"> Header2 class dua< /h2>
< p> Penerapan class satu pada < h1> dan< h2> akan memberikan efek style yang berbeda karena menggunakan class yang sifatnya spesifik {spesifik class}.
< br>
Penerapan class dua pada < H2> tidak menghasilkan efek apapun karena class dua hanya didefinisikan spesifik untuk < H1>
< /p>
< /BODY>
< /HTML>
Praktikum :
Soal1.
< HTML>
< HEAD>
< TITLE> Ini Judul< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {BACKGROUND-COLOR:grey;}
#satu {FONT-STYLE: ARIAL;COLOR:white;TEXT-ALIGN:CENTER;}
#dua {FONT-FAMILY:arial;COLOR:white;font-size:14pt;}
#tiga {FONT-FAMILY:arial;font-size:16pt;}
#empat {FONT-FAMILY:arial;font-size:18pt;}
#lima {FONT-FAMILY:arial;font-size:22pt;}
#enam {FONT-FAMILY:arial;font-size:24pt;}
#tujuh {FONT-FAMILY:arial;font-size:28pt;}
#delapan {FONT-STYLE: ARIAL;COLOR:white;TEXT-ALIGN:right;}
< /STYLE>
< /HEAD>
< BODY>
< HR WIDTH="100%" SIZE="5" color="red" ALIGN="CENTER"> (membuat garis)
< img src="Gambar.jpg" width="80" height="80" align="right" /> < br/> < br/> < br/> < br/> < br/>
< p id="satu"> (memanggil style satu yang telah dibuat)
Ini susi yang menggambarkan seekor Kappa sedang memancing ikan.< /p> < br>
< p id="dua"> (memanggil style dua yang telah dibuat)
< i> Kappa< /i> adalah makhluk yang digambarkan sebagai makhluk gaib yang tinggal di sungai2 di Jepang. < u> Konon< /u> , katanya kalau kita melemparkan < b> timun< /b> kepadanya, maka kita tidak akan diganggu oleh < i> kappa< /i> .< i> Kappa< /i> adalah < br>
makhluk yang < del> lucu < /del> menyeramkan, oleh karena itu orang Jepang takut bila bertemu dengan < i> Kappa< /i> .
< hr WIDTH="70%" SIZE="5" color="green" ALIGN="CENTER"/> (membuat garis)
< center> < img src="Gambar.jpg" width="80" height="80"/> < /center> < br/>
< p id="satu">
Oginiri cake, akan tetapi sebenarnya terbuat dari nasi dan bumbu-bumbu lainnya, lalu dibentuk seperti kue< sup> cake< /sup> .Diikat dengan < acronym title="nori"> nori< /acronym> sehingga terlihat seperti pita berwarna < p id="delapan"> kehitaman. Dan toppingnya yang membuatnya semakin terlihat < font id="dua"> L< /font> < font id="tiga"> E< /font> < font id="empat"> Z< /font> < font id="lima"> A< /font> < font id="enam"> T< /font> < font id="tujuh"> T ..< /font>
< /p> < /p>
< /BODY>
< /HTML>
Soal2.
< HTML>
< HEAD>
< TITLE> New Document < /TITLE>
< STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE: ARIAL; color:red;font-size:20pt;}
#dua {FONT-STYLE: ARIAL; color:blue;font-size:15pt;}
#tiga {text-decoration:line-through;}
#empat {text-decoration: underline;}
img {Border-style:solid;border-width:10px;PADDING-RIGHT:0cm;}
< /style>
< /head>
< body>
< font id="satu"> P< font id="tiga"> < sub> EMO< /sub> < /font> GRAM< font id="empat"> < sup> AN< /sup> < /font> WEB< /font>
< HR WIDTH="100%" SIZE="10" color="blue" ALIGN="CENTER" NOSHADE>
< b> < big> Belajar< /big> < /b> Pemograman Web untuk Kelas D
< h1 id="dua"> Pariwisata Di Indonesia< /h1>
< img src="Gambar.jpg" width="80" height="80">
< /BODY>
< /HTML>
Soal3.
< HTML>
< HEAD>
< TITLE> New Document < /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {background-color:white;}
#satu {BACKGROUND-IMAGE:URL('Gambar.gif');BACKGROUND-REPEAT:REPEAT-x;FONT-STYLE: ARIAL;COLOR:black;TEXT-ALIGN:CENTER;text-align:center;}
#dua {background-color:yellow;color:red;border-style:solid;}
#tiga {background-color:black;color:white;border-style:dotted;}
< /STYLE>
< /HEAD>
< BODY>
< table width="525" border="0" align="center">
< tr>
< td id="satu"> < h2> WELCOME< /h2> < /td>
< /tr>
< /table>
< p id="dua"> Pemograman Web< /p>
< p id="tiga"> 2010< /p>
< p id="satu"> < h1> Progweb< /h1> < /p>
< /BODY>
< /HTML>
Dibawah ini adalah contoh-contoh penggunaan CSS disertai dengan penjelasannya masing-masing. Perlu diingat bahwa penambahan script pada CSS hanya untuk mempercantik tampilan dari HTML.
Contoh 1.
< HTML>
< BODY>
< SPAN STYLE = "font-size: xx-small"> xx-small< /SPAN>
< SPAN STYLE = "font-size: x-small"> x-small< /SPAN>
< SPAN STYLE = "font-size: small"> small< /SPAN>
< SPAN STYLE = "font-size: medium"> medium< /SPAN>
< SPAN STYLE = "font-size: large"> large< /SPAN>
< SPAN STYLE = "font-size: x-large"> x-large< /SPAN>
< SPAN STYLE = "font-size: xx-large"> xxlarge< /SPAN>
< P STYLE = "font-size: 20px">
Teks berukuran 20 piksel< BR>
< SPAN STYLE = "font-size: larger">
Dalam paragraf yang sama teks ini lebih besar< BR>
< /SPAN>
< SPAN STYLE = "font-size: smaller">
Dalam paragraf yang sama teks ini lebih kecil< BR>
< /SPAN>
< SPAN STYLE = "font-size: 150%">
Dalam paragraf yang sama teks ini lebih besar 150%< BR>
< /SPAN>
< /P>
< /BODY>
< /HTML>
Contoh2.
< HTML>
< BODY>
< P STYLE = "text-decoration: underline">
Digarisbawahi
< /P>
< P STYLE = "text-decoration: line-through">
Dicoret
< /P>
< P STYLE = "text-decoration: blink">
Berkedip
< /P>
< P STYLE = "text-decoration: underline">
< SPAN STYLE = "text-decoration: blink">
Digarisbawahi dan berkedip
< /SPAN>
< /P>
< /BODY>
< /HTML>
Contoh3.
< HTML>
< HEAD>
< TITLE> Latihan gt deh< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {BACKGROUND-COLOR:AQUA;}
H1 { BACKGROUND-COLOR:RED; }
H2 { BACKGROUND-COLOR:YELLOW;}
P { BACKGROUND-COLOR:PINK; }
< /STYLE>
< /HEAD>
< BODY>
< H1> Header 1 warna merah< /H1>
< H2> Header 2 warna kuning< /H2>
< P>
Bintang Kecil
Di Langit yang Biru
Amat Banyak
Menghias Angkasa
< /P>
< /BODY>
< /HTML>
Contoh4.
< HTML>
< HEAD>
< TITLE> Ini Judulnya< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUND-IMAGE:
URL('gambar.jpg');
BACKGROUND-REPEAT:
REPEAT-Y;
}
< /STYLE>
< /HEAD>
< BODY>
< FONT COLOR="RED"> < H1>
Menggunakan Gambar Sebagai Background
dengan perulangan vertikal< /H1> < /FONT>
< /BODY>
< /HTML>
Contoh5.
< HTML>
< HEAD>
< TITLE> Ini Judulnya< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUND-IMAGE:
URL('gambar.jpg');
BACKGROUND-REPEAT:
REPEAT-X;
}
< /STYLE>
< /HEAD>
< BODY>
< FONT COLOR="RED"> < H1>
Menggunakan Gambar Sebagai Background
dengan perulangan horizontal< /H1> < /FONT>
< /BODY>
< /HTML>
Contoh6.
< HTML>
< HEAD>
< TITLE> Efron CSS3< /TITLE>
< STYLE TYPE="TEXT/CSS">
h1 {color:white;background-color:green;BORDER-STYLE:Dashed;BORDER-COLOR:blue;PADDING-LEFT:1cm;PADDING-TOP:1cm;PADDING-BOTTOM:1cm;PADDING-RIGHT:1cm;margin-left:5cm;}
h2 {color:white;background-color:red;BORDER-STYLE:Dashed;BORDER-COLOR:black;PADDING-LEFT:1cm;PADDING-TOP:1cm;PADDING-BOTTOM:1cm;PADDING-RIGHT:1cm;margin-right:5cm;}
h3 {color:white;background-color:blue;BORDER-STYLE:Dashed;BORDER-COLOR:yellow;PADDING-LEFT:1cm;PADDING-TOP:1cm;PADDING-BOTTOM:1cm;PADDING-RIGHT:1cm;margin-left:5cm;margin-right:5cm;}
< /STYLE>
< /HEAD>
< BODY>
< h1> ini paragraf 1...< /h1>
< h2> ini paragraf 2...< /h2>
< h3> ini paragraf 3...< /h3>
< /BODY>
< /HTML>
Penjelasan :
color:------; untuk pembuatan warna tulisan.
background-color:------; untuk pembuatan warna latar belakang.
BORDER-STYLE :----- ; untuk pembuatan tipe garis tepi ada dashed, dotted, dashed dotted.
BORDER-COLOR:----; untuk pembuatan warna garis tepi.
PADDING-(Left, Right, Top, Bottom):--cm; untuk mengatur jarak dari garis tepi.
margin-(Left, Right,Top, Bottom):--cm; untuk mengatur jarak dari batas yang ada.
Contoh7.
< HTML>
< HEAD>
< TITLE> Ini judulnya< / TITLE >
< style type="text/css">
h1.satu {front-style :italic;color:red;background-color:aqua;}
h1.dua{color:white;background-color:black;text-decoration:underline;}
h2.dua{font-family:arial;color:blue;background-color:yellow;}
< /style>
< /HEAD>
< BODY>
< h1 class="satu"> Header1 class satu< /h1>
< h1 class="dua"> Header1 class dua< /h1>
< h1 class="satu"> Header1 class satu< /h1>
< h2 class="dua"> Header2 class dua< /h2>
< p> Penerapan class satu pada < h1> dan< h2> akan memberikan efek style yang berbeda karena menggunakan class yang sifatnya spesifik {spesifik class}.
< br>
Penerapan class dua pada < H2> tidak menghasilkan efek apapun karena class dua hanya didefinisikan spesifik untuk < H1>
< /p>
< /BODY>
< /HTML>
Praktikum :
Soal1.
< HTML>
< HEAD>
< TITLE> Ini Judul< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {BACKGROUND-COLOR:grey;}
#satu {FONT-STYLE: ARIAL;COLOR:white;TEXT-ALIGN:CENTER;}
#dua {FONT-FAMILY:arial;COLOR:white;font-size:14pt;}
#tiga {FONT-FAMILY:arial;font-size:16pt;}
#empat {FONT-FAMILY:arial;font-size:18pt;}
#lima {FONT-FAMILY:arial;font-size:22pt;}
#enam {FONT-FAMILY:arial;font-size:24pt;}
#tujuh {FONT-FAMILY:arial;font-size:28pt;}
#delapan {FONT-STYLE: ARIAL;COLOR:white;TEXT-ALIGN:right;}
< /STYLE>
< /HEAD>
< BODY>
< HR WIDTH="100%" SIZE="5" color="red" ALIGN="CENTER"> (membuat garis)
< img src="Gambar.jpg" width="80" height="80" align="right" /> < br/> < br/> < br/> < br/> < br/>
< p id="satu"> (memanggil style satu yang telah dibuat)
Ini susi yang menggambarkan seekor Kappa sedang memancing ikan.< /p> < br>
< p id="dua"> (memanggil style dua yang telah dibuat)
< i> Kappa< /i> adalah makhluk yang digambarkan sebagai makhluk gaib yang tinggal di sungai2 di Jepang. < u> Konon< /u> , katanya kalau kita melemparkan < b> timun< /b> kepadanya, maka kita tidak akan diganggu oleh < i> kappa< /i> .< i> Kappa< /i> adalah < br>
makhluk yang < del> lucu < /del> menyeramkan, oleh karena itu orang Jepang takut bila bertemu dengan < i> Kappa< /i> .
< hr WIDTH="70%" SIZE="5" color="green" ALIGN="CENTER"/> (membuat garis)
< center> < img src="Gambar.jpg" width="80" height="80"/> < /center> < br/>
< p id="satu">
Oginiri cake, akan tetapi sebenarnya terbuat dari nasi dan bumbu-bumbu lainnya, lalu dibentuk seperti kue< sup> cake< /sup> .Diikat dengan < acronym title="nori"> nori< /acronym> sehingga terlihat seperti pita berwarna < p id="delapan"> kehitaman. Dan toppingnya yang membuatnya semakin terlihat < font id="dua"> L< /font> < font id="tiga"> E< /font> < font id="empat"> Z< /font> < font id="lima"> A< /font> < font id="enam"> T< /font> < font id="tujuh"> T ..< /font>
< /p> < /p>
< /BODY>
< /HTML>
Soal2.
< HTML>
< HEAD>
< TITLE> New Document < /TITLE>
< STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE: ARIAL; color:red;font-size:20pt;}
#dua {FONT-STYLE: ARIAL; color:blue;font-size:15pt;}
#tiga {text-decoration:line-through;}
#empat {text-decoration: underline;}
img {Border-style:solid;border-width:10px;PADDING-RIGHT:0cm;}
< /style>
< /head>
< body>
< font id="satu"> P< font id="tiga"> < sub> EMO< /sub> < /font> GRAM< font id="empat"> < sup> AN< /sup> < /font> WEB< /font>
< HR WIDTH="100%" SIZE="10" color="blue" ALIGN="CENTER" NOSHADE>
< b> < big> Belajar< /big> < /b> Pemograman Web untuk Kelas D
< h1 id="dua"> Pariwisata Di Indonesia< /h1>
< img src="Gambar.jpg" width="80" height="80">
< /BODY>
< /HTML>
Soal3.
< HTML>
< HEAD>
< TITLE> New Document < /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {background-color:white;}
#satu {BACKGROUND-IMAGE:URL('Gambar.gif');BACKGROUND-REPEAT:REPEAT-x;FONT-STYLE: ARIAL;COLOR:black;TEXT-ALIGN:CENTER;text-align:center;}
#dua {background-color:yellow;color:red;border-style:solid;}
#tiga {background-color:black;color:white;border-style:dotted;}
< /STYLE>
< /HEAD>
< BODY>
< table width="525" border="0" align="center">
< tr>
< td id="satu"> < h2> WELCOME< /h2> < /td>
< /tr>
< /table>
< p id="dua"> Pemograman Web< /p>
< p id="tiga"> 2010< /p>
< p id="satu"> < h1> Progweb< /h1> < /p>
< /BODY>
< /HTML>
Kamis, 01 April 2010
rangkuman 8
Model pendefinisian style CSS secara Eksternal memungkinkan beberapa file dokumen HTML untuk menggunakan efek style CSS yang sama tanpa harus mendefinisikan ulang. Hal ini dimungkinkan dengan menempatkan pendefinisian style CSS dalam file tersendiri yang diberi nama dengan ekstensi *.css.
Selanjutnya di bagian BODY dari tiap dokumen HTML yang akan mengimplementasikan efek style CSS diberi tag . Adapun format lengkap dari tag yang digunakan adalah sebagai berikut (LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="nama_file.css)
Selanjutnya di bagian BODY dari tiap dokumen HTML yang akan mengimplementasikan efek style CSS diberi tag . Adapun format lengkap dari tag yang digunakan adalah sebagai berikut (LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="nama_file.css)
rangkuman 8
Model pendefinisian style CSS secara Eksternal memungkinkan beberapa file dokumen HTML untuk menggunakan efek style CSS yang sama tanpa harus mendefinisikan ulang. Hal ini dimungkinkan dengan menempatkan pendefinisian style CSS dalam file tersendiri yang diberi nama dengan ekstensi *.css.
Selanjutnya di bagian BODY dari tiap dokumen HTML yang akan mengimplementasikan efek style CSS diberi tag . Adapun format lengkap dari tag yang digunakan adalah sebagai berikut (LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="nama_file.css)
Selanjutnya di bagian BODY dari tiap dokumen HTML yang akan mengimplementasikan efek style CSS diberi tag . Adapun format lengkap dari tag yang digunakan adalah sebagai berikut (LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="nama_file.css)
Selasa, 23 Maret 2010
rangkuman 7
contoh tag form/ source code
<form>
<table>
<tr><td>Username</td><td>:</td><td><input type="text" name="nama" size=15 maxlength="15" value="Ardy"/></td></tr>
<tr><td>Password</td><td>:</td><td><input type="password" name="pasword" value="abc"/></td></tr>
<tr><td>Komentar</td><td>:</td><td><textarea name="komentar" cols="20" rows="5" warp>isi dengan text</textarea>
<tr><td>jenis kelamin</td><td>:</td><td><input type="radio" name="Kelamin" value="Pria" checked/>Laki-Laki<br/><input type="radio" name="Kelamin" value="Wanita"/>Perempuan<br/></td></tr>
<tr><td>Hobi</td><td>:</td><td><input type="checkbox" name="renang"/>Renang<br/><input type="checkbox" name="baca"/>membaca<br/><input type="checkbox" name="coding" checked/>coding<br/><input type="checkbox" name="tidur" checked/>Tidur</td></tr>
<tr><td>Distro Linux Favorit</td><td>:</td><td><select name="distro">
<option value="Fedora"/>Fedora Core
<option value="suse"/>Open Suse
<option value="ubuntu" selected/>Ubuntu
<option value="debian"/>Debian
</select></td></tr>
<tr><td>Distro Windows Favorit</td><td>:</td><td><select name="OS" multiple>
<option value="windows98"/>Windows 98
<option value="windowsxp" selected/>Windows XP
<option value="windowsvista"/>Windows Vista
<option value="windows7" selected/>Windows 7
</select></td></tr>
</table>
</form>
<form>
<table>
<tr><td>Username</td><td>:</td><td><input type="text" name="nama" size=15 maxlength="15" value="Ardy"/></td></tr>
<tr><td>Password</td><td>:</td><td><input type="password" name="pasword" value="abc"/></td></tr>
<tr><td>Komentar</td><td>:</td><td><textarea name="komentar" cols="20" rows="5" warp>isi dengan text</textarea>
<tr><td>jenis kelamin</td><td>:</td><td><input type="radio" name="Kelamin" value="Pria" checked/>Laki-Laki<br/><input type="radio" name="Kelamin" value="Wanita"/>Perempuan<br/></td></tr>
<tr><td>Hobi</td><td>:</td><td><input type="checkbox" name="renang"/>Renang<br/><input type="checkbox" name="baca"/>membaca<br/><input type="checkbox" name="coding" checked/>coding<br/><input type="checkbox" name="tidur" checked/>Tidur</td></tr>
<tr><td>Distro Linux Favorit</td><td>:</td><td><select name="distro">
<option value="Fedora"/>Fedora Core
<option value="suse"/>Open Suse
<option value="ubuntu" selected/>Ubuntu
<option value="debian"/>Debian
</select></td></tr>
<tr><td>Distro Windows Favorit</td><td>:</td><td><select name="OS" multiple>
<option value="windows98"/>Windows 98
<option value="windowsxp" selected/>Windows XP
<option value="windowsvista"/>Windows Vista
<option value="windows7" selected/>Windows 7
</select></td></tr>
</table>
</form>
Selasa, 09 Maret 2010
rangkuman 6
tag frame dan frameset
tag frameset atribut cols=40%,*: digunakan untuk membuat 2 buah frame dengan ukuran 40% dan 60% secara vertikal
frame atribut src: digunakan untuk membuat sebuah frame agar menampilkan hal dari sebuah html yang dipilih
tag frame: digunakan utuk memposisikan frame secara horizontal
atribut border: digunakan untuk memberi ukuran untuk pemisah antar frame
tag iframe: digunakan untuk membuat sebuah frame dengan implementasi yang lebih simple
tag frameset atribut cols=40%,*: digunakan untuk membuat 2 buah frame dengan ukuran 40% dan 60% secara vertikal
frame atribut src: digunakan untuk membuat sebuah frame agar menampilkan hal dari sebuah html yang dipilih
tag frame: digunakan utuk memposisikan frame secara horizontal
atribut border: digunakan untuk memberi ukuran untuk pemisah antar frame
tag iframe: digunakan untuk membuat sebuah frame dengan implementasi yang lebih simple
rangkuman5
tag table: digunakann untukmembuat table.
tag caption, di dalam tag table: digunakan utuk memberikan judul pada table
tag tr dalam tag table: digunakan untuk memberikan/menambah baris
tag th: memberikan heading pada suatu cell
tag td: memberikan nilai pada suatu cell
dalam tag table kita dapat menambahkan atribut bgcolor, fungsinya untuk memberikan warna pada suatu table
atrbut cellpadding, cellspasing: digunakan utuk memeberi jarak pada suatu cell
atribut width, atribut height: digunakan utuk mengubah ukuran suatu cell
atribut align: memposisikan suatu kata atau kalimat secara horizontal
atribut valign: memposisikan suatu kata atau kalimat secara vertikal
atribut rowspan, colspan: mengabungkan cell secara baris, colom
tag caption, di dalam tag table: digunakan utuk memberikan judul pada table
tag tr dalam tag table: digunakan untuk memberikan/menambah baris
tag th: memberikan heading pada suatu cell
tag td: memberikan nilai pada suatu cell
dalam tag table kita dapat menambahkan atribut bgcolor, fungsinya untuk memberikan warna pada suatu table
atrbut cellpadding, cellspasing: digunakan utuk memeberi jarak pada suatu cell
atribut width, atribut height: digunakan utuk mengubah ukuran suatu cell
atribut align: memposisikan suatu kata atau kalimat secara horizontal
atribut valign: memposisikan suatu kata atau kalimat secara vertikal
atribut rowspan, colspan: mengabungkan cell secara baris, colom
Selasa, 02 Maret 2010
Rangkuman 4
ada 2 tipe list:
1. tipe yang memperhatikan urutan tag ol
2. tipe yang tak memperhatikan urutan tag ul
dalam tag ol ada berbagai tipe
tipe 1,A,a,I,i
dalam tag ul ada berbagai tipe
tipe circle,disc,square
dalam tag dl ada tag dt dan dd
dl untuk judul, dd untuk isinya
LINK
untuk link kita menggunakan tag a, dimana atributnya adalah href, untuk alamat tujuan.
dalam tag a adapula target, target untuk menentukan letak dimana kita mau ditampilkan
untuk melink ke suatu web, kita perlu menmbahkan http://
untuk melink dengan mengunakan gambar, kita mengunakan atribut img dalam tag a
1. tipe yang memperhatikan urutan tag ol
2. tipe yang tak memperhatikan urutan tag ul
dalam tag ol ada berbagai tipe
tipe 1,A,a,I,i
dalam tag ul ada berbagai tipe
tipe circle,disc,square
dalam tag dl ada tag dt dan dd
dl untuk judul, dd untuk isinya
LINK
untuk link kita menggunakan tag a, dimana atributnya adalah href, untuk alamat tujuan.
dalam tag a adapula target, target untuk menentukan letak dimana kita mau ditampilkan
untuk melink ke suatu web, kita perlu menmbahkan http://
untuk melink dengan mengunakan gambar, kita mengunakan atribut img dalam tag a
Selasa, 23 Februari 2010
rangkuman 3
@lt; body backggroud="merapi.jpg"@lt
-->memasukan sebuah gambar menjadi background
tag img ,atribut scr="pic1.jpg"/
--> memasukan sebuah gambar
atribut align pada tag img = meposisikan gambar
atribut alt pada tag img= memberi nama pada gambar
atribut width pada tag img= memberi lebar pada suatu gambar
atribut height pada tag img= memberi tinggi pada suatu gambar
tag marquee atribut direction=mengatur arah pergerakan suatu kata
tag marquee atribut behavior =mengatur pergeraka dan memberi variasi
tag bgsound scr= memasukan suatu lagu
atribut loop pada tag bgsound= memberi ukuran berapa kali lagu akan diputar
tag embed atribut scr= memasukan suatu video
tag width atribut scr,height= memeberi ukuran pada tampilan video
tag bdo atribut dir yang isinya rtl=mengatur agar suatu kata akan ditampilkan dari kanan ke kiri
-->memasukan sebuah gambar menjadi background
tag img ,atribut scr="pic1.jpg"/
--> memasukan sebuah gambar
atribut align pada tag img = meposisikan gambar
atribut alt pada tag img= memberi nama pada gambar
atribut width pada tag img= memberi lebar pada suatu gambar
atribut height pada tag img= memberi tinggi pada suatu gambar
tag marquee atribut direction=mengatur arah pergerakan suatu kata
tag marquee atribut behavior =mengatur pergeraka dan memberi variasi
tag bgsound scr= memasukan suatu lagu
atribut loop pada tag bgsound= memberi ukuran berapa kali lagu akan diputar
tag embed atribut scr= memasukan suatu video
tag width atribut scr,height= memeberi ukuran pada tampilan video
tag bdo atribut dir yang isinya rtl=mengatur agar suatu kata akan ditampilkan dari kanan ke kiri
Selasa, 16 Februari 2010
rangkuman pertemuan kedua
tag b: kegunaannya untuk mempertebal tulisa
tag i: kegunaan untuk membuat miring tulisan
tag u: kegunaan untuk mengaris bawahi tulisan
tag big: kegunaan untuk membuat besar suatu tulisan
tag small: kegunaan membuat kecil suatu tulisan
tag sup: keguanaan membuat suatu tulisan sedikit lebih atas.. separti pangkat
tag sub keguanaan membuat suatu tulisan sedikit lebih bawah
tag tt: membuat suatu tulisan seperti tulisan mesin tik
tag del: memberi efek coretan pada suatu tulisan
tag pre: untuk melakukan preformat
tag font: untuk mengubah jenis huruf, ukuran huruf dan warna huruf
tag base font: mengubah standar ukuran
tag acronym: digunakan untuk memberi keterangan tambahan
tag i: kegunaan untuk membuat miring tulisan
tag u: kegunaan untuk mengaris bawahi tulisan
tag big: kegunaan untuk membuat besar suatu tulisan
tag small: kegunaan membuat kecil suatu tulisan
tag sup: keguanaan membuat suatu tulisan sedikit lebih atas.. separti pangkat
tag sub keguanaan membuat suatu tulisan sedikit lebih bawah
tag tt: membuat suatu tulisan seperti tulisan mesin tik
tag del: memberi efek coretan pada suatu tulisan
tag pre: untuk melakukan preformat
tag font: untuk mengubah jenis huruf, ukuran huruf dan warna huruf
tag base font: mengubah standar ukuran
tag acronym: digunakan untuk memberi keterangan tambahan
Jumat, 12 Februari 2010
rangkuman pertemuan pertama
fungsi web browser : - browsing/surfing internet
- penerjemah dokumen HTML/XHTML
HTML/XHTML adalah : Hyper Text Markup Language
format dokumen standar pada web
berupa teks murni/plain text
XHTML merupakan pengembangan dari HTML
terbentuk dari tag-tag
tag adalah: penanda dalam XHTML
diawali tanda <>
menggunakan huruf kecil
selalu berpasangan
aturan dokumen XHTML: tag ditulis dengan huruf kecil
tag harus berpasangan
tidak memperhatikan enter atau spasi
nama file diakhiri html
cara ganti warna latar: padatag body tambahkan bgcolor="warna yang dimaksud"
cara sertakan komentar :di dalam tag body sertakan ()
kegunaan tag br adalah untuk mengganti baris
kegunaan tag p adalah untuk membuat palagraf
terdapat 6 ukuran heading mulai dari ukuran h1 sampai ukuran h6
- penerjemah dokumen HTML/XHTML
HTML/XHTML adalah : Hyper Text Markup Language
format dokumen standar pada web
berupa teks murni/plain text
XHTML merupakan pengembangan dari HTML
terbentuk dari tag-tag
tag adalah: penanda dalam XHTML
diawali tanda <>
menggunakan huruf kecil
selalu berpasangan
aturan dokumen XHTML: tag ditulis dengan huruf kecil
tag harus berpasangan
tidak memperhatikan enter atau spasi
nama file diakhiri html
cara ganti warna latar: padatag body tambahkan bgcolor="warna yang dimaksud"
cara sertakan komentar :di dalam tag body sertakan ()
kegunaan tag br adalah untuk mengganti baris
kegunaan tag p adalah untuk membuat palagraf
terdapat 6 ukuran heading mulai dari ukuran h1 sampai ukuran h6
Langganan:
Postingan (Atom)