Welcome to online books - HTML BEGINNERS

Basic HTML Tags

Tag	Description
<html>	Defines an HTML document
<body>	Defines the document's body
<h1> to <h6>	Defines header 1 to header 6
<p>	Defines a paragraph
<br>	Inserts a single line break
<hr>	Defines a horizontal rule
<!-->	Defines a comment

Text Formatting Tags

Tag	Description
<b>	Defines bold text
<big>	Defines big text
<em>	Defines emphasized text
<i>	Defines italic text
<small>	Defines small text
<strong>	Defines strong text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text
<s>	Deprecated. Use <del> instead
<strike>	Deprecated. Use <del> instead
<u>	Deprecated. Use styles instead

"Computer Output" Tags

Tag	Description
<code>	Defines computer code text
<kbd>	Defines keyboard text
<samp>	Defines sample computer code
<tt>	Defines teletype text
<var>	Defines a variable
<pre>	Defines preformatted text
<listing>	Deprecated. Use <pre> instead
<plaintext>	Deprecated. Use <pre> instead
<xmp>	Deprecated. Use <pre> instead

  - spaces

INSERT IMAGES

An image:

<img src="constr4.gif"

width="144" height="50">

A moving image:

<img src="hackanm.gif"

width="48" height="48">

INSERTING IMAGE FROM OTHER FOLDER OR ANOTHER SERVER

An image from another folder:

<img src="/images/netscape.gif"

width="33" height="32">

<p>

An image from W3Schools:

<img src="http://www.w3schools.com/images/ie.gif" width="73" height="68">

</p>

ALIGN IMAGE WITHIN THE TEXT

<p>

An image

<img src="hackanm.gif"

align="bottom" width="48" height="48">

in the text

</p>

<p>

An image

<img src ="hackanm.gif"

align="middle" width="48" height="48">

in the text

</p>

<p>

An image

<img src ="hackanm.gif"

align="top" width="48" height="48">

in the text

</p>

<p>Note that bottom alignment is the default alignment</p>

<p>

An image

<img src ="hackanm.gif"

width="48" height="48">

in the text

</p>

<p>

<img src ="hackanm.gif"

width="48" height="48">

An image before the text

</p>

<p>

An image after the text

<img src ="hackanm.gif"

width="48" height="48">

</p>

IMAGES AT LEFT/RIGHT

<p>

<img src ="hackanm.gif"

align ="left" width="48" height="48">

A paragraph with an image.

</p>

<p>

<img src ="hackanm.gif"

align ="right" width="48" height="48">

A paragraph with an image

</p>

ADJUST IMAGES TO DIFFERENT SIZES

<p>

<img src="hackanm.gif"

width="20" height="20">

</p>

<p>

<img src="hackanm.gif"

width="45" height="45">

</p>

<p>

<img src="hackanm.gif"

width="70" height="70">

</p>

DISPLAY AN ALTERNATE TEXT FOR AN IMAGE

<img src="goleft.gif" alt="Go Left" width="32" height="32">

<p>

Text-only browsers cannot display images and will only display the text that is specified in the "alt" attribute for the image. Here, the "alt"-text is "Go Left".</p>

<p>

Note that if you hold the mouse pointer over the image, most browsers will display the "alt"-text.

</p>

MAKE AN HYPER LINK FOR AN IMAGE

<p>

You can also use an image as a link:

<a href="lastpage.htm">

<img border="0" src="buttonnext.gif" width="65" height="38">

</a>

</p>

CREATE AN IMAGE MAP WITH CLICK ABLE REGIONS

<p>

Click on one of the planets to watch it closer:

</p>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap">

<map id="planetmap" name="planetmap">

<area shape="rect"

coords="0,0,82,126"

alt="Sun"

href="sun.htm">

<area shape="circle"

coords="90,58,3"

alt="Mercury"

href="mercur.htm">

<area shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm">

</map>

<p>

<b>Note:</b> We use both an <b>id</b> and a <b>name</b> attribute in the map tag

because some versions of Netscape don't understand the id attribute.</p>

BACKGROUNDS

<body bgcolor="#d0d0d0">//backgnd color

