HTML Membuat Tabel

Diposting oleh dymand
<html>

<title>Membuat Table </title>

<Head>

<Body>

<table border="1" width="100%">


   <caption>

   <font size="3">

   <B>Setelah Memakai ROWSPAN dan COLSPAN Beberapa SEL di Gabung</B>

   </Font>

    </caption>


<TR>

    <TH WIDTH="25%" ROWSPAN="2">SEL 1-5 digabung
    </TH>

    <TH WIDTH="25%">2</TH>

    <TH WIDTH="25%">3</TH>

    <TH WIDTH="25%">4</TH>

</TR>
<TR>
   
<TH COLSPAN="3">   
SEL 6 - 7 - 8 digabung
   
</TH>

</TR>

</body>

</Head>

</html>
Category: 0 komentar

HTML contoh desain web sederhana

Diposting oleh dymand
<html>
<head>
<title>pedding dyamnd</title>
<meta content="http://www.dymand-informatika.com" name="author"/>


<style type="text/css">
/*misal tag body*/body{
background-color:#666666;
margin:0 auto 10px auto;/* jarak-luar atas 0, kiri dan kana auto, sedangkan bawah 10px */
padding:5px;/* jarak/batas dalam masing-masing 5px*/
width:800px;/* lebar 800px*/
}

#pembentuk-headernya{/*style ini untuk pembentuk header*/
height:200px;/* tingginya 200px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:0 auto;/*jarak luar atas bawah 0, kiri-kanan auto */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}

#pembentuk-headernya .judul{/*style ini untuk judul header*/
padding:10px 0 0 20px;/*jarak dalam atas 10px, kanan dan bawah 0, sedangkan kiri 20px*/
font-size:40px;/* ukuran font 40px*/
text-transform:capitalize;/* setiap kata diawali dengan huruf kapaital*/
font-family:times;/* font family times*/
}
#pembentuk-headernya .deskripsinya{/*style ini untuk deskripsi header*/
padding:10px 0 0 20px;/*jarak dalam atas 10px, kanan dan bawah 0, kiri 29px*/
font-size:20px;/* ukuran font 20px*/
}

#sidebar-kiri{/*style ini untuk sidebar kiri */
min-height:1000px;/* tinggi minimal*/
float:left;/*menekan kekiri */
width:200px;/*lebar 200px */
margin:10px 0;/*jarak luar atas-bawah 10px, kiri-kanan 0 */
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-bottomleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#sidebar-kiri .anggapwidget, #sidebar-kanan .anggapwidget{/*style ini untuk isi/pembentuk dalam sidebar kanan dan kiri*/
min-height:300px;/* tinggi minimal 300px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:5px;/*jarak luar masing-masing 5px */
background-color:#666666;/* warna latar belakang #666666*/
-moz-border-radius:10px;/* */
}
#sidebar-kiri h2{/*style ini untuk judul sidebar kiri*/
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double white;/* garis bawah lebar tebal 2px, style double warna putih*/
font-size:20px;/* ukuran font 20px*/
text-align:center;/* text rata tengah */
text-transform:capitalize;/*setiap kata diawali dengan huruf besar/kapaital */
}

/*mulai badan utama*/
#badan-utamanya{/*style ini untuk badan utama, atau yang terletak di tengah*/
min-height:920px;/* tinggi minimal*/
float:left;/* menekan kekiri*/
width:400px;/* lebar 400px*/
margin:10px;/*jarak luar masing-masing 10px */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#badan-utamanya h2{/*style ini untuk untuk judul badan utama*/
/*style ini untuk judul badan h2*/
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double #666666;/*garis bawah tebal 2px double, warna #666666 */
font-size:22px;/* ukuran font 22px*/
text-align:left;/*text rata kiri */
text-transform:capitalize;/* setiap kata diawali dengan huruf kapital/besar*/}
#badan-utamanya .isinya{/*style ini untuk isi badan*/
/*style ini untuk isi badan*/
margin:10px;/* jarak luar masing-masing 10px*/
font-size:17px;/* ukuran font 17px */
}
#badan-utamanya .isinya p{/*style ini untuk tag p yang ada di dalam isi badan*/
/*style ini untuk tag p*/
text-indent:20px;/* jrak awal paragraf*/
}
/*bagian badab selesai*/


