Web Designing Pro

Professional Web Development
HTML
Copyrights 2002 2008 www.valaimanai.com, All rights
<< Back :: Home :: Next >>
HTML
.
World Wide Web Consortium (W3C) .
http://www.w3.org
HTML ,
Hypertext Markup Language
HTML
HTML . HTML Document <html>
(tag) </html> tag .
<head> ------ </head> , <body> -------------- </body>
. <head> tag (Title) Meta
tags . <body> tag
.

. - <p> --------- </p>, <h1> ---------- </h1>
html .
<Html>
<Head>
----------------------------------------------</head>
<Body>
----------------------------------------------------------</body>
</html>
HTML Note pad Text Editor .

1.
Note pad (Start >> All Programs >> Accessories >> Notepad)
.
<Html>
<Head>
<Title>Sample HTML Document</title>
</head>
<Body>
<p>
This is my first html page...
<u>simple </u>
Way, The basic structure of an HTML document.
</p>
</body>
</html>
2. Note pad file menu Save As Dialog Box

. ( My Documents Folder
.)
3. Save as type All Files .
4. File Name .html
.htm type Save Button .
. Double Click
.

<title> Tag
<head> tag <title> tag
<title> </title> tag "Sample HTML Document"

Title .
- Title
. (Search
engines) . Title
.
tag .
<p> tag
<p> </p> tag .
<p> </p>
.
<p> paragraph </p>
<h1>, <h2>, <h3>,.. Tags

(Heading) . <h1>
.
<h1> Heading 1 </h1>

10
<hr /> Tag

<hr> tag .

<hr />
<hr width = "200px" align = "right" color = "red" size=4>
11
<Br /> Tag

Line . . End Tag
.
First line <br />

Next line <br />
--------------- <br>
-------------
12
<b> <strong>
.
<b>First line </b><br>

<strong> Next line </strong> <br>
Next line <br>
-------------
13
Italic <em>

<em>First line </em><br>

<strong> <em> Next line </em> </strong> <br>
Next line <br>
14
Underline <u>

<u>First line </u><br>

<b> <em><u> Next line </u></em> </b> <br>
Next line <br>
15
Order list <ol>

Tag .
<ol>
<li>first line </li>
<li>Second line </li>
<li>something </li>
<li>xxxxxxxxx </li>
</ol>
16
type=1, type=a .
<ol>
<li type="1">xxxxxxxxxx</li>
<li type="a">xxxxxxxxxxxxxx</li>
<li type="A">xxxxxxxxxxxxxx</li>
<li type="i">xxxxxxxxxxxxxx</li>
<li type="I">xxxxxxxxxxxxxx</li>
<li >xxxxxxxxxxxxxx
<ol>
<li>xxxxxxxx</li>
<li>xxxxxxxxxxxxx
<ol>
<li type="a">xxxxxxxxxxxx</li>
<li type="a">xxxxxxxxxxxxx</li>
</ol>
</li>
<li>xxxxxxx</li>
</ol>
</li>
<li>xxxxxxxxxxx</li>
</ol>
17
Unordered list <ul>

<ul> .
circle, disc, square .
<ul>
<li>something </li>
<li>xxxxxxxxx </li>
</ul>
18
<ul>
<li>xxxxxxxx</li>
<li type="circle">xxxxxxxxxxxxxxxx</li>
<li type="disc">xxxxxxxxxxxxxxxxxxx</li>
<li type="square">xxxxxxxxxxxx </li>
<li>xxxxxxxxxxxx
<ul>
<li>xxxxxxx</li>
<li>xxxxxxxxxx</li>
<li>xxxxxxxxxxx
<ul>
<li>xxxxxxxxxx</li>
<li>xxxxxxxxxxxx</li>
</ul>
</li>
<li>xxxxxxxxx</li>
</ul>
</li>
<li>xxxxxx</li>
</ul>
19
HTML File .
<Html>
<Head>
<Title>Sample HTML Document 2</title>
</head>
<Body>
<p>
This is my first html page... <br><br>
<u>simple </u><br><br>
The basic structure of an HTML document.
</p>
<h1><u> Heading 1 </u></h1>

