Web Design HTML and CSS

Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Web Design
HTML and CSS

Web Page
World Wide Myanmar

Training Centre
(Myanmar) 12A/D1, Ground Floor, Thamine,
Yangon-Insein Road, Yangon, Myanmar.

HTML, CSS Web Programming
Ph: 95-01-652936
(Malaysia) Lot 25, 2nd Floor, Jalan Lebuh
Pudu, 50050 Kuala Lumpur, Malaysia.
Ph: 6-03-20260846
http://www.worldwidemyanmar.com
World Wide Myanmar Training Centre, Cyber Caf , Sales & Services

About
Author
Mr. Min Aung "PlanetCreator", BCSc (Bachelor's Computer Science) Yangon, Myanmar, HDSE
(Higher Diploma in Software Engineering), HDNE (Higher Diploma in Network Engineering), MCSE
(Microsoft Certified System Engineer), PCIP ( Professional Critical Infrastructure Protection) Malaysia, has
been part of the IT security industry for several years now. His published research covers exciting topics
such as cracking into embedded devices, web hacking, eavesdropping techniques, magstripes, and credit
card security.
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or
transmitted in any form or by any means, without the prior written permission of the publisher, except in
the case of brief quotations included in critical articles or reviews.
Your Feedback
If you wish to contact us, for whatever reason, please feel free to email us at
inquiry@worldwidemyanmar.com. We have a well-staffed email support system set up to track your
inquiries. Suggestions for improvement are especially welcome.
Editors Note
Website files can be edited with software as simple as Notepad
There are many free and paid software programs available to make editing files easier. This
software is of two types: WSYIWIG editors and HTML editors.
WSYIWIG (what you see is what you get) editors allow you to work with an HTML document in
its final display format. Although most modern editors have improved in this area, some have a tendency
to create messy HTML or interfere with existing HTML code in the document.
HTML editors are very helpful and are recommended. The most useful feature is colour-coding
of tags to separate them from the text. Examples:
Dreamweaver (http://www.adobe.com)
Arachnophilia (http://www.arachnoid.com)
Micrsoft Expression Web (http://www.microsoft.com)
Komodo Edit (http://www.activestate.com/komodo_edit/)
and many others; some are free, and some have a license fee.
In this tutorial, I want you all to do with simple Notepad Editor to improve your skill.
Page 2 of 197

Table of Contents
Cover ..
About ...
Table of Contents ..
Web Design Concepts ..
Doctypes .
HTML XHTML .
11
History of HTML .
13
HTML
14
Source Code .
17
HTML Colour .
18
Link ..
25
Absolute Paths .
25
Relative Paths ..
25
TAG ..
26
Comment ..
27
ELEMENTS ..
27
Attribute ..
28
Class Attribute .
28
ID Attribute ...
29
Style Attribute ..
30
Title Attribute ...
31
Building Web Page
32
HTML Editors
33
HTML Head Elements ..
34
<head> ..
34
<title> .
34
<base /> ..
35
<link /> .
35
<meta /> .
35
<script> ...
35
<style> ..
36
HTML Body Elements ....
36
Forms ..
36
<form> | <button> | <label> | <option> | <fieldset> | <legend> |
Page 3 of 197
<select> | <optgroup> | <textarea>

Input Type
button | radio | reset | checkbox | image | range | submit | file | password |

readonly | text
Tables ....
46
<table> | <caption> | <thead> | <tfoot> | <col> | <colgroup> | <tr> |

<th> | <td>
Texts .
55
Character Entities
Anchors ..
56
<a>
Name attribute
Style Sheets ..
58
<span> | <div>
Line Breaking ...
62
<br /> | <nobr>

List Elements .
63
<dl> | <ol> | <ul> | <menu> | <dir> | <li> | <dd> | <dt>

Multimedia .
68
<img> | <bgsound> | <sound> | <area> | <map> | <object>

Block Formatting ...
74
<address> | <Hx> | <p> | <blockquote> | <marquee> | <pre> | <center>

<multicol>
Character Formatting ..
<abbr> | <cite> | <font> | <q> | <spell> | <sup> | <b> | <code> |
84
<i> | <s> | <strike> | <tt> | <big> | <dfn> | <samp> | <strong> |

<u> | <blink> | <em> | <kbd> | <small> | <sub> | <var>
Embedded Funtionality ..
<embed> | <noembed> | <script> | <noscript> | <iframe> | <applet> |
94
<param>
Revision Control ...
<del> | <ins>
Ruby Elements ..
<ruby> | <rb> | <rt> | <rbc> | <rtc>
Frameset Elements ......
<frameset> ..
<frame> ....
<noframe> ...
HTML Exercise ..
Page 4 of 197
99
100
103
104
105
105
106
...~~~ CSS ~~~.
112
Introduction CSS .
112
Appling .
113
Internal CSS ....
113
External CSS ....
113
Inline CSS ...
114
Syntax . Structure ..
115
Value ....
115
Property ..
116
Selector ..
116
Class Selector ..
116
ID Selector ....
118
Code Format ....
119
Comment ...
120
Colors and Backgrounds ...
121
Font ....
130
Text ....
138
Link .....
143
Grouping of elements (class and id) ....
150
Grouping of elements (span and div) ...
153
The box model ...
156
Margin ....
159
Padding ....
160
Borders .....
161
Height and Width ...
166
Floating .....
167
Positioning of Elements ..
172
z-index (Layers) ....
177
Building Website with HTML + CSS ..
180
Page 5 of 197

Web Design Concepts
----->
HTML
CSS Web Programming

Programming Coding
Variables Code Tab Tab
Programmer
Comment
Variable p.center {text-align: center} p.test {textalign: center} CSS Coding Variable test id
class selector Value center Variable Assign
Variable
Captical & Small letter
Programming
Variable
file
Case Sensitive Error Syntax
Trace
Programmer

folder or file s
services.html service.html

(Project) Folder File
Folder
Folder Program File
Image Text
Page 6 of 197
Coding Programmer Skill
HTML & XHTML

HTML HTML XHTML
doctypes DTDs
Internet
Web Page Structure

HTML XHTML concepts

Doctypes
Doctypes Markup Lanuage Version
Web Browser Web Page Source
() Document Type Definition DTD
DTD Web Browser Markup
Page 7 of 197

Web
Page
Doctype
Web Editor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Doctype <!DOCTYPE
HTML ( XHTML HTML ) Document

HTML root element validation
PUBLIC Browser DTD resource

XHTML HTML
DTD
element
Document custom DTD validate

PUBLIC SYSTEM
HTML
XHTML
Public
Identifier
W3C
Public
DTD
Web Programming
Identifier
Language
(XHTML 1.0) Web Page content

Language English
EN
DOCTYPE SYSTEM Public Identifier


Page 8 of 197

URL(Uniform
Resources
Locator)
URL
DTD
Website DTD download

W3C doctypes
non-strict elements
# APPLET - Java applet
# BASEFONT - Base font change
# CENTER - Centered block
# DIR - Directory list
# FONT - Font change
# FRAME - Frame
# FRAMESET - Frameset
# IFRAME - Inline frame
# ISINDEX - Input prompt
# MENU - Menu list
# NOFRAMES - Frames alternate content
# S - Strike-through text
# U - Underlined text
Doctype
Description
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01 Strict allows the inclusion of structural and semantic
HTML 4.01//EN"
markup, but not presentational or deprecated elements such as
"http://www.w3.org/TR/html4/
strict.dtd">
font, framesets are not allowed.
HTML 4.01 Transitional allows the use of structural and semantic
HTML 4.01 Transitional//EN"
markup as well as presentational elements (such as ,
loose.dtd">
which are deprecated in Strict. Framesets are not allowed.
HTML 4.01 Frameset applies the same rules as HTML 4.01
HTML 4.01 Frameset//EN"
Transitional, but allows the use of frameset content.
frameset.dtd">
XHTML 1.0 Strict, like HTML4.01 Strict, allows the use of
XHTML 1.0 Strict//EN"
structural and semantic markup, but not presentational or
"http://www.w3.org/TR/xhtml1/DTD
xhtml1-strict.dtd">
Page 9 of 197
deprecated elements (such as font, framesets are not allowed.

Unlike HTML 4.01, the markup must be written as well-formed

XML.
XHTML 1.0 Transitional, like HTML4.01 Transitional, allows the
XHTML 1.0 Transitional//EN"
use of structural and semantic markup as well as presentational
"http://www.w3.org/TR/xhtml1/DTD
elements (such as, which are deprecated in Strict; framesets are
xhtml1-transitional.dtd">
not allowed. Unlike HTML 4.01, the markup must be written as

well-formed XML.
XHTML 1.0 Frameset XHTML 1.0 Transitional
XHTML 1.0 Frameset//EN"
frameset
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-frameset.dtd">
XHTML 1.1 XHTML 1.0 Strict
XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/
xhtml11.dtd">
Korean
XHTML
1.0
characters
Chinese,
Ruby
Japanese,
and
Module
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML
HTML 3.2 Final//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD
HTML
HTML 3.0//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD
HTML
HTML 2.0 Level 2//EN">
3.2
3.0
2.0
Doctype
Doctype
Doctype
Doctype Browser Web Page

Quirks Mode, Standard Mode, Almost Standard Mode
1990 Web Page Mode Browser Web
Web page
Browser IE 6,7 Quirks Mode IE Version 5.5
Browser Almost Standars Mode
Standard Mode Browser Document
Browser
Firefox, Safari Opera (Version 7.5 ) Almost Standars Mode CSS
Specification table cells
vertical
Fix Internet Explorer versios 6 7

Page 10 of 197
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
IE 6 Browser W3C Box Model calculations Standard Mode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Doctype W3C Method

Quirks Mode Standard Mode
HTML XHTML
HTML XHTML
The Most Important Differences:
* XHTML elements must be properly nested

* XHTML elements must always be closed
* XHTML elements must be in lowercase
* XHTML documents must have one root element
HTML tag
HTML
<b><i>This text is bold and italic</b></i>
<b> open tag </b> closing tag

HTML
XHTML
XHTML
<b><i>This text is bold and italic</i></b>
XHTML Proper Nested

XHTML
Nested
<ul>
<li>Coffee</li>
<li>Tea
Page 11 of 197

(X)
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
XHTML
<ul>
Nested
<li>Coffee</li>
()
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
XHTML Elements closing tag

XHTML
<p>This is a paragraph
Closed
<p>This is another paragraph
(X)
XHTML
<p>This is a paragraph</p>
Closed
<p>This is another paragraph</p>
()
Empty Elements XHTML
XHTML
A break: <br>
Empty
A horizontal rule: <hr>
Elements
An image: <img src="happy.gif" alt="Happy face">
(X)
XHTML
A break: <br />
Empty
A horizontal rule: <hr />
Elements
An image: <img src="happy.gif" alt="Happy face" />
()
Page 12 of 197
XHTML Elements Tag name Attribute lower case

HTML Elements
XHTML
<BODY>
Lowercase
<P>This is a paragraph</P>
(X)
</BODY>
XHTML
<body>
Lowercase
<p>This is a paragraph</p>
()
</body>
XHTML
Case
Sensitive
HTML
<P></p>

XHTML Root Element <HTML> Child Elements
XHTML
<html>
Root
<head> ... </head>
Element
<body> ... </body>

</html>
XHTML
<!DOCTYPE Doctype goes here>
Doctype
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>
<body>
<p>This is XHTML</p>
</body>
</html>
XHTML Doctype html <html xmlns="http://www.w3.org/1999/xhtml"> <html> tag

W3C validate
Page 13 of 197
XHTML HTML
..
History of HTML
European Organization for Nuclear Research (CERN) Tim
Berners-Lee 1989 1991 World Wide, Web Page
HTML (hypertext markup language), HTTP (HyperText Transfer Protocol)
URLs (Universal Resource Locators) Father of the Internet
Text tag browser
Hypertext tag <>
Markup TBL
CERN data systems engineer Robert Cailliau
HTML
HTML
Text Tag

HTML
HTML (HyperText Markup Language) HTML CSS

JavaScript Webserver browser Interpret
server side ASP, PHP
HTML Static HTML Dynamic HTML Static

.html Web Server Upload Internet
Static HTML Individual
Profile
Dynamic HTML
Webserver Update
Blogging, Ecommerce, Banking, News and Multimedia
Website
Page 14 of 197
structure
<HTML>
<HEAD>
<TITLE>HTML</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR><TD>Hello</TD></TR>
<TR><TD>World</TD></TR>
</TABLE>
</BODY>
</HTML>
HTML
HTML Web Programming CSS, JS, php
Page 15 of 197
Code (filename.php)
<?php
= PHP
echo "This PHP"
= CSS
?>
<html>
= JS
= HTML
<head>
<title>This is php,html,js</title>
<style>
P
{
text-align: center;
color: red;
font-family: arial
}
</style>
</head>
<body>
<br>
<p>
<script type="text/javascript">
document.write("This is my first JavaScript!");
</script>
</p>
</body>
</html>
Page 16 of 197

-filename.php

php
html,css,js,php
HTML Webpage Web Designer,

Web Developer Language
Source Code
HTML Code
HTML Client Side Source Code Browser Page
Source
Mozilla Firefox View Menu Page Source

Internet Explorer View Menu Source
( ) Ctrl + U Keyboard
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
Page 17 of 197
<head>
<title>Title goes here</title>
</head>
<body>
<p>This is XHTML</p>
</body>
</html>
HTML Colour
HTML, CSS Colour Colour Name Hex Colour (Hexadecimal Colour)

Colour Name - <body bgcolor=red>
background
Red
Colour
Code
# sign <body bgcolor=#ff0000>

CSS Colour color: rgb(255,205,188);
Colour
- aqua, black, blue, fuchsia,

gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
Colour Name HTML, CSS colour Hex Code

Red,
Green,
Blue
Hex Code #rrggbb
Hexadecimal
0-9, A-F - #FF0000
..
33
Web
Design
Color
Page 18 of 197
Hex Value
Red Green Blue
00
00
00
Red = #FF0000
Green = #00FF00
Blue = #0000FF
Cyan (blue and green) = #00FFFF
Magenta (red and blue) = #FF00FF
Yellow (red and green) = #FFFF00
Code
<html>
<head>
<title>HTML, CSS Colour by WWM</title>
</head>
<body>
<font color="#4B0082">This is Indigo Colour by World Wide Myanmar</font>
<br>
<font
color="#7B68EE">This
is
MediumSlateBlue
Colour
by
World
Wide
Myanmar</font>
<br>
<font
color="#FFFF00">This
is
Yellow,
by World Wide Myanmar</font>

</body>
</html>
Page 19 of 197
List Color Name Hex Code
Page 20 of 197
Color Name
HEX
Black
#000000
Navy
#000080
DarkBlue
#00008B
MediumBlue
#0000CD
Blue
#0000FF
DarkGreen
#006400
Green
#008000
Teal
#008080
DarkCyan
#008B8B
DeepSkyBlue
#00BFFF
DarkTurquoise
#00CED1
MediumSpringGreen
#00FA9A
Lime
#00FF00
SpringGreen
#00FF7F
Aqua
#00FFFF
Cyan
#00FFFF
MidnightBlue
#191970
DodgerBlue
#1E90FF
LightSeaGreen
#20B2AA
ForestGreen
#228B22
SeaGreen
#2E8B57
DarkSlateGray
#2F4F4F
LimeGreen
#32CD32
MediumSeaGreen
#3CB371
Turquoise
#40E0D0
RoyalBlue
#4169E1
SteelBlue
#4682B4
DarkSlateBlue
#483D8B
MediumTurquoise
#48D1CC
Indigo
#4B0082
DarkOliveGreen
#556B2F
CadetBlue
#5F9EA0
Color
Page 21 of 197
CornflowerBlue
#6495ED
MediumAquaMarine
#66CDAA
DimGray
#696969
SlateBlue
#6A5ACD
OliveDrab
#6B8E23
SlateGray
#708090
LightSlateGray
#778899
MediumSlateBlue
#7B68EE
LawnGreen
#7CFC00
Chartreuse
#7FFF00
Aquamarine
#7FFFD4
Maroon
#800000
Purple
#800080
Olive
#808000
Gray
#808080
SkyBlue
#87CEEB
LightSkyBlue
#87CEFA
BlueViolet
#8A2BE2
DarkRed
#8B0000
DarkMagenta
#8B008B
SaddleBrown
#8B4513
DarkSeaGreen
#8FBC8F
LightGreen
#90EE90
MediumPurple
#9370D8
DarkViolet
#9400D3
PaleGreen
#98FB98
DarkOrchid
#9932CC
YellowGreen
#9ACD32
Sienna
#A0522D
Brown
#A52A2A
DarkGray
#A9A9A9
LightBlue
#ADD8E6
GreenYellow
#ADFF2F
PaleTurquoise
#AFEEEE
Page 22 of 197
LightSteelBlue
#B0C4DE
PowderBlue
#B0E0E6
FireBrick
#B22222
DarkGoldenRod
#B8860B
MediumOrchid
#BA55D3
RosyBrown
#BC8F8F
DarkKhaki
#BDB76B
Silver
#C0C0C0
MediumVioletRed
#C71585
IndianRed
#CD5C5C
Peru
#CD853F
Chocolate
#D2691E
Tan
#D2B48C
LightGrey
#D3D3D3
PaleVioletRed
#D87093
Thistle
#D8BFD8
Orchid
#DA70D6
GoldenRod
#DAA520
Crimson
#DC143C
Gainsboro
#DCDCDC
Plum
#DDA0DD
BurlyWood
#DEB887
LightCyan
#E0FFFF
Lavender
#E6E6FA
DarkSalmon
#E9967A
Violet
#EE82EE
PaleGoldenRod
#EEE8AA
LightCoral
#F08080
Khaki
#F0E68C
AliceBlue
#F0F8FF
HoneyDew
#F0FFF0
Azure
#F0FFFF
SandyBrown
#F4A460
Wheat
#F5DEB3
Beige
#F5F5DC
WhiteSmoke
#F5F5F5
MintCream
#F5FFFA
GhostWhite
#F8F8FF
Salmon
#FA8072
AntiqueWhite
#FAEBD7
Linen
#FAF0E6
LightGoldenRodYellow #FAFAD2
Page 23 of 197
OldLace
#FDF5E6
Red
#FF0000
Fuchsia
#FF00FF
Magenta
#FF00FF
DeepPink
#FF1493
OrangeRed
#FF4500
Tomato
#FF6347
HotPink
#FF69B4
Coral
#FF7F50
Darkorange
#FF8C00
LightSalmon
#FFA07A
Orange
#FFA500
LightPink
#FFB6C1
Pink
#FFC0CB
Gold
#FFD700
PeachPuff
#FFDAB9
NavajoWhite
#FFDEAD
Moccasin
#FFE4B5
Bisque
#FFE4C4
MistyRose
#FFE4E1
BlanchedAlmond
#FFEBCD
PapayaWhip
#FFEFD5
LavenderBlush
#FFF0F5
SeaShell
#FFF5EE
Cornsilk
#FFF8DC
LemonChiffon
#FFFACD
FloralWhite
#FFFAF0
Snow
#FFFAFA
Yellow
#FFFF00
LightYellow
#FFFFE0
Ivory
#FFFFF0
White
#FFFFFF
Tag & Attribute
<BODY BGCOLOR="#ff6600">
Page
Background

<BODY TEXT="#ff6600">
Page

<BODY LINK="#ff6600">
Page Click Link

(
Link)

<BODY VLINK="#ff6600">
Page
Link
<BODY ALINK="#ff6600">
Page Link Click

Link Text
<FONT
COLOR="#cc6600">sample
text</FONT>
<BODY TEXT="#ff6600">
<font> element Content
<TABLE BGCOLOR="#ff6600">
Table
Background
Colour
- <BODY BGCOLOR="#ff6600">
Page Background
Page Table
Background
<TH BGCOLOR="#ff6600">
Table
Cell
background
<TD BGCOLOR="#ff6600">
Cell
Background
Background
Colour
Background
Colour
Font
forecolour
forecolour
Page 24 of 197
HTML Colour
HTML Colour Colour Name Hex Code
..
Hex
Code
Link
Web page
Link Link HTML
Hypertext Link
html language link
..
Link Link
1. Absolute paths
2. Relative paths
Link
Example
Absolute
Web
paths
URL
Domain
Address
http://www.worldwidemyanmar.com/images/favicon.ico URL
... Code
<a href=http://worldwidemyanmar.com/images/favicon.ico>
()
<img src=http://.worldwidemyanmar.com/images/favicon.ico>

Relative
File Relative path .
paths
. Directory File
Name
<a href=link1.html>
Source
File
Sub-Directory
sub-
directory/filename
Page 25 of 197

<a href=html/link1.html>
Source
File
Directory
folder
../filename
<a href=../link1.html>
TAG
Tag
Code
Description
Browser
Code
View
<b>This is BOLD</b>
This is BOLD
Web Browser This is BOLD

<b> tag This is BOLD Web Browser This is BOLD
code tag Browser
Tag <> </> slash (/)
Open Tag and Closing Tag Less Than
Sign (<) Greater Than Sign (>)
Comment
HTML
source
code
code

..
comment ..
Page 26 of 197
Code
<html>
<head>
<title>World Wide Myanmar</title>
<body>

Welcome to World Wide Myanmar
</body>
</html>

Element
Web Page Tag Tag (Opening Tag &

Closing
Tag)
Element
HTML
Document
....
HTML Document
(Overview)
<html>
<head>
<title>This is title of HTML Document</title>
</head>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<html> Elements
<html>
<head>
</head>
<body>
</body>
</html>
Page 27 of 197
<head> Elements
<head>
</head>
<body> Elements
<body>
</body>
<title> Elements
<p> Elements
HTML
Element
Attribute
HTML
tag
attribute
attribute tag
<p>
tag
<p> tag attribute

= <tag attribute="value">Margarine</tag>
Class Attribute
HTML Code
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important
Page 28 of 197

paragraph. :)</p>
</body>
</html>
Result
Class Attribute CSS class attribute ID

Attribute
code h1.intro css class selector
blue
green
p.important

<h1>
<p>
tag
CSS
<h1
tag
class=intro>
<p
class=important> <body> element

class CSS code
ID Attribute
HTML Code
<html>
<head>
function change_header()
{
document.getElementById("myHeader").innerHTML="Nice
day!";
Page 29 of 197

}
</script>
</head>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="change_header()">Change
text</button>
</body>
</html>
Result
Hello World!
Change text
Change
text
Nice day!
Change text
ID attribute
class attribute
java script

Hello World! button
button click
javascript function
id attribute myHeader value Nice

day!
Style Attribute
HTML Code
<html>
<body>
Page 30 of 197

<h1 style="color:blue;text-align:center">This is a
header</h1>
<p style="color:green">This is a paragraph.</p>
</body>
</html>
Result
This is a header
This is a paragraph.
Style attribute
alignment
<h1>
..
tag
colour
<h1
style=color:blue, text-align:center> tag style

value
Title Attribute
HTML Code
<html>
<body>
<p><abbr title="World Health Organization">WHO</abbr> was
founded in 1948. This is tutorial coded by W3C.com</p>
<p
title="Offcial
site
for
Your
One
Stop
IT
Station!">http://www.worldwidemyanmar.com</p>
</body>
</html>
Result
World Health Organization
WHO was founded in 1948. This is tutorial coded by W3C.com

Offcial site for Your One Stop IT Station!
Title attribute
Page 31 of 197
tooltip
text
mouse pointer
value

Information
Abbr abbreviations spellcheckers, screen
readers,
translation systems and search
-engines
Building Web Page

Web Page
Source
Code

<html>
<head>
<title>Page TITLE</title>
</head>
<body>
<p>This is Body by World Wide Myanmar</p>
</body>
</html>
Browser
View
HTML File
HTML Editor
HTML Editor html file text file
text editor HTML Editor
Page 32 of 197
Text editors
Object editors
WYSIWYG HTML editors
WYSIWYM editors
Online editors
Windows user Notepad Mac BBedit
WYSIWYM editor
Dreamweaver
Microsoft
Expression
Web
HTML
html tag WYSIWYM editor
Auto
Notepad HTML
Dreamweaver Expression Web Professional Web Page
HTML Web Page

Run Command (Windows Key + R) notepad Notepad
editor
Start > All Programs> Accessories> Notepad

HTML source code <html> </html> .. Root
Element html
document Element <head> element
<body> element Frameset Elements ..
Element html code
(Notepad )
=
Page 33 of 197
<html>
</html>
html html document code html page

.. text html language
<html>
<head>
</head>
<body>
</body>
</html>
Element
<head> element <body> element
<head>
<head> element Browser Web Page
Element
<body> element java script .. CSS code meta
site author or site information content

tags
Tag
<head>
Document
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The content of the document......</p>
</body>
</html>
<title>
Document
<head>
<title>Title of the document</title>
</head>
<base />
Page 34 of 197
Page Link Default Address

<head>
<base href="http://www.worldwidemyanmar.com/images/" />
<base target="_blank" />
</head>
<link />
Document CSS link
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<meta />
HTML Document
<head>
<meta name="description" content="Tutorial, Reviews and
News on Tech Products" />
<meta name="keywords"
content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Administrator" />
<meta http-equiv="Content-Type"
content="text/html;charset=ISO-8859-1" />
</head>
<script>
client-side script
<head>
function change_header()
{
document.getElementById("myHeader").innerHTML="Nice
day!";
}
</script>
</head>
<style>
Document style
<head>
Page 35 of 197

h1 {color:red}
p {color:blue}
</style>
</head>
<body>
element Web Browser
Element
element
Forms
Tables
Text
Anchors
Style Sheets
Line Breaking
Lists
Multimedia
Block Formatting
Character Formatting
Embedded Functionality
Revision Control
Rubies
<body> element content Lists Ordered
List (<ol>), Unordered List (<ul>)
Form Form tags Input Type

form tags InputType=
Forms Tag
<form>
Form web page user Input Information

form
content
process
Input text box
button
.. form table
<form method="get"
action="http://www.worldwidemyanmar.com/query"
enctype="application/x-www-form-urlencoded">
Page 36 of 197

<input type="password" name="brb" />
</form>
<button>
Button tag INPUT element submit , reset

submit button form data

<button type="submit" name="helpbutton" tabindex="1">
<img src="helpicon.gif" align="middle" /> Get the
<strong>HELP</strong> that you need here...
</button>
<label>
Label check box , option button

Label
<fieldset>
<legend accesskey="G" tabindex="1">Gender</legend>
<label accesskey="M"><input type="radio" name="Gender"
value="Male" />Male</label> <br />
<label accesskey="F"><input type="radio" name="Gender"
value="Female" />Female</label>
</fieldset>
<option>
Option
tag
box
..
option tag
Page 37 of 197
<form>
<select name="list1" size="3" multiple>
<option value="opt1">option1 </option>
<option selected value="opt3">option3 </option>
</select>
</form>
<fieldset>
label form
Group .. Male & Female
Gender Group
<fieldset>
</fieldset>
<legend>
Page 38 of 197
Fieldset , label fieldset group
legend
<fieldset>
</fieldset>
<select>
Select content value List

multiple select single
select
<form>
Page 39 of 197

</select>
</form>
<optgroup>
selection list value group
<form>
</select>
</form>
<textarea>
Textarea
element
multiple text
<form>
<textarea name="brb" rows="3" cols="40">
Default TEXTAREA value goes here
</textarea>
</form>
Page 40 of 197
Form tags InputType=

InputType=
button
Form button type=button
Feedback form Button

Submit Button, Reset Button
<form>
<input type="button" value="Submit" name="brb"
onClick="test1(this.form)" />
<input type="reset" value="Reset" />
</form>
radio
Radio Option button ..

<form>
<input type="radio" value="Jazz" name="Radio1" /> Jazz<br />
<input type="radio" value="New Age" name="Radio1" />
New
Age<br />
<input
Page 41 of 197
type="radio"
value="Rock"
name="Radio1"
checked
/>
Rock!<br />
</form>
reset
feedback
form
(Empty)
Reset button
Reset

Form
Reset Button
<form>
<input type="reset" value="clear the form" />
</form>
CheckBox
Boolean Choice true or false .. ..

Checkbox
Radio button
Radio
Button
Page 42 of 197
<form>
<input type="checkbox" value="3" name="brb" checked />
<input type="checkbox" value="3" name="brb" />
<input type="checkbox" value="3" name="brb" checked />
</form>
image
button
..
image
<form>
<input
type="image"
src="http://www.planetcreator.net/images/pnc.png"
name="imagesubmit1" align="top" height="50" width="50" />
</form>
range
Text box number ..

Number
range
Minium
.. Maxium ..
Page 43 of 197
<form>
<input name="r" type="range" min="1" max="11" value="9">
<input type="submit" value="Go">
</form>
submit
Submit
button
type=button
<form>
<input type="submit" value="Submit" />
</form>
file
file
Web server
..
button upload
Page 44 of 197
<form method="post" action="action.cgi"

enctype="multipart/form-data">
<input type="file" name="filename" />
</form>
password
password .. text box

password box
<form>
<input type="password" name="thepassword" />
</form>
readonly
user
text ..
Page 45 of 197
<form>
<input type="readonly" name="ron" value="Readonly Value"
/>
</form>
text
Text readonly .. text

value
<form>
<input
type="text"
value="brb
was
here"
name="text1"
size="10" maxlength="25" />

</form>
form elements
Table Element tag

HTML table
Tables
Table Tags
<table>
<table> tag HTML table element table

Table
cell Default value table
border
Page 46 of 197
table
attribute
table cell
effect
<table
border="2"
align="left"
cellpadding="5"
bordercolor="#ff0000"
width="75%">
<caption
align="top">Juggling
Capabilities
of
Waterfront
Performers</caption>
<tr> <td>brb</td> <td>5</td> <td>2</td> <td>5</td> </tr>
<tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr>
<tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr>
<tr> <td>U Tin Maung</td> <td>1</td> <td>2</td> <td>20<br>he is
great!)</td> </tr>
</table>
Table Attribute attribute
Attribute
<table border=?>
Table cell
Values=Integers
<table border="2">
value
<table align=?>
Table Cell Center, Left, Right
Values=center,left,right alignment
<table border="center>
value
<table background=?> Table background image
(images)
Page 47 of 197
<table background="flower.gif"
<table cellpadding=?> Cell cell data
Values=Integers
<table cellpadding="value">
<table width="224" border="1"

cellpadding="20" cellspacing="10"
bordercolor="#0000FF">
<table cellspacing=?>
Cell
Values=Integers
<table cellspacing="value">
Page 48 of 197
<table width="224" border="1"

cellpadding="20" cellspacing="10"
bordercolor="#0000FF">
<table bgcolor=?>
Table Background
Color Name or Hex
<table bgcolor=red>
Color
Or
<table bgcolor=#FF0000>
<table bordercolor=?> Table

Color Name or Hex
<table bordercolor=red>
Color
Or
<table bordercolor=#FF0000>
<table
3D
Border
Bordercolordark
bordercolordark=?>
table border .
Bordercolordark
<table cellpadding="5" cellspacing="5"
width="100%" border="5"
bordercolordark="blue"
bordercolorlight="#FF0000">
Border size
Page 49 of 197
<table
..
bordercolorlight=?>
Bordercolorlight
<table cellpadding="5" cellspacing="5"

width="100%" border="5"
bordercolordark="blue"
bordercolorlight="#FF0000">
Border size
<table width=?>
Table
Values=Integers
Tables Width
<table width="100%" height="200">
integer pixel values or a percentage

<table height=?>
Table
Values=Integers
Tables Height
<table width="100%" height="200">
integer pixel values or a percentage

<table cols=?>
COLS <col> tag .. COLS table

attribute browser table columns
Page 50 of 197

website table browser
<TABLE WIDTH="600" COLS="4"

BORDER="1" >
table Columns
<table colspan=?>
LEFT cell
columns
COLSPAN
table
attribute
<th><td>
<TR>
<TH COLSPAN="2">LEFT</TH>
colspan=4
<TH COLSPAN="2">RIGHT</TH>
</TR>
COLSPAN
Cell
Merge
<caption>
Table <caption> tag table element

source code
<caption> tag
table
<table border="2" align="left" cellpadding="5" bordercolor="#ff0000"

width="75%">
<caption align="top">Juggling Capabilities of Waterfront
Page 51 of 197
<tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br> he is
great!)</td> </tr>
</table>
<thead>
<thead> <tfoot> tags ..
<tfoot>
table
tags
<tr> tag table row

group
<table border="2" align="left" cellpadding="5" bordercolor="#ff0000"

cols="4" frame="vsides" rules="rows" width="75%">
<thead>
<tr> <th>Juggler</th> <th>Pins</th> <th>Bowling Balls</th>
<th>Flaming Baseballs</th> </tr>
</thead>
<tfoot>
<tr> <th colspan="4">NOTE: This is only a small sample</th> </tr>
Page 52 of 197
</tfoot>
<tbody>
<tr> <td>U Maung Tin</td>
<td>1</td> <td>2</td> <td>20<br>( he is great!)</td> </tr>
</tbody>
</table>
<col>
<colgroup> element <col> tag Table
<colgroup>
Column Group <col> Group Column

right,left,center
<table border="2" align="left" cellpadding="5"

bordercolor="#ff0000" cols="4" frame="vsides"
rules="cols" width="75%">
<colgroup>
<col align="right" />
</colgroup>
<colgroup>
<col align="center" />
Page 53 of 197

</colgroup>
<thead>
</thead>
<tbody>
<tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td>
</tr>
<tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td>
</tr>
<tr> <td>U Maung Tin</td> <td>1</td> <td>2</td>
<td>20<br>he is great!)</td> </tr>
</tbody>
</table>
<tr>
<tr> table row <th> tag
<th>
table <td> table
<td>
cell data
Page 54 of 197
<table border="2" align="left" cellpadding="5"

bordercolor="#ff0000" width="75%">
<tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br>(he is
great!)</td> </tr>
</table>
Text
Characters HTML
(<) or (>) Characters Browser Text Tag

HTML Source Code reserved
characters
Page 55 of 197
&entity_name;
&#entity_number;
.. (<) Browser <
<
HTML Entities Reserved Characters
Result
Description
Entity Name
Entity Number
non-breaking space

<
less than
<
<
>
greater than
>
>
&
ampersand
&
&
cent
¢
¢
pound
£
£
yen
¥
¥
euro
€
€
section
§
§
copyright
©
©
registered trademark
®
®
trademark
™
™
<body>
<p align="center">Copyright © 2009. All rights reserved. World Wide
Myanmar Training Center.</p>
</body>
Page 56 of 197
© code
Anchors Hyperlink tag <a> / Document

Anchor
. Anchors href attribute Document Link

. Name attribute Document bookmark
anchor <a> tag
WorldWideMyanmar hyperlink .
<a href="http://www.worldwidemyanmar.com">WWM</a>
code
Hyperlink to a document:
<a href="http://www.worldwidemyanmar.com">WWM</a>
Hyperlink to a Bookmark in the current document:
<a href="#Bookmark1>
Link text that leads to Bookmark1 in the current document
</a>
Hyperlink to a Bookmark in an external document:
<a href="http://www.worldwidemyar.com/index.html#Bookmark1">
Link text that leads to Bookmark1 in index.html at www.foo.com
</a>
Name attribute href ..
<a name="Bookmark1">This text is now marked by Bookmark1!</a>

Document Document scroll
Page 57 of 197
<body>
<a href="#paragraph1">Jump to Paragraph 1</a><br/>
<a name="paragraph1">This is Paragraph 1 and text......</a><br/><br/>

<a name="paragraph2">This is Paragraph 2 and text......</a><br/><br/>
<a name="paragraph3">This is Paragraph 3 and text......</a>
</body>
Jump to Paragraph 1 address bar #paragraph1 page
This is Paragraph 1 and text.. Jump to Paragraph 2
Paragraph 2 .. Local Page content name attribute
hyperlink
External
Link
href=www.yourwebsite.com/yourfile.html#nameattribute
Anchors page #anchorname page

Body Elements style sheet tag <div> <

span>
HTML styling
<span> <div>
Page 58 of 197
Tags
<span>
Inline Element -

<html>
<head>
<title>Style Sheets by WWM</title>
</head>
<body>
<p>This is just demostration for <span> Style Sheet in
Body Elements </span> by WWM</p>
</body>
</html>
span
style Head Elements Style Tag
color .. class <span class=test>
<span></span>
Class attribute

<html>
<head>
Page 59 of 197

span.test {color: #ff0000}
</style>
</head>
<body>
<p>This is just demostration for <span
class="test">Style Sheet in Body Elements </span>by WWM</p>

</body>
</html>
<div>
tag block elements <span> tag <div> tag

<html>
<head>
div.important {color: #ff0000}
</style>
</head>
<body>
Page 60 of 197

<p>Congratulations on the purchase of your sword!
Using a sword is fun and easy. Just be sure to follow these important
safety tips. </p>
<div class="important">
<p> <em>Never</em> hold your sword by the pointy
end. </p>
<p> <em>Always</em> be sure to stick the pointy end
into the other guy before he does the same to you. </p>
</div>
<p> And remember, if you or your surviving kinsfolk are
not fully satisfied, we have a money-back guarantee!
</body>
</html>
Example
<div align="right" class="greensection" style="color: lime">div text</div>

<div> element attribute .. tag
Tag
Example
<div align=?>
<div align=center> or <div align=left> or <div

align=right> or <div align=justify>
<div width=?>
<div width=2> , Pixel or Interger Value
<div height=?>
<div height=2> , Pixel or Interger Value
<div> <span>
Page 61 of 197

<span class=test>
<div class=important>

<html>
<head>
div.important {color: #ff0000}
span.test {color: #ff00ff}
</style>
</head>
<body>
<p>
<span
class="test">Congratulations</span>
on
the
purchase of your sword! Using a sword is fun and easy. Just be sure to follow
these important safety tips. </p>
<div class="important">
<p> <em>Never</em> hold your sword by the pointy end. </p>
<p> <em>Always</em> be sure to stick the pointy end into the
other guy before he does the same to you. </p>
</div>
<p> And remember, if you or your surviving kinsfolk are not fully
satisfied, we have a money-back guarantee!
</body>
Page 62 of 197
</html>
Line Breaking tag

<br/>
Example
<p>This is a line of text with a linebreak here.<br /> This is text after</p>
This is a line of text with a linebreak here

This is text after
.. <br/> tag

Line Breaking <br/> ..
<nobr> tag
<br>
..
browser
<nobr>
width
<br/>
<nobr> tag .. (<nobr>your text</nobr>)
..
<p>This is a line of text with a linebreak here.<br /> This is text after</p>
<p><nobr>This is a run of nobreak text to be used as an example, This is a run
of nobreak text to be used as an example, This is a run of nobreak text to be used as an
example, </nobr></p>
.. <nobr> browser automatic line break
Page 63 of 197
Bullet
List Element
List Element
. Physical List Styles
. Virtual List Styles
. List Items .. tag
List
Physical List Styles
<ul><ol><dl>
Tag
<dl>
Definition List element content

Definition Term
Definition
<dl>
<dt>Term 1</dt>
<dd>Term 1 definition</dd>
<dt>Term 2</dt>
<dd>Term 2 definition</dd>
</dl>
Definition Term Definition List
Definition List <dl>
<ol>
Ordered List <ol> element <li> content
A,B,C,D
1,2,3,4
<ol>
<li>List item 1</li>
Page 64 of 197

</ol>
Browser Default value 1.,
2., 3
1. List item 1
2. List item 2
3. List item 3

attribute .. ..
<ol type="A" start="3">

</ol>
Attribute
<ol type=?>
<ol type="A"
Or
<ol type="a"
Or
<ol type="1"
Type value
none [no marker is used]

A [capital letters]
a [lower-case letters]
I [large roman numerals]
i [small roman numerals]
upper-alpha [capital letters]
lower-alpha [lower-case letters]
upper-roman [large roman numerals]
lower-roman [small roman numerals]
decimal [integer numbering DEFAULT]
disc [default solid bullet]
Page 65 of 197

square [solid square]
circle [hollow bullet]
round [hollow bullet]
<ol
start=value>
type=1
start=5
List
5,6,7.
<ol start="A"
Or
<ol type="E"
Or
<ol type="5"
<ul>
Unordered List Ordered List ..

default bullet List
<ul>
</ul>
Browser Default value Disc
Bullet
. List item 1
. List item 2
. List item 3

attribute .. ..
<ul type="A" start="3">

</ul>
Page 66 of 197

Attribute
<ul type=?>
<ul type="A"
Or
<ul type="a"
Or
<ul type="1"
Type value
none [no marker is used]

A [capital letters]
a [lower-case letters]
I [large roman numerals]
i [small roman numerals]
upper-alpha [capital letters]
lower-alpha [lower-case letters]
upper-roman [large roman numerals]
lower-roman [small roman numerals]
decimal [integer numbering]
disc [default-solid bullet]
square [solid square]
circle [hollow bullet]
round [hollow bullet]
<ul
start=value>
type=1
start=5
List
5,6,7.
<ul start="A"
Or
<ul type="E"
Or
Page 67 of 197

<ul type="5"
Ordered List Unordered List
Virtual List Styles
<menu><dir> <ol><ul>
tag attribute
Tag
<menu>
tag line per item
<menu>
<li>First item in the list</li>
<li>Second item in the list</li>
<li>Third item in the list</li>
</menu>
<dir>
short item
<dir>
<li>A - H</li>
<li>I - M</li>
<li>N - R</li>
<li>S - Z</li>
</dir>
tag
<ul>
tag
bullet
default
type attribute
List Items
Data Information
tag
<li> List ,
<dt> Definition Term
Page 68 of 197

<dd> Definition ..
List
<dir>
<li>A - H</li>
<li>I - M</li>
<li>N - R</li>
<li>S - Z</li>
</dir>
HTML Video , Sound, Image Multimedia
Web Page Multimedia

Plain Text
Multimedia Tag
<img>
<bgsound>
<sound>
<area>
<map>
<object>
Note: - Tag attribute

.. ..
Tag
<img>
<img> tag attribute src Source

( ) alt alternative text ( Mouse Pointer
)
<img src="my-computer.png" alt="Computer">
Page 69 of 197
Code

<html>
<head>
<title>Multimedia by WWM</title>
<body>
<div align=center>
<img src="http://www.planetcreator.net/images/pnc.png"
alt="PlanetCreator"> Be Right Back
<img src="my-computer.png" alt="Computer"> My
Computer
</div>
</body>
</html>
attribute
attribute
<img align=?
text
align attribute
alig=right

Page 70 of 197
<img src="my-computer.png" alt="Computer"

align=right>
Align attribute Left | Right | Top | Texttop | Middle |
Absmiddle | Baseline | Bottom | Absbottom value

<img width=?>
<img height=?>
width height
value
Positive integer pixel values

height=50 width=30%>
<img vspace=?>
<img hspace=?>
Vertical space vspace ..
white
space
top and bottom padding

Horizontal space vspace
white space
Left and right side padding
<img
src="my-computer.png"
alt="Computer"
hspace=50 vspace=20>
value Positive integer pixel
values
Page 71 of 197
<img
vspace=
20
<img
hspace=
50
<img border=?>
border
<img
border=
20

border=20> My Computer
<img
Usemap <map> tag map tag
usemap="?>
name attribute img
map
tag
<bgsound>
Web
document
<bgsound> .
<bgsound src="http://www.worldwidemyanmar.com/i-want-to-understandu.mp3" loop="infinite" />

Loop attribute
<bgsound>
..
embed tag
<embed src="beatles.mid" />
Object tag
<object
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="flower.wav" />
</object>
Page 72 of 197
Hyperlink tag
<a href="beatles.mid">Play the Beatles</a>
<sound>
<bgsound> background
<bgsound src="http://www.worldwidemyanmar.com/i-want-tounderstand-u.mp3" delay=5 />

Delay Web

<map>
<map> tag Adobe

Dreamweaver

<html>
<head>
<title>Multimedia by WWM</title>
<body>
<img src="my-computer.png" width="145" height="126"
alt="My Computer" usemap="#mycomputermap" />
<map name="mycomputermap">
<area shape="rect" coords="100,100,50,50"
alt="Monitor" href="monitor.html" />
<area shape="circle" coords="10,70,30"
alt="System Unit" href="cpu.html" />
</map>
</body>
</html>
Page 73 of 197
My Computer
Map tag Link
Source Code my-computer.jpg Monitor
Monitor Click monitor.html
Link .. CPU
cpu.html
coords attribute
monitor.html
cpu.html
map shape attribute value rect, circle, poly

coords
rect
left-x, top-y, right-x, bottom-y
circle
center-x, center-y, radius
poly
x1, y1, x2, y2, ..., xN, yN

coords="100,100,50,50"

..
Link
Link
border=0

<object>
tag multimedia html embedded content
..
APPLET, EMBED, BGSOUND, SOUND and IMG elements
<object
Page 74 of 197
codetype="application/java-vm"

codebase="http://www.worldwidemyanmar.com/applet.class
"
classid="java:program.start" height="100" width="100">
<param name="options" value="xqz" />
If you can read this you are too close.<br />
AND your browser does not support Java.
</object>
attribute .. align, width, height

codebase attribute
object code
URL
codetype internet media type
classid
classid URL Windows Registry values
Block Formating content

.
tag <Address>
<Hx>
<P>
<Blockquote>
<Marquee>
<Pre>
<Center>
<Multicol>
Tag
<address>
Web Page
tag
Page 75 of 197
<body>
<address>1234 Nowhere St.<br />Anywhere, State 000019999</address>
</body>
tag
Default
Italic
align, height, width

attribute
<Hx>
<h1>, <h2>, <h3>, <h4>, <h5>,<h6> Heading tag
(<h1>,
1 to 6
<h2>,
<h3>,
<h4>,
<h5>,
<h6>)
<body>
<h1 align="center">Heading level 1 text</h1>
Page 76 of 197

</body>
<h6> Point Size <h1> Point Size

Heading Bold Type
<p>
Paragraph tag
<p align=right

<body>
<p align="right">
* Very early versions of HTML (before 2.0) did

not specify P as a container element, and some early browsers may
become confused when seeing the tag.
* Netscape versions 1.0-1.22 only understood
ALIGN values of LEFT and CENTER. Support for ALIGN=RIGHT began
in version 2.0.<p>
<p>
* he 'justify' value of the ALIGN attribute is

currently only supported in the 4.0 Beta 2 and above versions of Netscape
and Internet Explorer. </p>
</p>
</body>
<p> tag
<blockquote
>
text
Quote
tag
Page 77 of 197
<body>
<h2>Code example: BLOCKQUOTE element</h2>
<hr>
filler text
<blockquote
cite="http://www.example.com/bqcitation.htm">blockquote
text</blockquote>
filler text
<hr>
</body>
Quote
cite
cite
text text
Quote
..
cite
Source
url
URL
<marquee>
Web page
..
<marquee>
<body>
Page 78 of 197

<marquee> I'm marquee </marquee>
</body>
Im marquee

marquee attribute behavior, direction, bgcolor, height, width,
loop, vspace, scollldelay
attribute
behavior
Marquee
value
scroll,
slide,
alternate
Scroll
<marquee
behavior="scroll"
direction=left>Your
scrolling text goes here</marquee>

Marquee default value
Slide
<marquee
behavior="slide"
direction=left>Your
value
drection
left

Alternate
<marquee behavior="alternate" direction=left>Your

direction
Marquee
Values: Left [DEFAULT] | Right | Down | Up

<marquee direction=left>Your scrolling text goes
here</marquee>
scrollamount
scrollamount
Page 79 of 197

Values: Positive integer pixel amounts.
<body>
<marquee behavior="scroll" direction="left"
scrollamount="1">Slow scroll speed</marquee>
scrollamount="10">Medium scroll speed</marquee>
scrollamount="20">Fast scroll speed</marquee>
</body>
scrollamount
attribute value speed

loop
marquee
<body>
loop="1">Scroll Loop</marquee>
</body>
loop=1

scrolldelay
scrolldelay

..
<body>
scrolldelay="400">ScrollDelay</marquee>
</body>
.. scrolldealy value Millisecond
<vspace>
<width>
<height>
Marquee Code
Example: 1
<body>
<marquee behavior="scroll" direction="right"><marquee
Page 80 of 197

behavior="scroll" direction="up">Up up and away!</marquee></marquee>
</body>
code ..
Exmaple: 2
<body>
<marquee style="zindex:2;position:absolute;left:18px;top:97px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:200px;"scrollamount="3"
direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:1px;top:89px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:100px;"scrollamount="7"
direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:111px;top:7px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:302px;"scrollamount="4"
direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:176px;top:57px;font-family:Cursive;font-
Page 81 of 197

size:14pt;color:#FF8C48;height:78px;"scrollamount="7"
direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:278px;top:74px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:154px;"direction="down">Falling
text</marquee><marquee style="zindex:2;position:absolute;left:241px;top:72px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:82px;"direction="down">Scrolling
text</marquee><marquee style="zindex:2;position:absolute;left:276px;top:32px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:70px;"scrollamount="3"
direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:272px;top:15px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:334px;"direction="down">Scrolling
text</marquee><marquee style="zindex:2;position:absolute;left:90px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:167px;"scrollamount="7"
direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:275px;top:108px;font-family:Cursive;font-
Page 82 of 197

size:14pt;color:#ffcc00;height:420px;"scrollamount="7"
direction="down">Scrolling text</marquee>
</body>

<pre>
HTML Browser <pre>

tag
<body>
<pre> This is World Wide Myanmar Training Center
WorldWideMyanmar's wholly owned by WorldWideMyanmar Sdn Bhd
</pre>
Page 83 of 197

</body>
<pre> tag
Source Code
<pre> tag
<center>
<center>tag
<body>
<center> This is World Wide Myanmar Training Center,
WorldWideMyanmar's wholly owned by WorldWideMyanmar Sdn Bhd
</center>
</body>
<hr>
Horizontal Line tag
<hr> Closing Tag

(</hr>)
<hr width="30%" align="center" size="3" noshade color="#0000FF" />

Line Browser noshade
html
xhtml
3D
solid color
Page 84 of 197
<multicol>
multi-col
format
<multicol>
<multicol cols="3" width="80%" gutter="20">
This is multi-column layout text that should be distributed evenly across 3
columns
</multicol>
Cols Column gutter columns
Pixel
Block Formating Character Formatting

tag

tag -
<Abbr>
<Cite>
<Font>
<Q>
<Spell>
<Sup>
<B>
<Code>
<I>
<S>
<Strike>
<Tt>
<Big>
<Dfn>
<Inlineinput>
<Samp>
<Strong>
<U>
tag
<abbr>
Abbreviation
<Blink>
<Em>
<Kbd>
<Small>
<Sub>
<Var>
Pointer
tooltip text
Send by <abbr title="facsimile">fax</abbr>
fax
pointer
facsimile
<cite>
Citation text ..
<cite>citation text</cite>
Page 85 of 197

<font>
HTML tag font

tag
attribute
color, face, font-weight, point-size, size
attribute
color
font
color
attribute
color
color name hex color
<font color="#0000FF">The COLOR attribute offers a

GREAT alternative way to create visually distinct
text/section markers in long runs of text</font>
face
Font Times, Arial
<font face="Verdana">This is Verdana</font><br/>

<font face="Times">This is Times</font><br/>
<font face="Arial">This is Arial</font><br/>
<font face="Zawgyi One"> ZawGyi Font </font><br/>
<font face="Times, Verdana, System">Font
Selection</font>
value
font
Page 86 of 197
code Times, Verdana, System

Times font .. Times font
verdana
font system
browser
default
font
..
browser
font
font-weight
Font font-weight value

bold
font-weight value
Values: 100 | 200 | 300 | 400 [DEFAULT]| 500 | 600 | 700 [Font
Bold ] | 800 | 900
<font font-weight=700>This is font weight</font><br/>

point-size
Font
<font point-size=20>This is font size 20</font><br/>

size
size point-size .. size 1 7

predefined size
<font size="1">size 1</font><br/>
Page 87 of 197


<font size=+2>This is font weight</font><br/>

<font size=-6>This is font weight</font>
+ / - Default Value 3
-5
+1
..
<q>
Quotations mark
<q cite="http://www.worldwidemyanmar.com/">To be or not to be.</q>

<spell>
tag
Reference
Netscape Mail or Composer editor
<sup>
Superscripted
2 2
<body> <center><h2>SuperScripted Text</h2><hr>

2<sup>2</sup>=
</center>
</body>
<b>
Page 88 of 197
Bold <b> tag
<b>This is Bold Text</b>

<code>
HTML
Coding
Character Entities
Code <code> tag Browser

code
<code>This is Greater Than > and Less Than < </code>

<
>
Source
Code
<code>
tag
< or >
<i>
Page 89 of 197
<i> tag
<i>This is Italicied Text </i>

<s>
<strike>
.. strike
.. strike <s> <strike>
<body>
<strike>strikethrough text</strike><br/>
<s>strikethrough text</s>
</body>
<tt>
Text fixed-width font Tele Type Text
font
<tt> tag

<body>Fixed-width text<br/>
<tt>Fixed-width text</tt>
Page 90 of 197
</body>
<big>
font ..
font
<big> tag

<body> Big Text <br/>
<big>Big Text</big>
</body>
<dfn>
Define
definition
term
Definition Term
<body>
This is <dfn>defining text</dfn> by WWM
</body>
<samp>
Sample Sample
Sample
<samp>sample text</samp>
Page 91 of 197

<strong>
Bold
Text
Strong Text
<body>
This is <strong>strong text</strong>.
</body>
<u>
Line
Underlined Text
<body>
This is <u>Underlined text</u>.
</body>
<blink>
Blink tag
<body>
This is <blink>blinking text</blink>.
</body>
<em>
tag
<em>
tag
italic
user
Page 92 of 197
<body>
<p>Do you <em>really</em> need to buy those expensive jeans? I
mean,
is it really <em>that</em> important to you to look like some kind
of circus freak?</p>
</body>
<kbd>
user Keyboard Delete Key .. Alt

Key
Keystrokes
<body>
<p>Hold down <kbd>CTRL</kbd>, <kbd>ALT</kbd>, and
<kbd>DELETE</kbd>,
then select Task Manager</p>
</body>
<small>
size 1 to 7 one size

decrement
everyon OK for a drink <small> tag
text two size decrement
Page 93 of 197
<body>
<p>Mark tried to get out of buying a round of drinks by getting
progressively quieter as he talked: "Right, I'm off to stretch my
legs and then get a bag of peanuts ... <small>back in a minute ...
<small>everyone OK for a drink?</small></small></p>
</body>
<sub>
Subscript Subscript H2O H2O

2
.. Superscript .. <sup> Subscript
<sub>
<body>
<p>That's not just water. That's not just H<sub>2</sub>O. That's
H<sub>2</sub>-woah!</p>
</body>
<var>
Page 94 of 197
Variable
<body>
<p>To get access to the system you first need to enter your
username, e.g. <var>monkeyboy123</var>, followed by your unique
6-digit customer ID beginning with C, e.g. <var>C13345</var>.</p>
</body>
Embedded Functionality HTML Java applications, scripting functionality,

Plug-ins
-
<Embed>
<Noembed>
<Script>
<Noscript>
<Iframe>
<Applet>
<Param>
Tag
<embed>
alternative content
web browser
flash video
multimedia content

<embed alt="string" height=" { number |
percentage } " hidden=" { true | false } "
pluginspage="uri" src="uri" type="MIME type"
width="number">
Page 95 of 197

</embed>
<body><h2>This is Embed, Object, Param</h2>

<object width="480" height="385"><param name="movie"
value="http://www.youtube.com/v/U7qKojFKD5g?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param><param
name="allowscriptaccess" value="always"></param><embed
src="http://www.youtube.com/v/U7qKojFKD5g?fs=1&hl=en_US"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="480" height="385"></embed></object>
</body>
Youtube embed tag

<noembed>
- browser embed content
(Support
<noembed>
tag
<embed src="http://www.worldwidemyanmar.com/sounds/sound.mid" height="50"

width="75">
</embed>
<noembed>
<b>Please>/b> try this <a
href="http://www.worldwidemyanmar.com/sounds/sound.mid">media clip</a>
</noembed>
Code embed support browser
Page 96 of 197
Please
trying
this
media
clip
link
support
noembed
<script>
tag head element

script javascript html
javascript html
professional webpage ..
function
input validation
filtering
script server side client

side
html
rendering

<html>
<head>
<title>Embeded Funtionality by WWM</title>
<script language="JavaScript" type="text/javascript">

</script>
</head>
<body>
Please enter your name:
<form>
<input type="text" name="name" onblur="getname(this.value)" value="" />
</form>
Page 97 of 197

</body>
</html>
attribute attribute
language
Language
value
JavaScript and VBScript
<script language="JavaScript"
type
scripting code MMIE Type

<script type="text/javascript"
<noscript>
embed noembed .. script browser support
<script language="JavaScript">

</script>
<noscript>
<b>Please</b> try this page for browsers that can not handle SCRIPTing.
<a href="http://www.worldwidemyanmar.com/alternate.html">Simple Text
Page</a>
</noscript>
<iframe>
Website,
Web
page
web
page
iframe
<iframe src="http://www.google.com/" height="500"

width="100%" frameborder=1>
</iframe>
frameborder
frameborder = 0
Page 98 of 197
iframe - Syntax
<iframe align=" { bottom | left | middle | right |
top } " frameborder=" { 0 | 1 } " height=" { number
| percentage } " longdesc="string"
marginheight="number" marginwidth="number"
name="string" noresize="noresize" scrolling=" { auto
| no | yes } " src="uri" width=" { number |
percentage } ">
</iframe>
<applet>
Webpage java application tag
<applet archive="uri" code="uri" codebase="uri"

height=" { number | percentage } "width=" { number
| percentage } ">
</applet>
Example
<applet codebase="http://www.worldwidemyanmar.com/java/"
code="javaexample.class" width="200" height="300">
<param name="text1" value="Example Text 1" />
<param name="imagecaption" value="Image Caption" />
<param name="bounceimage" value="bounce1.gif" />
<img src="non_java_image.gif" width="200" height="300" border="0" alt="You
are missing the full Java Experience.">
</applet>
<param>
Applet Object parameters or variables

Applet Object Java applet (a mini application ) browser

Usage-:
<param name="string" type="MIME type" value="value"valuetype=" { data | object |
ref } ">
Applet
<applet codebase="http://www.worldwidemyanmar.com/java/"
code="javaexample.class" width="200" height="300">
<param name="text1" value="Example Text 1" />
<param name="imagecaption" value="Image Caption" />
<param name="bounceimage" value="bounce1.gif" />
Page 99 of 197

<img src="non_java_image.gif" width="200" height="300" border="0" alt="You
are missing the full Java Experience.">
</applet>
Object
<object codetype="application/java-vm"
codebase="http://www.worldwidemyanmar.com/applet.class"
classid="java:program.start" height="100" width="100">
<param name="options" value="xqz" />
If you can read this you are too close.<br />
AND your browser does not support Java.
</object>
Revision Control update

content
tag <del> <ins>

Tag
<del>
Delete
<del cite="#oct12-2010" datetime="2010-10-12T12:45:00PST">Deleted

text</del>
<ins>
<ins cite="#jan25-2009" datetime="2009-01-25T18:00:00PST">Inserted

text</ins>
Delete Text Insert
Text
Page 100 of 197
<body>
<del
cite="#oct12-2010"
datetime="2010-10-12T12:45:00PST">Deleted
cite="#jan25-2009"
datetime="2009-01-25T18:00:00PST">Inserted
text</del>
<br/>
<br/>
<ins
text</ins>
</body>
Ruby Elements East Asian Languages (Japanese, Chinese,

Korean,
Ruby tag Parent tag <ruby> <rb><rt>
- Ruby Browser
Tag
<ruby>
ruby element parent tag
Page 101 of 197
Support IE
Firefox Support
<ruby>
<rb></rb>
<rt>liaison</rt>
</ruby>
<rb>
Ruby Base east asian language
(Base
Language)
<ruby>
<rb></rb>
<rt>liaison</rt>
</ruby>
<rt>
Ruby Text ..
<ruby>
<rb></rb>
<rt>liaison</rt>
</ruby>
<rbc>
Ruby Base Container Container <rb> content

<ruby>
<rbc>
Page 102 of 197

<rb></rb>
<rb></rb>
<rb></rb>
<rb></rb>
</rbc>
</ruby>
<rtc>
Ruby Text Container
<rt> content
<ruby>
<rtc class="reading">
<rt></rt>
<rt></rt>
<rt></rt>
<rt></rt>
</rtc>
<rtc class="annotation">
<rt rbspan="4" xml:lang="en">W3C Associate
Chairman</rt>
</rtc>
</ruby>
Complex Ruby
<ruby>,<rtc><rbc><rb><rt>

Ruby
East Asian Language
browser
structure
..
Page 103 of 197
<ruby xml:lang="ja">
<rbc>
<rb></rb>
<rb></rb>
<rb></rb>
<rb></rb>
</rbc>
<rtc class="reading">
<rt></rt>
<rt></rt>
<rt></rt>
<rt></rt>
</rtc>
<rtc class="annotation">
<rt rbspan="4" xml:lang="en">W3C
Associate Chairman</rt>
</rtc>
</ruby>
<frameset
> Elements
HTML Root Elements <head> <body> <frameset> Element

Page frameset
frameset webpage
Page 104 of 197
(). Yell, Cyan, Green, Black

()
index.html document page page () frameset
index.html
parent document
top_nav.html, menu_1.html,content.html footer.html parent document

index.html child documents
<html>
<head>
<title>Frameset Elements by WWM</title>
</head>
<frameset rows="100,*,80" frameborder="0" border="0"
framespacing="0">
<frame name="topNav" src="top_nav.html">
<frameset cols="100,*" frameborder="0" border="0" framespacing="0">
<frame name="menu" src="menu_1.html" marginheight="0"
marginwidth="0" scrolling="auto" noresize>
<frame name="content" src="content.html" marginheight="0"
</frameset>
<frame name="footer" src="footer.html">
</frameset>
</html>
Frameset attribute cols,rows, border, bordercolor, frameborder,
Page 105 of 197
framespacing, name
Framespacing frame
frameset rows, cols percentage 100%
- cols=80%,20%
cols=80,* * *

Tags
<frameset>
<frameset cols="{ number | percentage | * } ,"

rows="{ number | percentage | * } ,">
</frameset>
cols attribute number percentage

cols=100,* Column .. Column 100
rows=100,*,80
row
100 80
row
automatic
Browser

<frame>
<frame>
<frameset>
frame
<frame
name="content"
src="content.html"
marginheight="0"
<frame> document link

frame
attribute
noresize Default frame

frame border
noresize
<noframe>
<noframe>
<noscript>
browser
frameset browser support user

<html>
<head>
Page 106 of 197

CONTENT
Web
Design
HTML and CSS

<title>Frameset Elements by WWM</title>
</head>
<frameset rows="20,25%,*">
<frame src="frame1.html" name="frame1" />
<frameset cols="30%,*">
</frameset>
<noframes>
<body>
This text will appear only if the browser does not support frames.
</body>
</noframes>
</frameset>
</html>
<noframe> <frameset>
HTML webpage
..
Exercise -1
- exercise1 folder images folder
html image images folder
Notepad HTML Elements .. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

<html>
<head>
<title></title>
</head>
Page 107 of 197
<body>
</body>
</html>
exercise1.html
..
- notepad file menu save as
Page 108 of 197
File name filename + extension name ..

exercise1.html
Webpage
<title>Simple HTML Web Page by WWM</title>

<body>
background
<body
bgcolor=#ffffee> table
<html>
<head>
</head>
<body bgcolor="#ffffee">
<table>
</table>
<table>
</table>
<table>
</table>
</body>
</html>
table ..
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/topbkg.gif">
<tr>
<td width="50%"><img border="0" src="images/topleft.gif" width="205" height="61"></td>
<td width="50%">
<p align="right"><img border="0" src="images/logo.gif" width="200" height="61"></td>
</tr>
</table>
border=0 table width=100%
full page
cellspacing=0
cellpadding=0
background=images/topbkg.gif table images folder

topbkg.gif image file
Page 109 of 197
<tr> table row .. <td> cell width=50%

<img src=images/topleft.gif
logo.gif ..
<p align=right> ..
Default align=left
align=right <p> tag
Table .
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/linebkg.gif">
<tr>
<td width="100%"><font face="Arial" size="2"><b>   <font color="#FFFFFF">HOME
|
NEWS
|
PRODUCTS
|
SERVICES   |
   ABOUT US   |   CONTACT US</font></b></font></td>
</tr>
</table>
space ..
Table .
<table border="0" width="100%" background="images/botbkg.gif" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><img border="0" src="images/botbkg.gif" width="38" height="14"></td>
</tr>
</table>
table table
<p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p>
<p style="margin-left: 20" align="center"><font face="Arial" size="2">©
COPYRIGHT 2010 ALL RIGHTS RESERVED WORLDWIDEMYANMAR.COM</font></p>
<p> tag content
Page 110 of 197
page 0
<body
topmargin="0"
leftmargin="0"
rightmargin="0"
bottommargin="0"
marginheight="0"
marginwidth="0"
bgcolor="#FFFFEE">
margin 0
result
<html>
<head>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0"
bgcolor="#FFFFEE">
<table border="0" width="100%" cellspacing="0" cellpadding="0"
background="images/topbkg.gif">
<tr>
<td width="50%"><img border="0" src="images/topleft.gif" width="205"
height="61"></td>
<td width="50%">
<p align="right"><img border="0" src="images/logo.gif" width="200" height="61"></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0"
background="images/linebkg.gif">
<tr>
<td width="100%"><font face="Arial" size="2"><b>   <font
color="#FFFFFF">HOME   |   NEWS   |
PRODUCTS   |
SERVICES   |   ABOUT US   |   CONTACT
US</font></b></font></td>
</tr>
</table>
<p style="margin-left: 20"><font face="Arial" size="2">Place your content
here.</font></p>
Page 111 of 197

here.</font></p>
here.</font></p>
here.</font></p>
<p style="margin-left: 20" align="center"><font face="Arial" size="2">©
COPYRIGHT 2010 ALL RIGHTS RESERVED WORLDWIDEMYANMAR.COM</font></p>
<table border="0" width="100%" background="images/botbkg.gif" cellspacing="0"
cellpadding="0">
<tr>
<td width="100%"><img border="0" src="images/botbkg.gif" width="38"
height="14"></td>
</tr>
</table>
</body>
</html>
Table
table menu home, news, products, services, about, contact

Link anchor ..
Page 112 of 197

CONTENT
Web
Design
HTML and CSS
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/linebkg.gif">

<tr>
<td width="100%"><font face="Arial" size="2"><b>   <font color="#FFFFFF"><a
href="index.html">HOME</a>   |   <a href="news.html">NEWS</a>   |
   <a href="products.html">PRODUCTS</a>   |   <a
href="services.html">SERVICES</a>   |   <a href="about.html">ABOUT
US</a>   |  <a
href="contact.html">CONTACT US</a></font></b></font></td>
</tr>
</table>
HTML ..

CSS . -->
CSS (Cascading Style Sheets)
Web
Page
information
viewer
Multimedia
e-Media Advertise

web page
Page 113 of 197
Web Page Layer

1. Content, 2. Presentation, 3. Behavior
Content Layer HTML text Main Presentation
Layer Content Layer Content
.. CSS Behavior Layer user
input filtering
..
validation
JavaScript
CSS Web Page

HTML Layout HTML content
CSS
CSS
Web
Page
Layout
HTML
CSS
file
CSS
CSS Cascading Style Sheets fonts, text alignment, spacing,

margins, and list formatting 1996 World Wide Web Consortium (W3C)
CSS1 1998 CSS2
CSS3
Applying Usage
CSS Inline, External Internal
Page 114 of 197

Internal CSS
HTML Document Internal CSS Internal

CSS HTML page <head></head> elements
<html>
<head>
<title>Internal CSS by WWM</title>
</style>
</head>
<body>
</body>
</html>
External CSS
Internal CSS Web Page Layout , Design file Control

External CSS Control External CSS
.css html page

html page
tree type style folder

css file
<html>
<head>
<title>External CSS by WWM</title>
Page 115 of 197
<link rel="stylesheet" type="text/css" href="style/style.css" />

</head>
<body>
</body>
</html>
CSS Style Sheets External

Tutorial External Style Sheets
Inline CSS
Inline HTML tag

inline style attribute Property

<p style="color: red; margin-left: 50%">This is Paragraph</p>
Syntax . Structure
CSS
selector {property: value}
HTML
<tag
attribute=value>
CSS selector {property: value}
HTML
CSS
<tag attribute=value>
selector {property: value}
- <body bgcolor=red>
- body {background-color: red}
Page 116 of 197
Selector HTML tag .. <body> tag body selector

selector property value html tag element
body {background-color:
red} HTML body
background ..
Value
Value Double Quote -- "
p {font-family: "sans serif"} Double Quote
CSS
HTML
..
Colour
Name
Hex
Code
Property
Property
semicolon
p {text-align: center; font-family: "sans serif"}
Selector
Selector HTML tag style sheet selector
HTML tag body, h1,h2,p,input,textarea,dl,dt,dd,td,th Selector
h1,h2,h3,h4,h5,h6
{
color: red;
}
h1-h6 Heading HTML Page <h1>
<h2> color Multiple Selector
Page 117 of 197
Class Selector
CSS Class Selector HTML Element
content Class Selector ..

CSS Code
p.right {text-align: right}
p.center {text-align: center}
p.left{text-align: left}
HTML Code
<html>
<head>
<title>CSS by WWM</title>
</head>
<body>
<p class="right">This is RIGHT</p>
<p class="center">This is CENTER</p>
<p class="left">This is LEFT</p>
</body>
</html>
Page 118 of 197
<p> element class attribute CSS class selector value

class=right
p.right
{text-align:
right}
class selector element CSS

CSS Code
.right {text-align: right}
.center {text-align: center}
.bold{font-weight: bold;}
HTML Code
<html>
<head>
</head>
<body>
<h1 class="center">This is CENTER Head</h1>
<p class="right">This is RIGHT</p>
<p class="bold">This is BOLD</h3>
</body>
</html>
<p> element <h> element
class class
class
CSS Code
.mgmg {text-align: right}
.123 {text-align: center}
HTML Code
<html>
<head>
</head>
Page 119 of 197
<body>
<h1 class="123">This is CENTER Head</h1>
<p class="mgmg">This is RIGHT</p>
</body>
</html>
code result class=mgmg class=123
ID Selector
Class Selector ID Selector ID Selector selector # sign
CSS Code
#idsel{
text-align: center;
color: red
}
HTML Code
<html>
<head>
</head>
<body>
<h1 id="idsel">This is ID Selector</h1>
</body>
</html>
Page 120 of 197
-: ID selector ID attribute Class selector Class attribute
Code Format
CSS code
HTML
.. -
body {
scrollbar-face-color: #000000;
font-size: 10px;
font-family: times;
}
p{
Page 121 of 197
font-size: 9px;
font-family: verdana;
color: red;
}

Comment /* --- */
CSS Comment /* comment text */ .. /*

comment */ browser
comment
/*
Name : CSS Tutorial
URL: http://www.worldwidemyanmar.com
Description: This is HTML and CSS Tutorial by WWM
Version: 1.0
Author: Administrator
Tags: news, reviews, tutorial, products, buy, sell
*/
body {
scrollbar-face-color: #000000;
font-size: 10px;
font-family: times;
}
/* This is paragraph */
p{
font-size: 9px;
font-family: verdana;
color: red;
}
CSS Author CSS

Comment
Page 122 of 197
Colors and Backgrounds
HTML Webpage Background Background Image

..
Property
color

Property foreground
<h1>
CSS HTML

CSS Code (style.css)
h1{
color: #FF0000;
}
HTML Code (index.html)
<html>
<head>
</head>
<body>
<h1>This is Red Header</h1>
</body>
</html>
Page 123 of 197
background-color
Background,
Text
Background

body {
background-color: cyan;
}
h1 {
color: #FF0000;
background-color: #3499AB;
}
<html>
<head>
</head>
<body>
</body>
</html>
background-image
background-image .
Value url(filename); url
Web
Link
url(http://www.worldwidemyanmar.com/my-computer1.png);
Page 124 of 197

body {
background-image: url("my-computer1.png");
}
h1 {
color: #FF0000;
}
<html>
<head>
</head>
<body>
</body>
</html>
background-repeat
Page 125 of 197
..

value
Value
background-repeat: repeat-x

background-repeat: repeat-y
background-repeat: repeat
Default Value
background-repeat: no-repeat
repeat
..
norepeat
norepeat
body {
background-repeat: no-repeat;
}
h1 {
color: #FF0000;
}
<html>
<head>
</head>
Page 126 of 197

<body>
</body>
</html>
background-attachment
lock
unlock
lock browser
scroll

Value
background-attachment: scroll
Image
Unlock
Default Value
background-attachment: fixed
lock

body {
background-attachment: fixed;
}
h1 {
color: #FF0000;
Page 127 of 197

}
<html>
<head>
</head>
<body>
</body>
</html>
Scroll

..
background-position
position
100px
255px
100px 255px
Browser
Page 128 of 197

Value
background-position: 2cm 2cm
2cm 2cm

background-position: 50% 25%
background-position: top right
top right left

bottom

body {
background-position: right bottom;
}
h1 {
color: #FF0000;
}
<html>
<head>
</head>
<body>
</body>
</html>
Page 129 of 197
browser
..
background
background background properties

CSS code
background-position: right bottom;
code ..
CSS Code (style.css) {background property}
body {
background: cyan url("my-computer1.png") no-repeat
fixed right bottom;
}
h1 {
color: #FF0000;
}
<html>
<head>
Page 130 of 197

</head>
<body>
</body>
</html>
background Compiling
Fonts
CSS font
Property
font-family
font-family
CSS
font
.. web programmer font user

font
family-name generic-family
Family-name Times New Roman, Arial , Verdana, Tahoma
font
Generic family Times New Roman, Garamond, Georgia
serif generic family
Page 131 of 197

CSS Code (style.css) {background property}
h1 {
font-family: arial, verdana, sans-serif;
}
h2 {
font-family: "Times New Roman", serif;
}
<html>
<head>
</head>
<body>
<h1>Heading 1 written in Arial</h1>
<h2>And heading 2 in Times New Roman</h2>
</body>
</html>
Page 132 of 197
font-family arial font .. font

verdana .. verdana sans-serif font

font-style
font
normal,
italic
or
oblique
styling

h1 {
font-style: italic;
}
h2 {
font-family: "Times New Roman", serif;
}
<html>
<head>
</head>
<body>
<h1>Heading 1 written in Arial Roman - Italic</h1>
Page 133 of 197

<h2>And heading 2 in Times New </h2>
</body>
</html>
Heading 1
font-variant
size
size

h1 {
font-variant: small-caps;
}
h2 {
font-variant: normal;
}
<html>
<head>
</head>
<body>
<h1>Heading 1 - Small Caps</h1>
Page 134 of 197

<h2>And heading 2 - normal</h2>
</body>
</html>
font-weight
normal bold
p{
}
td {
font-weight: bold;
}
<html>
<head>
</head>
<body>
<table border="1" cellpadding="10">
<tr>
<td>Text in bold</td>
</tr>
Page 135 of 197

</table>
<p>Normal text here</p>
</body>
</html>
Cell Bold ..
font-size
Font ..
pixels percentages
CSS em pt
px pt absolute size % em user
adjust size
Browser Zoom In , Zoon Out size
Page 136 of 197
Points
Pixels
Ems
Percent
6pt
8px
0.5em
50%
7pt
9px
0.55em
55%
7.5pt
10px
0.625em
62.5%
8pt
11px
0.7em
70%
9pt
12px
0.75em
75%
10pt
13px
0.8em
80%

10.5pt
14px
0.875em
87.5%
11pt
15px
0.95em
95%
12pt
16px
1em
100%
13pt
17px
1.05em
105%
13.5pt
18px
1.125em
112.5%
14pt
19px
1.2em
120%
14.5pt
20px
1.25em
125%
15pt
21px
1.3em
130%
16pt
22px
1.4em
140%
17pt
23px
1.45em
145%
18pt
24px
1.5em
150%
20pt
26px
1.6em
160%
22pt
29px
1.8em
180%
24pt
32px
2em
200%
26pt
35px
2.2em
220%
27pt
36px
2.25em
225%
28pt
37px
2.3em
230%
29pt
38px
2.35em
235%
30pt
40px
2.45em
245%
32pt
42px
2.55em
255%
34pt
45px
2.75em
275%
36pt
48px
3em
300%

h1 {
font-size: 30px;
}
h2 {
font-size: 12pt;
}
h3 {
font-size: 120%;
}
p{
font-size: 1em;
}
<html>
Page 137 of 197

<head>
</head>
<body>
<h1>Heading <h1> size 30px</h1>
<h2>Heading <h2> size 1cm</h2>
<h3>Heading <h3> size 120%</h3>
<p>Paragraph <p> size 1em</p>
</body>
</html>
font
font
compiling
..
background
Property
Background Compile font property font

compiling
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
CSS Code (style.css) {Font Compiling}
p{
font: italic bold 30px arial, sans-serif;
}
Page 138 of 197

<html>
<head>
</head>
<body>
<p>This is Font Compiling</p>
</body>
</html>
Text
alignment
spacing
Property
text-indent
Microsoft Word text-indent

p{
text-indent: 50px;
}
Page 139 of 197
<html>
<head>
</head>
<body>
<p>This is Text Indent</p>
</body>
</html>
text-indent: 50px
text-align
Alignment
th {
text-align: right;
}
td {
text-align: center;
}
p{
text-align: justify;
}
Page 140 of 197
<html>
<head>
</head>
<body>
<table border="1" width="100%">
<tr>
<th>Heading 1</th>
</tr>
<tr>
<td>Cell 1</td>
</tr>
</table>
<p>Justified text in paragraphs</p>
</body>
</html>
text-decoration

h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
Page 141 of 197
}
h3 {
text-decoration: line-through;
}
<html>
<head>
</head>
<body>
<h1>This text is underlined</h1>
<h2>This text is overlined</h2>
<h3>This text is lined trough</h3>
</body>
</html>
text-spacing

h1 {
letter-spacing: 5px;
}
p{
letter-spacing: 30px;
Page 142 of 197
}
<html>
<head>
</head>
<body>
<h1>Space between text characters</h1>
<p>This is 30 px text spacing</p>
</body>
</html>
text-transform
Uppercase Lowercase
capitlize Capital, Small letter
text-transform
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
p{
Page 143 of 197

text-transform: lowercase;
}
<html>
<head>
</head>
<body>
<h1>this heading is uppercase</h1>
<ul>
<li>u mg tin</li>
<li>aung aung</li>
<li>hla hla</li>
</ul>
<p>This is LOWERCASE</p>
</body>
</html>
CSS HTML code <p> tag

LOWERCASE text-transform lowercase
browser lowercase
Link
Page 144 of 197

Hyperlink

unvisited,
visited,
active
Link
mouse pointer

HTML Link tag Anchor <a> tag
name class , id class
pseudo-class
pseudo-class HTML class
markup pseudo-class Dynamic pseudo-clas
colon (:) .. selector pseudo-class
white space
a:link {
declarations
}
a:visited {
declarations
}
a:focus {
declarations
}
a:hover {
declarations
}
a:active {
declarations
}
li:first-child {
declarations
}
pseudo-class
Link
Pseudo-class
color, background-color
Pseudo-Class for Links
link
User
Link
Page 145 of 197
Syntax
:link {
declaration block
}
a:link {
color: #0be734;
}
<html>
<head>
</head>
<body>
<h1>Unvisited links are light blue</h1>
<p><a href="index1.html">This is a unvisited link</a></p>
</body>
</html>
Link index1.html link CSS

link
visited
Link
Syntax
:visited {
Page 146 of 197

declaration block
}
a:visited {
color: #FF0000;
}
<html>
<head>
</head>
<body>
<h1>Visited Links are red</h1>
<p><a href="index.html">This is a visited link</a></p>
</body>
</html>
Link index.html link

..
active
link click :Syntax

:active {
declaration block
}
Page 147 of 197

a:active {
background-color: #FFFF00;
}
<html>
<head>
</head>
<body>
<h3>Active links get a yellow background</h3>
<p><a href="index.html">Click here and keep the button
down</a></p>
</body>
</html>
Link Click Link active
CSS
..
hover
Mouse pointer Link font design

effect
Syntax
:hover {
declaration block
Page 148 of 197
}
a:hover {
color: orange;
font-style: italic;
}
<html>
<head>
</head>
<body>
<h1>Hover effect on links!</h1>
<p><a
href="index.html">Move
the
cursor
over
this
link</a></p>
</body>
</html>
link mouse pointer CSS code

italicized
Note-:
background image
text-spacing Uppercase, Lowercase

Page 149 of 197
Link Line
link
underline
line
Syntax
a{
declaration block
}
a{
text-decoration:none;
}
<html>
<head>
</head>
<body>
<h1>Remove underlining from links</h1>
<p><a href="index.html">This is a example of a link without
underlining!</a></p>
</body>
</html>
line
Page 150 of 197
property
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:active {
background-color: yellow;
}
a:hover {
color:red;
}

Identification and grouping of elements (class and id)

Categories
category

Identification
of Elements
class
class id ..
class
red wine white wine grapes wine
Page 151 of 197

<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
white wine link red wine
class attribute
a{
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #FF0000;
}
<html>
<head>
</head>
<body>
Page 152 of 197

<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a
href="cs.htm"
class="redwine">Cabernet
Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
<p>This is an example of a <a href="dok.htm">link without any class</a> - it is still
blue.</p>
</body>
</html>
link a selector
color ..
class
attribute
id
id class id selector id selector # sign ID

Selector
Page 153 of 197
#c1-2 {
color: red;
}
<html>
<head>
</head>
<body>
<h1 id="c1">Chapter 1</h1>
<h2 id="c1-1">Chapter 1.1</h2>
<h1 id="c2">Chapter 2</h1>
</body>
</html>
HTML chapter 1, 1.1, 1.2, 2 id class

css id selector
class value
Grouping of elements (span and div)
Page 154 of 197
span div HTML

.. CSS class id attribute
Grouping
with
<span>
span tag class attrribute

span.benefit {
color:red;
}
<html>
<head>
</head>
<body>
<p>Early
to
bed
and
early
to
rise
makes
man
<span
class="benefit">healthy</span>, <span class="benefit">wealthy</span> and <span

class="benefit">wise</span>.</p>
</body>
</html>
span tag

<div>
div Elements Group
Page 155 of 197

#democrats {
background:blue;
}
#republicans {
background:red;
}
<html>
<head>
</head>
<body>
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
Page 156 of 197

</div>
</body>
</html>
Democrats Republicans
div tag id attribute CSS id selector .
The box model

Professional Web page
CSS Layout
.. CSS Styling and Layout
margin,
border,
padding and content
CSS
The box model structure
Page 157 of 197
div Elements Group

h1 {
color: #0000FF;
margin-top: 10px;
margin-right: 255px;
margin-bottom: 8px;
margin-left: 30px;
}
p{
color:#FFAA66;
margin-top: 3px;
margin-right: 30px;
margin-bottom: 3px;
margin-left: 30px;
padding-left: 70px;
}
Page 158 of 197
<html>
<head>
</head>
<body>
<h1>Article 1:</h1>
<p>All human beings are born free and equal in dignity and rights. They are endowed
with reason and conscience and should act towards one another in a spirit of brotherhood</p>
</body>
</html>
Source Code Result
Page 159 of 197
margin, padding, border content
Margin
Margin right, left, top and bottom
Page 160 of 197

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

body {
margin: 100px 40px 10px 70px;
}
top, right, bottom, left
Padding
Border elements
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
<html>
<head>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>All human beings are born free and equal in dignity and
rights. They are endowed with reason and conscience and should act towards
Page 161 of 197
one another in a spirit of brotherhood</p>

</body>
</html>
padding-left:120px;
Header
Header
..
padding
padding
Borders
Web Content
border border width , border style

border
Borders Properties
border-width
Border
thin,
medium
thick
px

h1 {
border-width: thick;
Page 162 of 197

}
h2 {
border-width: 20px;
}
border-color
Border Color {Cyan, Yell,

etc } () color hex code {#123456} () rgb color {
rgb(123,123,123)}
h1 {
border-color: gold;
}
h2 {
border-color: #FFFF00;
}
border-style
border
dotted
line
, dashed line value

dotted, dashed, solid, double, goove, ridge, inset, outset
Page 163 of 197

h1 {
border-style: dotted;
}
h2 {
border-style: outset;
}
Border compile
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}