/*mulai sidebar kanan*/
#sidebar-kanan{/*style ini untuk sidebar kanan*/
min-height:1000px;/* tinggi minimal*/
float:right;/* menekan ke kanan*/
width:180px;/* lebar 180px*/
margin:10 0 0 0;/*jarak luar atas 10, kiri-kanan-bawah 0 */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-bottomleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#sidebar-kanan h2{/*style ini untuk judul sidebar kanan*/
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double white;/*garis bawah tebal 2px titik-titik, warna putih */
font-size:18px;/*ukuran font */
text-align:right;/* text rata kanan*/
text-transform:capitalize;/* setiap kata diawali dengan huruf besar*/
}

#pembentuk-footer{/*style ini untuk pembentuk footer atas, saya membuat tiga footer widget*/
clear:both;/*fungsi style ini agar ruang kiri-kanan tidak bisa diisi*/
background-color:white;/*warna latar belakang*/
}
#pembentuk-footer h3{/*style ini untuk judul footer atas*/
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
}
#pembentuk-footer .judulwidgetfooter{/*style ini untuk judul footer atas, yups ada dua emang, css itu asik, banget. bayak hal yang bisa dibuat*/
margin:5px;/*jarak luar masing-masing 5px */
border-bottom:4px solid white;/*anggap garis bawah setebal 4px solid warna putih*/
text-transform:capitalize;/**//* setiap kata diawali dengan huruf besar*/
}
#pembentuk-footer .misalwidgetnya{/*style ini untuk widget dalama footer*/
float:left;/*menekan ke kiri-atas*/
width:32%;/*lebarnya 32%, jika lebar tag sebelumnya 1000px, maka lebar ini menjadi 320px*/
min-height:300px;/*tinggi minimal*/
background-color:#666666;/*warna latar belakang*/
margin:5px;/*jarak luar masing-masing 5px */
}

#pembentuk-footer-bawah{/*style ini untuk footer bagain tengah, saya membuat tiga footer*/
clear:both;/*fungsi style ini agar ruang kiri-kanan tidak bisa diisi*/
background-color:white;/*warna latar belakang putih*/
margin-top:20px;/*jarak luar atas 20px*/
}
#pembentuk-footer-bawah .misalwidgetnya-footer-bawah{/*style ini untuk widget dalam footer */
float:left;/*menekan ke kiri-atas*/
width:24%;/*lebarnya 24%, jika lebar tag sebelumnya 1000px, maka lebar ini menjadi 240px*/
min-height:300px;/*tinggi minimal*/
background-color:#666666;/*warna latar belakang*/
margin:5px 2px 5px 5px;/*jarak luar atas 5px, kanan 2px, bawah 5px, kiri 5px*/
}
.misalwidgetnya-footer-bawah h3{/*style ini untuk judul footer*/
padding:0;/*jarak dalam masing-masing 0 */
margin:5px;/*jarak luar masing-masing 5px */
border-bottom:4px solid white;/*anggap garis bawah setebal 4px solid warna putih*/
text-transform:capitalize;/**//* setiap kata diawali dengan huruf besar*/
}

#pembentuk-footer-paling-bawah{/*style ini untuk footer paling bawah*/
clear:both;/*fungsi style ini agar ruang kiri-kanan tidak bisa diisi*/
background-color:white;/*warna latar belakang*/
margin-top:20px;/*jarak luar atas 20px*/
padding-bottom:5px;/*jarak dalam-bawah 5px*/
}
#pembentuk-footer-paling-bawah .widgetnya-footer-bawah-paling-bawah{/*style ini untuk widget footer paling bawah*/
float:left;/*menekan ke kiri-atas*/
width:49%;/*lebarnya*/
min-height:300px;/*tinggi minimal*/
background-color:#666666;/*warna latar belakang*/
margin:5px 2px 0 5px;/**/
}
.widgetnya-footer-bawah-paling-bawah h4{/*style ini untuk judul footer paling bawah*/
padding:0;/*jarak dalam masing-masing 0 */
margin:5px;/*jarak luar masing-masing 5px */
border-bottom:4px solid white;/*anggap garis bawah setebal 4px solid warna putih*/
text-transform:capitalize;/**//* setiap kata diawali dengan huruf besar*/
font-size:20px;/*ukuran font*/
}

