HTML

HTML For Web Design Suit HTML
HTML
Internet Internet Homepage Internet
Internet
Network Information Web Page
Web Page HTML Web Page Web Browser Software Web Broswer Software Internet Explorer Firefox
HTML History
1989 Tim Berners-Lee Rober Calliau Research Documents
Berners-Lee browser Tag
tage Hyper-Link
document tag Berners-Lee Hyber Text
Markup Language HTML
Tag
Tag Text HTML code
<b>This is bold </b> web browser bold <b> </b>
tag tag /
HTML Editor
HTML Editor IDE Dreamweaver
HTML Website Dreamweaver HTML
code website
website template HTML code
Notepad HTML web site
web programming PHP, ASP.NET , JSP ,
Ruy On Rail
Page 1
HTML
1.Starting To Creat and Edit Webpage
Notepad
. Windows Key + R Run Dailog Box notepad
OK notepad
. Notepad Format
word warp check
Word Warp
Notepad

HTML
. Notepad
<html>

<head>
<title>This is title</title>
</head>
<body>
This is body
</body>
</html>
HTML HTML html code
Head Tag Head Tag Title
Title Browser bar Body

Page 2
. save Save Dialog box filetype All file file

name firstrun.html firstrun .html file extension
HTML page .html .htm browser
. Save file first.html file double click
page
File address bar title
tag This is tile Windos Title bar
Tab Title bar Body tag This is body

IE7
Page > View Source Notepad HTML
IE 6
View > Source Notepad HTML
code page save
Internet Web site view > source save
Page 3
Header Tag
notepad
<html>

<head>
<title>Example Of Header</title>
</head>
<body>
<h1>This is Header</h1>
This is normal text
</body>
</html>
code notepad .. run Head Tag h1
h6 h6
notepad save
<html>

<head>
<title>Example</title>
</head>
<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
</body>
</html>
html
page bold
italic underline
Page 4
Line Break
HTML <br/> close tag <br/> <br>
<html>

<head>
</head>
<body>
First Line<br/>Second Line<br>Third Line
</body>
</html>
Bold Italic Underline Tag

bold <b> italic <i> Underline
<u> notepad run
<html>
<body>

<b>This is bold</b> <br/>
<i>This is italic</i> <br/>
<u>This is underline</u> <br/>
</body>
</html>
Bold underline italic tag
tag
<i><b>This is bold italic </b></i>
<u><i><b>This is bold italic </b></i></u>

Page 5
<i> <b><i></b></i>
<b><i> This is bold italic </i></b>

tag structure
code
Pre Tag
Enter
dream weaver HTML
<pre> font font
<pre> tab
<html>

<head>
</head>
<body>
<pre>Pre Tag, Now Enter
Now Tab
Tab
</pre>

</body>
</html>
Paragraph Tag
paragraph <p>
tag
<html>
<head>

</head>
<body>

<h1>About Notepad</h1>
<p>Notepad is a basic text editing program and it is most commonly used to view or edit text files. A
Page 6
text file is a file type typically identified by the .txt file name extension.</p>

<b> How do I change the font style and size?</b>
<p>Changes to the font style and size affect all the text in the document.<br/>
Click the Format menu, and then click Font.<br/>
Make your selections in the Font, Font style, and Size boxes.<br/>
An example of how your font will look appears under Sample.<br/>
When you are finished making font selections, click OK.<br></p>
</body>
</html>
Horizonal Line
horizonal <hr> close tag
<html>
<head>

</head>
<body>

<h1>About Notepad</h1>
<p>Notepad is a basic text editing program and it is most commonly used to view or edit text files. A
text file is a file type typically identified by the .txt file name extension. </p>

<hr>
<h1> How do I change the font style and size?</h1>
<p>Changes to the font style and size affect all the text in the document.<br/>
Page 7
Click the Format menu, and then click Font.<br/>
Make your selections in the Font, Font style, and Size boxes.<br/>
An example of how your font will look appears under Sample.<br/>
When you are finished making font selections, click OK.<br></p>
</body>
</html>
code run <hr> line
Attribue
tag attribute attribute tag
properties tag attribute body color attribute

