Html Tutor

50 %
50 %
Information about Html Tutor

Published on January 4, 2008

Author: shantanuo

Source: slideshare.net

Description

presentation delivered to magnet staff

HTML Introduction By Shantanu Oak

HTML Structure <html> <head> <title> Welcome to the world of Internet </title> </head> <body> <h1> This is my first page </h1> I hope I will learn HTML and CSS, PHP, SQL <br> It won’t take much time for that <p> <font face=“arial” color=“green” size=4> Just remember all the important tags! </font> </body> </html>

<html>

<head>

<title> Welcome to the world of Internet </title>

</head>

<body>

<h1> This is my first page </h1>

I hope I will learn HTML and CSS, PHP, SQL <br>

It won’t take much time for that <p>

<font face=“arial” color=“green” size=4> Just remember all the important tags! </font>

</body>

</html>

Text display to the end user Whatever text is nested within the <BODY> and </BODY> will be displayed to the end user. <BODY TEXT=&quot;green&quot;> Hello World! </BODY> This displays the entire page contents in green. We can then add the BGCOLOR attribute, which sets the default background colour of the page. <BODY TEXT=&quot;green&quot; BGCOLOR=&quot;purple&quot;> </BODY>

Whatever text is nested within the <BODY> and </BODY> will be displayed to the end user.

<BODY TEXT=&quot;green&quot;> Hello World! </BODY> This displays the entire page contents in green. We can then add the BGCOLOR attribute, which sets the default background colour of the page. <BODY TEXT=&quot;green&quot; BGCOLOR=&quot;purple&quot;> </BODY>

Headings H1 to H6 <H1>This is H1 text</H1> <H4>This is H4 text</H4> <H6>This is H6 text</H6> would be displayed as: This is H1 text This is H4 text This is H6 text

<H1>This is H1 text</H1>

<H4>This is H4 text</H4>

<H6>This is H6 text</H6> would be displayed as:

This is H1 text

This is H4 text

This is H6 text

B I and U Trespassers will be <B>prosecuted</B> Trespassers will be prosecuted Read more about this in <I>Top Of The News</I> Read more about this in Top Of The News Only in a <U>quiet</U> mind is adequate perception of the world. Only in a quiet mind is adequate perception of the world.

Trespassers will be <B>prosecuted</B>

Trespassers will be prosecuted

Read more about this in <I>Top Of The News</I>

Read more about this in Top Of The News

Only in a <U>quiet</U> mind is adequate perception of the world.

Only in a quiet mind is adequate perception of the world.

Horizontal Ruler You can separate page content with horizontal lines (<HR>). The <HR> tag need not be terminated by a closing </HR> tag. The <HR> tag inserts a horizontal line of user-defined width, height and alignment across the page. <HR WIDTH=“50%&quot; SIZE=&quot;4&quot; ALIGN=&quot;RIGHT&quot;> will insert a horizontal line of width 100 pixels and height 4 pixels, aligned towards the right side of the page. If the <HR> tag is used by itself, without any attributes, it will simply insert a line of default height and width across the page.

You can separate page content with horizontal lines (<HR>).

The <HR> tag need not be terminated by a closing </HR> tag.

The <HR> tag inserts a horizontal line of user-defined width, height and alignment across the page.

<HR WIDTH=“50%&quot; SIZE=&quot;4&quot; ALIGN=&quot;RIGHT&quot;>

will insert a horizontal line of width 100 pixels and height 4 pixels, aligned towards the right side of the page.

If the <HR> tag is used by itself, without any attributes, it will simply insert a line of default height and width across the page.

<p> and <br> An absence of explicit <P> or <BR> tags in the HTML document will typically cause the page to be rendered as a single block of text, regardless of the number of carriage returns or line breaks used when writing the code. The only exception to this is text contained within the <PRE> tag. <br> Breaks the text and begins a new line, but does not add extra space as the <P> tag does. <P> takes attributes like align whereas <br> does not.

