HTML & Frontpage - Session 1

7/31/2019 HTML & Frontpage - Session 1

1/30

Session 1

HTML in Web Pages


2/30

Session ObjectivesExplain what a Web page is

List the purpose of a website Design Web pages

Spell out the guidelines for making a Web page

Introduction to FrontPage 2000 as a Web Development tool


3/30

Internet is the collection of two or moredistinct networks joined together.

Introduction


4/30

What is a Website ?

Webpages and Website


5/30

The basic unit of informationdisplayed over the net is a

Web Page. A Web site is acollection of web pages,which are interlinked

Webpages and Website(cont..)


6/30

The link for a Web Page is basically its URL(Uniform Resource Locator) that is the

address of the computer where the page ispresent



7/30

The First Page of a Website is meant to welcome the user.

This Page is called the Home Page.

All Sites necessarily have this Page.

The user can navigate to other Pages through Hyperlinks.



8/30

A Typical Home Page



9/30

A Website should ideally incorporate :

Information about the business that it has been built for

Text, Graphics, Photo & Multimedia as or when required

Simplicity in presenting the matter

A layout that facilitates easy access to all the information

Basics of a Web Page and Web Site Design


10/30

Markup languages are mainly required for performingtypical formatting functions like :

Setting margins for the Page

Enhancing the look by changing Font Settings

Adding special effects to the text and so on

Markup languages


11/30

First introduced in 1980

Main objective was to ensure consistent display of documents

It was named SGML or Standard Generalized Markup Language

HTML has evolved from SGML

Markup languages The Evolution


12/30

HTML stands for Hyper Text Markup Language

HTML evolved from SGML HTML is used to construct formatted Pages on the Web

For this, it uses Tags

These tags tell the Browser how to display information on the Pages

These pages subsequently can be viewed on any Browser

HTML


13/30

The Structure of an HTML Document :

Header Section

Actual Body

HTML Document Structure


14/30

The HEADER Section

Contains information about the current document

Includes information like the Title and the Keywords

The text contained within the Tag is displayed on the Title Bar of Browser

The Tag contains the Keywords that describe the content of the Page

Aptech Education


15/30

The BODY Section

Contains the matter that is to be displayed on the Page

Enclosed within the and Tags


16/30

Guidelines for writing HTML Documents

Tags are enclosed within a Left Bracket

These Brackets differentiate the Tags from the rest of the Text

Opening Tag is denoted as and Closing Tag is denoted as

Example of this : for beginning a heading and for closing it

Tag names, though not case-sensitive should be written in Caps

This is advised, so that the Tag names stand out among other Text


17/30

Used to display Headings & Sub-headings of different Sizes

6 Levels of Headings are supported : to

is the biggest and is the smallest size

This Heading is created with H1 tag






HeadlineTag


18/30

Attributes By Default, Headings are Left-aligned

The Alignment can be changed to Center or Right

The ALIGN attribute is used for this

My Heading

OR

My Heading

Headline Tag (cont)


19/30

The HTML Tags

.
are used to format Text into paragraphs
By default, the

tag displays a blank line at the top and bottom

To insert Blank lines within a Paragraph, the
Tag is used

The ALIGN attribute is used to align the Paragraph on the page

The values for the ALIGN attribute are Center, Left and Right

The tag can also be used instead of

Right Aligned Text

Paragraph Tag


20/30

The tag is ..

Used for Text style specifications

The FACE Attribute is used to set the Font of the Text The SIZE Attribute is used to specify the Size of the Text

The COLOR Attribute is used to specify the Color of the Text

The Tag is used with Text/Paragraph to mark Bold text

The Tag is used to mark Italictext

Font Tag


21/30

The Font Testing Page

This page demonstrates how the Font to be

displayed On a Web page is controlled

Font Tag - Example


22/30

The tagUsed for applying Alignment and Style characteristics to onlya section of the Document

]

Aligning a block of text to the Right

This is how you center-align the Text


23/30

The Tag places the text of the document intomultiple, equal-width columns.


24/30

Cols

Specifies the number of text columns for the text

GutterSpecifies the distance / gap between the text columns

Width

Specifies the width of every column. Incidentally, the width of all the columns should be thesame

MULTICOL Tag - Attributes


25/30

It can be added to a HTML document using the tag

The Syntax is as below :

Paragraph Specification

Horizontal line


26/30

Horizontal line - Attributes

Width

The Width of the Line can be specified in terms of Percentage of the Page Width

Size

The Thickness of the Line can be specified in terms of Pixels


27/30

Body AttributesBGCOLORSpecifies the Background Color for the Page

TEXT

Specifies the Color of Text on the Page

BGSOUND

Specifies a background Sound / Music that starts playing as soon as the Page loads


28/30

Images play a major role in enhancing the Look of a page

The Look on its part, attracts the users to visit and explore the Page

Images put into Web pages are called Inline Images

Images are mainly used as Buttons, Bullets, Photographs, Banners etc.

Most common formats are JPEG and GIF Images for a Page should be in the same Folder as the HTML document

The Tag is used to incorporate an Image into the document

IMG tag


29/30

SRC

Used to specify the name of the Image

ALIGN

Used for aligning the text description with respect to the Image. Possible values are TOP,

BOTTOM & MIDDLEBORDER

This attribute adds a Border around the Image

IMG tag - attributes


30/30

Microsoft FrontPage 2000

An easy to use WYSIWYG Tool for designing Web pages

Works closely with MS-Office

Can directly import documents from Word, Excel & PowerPoint

Features a gallery of Graphical design Themes

Includes Wizards and Templates, thus making life simpler

Active Page elements like Hit counters can be included directly

Date post:	05-Apr-2018
Category:	Documents
Upload:	muni18
View:	218 times
Download:	0 times