Blogging | HTML | JavaScript | AJAX | CSS Tutorial

Javascript sound effect

2008-03-03T18:53:00.001+07:00

Want to add a short sound effect to your page for certain actions, such as when the user moves the mouse over a link? This is a simple yet versatile script that lets you do just like! Relying on IE's BGSOUND attribute (and hence IE5+ only), the script can easily add a sound effect to a single item (ie: 1 link), or thanks to a helper function, all items of the specified element (ie: all <a> tags). This makes it very easy to add a sound effect to an entire menu's links, for example. <bgsound src="#" id="soundeffect" loop=1 autostart="true" /> <script type="text/javascript"> var soundfile="sidebar.wav" //path to sound file, or pass in filename directly into playsound() function playsound(soundfile){ if (document.all && document.getElementById){ document.getElementById("soundeffect").src="" //reset first in case of problems document.getElementById("soundeffect").src=soundfile } } function bindsound(tag, soundfile, masterElement){ if (!window.event) return var source=event.srcElement while (source!=masterElement && source.tagName!="HTML"){ if (source.tagName==tag.toUpperCase()){ playsound(soundfile) break } source=source.parentElement } } </script>

2008-03-01T01:30:00.000+07:00

This function is about : Certain situations call for the refreshing of the webpage every few seconds/ minutes (such as a webcam page). Use Brett's script to carry out this task in a graceful, "visual" manner. Step : Copy Paste into your HTML code <script language="JavaScript"> //configure refresh interval (in seconds) var countDownInterval=60; //configure width of displayed text, in px (applicable only in NS4) var c_reloadwidth=200 </script> <ilayer id="c_reload" width=&{c_reloadwidth}; ><layer id="c_reload2" width=&{c_reloadwidth}; left=0 top=0></layer></ilayer> <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>

Create DHTML ToolTips

2008-02-27T22:59:00.002+07:00

Follow my step belows to create cool DHML Tooltips :

Tooltips create > Step One : Insert the following stylesheet into <head> the section of your page: <style type="text/css"> #dhtmltooltip{ position: absolute; width: 150px; border: 2px solid black; padding: 2px; background-color: lightyellow; visibility: hidden; z-index: 100; /*Remove below line to remove shadow. Below line should always appear last within this CSS*/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } </style>
Insert the below code into the <body> section of your page, outside any other tags, especially relatively or absolutely positioned elements: <div id="dhtmltooltip"></div> <script type="text/javascript"> var offsetxpoint=-60 //Customize x offset of tooltip var offsetypoint=20 //Customize y offset of tooltip var ie=document.all var ns6=document.getElementById && !document.all var enabletip=false if (ie||ns6) var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function ddrivetip(thetext, thecolor, thewidth){ if (ns6||ie){ if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor tipobj.innerHTML=thetext enabletip=true return false } } function positiontip(e){ if (enabletip){ var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft; var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop; //Find out how close the mouse is to the corner of the window var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20 var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20 var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000 //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<tipobj.offsetWidth) //move the horizontal position of the menu to the left by it's width tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px" else if (curX<leftedge) tipobj.style.left="5px" else //position the horizontal position of the menu where the mouse is positioned tipobj.style.left=curX+offsetxpoint+"px" //same concept with the vertical position if (bottomedge<tipobj.offsetHeight) tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px" else tipobj.style.top=curY+offsetypoint+"px" tipobj.style.visibility="visible" } } function hideddrivetip(){ if (ns6||ie){ enabletip=false tipobj.style.visibility="hidden" tipobj.style.left="-1000px" tipobj.style.backgroundColor='' tipobj.style.width='' } } document.onmousemove=positiontip </script>
Finally, add the following inside any link or page element that will contain a tooltip: onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)"; onMouseout="hideddrivetip()" The key here is function ddrivetip(), which you should understand how it works: ddrivetip('TEXT TO DISPLAY', 'OPTIONAL BACKGROUND COLOR', OPTIONAL TIP WIDTH) The last two parameters are optional, and not specifying them causes the script to default to the settings within your CSS file. With that in mind, here are a few actual usage examples: <a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')"; onMouseout="hideddrivetip()">Search Engine</a> <DIV onMouseover="ddrivetip('This DIV has a tip!', '#EFEFEF')"; onMouseout="hideddrivetip()">Some text here. Some text here.</div> <a href="http://yahoo.com" onMouseover="ddrivetip('Yahoo\'s Site', 'yellow', 250)"; onMouseout="hideddrivetip()">Yahoo</a>