An absence of explicit <P> or <BR> tags in the HTML document will typically cause the page to be rendered as a single block of text, regardless of the number of carriage returns or line breaks used when writing the code. The only exception to this is text contained within the <PRE> tag.

<br> Breaks the text and begins a new line, but does not add extra space as the <P> tag does.

<P> takes attributes like align whereas <br> does not.

Align - Center, Right and Left The <P> tag may also be used to align blocks of text with the ALIGN attribute, which takes the values LEFT, CENTER, RIGHT and JUSTIFY. For example: <P ALIGN=&quot;RIGHT&quot;> This text is aligned to the right </P> <CENTER>...</CENTER> aligns all elements between the opening and closing tags in the centre of the page.

The <P> tag may also be used to align blocks of text with the ALIGN attribute, which takes the values LEFT, CENTER, RIGHT and JUSTIFY.

For example: <P ALIGN=&quot;RIGHT&quot;> This text is aligned to the right </P>

<CENTER>...</CENTER>

aligns all elements between the opening and closing tags in the centre of the page.

Eye Liners Liptsticks Powder Mismatch 4 Size Font Red Color Font Red Lipstick Lips Value Attribute Object 4 Rowspan Font Right Align Font Red Lipstick Chicks Value Attribute Object

Ordered and Unordered List <OL> <LI> Start Word <LI> Type Letter </OL> which would look something like this: 1. Start Word 2. Type Letter <UL> <LI>Computer <LI>Printer </UL> creates an unordered list with 2 items: Computer Printer

<OL> <LI> Start Word <LI> Type Letter </OL> which would look something like this: 1. Start Word 2. Type Letter

<UL> <LI>Computer <LI>Printer </UL> creates an unordered list with 2 items:

Computer

Printer

<pre>… </pre> Preformatted text, meaning that lines are displayed exactly as they are typed in, honoring multiple spaces and line breaks. Text within <pre> tags will be displayed in a monospace font such as Courier. <pre> I am so happy that I have learned HTML. Now I want to learn PHP as well! Ha! Ha! Ha! </pre>

Preformatted text, meaning that lines are displayed exactly as they are typed in, honoring multiple spaces and line breaks. Text within <pre> tags will be displayed in a monospace font such as Courier.

<pre> I am so happy that I have learned HTML. Now I want to learn PHP as well! Ha! Ha! Ha!

</pre>

Tables! <table border=1> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> Cell4 Cell3 Cell2 Cell1

<table border=1>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

</tr>

<tr>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</table>

Tables part II <table border> <tr> <td colspan=“2” align=“center”>Cell 1</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> <table border> <tr> <td rowspan=“2” valign=“bottom” >Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 4</td> </tr> </table> Cell4 Cell3 Cell1 Cell4 Cell2 Cell1

<table border> <tr> <td colspan=“2” align=“center”>Cell 1</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

<table border> <tr> <td rowspan=“2” valign=“bottom” >Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 4</td> </tr> </table>

Tables Part III – Non Breaking space <TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0> <TR> <TD WIDTH=25% BGCOLOR=yellow> &nbsp; </TD> <TD WIDTH=50% BGCOLOR=lightgrey> power of cheese .</TD> <TD WIDTH=25% BGCOLOR=orange> &nbsp; </TD> </TR> </TABLE> power of cheese

<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0> <TR> <TD WIDTH=25% BGCOLOR=yellow> &nbsp; </TD> <TD WIDTH=50% BGCOLOR=lightgrey> power of cheese .</TD> <TD WIDTH=25% BGCOLOR=orange> &nbsp; </TD> </TR> </TABLE>

Clickable Links and images <A HREF=&quot;demo.html&quot;>Click me</A> <A HREF=“test/demo.html&quot;>Click me</A> <A HREF=“http://quickbase.com&quot;>Visit Quickbase </A> Click me Click me Visit Quickbase <IMG SRC=&quot;welcome.gif&quot;> <IMG SRC=“img/welcome.gif&quot;> <IMG SRC=“http://www.quickbase.com/i/threeArrowsRed.gif” align=“right”> <A HREF=“http://quickbase.com&quot;> <IMG SRC=“http://www.quickbase.com/i/threeArrowsRed.gif”> </A>