p {
Page 164 of 197
border: 1px solid blue;

}
Borders :CSS Code (style.css)

h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
top-, bottom-, right- or left borders special properties
..
h1 {
border-top-width: 20px;
border-top-style: solid;
border-top-color: red;
Page 165 of 197
border-bottom-width: 20px;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: 20px;
border-right-style: solid;
border-right-color: green;
border-left-width: 20px;
border-left-style: solid;
border-left-color: orange;
}
<html>
<head>
</head>
<body>
<h1>Header 1</h1>
with reason and conscience and should act towards one another in a spirit of brotherhood</p>
</body>
</html>
Page 166 of 197

Height and Width
Elements box
<div> tag class attribute
div.box {
height: 200px;
width: 400px;
border: 1px solid black;
background: orange;
}
<html>
<head>
</head>
<body>
<h1>Header 1</h1>
Page 167 of 197
<div class="box">All human beings are born free and equal in dignity and rights. They
are endowed with reason and conscience and should act towards one another in a spirit of
brotherhood</div>
</body>
</html>
400px 200px box

Floating
Magazine

Page 168 of 197

#picture {
float:left;
width: 200px;
}
float: left
<html>
<head>
</head>
<body>
<div id="picture">
<img src="my-computer1.png" alt="My Computer" width="150px" heigh="150px">
</div>
with reason and conscience and should act towards one another in a spirit of brotherhood. All human
beings are born free and equal in dignity and rights. They are endowed with reason and conscience and
should act towards one another in a spirit of brotherhood.</p>
</body>
</html>
Page 169 of 197
float
column