<body background="background.jpg">//image

STYLES

<head>

<style type="text/css">

h1 {color: red}

h3 {color: blue}

</style>

</head>

<body>

<h1>This is header 1</h1>

<h3>This is header 3</h3>

</body>

</html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="styles.css" >

</head>

<body>

<h1>I am formatted with a linked style sheet</h1>

<p>Me too!</p>

</body>

<a href="lastpage.htm"

style="text-decoration:none">

THIS IS A LINK!

</a>

HEAD SECTION

<title>The title is not displayed</title>

<html>

<head>

<base target="_blank">

</head>

<body>

<p>

<a href="http://www.w3schools.com"

target="_blank">This link</a>

will load in a new window because the target attribute is set to "_blank".

</p>

<p>

<a href="http://www.w3schools.com">

This link</a>

will also load in a new window even without a target attribute.

</p>

FORMS AND INPUTS

<form>

First name:

<input type="text" name="firstname">

Male:

<input type="radio" checked="checked"

name="Sex" value="male">

<br>

Female:

<input type="radio"

name="Sex" value="female">

<br>

I have a bike:

<input type="checkbox" name="Bike">

<br>

I have a car:

<input type="checkbox" name="Car">

Username:

<input type="text" name="user">

<br>

Password:

<input type="password" name="password">

</form>

DROPDOWN LIST:

<form>

<select name="cars">

<option value="volvo">Volvo

<option value="saab">Saab

<option value="fiat">Fiat

<option value="audi">Audi

</select>

</form>

USING BORDER

<fieldset>

<legend>

Health information:

</legend>

<form>

Height <input type="text" size="3">

Weight <input type="text" size="3">

</form>

</fieldset>

FORMS AND INPUTS:

TO CREATE BUTTON, TEXT,PASSWAORD:

<input type="button" value="Hello world!">

Username:

<input type="text" name="user">

Password:

<input type="password" name="password">

<html>

<body>

<form>

<select name="cars">

<option value="volvo">Volvo

<option value="saab">Saab

<option value="fiat">Fiat

<option value="audi">Audi

</select>

</form>

</body>

</html>

html>

<body>

<form>

Male:

<input type="radio" checked="checked"

name="Sex" value="male">

<br>

Female:

<input type="radio"

name="Sex" value="female">

</form>

<p>

When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked

</p>

</body>

</html>

<html>

<body>

<form>

I have a bike:

<input type="checkbox" name="Bike">

<br>

I have a car:

<input type="checkbox" name="Car">

</form>

</body>

</html>

<html>

<body>

<form>

Username:

<input type="text" name="user">

<br>

Password:

<input type="password" name="password">

</form>

<p>

Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters.

</p>

</body>

</html>

FRAMES

<html>

</frameset>

</html>

<html>

</frameset>

</html>

<html>

</frameset>

</html>

<html>

<frame src="frame_a.htm"

name="showframe">

</frameset>

</html>

<html>

<body>

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>

</body>

</html>

<html>

</frameset>

</html>

<html>

</frameset>

</html>

INSERT IMAGES

An image:

<img src="constr4.gif"

width="144" height="50">

A moving image:

<img src="hackanm.gif"

width="48" height="48">

INSERTING IMAGE FROM OTHER FOLDER OR ANOTHER SERVER

An image from another folder:

<img src="/images/netscape.gif"

width="33" height="32">

<p>

An image from W3Schools:

<img src="http://www.w3schools.com/images/ie.gif" width="73" height="68">

</p>

ALIGN IMAGE WITHIN THE TEXT

<p>

An image

<img src="hackanm.gif"

align="bottom" width="48" height="48">

in the text

</p>

<p>

An image

<img src ="hackanm.gif"

align="middle" width="48" height="48">

in the text

</p>

<p>

An image

<img src ="hackanm.gif"

align="top" width="48" height="48">

in the text

</p>

<p>Note that bottom alignment is the default alignment</p>

<p>

An image

<img src ="hackanm.gif"

width="48" height="48">

in the text

</p>

<p>

<img src ="hackanm.gif"

width="48" height="48">

An image before the text

</p>

<p>

An image after the text