<A HREF=&quot;demo.html&quot;>Click me</A>

<A HREF=“test/demo.html&quot;>Click me</A>

<A HREF=“http://quickbase.com&quot;>Visit Quickbase </A>

Click me

Click me

Visit Quickbase

<IMG SRC=&quot;welcome.gif&quot;>

<IMG SRC=“img/welcome.gif&quot;>

<IMG SRC=“http://www.quickbase.com/i/threeArrowsRed.gif” align=“right”>

Idhar bhi Form Bharna Padega? <form action=&quot;nextpage.html&quot; method=&quot;get&quot; name=“college&quot;> <input type=&quot;text&quot; value=“Type your name&quot; name=“studentName&quot;> <textarea cols=25 rows=6 name=“address”>Type your address here… </textarea> <input type=&quot;radio&quot; name=“side&quot; value=&quot;radio1&quot; checked>Commerce <input type=&quot;radio&quot; name=“side&quot; value=&quot;radio2&quot;>arts <input type=&quot;radio&quot; name=“side&quot; value=&quot;radio3&quot;>Science <select name=“donation&quot;> <option value=&quot;1&quot;>Free Seat</option> <option value=&quot;2&quot;>Paid Seat</option> </select> <input type=&quot;hidden&quot; name=“Web_entry&quot; value=“yes&quot;> <input type=&quot;submit&quot; value=“Admission Request&quot; align=&quot;middle&quot;> </form>

<form action=&quot;nextpage.html&quot; method=&quot;get&quot; name=“college&quot;>

<input type=&quot;text&quot; value=“Type your name&quot; name=“studentName&quot;>

<textarea cols=25 rows=6 name=“address”>Type your address here… </textarea>

<input type=&quot;radio&quot; name=“side&quot; value=&quot;radio1&quot; checked>Commerce <input type=&quot;radio&quot; name=“side&quot; value=&quot;radio2&quot;>arts <input type=&quot;radio&quot; name=“side&quot; value=&quot;radio3&quot;>Science

<select name=“donation&quot;> <option value=&quot;1&quot;>Free Seat</option> <option value=&quot;2&quot;>Paid Seat</option> </select>

<input type=&quot;hidden&quot; name=“Web_entry&quot; value=“yes&quot;>

<input type=&quot;submit&quot; value=“Admission Request&quot; align=&quot;middle&quot;>

</form>

Frames <html> <frameset cols=“34%,66%&quot;> <frame src=&quot;idli.html&quot; name=&quot;idli&quot;> <frameset rows=&quot;100,*&quot;> <frame src=&quot;chatni.html&quot; name=&quot;chatni&quot;> <frame src=&quot;sambar.html&quot; name=&quot;sambar&quot;> </frameset> </frameset> </html>

<html>

<frameset cols=“34%,66%&quot;>

<frame src=&quot;idli.html&quot; name=&quot;idli&quot;>

<frameset rows=&quot;100,*&quot;>

<frame src=&quot;chatni.html&quot; name=&quot;chatni&quot;>

<frame src=&quot;sambar.html&quot; name=&quot;sambar&quot;>

</frameset>

</frameset>

</html>

Style me rahane ka! <img src=&quot;guru.gif&quot; style=&quot;float:left;&quot;> <span style=&quot;float: right;&quot;> this is rigth </span> <p style=&quot;text-indent:100 px;&quot;>Test</p> <a href=&quot;http://www.yahoo.com&quot; style=&quot;text-decoration: none;&quot;> click here /a> <span style=&quot;background-color: yellow;&quot;> A yellow background </span>

<img src=&quot;guru.gif&quot; style=&quot;float:left;&quot;>

<span style=&quot;float: right;&quot;> this is rigth </span>

<p style=&quot;text-indent:100 px;&quot;>Test</p>

