Html, CSS, JavaScript, codes

HTML List

2011-11-07T18:06:00.000-08:00

Unordered Lists : Unordered list dimulai dengan tag <ul>. Setiap item daftar dimulai dengan <li>tag

kopi
roti
keju

 <br /><ul type=disc><li>kopi</li><li>roti</li><li>keju</li></ul>

Ordered Lists: Ordered list dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>

kopi
roti
keju

 <br /><ol><li>kopi</li><li>roti</li><li>keju</li></ol>

kopi
roti
keju

 <br /><ol type=A start=2><li>kopi</li><li>roti</li><li>keju</li></ol>

kopi
roti
keju

 <br /><ol type=I start=3><li>kopi</li><li>roti</li><li>keju</li></ol>

Definition Lists: Sebuah daftar definisi adalah daftar item, dengan deskripsi dari setiap item.

kopi: teks deskripsi
roti: teks deskripsi
keju: teks deskripsi

 <br /><dl><dt>kopi</dt><dd>teks deskripsi</dd><dt>roti</dt><dd>teks deskripsi</dd><dt>keju</dt><dd>teks deskripsi</dd></dl>

Table (cellpadding and cellspacing)

2011-11-05T16:38:00.000-07:00

Cellpadding
Space between the edge of the cell and its contents

cell 1

cell 2

 <br /><table border="1" width="150" cellpadding="25"><tr><td>cell 1</td><td>cell 2</td></tr></table>

Cellspacing
Space between cells

cell 1

cell 2

 <br /><br /><table border="1" width="150" cellspacing="25"><tr><td>cell 1</td><td>cell 2</td></tr></table>

Table (colspan and rowspan)

2011-11-05T15:55:00.000-07:00

Colspan
Cell will expand horizontally across x cells in her right.

cell 11	cells 12, 13, 14
cell 21	cell 22	cell 23	cell 24

 <br /><table border="1"><tr> <td>cell 11</td> <td colspan="3">cells 12, 13, 14</td></tr><tr><td>cell 21</td><td>cell 22</td><td>cell 23</td><td>cell 24</td></tr></table>

Rowspan
Cell will expand vertically over cells below it

cell 11	cell 12
cells 21, 31, 41	cell 22
	cell 32
	cell 42

 <br /><table border="1"><tr>   <td>cell 11</td><td>cell 12</td></tr><tr><td rowspan="3">cells 21, 31, 41</td><td>cell 22</td></tr><tr><td>cell 32</td></tr><tr><td>cell 42</td></tr></table>

Neon Lights Text

2011-10-23T17:10:00.000-07:00

<script language="JavaScript1.2">/*Neon Lights TextBy JavaScript Kit (http://javascriptkit.com)For this script, TOS, and 100s more DHTML scripts,Visit http://www.dynamicdrive.com*/var message="Neon Lights Text Neon Lights Text Neon Lights Text Neon Lights Text Neon Lights Text"var neonbasecolor="black"var neontextcolor="red"var flashspeed=56 //in milliseconds///No need to edit below this line/////var n=0if (document.all||document.getElementById){document.write('<font color="'+neonbasecolor+'">')for (m=0;m<message.length;m++)document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')document.write('</font>')}elsedocument.write(message)function crossref(number){var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)return crossobj}function neon(){//Change all letters to base colorif (n==0){for (m=0;m<message.length;m++)//eval("document.all.neonlight"+m).style.color=neonbasecolorcrossref(m).style.color=neonbasecolor}//cycle through and change individual letters to neon colorcrossref(n).style.color=neontextcolorif (n<message.length-1)n++else{n=0clearInterval(flashing)setTimeout("beginneon()",1500)return}}function beginneon(){if (document.all||document.getElementById)flashing=setInterval("neon()",flashspeed)}beginneon()</script>

Entered text is not indexed by search engines!

Dynamic Calendar

2011-07-18T08:10:00.001-07:00

Javascript Dynamic Calendar

<script language="JavaScript">

