Picker Panel

var jscolor = {


dir : '', // location of jscolor directory (leave empty to autodetect)
bindClass : 'color', // class name
binding : true, // automatic binding via
preloading : true, // use image preloading?


install : function() {
jscolor.addEvent(window, 'load', jscolor.init);
},


init : function() {
if(jscolor.binding) {
jscolor.bind();
}
if(jscolor.preloading) {
jscolor.preload();
}
},


getDir : function() {
if(!jscolor.dir) {
var detected = jscolor.detectDir();
jscolor.dir = detected!==false ? detected : 'jscolor/';
}
return jscolor.dir;
},


detectDir : function() {
var base = location.href;

var e = document.getElementsByTagName('base');
for(var i=0; i vs[a] ?
(-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
tp[a],
-vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
(-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
(tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
];
drawPicker(pp[a], pp[b]);
}
};


this.importColor = function() {
if(!valueElement) {
this.exportColor();
} else {
if(!this.adjust) {
if(!this.fromString(valueElement.value, leaveValue)) {
styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
styleElement.style.color = styleElement.jscStyle.color;
this.exportColor(leaveValue | leaveStyle);
}
} else if(!this.required && /^\s*$/.test(valueElement.value)) {
valueElement.value = '';
styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
styleElement.style.color = styleElement.jscStyle.color;
this.exportColor(leaveValue | leaveStyle);

} else if(this.fromString(valueElement.value)) {
// OK
} else {
this.exportColor();
}
}
};


this.exportColor = function(flags) {
if(!(flags & leaveValue) && valueElement) {
var value = this.toString();
if(this.caps) { value = value.toUpperCase(); }
if(this.hash) { value = '#'+value; }
valueElement.value = value;
}
if(!(flags & leaveStyle) && styleElement) {
styleElement.style.backgroundColor =
'#'+this.toString();
styleElement.style.color =
0.213 * this.rgb[0] +
0.715 * this.rgb[1] +
0.072 * this.rgb[2]
< 0.5 ? '#FFF' : '#000'; } if(!(flags & leavePad) && isPickerOwner()) { redrawPad(); } if(!(flags & leaveSld) && isPickerOwner()) { redrawSld(); } }; this.fromHSV = function(h, s, v, flags) { // null = don't change h<0 && (h=0) || h>6 && (h=6);
s<0 && (s=0) || s>1 && (s=1);
v<0 && (v=0) || v>1 && (v=1);
this.rgb = HSV_RGB(
h===null ? this.hsv[0] : (this.hsv[0]=h),
s===null ? this.hsv[1] : (this.hsv[1]=s),
v===null ? this.hsv[2] : (this.hsv[2]=v)
);
this.exportColor(flags);
};


this.fromRGB = function(r, g, b, flags) { // null = don't change
r<0 && (r=0) || r>1 && (r=1);
g<0 && (g=0) || g>1 && (g=1);
b<0 && (b=0) || b>1 && (b=1);
var hsv = RGB_HSV(
r===null ? this.rgb[0] : (this.rgb[0]=r),
g===null ? this.rgb[1] : (this.rgb[1]=g),
b===null ? this.rgb[2] : (this.rgb[2]=b)
);
if(hsv[0] !== null) {
this.hsv[0] = hsv[0];
}
if(hsv[2] !== 0) {
this.hsv[1] = hsv[1];
}
this.hsv[2] = hsv[2];
this.exportColor(flags);
};


this.fromString = function(hex, flags) {
var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i);
if(!m) {
return false;
} else {
if(m[1].length === 6) { // 6-char notation
this.fromRGB(
parseInt(m[1].substr(0,2),16) / 255,
parseInt(m[1].substr(2,2),16) / 255,
parseInt(m[1].substr(4,2),16) / 255,
flags
);
} else { // 3-char notation
this.fromRGB(
parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
flags
);
}
return true;
}
};


this.toString = function() {
return (
(0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
(0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
(0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
);
};


function RGB_HSV(r, g, b) {
var n = Math.min(Math.min(r,g),b);
var v = Math.max(Math.max(r,g),b);
var m = v - n;
if(m === 0) { return [ null, 0, v ]; }
var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
return [ h===6?0:h, m/v, v ];
}


function HSV_RGB(h, s, v) {
if(h === null) { return [ v, v, v ]; }
var i = Math.floor(h);
var f = i%2 ? h-i : 1-(h-i);
var m = v * (1 - s);
var n = v * (1 - s*f);
switch(i) {
case 6:
case 0: return [v,n,m];
case 1: return [n,v,m];
case 2: return [m,v,n];
case 3: return [m,n,v];
case 4: return [n,m,v];
case 5: return [v,m,n];
}
}


function removePicker() {
delete jscolor.picker.owner;
document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
}


function drawPicker(x, y) {
if(!jscolor.picker) {
jscolor.picker = {
box : document.createElement('div'),
boxB : document.createElement('div'),
pad : document.createElement('div'),
padB : document.createElement('div'),
padM : document.createElement('div'),
sld : document.createElement('div'),
sldB : document.createElement('div'),
sldM : document.createElement('div'),
btn : document.createElement('div'),
btnS : document.createElement('span'),
btnT : document.createTextNode(THIS.pickerCloseText)
};
for(var i=0,segSize=4; i
var seg = document.createElement('div');
seg.style.height = segSize+'px';
seg.style.fontSize = '1px';
seg.style.lineHeight = '0';
jscolor.picker.sld.appendChild(seg);
}
jscolor.picker.sldB.appendChild(jscolor.picker.sld);
jscolor.picker.box.appendChild(jscolor.picker.sldB);
jscolor.picker.box.appendChild(jscolor.picker.sldM);
jscolor.picker.padB.appendChild(jscolor.picker.pad);
jscolor.picker.box.appendChild(jscolor.picker.padB);
jscolor.picker.box.appendChild(jscolor.picker.padM);
jscolor.picker.btnS.appendChild(jscolor.picker.btnT);
jscolor.picker.btn.appendChild(jscolor.picker.btnS);
jscolor.picker.box.appendChild(jscolor.picker.btn);
jscolor.picker.boxB.appendChild(jscolor.picker.box);
}

var p = jscolor.picker;

// controls interaction
p.box.onmouseup =
p.box.onmouseout = function() { target.focus(); };
p.box.onmousedown = function() { abortBlur=true; };
p.box.onmousemove = function(e) {
if (holdPad || holdSld) {
holdPad && setPad(e);
holdSld && setSld(e);
if (document.selection) {
document.selection.empty();
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
}
dispatchImmediateChange();
}
};
p.padM.onmouseup =
p.padM.onmouseout = function() { if(holdPad) { holdPad=false; jscolor.fireEvent(valueElement,'change'); } };
p.padM.onmousedown = function(e) {
holdPad=true;
setPad(e);
dispatchImmediateChange();
};
p.sldM.onmouseup =
p.sldM.onmouseout = function() { if(holdSld) { holdSld=false; jscolor.fireEvent(valueElement,'change'); } };
p.sldM.onmousedown = function(e) {
holdSld=true;
setSld(e);
dispatchImmediateChange();
};

// picker
var dims = getPickerDims(THIS);
p.box.style.width = dims[0] + 'px';
p.box.style.height = dims[1] + 'px';

// picker border
p.boxB.style.position = 'absolute';
p.boxB.style.clear = 'both';
p.boxB.style.left = x+'px';
p.boxB.style.top = y+'px';
p.boxB.style.zIndex = THIS.pickerZIndex;
p.boxB.style.border = THIS.pickerBorder+'px solid';
p.boxB.style.borderColor = THIS.pickerBorderColor;
p.boxB.style.background = THIS.pickerFaceColor;

// pad image
p.pad.style.width = jscolor.images.pad[0]+'px';
p.pad.style.height = jscolor.images.pad[1]+'px';

// pad border
p.padB.style.position = 'absolute';
p.padB.style.left = THIS.pickerFace+'px';
p.padB.style.top = THIS.pickerFace+'px';
p.padB.style.border = THIS.pickerInset+'px solid';
p.padB.style.borderColor = THIS.pickerInsetColor;

// pad mouse area
p.padM.style.position = 'absolute';
p.padM.style.left = '0';
p.padM.style.top = '0';
p.padM.style.width = THIS.pickerFace + 2*THIS.pickerInset + jscolor.images.pad[0] + jscolor.images.arrow[0] + 'px';
p.padM.style.height = p.box.style.height;
p.padM.style.cursor = 'crosshair';

// slider image
p.sld.style.overflow = 'hidden';
p.sld.style.width = jscolor.images.sld[0]+'px';
p.sld.style.height = jscolor.images.sld[1]+'px';

// slider border
p.sldB.style.display = THIS.slider ? 'block' : 'none';
p.sldB.style.position = 'absolute';
p.sldB.style.right = THIS.pickerFace+'px';
p.sldB.style.top = THIS.pickerFace+'px';
p.sldB.style.border = THIS.pickerInset+'px solid';
p.sldB.style.borderColor = THIS.pickerInsetColor;

// slider mouse area
p.sldM.style.display = THIS.slider ? 'block' : 'none';
p.sldM.style.position = 'absolute';
p.sldM.style.right = '0';
p.sldM.style.top = '0';
p.sldM.style.width = jscolor.images.sld[0] + jscolor.images.arrow[0] + THIS.pickerFace + 2*THIS.pickerInset + 'px';
p.sldM.style.height = p.box.style.height;
try {
p.sldM.style.cursor = 'pointer';
} catch(eOldIE) {
p.sldM.style.cursor = 'hand';
}

// "close" button
function setBtnBorder() {
var insetColors = THIS.pickerInsetColor.split(/\s+/);
var pickerOutsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
p.btn.style.borderColor = pickerOutsetColor;
}
p.btn.style.display = THIS.pickerClosable ? 'block' : 'none';
p.btn.style.position = 'absolute';
p.btn.style.left = THIS.pickerFace + 'px';
p.btn.style.bottom = THIS.pickerFace + 'px';
p.btn.style.padding = '0 15px';
p.btn.style.height = '18px';
p.btn.style.border = THIS.pickerInset + 'px solid';
setBtnBorder();
p.btn.style.color = THIS.pickerButtonColor;
p.btn.style.font = '12px sans-serif';
p.btn.style.textAlign = 'center';
try {
p.btn.style.cursor = 'pointer';
} catch(eOldIE) {
p.btn.style.cursor = 'hand';
}
p.btn.onmousedown = function () {
THIS.hidePicker();
};
p.btnS.style.lineHeight = p.btn.style.height;

// load images in optimal order
switch(modeID) {
case 0: var padImg = 'hs.png'; break;
case 1: var padImg = 'hv.png'; break;
}
p.padM.style.backgroundImage = "url('"+jscolor.getDir()+"cross.gif')";
p.padM.style.backgroundRepeat = "no-repeat";
p.sldM.style.backgroundImage = "url('"+jscolor.getDir()+"arrow.gif')";
p.sldM.style.backgroundRepeat = "no-repeat";
p.pad.style.backgroundImage = "url('"+jscolor.getDir()+padImg+"')";
p.pad.style.backgroundRepeat = "no-repeat";
p.pad.style.backgroundPosition = "0 0";

// place pointers
redrawPad();
redrawSld();

jscolor.picker.owner = THIS;
document.getElementsByTagName('body')[0].appendChild(p.boxB);
}


function getPickerDims(o) {
var dims = [
2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[0] +
(o.slider ? 2*o.pickerInset + 2*jscolor.images.arrow[0] + jscolor.images.sld[0] : 0),
o.pickerClosable ?
4*o.pickerInset + 3*o.pickerFace + jscolor.images.pad[1] + o.pickerButtonHeight :
2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[1]
];
return dims;
}


function redrawPad() {
// redraw the pad pointer
switch(modeID) {
case 0: var yComponent = 1; break;
case 1: var yComponent = 2; break;
}
var x = Math.round((THIS.hsv[0]/6) * (jscolor.images.pad[0]-1));
var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.pad[1]-1));
jscolor.picker.padM.style.backgroundPosition =
(THIS.pickerFace+THIS.pickerInset+x - Math.floor(jscolor.images.cross[0]/2)) + 'px ' +
(THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.cross[1]/2)) + 'px';

// redraw the slider image
var seg = jscolor.picker.sld.childNodes;

switch(modeID) {
case 0:
var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1);
for(var i=0; i
seg[i].style.backgroundColor = 'rgb('+
(rgb[0]*(1-i/seg.length)*100)+'%,'+
(rgb[1]*(1-i/seg.length)*100)+'%,'+
(rgb[2]*(1-i/seg.length)*100)+'%)';
}
break;
case 1:
var rgb, s, c = [ THIS.hsv[2], 0, 0 ];
var i = Math.floor(THIS.hsv[0]);
var f = i%2 ? THIS.hsv[0]-i : 1-(THIS.hsv[0]-i);
switch(i) {
case 6:
case 0: rgb=[0,1,2]; break;
case 1: rgb=[1,0,2]; break;
case 2: rgb=[2,0,1]; break;
case 3: rgb=[2,1,0]; break;
case 4: rgb=[1,2,0]; break;
case 5: rgb=[0,2,1]; break;
}
for(var i=0; i
s = 1 - 1/(seg.length-1)*i;
c[1] = c[0] * (1 - s*f);
c[2] = c[0] * (1 - s);
seg[i].style.backgroundColor = 'rgb('+
(c[rgb[0]]*100)+'%,'+
(c[rgb[1]]*100)+'%,'+
(c[rgb[2]]*100)+'%)';
}
break;
}
}


function redrawSld() {
// redraw the slider pointer
switch(modeID) {
case 0: var yComponent = 2; break;
case 1: var yComponent = 1; break;
}
var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.sld[1]-1));
jscolor.picker.sldM.style.backgroundPosition =
'0 ' + (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.arrow[1]/2)) + 'px';
}


