HTMLအေၾကာင္းကိုေလ႔လာၾကမယ္

Page 1
HTML By Saturngod
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
notepad++ HTML web site
web programming PHP,
ASP.NET , JSP , Ruy On Rail
Chapter 1: Starting to Creat and Edit Webpage

Notepad
. Windows Key + R Run Dailog Box notepad
OK notepad
http://wwww.saturngod.net
Page 2
HTML By Saturngod
. 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 3
HTML By Saturngod
. 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
Page 4
HTML By Saturngod
code page save
Internet Web site view > source save
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>
Page 5
HTML By Saturngod
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
</body>
</html>
html
page bold
italic underline
Line Break
HTML <br/> close tag <br/>
<br>
<html>
<head>
</head>
<body>
First Line<br/>Second Line<br>Third Line
</body>
</html>
Bold,
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>
Page 6
HTML By Saturngod
Bold underline italic tag

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

<u><i><b>This is bold italic </b></i></u>
<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
Page 7
HTML By Saturngod
<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>
<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>
Page 8
HTML By Saturngod
<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/>
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 9
HTML By Saturngod
code
run
background
color
Table color 16
Silver
Gray
Maroon
Green
Navy
Purple
Olive
Teal
White
Black
Red
Lime
Blue
Magenta
Yellow
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>
Page 10
HTML By Saturngod
Attribute color attribute tag

tag <hr> attribute
Hr Attribute
tag attribute tag attribute
hr
<html>
<head>
</head>
<body bgcolor=#e0e0e0>
Default HR
Page 11
HTML By Saturngod
<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
<html>
<head>
</head>
<body>
<h3>Unorder List</h3>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>
Page 12
HTML By Saturngod
<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">
<li>First Item</li>
<li>Third Item</li>
</ul>
</body>
</html>
Unorder list disc, square, circle default disc
Ordered List
<html>
Page 13
HTML By Saturngod
<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">
<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>
Page 14
HTML By Saturngod
</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
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>
Page 15
HTML By Saturngod
Defination List List defination term defination dl

defination term <dt> defination <dd> list
tag </dl>
...
HTML
Page 16
HTML By Saturngod
Chapter 2: 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
<html>
<body>
Page 17
HTML By Saturngod
<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>
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
Page 18
HTML By Saturngod
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>
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>
H2
<sup></sup>
22
<tt></tt>
typing font typing
<u></u>
underline
Page 19
HTML By Saturngod
Link Link Web Page Page

Link
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>
Page 20
HTML By Saturngod
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
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="
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
Page 21
HTML By Saturngod
../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

site site
structure Link
.. page
Image
web page page
...
<html>
<head>
</head>
<body>
<img src="Apple-logo.jpg"> Apple Logo</body>
</html>
Page 22
HTML By Saturngod
) 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 alt search engine image search
search engine
Image attribute text align
text align img code align attribute
Align
top
align
bottom
default
middle
left
page
right
Left
Page 23
HTML By Saturngod
: img top
: img bottom
: img middle
: img left
: img right
Image
size width height attribute

Photo size
Page 24
HTML By Saturngod
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

: border image
: border
link page
sample
web page
table table frame

Chapter 3: 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
Page 25
HTML By Saturngod
Table HTML web site
Gallery Page
Page Layout CSS Table CSS CSS
Cascading Style Sheets CSS Web Page
HTML HTML
CSS
site
HTML
Page 26
HTML By Saturngod
table cell cell

... code
<html>
<head>
<title>Example Table</title>
</head>
<body>
<table>
<tr> 
<td> 
Row
</td>
<td>
Row
</td>
</tr>
</table>
</body>
Page 27
HTML By Saturngod
</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> 
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr> 
<td> 
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
Page 28
HTML By Saturngod
</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>
</tr>
</table>
</body>
</html>
...
table width table width % pixel

table width <td> width % Pixel
Page 29
HTML By Saturngod
% 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>
</tr>
</table>
</body>
</html>
width 100% browser table

first row
<td width="30px">1</td>
<td>2</td>
Page 30
HTML By Saturngod
<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>
</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>
Page 31
HTML By Saturngod
</table>
</body>
</html>
.. table border
border attribute
Border,
Bor
der, 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" >
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
HTML By Saturngod
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>
column merge row column merge
code
<html>
<head>
Page 33
HTML By Saturngod
</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
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
Page 34
HTML By Saturngod
<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>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">
List Of Adboe Software
</td>
Page 35
HTML By Saturngod
</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>
code List Of Adboe Sofware Column merge

Column merge column <td>
Column Merge Row Merge
Row Merge column merge code
<html>
<head>
Page 36
HTML By Saturngod
</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