<hr>
<h1>Br </h1>
20
..
.
First line <br>

Next line <br>
--------------- <br>
------------- <br>
<br>
<h1>Order list </h1>

<ol>
<li>something </li>
<li>xxxxxxxxx </li>
</ol>
<ol>
<li type="1">xxxxxxxxxx</li>
<li type="a">xxxxxxxxxxxxxx</li>
<li type="A">xxxxxxxxxxxxxx</li>
<li type="i">xxxxxxxxxxxxxx</li>
<li type="I">xxxxxxxxxxxxxx</li>
<li >xxxxxxxxxxxxxx
<ol>
<li>xxxxxxxx</li>
<li>xxxxxxxxxxxxx
<ol>
<li type="a">xxxxxxxxxxxx</li>
<li type="a">xxxxxxxxxxxxx</li>
</ol>
</ol>
</li>
</li>
<li>xxxxxxx</li>
<li>xxxxxxxxxxx</li>
</ol>
<hr width=80% align=left>
..
.
21
<h1>Unordered list </h1>
<ul>
<li>something </li>
<li>xxxxxxxxx </li>
</ul>
<ul>
<li>xxxxxxxx</li>
<li type="circle">xxxxxxxxxxxxxxxx</li>
<li type="disc">xxxxxxxxxxxxxxxxxxx</li>
<li type="square">xxxxxxxxxxxx </li>
<li>xxxxxxxxxxxx
<ul>
<li>xxxxxxx</li>
<li>xxxxxxxxxx</li>
<li>xxxxxxxxxxx
<ul>
<li>xxxxxxxxxx</li>
<li>xxxxxxxxxxxx</li>
</ul>
</li>
<li>xxxxxxxxx</li>
</ul>
</li>
<li>xxxxxx</li>
</ul>
</body>
</html>
22
.
.
23
<Pre> Tag
<pre> tag
type
HTML .
<pre>
All Annual Champions
--------------------------------------------------------Year
Winner
Loser
--------------2000
Ravi
Ragu
1999
Karan
Robert
1998
Nila
Thana
1997
Mathy
Mayo
1996
Siva
Mayo
---------------------------------------------------------</pre>
24
25
<blockquote>
<blockguote>
. .
<p>
Here begins the quote
</p>
<blockquote>
<p>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The
quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox
jumps over the lazy dog.
quick
fox
quick
fox
</p>
<p>Professional Web designing 2002 - 2008.</p>
</blockquote>
<p>
And there ends the quote
</p>
26
27
(Character Formatting )
.
<b>
<u>
<i>
<strike>
<sub>
<sup>
28
Boldface type
Underlined text
Italics
Text that has a line through it
Subscript
Superscript
<Font > (Colors)

, Tag
.
size .
<font size=2>
This is small
</font>
<font size=5>
This is large
</font>
<p>
<font size=-3>
This is very small
</font>
<font size=+3>
This is very large
</font>
</p>
29
face .
<font face="Arial"> xxxxxxxxxxxxxxx </font>

<font face="Arial, Helvetica, sans-serif"> xxxxxxxxxxxxxxxx </font>
30
color .
<font color = red > .
<font color = #660011 > . RGB

. . RGB
Red, Green, Blue . 256
.
0 255 .
hexadecimal ( ) .

RGB R = 60, G = 182, B = 85 .
hexadecimal 60 hexadecimal 3C . 182
B6, 85 55 . color = #3CB655
.
31
<font color= #ff0000>xxxxxxxxxxxxxxx</font>

<font color=red>xxxxxxxxxxxxxxx</font>
<font color=#00ff00>xxxxxxxxxxxx</font>
<font color=green>xxxxxxxxxxx</font>
<font color=#0000ff>xxxxxxxxxxxxxxxx</font>
<font color=blue>xxxxxxxxxxxxx</font>
<body> tag text

( )
.
<body text=green>
<body text=#00ff00>
<body bgcolor=#00ffff>
32
:
(<body> </body> )
<basefont size=5 color=#006699>
.
33
(Images) <img>
.
HTML <img> Tag
. JPEG, GIF, PNG .
plug-in . GIF
.
-
(File Size) . File Size
.