/* mulai dari sini adalah pengelompokan style css, setiap style dipisahkan dengan koma(,)*/
.widgetnya-footer-bawah-paling-bawah .isi-widget, .misalwidgetnya-footer-bawah .isi-widget, .misalwidgetnya .isi-widget, #sidebar-kanan .isi-widget, #sidebar-kiri .isi-widget{/*style ini untuk isi widget, keseluruhan*/
margin:5px;margin:5px;/*jarak luar masing-masing 5px */
}
/*maksud dari pengelompokan adalah, misal ada 10 style yang sama, nah dari-pada styleya ditulis satu-satu, kan lebih baik di kelompokan*/
#by-indam{/*style ini untuk yang paaaaaaaaaaaaaaaaaaaaaaaaling bawah, ituloh yang titititittititik*/
clear:both;/*fungsi style ini agar ruang kiri-kanan tidak bisa diisi*/
outline:white dotted 16px;/*garis luar tebal 16px titik-titik, warna putih */
min-height:40px;/*minimal tinggi 40px */
margin:40px auto;/* jatak luar atas dan bawah 40px, kiri-kanan auto*/
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-bottomright:10px;/*style ini hanya untuk firefox */
-moz-border-radius-bottomleft:10px;/*style ini hanya untuk firefox */
}
#by-indam p{/*style ini untuk tag p dalam tititititiititittitiitik*/
text-align:right;/*text rata kanan */
margin:0;/*jarak luar masing-masing 0 */
padding:5px 10px;/* jarak dalam atas-bawah 5px, kiri-kanan 10px*/
}

</style>
</head>
<body>
<div id="pembentuk-headernya">
<h1 class="judul">judulnya</h1>
<p class="deskripsinya">ini adalah tema web</p>
</div>
<div id="sidebar-kiri">
<div class="anggapwidget">
<h2>judu kiri</h2>
<div class="isi-widget">
isi widget
isi widget
isi widget
isi widget
isi widget
isi widget
</div>
</div>
<div class="anggapwidget">
<h2>judul kiri 2</h2>
<div class="isi-widget">
isi widget
isi widget
isi widget
isi widget
isi widget
isi widget
</div>
</div>
<div class="anggapwidget">
<h2>judul kiri 3</h2>
<div class="isi-widget">
isi widget
isi widget
isi widget
isi widget
isi widget
isi widget
</div></div>
</div>
<div id="badan-utamanya">
<div class="isinya">
<h2>anggap disini adalah judul postingan</h2>
<p>ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text</p>
<p>ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text</p>
<p>ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text</p>
<p>ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text</p>
<p>ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text</p>
<p>ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text</p>
</div></div>
<div id="sidebar-kanan">
<div class="anggapwidget">
<h2>judul kanan</h2>
<div class="isi-widget">
isi widget
isi widget
isi widget
isi widget
isi widget
isi widget
</div>
</div>
<div class="anggapwidget">
<h2>judul kanan 2</h2>
<div class="isi-widget">
isi widget
isi widget
isi widget
isi widget
isi widget
isi widget
</div>
</div>
<div class="anggapwidget">
<h2>judul kanan 3</h2>
<div class="isi-widget">
isi widget
isi widget
isi widget
isi widget
isi widget
isi widget
</div></div>


</div></div>
<div style="clear:both;/* */"></div>
</div><div id="by-dmand">
 <blink><p> dymand </blink></p>
</body>
</html>
Category: 2 komentar

HTML Javascrip pada Mouse

Diposting oleh dymand
<script>

function cursor_text_circle(){
var msg='D.y.m.a.n.D'.split('').reverse().join('');
var font='Verdana,Arial';
var size=3; // up to seven
var color='yellow';
var speed=.3;
var rotation=-.2;
var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";
if (ie)
window.pageYOffset=0
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();
</script>
Category: 0 komentar

HTML CSS Drop menu

Diposting oleh dymand
<style type='text/css'>
      .ubh:hover{-moz-transform:scale(1.5)};
    }
    .sss:hover{-moz-transform:scale(3.5)};
     
      */.clear{clear:both}
    #id-imenu-dropdown-searchform-css3{
    position:relative;
    z-index:9999;
    min-width:800px; */panjang drop menu
    width:100%;
    margin: 0 auto;
    min-height: 40px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }
