Session1 gateway to web page development

Gateway to Web Page development

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


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


Features of Web Pages

Web pages allow the following features : Product Catalogues Web Chat Online order tracking Online Demonstration Online Feedback System


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


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


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


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


HTML Tags

Headline Tags

Example

<HTML><HEAD> <H1> This Heading is created

using H1 tag </H1> <H2> This Heading is created





using H6 tag </H6></HEAD></HTML>

Syntax<HTML>

<HEAD>

<H1>……….</H1>

</HEAD>


Paragraph Tag

<P> ……. </P>

Attributes

ALIGN Attribute

CENTER LEFT RIGHT

Example

<P>The paragraphtext should be added here within the <P> tag. </P>

Paragraph Formatting


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


Font Tags

COLOUR HEXADECIMALVALUE

Red #FF0000Green #00FF00Blue #0000FFWhite #FFFFFFBlack #000000Gray #808080Dark Red #800000Dark Green #008000Dark Blue #000080Yellow #FFFF00Magenta #FF00FF

Cyan #00FFFF

Color AttributeFace Attribute

- Terminal for Times New Roman font- Arial- Arial Black- Courier- Fixedsys- Garamond- Impact- MS Sans Serif


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>


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>


Multicolumn Text

The MULTICOL tag places the text of the document into multiple, equal-width columns

Syntax

<MULTICOLCOLS="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>


Horizontal Line

<HR> Tag

Attributes

WIDTH

SIZE

Syntax

<HR> Paragraph Specification<HR>

Example

Width Attribute <HR WIDTH = “50%” >

Size Attribute <HR SIZE = “4” >


Body Attribute

BGCOLOR <BODY BGCOLOR = “#FF0000”>

BODY TEXT <BODY TEXT = “#FF0000” >

Text is displayed in red


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.


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.


Limitations of HTML

No programming capabilities Does not provide anything more

than formatted text, pictures and sound


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

Session1 gateway to web page development

Technology

Transcript of Session1 gateway to web page development