#column1 {
float:left;
width: 31%;
background-color:#999999;
}
#column2 {
float:left;
width: 31%;
background-color:#0099CC;
}
#column3 {
float:left;
width: 31%;
background-color:#666600;
}
id class
<html>
<head>
</head>
<body>
<div id="column1">
Page 170 of 197
should act towards one another in a spirit of brotherhood.</p></div>

<div id="column2">
<div id="column3">
</body>
</html>
float column background-color Padding
float clear: both;

#picture {
float:left;
width: 200px;
}
Page 171 of 197
.floatstop {
clear:both;
}
<html>
<head>
</head>
<body>
<div id="picture">
<img src="my-computer1.png" alt="My Computer" width="150px" heigh="150px">
</div>
<h1>My Computer</h1>
<p class="floatstop">All human beings are born free and equal in dignity and rights. They
are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.
All human beings are born free and equal in dignity and rights. They are endowed with reason and
conscience and should act towards one another in a spirit of brotherhood.</p>
</body>
</html>
float floating
css .floatstop class selector
Page 172 of 197

CONTENT
Web
Design
HTML and CSS
Positioning of elements
Contents
browser
.. browser grid

Headline content
100 px 200 px
CSS
h1 {
position:absolute;
top: 100px;
left: 200px;
}
Page 173 of 197
Absolute
Relative
Absolute Example
#box1 {
position:absolute;
top: 50px;
left: 50px;
background: #FA7C00;
width: 50px;
height:50px;
padding:2px;
font-family:arial;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
background: #FFFF00;
Page 174 of 197
width: 50px;
height:50px;
padding:2px;
font-family:arial;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
background: #00FF00;
width: 50px;
height:50px;
padding:2px;
font-family:arial;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
background: #00FFFF;
width: 50px;
height:50px;
padding:2px;
font-family:arial;
}
<html>
<head>
</head>
<body>
Page 175 of 197
<div id="box1">Box 1</div>