.
.
800 x 600 (pixels) .
Screen Resolution (Monitor) .
34
Resolution 72 . Adobe PhotoShop

.
35
Save for Web . JPEG

(JPEG Quality) 60 .
36
: 468 350 (File Size) 480 kb

. , Save For Web JPEG Quality 60
(File Size) 23kb . .
37
bk 301
4x 003
38
4 x 003
bk 75
(Buttons) GIF
(Color full) JPEG .
.
300 x 100 JPEG 8.28 kb
300 x 100 GIF 2.31 kb
39
(Graphic Type )
(File Format )
(Photographs)
JPG
(Text with few colors)
(Small icons)
GIF
Anything with 256+ colors
40
GIF
JPG

<img> tag src
.
<img src=MyPicture.gif>
folder
.
Folder images Folder
.
<img src=images/MyPicture.gif>

.
41
42
43
.
.
www.google.com Logo_25wht.gif
.
<img src="http://www.google.com/logos/Logo_25wht.gif" >
(URL) .
44
<img> tag width, height, align, border, alt .

<img src=images/MyPicture.gif width=127 height=115>
<img src=images/MyPicture.gif width=127 height=115 border=4>
45
alt .
<img src=images/MyPicture.gif width=127 height=115 border=4 alt=This is my picture>
Mouse .
46
align .
<img src=images/MyPicture.gif width=127 height=115 border=2 align=left>
47
<img src=images/MyPicture.gif width=127 height=115 border=2 align=right>
48

<body> tag background
.
<body background=back.gif">
49
(Links)

(File)
.
<a> tag .
<a > tag href .
.
<a href = file Name > </a>
mypage.html
show my page
.
<a href = mypage.html > show my page </a>
50
:1) page1.html
.
2) .
3)
<a href = page1.html > click here </a> to show page 1.
4) mainpage.html .
5) mainpage.html .
,
51
click here (mouse)

.

page1.html .
page1.html
mainpage.html
.
52

.
myfile.exe ,
This is our software <a href = myfile.exe >Download here </a>
.
dialog box .
53
,
href .
<a href = http://www.google.com/ > Worlds #1 search engine </a> Google.
google.com .
.
<a href = http://www.opensourceshare.com/ > Open Source Downloads </a>
<a href = http://www.opensourceshare.com/GoogleDesktopBar-Setup.exe > Google Desktop
Bar </a>
54
<a > tag href target

,
.
target _blank, _parent, _self _top .
_blank
.
.
<a href = http://www.opensourceshare.com/ target = _blank > Open Source Downloads </a>
_parent
.
<a href = http://www.opensourceshare.com/ target = _parent > Open Source Downloads
</a>
_self .
_top Frame
. (Frame .)
55
Named Anchor
<a > tag
name

. Named
Anchor
.
.
<a name=top ></a>
top anchor
.
<a href="#top">Go to top</a>
.
56
index.html <a name=topic2></a> Anchor

.
<a href = path/index.html#topic2 >go to topic2 </a>

.
.
<a href = http://www.mypage.com/index.html#topic2 >My page topic2 </a>
57
E-Mail Links

.
<a href="mailto:info@mysite.com">Mail Me</a>
( Outlook
Express) to
.
.
58

.
(<img> tag .)
<a href="http://www.w3.org"><img src="valid-html401.gif" width="88" height="31"
border="0" /></a>
(mouse)
.

www.w3.org
.
59
Tables <table>
table .
, .
table
<table width="100%" border="1" >
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
60
<tr> row <td> cell .