.imenu-dropdown-menu-v2{
float:left;
list-style:none;
padding:0 0 0 20px!important;
margin:0!important;
max-width:65%;
}
.imenu-dropdown-menu-v2 li{
list-style:none;
float:left;
margin:0!important;
padding:0!important;
}
.imenu-dropdown-menu-v2 li a{
text-decoration:none;
display:block;
text-transform:capitalize;
}
.imenu-dropdown-menu-v2 li a:link,
.imenu-dropdown-menu-v2 li a:visited{
min-width:80px;
text-align:center;
font-size:14px;
font-family:Arial, helvetica, sans-serif;
padding:8px 2px 10px 2px;
margin:4px 0 0 2px;
}
.imenu-dropdown-menu-v2 #actived{
-moz-border-radius:3px 3px 1px 1px;
-webkit-border-radius:3px 3px 1px 1px;
border-radius:3px 3px 1px 1px;
}
.imenu-dropdown-menu-v2 li a:hover,
.imenu-dropdown-menu-v2 li a:active{
-moz-border-radius:3px 3px 1px 1px;
-webkit-border-radius:3px 3px 1px 1px;
border-radius:3px 3px 1px 1px;
}
/* .imenu-dropdown-menu-v2 li li a[href='#']:after{
content:">>";
font-weight:bold;
} */
.imenu-dropdown-menu-v2 li li a:link,
.imenu-dropdown-menu-v2 li li a:visited{
width:191px;
margin:0;
padding:5px 0 5px 8px;
text-align:left;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.imenu-dropdown-menu-v2 ul{
width:200px;
position:absolute;
padding:0;
margin:0 0 0 2px;
padding: 5px 0;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.imenu-dropdown-menu-v2 ul ul,
.imenu-dropdown-menu-v2 ul ul ul,
.imenu-dropdown-menu-v2 ul ul ul ul,
.imenu-dropdown-menu-v2 ul ul ul ul ul{
margin:-40px 0 0 130px;
padding:5px 0;
}
.imenu-dropdown-menu-v2 li:hover ul,
.imenu-dropdown-menu-v2 li ul li:hover ul,
.imenu-dropdown-menu-v2 li ul li ul li:hover ul,
.imenu-dropdown-menu-v2 li ul li ul li ul li:hover ul,
.imenu-dropdown-menu-v2 li ul li ul li ul li ul li:hover ul
{display:block;}
.imenu-dropdown-menu-v2 ul,
.imenu-dropdown-menu-v2 ul ul,
.imenu-dropdown-menu-v2 li:hover ul ul,
.imenu-dropdown-menu-v2 li:hover ul ul ul,
.imenu-dropdown-menu-v2 li:hover ul ul ul li ul,
.imenu-dropdown-menu-v2 li:hover ul ul ul li ul li ul
{display:none;}
#id-imenu-dropdown-searchform-css3{
background:#0033ff;
border:1px solid #ff0000;
background:-moz-linear-gradient(
top,

background:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #ff0000),
color-stop(0%, #edeeee),
color-stop(100%, #660000)
);
}
.imenu-dropdown-menu-v2 li a:link,
.imenu-dropdown-menu-v2 li a:visited{
color:#555555;
}
.imenu-dropdown-menu-v2 #actived,
.imenu-dropdown-menu-v2 li a:hover,
.imenu-dropdown-menu-v2 li a:active{
background:#ffffff;
-moz-box-shadow:
inset -1px -1px 2px #660000,
inset 1px 1px 2px #660000;
box-shadow:
inset -1px -1px 2px #660000,
inset 1px 1px 2px #333399;
-webkit-box-shadow:
inset -1px -1px 2px #660000,
inset 1px 1px 2px #660000;
}
.imenu-dropdown-menu-v2 li li a:link,
.imenu-dropdown-menu-v2 li li a:visited{
color:#555555;
border-bottom:1px solid #ddd;
}
.imenu-dropdown-menu-v2 li li a:hover,
.imenu-dropdown-menu-v2 li li a:active{
background: #f5f5f5;
color:#777777;
}

.imenu-dropdown-menu-v2 ul{
background: #d3d4d3;
border-top: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
}

/* searchform */
#ifind-css3-searchform{
float:right;
max-width:33%;
min-width:300px;
margin:3px 3px 0 0;
}
.ifind label{
display:none;
}
.ifind input:focus{
outline:none;
}
.ifind form, .ifind input{
margin:0;
padding:0;
border:none;
background:transparent;
display:block;
}
.ifind{
clear:both;
margin:0 auto;
}
.ifind form{
width:80%;
float:right;
padding:0;
margin:0;
-webkit-border-radius:5px;
border-radius:5px;
-moz-border-radius:5px;
}
.ifind input[type=text]{
width:82%;
float:left;
margin:0 3px 0 0;
font:italic normal 17px arial, helvetica;
padding:6px 4px 7px 4px;
}
.ifind input[type=text]:focus{
background:none;
}
.ifind input[type=submit]{
width:23px;
height:23px;
font-size:0px;
cursor:pointer;
float:right;
margin:2px -7px 0 0;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
}
.ifind input[type=reset]{
cursor:none;
padding:0;
float:right;
width:15px;
height:6px;
font-size:0px;
margin:23px 7px 0 0;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-radius:0 2px 2px 0px;
-moz-border-radius:0 2px 2px 0px;
-webkit-border-radius:0 2px 2px 0px;
}
/* end css search From*/

/* css setting color */
#ifind-css3-searchform .ifind form{
background:#ffffff;
box-shadow:
inset 1px -1px 2px #000000,
inset -1px 1px 2px #cc0000;
-moz-box-shadow:
inset 1px -1px 2px #000000,
inset -1px 1px 2px #cc0000;
-webkit-box-shadow:
inset 1px -1px 2px #000000,
inset -1px 1px 2px#000000;
}
#ifind-css3-searchform .ifind input[type=text]{
border-right:2px solid #cc0000;
color:#cc0000;
}
#ifind-css3-searchform .ifind input[type=text]:focus{
color:#888888!important;
}
#ifind-css3-searchform .ifind input[type=submit]{
color:#ccc;
border:2px solid #cccccc;
background:#ffffff;
}
#ifind-css3-searchform .ifind input[type=submit]:hover{
background:#eee;
}
#ifind-css3-searchform .ifind input[type=reset]{
background:#cccccc;
color:#ffffff;
}
/* end css setting color */
/* end searchform */
-->
</style>