</body>
</html>
Absolute div box left-up, right-up, right-bottom, left-bottom

Relative
Relative Example
#dog1 {
position:relative;
left: 350px;
bottom: 10px;
}
#dog2 {
position:relative;
left: 450px;
bottom: 100px;
}
#dog3 {
position:relative;
left: 50px;
Page 176 of 197
bottom: 100px;
}
<html>
<head>
</head>
<body>
<h1>My Computer</h1>
<div id="dog1"><img src="images/dog1.gif"></div>
<p>All human beings are born free and equal in dignity and rights. They are endowed with reason
and conscience and should act towards one another in a spirit of brotherhood. All human beings are born
free and equal in dignity and rights. They are endowed with reason and conscience and should act
towards one another in a spirit of brotherhood.</p>
</body>
</html>
Page 177 of 197
CSS code content image ..

content
browser
z-index (Layers)
z-index content
content content ..
index
#ten_of_diamonds {
Page 178 of 197
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
<html>
Page 179 of 197
<head>
</head>
<body>
<h1>Royal Flush</h1>
<div id="ten_of_diamonds">
<img src="images/diamonds_10.gif" alt="10 of diamonds">
</div>
<div id="jack_of_diamonds">
<img src="images/diamonds_jack.gif" alt="Jack of diamonds">
</div>
<div id="queen_of_diamonds">
<img src="images/diamonds_queen.gif" alt="Queen of diamonds">
</div>
<div id="king_of_diamonds">
<img src="images/diamonds_king.gif" alt="King of diamonds">
</div>
<div id="ace_of_diamonds">
<img src="images/diamonds_ace.gif" alt="Ace of diamonds">
</div>
</body>
</html>
Page 180 of 197
King z-index: 4 6
-------------------------------------------------------xxx CSS xxx----------------------------------------------------------
Creating Web Design HTML + CSS