column Column
First Column First Column Column
example
<html>
<head>
</head>
<body>
<table border="1">
<tr>
Page 37
HTML By Saturngod
<td>
Row1 , Cell1
</td>
<td>
Row1 , Cell2
</td>
<td>
Row1 , Cell3
</td>
</tr>
<tr>
<td rowspan="2">
Left
</td>
<td>
Center
</td>
<td rowspan="2">
Right
</td>
</tr>
<tr>
<td> Cell 1</td>
</tr>
</table>
</body>
</html>
example row span Left Right row

row column <td>
Appearnce
Table background color border
cell background
<html>
<head>
</head>
<body>
Page 38
HTML By Saturngod
<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>
</table>
</body>
</html>
bgcolor background background

font
color
bg
color
CSS
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
CSS
Page 39
HTML By Saturngod
</td>
<td bgcolor="#EABCDF">
Hex Color
</td>
</tr>
<tr bgcolor="#FF6699">
<td>
a
</td>
<td>
b
</td>
<td>
c
</td>
</tr>
</table>
</body>
</html>
<tr bgcolor="#FF6699"> row

table table HTML
Dreamweaver software table table
merge dreamweaver dreamweaver
HTML
frame
Frame
Frame HTML Page
Page 40
HTML By Saturngod
Frame
Page
Frame
AJAX Frame
menu menu
page Name .. frame
Frame1.html
<html>
<head>
</head>
<body>
This is frame 1
</body>
</html>
Frame2.html
<html>
<head>
</head>
This is frame 2
</html>
index.html
Page 41
HTML By Saturngod
<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

<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 ..
Page 42
HTML By Saturngod
Scrolling scrollbar Yes noresize frame resize
frame resize column
index.html
<html>
<head>
</head>
<frameset cols="20%,30%,*">
<frame src="frame1.html" />
</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%,*">
Page 43
HTML By Saturngod
</frameset>
<noframes>
</noframes>
</html>
frameset cols rows cols rows
frame rows column
<html>
<head>
</head>
<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0">
<frame src="frame2.html" name="rightFrame" scrolling="NO" noresize>
</frameset>
</frameset>
<noframes>
</noframes>
</html>
Page 44
HTML By Saturngod
<frameset> <frameset>
</frameset>
rows cols rows columns

<frame> rows colums code
<html>
<head>
</head>
</frameset>
Page 45
HTML By Saturngod

</frameset>
<noframes>
</noframes>
</html>
rows rows frameset columns

rows rows cols cols rows

Page 46
HTML By Saturngod
Link And Frame Frame Link
frame Web
HTML ..
Link And Frame
Link Page
frame frame Page
frame index.html
<html>
<head>
<title>Menu</title>
</head>
<frameset cols="100,*">
<frame src="menu.html" id="menu">
Page 47
HTML By Saturngod
<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>
</html>
link target index.html name="main"

frame download frame download.html
page Home home.html frame

Page 48
HTML By Saturngod
link page
frame frame addressbar
target="_parent"
remove frame
header.html
<html>
<body>
Frame Example
<a href="main.html" target="_parent">Remove Frame</a>
</body>
</html>
main.html
<html>
<body>
Main Page
</body>
</html>
frame.html
<html>
<frameset rows="100,*">
<frame src="header.html"></frame>
<frame src="main.html"></frame>
</frameset>
</html>
frame.html
remove
run
frame
frame
frame
frame
page
link
target="_parent" page
frame
page frame
iframe
Page 49
HTML By Saturngod
menu.html page home.html Home Page

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
web page
form
Page 50
HTML By Saturngod
Chapter 4: HTML form

Form
Form comment forum search
google text box button
form HTML form design
action action ASP, PHP, JSP
server site javascript
javascript form
<html>
<head>
<title>
</title>
</head>
<body>
<form action="action.php" method=post name="frm">
</form>
</body>
</html>
form tag <form> </form> action form
submit page page server side
method get post
Input Tag
input tag textbox, button, checkbox, password, submit
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<form name="frm" action="action.php">
<input type=text name="txt" value="this is value" />
</form>
</body>
</html>
value
Page 51
HTML By Saturngod
type
text
textbox
password
password box ( **** )
button
button
submit
submit button submit form action

page
file
upload file dialog box
reset
form data clear
radio
radio button (option button)

checkbox
checkbox

