Showing posts with label script html. Show all posts
Showing posts with label script html. Show all posts

Tutorial Link Dengan Efek Zoom

Para sobat, kali ini saya akan membahas sedikit tentang cara membuat Link dengan efek zoom menggunakan CSS, nah untuk lebih lengkapnya masbrow copy saja script berikut ini:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Efek Zoom</title>
<style type="text/css">
a:link
{ color:#000000; text-decoration:none;
font-family:Verdana; font-size:18px;
}
a:visited
{ color:#000000; text-decoration:none;
font-family:Verdana; font-size:18px;
}
a:active
{ color:#000000; text-decoration:none;
font-family:Verdana; font-size:18px;
}
a:hover
{ color:#FF0000; text-decoration:none;
font-family:Verdana; font-size:36px;
}
</style>
</head>
<body>
<p><center>
<a href="efekzoom.html">EFEK ZOOM</a>
</center></p>
</body>
</html>

sobat dapat mengatur nih sesuai pilihan sobat, edit ajah tuh kode script yang ada di atas.. Mudah kan
kurang lebih tampilanya akan seperti berikut ini:

  
                                                              Sebelum Mengenai Cursor
                              
                                                           Setelah Mengenai Cursor

Script HTML Unordered List


Para sobat pembaca, kali ini dalan tutorial web, saya akan memberikan contoh script HTML untuk memberikan Unordered list pada web pembaca.Unordered list ini sangat dibutuhkan dalam hal menyediakan data dalam bentuk list sehingga data lebih dapat tersusun secara lebih rapi, dalam Unordered list ini terdapat beberapa type seperti type="square" dimana listnya akan berbentuk kotak. selanjutnya adalah type="cyrcle" yaitu dimana listnya akan berbentuk lingkaran, selanjutnya adalah type="disk"yaitu listnya akan berbentuk seperti Disk.
baiklah berikut ini scrip untuk Unordered list:

</title>
</head>
<body>
<p>Jadwal Materi Web</p>
<ul type="square">
<li>Selasa</li>
<ul type="circle">
<li>Pengantar Jaringan Kom.</li>
<li>Local Area Network</li>
</ul>
<li>rabu</li>
<ul type="disc">
<li>Meytropolitan Area Networ</li>
<li>Wide area network</li>
</ul>
<li>kamis</li>
<ul type="square">
<li>Buat Link</li>
<li>Buat Label</li>
</ul>
</body>
</html>

dan setelah selesai maka tampilan dari script tersebut akan seperti berikut :

Jadwal Materi Web
  • Selasa
    • Pengantar Jaringan Kom.
    • Local Area Network
  • rabu
    • Meytropolitan Area Networ
    • Wide area network
  • kamis
    • Buat Link
    • Buat Label

Script HTML Ordered List

Para sobat pembaca, kali ini dalan tutorial web, saya akan memberikan contoh script HTML untuk memberikan Ordered list pada web pembaca.Ordered list ini sangat dibutuhkan dalam hal menyediakan data dalam bentuk list sehingga data lebih dapat tersusun secara lebih rapi, dalam ordered list ini terdapat beberapa type seperti type=a dimana susunan akan dimulai dengan huruf a. dan seterusnya (a,b,c...) selanjutnya adalah type=I yaitu dimana susunan data akan dimulai dengan angka romawi I dan seterusnya(I,II,III,IV...), selanjutnya adalah type=1 atau defaul yaitu data akan tersusun secara list dengan dimulai dengan angka 1 dan seterusnya (1,2,3...)
baiklah berikut ini scrip untuk ordered list:
<html>
<head>
<title>ordered list
</title>
</head>
<body>
<p>Jadwal Dan Silabus Mata Kuliah WEB</p>
<ol type=a>
<li>Senin</li>
<ol type=a>
<li>Pengenalan www</li>
<li>Pengantar html</li>
<li>Pengenalan WWW</li>
<li>Pengantar HTML</li>
</ol>
<li>Selasa</li>
<ol type=a>
<li>Frame</li>
<li>Tag</li>
</ol>
<li>rabu</li>
<ol type=I>
<li>Buat Link</li>
<li>Tag List</li>
</ol>
</body>
</html>

