Scribd
Unggah
111 tayangan

HTML Dan Css

Teks memberikan panduan lengkap untuk membuat form yang cantik menggunakan CSS. Terdiri dari 3 langkah yaitu menyediakan style CSS untuk elemen form, memasukkan style ke dalam halaman HTML, dan membuat formnya sesuai dengan style yang ditetapkan. Style CSS digunakan untuk mengatur tampilan, tata letak, dan interaksi elemen form seperti teks, label, tombol submit. [/ringkasan]

Diunggah oleh

dmbok
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
111 tayangan

HTML Dan Css

Teks memberikan panduan lengkap untuk membuat form yang cantik menggunakan CSS. Terdiri dari 3 langkah yaitu menyediakan style CSS untuk elemen form, memasukkan style ke dalam halaman HTML, dan membuat formnya sesuai dengan style yang ditetapkan. Style CSS digunakan untuk mengatur tampilan, tata letak, dan interaksi elemen form seperti teks, label, tombol submit. [/ringkasan]

Diunggah oleh

dmbok
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 11

Ya, kita coba terlebih dahulu untuk trik yang pertama …

Buat sebuah file, namakan terserah anda, saya menamakannya imgbtn.html, kemudian
isi didalamnya :

<html><head></head><body>

<form name=”formulir” action=”kirim.php” method=”POST”>


Nama : <input type=”text” name=”nama”>
<input type=”image” src=”submit_icon.jpg” alt=”Submit button”>
</form>

</body></html>

Yang memiliki fungsi intinya :


baris <input type=”image” src=”submit_icon.jpg” alt=”Submit button”>
membuat sebuah input dengan type image.

kemudian, file kirim.php, file ini digunakan untuk menangkap apa yang telah dikirim
oleh imgbtn.html, tentunya anda harus memiliki sebuah web server yang telah terinstall
didalam pc anda untuk mencobanya. Tapi diakhir artikel html ini penulis menyediakan
file demo dari artikel ini.

File kirim.php
< ?php
echo $_POST['nama'];
?>

Anda tidak dapat menggunakan fitur seperti hover button dalam trik yang pertama ini, tag
input type=’image’ tidak mengizinkan anda untuk perubahan gambar ketika mouse over,
ataupun ketika mouse out. Fitur perubahan image/gambar ketika mouse over atau mouse
out didapatkan dengan menggunakan trik yang selanjutnya.

Kemudian trik yang terakhir, ini trik pengembangan dari trik sebelumnya. Jika trik yang
pertama itu hanya membolehkan gambar yang statik, maka trik yang kedua ini anda dapat
memasang fitur perubahan gambar ketika mouseover ataupun mouseout.

Sediakan sebuah file imgtbn2.html, berisi :

<html><head></head><body>

<form name=”formulir” action=”kirim.php” method=”POST”>

Nama : <input type=”text” name=”nama”>


<a href=”javascript:document.formulir.submit()”
onmouseover=”document.formulir.sub_but.src=’submit_icon.jpg’”
onmouseout=”document.formulir.sub_but.src=’submit_icon_hover.jpg’”
onclick=”return val_form_this_page()”>
<img src=”submit_icon_hover.jpg” border=’0′ alt=”Submit this form”
name=”sub_but” />
</a>

</form>

</body></html>

trik yang terakhir ini, menggunakan tag <a> dan memanfaatkan fungsi javascript yang
diembedkan.
Statement intinya :
onclick=”return val_form_this_page()”>
ketika image di klik maka kembalikan nilai yang terisi dalam form di document untuk
kemudian di kirim ke action targetnya, yakni kirim.php.
Dengan trik ini

dan file kirim.php yakni file php untuk menangkap variable yang dikirim.
< ?php
echo $_POST['nama'];
?>