Drop-down Document Viewer

2008-02-21T00:33:00.002+07:00

Creat Drop-down Document Viewer the purpose is use this versatile DHTML script to allow your visitors to select/ view external documents from your site. Specify whether the selected page is loaded in an inline frame or new window. Simply add the following to the BODY section of your page : <form name="jumpy"> <select name="example" size="1" onChange="gone()">  <option value="http://www.yahoo.com" selected>Yahoo.com</option> <option value="http://www.google.com">Google</option> <option value="http://www.lycos.com">Lycos</option> <option value="http://www.AltaVista.com">AltaVista</option> </select> <input type="button" name="test" value="Go!" onClick="gone()"> </form> <script language="javascript">  </script>

Javascript tutorial : Create Live Clock

2008-02-19T22:26:00.002+07:00

This is my javascript tutorial to creating Live clock like this. Following simple step :

Copy Paste this script and renamed to be liveclock.js :
// Set the clock's font face: var myfont_face = "Verdana"; // Set the clock's font size (in point): var myfont_size = "10"; // Set the clock's font color: var myfont_color = "#000000"; // Set the clock's background color: var myback_color = "#FFFFFF"; // Set the text to display before the clock: var mypre_text = "The time is: "; // Set the width of the clock (in pixels): var mywidth = 300; // Display the time in 24 or 12 hour time? // 0 = 24, 1 = 12 var my12_hour = 1; // How often do you want the clock updated? // 0 = Never, 1 = Every Second, 2 = Every Minute // If you pick 0 or 2, the seconds will not be displayed var myupdate = 1; // Display the date? // 0 = No, 1 = Yes var DisplayDate = 0; /////////////// END CONFIGURATION ///////////////////////// /////////////////////////////////////////////////////////// // Browser detect code var ie4=document.all var ns4=document.layers var ns6=document.getElementById&&!document.all // Global varibale definitions: var dn = ""; var mn = "th"; var old = ""; // The following arrays contain data which is used in the clock's // date function. Feel free to change values for Days and Months // if needed (if you wanted abbreviated names for example). var DaysOfWeek = new Array(7); DaysOfWeek[0] = "Sunday"; DaysOfWeek[1] = "Monday"; DaysOfWeek[2] = "Tuesday"; DaysOfWeek[3] = "Wednesday"; DaysOfWeek[4] = "Thursday"; DaysOfWeek[5] = "Friday"; DaysOfWeek[6] = "Saturday"; var MonthsOfYear = new Array(12); MonthsOfYear[0] = "January"; MonthsOfYear[1] = "February"; MonthsOfYear[2] = "March"; MonthsOfYear[3] = "April"; MonthsOfYear[4] = "May"; MonthsOfYear[5] = "June"; MonthsOfYear[6] = "July"; MonthsOfYear[7] = "August"; MonthsOfYear[8] = "September"; MonthsOfYear[9] = "October"; MonthsOfYear[10] = "November"; MonthsOfYear[11] = "December"; // This array controls how often the clock is updated, // based on your selection in the configuration. var ClockUpdate = new Array(3); ClockUpdate[0] = 0; ClockUpdate[1] = 1000; ClockUpdate[2] = 60000; // For Version 4+ browsers, write the appropriate HTML to the // page for the clock, otherwise, attempt to write a static // date to the page. if (ie4||ns6) { document.write('<span id="LiveClockIE" style="width:'+mywidth+'px; background-"></span>'); } else if (document.layers) { document.write('<ilayer bgColor="'+myback_color+'" id="ClockPosNS" visibility="hide"><layer width="'+mywidth+'" id="LiveClockNS"></layer></ilayer>'); } else { old = "true"; show_clock(); } // The main part of the script: function show_clock() { if (old == "die") { return; } //show clock in NS 4 if (ns4) document.ClockPosNS.visibility="show" // Get all our date variables: var Digital = new Date(); var day = Digital.getDay(); var mday = Digital.getDate(); var month = Digital.getMonth(); var hours = Digital.getHours(); var minutes = Digital.getMinutes(); var seconds = Digital.getSeconds(); // Fix the "mn" variable if needed: if (mday == 1) { mn = "st"; } else if (mday == 2) { mn = "nd"; } else if (mday == 3) { mn = "rd"; } else if (mday == 21) { mn = "st"; } else if (mday == 22) { mn = "nd"; } else if (mday == 23) { mn = "rd"; } else if (mday == 31) { mn = "st"; } // Set up the hours for either 24 or 12 hour display: if (my12_hour) { dn = "AM"; if (hours > 12) { dn = "PM"; hours = hours - 12; } if (hours == 0) { hours = 12; } } else { dn = ""; } if (minutes <= 9) { minutes = "0"+minutes; } if (seconds <= 9) { seconds = "0"+seconds; } // This is the actual HTML of the clock. If you're going to play around // with this, be careful to keep all your quotations in tact. myclock = ''; myclock += '<font style="color:'+myfont_color+'; font-family:'+myfont_face+'; font-size:'+myfont_size+'pt;">'; myclock += mypre_text; myclock += hours+':'+minutes; if ((myupdate < 2) || (myupdate == 0)) { myclock += ':'+seconds; } myclock += ' '+dn; if (DisplayDate) { myclock += ' on '+DaysOfWeek[day]+', '+mday+mn+' '+MonthsOfYear[month]; } myclock += '</font>'; if (old == "true") { document.write(myclock); old = "die"; return; } // Write the clock to the layer: if (ns4) { clockpos = document.ClockPosNS; liveclock = clockpos.document.LiveClockNS; liveclock.document.write(myclock); liveclock.document.close(); } else if (ie4) { LiveClockIE.innerHTML = myclock; } else if (ns6){ document.getElementById("LiveClockIE").innerHTML = myclock; } if (myupdate != 0) { setTimeout("show_clock()",ClockUpdate[myupdate]); } }
Type the script on head section between <head> and </head> <script language="javascript" src="liveclock.js"></script>
Inside the <body> tag itself, set onLoad event handler, as follows : <body onload="show_clock()">