function isPickerOwner() {
return jscolor.picker && jscolor.picker.owner === THIS;
}


function blurTarget() {
if(valueElement === target) {
THIS.importColor();
}
if(THIS.pickerOnfocus) {
THIS.hidePicker();
}
}


function blurValue() {
if(valueElement !== target) {
THIS.importColor();
}
}


function setPad(e) {
var mpos = jscolor.getRelMousePos(e);
var x = mpos.x - THIS.pickerFace - THIS.pickerInset;
var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
switch(modeID) {
case 0: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), 1 - y/(jscolor.images.pad[1]-1), null, leaveSld); break;
case 1: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), null, 1 - y/(jscolor.images.pad[1]-1), leaveSld); break;
}
}


function setSld(e) {
var mpos = jscolor.getRelMousePos(e);
var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
switch(modeID) {
case 0: THIS.fromHSV(null, null, 1 - y/(jscolor.images.sld[1]-1), leavePad); break;
case 1: THIS.fromHSV(null, 1 - y/(jscolor.images.sld[1]-1), null, leavePad); break;
}
}


function dispatchImmediateChange() {
if (THIS.onImmediateChange) {
if (typeof THIS.onImmediateChange === 'string') {
eval(THIS.onImmediateChange);
} else {
THIS.onImmediateChange(THIS);
}
}
}