<a href=&quot;http://www.yahoo.com&quot; style=&quot;text-decoration: none;&quot;> click here /a>

<span style=&quot;background-color: yellow;&quot;> A yellow background </span>

Style sub jagah hai yaar! <span style=&quot;line-height: 30px;&quot;> <img src=&quot;guru.gif&quot; style=&quot;display: none;&quot;> <span style=&quot;letter-spacing: 30px;&quot; > <span style=&quot;font-variant: small-caps;&quot;> <span style=&quot;text-transform: uppercase;&quot; >

<span style=&quot;line-height: 30px;&quot;>

<img src=&quot;guru.gif&quot; style=&quot;display: none;&quot;>

<span style=&quot;letter-spacing: 30px;&quot; >

<span style=&quot;font-variant: small-caps;&quot;>

<span style=&quot;text-transform: uppercase;&quot; >

Table bhee Style maarta hai? <td style=&quot;padding: 22px 22px 22px 22px;&quot;>

<td style=&quot;padding: 22px 22px 22px 22px;&quot;>

All the lines except the first one are using styles <html> <head> <STYLE type=&quot;text/css&quot;> h2,h1.myrule { text-transform: uppercase } </STYLE> </head> <body> <h1> This is normal Heading 1</h1> <h1 class=&quot;myrule&quot;>I am using class in the h1</h1> <h2> This is important </h2> <h3 style=&quot;text-transform: uppercase;&quot;> This is important </h3> </body> </html>

<html>

<head>

<STYLE type=&quot;text/css&quot;>

h2,h1.myrule {

text-transform: uppercase

}

</STYLE>

</head>

<body>

<h1> This is normal Heading 1</h1>

<h1 class=&quot;myrule&quot;>I am using class in the h1</h1>

<h2> This is important </h2>

<h3 style=&quot;text-transform: uppercase;&quot;> This is important </h3>

</body>

</html>

CSS Cascading Style Sheets Separating style from content in your HTML documents

CSS History? All browsers supports CSS When Microsoft released Internet Explorer 3.0 on August 14th 1996, it was the first browser that supported CSS.

All browsers supports CSS

When Microsoft released Internet Explorer 3.0 on August 14th 1996, it was the first browser that supported CSS.

The need of Styles <h1> <font color=&quot;red&quot;>This is red</font> </h1> If you want all the h1 tags in Red color you will have to repeat these tags. Instead declare it in the HEAD Section. h1 { color: red; }

<h1> <font color=&quot;red&quot;>This is red</font> </h1>

If you want all the h1 tags in Red color you will have to repeat these tags.

Instead declare it in the HEAD Section.

h1 { color: red; }

The syntax of <style> tag <head> <STYLE type=&quot;text/css&quot;> h1 { color: red; } </STYLE> </head> A style is contained in curly brackets { } with each defined name/value pair separated by a semi-colon. You can type each argument on separate line or in the same line. So the syntax: selector {property: value; property:value} <STYLE type=&quot;text/css&quot;> h1 { color: red; font-family:arial; font-size:10pt;} </STYLE>

<head>

<STYLE type=&quot;text/css&quot;>

h1 {

color: red;

}

</STYLE>

</head>

A style is contained in curly brackets { } with each defined name/value pair separated by a semi-colon.

You can type each argument on separate line or in the same line.

So the syntax:

selector {property: value; property:value}

<STYLE type=&quot;text/css&quot;>

h1 { color: red; font-family:arial; font-size:10pt;}

</STYLE>

External style sheets <LINK rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles/mystyle.css&quot;>

<LINK rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles/mystyle.css&quot;>

ID's and Classes In the above example all the &quot;h1&quot; tags will be red. If you want to apply this red color selectively... <STYLE type=&quot;text/css&quot;> h1.myred { color: red; } </STYLE> and to apply <h1 class=&quot;myred&quot;>This is red heading one.</h1> The part after the &quot;.&quot; is called class. In this case the class myred can be applied only to the H1 tag. But if you type .myred { color:red; } it will be available to all. For eg. <p class=&quot;myred&quot;>This is red paragraph.</p> You can also use ID's like #mybig { font-size:20pt; } It does the same thing that classes do. The advantage is that you can use classes &quot;AND&quot; id's <P CLASS=&quot;myred&quot; ID=&quot;mybig&quot;>This text is also bright red, but the extra ID attribute makes it 20 point instead</P>