example
<html>
<head>
<title>Form Sample</title>
</head>
<body>
Name:
<input type="text" name="txt" value="" />
Phone:
<input type="text" name="txt" value="" /><br />
Service:<br />
<input type="checkbox" name="chk" value="yearly" /> Yearly<br />
<input type="checkbox" name="chk" value="monthly" /> Monthly<br />
<input type="checkbox" name="chk" value="daily" /> Daily<br />
Pay With:<br />
<input type="radio" name="opt" value="paypal" /> Paypal<br />
<input type="radio" name="opt" value="master" /> Master<br />
<input type="radio" name="opt" value="visa" /> Visa<br />
<input type="submit" value="sumbit" />
<input type="reset" value="Clear" />
</form>
</body>
</html>
Page 52
HTML By Saturngod
checkbox radio button name

group name group

Fieldset Tag
code
<html>
<head>
</head>
<body>
Name:
Phone:
<fieldset>
<legend>Service</legend>
<input type="checkbox" name="chk" value="yearly" /> Yearly
<input type="checkbox" name="chk" value="monthly" /> Monthly
<input type="checkbox" name="chk" value="daily" /> Daily
</fieldset>
<fieldset>
<legend>Pay method</legend>
<input type="radio" name="opt" value="paypal" /> Paypal
<input type="radio" name="opt" value="master" /> Master
<input type="radio" name="opt" value="visa" /> Visa
Page 53
HTML By Saturngod
</fieldset>
</form>
</body>
</html>
fieldset fieldset legend tag <fieldset>

</fieldset> <legend>
Combobox And Listbox

HTML combobox listbox
register
date combo box
<html>
<head>
</head>
<body>
<select name="combo">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</form>
Page 54
HTML By Saturngod
</body>
</html>
default select option selected 4

default select
<option selected>4</option>
Listbox select size attribute code

<html>
<head>
</head>
<body>
<select name="combo" size=5>
<option>1</option>
<option >2</option>
<option>3</option>
<option selected>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</form>
</body>
</html>
code
<select name="combo" size=5>

Page 55
HTML By Saturngod
<html>
<head>
</head>
<body>
Name:
Phone:
<fieldset>
<legend>Service</legend>
<input type="checkbox" name="chk" value="yearly" /> Yearly
<input type="checkbox" name="chk" value="monthly" /> Monthly
<input type="checkbox" name="chk" value="daily" /> Daily
</fieldset>
<fieldset>
<legend>Pay method</legend>
<input type="radio" name="opt" value="paypal" /> Paypal
<input type="radio" name="opt" value="master" /> Master
<input type="radio" name="opt" value="visa" /> Visa
</fieldset>
Month :
<select name="date">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
</select>
<br />
Category(press Ctrl for Multiselect):<br />
<select name="cat" multiple>
<option value="personal">Free For Personal Use</option>
<option value="free">Free For commercial</option>
<option value="commercial">commercial </option>
</select>
</form>
</body>
</html>
Page 56
HTML By Saturngod
code code listbox multiselect

multiple attribute
<select name="cat" multiple>
multiple
Page 57
HTML By Saturngod
HTML code

".. code "

CSS
HTML
Dreamweaver Javascript photoshop

Flash
Webdesigner
web
developer
CSS , Javascript, Phtoshop, Flash web

programming .NET ASP.NET Java JSP
php technology Ruby On
Rails python HTML

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

Page 1

Chapter 1: Starting to Creat and Edit Webpage

. Notepad Format word warp check Word Warp

HTML HTML html code Head Tag Head Tag

. Save file first.html file

File address bar

View > Source Notepad HTML

code notepad .. run Head Tag h1 h6

Bold underline italic tag

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

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

<pre> font font

code run <hr> line

color code RGB color Hex code

Attribute color attribute tag

size noshade shade color

<ul> unorder list <li> list list <li>1</li> <li>1</li> <li>2</li>

Unorder list disc, square, circle default disc

<ol> order list code run attribute

Order List Unorder List type code order

<ol type="A" start=4> D HTML list web page

Defination List List defination term defination dl

Chapter 2: Creating Web Page with Apperance and Link

<marquee scrolldelay="1000">I'm moving</marquee>

marquee back color #009933

<font> </font> zawgyi-one font face="font name"

font tag attribute

<font face="Zawgyi-one" color="#006699">Zawgyi Font </font>

font size=3 size

text formatting tags

code enter tab

typing font typing

Link Link Web Page Page

Page Link And Image Link

code

comment

link file download

<a href="file.zip>Download</a> .. Link path

Path For Link

download file image file

image extension image extension jpg gif png image

width height attribute size width

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

size width height attribute

Chapter 3: Table and Frame

div CSS page HTML

table cell cell

Example row column table

... example row column

width 100% browser table

column width 30px row row

column width % colum width

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

border cell padding cell padding cell spacing

cellpadding table border cellpadding

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

cellspacing cell border

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

... cell merge

<tr> <td> cell

merge column <td>

code <td colspan="2"> Cell

column column <td>

code List Of Adboe Sofware Column merge