Create Basic Calendars with JavaScript And CSS

2008-02-19T00:42:00.002+07:00

You maybe need a simple calendars widged without PHP coding, just write simple javascript and css coding. Following my step to workin' on your blog/websites :

Insert this stylesheet / css coding into the section (that means you must insert the code below between <head>until /head>) : <style type="text/css"> .main { width:200px; border:1px solid black; } .month { background-color:black; font:bold 12px verdana; color:white; } .daysofweek { background-color:gray; font:bold 12px verdana; color:white; } .days { font-size: 12px; font-family:verdana; color:black; background-color: lightyellow; padding: 2px; } .days #today{ font-weight: bold; color: red; } </style> <script type="text/javascript"> function buildCal(m, y, cM, cH, cDW, cD, brdr){ var mn=['January','February','March','April','May','June','July','August','September','October','November','December']; var dim=[31,0,31,30,31,30,31,31,30,31,30,31]; var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st var todaydate=new Date() //DD added var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28; var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">'; t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">'; for(s=0;s<7;s++)t+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>'; t+='</tr><tr align="center">'; for(i=1;i<=42;i++){ var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : ' '; if (x==scanfortoday) //DD added x='<<span id="today">'+x+'</span>' //DD added t+='<td class="'+cD+'">'+x+'</td>'; if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">'; } return t+='</tr></table></div>'; } var todaydate=new Date() var curmonth=todaydate.getMonth()+1 //get current month (1-12) var curyear=todaydate.getFullYear() //get current year document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1)); </script>
Additional Information about the calendars coding function : Basic Calendar uses one key function, buildCal(), to display a calendar. This function looks like this:
buildCal(4, 2003, "main", "month", "daysofweek", "days", 0)
If you still confused : visit : dynamicdrive.com and choose calendars > basic calendars

Create Your own Favicon, by online tool.

2008-02-19T00:22:00.004+07:00