HTML CSS Web Page
Web Page
Final Result :-
Page 181 of 197
Web Page

. Header Header Container
. Menu Menu Container
. Content Content Container
. Right Navigation
. Footer Footer Container
Column Web Page Main Content
Column Navigation Column
HTML .. HTML elements
<html>
<head>
Page 182 of 197

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
External CSS <link rel=stylesheet
character
set
Unicode
UTF-8
meta
tag
Header Container Header <body> tag

<html>
<head>
</head>
<body>
<div id="head-container">
<div id="header">
<h1>World Wide Myanmar</h1>
</div>
</div>
</body>
</html>
Container Content <h1>
id attribute CSS id selector CSS file style.css
Notepad New style.css
style.css CSS Code (style.css)
body,td,th {
font-family: Zawgyi-One;
}
h1,h2,h3,h4,h5,h6 {
Page 183 of 197
}
#head-container
{
color: #000;
background: #ccc;
}
#header
{
margin: 0 auto;
width: 860px;
padding: 20px;
background: #ddd;
}
#header h1 { margin: 0; }
body, td, th h1-h6 font-family ..
font .. Zawgyi-One font-family: ZawgyiOne;
Header Container #ccc Header #ddd
Header 860px
header h1 margin 0
Menu
<html>
<head>
</head>
Page 184 of 197
<body>
<div id="header">
</div>
</div>
<div id="menu-container">
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div>
</div>
</body>
</html>
Menu Home, About, Services, Contact us unordered list group
body,td,th {
}
h1,h2,h3,h4,h5,h6 {
}
#head-container
{
color: #000;
background: #ccc;
}
Page 185 of 197
#header
{
margin: 0 auto;
width: 860px;
padding: 20px;
background: #ddd;
}
#menu-container
{
float: left;
width: 100%;
color: #000;
background: #333;
}
#menu
{
margin: 0 auto;
width: 900px;
}
#menu ul
{
margin: 0;
padding: 0;
}
#menu ul li
{
list-style-type: none;
display: inline;
}
Page 186 of 197
#menu li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#menu li a:hover { background: #383; }
Menu Containter float Menu Container
100% menu 900px Menu
Mouse #383 Menu
line .. . border-right 1px solid

