Html, CSS, JavaScript, codes

HTML List

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)

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)

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



<script language="JavaScript1.2">

/*
Neon Lights Text
By 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=0
if (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>')
}
else
document.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 color
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(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

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

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 />
<img src="http://www.linkgrand.com/images/banner02.gif" id="adBanner1" border="0" width="468" height="60"></a>

Auto Refresh

<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 OWN
document.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 OWN
document.write('Next <a href="javascript:window.location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' </b> seconds')
countDown()
}

if (document.all||document.getElementById)
startit()
else
window.onload=startit

</script>

Basic HTML Scroll Box

<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

Welcome!

CSS:

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

HTML:

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

Waktu dan tanggal: kode JavaScript

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

blog ini masih dalam pembangunan.