dan setelah selesai maka tampilan dari script tersebut akan seperti berikut :

Jadwal Dan Silabus Mata Kuliah WEB
  1. Senin
    1. Pengenalan www
    2. Pengantar html
    3. Pengenalan WWW
    4. Pengantar HTML
  2. Selasa
    1. Frame
    2. Tag
  3. rabu
    1. Buat Link
    2. Tag List
Baca juga Script HTML Unordered list

Element Tombol

Element tombol  biasanya digunakan untuk memberikan perintah berupa submit, Ok sahabat pembaca untuk lebih jelasnya copy scrip HTML berikut ke Notpad dan simpan dengan nama Tombol.html dan selanjutnya buka di webrowser anda.

<html>
<head>
<body>
<title>
menu submit
</title>
<h1><center>Element Tombol<center></h1><p>
<form>
<input type=submit name=tombol1 value=submit>
<input type=submit name=tombol2 value=reset>
</body>
</head>
</html>
 

Element Radio

Element radio  biasanya digunakan untuk memberikan pilihan kepada pembaca namun hanya bisa memilih 1 pilihan saja, Ok teman untuk lebih jelasnya copy script HTML berikut ke Notpad dan simpan dengan nama Radio.html dan selanjutnya buka di webrowser anda.

<html>
<head>
<title>
element radio
</title>
<body>
<h1><center>radio button<center></h2><p>
<form>
<b>jenis kelamin: <br></b>
<input type=radio name=radio1 value=pilihan1> laki-laki
<br>
<input type=radio name=radio1 value=pilihan1> perempuan
<br>
<input type=radio name=radio1 value=pilihan1> kadang-kadang
<br>
<b>jenis aktivis kampus: <br></b>
<input type=radio name=radio2 value=pilihan1> ya
<br>
<input type=radio name=radio2 value=pilihan1> tidak
<br>
<input type=radio name=radio2 value=pilihan1> kadang-kadang
</body>
</head>
</html>

Nah setelah selesai, kurang lebih tampilannya akan seperti pada gambar berikut ini:

jenis kelamin:
laki-laki
perempuan
kadang-kadang
jenis aktivis kampus:
ya
tidak
kadang-kadang 

Script HTML Colspan

Nah,, kali imi saya akan tampilkan script HTML untuk menyatukan 2 kolom, copy script berikut pada Notpad dan beri nama tabel colspan.html

<html>
<head>
<title> belajar membuat table
</title>
</head>
<body>
 <table border=5>
   <tr>
    <td colspan=2 align=center> baris 1 kolom 1 </td>
   </tr>


   <tr>
    <td> baris 2 kolom 1</td> <td> baris 2 kolom 2</td>
   </tr>


   <tr>
    <td> baris 3 kolom 1</td> <td> baris 3 kolom 2</td>
   </tr>


   <tr>
    <td> baris 4 kolom 1</td> <td> baris 4 kolom 2</td>
   </tr>


   <tr>
    <td> baris 5 kolom 1</td> <td> baris 5 kolom 2</td>
   </tr>
</table>
</body>
</html>

Script HTML Tabel

Nah,, kali imi saya akan tampilkan script HTML untuk membuat tabel pada web anda, copy script berikut pada Notpad dan beri nama tabel.html
 
<html>
<head>
<title> belajar membuat table
</title>
</head>
<body>
 <table border=5>
   <tr>
    <td> baris 1 kolom 1</td> <td> baris 1 kolom 2</td>
   </tr>


   <tr>
    <td> baris 2 kolom 1</td> <td> baris 2 kolom 2</td>
   </tr>


   <tr>
    <td> baris 3 kolom 1</td> <td> baris 3 kolom 2</td>
   </tr>


   <tr>
    <td> baris 4 kolom 1</td> <td> baris 4 kolom 2</td>
   </tr>


   <tr>
    <td> baris 5 kolom 1</td> <td> baris 5 kolom 2</td>
   </tr>