In the above example all the &quot;h1&quot; tags will be red.

If you want to apply this red color selectively...

<STYLE type=&quot;text/css&quot;>

h1.myred {

color: red;

}

</STYLE>

and to apply

<h1 class=&quot;myred&quot;>This is red heading one.</h1>

The part after the &quot;.&quot; is called class. In this case the class myred can be applied only to the H1 tag. But if you type

.myred { color:red; }

it will be available to all. For eg.

<p class=&quot;myred&quot;>This is red paragraph.</p>

You can also use ID's like

#mybig { font-size:20pt; }

It does the same thing that classes do. The advantage is that you can use classes &quot;AND&quot; id's

<P CLASS=&quot;myred&quot; ID=&quot;mybig&quot;>This text is also bright red, but the extra ID attribute makes it 20 point instead</P>

The SPAN Element SPAN is an inline element, so it can be used just as elements such as <b> or <em>, <strong>. The important distinction is that while b, em carry structural meaning, SPAN has no such meaning. <P CLASS=&quot;myred&quot;>This text is also bright red, but the extra ID attribute <span ID = &quot;mybig&quot;>makes it 20 point </span> instead</P>

SPAN is an inline element, so it can be used just as elements such as <b> or <em>, <strong>.

The important distinction is that while b, em carry structural meaning, SPAN has no such meaning.

<P CLASS=&quot;myred&quot;>This text is also bright red, but the extra ID attribute <span ID = &quot;mybig&quot;>makes it 20 point </span> instead</P>