Suka dengan CSS menu? cobalah membuat CSS menu anda sendiri.
Berikut ada contoh membuat menu CSS sederhana, untuk proses belajar anda bisa
memodifikasinya :)
Code nya:
——————————
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
    <head>
         <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″/>
         <title>DHTML Tab,JavaScript Tab</title>
    <style type=”text/css”>
         #tabs {display: block;float: left;width: 160px;}
         .panel {border: solid 1px #D8D8D8;border-top: none;background-color:
#FFFFFF;padding: 0px;width: 158px;overflow: auto;clear: left;}
         .tab_bdr{padding: 0px;width: 158px;border: 0px;border: 1px solid
#645DB5;height: 4px;margin:0px;background: #645DB5;clear: left;font-size: 0px;}
         .tab{font-family:tahoma; FONT-SIZE:
11px;background:#BA0808;color:#FFFFFF;cursor:pointer;border:none;border-bottom:
1px solid #FFFFFF;height:19px;padding-top:3px;margin:0px;width:60px; float:left; text-
decoration:none;}
         .tab_sel{font-family:tahoma; FONT-SIZE:
11px;background:#645DB5;color:#FFFFFF;cursor:pointer;border:none;border-
bottom:1px solid #645DB5;height:19px;padding-top:3px;margin:0px;width:60px;
float:left; text-decoration:none;}
    </style>
    <script language=”JavaScript” type=”text/javascript”>
    var panels = new Array(‘panel1′, ‘panel2′); // IDs of the content panels must be put
here
    var tabs = new Array(‘tab1′, ‘tab2′); // IDs of the tabs must be put here
    function displayPanel(nval)
    {
         for(i = 0; i < panels.length; i++)
         {
             document.getElementById(panels[i]).style.display = (nval-1 == i) ?
‘block’:'none’;
             document.getElementById(tabs[i]).className=(nval-1 == i) ? ‘tab_sel’:'tab’;
         }
    }
    </script>
    </head>
    <body>
         <div id=”tabs”>
             <div id=”tab1″ class=”tab_sel” align=”center” onClick=”javascript:
displayPanel(’1′);”>Tab 1</div>
             <div id=”tab2″ class=”tab” style=”margin-left:1px;” align=”center”
onClick=”javascript: displayPanel(’2′);”>Tab 2</div>
         </div>
    <div class=”tab_bdr”></div> <!– This is the div used to show a thick border below the
tab and above the panel–>
         <div class=”panel” id=”panel1″ style=”display: block”>1</div> <!– The display
panels for the respective tabs can be put here –>
         <div class=”panel” id=”panel2″ style=”display: none”>2</div>
    </body>
</html>
——————————

contoh jadi:

{source}

<style type="text/css"> #tabs {display: block;float:


left;width: 160px;} .panel {border: solid 1px #D8D8D8;border-
top: none;background-color: #FFFFFF;padding: 0px;width: 158px;overflow:
auto;clear: left;} .tab_bdr{padding: 0px;width: 158px;border:
0px;border: 1px solid #645DB5;height: 4px;margin:0px;background:
#645DB5;clear: left;font-size: 0px;} .tab{font-family:tahoma;
FONT-SIZE:
11px;background:#BA0808;color:#FFFFFF;cursor:pointer;border:none;border-
bottom: 1px solid #FFFFFF;height:19px;padding-
top:3px;margin:0px;width:60px; float:left; text-decoration:none;}
.tab_sel{font-family:tahoma; FONT-SIZE:
11px;background:#645DB5;color:#FFFFFF;cursor:pointer;border:none;border-
bottom:1px solid #645DB5;height:19px;padding-
top:3px;margin:0px;width:60px; float:left; text-decoration:none;}
</style> <script language="JavaScript" type="text/javascript"> var
panels = new Array('panel1', 'panel2'); // IDs of the content panels
must be put here var tabs = new Array('tab1', 'tab2'); // IDs of the
tabs must be put here function displayPanel(nval) { for(i
= 0; i < panels.length; i++)
{ document.getElementById(panels[i]).style.display = (nval-1
== i) ? 'block':'none';
document.getElementById(tabs[i]).className=(nval-1 == i) ?
'tab_sel':'tab'; } } </script>
<div id="tabs"> <div id="tab1" class="tab_sel"
align="center" onClick="javascript: displayPanel('1');">Tab&nbsp;1</div>
<div id="tab2" class="tab" style="margin-left:1px;" align="center"
onClick="javascript: displayPanel('2');">Tab&nbsp;2</div> </div>
<div class="tab_bdr"></div> <!-- This is the div used to show a thick
border below the tab and above the panel-->
<div class="panel" id="panel1" style="display: block">1</div>
<!-- The display panels for the respective tabs can be put here -->
<div class="panel" id="panel2" style="display: none">2</div>

{/source}

Simple aja mulai dengan style ke gini:

<style>
    #pagin a
    {
    font-family:Tahoma;
    font-size:11px;
    display:block;
    float:left;
    cursor:pointer;
    color:#00c;
    text-decoration:none;
    display:inline-block;
    border:1px solid #ccc;
    padding:.3em .7em;
    margin:0 .38em 0 0;
    text-align:center
    }
    #pagin a:hover
    {
    background:#f0f7e8;
    border:1px solid #83bc46
    }
    #pagin a.sel
    {
    color:#333;
    font-weight:normal;
    background:#f0f7e8;
    cursor: default;
    border:1px solid #83bc46
    }
    </style>

Tros terapkan ke dalam halaman HTML lu:

<div id=”pagin”>
    <a class=”sel”>1</a><a href=”http://csslovers.co.cc”>2</a>
    <a href=”http://dremi468.blogspot.com”>3</a>
    <a href=”http://dremi.info/tutorial/photoshop-forum.php”>4</a>
    </div>

heehe jadi dah, lagi lagi tutorial CSS na singket !!! biarin weks :P !!

Bijimane bikin form nyang kaga mbosenin ???? Nyang mantap dan oke punya
dahh!
Nah kali ni kite bakalan bikin form make css style.. cantik dah pokokna :D kayak
pacar gw.. haa…

Style na si ke gini ajah:

 
 

<style type=”text/css”>
<!–
body,td,th {
font-family: Trebuchet MS;
font-size: 11px;
color: #333333;
}
body {
background-color: #FFFFFF;
margin-left: 20px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #0099FF;
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #0099FF;
}
a:hover {
text-decoration: none;
color: #009900;
}
a:active {
text-decoration: underline;
color: #0099FF;
}
#OrangeWhiteBox {
background-color:#FFFBF2;
padding: 5px;
margin-bottom:5px;
border:2px solid #FFE9D2;
width:550px;
}
#GreyWhite {
background-color: #FBFBFB;
padding: 5px;
margin-bottom:5px;
border:2px solid #F4F4F4;
width:550px;
text-align:center;
}
/* BOX DESIGN BY dr.emi */

