Sabtu, 29 Juni 2013

Membuat Website Menggunakan Frame

Disini saya akan menguraikan cara membuat website dengan menggunakan frame yang terdiri dari 3 bagian, yaitu:
1. header untuk menampilkan judul website dan gambar hyperlink dengan gambar background
2. sidebar untuk menampilkan daftar menu yang masing-masing menu dapat memanggil file yang isinya bervariasi sesuai itemnya dan setiap menu jika diklik informasinya ditampilkan di bagian mainbody
3. mainbody untuk menampilkan informasi yang isinya didasarkan dari menu yang dipilih.

Contohnya seperti ini:


Langkah-langkahnya:
1. Membuat bagian header
Ketik kode HTML  seperti berikut di notepad++ anda:


<html><title>header</title>
<head><center><h1><font face="comic sans ms" size="15" color="purple">neec's website</font></h1></center></head>
<body background="cutee.jpg" repeat="no">
<a href="home.html" target="_blank"> <img src="home.jpg" width="70" height="70" align="top"></a>
</body></html>


simpan dengan nama "header" dengan format Hyper Text Markup Language.

2. Membuat bagian sidebar
Pilih file-->new di notepad++ anda tadi.
Ketik kode HTML seperti ini:


<!DOCTYPE html> 
<html lang="en"> 
<head> <title></title> </head> 

<body background="cutew.jpg" repeat="no">

<ul> <font color="grey">

<li><a href="web.html" target="mainbody"><font face="comic sans ms" size="5" color="purple"><b>website</b></font></a></li>  
<li><a href="about.html" target="mainbody"><font face="comic sans ms" size="5" color="purple"><b>about me</b></font></a></li>
<li><a href="tamu.html" target="mainbody"><font face="comic sans ms" size="5" color="purple"><b>buku tamu</b></font></a></li>
</font> </ul>
<br><br><br>

<font face="comic sans ms" size="4" color="purple">
follow my blog please :)<br>
just click this thumbnail:<br>
<a href="http://nikenkinanti212.blogspot.com"><img src="blog.jpg" height="50px" width="50px"></a>
<br>thankyou :D</font>

</body> 
</html>

simpan dengan nama "menu".

3. Membuat bagian mainbody
Ulangi langkah ke-2 dengan kode HTML:


<html>
<title>home</title>
<head><center><h1><font face="comic sans ms" color="purple">welcome to my website</font></h1></center></head>

<body background="cuty.jpg" repeat="no"> 
<p><center><img src="smile.jpg" height="200" border="5"></center></p> 

<p><font face="comic sans ms" size="4" color="purple"><b>
<br>selamat datang di website ku.... :D<br>
website ini adalah website sederhana yang InsyaAllah akan menambah wawasan dan pengetahuan kita semua.<br>
semoga dapat bermanfaat and enjoy it! :D<br>
thankyou for visiting :D</b></font></p>
</body></html>

simpan dengan nama "mainbody".

4. Membuat bagian pemersatu atau frame-nya.
Ulangi langkah ke-2 dengan kode HTML:


<!DOCTYPE html>
<html lang="en">
<head><title>my website</title></head> 

<frameset Rows="28%, 72%" Frameborder="yes" border=3> 
<frame SRC="header.html" scrolling="NO" resize="YES"> 

<frameset Cols="18%,82%"Frameborder="Yes" border=3 border color="pink"> 
<frame SRC="menu.html" scrolling="NO"> 
<frame name="mainbody" SRC="mainbody.html" scrolling="YES"> </frameset> 
</frameset><noframe></noframe> </html>

simpan dengan nama "home".

5. Membuat isi dari menu "website".
Ulangi langkah ke-2 dengan kode HTML:


<html><title>website</title>
<head><center><font face="comic sans ms" size="15" color="purple">website</font></center></head>

<body background="cuty.jpg" repeat="no"> 