</table>
</body>
</html>

Menu Drop Down

Menu Drop Down  biasanya digunakan untuk memberikan pilihan kepada pembaca dengan bentuk Drop Down dan ketika di klik maka pilihan akan muncul secara otomatis, Ok teman untuk lebih jelasnya copy script HTML berikut ke Notpad dan simpan dengan nama Down.html dan selanjutnya buka di webrowser anda.


<html>
<head>
<body>
<title>
menu drop down</title>
<h1><center>drop down<center></h1><p>

<form>
<b>pekerjaan: <br></b>
<left>
<select name=pekerjaan>
<option value=pilihan1>Manager
<option value=pilihan2>marketing
<option value=pilihan3>mekanik
<option value=pilihan4>mahasiswa
</select><br>
<br>
<b>jenis kelamin: <br></b>
<left>
<select name=pekerjaan>
<option value=pilihan1>laki
<option value=pilihan2>perempuan
<option value=pilihan3>cewe
<option value=pilihan4>cowo
</select><br>
<br>
<b>status: <br></b>
<left>
<select name=status>
<option value=pilihan1>jomblo
<option value=pilihan2>menikah
<option value=pilihan3>belum menikah
<option value=pilihan4>duda/janda
</select><br>
<br>
<b>tingkat pendidikan: <br></b>
<left>
<select name=tingkat pendidikan>
<option value=pilihan1>jomblo
<option value=pilihan2>menikah
<option value=pilihan3>belum menikah
<option value=pilihan4>duda/janda
</select>

Element Textbox

Element Textbox  biasanya digunakan untuk memasukkan text ke dalam web anda, Ok sahabat pembaca untuk lebih salin script HTML berikut ke Notpad dan simpan dengan nama Textbox.html dan selanjutnya buka di webrowser anda.

<html>
<head>
<title>
belajar awal
</title>
<body>
<form>
<h2><center>elemen textbox</center><h/2>
    Nama &nbsp&nbsp&nbsp
    <input type=text name=nama>
<p>
    Alamat&nbsp
    <input type=text name=alamat>
<br>
    Telepon 
    <input type=text name=telepon>
<br>
    Fax&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type=text name=fax>
<br>
    Mail&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type=text name=mail>
</form>
</body>
</head>
</html>

Nah, sekarang tampilannya akan seperti berikut, anda dapat mengubah spasix dengan menghapus atau menambahkan kode "&nbsp" seperti pada script.

Nama      

Alamat 
Telepon
Fax       
Mail     

Element checkbox

Element checkbox  biasanya digunakan untuk memberikan pilihan, dimana seseorang dapat memilih lebih dari satu pilihan, Ok teman untuk lebih jelasnya copy script HTML berikut ke Notpad dan simpan dengan nama Textbox.html dan selanjutx buka di webrowser anda.

<html>
<head>
<title>
element cekbox
</title>
<body>
<h2><center>element cekbox</h2><p>

<form>
<b>hobby: <br></b>
<input type=checkbox name=checkbox1>dengar musik<br>
<input type=checkbox name=checkbox2>jalan-jalan<br>
<input type=checkbox name=checkbox3>baca komic<br>
<input type=checkbox name=checkbox5>ngerjain teman<br>
<p>
<b>makanan kesukaan: <br></b>
<input type=checkbox name=checkbox1>coto<br>
<input type=checkbox name=checkbox2>gado-gado<br>
<input type=checkbox name=checkbox3>spageti<br>
<input type=checkbox name=checkbox4>bakso<br>
</body>
</head>
</html>

Nah sekarang coba cek tampilannya, ada pun hasilnya akan seperti berikut:

hobby: dengar musik
jalan-jalan
baca komic
ngerjain teman
makanan kesukaan: coto
gado-gado
spageti
bakso

Related Posts Plugin for WordPress, Blogger...