1. m HTML Basics :
INTRODUCTION
Webpages are written in HTML - a simple scripting language.
HTML is short for HyperText Markup Language.
Hypertext is simply a piece of text that works as a link.
Markup Language is a way of writing layout information within
documents.
Basically an HTML document is a plain text file that contains text and nothing
else.
When a browser opens an HTML file, the browser will look for HTML codes in the
text and use them to change the layout, insert images, or create links to other
pages.
Since HTML documents are just text files they can be written in even the simplest
text editor.
A more popular choice is to use a special HTML editor - maybe even one that puts
focus on the visual result rather than the codes - a so-called WYSIWYG editor
("What You See Is What You Get").
Some of the most popular HTML editors, such as FrontPage or Dreamweaver will
let you create pages more or less as you write documents in Word or whatever text
editor you're using.
However, there are some very good reasons to create your own pages - or parts
of them - by hand...
HTML Basics :
WHY LEARN HTML?
It is possible to create webpages without knowing anything about the HTML
source behind the page.
There are excellent editors on the market that will take care of the HTML parts. All
you need to do is layout the page.
2. However, if you want to make it above average in webdesign, it is strongly
recommended that you understand these tags.
The most important benefits are:
You can use tags the editor does not support.
You can read the code of other people's pages, and "borrow" the cool
effects.
You can do the work yourself, when the editor simply refuses to create the
effects you want.
You can write your HTML by hand with almost any available text editor, including
notepad that comes as a standard program with Windows.
All you need to do is type in the code, then save the document, making sure to put
an .html extension or an .htm extension to the file (for instance "mypage.html").
HTML Basics :
TAGS
Basically, a computer sees an "A" as simply an "A" - whether it is bold, italic, big or
small.
To tell the browser that an "A" should be bold we need to put a markup in front of
the A.
Such a markup is called a Tag.
All HTML tags are enclosed in < and >.
Example: a piece of text as it appears on the screen.
This is an example of bold text.
HTML: the HTML for the above example:
This is an example of <b>bold</b> text.
3. As you can see, the start tag <b> indicates that whatever follows should be written
in bold. The corresponding end tag </b> indicates that the browser should stop
writing text in bold.
HTML Basics :
PAGE STRUCTURE
All normal webpages consist of a head and a body.
Head
Body
The head is used for text and tags that do not show directly on the page.
The body is used for text and tags that are shown directly on the page.
Finally, all webpages have an <html> tag at the beginning and the end, telling the
browser where the document starts and where it stops.
The most basic code - the code you will use for any page you make, is shown
below:
<html>
<head>
<!-- This section is for the title and technical info of the
page. -->
</head>
<body>
<!-- This section is for all that you want to show on the page. -
->
</body>
</html>
HEAD SECTION
4. The head section of the webpage includes all the stuff that does not show directly
on the resulting page.
The <title> and </title> tags encapsulate the title of your page. The title is what
shows in the top of your browser window when the page is loaded.
Right now it should say something like "Basics - Html Tutorial" on top of the
window containing this text.
Another thing you will often see in the head section is metatags. Metatags are
used for, among other things, to improve the rankings in search engines.
Quite often the head section contains javascript which is a programming
language for more complex HTML pages.
Finally, more and more pages contain codes for cascading style sheets (CSS).
CSS is a rather new technique for optimizing the layout of major websites.
Since these aspects are way out of reach at this stage we will proceed with
explaining the body section.
BODY SECTION
The body of the document contains all that can be seen when the user loads the
page.
In the rest of this tutorial you can learn in detail about all the different aspects of
HTML, including:
Text
o Formatting
o Resizing
5. o Layout
o Listing
Links
o To local pages
o To pages at other sites
o To bookmarks
Images
o Inserting images (GIF and jpg)
o Adding a link to an image
Backgrounds
o Colors
o Images
o Fixed Image
Tables
Frames
6. Forms
Metatags
Hexadecimal Colors
The last page in this introduction will give you an overview of how to proceed with
the HTML tutorial (and beyond).
HOW TO LEARN MORE
This introduction presented you with the very basics of HTML.
In the rest of this tutorial you can study each of the different HTML tags in detail.
To the upper right on all pages you will find the HTML tutorial menu.
The links are arranged so you can approach this tutorial as an ongoing course.
Each link will take you to a "chapter" - 5 to 10 pages - explaining the selected topic
in depth.
If you are completely new to HTML, you should start with the chapter about text
and work your way through the links - ending with the chapter about hexadecimal
colors.
Once you become familiar with HTML you could proceed to the javascript
section, the java applet section or the Shockwave Flash section.
For a complete overview of the tutorials and resources on this site you should look
at the sitemap.
ALL HTML TAGS
7.
8. NAME W3C HTML.X.X NS MSIE DESCRIPTION
A HTML40 HTML32 HTML20 NS3+ MSIE3+ anchor
abbreviated form (e.g., WWW,
ABBR HTML40
HTTP, etc.)
ACRONYM HTML40
ADDRESS HTML40 HTML32 HTML20 NS3+ MSIE3+ information on author
APPLET HTML40 HTML32 NS3+ MSIE3+ Java applet
AREA HTML40 HTML32 NS3+ MSIE3+ client-side image map area
B HTML40 HTML32 HTML20 NS3+ MSIE3+ bold text style
BASE HTML40 HTML32 HTML20 NS3+ MSIE3+ document base URI
BASEFONT HTML40 HTML32 NS3+ MSIE3+ base font for the page
BDO HTML40 MSIE5+ I18N BiDi over-ride
BGSOUND MSIE3+ background sound
BIG HTML40 HTML32 NS3+ MSIE3+ enlarge text style
BLINK NS3+ blinking text
BLOCKQUOTE HTML40 HTML32 HTML20 NS3+ MSIE3+ long quotation
BODY HTML40 HTML32 HTML20 NS3+ MSIE3+ document body
BR HTML40 HTML32 HTML20 NS3+ MSIE3+ forced line break
BUTTON HTML40 MSIE4+ push button
CAPTION HTML40 HTML32 NS3+ MSIE3+ table caption
CENTER HTML40 HTML32 NS3+ MSIE4+ shorthand for DIV align=center
CITE HTML40 HTML32 HTML20 NS3+ MSIE3+ citation font format
CODE HTML40 HTML32 HTML20 NS3+ MSIE3+ computer code fragment
COL HTML40 MSIE3+ table column
COLGROUP HTML40 MSIE3+ table column group
COMMENT MSIE3+ comment ignored by the browser
DD HTML40 HTML32 HTML20 NS3+ MSIE3+ definition description
DEL HTML40 MSIE4+ deleted text
DFN HTML40 HTML32 MSIE3+ instance definition
DIR HTML40 HTML32 HTML20 NS3+ MSIE3+ directory list
DIV HTML40 HTML32 NS3+ MSIE3+ generic language/style container
DL HTML40 HTML32 HTML20 NS3+ MSIE3+ definition list
DT HTML40 HTML32 HTML20 NS3+ MSIE3+ definition term
EM HTML40 HTML32 HTML20 NS3+ MSIE3+ emphasis
EMBED NS3+ MSIE3+ embeds external object in HTML
FIELDSET HTML40 MSIE4+ form control group
FONT HTML40 HTML32 NS3+ MSIE3+ local change to font
FORM HTML40 HTML32 HTML20 NS3+ MSIE3+ interactive form
FRAME HTML40 NS3+ MSIE3+ subwindow
FRAMESET HTML40 NS3+ MSIE3+ window subdivision
H1 HTML40 HTML32 HTML20 NS3+ MSIE3+ heading
H2 HTML40 HTML32 HTML20 NS3+ MSIE3+ heading
H3 HTML40 HTML32 HTML20 NS3+ MSIE3+ heading
H4 HTML40 HTML32 HTML20 NS3+ MSIE3+ heading
9. H5 HTML40 HTML32 HTML20 NS3+ MSIE3+ heading
H6 HTML40 HTML32 HTML20 NS3+ MSIE3+ heading
HEAD HTML40 HTML32 HTML20 NS3+ MSIE3+ document head
HR HTML40 HTML32 HTML20 NS3+ MSIE3+ horizontal rule
HTML HTML40 HTML32 HTML20 NS3+ MSIE3+ document root element
I HTML40 HTML32 HTML20 NS3+ MSIE3+ italic text style
IFRAME HTML40 MSIE3+ inline subwindow
ILAYER NS4+ positioning content
IMG HTML40 HTML32 HTML20 NS3+ MSIE3+ Embedded image
INPUT HTML40 HTML32 HTML20 NS3+ MSIE3+ form control/field
INS HTML40 MSIE4+ inserted text
ISINDEX HTML40 HTML32 HTML20 NS3+ MSIE4+ single line prompt
KBD HTML40 HTML32 HTML20 NS3+ MSIE3+ text to be entered by the user
for use in web-based certificate
KEYGEN NS4+
management systems
LABEL HTML40 MSIE4+ form field label text
LAYER NS4+ positioning content
LEGEND HTML40 MSIE4+ fieldset legend
LI HTML40 HTML32 HTML20 NS3+ MSIE3+ list item
LINK HTML40 HTML32 HTML20 NS4+ MSIE3+ a media-independent link
MAP HTML40 HTML32 NS3+ MSIE3+ client-side image map
MARQUEE MSIE3+ scrolling text field
MENU HTML40 HTML32 HTML20 NS3+ MSIE3+ menu list
META HTML40 HTML32 HTML20 NS3+ MSIE3+ generic metainformation
MULTICOL NS3+ multiple column formatting
ensures that a line of text does not
NOBR NS3+ MSIE3+
wrap to the next line
alternative text for embedded
NOEMBED NS3+
objects
alternate content container for non
NOFRAMES HTML40 NS3+ MSIE3+
frame-based rendering
NOLAYER NS3+ positioning content
alternate content container for non
NOSCRIPT HTML40 NS3+ MSIE3+
script-based rendering
OBJECT HTML40 NS4+ MSIE3+ generic embedded object
OL HTML40 HTML32 HTML20 NS3+ MSIE3+ ordered list
OPTGROUP HTML40 option group
OPTION HTML40 HTML32 HTML20 NS3+ MSIE3+ selectable choice
P HTML40 HTML32 HTML20 NS3+ MSIE3+ paragraph
PARAM HTML40 HTML32 NS3+ MSIE3+ named property value
PLAINTEXT NS3+ MSIE3+ text format
PRE HTML40 HTML32 HTML20 NS3+ MSIE3+ preformatted text
Q HTML40 MSIE4+ sets apart a quotation in text
S HTML40 HTML32 NS2+ MSIE3+ strike-through text style
SAMP HTML40 HTML32 HTML20 MSIE3+ sample program output, scripts, etc.
10. SCRIPT HTML40 HTML32 NS3+ MSIE3+ script statements
SELECT HTML40 HTML32 HTML20 NS3+ MSIE3+ option selector
specifies server-side JavaScript
SERVER NS3+
statements
SMALL HTML40 HTML32 NS3+ MSIE3+ small text style
SPACER NS3+ inserts a space in a document
SPAN HTML40 NS4+ MSIE3+ generic language/style container
STRIKE HTML40 HTML32 NS3+ MSIE3+ strike-through text
STRONG HTML40 HTML32 HTML20 NS3+ MSIE3+ strong emphasis
STYLE HTML40 HTML32 NS4+ MSIE3+ style info
SUB HTML40 HTML32 NS3+ MSIE3+ subscript
SUP HTML40 HTML32 NS3+ MSIE3+ superscript
TABLE HTML40 HTML32 NS3+ MSIE3+ table
TBODY HTML40 MSIE4+ table body
TD HTML40 HTML32 NS3+ MSIE3+ table data cell
TEXTAREA HTML40 HTML32 HTML20 NS3+ MSIE3+ multi-line text field
TFOOT HTML40 MSIE4+ table footer
TH HTML40 HTML32 NS3+ MSIE3+ table header cell
THEAD HTML40 MSIE4+ table header
TITLE HTML40 HTML32 HTML20 NS3+ MSIE3+ document title
TR HTML40 HTML32 NS3+ MSIE3+ table row
TT HTML40 HTML32 HTML20 NS3+ MSIE3+ teletype or monospaced text style
U HTML40 HTML32 NS3+ MSIE3+ underlined text style
UL HTML40 HTML32 HTML20 NS3+ MSIE3+ unordered list
instance of a variable or program
VAR HTML40 HTML32 HTML20 NS3+ MSIE3+
argument
Javascript:
ARRAY OBJECT
Core Object NN IE ECMA
Array Multidimensional variable 2+ 4+ ECMA 1
Methods NN IE ECMA
concat() Combines two existing Array objects to one 3+ 4+ ECMA 1
join() Returns a string with elements from an Array 2+ 4+ ECMA 1
pop() Removes the last value from an Array. 3+ 5.5+ ECMA 1
push() Appends a value to the end of an Array. 3+ 5.5+ ECMA 1
reverse() Reverse the order of elements in an Array. 2+ 4+ ECMA 1
shift() Removes the first value from an Array. 3+ 5.5+ ECMA 1
slice() Returns a subset from an Array. 3+ 4+ ECMA 1
11. sort() Sorts an Array. 2+ 4+ ECMA 1
Adds new elements to an Array while removing old
splice() 3+ 4+ ECMA 1
elements.
toLocaleString() Returns a String with current locale format and separators. n/a 4+ ECMA 1
toSource() String representing the source code of the object. 4+ n/a n/a
Returns Array elements as string type separated by
toString() 2+ 4+ ECMA 1
commas.
unshift() Inserts a value at the beginning of an Array. 3+ 5.5+ ECMA 1
Returns Array elements as string type separated by
valueOf() 2+ 4+ n/a
commas.
Properties NN IE ECMA
constructor Reference to the function that created an object. 2+ 4+ ECMA 1
Zero-based index of the match for array created by a
index 3+ 4+ n/a
regular expression match.
Original string used to match for array created by a regular
input 3+ 4+ n/a
expression match.
length Returns the length of an Array 2+ 4+ ECMA 1
prototype Creates a new method for Array objects 2+ 4+ ECMA 1
BOOLEAN OBJECT
Core Object NN IE ECMA
Boolean Variable representing true or false. 2+ 4+ ECMA 1
Methods NN IE ECMA
toSource() String representing the source code of the object. 4+ n/a n/a
toString() Returns boolean value as string type. 2+ 4+ ECMA 1
valueOf() Returns an objects value as a Boolean type. 2+ 4+ ECMA 1
Properties NN IE ECMA
constructor Reference to the function that created an object. 2+ 4+ ECMA 1
prototype Creates a new method for Boolean objects 2+ 4+ ECMA 1
Boolean Core object
Variable representing true or false.
Syntax:
Syntax 1
var myBoolean = new Boolean()
12. Syntax 2
var myBoolean = new Boolean(booleanValue)
Syntax 3
var myArray = booleanValue
Browser support:
Microsoft Internet Explorer: 4+
Netscape Browser: 2+
Implementations:
JavaScript 1.1 (by Netscape)
JScript 2 (by Microsoft)
ECMA Script 1 (ECMA Standard)
Example:
Example 1 :
var myBoolean = false;
alert(myBoolean);
Example 2 :
var myBoolean = false;
var yourBoolean = true;
if (myBoolean) alert('myBoolean is true');
if (yourBoolean) alert('yourBoolean is true');
DATE OBJECT
Core Object NN IE ECMA
Date Date and time object. 2+ 3+ ECMA 1
Methods NN IE ECMA
getDate() Date as an integer between 1 and 31. 2+ 3+ ECMA 1
getDay() Day of week value: 0=Sunday, 1=Monday... 2+ 3+ ECMA 1
getFullYear() 4 digit year of a Date object. 4+ 4+ ECMA 1
getHours() Hours value of a Date object (0-23). 2+ 3+ ECMA 1
getMilliseconds() Milliseconds value of a Date object (0-999) 4+ 4+ ECMA 1
getMinutes() Minutes value of a Date object (0-59) 2+ 4+ ECMA 1
getMonth() Month value of a Date object. (0=Jan, 11=Dec) 2+ 3+ ECMA 1
getSeconds() Seconds value of a Date object. (0-59) 2+ 3+ ECMA 1
13. getTime() Milliseconds since 1970-1-1 of a Date object. 2+ 3+ ECMA 1
getTimezoneOffset() Minutes between local and UTC (GMT) time. 2+ 3+ ECMA 1
getUTCDate() Date value using UTC (GMT) time. (1-31) 4+ 4+ ECMA 1
getUTCDay() Day of week using UTC (GMT) time. (0=Sunday) 4+ 4+ ECMA 1
getUTCFullYear() 4 digit year using UTC (GMT) time. 4+ 4+ ECMA 1
getUTCHours() Hours using UTC (GMT) time. (0-23) 4+ 4+ ECMA 1
getUTCMilliseconds() Milliseconds using UTC (GMT) time. (0-999) 4+ 4+ ECMA 1
getUTCMinutes() Minutes using UTC (GMT) time. (0-59) 4+ 4+ ECMA 1
getUTCMonth() Month using UTC (GMT) time. (0-11). 4+ 4+ ECMA 1
getUTCSeconds() Seconds using UTC (GMT) time. (0-59) 4+ 4+ ECMA 1
getVarDate() Visual Basic compatible VT_DATE value. n/a 4+ n/a
getYear() Year value of a Date object. 2+ 3+ ECMA 1
parse() Milliseconds between parsed string and 1970-1-1 2+ 3+ ECMA 1
setDate() Sets the date of the Date object. 2+ 4+ ECMA 1
setFullYear() Sets the year value in a Date object. 4+ 4+ ECMA 1
setHours() Sets the hours value in a Date object. 2+ 4+ ECMA 1
setMilliseconds() Sets the milliseconds value in a Date object. 4+ 4+ ECMA 1
setMinutes() Sets the minutess value in a Date object. 2+ 3+ ECMA 1
setMonth() Sets the month value in a Date object. 2+ 3+ ECMA 1
setSeconds() Sets the seconds value in a Date object. 2+ 3+ ECMA 1
setTime() Sets the time value (milliseconds) in a Date object. 2+ 3+ ECMA 1
setUTCDate() Sets the UTC date of a Date object. 4+ 4+ ECMA 1
setUTCFullYear() Sets the UTC year value in a Date object. 4+ 4+ ECMA 1
setUTCHours() Sets the UTC hours value in a Date object. 4+ 4+ ECMA 1
setUTCMilliseconds() Sets the UTC milliseconds value in a Date object. 4+ 4+ ECMA 1
setUTCMinutes() Sets the UTC minutess value in a Date object. 4+ 4+ ECMA 1
setUTCMonth() Sets the UTC month value in a Date object. 4+ 4+ ECMA 1
setUTCSeconds() Sets the UTC seconds value in a Date object. 4+ 4+ ECMA 1
setYear() Sets the year value of a Date object. 2+ 3+ ECMA 1
toDateString() Returns a date as a string value. n/a 5.5+ n/a
toGMTString() String value of a Date objects GMT time. 2+ 3+ ECMA 1
toLocaleDateString() Returns a date as a string value. n/a 5.5+ n/a
toLocaleString() String value of a Date object, in local time format. 2+ 3+ ECMA 1
toLocaleTimeString() Returns a time as a string value. n/a 5.5+ n/a
toSource() String representing the source code of the object. 4+ n/a ECMA 1
toString() String representation of a Date object 2+ 4+ ECMA 1
toTimeString() Returns a time as a string value. n/a 5.5+ n/a
toUTCString() Date converted to string using UTC. 4+ 4+ ECMA 1
UTC() Milliseconds since 1970 using UTC time. 2+ 3+ ECMA 1
valueOf() Milliseconds since 1970-1-1. 2+ 4+ ECMA 1
Properties NN IE ECMA
constructor Reference to the function that created an object. 2+ 4+ ECMA 1
prototype Creates a new method for Date objects 2+ 4+ ECMA 1
14. Date Core object
Date and time object.
Syntax:
Syntax 1
var myDate = new Date()
Syntax 2
var myDate = new Date([parameters])
Syntax 3
var myDate = new Date(dateString)
Syntax 4
var myDate = new Date("month dd, yyyy")
Syntax 5
var myDate = new Date("month dd, yyyy hh:mm:ss")
Syntax 6
var myDate = new Date(yy, mm, dd)
Syntax 7
var myDate = new Date(yy, mm, dd, hh, mm, ss)
Syntax 8
var myDate = new Date("miliseconds")
FUNCTION OBJECT
Core Object NN IE ECMA
Function Creates a new function. 2+ 4+ ECMA 1
Methods NN IE ECMA
apply() Applies a method of another object to the current object. 4+ 5.5+ n/a
call() Executes method of another object on current object. 4+ 5.5+ n/a
toSource() String representing the source code of the function. 4+ n/a n/a
toString() String representing the source code of the function. 2+ 4+ ECMA 1
valueOf() String representing the source code of the function. 2+ 4+ ECMA 1
15. Properties NN IE ECMA
arguments An array with the arguments passed to a function. 2+ 4+ ECMA 1
arguments.callee The function body of the currently executing function. 2+ 5.5+ ECMA 1
arguments.length Number of arguments passed to the function. 2+ 5.5+ ECMA 1
caller Reference to the function that created an object. 3+ 4+ ECMA 1
constructor Reference to the function that created an object. 2+ 4+ ECMA 1
length Number of arguments expected by the function. 2+ 4+ ECMA 1
prototype Creates a new method for Function objects. 2+ 4+ ECMA 1
Function Core object
Creates a new function.
Syntax:
Syntax 1
function functionName([argname1 [, ...[, argnameN]]]){
body
}
Syntax 2
functionName = new Function( [argname1, [... argnameN,]] body );
Browser support:
Microsoft Internet Explorer: 4+
Netscape Browser: 2+
Implementations:
JavaScript 1.1 (by Netscape)
JScript 2 (by Microsoft)
ECMA Script 1 (ECMA Standard)
Example:
Example 1 :
function myFunction(){
alert('I AM ALIVE');
}
Example 2 :