Content Content Container Right
Navigation
<html>
<head>
</head>
<body>
<div id="header">
</div>
</div>
<div id="menu">
<ul>
Page 187 of 197

</ul>
</div>
</div>
<div id="content-container">
<div id="content-container2">
<div id="content">
<h2>
Page heading
</h2>
<p>
Home Page Content ....</p>

<p> </p>
<p> Home About Services Contact us Menu bar
..</p>
<p> </p>
<p> </p>
</div>
<div id="rightnav">
<h3>Right Navigation</h3>
<p>
Widget .. blogroll
Javascript Counter .. ...</p>
</div>
</div>
</div>
</body>
</html>
space content-container 100% contentcontainer3 900px

body,td,th {
}
h1,h2,h3,h4,h5,h6 {
Page 188 of 197
}
#head-container
{
color: #000;
background: #ccc;
}
#header
{
margin: 0 auto;
width: 860px;
padding: 20px;
background: #ddd;
}
#menu-container
{
float: left;
width: 100%;
color: #000;
background: #333;
}
#menu
{
margin: 0 auto;
width: 900px;
}
#menu ul
{
margin: 0;
padding: 0;
Page 189 of 197
}
#menu ul li
{
display: inline;
}
#menu li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
}
#content-container
{
float: left;
width: 100%;
color: #000;
background: #eee;
}
#content-container2
{
margin: 0 auto;
width: 900px;
}
#content-container3
{
Page 190 of 197
float: left;
width: 900px;
background: #FFF url(two-fixed-background.gif) repeat-y 100% 0;
}
#content
{
clear: left;
float: left;
width: 560px;
padding: 20px 0;
margin: 0 0 0 30px;
display: inline;
}
#content h2 { margin: 0; }
#rightnav
{
float: right;
width: 240px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
}
#rightnav h3 { margin: 0; }
rightnav float:right width: 240px HTML
content-container3
900
px
240px
.. content
footer
..
footer
Copyright
. footer menu
:HTML Code (index.html)
Page 191 of 197
<html>
<head>
</head>
<body>
<div id="header">
</div>
</div>
<div id="menu">
<ul>
</ul>
</div>
</div>
<div id="content-container">
<div id="content">
<h2>
Page heading
</h2>
<p>
Home Page Content ....</p>

