2. Gateway to Web Page Development / 2 of 26
Session Objectives
Explain what is meant by a Web Sites
List the purpose of a Web Site
Explain how to Design Web pages
Spell out the guidelines for making a
Web Page
Understand what HTML is
3. Gateway to Web Page Development / 3 of 26
Web Site and Web Page
The first page which opens in a Web Site is the
HOME page
There is no restriction with respect to the site
size
One web site can span over more than one
server also
4. Gateway to Web Page Development / 4 of 26
Features of Web Pages
Web pages allow the following features :
Product Catalogues
Web Chat
Online order tracking
Online Demonstration
Online Feedback System
5. Gateway to Web Page Development / 5 of 26
General Guidelines
Avoid use of too many fonts
Avoid too many colours on the
same page
Use pastoral colours in corporate
and professional slides
Use bright and sharp hues in kids
and entertainment slides
6. Gateway to Web Page Development / 6 of 26
Evolution of HTML
Markup Language -it refers to
the tags which specify how to
incorporate text, graphics,
sound and the visual elements
<HTML>
<HEAD>
…...
</HEAD>
<BODY>
……
</BODY>
</HTML>
Heading Section
Actual Text
7. Gateway to Web Page Development / 7 of 26
HTML Document
<HTML>
<Head>
<Title>MY First HTML
Document
<H1> This is the heading of the
document </H1>
</Head>
<Body>
<P> Learn HTML fast and
Easy</P>
<P> My First Web
Page</P>
</Body>
</HTML>
Output in Browser
8. Gateway to Web Page Development / 8 of 26
Sample HTML
<HTML>
<HEAD>
<TITLE>LOOK OF AN HTML
DOCUMENT</TITLE>
</HEAD>
<BODY>
“Welcome to the
World of HTML”
</BODY>
</HTML>
<TITLE>….<TITLE>Tag
<BODY>…..</BODY> Tag
9. Gateway to Web Page Development / 9 of 26
HTML Tags
Headline Tags
Example
<HTML>
<HEAD>
<H1> This Heading is created
using H1 tag </H1>
<H2> This Heading is created
using H2 tag </H2>
<H3> This Heading is created
using H3 tag </H3>
<H4> This Heading is created
using H4 tag </H4>
<H5> This Heading is created
using H5 tag </H5>
<H6> This Heading is created
using H6 tag </H6>
</HEAD>
</HTML>
Syntax
<HTML>
<HEAD>
<H1>……….</H1>
</HEAD>
10. Gateway to Web Page Development / 10 of 26
Paragraph Tag
<P> ……. </P>
Attributes
ALIGN Attribute
CENTER
LEFT
RIGHT
Example
<P>
The paragraph
text should be added
here within the <P> tag.
</P>
Paragraph Formatting
11. Gateway to Web Page Development / 11 of 26
Font Settings Tags
ATTRIBUTES
FACE
<FONT FACE=”ARIAL”>
PARAGRAPH SPECIFICATION
</FONT>
Size
<FONT SIZE=”5”>
PARAGRAPH SPECIFICATION
</FONT>
Color
<FONT COLOR=”Blue”
PARAGRAPH SPECIFICATION
</FONT>
<FONT>……..</FONT> - Used for text Style Specifications
12. Gateway to Web Page Development / 12 of 26
Font Tags
COLOUR HEXADECIMAL
VALUE
Red #FF0000
Green #00FF00
Blue #0000FF
White #FFFFFF
Black #000000
Gray #808080
Dark Red #800000
Dark Green #008000
Dark Blue #000080
Yellow #FFFF00
Magenta #FF00FF
Cyan #00FFFF
Color Attribute
Face Attribute
- Terminal for Times
New Roman font
- Arial
- Arial Black
- Courier
- Fixedsys
- Garamond
- Impact
- MS Sans Serif
13. Gateway to Web Page Development / 13 of 26
DIV Tag -Used for applying
alignment and style characteristics
to only a section of a document.
DIV Attribute
Align
CENTER
LEFT
RIGHT
The <DIV> Tag
Syntax
<DIV
ALIGN=”Value”
TEXT
</DIV>
14. Gateway to Web Page Development / 14 of 26
An Example of <DIV> Tag
<HTML>
<BODY>
<DIV ALIGN=RIGHT>
<H1>Aligning a Block of Content to the Right</H1>
<P>You can use a DIV tag to align a block of content to the right.</P>
<P>The content can include anything you like, including tables,
images, lists, and so on. Note, however, that right-
aligned lists often do not look very neat.</P>
</DIV>
</BODY>
</HTML>
15. Gateway to Web Page Development / 15 of 26
Multicolumn Text
The MULTICOL tag places the text of the document into multiple,
equal-width columns
Syntax
<MULTICOL
COLS="Specifies the number of text columns for the
text"
GUTTER="Specifies the distance between the text
columns, by default is 10 pixels"
WIDTH="Specifies the width of each column and
the width of each column is the same” >
text in the document
</MULTICOL>
16. Gateway to Web Page Development / 16 of 26
Horizontal Line
<HR> Tag
Attributes
WIDTH
SIZE
Syntax
<HR>
Paragraph Specification
<HR>
Example
Width Attribute
<HR WIDTH = “50%” >
Size Attribute
<HR SIZE = “4” >
17. Gateway to Web Page Development / 17 of 26
Body Attribute
BGCOLOR
<BODY BGCOLOR = “#FF0000”>
BODY TEXT
<BODY TEXT = “#FF0000” >
Text is displayed in
red
18. Gateway to Web Page Development / 18 of 26
Text Formatting
Super Script - <SUP> …. </SUP>
<P> This Is My 7 <SUP> th </SUP> Program Using HTML </P>
Sub Script - <SUB> …. </SUB>
<P> H<SUB>2</SUB>O Is The Chemical Name For Water</P>
Strike effect - <STRIKE>…….. </STRIKE> tags.
<STRIKE> This Text Will Appear With Strike Effect </STRIKE>
Preformatted text - <PRE> …... </PRE> tags.
19. Gateway to Web Page Development / 19 of 26
Benefits of HTML
HTML is a simple but powerful
formatting language to use.
The Web pages can be linked
together using links.
HTML documents are device
independent.
20. Gateway to Web Page Development / 20 of 26
Limitations of HTML
No programming capabilities
Does not provide anything more
than formatted text, pictures and
sound
21. Gateway to Web Page Development / 21 of 26
Session in brief
In this session we covered:
Definition of a Web Site
Design issues in web sites
Development Phase
The HTML tags
Body Attributes in HTML
Text Formatting
The benefits and limitations of HTML