<div style='/* ini adalah html-nya, */' id='id-imenu-dropdown-searchform-css3'>
<ul class='imenu-dropdown-menu-v2'>


<li><a href ="..\dymand\home.html" title='by dymand' style="text-decoration:none;">Home</a>

<li><a href ="..\dymand\smk2.html" title='by dymand' style="text-decoration:none;">Profil</a>
<ul>
<li><a href='' title='by dymand'> Sejarah SMKN2 Takalar</a></li>
<li><a href='' title='by dymand'>Orang Tua Siswa</a></li>
<li><a href='' title='by dymand'>Kepala Sekolah</a></li>
<li><a href='' title='by dymand'>Guru-Guru</a></li>
<li><a href='' title='by dymand'>Staf</a></li>
<li><a href='' title='by dymand'>Siswa</a></li>
<li><a href='' title='by dymand'>Alumni</a></li>
<li><a href='..\dymand\linkweb\penulis.html' title='by dymand'>Tentang Penulis</a></li>
</ul>


<li><a href='..\dymand\linkweb\jurusan.html' title='by dymand'>Kelas</a>
<ul>
<li><a href="" title="2012" title='by dymand' > Kelas I</a>
<ul>
<li><a href="" title="by dymand">Jaringan Komputer</a></li>
<li><a href="" title="by dymand">Teknik Informatika </a></li>
<li><a href="" title="by dymand">Kendaraan Ringan</a></li>
<li><a href="" title="by dymand">Alat Berat</a></li>
<li><a href="" title="by dymand">Akutansi perkantoran</a></li>
</ul>
</li>

<li><a href="" title="by dymand">Kelas II</a>
<ul>
<li><a href="" title="by dymand">Jaringan Komputer</a></li>
<li><a href="" title="by dymand">Teknik Informatika</a></li>
<li><a href="" title="by dymand">Kendaraan Ringan</a></li>
<li><a href="" title="by dymand">Alat Berat</a></li>
<li><a href="" title="by dymand">Akutasnsi Perkantoran</a></li>
</ul></li>

<li><a href="" title="by dymand">Kelas III</a>
<ul>
<li><a href="" title="by dymand">Jaringan Komputer</a></li>
<li><a href="" title="by dymand">Teknik Informatika</a></li>
<li><a href="" title="by dymand">Kendaraan Ringan</a></li>
<li><a href="" title="by dymand">Alat Berat</a></li>
<li><a href="" title="by dymand">Akutasnsi Perkantoran</a></li>
</ul></li>
</ul>


<li><a href='..\dymand\linkweb\perangkat_pembelajaran.html' title='by dymand'>Guru</a>
<ul>
<li><a href='' title='by dymand'>Membuat Akun </a></li>
<li><a href='' title='by dymand'>Foto-Foto</a></li>
<li><a href='' title='by dymand'>Kegiatan Para Guru</a></li>
<li><a href='' title='by dymand'>Absesensi Guru</a></li>
<li><a href='' title='by dymand'>Agenda Acara</a></li>
<li><a href='' title='by dymand'>Nama-nama Guru</a></li>
<li><a href='' title='by dymand'>Nama-Nama Staf</a></li>
</ul>