Create Icon Online? Favicon on the web is either accessories on your web. Maybe you've make your icon is more great than before by using desktop software. Try this tool from dynamicdrive, named Favicon Generator. You must upload your image from your computer as gif, jpg, png, and bmp only. You also can upload transparency gif and png images. And Maximum file size is : 150KB . To create your own icon. Only Following this step :

Select your Image
Click on Create Icon
And your icon has already to be used.

Let's go designing a beutiful web.

Web3.0 Will be, Web2.0 is ancient ways

2007-10-26T01:57:00.000+07:00

Wikipedia has describe this for web3.0 Web 3.0 is a term that is used to describe various evolution of Web usage and interaction along several separate paths. These include transforming the Web into a database, a move towards making content accessible by multiple non-browser applications, the leveraging of artificial intelligence technologies, the Semantic web, the Geospatial Web Absolutely what is web3.0 with my own. Web 3.0 is web based application and desktop and Application which able to transforming the Web into a database like XML. Also An evolutionary path to artificial intelligence. Web3.0 is the realization of the Semantic Web and Service-Oriented Architecture. Web 3.0 is evolution of 2D web towards 3D, that may caused web3.0 also known as Web 3D.Web 3.0 is future computer application, that may be user don't need operating system to run application. But still need internet access.

AutoGraph™ - New Tool For Bloggers

2007-09-04T18:08:00.000+07:00

I has some fresh news for bloggers on blogsphere, there is new tool for blogger to make signature for their blog, this tool name is AutoGraph™. You can include your name or your email, or even your website and your complete name. The autograph will appear at right bottom, but you can customize to appearing the autograph, such as the top-center, bottom-center, left-center, right-center, or even center-center , that interesting isn't?. Go to the demo page of AutoGraph™

Make Money (Real Jobs) -- For Webmaster

2007-07-22T17:10:00.000+07:00

If you're professional webmaster you can make money with spare your time and making contract with someone who need your web creation. Anyway if you're lucky at this projects and you're win the contracts you can make money. How much I'll earn with this job..? Don't worry you can make money from $30 until $2000 at once contracts with buyer. So.. if you have spare time you can join with any freelancer on the world. Click Here if you want Make Money Right Now!!

MySpace Layout Tutorial : Edit Scrollbar Colors

2007-06-26T20:05:00.000+07:00

If your profile layout is not cool, I'll give you tips about change your scrollbar Colors. Follow this insctruction :