var THIS = this;
var modeID = this.pickerMode.toLowerCase()==='hvs' ? 1 : 0;
var abortBlur = false;
var
valueElement = jscolor.fetchElement(this.valueElement),
styleElement = jscolor.fetchElement(this.styleElement);
var
holdPad = false,
holdSld = false;
var
leaveValue = 1<<0,
leaveStyle = 1<<1,
leavePad = 1<<2,
leaveSld = 1<<3;

// target
jscolor.addEvent(target, 'focus', function() {
if(THIS.pickerOnfocus) { THIS.showPicker(); }
});
jscolor.addEvent(target, 'blur', function() {
if(!abortBlur) {
window.setTimeout(function(){ abortBlur || blurTarget(); abortBlur=false; }, 0);
} else {
abortBlur = false;
}
});

// valueElement
if(valueElement) {
var updateField = function() {
THIS.fromString(valueElement.value, leaveValue);
};
jscolor.addEvent(valueElement, 'keyup', updateField);
jscolor.addEvent(valueElement, 'input', updateField);
jscolor.addEvent(valueElement, 'blur', blurValue);
valueElement.setAttribute('autocomplete', 'off');
}

// styleElement
if(styleElement) {
styleElement.jscStyle = {
backgroundColor : styleElement.style.backgroundColor,
color : styleElement.style.color
};
}