Body Color
<html>
<head>
</head>
<body bgcolor=silver>
Body BGCOLOR
</body>
</html>
Page 8
code run background color

Table color 16
Silver
White
Gray
Black
Maroon
Red
Green
Lime
Navy
Blue
Purple
Magenta
Olive
Yellow
Teal
Cyan
color code RGB color Hex

code number #FF0000

color photoshop
photoshop color
double click color dialog box color
hex code copy color #

<html>
<head>
</head>
<body bgcolor=#e5bb2c>
Body BGCOLOR Hex code
</body>
</html>
attribute color attribute

tag tag <hr>
Page 9
attribute
Hr Attribute
tag attribute tag attribute
hr
<html>
<head>
</head>
<body bgcolor=#e0e0e0>
Default HR
<hr>
Hr with size=1
<hr size=1>
Hr with size=5
<hr size=5>
Hr with size=10
<hr size=10>
Hr with size=10 and noshade
<hr size=10 noshade>
Hr with size=5 and color
<hr size=5 color=#D60000>
</body>
</html>
size noshade shade color

List
List order list unorder list list list
defination list unorder list
Unorder list
Page 10
<html>
<head>
</head>
<body>
<h3>Unorder List</h3>
<ul>

<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>
<ul> unorder list <li> list list <li>1</li> <li>1</li> <li>2</li>
code run list List
attribute
<html>
<body>
<h3>Unorder List</h3>
<h5>Disc</h5>
<ul type="disc">

<li>First Item</li>
<li>Third Item</li>
</ul>
<h5>Square</h5>
<ul type="square">

<li>First Item</li>
<li>Third Item</li>
</ul>
<h5>Circle</h5>
<ul type="circle">
Page 11
<li>First Item</li>
<li>Third Item</li>
</ul>
</body>
</html>
unorder list disc, square, circle default disc
Ordered List
<html>
<head>
</head>
<body>
<h3>Ordered List</h3>
<ol>

<li>First Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
<ol> order list code run
attribute
<html>
<head>
</head>
<body>
<h3>Ordered List</h3>
<ol type="1">

Page 12
<li>First Item</li>
<li>Third Item</li>
</ol>
<h5>Type A</h5>
<ol type="A">

<li>First Item</li>
<li>Third Item</li>
</ol>
<h5>Type a</h5>
<ol type="a">

<li>First Item</li>
<li>Third Item</li>
</ol>
<h5>Type a</h5>
<ol type="I">

<li>First Item</li>
<li>Third Item</li>
</ol>
<h5>Type i</h5>
<ol type="i">

<li>First Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
Order List Unorder List type
code order list unorder list

start attribute
<ol type="A" start=4> D HTML list web page
list definition list
Page 13
Definition List

<html>
<head><title>Example</title></head>
<body>
<h3>Definition List</h3>

<dl>
<dt>HTML
<dd>Language used to develop Web Pages
<dt>Image
<dd>Any graphic such as an icon,bullet, line, photo , or illustration
</dl>
</body>
</html>
Defination List List defination term defination dl

defination term <dt> defination <dd> list
tag </dl>
... HTML

Page 14
HTML For Web Design Suit Creating Web Page With Apperance And Link
Creating Web Page With Apperance And Link

bold,italic,underline font
font font size color
page link
<center>
Optional Tag
Move To Center
center
<html>
<body>

<center>
This is center
</center>
</body>
</html>
This is center
<html>
<body>
<h1 align="justify">Test</h1>
</body>
</html>
code header
Marquee
marquee
Page 15
<html>
<body>
<marquee>Im moving</marquee>
</body>
</html>
code
Marquee attribute
Attribute Name
Properties
Descripton
behavior
alternate

<marquee behavior="alternate">I'm moving</marquee>
scroll
default value