Font Property Values font [<font-style> || <font-variant> || <font-weight>]? <font-size> [/<line-height>]? <font-family> font-family [[<family-name> | [<family-name> font-style normal | italic | oblique font-variant normal | small-caps font-weight normal | bold | bolder | lighter | 100 | 800 | 900 font-size <absolute-size> | <relative-size> | <length> | <percentage>

Property Values

font [<font-style> || <font-variant> || <font-weight>]? <font-size> [/<line-height>]? <font-family>

font-family [[<family-name> | [<family-name>

font-style normal | italic | oblique

font-variant normal | small-caps

font-weight normal | bold | bolder | lighter | 100 | 800 | 900

font-size <absolute-size> | <relative-size> | <length> | <percentage>

TEXT Property Values word-spacing normal | <length> letter-spacing normal | <length> text-decoration none | [underline || overline || line-through || blink] default: none vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> text-transform none | capitalize | uppercase | lowercase text-align left | right | center | justify default: UA-specific text-indent <length> | <percentage>default: 0 line-height normal | <number> | <length> | <percentage>

Property Values

word-spacing normal | <length>

letter-spacing normal | <length>

text-decoration none | [underline || overline || line-through || blink] default: none

vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>

text-transform none | capitalize | uppercase | lowercase

text-align left | right | center | justify default: UA-specific

text-indent <length> | <percentage>default: 0

line-height normal | <number> | <length> | <percentage>

Background Property Values color <color> default: UA-specific background-color transparent | <color> background-image none | <url> background-repeat repeat | repeat-x | repeat-y | no-repeat background-attachment scroll | fixed background-position [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]default: 0% 0% Background <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>

Property Values

color <color> default: UA-specific

background-color transparent | <color>

background-image none | <url>

background-repeat repeat | repeat-x | repeat-y | no-repeat

background-attachment scroll | fixed

background-position [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]default: 0% 0%

Background <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>

contextual styles With CSS, it is possible to define how a tag should be rendered if it appears INSIDE another tag. Lets say you want all the bulleted text in a list to be italics. You could do something like this: UL LI { text-decoration:italic; } which will render all <LI> tags inside <UL> tags in italics. If you used an ordered list ( <OL> ), its bullets would not be affected by this style definition.

With CSS, it is possible to define how a tag should be rendered if it appears INSIDE another tag.

Lets say you want all the bulleted text in a list to be italics. You could do something like this:

UL LI { text-decoration:italic; } which will render all <LI> tags inside <UL> tags in italics. If you used an ordered list ( <OL> ), its bullets would not be affected by this style definition.

Inline Styles Style may be inline using the STYLE attribute. The STYLE attribute may be applied to any BODY element (including BODY itself). Here is how... <h1 STYLE=&quot;font-size: +50&quot;> This is following <SPAN STYLE=&quot;font-family: cursive&quot;> inline style</span> rules.</h1> or <P STYLE=&quot;color:red; font-family:'New Century Schoolbook', serif&quot;>This paragraph is styled in red with the New Century Schoolbook font, if available. </P>

Style may be inline using the STYLE attribute. The STYLE attribute may be applied to any BODY element (including BODY itself).

Here is how...

<h1 STYLE=&quot;font-size: +50&quot;> This is following <SPAN STYLE=&quot;font-family: cursive&quot;> inline style</span> rules.</h1>

or

<P STYLE=&quot;color:red; font-family:'New Century Schoolbook', serif&quot;>This paragraph is styled in red with the New Century Schoolbook font, if available. </P>

Fonts and CSS examples HTML Code: <font size=&quot;'+2&quot;> This is bigger </font> CSS Code: <span style=&quot;font-size=24pt&quot;> This is bigger </span> or <H1 STYLE=&quot;color: orange; font-family: impact&quot;>Styles are great. </H1> or even <P STYLE=&quot;background: yellow; font-family: courier&quot;>Amaze your friends! </P>

HTML Code:

<font size=&quot;'+2&quot;> This is bigger </font>

CSS Code:

<span style=&quot;font-size=24pt&quot;> This is bigger </span>

or <H1 STYLE=&quot;color: orange; font-family: impact&quot;>Styles are great. </H1>

or even <P STYLE=&quot;background: yellow; font-family: courier&quot;>Amaze your friends! </P>

The right way If you are using external stylesheets you can define styles for all heading 1 tags as follows.... ** H1 {font-size: 14px} * H1 {font-size: x-large} * H1 {font-size: larger} * H1 {font-size: 1.5 em} * H1 {font-size: 125%} Which one of the above is the best? Use pixels (not points, not ems, not percentages, not keywords) to specify your font sizes. Points are a unit of print, not a unit of screen space. Pixels are the only meaningful unit of screen space. Due to platform and resolution differences, 14pt can mean many things. What it does not mean is a specific unit of screen size. So, use points only when you are sure that the users will print the information from your site. (Which is quite unlikely) And remember to use pixels for better results.

If you are using external stylesheets you can define styles for all heading 1 tags as follows....

** H1 {font-size: 14px}

* H1 {font-size: x-large}

* H1 {font-size: larger}

* H1 {font-size: 1.5 em}

* H1 {font-size: 125%}

Which one of the above is the best?

Use pixels (not points, not ems, not percentages, not keywords) to specify your font sizes.

Points are a unit of print, not a unit of screen space. Pixels are the only meaningful unit of screen space. Due to platform and resolution differences, 14pt can mean many things. What it does not mean is a specific unit of screen size.

So, use points only when you are sure that the users will print the information from your site. (Which is quite unlikely) And remember to use pixels for better results.

More Styles Background-color You know how to change the font color, <font color=red>this is red</font> But do you know how to change the background color? This is how... <span style=&quot;background-color:yellow&quot;>Hello World</span> Anchor When the user passes his mouse on a link, the color should change to red. Very difficult? Not at all Just add these three lines in the <head> and </head> section. <style>A:hover{color:red}</style>

Background-color

You know how to change the font color, <font color=red>this is red</font> But do you know how to change the background color?

This is how... <span style=&quot;background-color:yellow&quot;>Hello World</span>

Anchor

When the user passes his mouse on a link, the color should change to red. Very difficult? Not at all Just add these three lines in the <head> and </head> section.

<style>A:hover{color:red}</style>

Changing cursor using style cursor:help <a href=&quot;http://www.help.com&quot;><span style=&quot;cursor:help&quot;>Want some help about how to change the cursor? </span></a> When the visitor will pass his mouse on this link, he will see the question mark along with his cursor. The cursor:auto line will keep the cursor at whatever the user has chosen as a default. There are many other cursor styles as shown below... cursor:default (cursor stays as is) cursor:crosshair (a cross) cursor:pointer (hand) cursor:text (I-Beam text cursor) cursor:wait (hourglass) cursor:hand (pointing hand) cursor:help (question mark) cursor:move (cross with arrows) cursor:e-resize (right arrow) cursor:w-resize (Left Arrow) cursor:n-resize (up arrow) cursor:ne-resize (up and right arrow) cursor:nw-resize (up and left arrow) cursor:s-resize (down arrow) cursor:se-resize (down and right arrow) cursor:sw-resize (down and left arrow)

cursor:help

<a href=&quot;http://www.help.com&quot;><span style=&quot;cursor:help&quot;>Want some

help about how to change the cursor? </span></a>

When the visitor will pass his mouse on this link, he will see the question mark along with his cursor. The cursor:auto line will keep the cursor at whatever the user has chosen as a default.

There are many other cursor styles as shown below...

cursor:default (cursor stays as is)

cursor:crosshair (a cross)

cursor:pointer (hand)

cursor:text (I-Beam text cursor)

cursor:wait (hourglass)

cursor:hand (pointing hand)

cursor:help (question mark)

cursor:move (cross with arrows)

cursor:e-resize (right arrow)

cursor:w-resize (Left Arrow)

cursor:n-resize (up arrow)

cursor:ne-resize (up and right arrow)

cursor:nw-resize (up and left arrow)

cursor:s-resize (down arrow)

cursor:se-resize (down and right arrow)

cursor:sw-resize (down and left arrow)

Add a comment

Related presentations

Related pages

HTML Tutorial - W3Schools

With HTML you can create your own Web site. This tutorial teaches you everything about HTML. HTML is easy to learn - You will enjoy it. This HTML tutorial ...
Read more

HTML Tutorial - Page Tutor

Award winning HTML and Javascript tutorials. You'll find easy to learn material on HTML, tables, forms, frames, javascript, style sheets and a whole lot more.
Read more

HTML Tutorial - Inhaltsverzeichnisgertutorial - HTML.net

HTML Tutorial - Inhaltsverzeichnis - HTML- und CSS-Tutorials - Erstellen Sie Ihre eigene Webseite
Read more

HTML Tutorial - Learn HTML Code, Tags & CSS

HTML Quick Lists: A complete list of all tags and attributes, ... Learn everything you need to know about web hosting at our sister site, ...
Read more

PageTutor - HTML Tutorials

Basic HTML Tutor; Table Tutor; Form Tutor; Frames Tutor; ... Are you looking for a good HTML book? Well, the PageTutor tutorials come in a neatly bound, ...
Read more

Einführunggertutorial - HTML.net

Einführung - HTML- und CSS-Tutorials - Erstellen Sie Ihre eigene Webseite
Read more

Introduction to HTML

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
Read more

HTML Tutorial and CSS Tutorial

This is the one-stop HTML tutorial and resource centre. We present our tutorial in a straight forward manner to help everyone master HTML effortlessly.
Read more

HTML Tutorial - Table of contentsentutorial - HTML.net

HTML Tutorial - Table of contents - Free tutorials on HTML, CSS and PHP - Build your own website
Read more

Bessere Noten in Schule & Uni – sofatutor

Bessere Noten in Schule & Uni. Mehr verstehen, besser vorbereitet sein – bei Klassenarbeiten, Hausaufgaben und Abschlussprüfungen
Read more