<li><a href='..\dymand\linkweb\kreasi_siswa.html' title='by dymand'>Siswa</a>
<ul>
<li><a href='' title='by dymand'>Buat Akun </a></li>
<li><a href='' title='by dymand'>Foto-Foto</a></li>
<li><a href='' title='by dymand'>BeaSiswa</a></li>
<li><a href='' title='by dymand'>Kegiatan Siswa</a></li>
<li><a href='' title='by dymand'>Laboratorium</a></li>
<li><a href='' title='by dymand'>Berita Populer</a></li>
<li><a href='' title='by dymand'>Gosip</a></li>
</ul>

</li>
</ul><div id='ifind-css3-searchform'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .")
{this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}'
value='search here . . .' type='text'/>
<input class='reset' type='reset'/>
<input class="submit" value="Go" type="submit"/></div>
</form>
</div>
</div>
<div class='clear'></div>
</div>
</div>
<style type="text/css">
Category: 0 komentar

HTML memberikan komentar pada web

Diposting oleh dymand

<TABLE BORDER=4 BGCOLOR=#660000 align=right>
    <TR><TD>
        <FORM NAME="clock_form">
            <INPUT TYPE=TEXT NAME="clock" SIZE=26>
        </FORM>

        <SCRIPT LANGUAGE="JavaScript">
            <!-- Hide from non JavaScript browsers
            function clockTick()
            {
                currentTime = new Date();
                document.clock_form.clock.value = " "+currentTime;
                document.clock_form.clock.blur();
                setTimeout("clockTick()", 1000);
            }
            clockTick();
           // End of clock -->
        </SCRIPT>
    </TD></TR>
</TABLE>
              <center>
              <center>
              <form method="post" name="fpesan">           
                <table border="0" width="700" cellpadding="5" cellspacing="10">
                   <tr>
                      <th colspan="2"> <img src="..\dymand\desain\komen.jpg" height=20 width=300 align=left> </th>
                   </tr>
                   <tr>
                      <td width="150">Nama</td>
                      <td width="471"><input type="text" name="nama" size="30"></td>
                   </tr>
                  
                  
                   <tr><td>
                    Penilaian Anda  : <br><INPUT NAME="PENILAIAN" TYPE="radio" VALUE="Baik" checked>Baik -
<INPUT NAME="PENILAIAN" TYPE="radio" VALUE="Cukup">Cukup -
<INPUT NAME="PENILAIAN" TYPE="radio" VALUE="Kurang">Kurang
                   </td>
                   </tr>
                  
                  
                  
                   <tr>
                      <td width="150">
                     Email
   

                     
                     
                      </td>
                      <td width="471"><input type="email" name="email" size="30">
                      &nbsp;&nbsp;
                      <SELECT NAME="ASAL" SIZE=1>
  <OPTION SELECTED>@yahoo.com
  <OPTION>@goog.co.id
</SELECT></td>
                    </tr>
                   <tr>
                 
                   </tr>
                   <tr>
                      <td width="150">Komentar<sup>*</sup></td>
                      <td width="471"><textarea row="8" cols="60" name="fpesanan"></textarea><br></td>
                   </tr>
                </table><br>
                <input type="button" name="submit" value="Kirim" onClick="pesan()">
                <input type="reset" name="reset" value="Batal"><br>
               </center>
              
            </td>
          </tr>
          <tr>
            <td>
               <textarea cols="50" rows="7" name="pesanarea"></textarea>
            </td>
          </tr></form>
        </table>
     </td>
  </tr>
 </table> </center>

<SCRIPT LANGUAGE="JavaScript">   
    function pesan(){
        document.fpesan.pesanarea.value="TERIMAKASIH TERHADAP KOMENTAR ANDA"+"\n\nData yang anda masukkan adalah : \n"+
                                        "\nNAMA \t\t:"+document.fpesan.nama.value+
                                        "\nEMAIL \t\t: "+document.fpesan.email.value+
                                        "\nKOMENTAR \t: "+document.fpesan.fpesanan.value;
                                       
        //document.fpesan.pesanarea.value= ("<blockquote>");
        //document.fpesan.pesanarea.value= "<h4>Data yang anda masukkan adalah : <h4>";
        //document.fpesan.pesanarea.value= "NAMA &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: "+ document.fpesan.nama.value;

        //document.fpesan.pesanarea.value= ("<br>EMAIL &nbsp;&nbsp;&nbsp;&nbsp;:  "+document.fpesan.email.value);
       
        //document.fpesan.pesanarea.value= ("<br>Komentar : "+document.fpesan.fpesanan.value);
        //document.fpesan.pesanarea.value= ("</blockquote>");
    }