Login to your MySpace Account.
And then click "Edit profile"
Copy-Paste this code into Heroes Section <style type="text/css"> body { scrollbar-track-color: # 9966FF; /* track-color you can customize your own color*/ scrollbar-face-color: # 9933FF; /* face-color*/ scrollbar-3dlight-color: # 6600CC; /* 3Dlight Color*/ scrollbar-highlight-color: # 6633FF; /* Highlight Color*/ scrollbar-darkshadow-color: # 000000; /*DarkShadow Color */ scrollbar-shadow-color: # 3399FF; /* Shadow Color */ scrollbar-arrow-color: # FFFFFF; /* Arrow Color */ } </style>
You can customize your own scrollbar.

JavaScript tutorial : Confirmation Alerts

2007-06-26T00:13:00.000+07:00

I'll give simple tutorial about Confirmation alerts which will be used if user click "Submit Button". Follow this instruction :

Create a HTML with form registration Name and Password and verification password Only.
Create a JavaScript with name script.js on your web directory.

Fill the script like this :

function checkform(form)
{
var numChars = "0123456789";
var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>? ";
var iName = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";
if (form.fuser.value.length < 6)
{
alert( "Username must be filled and least 6 characters." );
form.fuser.focus();
return false ;
}

for (var i = 0; i < form.fuser.value.length; i++) {
if (iChars.indexOf(form.fuser.value.charAt(i)) != -1) {
alert ("There is any special character in Username.");
form.fuser.focus();
return false;
}
}
if (form.fpwd1.value == "") {
alert( "Username must be filled" );
form.fpwd1.focus();
return false ;
}
if (form.fpwd1.value.length < 6)
{
alert( "Password at least 6 characters" );
form.fpwd1.focus();
return false ;
}
for (var i = 0; i < form.fpwd1.value.length; i++) {
if (iChars.indexOf(form.fpwd1.value.charAt(i)) != -1) {
alert ("There is any special character in Password.");
form.fpwd1.focus();
return false;
}
}
if (form.fpwd2.value == "") {
alert( "Verification Password must be filled." );
form.fpwd2.focus();
return false ;
}
if (form.fpwd2.value != form.fpwd1.value) {
alert( "Verification password is not same with Password" );
form.fpwd2.focus();
return false ;
}
if (form.fpwd2.value == form.fuser.value) {
alert( "For security, username and password may not twin" );
form.fpwd2.focus();
return false ;
}
return true;
}

Don't forget to add <script language="javascript" src="script.js"></script>
Name of username's inputbox : fuser
Name of password's inputbox : fpwd
Name of Verification password's inputbox : fwd2
Add properties of form like this : onSubmit="javascript checkform(this)"

Good luck with your jobs.

Create your own CSS Template

2007-06-24T06:41:00.000+07:00

Anyway to create cooler template is try to create a template by self. Learn about CSS advanced in popular site on this blog header. Or you can download free css template (www.freecsstemplates.org, www.free-css-templates.com) and modifying it. Look at the sample. I was downloaded the enlight template. This is screenshot of template.

And then edit the css template in default.css until like this (this is my template you can edit default.css in your ways) : You can edit the default.css like do you want.

Remove unimportant myspace profile

2007-06-23T06:51:00.000+07:00

How to remove unimportant profile in your myspace profile, it's easy way. Click Edit Profile - About Me and paste this code

HTM Tutorial : HTML - Attributes

2007-06-23T06:38:00.000+07:00

HTML - Attributes

Attributes are used to amplify tags. What we mean by amplify is that when a web browser interprets a tag, it will also search for set attributes and then display the element (tags+attributes) in its entirety. At some point you may want to give your body element a background color or perhaps change the width of a table. All of these things and more can be achieved using Attributes.

Many HTML tags have a unique set of their own attributes. These will be discussed as each tag is introduced throughout the tutorial. Right now we want to focus on a set of generic attributes that can be used with just about every HTML Tag in existence.

Attributes are placed within the opening tag and they follow a precise syntax (format).

HTML - Class or ID Attribute

The class and id attributes are nearly identical. They play no direct role in formatting your elements but rather serve behind the scenes for scripting and Cascading Style Sheets (CSS). The role of classification and identifying elements will become more apparent as your learn CSS.

The idea is that you can classify or id certain a tag and later format the tag using Cascading Style Sheets. It becomes necessary when you have two or more of the same element on a page (like a

tag) but want them to be different in appearance.

HTML Code:

id="italicsparagraph">Paragraph type 1 Italics
id="boldparagraph">Paragraph type 2 Bold

Classification Attributes:

Paragraph type 1 Italics Paragraph type 2 Bold

HTML - Name Attribute

Name is much different than id and class. By allotting a name to an element, that name becomes a scripting variable for scripting languages such as Javascript, ASP, and PHP. The name attribute is seen most often with forms and other user-input elements.

HTML Code:

name="TextField" />

HTML - Title Attribute

This is a neat little perhaps, forgotten attribute. This attribute titles an element and adds a tiny text pop-up to any HTML element. Much like the text pop-ups of word processing programs, these attributes should not be forgotten. You may title an element anything you would like, the effects of this attribute are not seen until you hover your mouse over the element for a few seconds.

HTML Code:

title="Hello There!">Titled Heading Tag

Title Attribute:

Titled Heading Tag

Hover your mouse over the display heading to see the magic of the title attribute! This provides your web site with some user interaction which is priceless. Do not overlook the title attribute.

HTML - Align Attribute

If you wish to change the horizontal location of your elements you may do so using the align attribute. You may align things left, right, or center. By default most elements are automatically aligned left unless otherwise specified.

HTML Code:

align="center">Centered Heading

Display:

Centered Heading

HTML Code:

align="left">Left aligned heading

align="center">Centered Heading

align="right">Right aligned heading

Display:

Left aligned heading

Centered heading

Right aligned heading

Attribute Defaults

Many tags are assigned default attributes. This means that unless a tag attribute is specified by you the creator, it will have some distinct attributes. For example, a paragraph tag will always align its text to the left unless it has an align attribute in it specifying otherwise. Also elements placed within a table are vertically centered and to the left unless otherwise specified. As you code and learn about each of the different HTML elements, you will become aware of many of these defaults.

Generic Attributes

Attributes exist to modify HTML tags allowing for complete customization of a website. Here's a table of some other attributes that are readily usable with many of HTML's tags.

Attribute	Options	Function
align	right, left, center	Horizontally aligns tags
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
background	URL	Places an background image behind an element
id	User Defined	Names an element for use with Cascading Style Sheets.
class	User Defined	Classifies an element for use with Cascading Style Sheets.
width	Numeric Value	Specifies the width of tables, images, or table cells.
height	Numeric Value	Specifies the height of tables, images, or table cells.
title	User Defined	"Pop-up" title for your elements.

HTML Tutorial : Beginning HTML Tags!

2007-06-23T06:34:00.000+07:00

A web browser reads an HTML document top to bottom, left to right. Each time the browser finds a tag, it is displayed accordingly (paragraphs look like paragraphs, tables look like tables, etc). Tags have 3 major parts: opening tag(s), content(s), and closing tag(s). Recall that a completed tag is termed an element. By adding tags to an HTML document, you signal to the browser "Hey look, I'm a paragraph tag, now treat me as such."

As you will learn, there are probably hundreds of HTML Tags. Tables, images, lists, forms, and everything else being displayed on an web page requires the use of a tag or two.

HTML Code:

Content

A Paragraph Tag

Tags should be lower-case letters if you plan on publishing your work. This is the standard for XHTML and Dynamic HTML. Here's quick look at some HTML tags.

HTML Tags:

Body Tag (acts as a content shell)

Paragraph Tag

Heading Tag

Bold Tag Italic Tag

Tags Without Closing Tags

There are a few tags that do not follow the mold above. In a way, they still have the 3 parts (opening/closing and content). These tags however do not require a formal but rather a modified version. The reason being that these tags do not really require any content. Rather some of them just need a source URL and this is enough information for the web browser to display the tag properly (image tags). Let's take a look at a line break tag.

HTML Code:

To tell the browser we want to place a line break (carriage return) onto the site, it is not necessary to type linebreak . If every line break tag needed all three components as other do, life would become redundant real quick. Instead the better solution was to combine the opening and closing tags into a single format. Other tags have also been modified such as the image tag and input tag.

HTML Code:

 -- Image Tag

-- Line Break Tag
 -- Input Field

HTML Tutorial : Elements

2007-06-23T06:18:00.000+07:00

HTML Elements

HTML elements exist on many levels. Everything you see in front of you, the paragraph texts, and the navigation links on the left are all elements of this web page. An element in HTML is a loose term that describes each individual piece of your web page.

An element consists of three basic parts: an opening tag, the element's content, and finally, a closing tag.

<p> - opening paragraph tag
Element Content - paragraph words
</p> - closing tag

Every (web)page requires four critical elements: the html, head, title, and body elements.

The <html> Element...</html>

<html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document.

If you haven't already, open up Notepad and have a new, blank document ready to go. Copy the following HTML code into your text editor.

HTML Code:

<html>
</html>

Now save your file by Selecting Menu and then Save. Click on the "Save as Type" drop down box and select the option "All Files". When asked to name your file, name it "index.html", without the quotes. Double check that you did everything correctly and then press save. Now open your file in a new web browser so that you have the ability to refresh your page and see your changes.

If you opened up your index.html document, you should be starring at your very first blank (white) web page!

The <head> Element

The <head> element is "next" as they say. As long as it falls somewhere between your <html> tag and your web page content (<body>), you're golden. The head functions "behind the scenes." Tags placed within the head element are not directly displayed by web browsers. We will be placing the <title> element here and we'll talk about the other possible elements in later lessons.

Other elements used for scripting (Javascript) and formatting (CSS) will eventually be introduced and you will have to place them within your head element. For now, your head element will continue to lay empty except for the title element that will be introduced next.

Here's a sample of the initial set up.

HTML Code:

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

As of yet, we still have nothing happening on the web page. All we have so far is a couple of necessary elements that describe our document to the web browser. Content (stuff you can see) will come later.

The <title> Element

Place the <title> tag within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser. Here's the html code:

HTML Code:

<html>
<head>
<title>My WebPage!</title>
</head>
</html>

Save the file and open it in your browser. You should see "My WebPage!" in the upper-left, as the window's title.

Name your webpage as you please, just keep in mind, the best titles are brief and descriptive.

The <body> Element

The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc). As the menu on the left suggests, we will be looking at each of these elements in greater detail as the tutorial progresses. For now, it is only important to understand that the body element will encapsulate all of your webpage's viewable content.