// require images
switch(modeID) {
case 0: jscolor.requireImage('hs.png'); break;
case 1: jscolor.requireImage('hv.png'); break;
}
jscolor.requireImage('cross.gif');
jscolor.requireImage('arrow.gif');

this.importColor();
}

};


jscolor.install();

Read more »

Posted in: HTML Mimpi

16 Warna

Warna	Nama warna	Kodenya Gan!!!		Warna	Nama warna	Kodenya Gan!!!
	Black	#000000			Green	#008000
	Silver	#c0c0c0			Lime	#00ff00
	Gray	#808080			Olive	#808000
	White	#ffffff			Yellow	#ffff00
	Maroon	#800000			Navy	#000080
	Red	#ff0000			Blue	#0000ff
	Purple	#800080			Teal	#008080
	Fushia	#ff00ff			Aqua	#00ffff

Read more »

Posted in: HTML Mimpi

HTML Warna

Foreground Color

To add color to an HTML element, you use style="color:{color}", where {color} is the color value. For example:


<h3 style="color:blue">HTML Colors</h3>


This results in:

HTML Colors

Background Color

To add a background color to an HTML element, you use style="background-color:{color}", where {color} is the color value. For example:


<h3 style="background-color:blue">HTML Colors</h3>


This results in:

HTML Colors

Border Color

To add a colored border to an HTML element, you use style="border:{width} {color} {style}", where {width} is the width of the border, {color} is the color of the border, and {style} is the style of the border. For example:


<h3 style="border:1px blue solid;">HTML Colors</h3>


This results in:

HTML Colors

Color Names