/*
Dynamic Calendar II (By Jason Moon at http://www.jasonmoon.net)
Permission granted to Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var ns6=document.getElementById&&!document.all
var ie4=document.all

var Selected_Month;
var Selected_Year;
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth();

var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var Current_Year = Current_Date.getYear();
if (Current_Year < 1000)
Current_Year+=1900


var Today = Current_Date.getDate();

function Header(Year, Month) {

   if (Month == 1) {
   Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
   }
   var Header_String = Month_Label[Month] + ' ' + Year;
   return Header_String;
}



function Make_Calendar(Year, Month) {
   var First_Date = new Date(Year, Month, 1);
   var Heading = Header(Year, Month);
   var First_Day = First_Date.getDay() + 1;
   if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
       ((Days_in_Month[Month] == 30) && (First_Day == 7))) {
      var Rows = 6;
   }
   else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
      var Rows = 4;
   }
   else {
      var Rows = 5;
   }

   var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">';

   HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>';

   HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>';

   HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>';

   var Day_Counter = 1;
   var Loop_Counter = 1;
   for (var j = 1; j <= Rows; j++) {
      HTML_String += '<tr ALIGN="left" VALIGN="top">';
      for (var i = 1; i < 8; i++) {
         if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
            if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
               HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';
            }
            else {
               HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>';
            }
            Day_Counter++;    
         }
         else {
            HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';
         }
         Loop_Counter++;
      }
      HTML_String += '</tr>';
   }
   HTML_String += '</table></td></tr></table>';
   cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
   cross_el.innerHTML = HTML_String;
}


function Check_Nums() {
   if ((event.keyCode < 48) || (event.keyCode > 57)) {
      return false;
   }
}



function On_Year() {
   var Year = document.when.year.value;
   if (Year.length == 4) {
      Selected_Month = document.when.month.selectedIndex;
      Selected_Year = Year;
      Make_Calendar(Selected_Year, Selected_Month);
   }
}

function On_Month() {
   var Year = document.when.year.value;
   if (Year.length == 4) {
      Selected_Month = document.when.month.selectedIndex;
      Selected_Year = Year;
      Make_Calendar(Selected_Year, Selected_Month);
   }
   else {
      alert('Please enter a valid year.');
      document.when.year.focus();
   }
}


function Defaults() {
   if (!ie4&&!ns6)
   return
   var Mid_Screen = Math.round(document.body.clientWidth / 2);
   document.when.month.selectedIndex = Current_Month;
   document.when.year.value = Current_Year;
   Selected_Month = Current_Month;
   Selected_Year = Current_Year;
   Make_Calendar(Current_Year, Current_Month);
}


function Skip(Direction) {
   if (Direction == '+') {
      if (Selected_Month == 11) {
         Selected_Month = 0;
         Selected_Year++;
      }
      else {
         Selected_Month++;
      }
   }
   else {
      if (Selected_Month == 0) {
         Selected_Month = 11;
         Selected_Year--;
      }
      else {
         Selected_Month--;
      }
   }
   Make_Calendar(Selected_Year, Selected_Month);
   document.when.month.selectedIndex = Selected_Month;
   document.when.year.value = Selected_Year;
}

</script><br /><br /><br /><br /><div id=NavBar style="position:relative;width:286px;top:5px;" align="left"><form name="when"><table><tr>
   <td><input type="button" value="<-- Last" onClick="Skip('-')"></td>
   <td> </td>
   <td><select name="month" onChange="On_Month()"><br /><br /><script language="JavaScript1.2">
if (ie4||ns6){
   for (j=0;j<Month_Label.length;j++) {
      document.writeln('<option value=' + j + '>' + Month_Label[j]);
   }
}

</script><br /><br />       </select><br />   </td>
   <td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>
   <td> </td>
   <td><input type="button" value="Next -->" onClick="Skip('+')"></td>
</tr></table></form></div><div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div><br /><br /><br /><body onLoad="Defaults()"><br /><br />

Javascript Banner Rotator

2011-07-18T07:58:00.000-07:00

Javascript Banner Rotator with auto refresh (3sec)

<script type="text/javascript">var imgs1 = new Array("http://www.linkgrand.com/images/banner02.gif","http://www.wordlinx.com/banners/468x60_1.gif");var lnks1 = new Array("http://www.linkgrand.com/?r=240533","http://www.wordlinx.com/index.php?r=293760");var alt1 = new Array("linkgrand","wordlinx");var currentAd1 = 0;var imgCt1 = 2;function cycle1() {  if (currentAd1 == imgCt1) {    currentAd1 = 0;  }var banner1 = document.getElementById('adBanner1');var link1 = document.getElementById('adLink1');  banner1.src=imgs1[currentAd1]  banner1.alt=alt1[currentAd1]  document.getElementById('adLink1').href=lnks1[currentAd1]  currentAd1++;}  window.setInterval("cycle1()",3000);</script><br /><a href="http://www.linkgrand.com/?r=240533" id="adLink1" target="_blank"><br /></a>

Auto Refresh

2011-07-18T07:27:00.001-07:00

<script language="JavaScript">//Refresh page script- By Brett Taylor (glutnix@yahoo.com.au)//Modified by Dynamic Drive for NS4, NS6+//Visit http://www.dynamicdrive.com for this script//configure refresh interval (in seconds)var countDownInterval=60;//configure width of displayed text, in px (applicable only in NS4)var c_reloadwidth=200</script><br /><br /><br /><ilayer id="c_reload" width=&{c_reloadwidth}; ><layer id="c_reload2" width=&{c_reloadwidth}; left=0 top=0></layer></ilayer><br /><br /><script>var countDownTime=countDownInterval+1;function countDown(){countDownTime--;if (countDownTime <=0){countDownTime=countDownInterval;clearTimeout(counter)window.location.reload()return}if (document.all) //if IE 4+document.all.countDownText.innerText = countDownTime+" ";else if (document.getElementById) //else if NS6+document.getElementById("countDownText").innerHTML=countDownTime+" "else if (document.layers){ //CHANGE TEXT BELOW TO YOUR OWNdocument.c_reload.document.c_reload2.document.write('Next <a href="javascript:window.location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' </b> seconds')document.c_reload.document.c_reload2.document.close()}counter=setTimeout("countDown()", 1000);}function startit(){if (document.all||document.getElementById) //CHANGE TEXT BELOW TO YOUR OWNdocument.write('Next <a href="javascript:window.location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' </b> seconds')countDown()}if (document.all||document.getElementById)startit()elsewindow.onload=startit</script>

Basic HTML Scroll Box

2011-06-27T15:46:00.001-07:00

<div style="height:125px; width:125px; font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">As you can see, you can fill the space with text content and images</div>

As you can see, you can fill the space with text content and images

Blinking Text in CSS

2011-06-27T12:41:00.000-07:00

Welcome!

CSS:

<style>p#blink { text-decoration: blink; }</style>

HTML:

<p id="blink">Welcome!</p>

Waktu dan tanggal: kode JavaScript

2011-06-27T09:49:00.000-07:00

Ini adalah jam tangan yang dapat ditempatkan di manapun dalam HTML situs Anda.

<script type="text/javascript">   var ziarray=new Array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu")    var lunaarray=new Array ("Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember")    function datacom() {      var mydate=new Date()      var year=mydate.getYear()      if (year < 1000)        year+=1900      var day=mydate.getDay()      var month=mydate.getMonth()      var daym=mydate.getDate()      if (daym<10)        daym="0"+daym      var hours=mydate.getHours()      var minutes=mydate.getMinutes()      var seconds=mydate.getSeconds()      var dn="AM"      if (hours>=12)        dn="PM"      if (hours>12) {        hours=hours-12      }      if (hours==0)        hours=12      if (minutes<=9)        minutes="0"+minutes      if (seconds<=9)        seconds="0"+seconds         var cdate="<small><font color='#fefefe' face='Arial'><b>"+ziarray[day]+", "+daym+" "+lunaarray[month]+" "+year+"<br> "+hours+":"+minutes+":"+seconds+" "+dn    +"</b></font></small>"       document.getElementById("data").innerHTML=cdate    }    function arata() {      if (document.getElementById("data"))        setInterval("datacom()",1000)    }    window.onload=arata;    </script> <div style="width:200px; background-color:#808080; text-align:center" id="data"></div>

sedang dibangun

2011-05-16T18:22:00.000-07:00

blog ini masih dalam pembangunan.