#formM { margin:0px;padding-left:20px;padding-bottom:20px;}
#formM h1 { padding-left:72px;padding-top:10px; font-size:18px;padding-bottom:10px;
color:#990000; }
#formM p { padding-left:72px;padding-top:10px; font-size:11px;padding-bottom:10px; }
#formM .inputM{
border:1px solid #C0C0C0;
color:#666666;
background:url(beautifull-form.gif) 0 0 repeat-x; /*support IE, FF*/
height:26px;
font-size:16px;
}
#formM .textareaM{
border:1px solid #C0C0C0;
color:#666666;
font-size:16px;
}
#formM label{
display:block;
margin-bottom:10px;
color:#666666;
}

#formM label span{


display:block;
float:left;
padding-right:6px;
width:70px;
text-align:right;
font-weight:bold;
font-size:16px;
}
#formM .spacer{margin-left:80px;
margin-bottom:10px;
font-size:11px;
color:#555555;
}
#formM .buttonM{
background:url(coklat.gif) 0 0 no-repeat;
border:1px solid #3b6e22;
height:26px; width:100px;
color:#FFFFFF;
font-size:14px;
text-decoration:none;
font-weight:bold;
}
.spacerA { clear:both; height:20px; margin:0px; padding:0px; }
–>
</style>

Nah lu bikin dah form na, nysuaiin ama style css diatas:

<div id=”OrangeWhiteBox”>

<div id=”formM”>
<h1>Komentar gw bwat eloh ! :P (bahasa abg mumet) </h1>
<form id=”form1″ name=”form1″ method=”post” action=”">
<label><span>Nama </span>
<input name=”name2″ type=”text” class=”inputM” id=”name2″ value=”dr.emi”
size=”20″ />
</label>

<label><span>E-Mail </span>
<input name=”name” type=”text” class=”inputM” id=”name” value=”[email protected]”
size=”20″ />
</label>

<label><span>No. HP </span>
<input name=”name” type=”text” class=”inputM” id=”name” value=”081300004000″
size=”20″ />
</label>

