html

Add to Favourites

Post to:

Comments

Presentation Transcript

Slide 1 : Session 1 HTML in Web Pages

Slide 2 : Session Objectives Explain 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

Slide 3 : Internet is the collection of two or more distinct networks joined together. Introduction

Slide 4 : What is a Website ? Webpages and Website

Slide 5 : The basic unit of information displayed over the net is a Web Page. A Web site is a collection of web pages, which are interlinked Webpages and Website(cont..)

Slide 6 : The link for a Web Page is basically its URL (Uniform Resource Locator) that is the address of the computer where the page is present Webpages and Website(cont..)

Slide 7 : 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..)

Slide 8 : A Typical Home Page Webpages and Website(cont..)

Slide 9 : 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

Slide 10 : Markup languages are mainly required for performing typical 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

Slide 11 : 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

Slide 12 : 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

Slide 13 : The Structure of an HTML Document : ……………… …………………… Header Section Actual Body HTML – Document Structure

Slide 14 : 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 <META> Tag contains the Keywords that describe the content of the Page <HTML> <HEAD> <META name=“Author” content=“Graham”> <TITLE> Aptech Education

Slide 15 : The BODY Section Contains the matter that is to be displayed on the Page Enclosed within the and Tags My Home Page

This is the First Heading

This Page is about FrontPage 2000

Slide 16 : Guidelines for writing HTML Documents Tags are enclosed within a Left Bracket “<“ and a Right 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

Slide 17 : 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

Slide 18 : 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

Headline Tag (cont)

Slide 19 : 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

Slide 20 : 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 Italic text Font Tag

Slide 21 : The Font Testing Page

This page demonstrates how the Font to be displayed On a Web page is controlled

Font Tag - Example

Slide 22 : The

tag Used for applying Alignment and Style characteristics to only a section of the Document

]

Aligning a block of text to the Right

This is how you center-align the Text

Slide 23 : The Tag places the text of the document into multiple, equal-width columns. MULTICOL Tag

Slide 24 : Cols Specifies the number of text columns for the text Gutter Specifies the distance / gap between the text columns Width Specifies the width of every column. Incidentally, the width of all the columns should be the same MULTICOL Tag - Attributes

Slide 25 : It can be added to a HTML document using the

tag The Syntax is as below :

Paragraph Specification

Horizontal line

Slide 26 : 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

Slide 27 : Body Attributes BGCOLOR Specifies 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

Slide 28 : 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

Slide 29 : 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 & MIDDLE BORDER This attribute adds a Border around the Image IMG tag - attributes

Slide 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