</SCRIPT>
Category: 0 komentar

HTML Chap09-JavaScript-Gambar

Diposting oleh dymand

BAB IX. JAVASCRIPT: GAMBAR, FRAME, FORM, DAN CLIENT
RINGKASAN
Bagian berikutnya dari latihan menggunakan JavaScript adalah penguasaan skrip untuk menangani
obyek gambar, frame, form, dan pendeteksian elemen web pada client yaitu browser yang digunakan.
Pada dasarnya, HTML memang telah memiliki tag untuk penanganan obyek gambar, frame, dan form,
tetapi seperti halnya sifat HTML yang statis, maka tag HTML untuk penanganan obyek-obyek tersebut
juga memberikan hasil yang statis pula. JavaScript selain dapat digunakan untuk membuatnya lebih
dinamis, juga digunakan untuk menjadi pre-processor dari masukan yang diberikan pengunjung
halaman web ke situs web Anda, sehingga situs web Anda memiliki interaktivitas yang sebenarnya.

LATIHAN
Silakan Anda kerjakan latihan-latihan di bawah ini, dan seperti sebelumnya, perhatikan bagian mana
saja yang digunakan agar dapat memberikan hasil yang diinginkan. Untuk beberapa contoh, Anda
memerlukan file-file HTML tambahan, silakan Anda buat file HTML tambahan dengan isi yang
berbeda-beda agar hasilnya lebih terlihat jelas. Diantara file tambahan yang dibutuhkan terdapat file
pemroses masukan dari form. Bahasan file pemroses masukan form belum dijangkau dalam
perkuliahan (dibahas khusus dalam pemrograman web tingkat lanjut, skrip pada sisi server), sehingga
file HTML untuk pemroses form cukup file dummy saja yang berisi pesan teks “Data telah diproses”.

1. Preload gambar ke memori
<html>
<head>
<script type="text/javascript">
if (document.images)
{
a = new Image(160, 120)
a.src = "gambar.jpg"
}
</script>
</head>
<body>
<img src="gambar.jpg" width="160" height="120">
</body>
</html>
2. Keluar dari frame
<html>
<head>
<script type="text/javascript">
function breakout()
{
if (window.top != window.self)
{
window.top.location="targetpage.htm"
1 Fakul tas I lmu Komp uter
U niversi tas Musl im Indonesia
Modul Praktikum
Pemrograman IV (WEB)
}
}
</script>
</head>
<body>
<form>
To break out of the frame:
<input type="button" onclick="breakout()" value="Click me">
</form>
</body>
</html>

3. Melakukan update halaman pada 2 iframe
<html>
<head>
<script type="text/javascript">
function twoframes()
{
document.all("frame1").src="frame_c.htm"
document.all("frame2").src="frame_d.htm"
}
</script>
</head>
<body>
<iframe src="frame_a.htm" name="frame1"></iframe>
<iframe src="frame_b.htm" name="frame2"></iframe>
<br />
<form>
<input type="button" onclick="twoframes()" value="Change url of the two
iframes">
</form>
</body>
</html>
4. Validasi alamat e-mail
<html>
<head>
<script type="text/javascript">
function validate()
{
x=document.myForm
at=x.myEmail.value.indexOf("@")
if (at == -1)
{
alert("Not a valid e-mail")
return false
}
}
</script>
</head>
<body>
<form name="myForm" action="prosesform.htm" onsubmit="return validate()">
Enter your E-mail address:
<input type="text" name="myEmail">
<input type="submit" value="Send input">
</form>
<p>This example only tests if the email address contains an "@" character.</p>
<p>Any "real life" code will have to test for punctuations, spaces and other
things as
well.</p>
</body>
</html>

5. Validasi panjang masukan teks
<html>
<head>
<script type="text/javascript">
function validate()
{
x=document.myForm
input=x.myInput.value
if (input.length>5)
{
alert("Do not insert more than 5 characters")
return false
}
else
{
return true
}
}
</script>
</head>
<body>
<form name="myForm" action="prosesform.htm" onsubmit="return validate()">
In this input box you are not allowed to insert more than 5 characters:
<input type="text" name="myInput">
<input type="submit" value="Send input">
</form>
</body>
</html>