<font face="comic sans ms" size="4" color="red">
<p><b>Situs web (bahasa Inggris: web site) atau sering disingkat dengan istilah situs adalah sejumlah halaman web yang memiliki topik saling terkait, 
terkadang disertai pula dengan berkas-berkas gambar, video, atau jenis-jenis berkas lainnya.
 Sebuah situs web biasanya ditempatkan setidaknya pada sebuah server web yang dapat diakses melalui jaringan seperti internet, 
 ataupun jaringan wilayah lokal (LAN) melalui alamat internet yang dikenali sebagai URL. 
 Gabungan atas semua situs yang dapat diakses publik di internet disebut pula sebagai Waring Wera Wanua atau lebih dikenal dengan singkatan WWW. 
 Meskipun setidaknya halaman beranda situs internet umumnya dapat diakses publik secara bebas, 
 pada prakteknya tidak semua situs memberikan kebebasan bagi publik untuk mengaksesnya, 
 beberapa situs web mewajibkan pengunjung untuk melakukan pendaftaran sebagai anggota, 
 atau bahkan meminta pembayaran untuk dapat menjadi aggota untuk dapat mengakses isi yang terdapat dalam situs web tersebut, 
 misalnya situs-situs yang menampilkan pornografi, situs-situs berita, layanan surel (e-mail), dan lain-lain. 
 Pembatasan-pembatasan ini umumnya dilakukan karena alasan keamanan, menghormati privasi, atau karena tujuan komersil tertentu.</b>
<br><br><br>source: <a href="http://id.wikipedia.org/wiki/Website">http://id.wikipedia.org/wiki/Website</a>
 </p></font></body></html>

Simpan dengan nama "web".

6. Membuat isi dari menu "about me".
Ulangi langkah ke-2 dengan kode HTML:


<html>
<title>about me</title>
<head><center><font face="comic sans ms" size="15" color="purple">about me</font></center></head>

<body background="cuty.jpg" repeat="no"> 

<center><img src="wamerah.jpg" height="290px" width="200px" border="5"></center>

<font face="comic sans ms" size="4" color="red">
<p><b>
namaku Niken Kinanti.<br>
aku sekarang duduk di bangku kuliah semester 2, prodi Teknik Informatika.<br>
jika ditanyakan aku ini orang mana, aku suka bingung.<br>
karena aku lahir dan tumbuh di Palembang, tapi darahku 100% Jogja(no campur-campur alias blasteran),<br>
bahasa sehari-hari bahasa Palembang, KTP ku KTP Jogja, pikiranku selalu ada di Palembang (kangen emak),<br>
tapi tinggalnya tinggal di Jogja. Galau.<br>
<br>
Profilnya gaje, ya? mending enjoy this website aja. semoga bermanfaat :)</b></p></font>
</body></html>

Simpan dengan nama "about".

7. Membuat isi dari menu "buku tamu".
Ulangi langkah ke-2 dengan kode HTML:


<html>
<title>buku tamu</title>
<head><center><font face="comic sans ms" size="15" color="purple">buku tamu</font></center></head>

<body background="cuty.jpg" repeat="no"> 
<font face="comic sans ms" size="4" color="red">
<p><b>
<form> <pre> 
<blockquote>silakan di isi :)<br>
 Nama : <INPUT type="text" name="Nama" SIZE=30>
 E-mail : <INPUT TYPE=TEXT NAME="Email" SIZE=30> 

 Jenis Kelamin:<br><label><input type="radio" name="Radio" value="laki-laki"> Laki-laki</label>
 <label><input type="radio" name="Radio" value="perempuan"> Perempuan</label>
 Hobi:<br><input type="checkbox" name="traveling">
 <label>traveling</label>
 <input type="checkbox" name="online">
 <label>online</label>
 <input name="Nama" type="checkbox">
 <label>Lainnya</label> </font></blockquote> 

 <INPUT TYPE=SUBMIT VALUE="OK"> <INPUT TYPE=RESET VALUE="CANCEL"> </PRE> </FORM>
 <hr color="black" size="2" width="90%" align=left> <br></p></font>
</body></html>

Simpan dengan nama "tamu".

Untuk melihat hasilnya, klik pada file "home", klik Run, pilih Launch in Chrome.

Selesai.

NB: Semua file disimpan dengan format Hyper Text Markup Language.