<label><span>Website</span>
<input name=”name” type=”text” class=”inputM” id=”name” value=”http://”
size=”41″/>
(* kosong ? yo ra popo </label>

<label><span>Komentar</span>
<textarea cols=”38″ rows=”5″ class=”textareaM”>sumpeh deh ! gueh naksir ama eloh !
mau jadi gebetan gue kagak ?</textarea>
</label>
<label>
<div class=”spacer”><input type=”submit” name=”Submit” value=”Kirim”
class=”buttonM”/>
</label>
</div>

</form>
</div>
</div>
<p class=”spacerA”> </p>
<div id=”GreyWhite”><a href=”http://dremi.info/forum” target=”_blank”>Falling in
love to dr.emi ? Just Click Here !</a></div>

Cepet banged !!!! ??? iye mang cpet bikin na, palagi kalo make dreamweaver, kaga usah
ribet ….

ni preview na kalo udah jadi…

Pada kesempatan kali  ini saya akan membawakan tutorial judulnya “Ngetik Realtimen
dengan Document Object Model” maksudnya itu saat kita ngetik di input box,atau
textarea hasil ketikan kita  dapat langsung display di tempat yang kita inginkan, bisa
huruf per huruf  maupun dapat kita setting kata per kata.  caranya cukup sederhana yaitu
adalah memanipulasi dengan DOM. Apa itu DOM, anda dapat membacanya disini 
namun saya lebih menyebutnya yaitu cara untuk mendinamiskan ke-statis-an html.

sudah banyak library javascript yang memudahkan kita untuk mendinamiskan  tampilan
html tanpa harus merefresh browser dengan DOM ini, seperti library prototype,
mootools, jquery, DOJO ,  dan masih banyak lagi.
listnya saya sudah bundle di javascript:framework

ok langsung saja … pertama yang akan kita buat yaitu halaman html.
berikut code halaman html yang saya buat untuk tutorial ini

———————————————————-
<html>
<head>
    <TITLE>ngetik realtime</TITLE>
</head>

<body>

    <textarea id=”tempatMengetik”></textarea>


   
    <div id=”hasilKetikan”></div>
</body>
</html>
————————————————————

setelah itu simpan dengan ketik.html

anda lihat kembali file ketik.html


disana ada elemen textarea yang di beri id=”tempatMengetik”,
dan sebuah div yang di beri id=”hasilKetikan” dimana di dalam div  inilah hasil ketikan
dan kita menginput huruf di textarea akan muncul.

lalu edit file ketik.html tadi dan tambahkan barisan javascript berikut

————————————————————-
<script>
function displayType(){
    var inputKetikan =  document.getElementById(“tempatMengetik”);
    var targetKetikan =  document.getElementById(“hasilKetikan”);
    targetKetikan.innerHTML = inputKetikan.value;   
}
</script>
————————————————————-

dan sebuah event onkeyup pada element textarea

————————————————————–
<textarea id=”tempatMengetik”  onkeyup=”displayType()”></textarea>
————————————————————-

maka hasil terakhir dari file ketik.html menjadi seperti ini

————————————————————
<html>
<head>
    <TITLE>ngetik realtime</TITLE>
</head>
<script>
function displayType(){
    var inputKetikan =  document.getElementById(“tempatMengetik”);
    var targetKetikan =  document.getElementById(“hasilKetikan”);
    targetKetikan.innerHTML = inputKetikan.value;   
}
</script>

<body>
    <textarea id=”tempatMengetik”  onkeyup=”displayType()”></textarea>
   
    <div id=”hasilKetikan”>     </div>

</body>
</html>
————————————————————

simpan file tersebut dan anda buka dengan browser kesayangan anda, dan mulailah 
memasukan beberapa huruf kedalam textarea tersebut dan lihatlah apa yang  terjadi.
tiap huruf yang anda masukan di sana akan langsung muncul di browser anda tanpa 
harus merefresh browser tersebut.

penjelasannya adalah :
maksud dari function displayType() adalah kita membuat variabel inputKetikan  yang
menyimpan element yang kita beri id=”tempatMengetik”, dan
variabel targetKetikan yang menyimpan element yang kita beri  id=”hasilKetikan”.

lalu baris
     targetKetikan.innerHTML =  inputKetikan.value;   
menugaskan variabel targetKetikan meng-outputnya berupa HTML dari nilai yang di 
input dalam variabel(element) inputKetikan.

untuk memunculkan huruf per huruf di halaman web tersebut untuk itulah di  elemen
textarea kita beri event onkeyup.

sederhana bukan !, code javascript sederhana ini adalah dasar dari membuat  halaman
web lebih dimanis tanpa harus merefresh kembali browser anda.
untuk melihat hasilnya ada dapat mengunjungi link ini

ok mungkin tutorial yang tidak seberapa ini bisa bermanfaat untuk kita semua

Anda mungkin juga menyukai