<marquee behavior="scroll">I'm moving</marquee>
slide

<marquee behavior="slide">I'm moving</marquee>
direction
left
default value
<marquee direction="left" >I'm moving</marquee>
right

<marquee direction="right" >I'm moving</marquee>
up

<marquee direction="up" >I'm moving</marquee>
down

<marquee direction="down" >I'm moving</marquee>
loop
[number]
marquee number

<marquee loop="1" >I'm moving</marquee>
scrollamount
[number]
pixel

<marquee scrollamount="10">I'm moving</marquee>
Page 16
scrolldelay
[number]
millisecond
1000 1 second

<marquee scrolldelay="1000">I'm moving</marquee>
bgcolor
[hex code] OR
marquee back color #009933
[Color Name]
background color

<marquee bgcolor="#009933" >I'm moving</marquee>
marquee
font
Font
Font HTML Web Page font font tag

<html>
<body>
<font face="Zawgyi-one">Zawgyi Font </font>
</body>
</html>
<font> </font> zawgyi-one font face="font name"
font tag attribute

Name
Properties
Description
color
[hex code] OR
color
[color name]

<font face="Zawgyi-one" color="#006699">Zawgyi Font
</font>
Page 17
size
[number]
font size=3 size

size=4 7 1 7
3 +1 +6
+2 3 5
-1 -6 -1 3 2

<font face="Zawgyi-one" size="5">Zawgyi Font </font>
<font face="Zawgyi-one" size="+2">Zawgyi Font </font>
<font face="Zawgyi-one" size="-2">Zawgyi Font </font>
text formatting tags

Tag
Description
<b></b>
font blod
<big></big>
bold
<blockquote></blockquote>
tab

<i></i>
italic
<pre></pre>
code enter tab
<small></small>
<strike></strike>
<sub></sub>
<sup></sup>
H2
22
<tt></tt>
typing font typing
<u></u>
underline
Link Link Web Page Page

Link
Page 18
Page Link And Image Link

Page Link page page example
Home Page Gallery Page Go To Home
Gallery Home Page Home Home page
File
index.html gallery.html C:\example\index.html C:\example\gallery.html

Index.html
<html>
<head><title>Example</title>
<body>

<a href="gallery.html">Gallery</a>
</body>
</html>
Gallery.html
<html>
<head><title>Example</title>
<body>

<a href="index.html">Home</a>
</body>
</html>
code 
home page home.html index.html
 comment 

home page index.html web page page index.html
Page 19
default.html www.example.com page

www.example.com/index.html index.html
Home Page index.html default.html
.. Link link <a href="address">Name</a>
address page Name
Link
vistied click
body vlink attribute link
attribute <body vlink="green" link="green"> link color
link file download
link address file
<a href="file.zip>Download</a> .. Link path

Path For Link

Path <a href=" path link">Path</a>
./file.html OR file.html

C:\example\index.html
C:\example\gallery.html ./
directory
./download/download.html OR download/download.html
folder folder
../file.html
folder up
C:\example\download\index.html C:\example\
gallery.html download
folder file
../../file.html ../
folder directory up
http://www.mysteryzillion.com
website
./download/file.zip OR download/file.zip
download file image file

image
Page 20
site
site structure Link
.. page
Image
web page page
...
<html>
<head>

</head>
<body>

