Upload
muni18
View
218
Download
0
Embed Size (px)
Citation preview
7/31/2019 HTML & Frontpage - Session 1
1/30
Session 1
HTML in Web Pages
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
3/30
Internet is the collection of two or moredistinct networks joined together.
Introduction
7/31/2019 HTML & Frontpage - Session 1
4/30
What is a Website ?
Webpages and Website
7/31/2019 HTML & Frontpage - Session 1
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..)
7/31/2019 HTML & Frontpage - Session 1
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
Webpages and Website(cont..)
7/31/2019 HTML & Frontpage - Session 1
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.
Webpages and Website(cont..)
7/31/2019 HTML & Frontpage - Session 1
8/30
A Typical Home Page
Webpages and Website(cont..)
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
13/30
The Structure of an HTML Document :
Header Section
Actual Body
HTML Document Structure
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
15/30
The BODY Section
Contains the matter that is to be displayed on the Page
Enclosed within the and Tags
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
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
This Heading is created with H2 tag
This Heading is created with H3 tag
This Heading is created with H4 tag
This Heading is created with H5 tag
This Heading is created with H6 tag
HeadlineTag
7/31/2019 HTML & Frontpage - Session 1
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)
7/31/2019 HTML & Frontpage - Session 1
19/30
The HTML Tags
.
are used to format Text into paragraphsBy 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
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
21/30
The Font Testing Page
This page demonstrates how the Font to be
displayed On a Web page is controlled
Font Tag - Example
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
23/30
The Tag places the text of the document intomultiple, equal-width columns.
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
25/30
It can be added to a HTML document using the tag
The Syntax is as below :
Paragraph Specification
Horizontal line
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
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
7/31/2019 HTML & Frontpage - Session 1
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