<p> </p>
<p> Home About Services Contact us Menu bar
..</p>
<p> </p>
<p> </p>
</div>
<div id="rightnav">
<h3>Right Navigation</h3>
<p>
Widget .. blogroll
Page 192 of 197
Javascript Counter .. ...</p>

</div>
</div>
</div>
<div id="footer-container">
<div id="footer">
Copyright World Wide Myanmar, 2010. All rights reserved.
</div>
</div>
</div>
</body>
</html>

/*
Name : CSS Tutorial
URL: http://www.worldwidemyanmar.com
Description: This is HTML and CSS Tutorial by WWM
Version: 1.0
Author: Administrator
Tags: news, reviews, tutorial, products, buy, sell
*/
body,td,th {
}
h1,h2,h3,h4,h5,h6 {
}
#head-container
{
color: #000;
background: #ccc;
}
Page 193 of 197
#header
{
margin: 0 auto;
width: 860px;
padding: 20px;
background: #ddd;
}
#menu-container
{
float: left;
width: 100%;
color: #000;
background: #333;
}
#menu
{
margin: 0 auto;
width: 900px;
}
#menu ul
{
margin: 0;
padding: 0;
}
#menu ul li
{
display: inline;
}
Page 194 of 197
#menu li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
}
#content-container
{
float: left;
width: 100%;
color: #000;
background: #eee;
}
#content-container2
{
margin: 0 auto;
width: 900px;
}
#content-container3
{
float: left;
width: 900px;
background: #FFF url(two-fixed-background.gif) repeat-y 100% 0;
}
#content
{
Page 195 of 197
clear: left;
float: left;
width: 560px;
padding: 20px 0;
margin: 0 0 0 30px;
display: inline;
}
#content h2 { margin: 0; }
#rightnav
{
float: right;
width: 240px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
}
#rightnav h3 { margin: 0; }
#footer-container
{
clear: left;
color: #fff;
background: #000;
}
#footer
{
margin: 0 auto;
width: 900px;
text-align: right;
padding: 20px;
height: 1%;
}
Page 196 of 197
:-
HTML CSS Web Programming

Ref: wiki, google, indexdot.com,ultimate css, ultimcate html, html.net and so on
THE END
Remember what I say Dream It, Code It

PlanetCreator
Page 197 of 197

Web Design HTML and CSS

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 Design HTML and CSS

Uploaded by

Copyright:

Available Formats

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

HTML and CSS

World Wide Myanmar