HTML Code:

<html>

<head>
<title>My WebPage!</title>
</head>
<body>
Hello World! All my content goes here!
</body>
</html>

Go ahead and view your first, complete webpage.

Make A Website and Make Money is not late

2007-06-22T07:26:00.000+07:00

If you think that you are too late to making money online you is wrong. Because many beginner around the worlds is start their participate to make money online. Few seconds ago, many beginner has started to make money online. Is better to you make money online right now and sign up as Problogger (Professional Blogger is blogger who earn by posting). You can choose many program on the Internet. Like Google Adsense, Adbrite, AuctionAds, Yahoo Publisher, Obeus, and other program like that.

I've just become a Problogger one month ago, and my money only $3.xx. One thing you must remember that make money online is not easy. You must understanding SEO (Search Engine Optimization). By the way, many successful problogger on the Internet right now. They have static earning $5,000 per month. Is not too late to you to try it.

So, you can try anytime. You can search articles to optimize your blog or your site. You too can make money with your site

Create your own Web 2.0 Button

2007-06-22T06:57:00.000+07:00

Here I want share to you the easiest way to create a Web2.0 Button (http://www.mycoolbutton.com). And this service is free to try. It's very nice and cool service, because you can put your own icon on your button. See the sample :

Setup Size (100px - 200px)
Setup color
Setup Icon (Upload your own icon)
Setup Font
And then click apply changes
If you sure that this is your button, click Download

I'ts so fun, simple, and easy. But the result is Good and Cool

Choosing An Editor

2007-06-22T03:15:00.000+07:00

Basically for editing HTML, CSS, or Javascript can use any editor like notepad, even you can create web page using wordprocessing like MS Word. But good editor is have some specifications like :

WYSIWYG (What you see is What you get).
Can use as many editor web programming (PHP, ASP, JSP, etc).
And Important point is easy to use.

That specifications is most have by professional editor. Before doing something (Designing HTML), you must choose an editor for editing HTML. There are popular editor was used many people right now :

Macromedia Dreamwaver
Microsoft Frontpage

But if you want an editor from web page (Web Application / Web2.0) you can try many links on the internet just type "Online HTML editor" or use this word "HTML Editor Web2.0" or "HTML Editor with AJAX".

What must I do first time?

2007-06-22T02:48:00.001+07:00

First something if you'll create a web page is designing layout or template. Any tips from me is :

Design layout on paper
Choose the color
Create an image for adding art for your page
Design your paper-design into HTML Editor (e.g Dreamwaver, MS Frontpage, etc).
Create a stylesheet (I recommend using MS Frontpage).
Load your work art into browser (e.g Mozilla Firefox, Internet Explorer, etc).

When you create a stylesheet (CSS) and setting the color, if you are beginner I recommend to you to see any web page on internet.

HTML (Hypertext Markup Language)

2007-06-22T00:41:00.000+07:00

On this blog you'll learn about HTML, Ajax, JavaScript, And Css. The purpose of all is to pimp your older layout become better than old. HTML is not programming language like Visual Basic, C++, Java, or other programming language.

Words to know in HTML

Tag - Used to specify ("mark-up") regions of HTML documents for the web browser to interpret. Tags look like this: and more..
Element - A complete tag, having an opening and a closing
Attribute - Used to modify the value of the HTML element. Elements will often have multiple attributes.

For now just know that a tag is a command the web browser interprets, an element is a complete tag, and an attribute customizes or modifies HTML elements.