<img src ="hackanm.gif"

width="48" height="48">

</p>

IMAGES AT LEFT/RIGHT

<p>

<img src ="hackanm.gif"

align ="left" width="48" height="48">

A paragraph with an image.

</p>

<p>

<img src ="hackanm.gif"

align ="right" width="48" height="48">

A paragraph with an image

</p>

ADJUST IMAGES TO DIFFERENT SIZES

<p>

<img src="hackanm.gif"

width="20" height="20">

</p>

<p>

<img src="hackanm.gif"

width="45" height="45">

</p>

<p>

<img src="hackanm.gif"

width="70" height="70">

</p>

DISPLAY AN ALTERNATE TEXT FOR AN IMAGE

<img src="goleft.gif" alt="Go Left" width="32" height="32">

<p>

Text-only browsers cannot display images and will only display the text that is specified in the "alt" attribute for the image. Here, the "alt"-text is "Go Left".</p>

<p>

Note that if you hold the mouse pointer over the image, most browsers will display the "alt"-text.

</p>

MAKE AN HYPER LINK FOR AN IMAGE

<p>

You can also use an image as a link:

<a href="lastpage.htm">

<img border="0" src="buttonnext.gif" width="65" height="38">

</a>

</p>

CREATE AN IMAGE MAP WITH CLICK ABLE REGIONS

<p>

Click on one of the planets to watch it closer:

</p>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap">

<map id="planetmap" name="planetmap">

<area shape="rect"

coords="0,0,82,126"

alt="Sun"

href="sun.htm">

<area shape="circle"

coords="90,58,3"

alt="Mercury"

href="mercur.htm">

<area shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm">

</map>

<p>

<b>Note:</b> We use both an <b>id</b> and a <b>name</b> attribute in the map tag

because some versions of Netscape don't understand the id attribute.</p>

BACKGROUNDS

<body bgcolor="#d0d0d0">//backgnd color

<body background="background.jpg">//image

STYLES

<head>

<style type="text/css">

h1 {color: red}

h3 {color: blue}

</style>

</head>

<body>

<h1>This is header 1</h1>

<h3>This is header 3</h3>

</body>

</html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="styles.css" >

</head>

<body>

<h1>I am formatted with a linked style sheet</h1>

<p>Me too!</p>

</body>

<a href="lastpage.htm"

style="text-decoration:none">

THIS IS A LINK!

</a>

HEAD SECTION

<title>The title is not displayed</title>

<html>

<head>

<base target="_blank">

</head>

<body>

<p>

<a href="http://www.w3schools.com"

target="_blank">This link</a>

will load in a new window because the target attribute is set to "_blank".

</p>

<p>

<a href="http://www.w3schools.com">

This link</a>

will also load in a new window even without a target attribute.

</p>

FORMS AND INPUTS

<form>

First name:

<input type="text" name="firstname">

Male:

<input type="radio" checked="checked"

name="Sex" value="male">

<br>

Female:

<input type="radio"

name="Sex" value="female">

<br>

I have a bike:

<input type="checkbox" name="Bike">

<br>

I have a car:

<input type="checkbox" name="Car">

Username:

<input type="text" name="user">

<br>

Password:

<input type="password" name="password">

</form>

DROPDOWN LIST:

<form>

<select name="cars">

<option value="volvo">Volvo

<option value="saab">Saab

<option value="fiat">Fiat

<option value="audi">Audi

</select>

</form>

USING BORDER

<fieldset>

<legend>

Health information:

</legend>

<form>

Height <input type="text" size="3">

Weight <input type="text" size="3">

</form>

</fieldset>

<html>

<body>

<p>

This text</a> is a link to a page on

this Web site.

</p>

<p>

This text</a> is a link to a page on

the World Wide Web.

</p>

</body>

</html>

<html>

<body>

<p>

You can also use an image as a link:

</a>

</p>

</body>

</html>

<html>

<body>

<p>

If you set the target attribute of a link to "_blank",

the link will open in a new window.

</p>

</body>

</html>

<html>

<body>

<p>

See also Chapter 4.

</a>

</p>

<p>

<h2>Chapter 1</h2>