<img src="Apple-logo.jpg"> Apple Logo</body>
</html>
(
image image
extension image extension jpg gif png image size

<html>
<head>

</head>
<body>

<img src="Apple-logo.jpg" width=80px height=80px> Apple Logo</body>
</html>
width height attribute size width
height size
<img src="Apple-logo.jpg" width=80px height=80px alt="Apple Logo"> Apple Logo
alt Mouse
tool tip
Page 21
Image attribute text align

text align img code align attribute
Align
top
align
bottom
default
middle
left
page
right
Left
: img top
: img bottom
: img middle
: img left
Page 22
: img right
image

size
width height attribute
Photo
size click size page
click
<html>
<head>

</head>
<body>

<a href="fullsize.jpg"> 

<img src="smallsize.jpg" width=80px height=80px border=0>
</a>
</body>
</html>
code border href image border
Link
Page 23
: border image
: border
link page
sample
web page
table table frame

Page 24
HTML For Web Design Suit Table And Frame
Table And Frame

Table web page table web
page frame professional stylesheet
div CSS page HTML
CSS Advance table
web page table
Table
Table
roll column cell

Table HTML web site
Gallery Page
Page Layout CSS Table CSS
CSS Cascading Style Sheets CSS
Web Page HTML
HTML CSS site
HTML
Page 25
table cell
cell .. code
<head>
<title>Example Table</title>
</head>
<body>
<table>
<tr> 

<td> 

Row
</td>
<td>
Row
</td>
</tr>
</table>
Page 26
</body>
</html>
Table
<table> </table>
Row <tr></tr> row
<tr></tr><tr></tr>
column <td></td> <td></td> <tr> </tr>
column <tr><td></td><td></tr> column
... row column
row <tr> </tr> column <td></td> row
row table
<table>
<tr> 

<td> 
</td>
<td>
</td>
<td>
</td>
</tr>
<tr> 

<td> 
</td>
<td>
</td>
<td>
Page 27
</td>
</tr>
</table>
Example row column table table
table
... example row
column table
row <tr></tr> column <tr> </tr> <td></td>
code
<html>

<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
Page 28
</table>
</body>
</html>
</tr>
... table width table width % pixel
table width <td> width % Pixel

% broswer width pixel
% broswer pixel browser ..
<html>

<body>
<table width="100%">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<td>6</td>
<td>7</td>
<td>8</td>
Page 29
</table>
</body>
</html>
</tr>
width 100% browser table

first row

<td width="30px">1</td>
<td>2</td>
<td>3</td>
</tr>
column width 30px row

row column px %
column

<td width="45%">1</td>
</tr>
column width % colum width

... table time table
<html>

<body>


<td>Date</td>
<td>Time</td>
<td>Subject</td>
</tr>
<td>Oct 07</td>
<td>1:00 PM - 3:00 PM</td>
<td>Hardware</td>

Page 30
</tr>
<td>Oct 08</td>
<td>1:00 PM - 3:00 PM</td>
<td>Software Install</td>
</tr>
<tr>
<td>Oct 08</td>
<td>1:00 PM - 3:00 PM</td>
<td>Windows Install</td>
</tr>
</table>
</body>
</html>
.. table border
border attribute
Border , Cellpadding, Cellspacing

<table width="100%" border="1"> border
border
border
<table width="100%" border="1" bordercolordark="red" bordercolorlight="#FF3300">
bordercolordark bordercolorlight bordercolor
<table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
Page 31
border cell padding cell padding cell spacing
cellpadding table border cellpadding

cellpadding 30 border
<table width="100%" border="1" cellpadding="30" bordercolor="#0066CC" >
Page 32
cellspacing cell border

cellspacing 0
<table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
... cell
merge table

Cell Merge
Cell Merge table Cell Merge Cell
Cell Cell Merge table row
<tr> <tr> <td> <tr> <td> cell
merge column <td>
column cell <td>
Page 33
column merge row column merge

code
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>

<td colspan="2">
Cell 1
</td>
<td>
Cell 3
</td>
</tr>
</table>
</body>
</html>
code <td colspan="2"> Cell
cell <td colspan="3"> code
Page 34

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>

<td colspan="3">
Cell 1
</td>
</tr>
</table>
</body>
</html>
column column <td>
... example
<html>
<head>
Page 35
</head>
<body>
<table border="1">
<tr>
<td colspan="3">
List Of Adboe Software
</td>
</tr>
<tr>

<td>
Adobe Acrobat
</td>
<td>
Adobe Dreamweaver
</td>
<td>
Adboe Flash
</td>
</tr>
<tr>

<td>
Adobe InDesign
</td>
<td>
Adobe Photoshop
</td>
<td>
Adboe Bridge
</td>
</tr>
</table>
</body>
</html>
Page 36
code List Of Adboe Sofware Column merge

Column merge column
<td> Column
Merge Row Merge
Row Merge column merge code
<html>
<head>
</head>
<body>
<table border="1">
<tr>

<td rowspan="2">
Cell Left
</td>
<td>
Cell 2
</td>
</tr>
<tr>
<td>
Cell 3
</td>
</tr>
</table>
</body>
</html>
Column <td rowspan="2"> Column Row
Page 37
column
Column First Column First
Column Column
example
<html>
<head>

</head>
<body>
<table border="1">

<tr>
<td>
</td>
<td>
</td>
<td>
</tr>
<tr>
Row1 , Cell1
Row1 , Cell2
Row1 , Cell3
</td>
<td rowspan="2">
</td>
<td>
Left
Center
</td>
<td rowspan="2">
</tr>
<tr>

Page 38
</tr>
Right
</td>
<td> Cell 1</td>
</table>
</body>
</html>
example row span Left Right row
row column <td>
Appearnce
Table background color border
cell background
<html>
<head>
</head>
<body>
<table border="1">

<tr>
<td bgcolor="blue">
<font color="#FFFFFF">BLUE</font>
</td>
<td bgcolor="red">
Red
</td>
<td bgcolor="#EABCDF">
</tr>

</table>
</body>
Page 39
</td>
Hex Color
</html>
bgcolor background
background
font color
CSS CSS
bg color
row <tr> bgcolor
attribute
<html>
<head>
</head>
<body>
<table border="1">

<tr>
<td bgcolor="blue">
<font color="#FFFFFF">BLUE</font>
</td>
<td bgcolor="red">
Red
</td>
<td bgcolor="#EABCDF">
Hex Color
</td>
</tr>
<tr bgcolor="#FF6699">

<td>
a
</td>
<td>
b
</td>
<td>
Page 40
c
</td>
</tr>

</table>
</body>
</html>
<tr bgcolor="#FF6699"> row
table table HTML
Dreamweaver software table
table merge dreamweaver dreamweaver
HTML
frame
Page 41
Frame
Frame HTML Page

Frame Page
Frame AJAX
Frame
menu menu page
Name .. frame
Frame1.html
<html>
<head>
</head>
<body>
This is frame 1
</body>
</html>
Frame2.html
Page 42
<html>
<head>
</head>
This is frame 2
</html>
index.html
<html >
<head>
</head>
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="frame1.html" name="leftFrame" scrolling="No" noresize="noresize"
id="leftFrame" />
<frame src="frame2.html" name="mainFrame" id="mainFrame" />
</frameset>
<noframes><body>
</body>
</noframes></html>
frame file index.html
Frame1 Frame2 frame1 frame2
index.html
<body>
frame Main Page Body
frameset
HTML frame
IDE
Dreamweaver frame

Page 43
<frameset> </frameset> cols column

column cols="80,*" column
80 px percentage cols="50%,*" 50%
frame 50% frameborder="no" frame
boder border="0" framespacing="0" border 0
frame spacing 0 column
<frame>
<frame src="frame1.html" name="leftFrame" scrolling="No" noresize="noresize" />
<frame src="frame2.html" name="mainFrame" id="mainFrame" />
src frame Link file
Name
.. scrolling scrollbar
Yes noresize frame resize
frame resize column
index.html
<html>
<head>
</head>
<frameset cols="20%,30%,*">
<frame src="frame1.html" />
Page 44
</frameset>
<noframes>Your Browser Dont Support Frame</noframes></html>
<noframes>
browser frame support frame support
browser Message browser support
.. code
<html>
<head>
</head>
<frameset rows="20%,30%,*">
</frameset>
<noframes><body>
</body>
</noframes></html>
frameser cols rows
cols rows
frame

rows column
<html>
<head>
</head>

<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0">

Page 45
<frame src="frame2.html" name="rightFrame" scrolling="NO"
noresize>

</frameset>

</frameset>
<noframes><body>
</body>
</noframes></html>
<frameset> <frameset>


<frame src="frame2.html" name="rightFrame" scrolling="NO"
noresize>

</frameset>
rows cols rows columns

<frame> rows colums
Page 46
code
<html>
<head>
</head>


<frame src="frame2.html" name="rightFrame" scrolling="NO" noresize>

</frameset>

</frameset>
<noframes><body>
</body>
</noframes></html>
rows rows frameset

columns rows rows cols
cols rows
Page 47
Link And Frame Frame

Link frame
Web HTML ..
Link And Frame
Link Page
frame frame
Page 48
Page frame index.html
<html>
<head>
<title>Menu</title>
</head>
<frameset cols="100,*">
<frame src="menu.html" id="menu">
<frame src="home.html" name="main">
</frameset>
<noframes></noframes>
</html>
.. name="main" menu frame
.. menu.html ...
<html>
<head>
<title>Menu</title>
</head>
<body>
<a href="home.html" target="main">Home</a><br>
<a href="download.html" target="main">Download</a><br>
<a href="link.html" target="main">Link</a><br>
</body>
Page 49
</html>
link target index.html name="main"
frame download frame download.html page Home home.html frame

menu.html page home.html Home Page

Page 50
news
<html>
<head>
<title>Menu</title>
</head>
<body>
<iframe src="home.html" width="500" height="200"></iframe>
</body>
</html>
code <iframe> src page width height
HTML
code

".. code
"

Page 51

HTML

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

HTML

Uploaded by

Copyright:

Available Formats

HTML For Web Design Suit HTML

HTML For Web Design Suit HTML

HTML For Web Design Suit HTML

. save Save Dialog box filetype All file file

HTML For Web Design Suit HTML

This is normal text

HTML For Web Design Suit HTML

First Line<br/>Second Line<br>Third Line

Bold Italic Underline Tag

<b>This is bold</b> <br/>

<i>This is italic</i> <br/>

<u>This is underline</u> <br/>

HTML For Web Design Suit HTML

<b><i> This is bold italic </i></b>

<pre>Pre Tag, Now Enter

HTML For Web Design Suit HTML

<b> How do I change the font style and size?</b>

Click the Format menu, and then click Font.<br/>

An example of how your font will look appears under Sample.<br/>

When you are finished making font selections, click OK.<br></p>

<h1> How do I change the font style and size?</h1>

HTML For Web Design Suit HTML

Click the Format menu, and then click Font.<br/>

An example of how your font will look appears under Sample.<br/>

When you are finished making font selections, click OK.<br></p>

HTML For Web Design Suit HTML

code run background color

color code RGB color Hex

attribute color attribute

HTML For Web Design Suit HTML

HTML For Web Design Suit HTML

HTML For Web Design Suit HTML

HTML For Web Design Suit HTML

HTML For Web Design Suit HTML

<dd>Language used to develop Web Pages

<dd>Any graphic such as an icon,bullet, line, photo , or illustration

Defination List List defination term defination dl

Creating Web Page With Apperance And Link

<marquee direction="left" >I'm moving</marquee>

marquee back color #009933

font tag attribute

font size=3 size

text formatting tags

code enter tab

typing font typing

Link Link Web Page Page

Page Link And Image Link

comment

default.html www.example.com page

Path For Link

download file image file

<img src="Apple-logo.jpg"> Apple Logo</body>

<img src="Apple-logo.jpg" width=80px height=80px> Apple Logo</body>

Image attribute text align

<a href="fullsize.jpg">

<img src="smallsize.jpg" width=80px height=80px border=0>

HTML For Web Design Suit Table And Frame

Table And Frame

roll column cell

HTML For Web Design Suit Table And Frame

<td>

HTML For Web Design Suit Table And Frame

<td>