<td> </td> tag cell
.
<table width="100%" border="1" >
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
<td>cell4</td>
</tr>
</table>
61
colspan, rowspan
cell .
.
<table width="400" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="3"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
62
cellspacing cell .
cellpadding cell .
width, height, bgcolor, background, border, bordercolor, align, valign .
.
<table width="400" border="1" cellpadding="0" cellspacing="4" bgcolor="#FFFFFF" bordercolor="#000000">
<tr>
<td colspan="2" bgcolor="#CCCCCC" align="center"><strong>Sample Text</strong></td>
</tr>
<tr>
<td rowspan="3" bgcolor="#0099FF" align="left" valign="top">
Sample Text<br />
Sample Text<br />
</td>
<td align="right">Sample Text</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
63
64
Frames
Frame
.
mypage2.html, mypage3.html
.
.
.
<html>
<head>
<title>Main Page</title>
</head>
<frameset rows="*" cols="251,*" framespacing="0" frameborder="no" border="1">
<frame src="mypage2.html" name="leftFrame" scrolling=no" noresize="noresize" id="leftFrame"
title="leftFrame" />
<frame src="mypage3.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<noframes><body>
</body>
</noframes></html>
65
66
.
.
.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>mainpage</title>
</head>
<frameset rows="*" cols="*,215" framespacing="0" frameborder="no" border="0">
<frameset rows="105,*" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="mypage.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"
title="topFrame" />
<frame src="http://www.opensourceshare.com/" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<frame src="mypage2.html" name="rightFrame" scrolling="yes" noresize="noresize" id="rightFrame"
title="rightFrame" />
</frameset>
<noframes><body>
</body>
</noframes>
</html>
67
68
Meta Tags
<head> </head> tag Meta

. ,
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

, Unicode

charset=utf-8

.
<META content=web designing, learning, Tamil" name=keywords>
Keyword . Search Engine .
<META content=This is Tamil learning system for web developing." name=description>

. Search Engine .
<META
<META
<META
<META
<META
<META
69
name="Author" content=" My Company " >

name="Creator" content=" My Company " >
name="Copyright" content="Copyright 2002 2008 My Company, All rights reserved." >
name="Publisher" content=" My Company " >
name="Owner" content=My Name" >
name="Language" content= EN >
Style Sheets - CSS
70
Style Sheets - CSS

. Style Sheet
.
HTML <h1> tag

, ,
Style Sheet Style Sheet
<h1> tag
.
Style Sheet .
.
1. .
<head> </head> tag <style> tag
.
Body <span>, <div> tag
.
1. .
extension .css
.
71

<html>
<head>
<title>Embedded Style Sheet Example</title>
<style type=text/css >
<!-H1 {font-size:20pt;color:red}
H2 {font-size:15pt;color:green}
H3 {font: 12pt "arial"}
p {font-size: 10pt; color: "#10e0ff"}
body { background-color: white }
-->
</style>
</head>
<body>
<h1> Embedded Style Sheet Example</h1>
<p>This is a paragraph - note that the size and colour is specified in the heading.</p>
</body>
</html>
72
file ,
H1 {font-size:20pt;color:red}
H2 {font-size:15pt;color:green}
H3 {font: 12pt "arial"}
p
{
font-size: 10pt; color: "#10e0ff
}
body { background-color: white }
notepad .css . file
.
73
74
75

Web Designing Pro

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Designing Pro

Uploaded by

Copyright:

Available Formats

Professional Web Development

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

Hypertext Markup Language

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

HTML Note pad Text Editor .

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

<Title>Sample HTML Document</title>

This is my first html page...

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

2. Note pad file menu Save As Dialog Box

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

<title> </title> tag "Sample HTML Document"

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

<p> paragraph </p>

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

<h1>, <h2>, <h3>,.. Tags

<h1> Heading 1 </h1>

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

<hr /> Tag

<h1> Heading 1 </h1>

<hr width = "200px" align = "right" color = "red" size=4>

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

<Br /> Tag

First line <br />

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

<b>First line </b><br>

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

<em>First line </em><br>

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

<u>First line </u><br>

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

Order list <ol>

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

Unordered list <ul>

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

Copyrights 2002 2008 www.valaimanai.com, All rights

<< Back :: Home :: Next >>

<Title>Sample HTML Document 2</title>

This is my first html page... <br><br>

<h1><u> Heading 1 </u></h1>

Copyrights 2002 2008 www.valaimanai.com, All rights

First line <br>

<h1>Order list </h1>