Untuk Display mempunyai 2 property yang utama yaitu:
- None: Tidak kelihatan
- Block: kelihatan
Sedangkan untuk Visibility juga mempunyai 2 property yang dapat diset nilainya yaitu:
- Hidden: Tidak kelihatan
- Visible: kelihatan
Perbedaan diantara keduanya mungkin tidak begitu menyolok, namun hanya masalah space saja, dimana jika kita menambahkan space pada bagian yang akan dihilangkan, penggunaan style visibility:hidden akan tetap memunculkan space tersebut.
Berikut contoh-contohnya:
<img style="display: block;" src="gambar.jpg" width="100" height="100" />
<img style="display: none;" src="gambar.jpg" width="100" height="100" />
Terus misalnya kita akan membuat sebuah trigger yang akan memunculkan dan menyembunyikan gambar ataupun object lainnya. Dapat kita tuliskan sebagai berikut:
<script>
function changeme(id, action) {
if (action=="hide") {
document.getElementById(id).style.display = "none";
} else {
document.getElementById(id).style.display = "block";
}
}
</script>
<img id="myIMG" style="display: none;" src="the_source_img_path" width="100" height="100" />
<span onclick="changeme('myIMG', 'hide');" style="color: blue; text-decoration: underline; cursor: pointer;">Hide the image</span>
<span onclick="changeme('myIMG', 'show');" style="color: blue; text-decoration: underline; cursor: pointer;">Show the image</span>
[ add comment ] | permalink |
( 0 / 0 )Dengan menggunakan CSS, kita dapat membuat variasi background untuk interface halaman web kita. Berikut ini adalah contoh2nya:
Mendefinisikan background dengan warna kuning
p { background-color: yellow; }
Menggunakan image untuk background halaman
body
{
background-image: url("gambar.jpg")
}
Membuat watermark (jika discroll, gambar tidak akan bergerak)
body
{
background-image: url("gambar.jpg");
background-attachment: fixed
}
Mengulang gambar ke samping
body
{
background-image: url("gambar.jpg");
background-repeat: repeat-x;
}
Mengulang gambar ke bawah
body
{
background-image: url("gambar.jpg");
background-repeat: repeat-y;
}
Meletakkan background pada posisi tertentu
body
{
background-image: url("teepees.jpg");
background-repeat: no-repeat;
background-position: 100px 50px
}
body
{
background-image: url("teepees.jpg");
background-repeat: no-repeat;
background-position: 50% 50%
}
[ add comment ] | permalink |
( 0 / 0 )JavaScript adalah aplikasi pemrograman yang dapat kita gunakan untuk membuat halaman situs kita menjadi lebih dinamis dan atraktif. Contoh penggunaan JavaScript yang kita pelajari nantinya adalah bagaimana kita bisa membuat animasi dalam halaman situs kita. Berikut adalah contoh program JavaScript.
Menulis teks pada halaman web
<HTML>
<HEAD>
<TITLE>Contoh Pertama Program JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
document.write ("Contoh program JavaScript");
</SCRIPT>
</BODY>
</HTML>
Mengevaluasi penekanan tombol
<HTML>
<HEAD>
<TITLE>Contoh Kedua Program JavaScript</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function Tekan ()
{
alert ("Selamat belajar JavaScript!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE = "button" VALUE = " Coba tekan tombol ini "
onClick="Tekan ()">
</FORM>
</BODY>
</HTML>
Penjumlahan sederhana
<HTML>
<HEAD>
<TITLE>Jawaban Soal Latihan 1.2</TITLE>
<SCRIPT language = "JavaScript">
function Tekan ()
{
var Bil1 = parseFloat (document.fmForm.Bilangan1.value);
if (isNaN (Bil1))
Bil1 = 0.0;
var Bil2 = parseFloat (document.fmForm.Bilangan2.value);
if (isNaN (Bil2))
Bil2 = 0.0;
var Hasil = Bil1 + Bil2;
alert ("Hasil penjumlahan = " + Hasil);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = "fmForm">
<TABLE>
<TR>
<TD><DIV ALIGN=right><DT>Bilangan pertama</DT></DIV></TD>
<TD><INPUT TYPE="text" NAME=Bilangan1></TD>
</TR>
<TR>
<TD><DIV ALIGN=right><DT>Bilangan kedua</DT></DIV></TD>
<TD><INPUT TYPE="text" NAME=Bilangan2></TD>
</TR>
</TABLE>
<INPUT TYPE="button" VALUE="Jumlahkan"
onClick="Tekan ()">
<INPUT TYPE="reset" VALUE="Reset"></P>
</FORM>
</BODY>
</HTML>
[ add comment ] | permalink |
( 0 / 0 )Yang dimaksud dengan Frameset di dalam dunia website adalah membagi tampilan website ke dalam beberapa file HTML. Jadi dengan Frameset, kita dapat menggabung dua atau lebih file HTML ke dalam satu tampilan website. Jika suatu saat kita browsing di internet dan kita menjumpai tampilan website yang menampilkan banner iklan di bagian tertentu, misalnya di atas atau di bawah dan iklan tersebut tetap ada sekalipun kita scroll halaman web ke bawah, maka kemungkinan website tersebut menggunakan Frameset.
Frameset dapat bervariasi tergantung dari usernya. Sebagai contoh, kita akan membuat Frameset yang tersusun dari 2 bagian web, masing-masing bernama 1.html dan 2.html. File 1.html akan kita letakkan di bagian atas, sedangkan file 2.html kita letakkan ke bagian bawah.
<frameset rows="*,80" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="1.html" name="mainFrame" id="mainFrame" />
<frame src="2.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" />
</frameset>
Variasi lainnya, kita dapat membuat 2 bagian web sebelah kiri dan kanan, tag yang digunakan adalah sebagai berikut:
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="1.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" />
<frame src="2.html" name="mainFrame" id="mainFrame" />
</frameset>
Coba perhatikan perbedaannya. Pada contoh pertama, kita membagi baris, maka properti yang digunakan adalah rows, sedangkan pada contoh yang kedua, yang kita bagi adalah kolomnya, sehingga properti yang digunakan adalah cols.
Berikutnya, contoh frameset dimana kita membagi halaman web ke dalam tiga bagian, yaitu atas, tengah dan bawah. Contoh frameset seperti ini sering kita jumpai pada situs berita, dimana bagian atas dan bawah umumnya digunakan sebagai iklan. Sehingga sekalipun user scroll halaman beritanya, frame bagian atas dan bawah akan tetap ditampilkan. Berikut adalag tag framesetnya,
<frameset rows="80,*,80" frameborder="no" border="0" framespacing="0">
<frame src=1.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frame src="2.html" name="mainFrame" id="mainFrame" title="mainFrame" />
<frame src="3.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="bottomFrame" />
</frameset>
Pada contoh terakhir, halaman web disusun dari 3 file HTML, dimana file utamanya adalah file 2.html. Selanjutnya adalah yang lebih rumit, dimana kita membagi halaman web ke tiga bagian, masing-masing sebelah kiri, atas dan bawah. Berikut adalah contoh tagnya
<frameset rows="*" cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="1.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="2.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frame src="3.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
</frameset>
LATIHAN
Dari latihan yang sudah pernah kita buat, coba ditampilkan ke dalam frameset yang sesuai dengan pembahasan diatas!
[ add comment ] | permalink |
( 0 / 0 )Dengan CSS, kita dapat mengaplikasikan layer di dalam halaman web. Layer adalah bagian dari HTML yang dapat diletakkan di atas halaman yang biasa dengan satuan pixel.
Keuntungan yang dapat diperoleh dengan menggunakan layer dapat bermacam-macam, sedangkan salah satu kerugiannya adalah browser Netscape tidak mempunyai kemampuan untuk mensupport layer.
Coba perhatikan kodenya berikut ini:
#Layer1
{
position:absolute;
width:197px;
height:23px;
z-index:1;
left: 701px;
top: 21px;
}
Ini adalah contoh layer pertama
width dan height masing-masing akan mengeset ukuran layer yaitu lebar dan tinggi dari layer. Sedangkan left dan top merupakan posisi layer terhadap layar. Ingat bahwa layer adalah bagian tersendiri dari halaman web. Nilai z-index adalah menentukan urutan layer.
Ini adalah contoh layer kedua
Layer ketiga dengan warna
Sedangkan untuk menuliskan ke halaman webnya, kita menggunakan tag div sebagai berikut:
<div id="Layer1"><strong>Ini adalah contoh layer pertama</strong></div>
Selanjutnya kita dapat juga memberikan warna pada layer yaitu dengan cara menambahkan property bgcolor sebagai berikut:
#Layer3 {
position:absolute;
width:159px;
height:16px;
z-index:3;
left: 64px;
top: 91px;
background-color: #F0E4CF;
}
LATIHAN
Sebuah perusahaan game developer "GAME MOUSE" yang sedang berkembang bermaksud untuk membuat websiteyang terdiri dari 3 halaman:
Halaman pertama adalah halaman selamat datang, dilengkapi dengan image dan link yang berupa rollover button yang menuju ke halaman kedua. Link boleh berupa gambar object ataupun tulisan NEXT berbentuk gambar.
Halaman kedua adalah satu halaman dengan fullscreen image dari product terbaru "GAME MOUSE", buatlah 4 buah link (2 rectangular dan 2 circle) yang masing-masing akan berpindah ke halaman pertama, dan sebuah gambar di bawah dengan teknik rollover button untuk berpindah ke halaman ketiga.
Halaman ketiga adalah berisi informasi lengkap tentang game-game yang pernah dikembangkan. Desain halaman ketiga semenarik mungkin, minimal harus mengandung 4 layer untuk menimbulkan kesan atraktif dan menarik.
Simpanlah di sebuah folder baru yang bernama TUGAS1, yaitu 3 file HTML berikut image-image yang akan digunakan!
Referensi:
http://www.gamehouse.com
http://www.sandloft.com
by: Wahyu Kurniawan
[ add comment ] | permalink |
( 0 / 0 )
Calendar