The most common methods for specifying colors are by using the color name or the hexadecimal value. Although color names are easier to remember, the hexadecimal values and RGB values provides you with more color options.
Hexadecimal values are a combination of letters and numbers. The numbers go from 0 - 9 and the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you preceed the value with a hash (#). Although hexadecimal values may look a little weird at first, you'll soon get used to them.

There are 16 color names (as specified in the HTML 4.0 specification). The chart below shows these color names and their corresponding hexadecimal value.

Color	Color Name	Hexadecimal Value		Color	Color Name	Hexadecimal Value
	Black	#000000			Green	#008000
	Silver	#c0c0c0			Lime	#00ff00
	Gray	#808080			Olive	#808000
	White	#ffffff			Yellow	#ffff00
	Maroon	#800000			Navy	#000080
	Red	#ff0000			Blue	#0000ff
	Purple	#800080			Teal	#008080
	Fushia	#ff00ff			Aqua	#00ffff

You can make up your own colors by simply entering any six digit hexadecimal value (preceeded by a hash). In the following example, we're using the same code as above. The only difference is that, instead of using "blue" as the value, we're using its hexadecimal equivalent (which is #0000ff):


<h3 style="color:#0000ff">HTML Colors</h3>


This results in:

HTML Colors

If we wanted to change to a deeper blue, we could change our hexadecimal value slightly, like this:


<h3 style="color:#000069">HTML Colors</h3>


This results in:

HTML Colors

Choosing Colors - The Easy Way

By using hexadecimal or RGB color values, you have a choice of over 16 million different colors. You can start with 000000 and increment by one value all the way up to FFFFFF. Each different value represents a slightly different color.

Read more »

Posted in: HTML Mimpi

HTML Elemen

Contohnya Gan!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br /> <html><br /> <head><br /> <title>Blog Ancur 2011</title><br /> </head><br /> <body><br /> <p>Less than 5 minutes into this HTML tutorial and<br /> I've already created my first homepage!</p></body><br /> </html><br /> </textarea<br />

Penjelasan dari kode diatas:

       <DOCTYPE ...! > 

Elemen memberitahu browser versi HTML dokumen menggunakan.
    

       Unsur <html> dapat dianggap sebagai wadah bahwa semua tag lain duduk di dalamnya (kecuali untuk tag DOCTYPE!).

• Tag <head> berisi informasi yang tidak biasanya dapat dilihat dalam browser Anda (seperti meta tag, JavaScript dan CSS),

meskipun tag <title> merupakan pengecualian untuk ini. Isi dari tag <title> ditampilkan di bar judul browser (tepat di bagian paling atasbrowser).

• Tag <body> adalah area utama untuk konten Anda. Ini adalah tempat sebagian besar kode Anda (dan elemen dapat dilihat) akan pergi.

• Tag <p> menyatakan paragraf. Ini berisi teks tubuh.

Penutup tag Anda

Seperti disebutkan dalam pelajaran sebelumnya, Anda akan melihat bahwa semua tag memiliki membuka dan menutup tag, dan bahwa isi dari tag ditempatkan di antara mereka. Ada beberapa pengecualian untuk aturan ini.

Anda juga akan melihat bahwa tag penutup sedikit berbeda dengan tag pembuka - tag penutup berisi garis miring (/) setelah <tersebut. Ini memberitahu browser bahwa tag ini menutup sebelumnya.
Huruf besar atau huruf kecil?

Meskipun kebanyakan browser akan menampilkan halaman Anda terlepas dari kasus yang Anda gunakan, Anda harus selalu kode dalam huruf kecil. Ini membantu menjaga kode Anda XML sesuai (tapi itu topik yang lain).

Oleh karena itu ... Baik: <head>
  Buruk: <HEAD>

Pada pelajaran berikutnya, kita belajar tentang beberapa tag format yang lebih umum.

Read more »

Posted in: HTML Mimpi

HTML Tags

<br /> <!--...--><br /> <!doctype><br /> <a><br /> <abbr><br /> <address><area><br /> <article><br /> <aside><br /> <audio><br /> <b><br /> <base><br /> <bb><br /> <bdo><br /> <blockquote><body><br /> <br><br /> <button><br /> <canvas><br /> <caption><br /> <cite><br /> <code><br /> <col><br /> <colgroup><br /> <command><br /> <datagrid><br /> <datalist><br /> <dd><br /> <del><br /> <details><br /> <dfn><br /> <div><dl><dt><br /> <em><br /> <embed><br /> <eventsource><br /> <fieldset><figcaption><br /> <figure><br /> <footer><br /> <form><h1><h2><h3><h4><h5><h6><head><br /> <header><br /> <hgroup><br /> <hr><html><br /> <i><br /> <iframe><br /> <img><br /> <input><br /> <ins><br /> <kbd><br /> <keygen><br /> <label><br /> <legend><br /> <li><br /> <link><br /> <mark><br /> <map><br /> <menu><br /> <meta><br /> <meter><br /> <nav><br /> <noscript><br /> <object> <ol><optgroup> <option> <output> <p><param><pre><progress> <q> <ruby> <rp> <rt> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <ul> <var> <video> <wbr>

Nieh yang lebih lengkapnya,Gan!!!

<br /> <!--...--> Specifies a comment <br /> <!DOCTYPE> Specifies the document type <br /> <a> Specifies a hyperlink <br /> <abbr> Specifies an abbreviation <br /> <address> Specifies an address element <br /> <area> Specifies an area inside an image map <br /> <article> Specifies an article <br /> <aside> Specifies content aside from the page content <br /> <audio> Specifies sound content <br /> <b> Specifies bold text <br /> <base> Specifies a base URL for all the links in a page <br /> <bdo> Specifies the direction of text display <br /> <blockquote> Specifies a long quotation <br /> <body> Specifies the body element <br /> <br> Inserts a single line break <br /> <button> Specifies a push button <br /> <canvas> Define graphics <br /> <caption> Specifies a table caption <br /> <cite> Specifies a citation <br /> <code> Specifies computer code text <br /> <col> Specifies attributes for table columns <br /> <colgroup> Specifies groups of table columns <br /> <command> Specifies a command <br /> <datalist> Specifies an "autocomplete" dropdown list <br /> <dd> Specifies a definition description <br /> <del> Specifies deleted text <br /> <details> Specifies details of an element <br /> <dfn> Defines a definition term <br /> <div> Specifies a section in a document <br /> <dl> Specifies a definition list <dt> Specifies a definition term <br /> <em> Specifies emphasized text <br /> <embed> Specifies external application or interactive content <br /> <eventsource> Specifies a target for events sent by a server <br /> <fieldset> Specifies a fieldset <br /> <figcaption> Specifies caption for the figure element. <br /> <figure> Specifies a group of media content, and their caption <br /> <footer> Specifies a footer for a section or page <br /> <form> Specifies a form <br /> <h1> Specifies a heading level 1 <br /> <h2> Specifies a heading level 2 <br /> <h3> Specifies a heading level 3 <br /> <h4> Specifies a heading level 4 <br /> <h5> Specifies a heading level 5 <br /> <h6> Specifies a heading level 6 <br /> <head> Specifies information about the document <br /> <header> Specifies a group of introductory or navigational aids, including hgroup elements <br /> <hgroup> Specifies a header for a section or page <br /> <hr> Specifies a horizontal rule <br /> <html> Specifies an html document <br /> <i> Specifies italic text <br /> <iframe> Specifies an inline sub window (frame) <br /> <img> Specifies an image <br /> <input> Specifies an input field <br /> <ins> Specifies inserted text <br /> <kbd> Specifies keyboard text <br /> <keygen> Generates a key pair <br /> <label> Specifies a label for a form control <br /> <legend> Specifies a title in a fieldset <br /> <li> Specifies a list item <br /> <link> Specifies a resource reference <br /> <mark> Specifies marked text <br /> <map> Specifies an image map <br /> <menu> Specifies a menu list <br /> <meta> Specifies meta information <br /> <meter> Specifies measurement within a predefined range <br /> <nav> Specifies navigation links <br /> <noscript> Specifies a noscript section <br /> <object> Specifies an embedded object <ol> Specifies an ordered list <optgroup> Specifies an option group <option> Specifies an option in a drop-down list <output> Specifies some types of output <p> Specifies a paragraph <param> Specifies a parameter for an object <pre> Specifies preformatted text <progress> Specifies progress of a task of any kind <q> Specifies a short quotation <ruby> Specifies a ruby annotation (used in East Asian typography) <rp> Used for the benefit of browsers that don't support ruby annotations <rt> Specifies the ruby text component of a ruby annotation. <samp> Specifies sample computer code <script> Specifies a script <section> Specifies a section <select> Specifies a selectable list <small> Specifies small text <source> Specifies media resources <span> Specifies a section in a document <strong> Specifies strong text <style> Specifies a style definition <sub> Specifies subscripted text <summary> Specifies a summary/caption for the <details> element <sup> Specifies superscripted text <table> Specifies a table <tbody> Specifies a table body <td> Specifies a table cell <textarea> Specifies a text area <tfoot> Specifies a table footer <th> Specifies a table header <thead> Specifies a table header <time> Specifies a date/time <title> Specifies the document title <tr> Specifies a table row <ul> Specifies an unordered list <var> Specifies a variable <video> Specifies a video <wbr> Specifies a line break opportunity for very long words and strings of text with no spaces.

Read more »

Posted in: HTML Mimpi

HTML Cheat Sheet

Heading

<h1>Heading 1</h1><br /> <h2>Heading 2</h2><br /> <h3>Heading 3</h3><br /> <h4>Heading 4</h4><br /> <h5>Heading 5</h5><br /> <h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragrap

<p>Normal paragraph text.</p>

Normal paragraph text.

Line Break

I feel a line break coming... <br /> ...up.

I feel a line break coming...

...up.

Bold Text

<b>Bold text.</b>

Bold text.

Italic Text

<i>Italic text.</i>

Italic text.

Color Text

<p style="color:#ffcc00">Color text.</p>

Color text.

Text Size

<p style="font-size:18pt">Text size using points.</p><br /> <p style="font-size:18px">Text size using pixels.</p><br /> <p style="font-size:larger">Text size using relative sizes.</p>

Text size using points.

Text size using pixels.

Text size using relative sizes.

Font Family

<p style="font-family:Georgia, Garamond, Serif;">Preferred serif font.</p>

Preferred serif font.

Preformatted Text

<pre>Preformatted text displays just as you type it...<br /> ...line breaks, spaces and all!</pre>

Preformatted text displays just as you type it...
  ...line breaks, spaces and all! 

Teletype Text

<tt>Teletype text - sometimes referred to as typewriter text.</tt>

Teletype text - sometimes referred to as typewriter text.

Citation Text

<cite>Citation text.</cite>

Citation text.

Emphasized Text

<em>Emphasized text.</em>

Emphasized text.

Code Text

<code>Code text.</code>

Code text.

Big Text

<big>Big text.</big>

Big text.

Small Text

<small>Small text.</small>

Small text.

Blockquote

The label says:<blockquote>Contents should not be swallowed. This is due to the enormous amount of harmful chemicals that has gone into this burger.</blockquote>

The label says:

Contents should not be swallowed. This is due to the enormous amount of harmful chemicals that has gone into this burger.

Deleted Text

<del>Delete this text.</del>

Delete this text.

Inserted Text

<ins>Insert this text.</ins>

Insert this text.

Keyboard Text

<kbd>Keyboard text - text to be entered by the user.</kbd>

Keyboard text - text to be entered by the user.

Quotation Text

<q>Quotation text.</q>

Quotation text.

Sample Text

<samp>Sample text (output from a computer program).</samp>

Sample text (output from a computer program).

Variable Text

<var>Variable text.</var>

Variable text.

Definition

<dfn>Definition.</dfn>: To define the meaning of a word, phrase or term.

Definition.: To define the meaning of a word, phrase or term.

Images

Image

<img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Image with Border

<img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" border="5" />

Linked Image

<a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" /></a>

Linked Image with no Border

<a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" border="0" /></a>

Tables

Basic Table

<br /> <table border="1"><br /> <tr><br /> <td>Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br />

Table cell 1

Table cell 2

Table with cellpadding, cellspacing, and width attributes

<br /> <table border="1" cellpadding="5" cellspacing="5" width="100%"><br /> <tr><br /> <td width="20%">Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br />

Table cell 1

Table cell 2

Table with a Header Row

<br /> <table border="1" cellpadding="5" cellspacing="5" width="100%"><br /> <tr><br /> <th>Table header</th><br /> <th>Table header</th><br /> </tr><br /> <tr><br /> <td width="20%">Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br />

Table header	Table header
Table cell 1	Table cell 2

Table with colspan Applied

<br /> <table border="1" cellpadding="5" cellspacing="5" width="100%"><br /> <tr><br /> <th colspan="2">Table header</th><br /> </tr><br /> <tr><br /> <td width="20%">Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br />

Table header
Table cell 1	Table cell 2

Table with rowspan Applied

<br /> <table border="1" cellpadding="5" cellspacing="5" width="100%"><br /> <tr><br /> <th rowspan="2">Table header</th><td>Table cell 1<br /> </tr><br /> <tr><br /> <td>Table cell 2</td><br /> </tr><br /> </table><br />

Table header	Table cell 1
	Table cell 2

Table with CSS Applied

<br /> <table border="1" cellpadding="5" cellspacing="5" width="100%"<br /> style="background-color:yellow;border:3px dashed black;"><br /> <tr><br /> <th style="text-align:left">Table header</th><br /> <th style="text-align:left">Table header</th><br /> </tr><br /> <tr><br /> <td width="20%">Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br /> <br />  

Table header	Table header
Table cell 1	Table cell 2

Forms Basic Form Tags (insert all form elements between these tags)

<form><br /> (Insert form elements here)<br /> </form><br />

(Insert form elements here)

Text Input

<input type="text" size="30" value="Type something..." /><br />  

 

Text Area

<textarea cols="10" rows="5">Type something</textarea><br />  

Type something 

Radio Buttons

<input type="radio" name="cheat_sheet_example" value="Option1" /> Option 1 <input type="radio" name="cheat_sheet_example" value="Option2" /> Option 2<br />  

Option 1 Option 2 Checkboxes

<input type="checkbox" name="cheat_sheet_example" value="Option1" /> Option 1 <input type="checkbox" name="cheat_sheet_example" value="Option2" /> Option 2<br /> <br />  

Option 1 Option 2 Select List

<select name="cheat_sheet_example"><option value="Option1">Option 1<option value="Option2">Option 2<option value="Option3">Option 3</select><br />  

Option 1Option 2Option 3 Submit Button

<input type="submit" value="Send Away!" /><br />  

Image Button

<input type="image" src="/pix/smile.gif" /><br />  

Lists Ordered list (numbered list) 

<ol><br /> <li>List item 1</li><br /> <li>List item 2</li><br /> <li>List item 3</li><br /> </ol><br />

1. List item 1
2. List item 2
3. List item 3

Unordered list (unnumbered list

) <ul><br /> <li>List item 1</li><br /> <li>List item 2</li><br /> <li>List item 3</li><br /> </ul><br />

• List item 1
• List item 2
• List item 3

Definition list 

<dl><br /> <dt>Term 1</dt><br /> <dd>Definition of term 1</dd><br /> <dt>Term 2</dt><br /> <dd>Definition of term 2</dd><br /> </dl><br />

Term 1

Definition of term 1

Term 2

Definition of term 2

Frames Inline Frame

<iframe src="/pix/milford_sound/milford_sound_t.jpg"<br /> width="200"<br /> height="150"<br /> scrolling="auto"<br /> frameborder="1"><br /> <!--This bit is only viewed by browsers that don't support inline frames --><br /> Your browser doesn't support inline frames.<br /> </iframe><br />  

 

Frames

The frameset (frame_example_frameset_1.html):

<html><br /> <head><br /> <title>Frameset page<title><br /> </head><br /> <frameset cols = "25%, *"><br /> <noframes><br /> <body>Your browser doesn't support frames.<br /> Therefore, this is the noframe version of the site.</body><br /> </noframes><br /> <frame src ="/html/tags/frame_example_left.html" /><br /> <frame src ="/html/tags/frame_example_right.html" /><br /> </frameset><br /> </html><br />

The left frame (frame_example_left.html):

<html><br /> <html><br /> <body style="background-color:green"><br /> <p>This is the left frame (frame_example_left.html).</p><br /> </body><br /> </html><br />

The right frame (frame_example_right.html):

<html><br /> <html><br /> <body style="background-color:yellow"><br /> <p>This is the right frame (frame_example_right.html).</p><br /> </body><br /> </html><br />

View the result

Read more »

Posted in: HTML Mimpi

HTML Forms

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWzF9-1xUqSa-qPgYbIl4WUm6NNPO3lsFvNLWBphR_Rr_dz6nulKeSOL7GxxSGKFlkgk6EsRgKo33I2pgO3k5OvwqJJxhpnAozfzQ6B3IY3uBGSIS9UyL3ggJqZx115vHJeLB_lMVHTos/s320/12.jpg)

BLOG MIMPI 2011

MIMPI 2012 MIMPI 2012

MIMPI 2011 MIMPI 2012

MIMPI 201123

Read more »

Posted in: EKSPERIMEN MIMPI

Table with cellpadding, cellspacing, and width attributes

<table border="1" cellpadding="5" cellspacing="5" width="100%"><tr> <td width="20%">Table cell 1</td><td>Table cell 2</td> </tr> </table>

Table cell 2

Table cell 2

Table header	Table header
Table cell 1	Table cell 4

Table header
Table cell 1	Table cell 2

Table header	Table cell 1
	Table cell 2

Table header	Table header
Table cell 1	Table cell 2

Read more »

Posted in: EKSPERIMEN MIMPI

Basic Table

<table border="4"><tr> <td>Table cell 1</td> <td>Table cell 2</td> <td>Table cell 3</td> <td>Table cell 4</td> <td>Table cell 5</td> <td>Table cell 6</td> </tr> </table>

Table cell 1

Table cell 2

Table cell 3

Table cell 4

Table cell 5

Table cell 6

Read more »

Posted in: EKSPERIMEN MIMPI

HTML Gambar Border

<A HREF="JavaScript: alert('<img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" border="5" />')">

Read more »

Posted in: EKSPERIMEN MIMPI

HTML Lembar [Sheet]

UNTUK GAMBAR :

('<img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />')">

Read more »

Posted in: HTML Mimpi

HTML Tags

* <!--...--><br /> * <!doctype><br /> * <a><br /> * <abbr><br /> * <acronym><br /> * <address> * <applet><br /> * <area><br /> * <b><br /> * <base><br /> * <basefont><br /> * <bdo><br /> * <big><br /> * <blockquote> * <body><br /> * <br><br /> * <button><br /> * <caption><br /> * <center><br /> * <cite><br /> * <code><br /> * <col><br /> * <colgroup><br /> * <dd><br /> * <del><br /> * <dfn><br /> * <dir><br /> * <div> * <dl> * <dt><br /> * <em><br /> * <fieldset> * <font><br /> * <form><br /> <br /> <br /> * <frame><br /> * <frameset><br /> * <h1> * <h2> * <h3> * <h4> * <h5> * <h6> * <head><br /> * <hr> * <html><br /> * <i><br /> * <iframe><br /> * <img><br /> * <input><br /> * <ins><br /> * <isindex><br /> * <kbd><br /> * <label><br /> * <legend><br /> * <li><br /> * <link><br /> * <map><br /> * <menu><br /> * <meta><br /> * <noframes><br /> * <noscript><br /> * <object> * <ol> * <optgroup> * <option> * <p> * <param> * <pre> * <q> * <s> * <samp> * <script> * <select> * <small> * <span> * <strike> * <strong> * <style> * <sub> * <sup> * <table> * <tbody> * <td> * <textarea> * <tfoot> * <th> * <thead> * <title> * <tr> * <tt> * <u> * <ul> * <var> </textarea<br /> <br />

Read more »

Posted in: HTML Mimpi

Kode Warna Hex

	blue		Hex color code: #e2f1fb
	Hex color code: #0000ff (same as 'blue')		Hex color code: #83c8f9
	Hex color code: #000099		Hex color code: #2984c3
	Hex color code: #000066		Hex color code: #075d9a

Read more »

Posted in: BLOG,COLBOG,CSS (Cascading Style Sheets)