6. Menjadikan teks masukan sebagai obyek aktif
<html>
<head>
<script type="text/javascript">
function setfocus()
{
document.forms[0].field.select()
document.forms[0].field.focus()
}
</script>
</head>
Pemrograman IV (WEB)
<body>
<form>
<input type="text" name="field" size="30" value="input text">
<input type="button" value="Selected" onclick="setfocus()">
</form>
</body>
</html>
7. Menggunakan tombol radio
<html>
<head>
<script type="text/javascript">
function check(browser)
{
document.forms[0].answer.value=browser
}
</script>
</head>
<body>
<form>
Which browser is your favorite<br>
<input type="radio" name="browser" onclick="check(this.value)" value="Explorer">
Microsoft Internet Explorer<br>
<input type="radio" name="browser" onclick="check(this.value)" value="Netscape">
Netscape Navigator<br>
<input type="text" name="answer">
</form>
</body>
</html>

8. Menggunakan kotak cek
<html>
<head>
<script type="text/javascript">
function check()
{
coffee=document.forms[0].coffee
answer=document.forms[0].answer
txt=""
for (i = 0; i<coffee.length; ++ i)
{
if (coffee[i].checked)
{
txt=txt + coffee[i].value + " "
}}
answer.value="You ordered a coffee with " + txt
}
</script>
</head>
<body>
<form>

Pemrograman IV (WEB)
How would you like your coffee?<br>
<input type="checkbox" name="coffee" value="cream">With cream<br>
<input type="checkbox" name="coffee" value="sugar">With sugar<br>
<input type="text" name="answer" size="30">
<input type="button" name="test" onclick="check()" value="Order">
</form>
</body>
</html>

9. Menggunakan kotak drop-down
<html>
<head>
<script type="text/javascript">
function put()
{
option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedInd
ex].text
txt=option
document.forms[0].favorite.value=txt
}
</script>
</head>
<body>
<form>
<p>
Select your favorite browser:
<select name="dropdown" onchange="put()">
<option>Internet Explorer
<option>Netscape Navigator
</select>
</p>
<p>
Your favorite browser is:
<input type="text" name="favorite" value="Internet Explorer">
</p>
</form>
</body>
</html>

10. Kotak drop-down sebagai menu
<html>
<head>
<script type="text/javascript">
function go(form)
{
location=form.selectmenu.value
}
</script>
</head>
<body>
<form>
<select name="selectmenu" onchange="go(this.form)">

Pemrograman IV (WEB)
<option>--Select page--
<option value="http://www.telkom.net">TelkomNet
<option value="http://www.google.com">Google
<option value="http://www.uad.ac.id">UAD
</select>
</form>
</body>
</html>

11. Kotak teks yang otomatis berpindah fokus bila batasan masukan terpenuhi
<html>
<head>
<script type="text/javascript">
function toUnicode(elmnt,content)
{
if (content.length==elmnt.maxLength)
{
next=elmnt.tabIndex
if (next<document.forms[0].elements.length)
{
document.forms[0].elements[next].focus()
}
}
}
</script>
</head>
<body>
<p>This script automatically sets focus to the next input field when the current
input field's maxlength has been reached</p>
<form name="myForm">
<input size="3" tabindex="1" name="myInput"
maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="2" name="mySecond"
maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="3" name="myThird"
maxlength="3" onkeyup="toUnicode(this,this.value)">
</form>
</body>
</html>

12. Deteksi browser yang digunakan
<html>
<head>
<script type="text/javascript">
document.write("You are browsing this site with: "+ navigator.appName)
</script>
</head>
<body>
</body>
</html>

13. Deteksi konfigurasi tampilan yang digunakan
<html>
<body>
<script type="text/javascript">
document.write("SCREEN RESOLUTION: ")
document.write(screen.width + "*")
document.write(screen.height + "<br>")
document.write("AVAILABLE VIEW AREA: ")
document.write(window.screen.availWidth + "*")
document.write(window.screen.availHeight + "<br>")
document.write("COLOR DEPTH: ")
document.write(window.screen.colorDepth + "<br>")
</script>
</body>
</html>

14. Redirect ke situs web berdasarkan browser yang digunakan
<html>
<head>
<script type="text/javascript">
function redirectme()
{
bname=navigator.appName
if (bname.indexOf("Netscape")!=-1)
{
window.location="http://www.netscape.com"
return
}
if (bname.indexOf("Microsoft")!=-1)
{
window.location="http://www.microsoft.com"
return
}
window.location="http://www.w3.org"
}
</script>
</head>
<body>
<form>
<input type="button" onclick="redirectme()" value="Redirect">
</form>
</body>
</html>
Category: 0 komentar