chapter 2 html

8/2/2019 Chapter 2 HTML

1/45

HTML Fundamentals


2/45

What is HTML?

y HTML or HyperText Markup Language, is how a World WideWeb browser displays multimedia documents. The documentsthemselves are plain text files with special tags or codes that the

WWW browser (e.g. Netscape, Internet Explorer) knows howto interpret and display on your screen.


3/45

About HTML?

y Hyper Text Markup Language.Constitutes a collection of platform independent styles

that define the various components of a web document.

Styles indicated by markup tags.

y What is HTML really?Plain-text documents can be created using any text

editor.

WYSIWYG editors are also available.


4/45

y W

hat is a markup language?One where we can embed special tags or formattingcommands in the text.

To describe how the text should be displayed / printed.

y HTML is a markup languageSpecial formatting codes (called tags) to adjust fonts, create

bulleted lists, create forms, display images, create tables, etc.


5/45

HTML Tags

y The left and right angle brackets (< and > signs )are used to enclose all special instructions,called tags.

y Two classes of tags:Those which appear in pairs.

Good morning Those which appear individually.

y Browsers interpret the tags to display a HTML

page in properly formatted form.


6/45

How the TagsWork

y When programming HTML you are essentially telling the computer

what to do and when to do it.

y The first part of the tag turns the tag on

y The ending part of the tag, , contains the "/" slashcharacter.

y This "/" slash tells a WWW browser to stop tagging the text. ManyHTML tags are paired this way. Think of the tag as a container.

y If you forget the backslash, a WWW browser will continue the tag forthe rest of the text in your document,producing undesirable results.


7/45

How to Create and View an HTML document?

1. Use an text editor such as Notepad to write the document.

2. Save the file as filename.html on a PC. This is called the Document

Source.

3. Open Internet Explorer (or any browser) Off-Line4. Switch to Internet Explorer

5. Click on File, Open File and select the filename.html document

that you just created.

6. Your HTML page should now appear just like any other Web page in

Internet Explorer.


8/45

Some points

y HTML files must end with the extension .htm or .htmly Tags are case insensitive

, and are all equivalent.

y Tags may be nested


9/45

Some points (cont..)

y Browsers ignore all extra spaces within a HTMLdocument.

y Why?

Browsers have to reformat the document to fit inthe current display area.

y It is good practice to use white spaces in a HTMLdocument.

Improves readability.


10/45


y Some tags can have one or more (named) attributes todefine some additional characteristics of the tag.


11/45


y Unrecognized tagsBrowsers normally ignore tags it does not recognize.

y Comment linesComments are included between .


12/45

HTML Document Structure

y A HTML document consists of two major portions:Head

Contains information about the document, like the title andmeta data describing the contents.

Body Contains the actual matter of the document.

Gets displayed within the browser window.


13/45

13

Used to bracket an entire HTML document.

is an opening tag

is a closing tag (note the direction of the slash!)

text between the opening and closing tag is called the element

placed at the top of document immediately after the tag

Used to provide information about a web page. Nests within itself other tags like and .

Structural HTML Tags


14/45

14

y

included as an element inside the section

element of this tag is the title displayed in title bar of the browser

may also be used as title of page when page is bookmarked

should be meaningful and uniquely identify the page

included as the second element inside the tags.

follows the portion of the document

contains the information to be displayed in the browser window

any attributes set on this tag will apply to the entire page

Structural HTML Tags


15/45

Two Major Sections of

an HTML Document

my home page

hi there

Head Section

Body Section


16/45

ASimple HTML Document

Title of the Document

This is the content of the document.

This is an italic font.

This coding is done in notepad (or any editor)


17/45


18/45

Structural HTML Tags (cont)

y

y Metadata is information about data.

y Keywords or descriptions to aid search engines.

y The tag provides metadata about the HTML

document. Metadata will not be displayed on the page,but will be machine parsable.

y The tag always goes inside the head element.


19/45


y Attributes

Attribute Value description

Content Text Specifies the content of the meta information

name author

description

keywords

Provides a name for the information in the

content attribute


20/45


y

Example


21/45


y . y Used to bracket the body of a HTML document.

y The body element defines the document's body.

y The body element contains all the contents of an HTML

document, such as text, hyperlinks, images, tables, lists, etc.


22/45


y . y Attributes:

y background=urlspecifies an image file tobe used as tiling background.

y bgcolor=color Sets the background color ofthe document.

y

text=color

Sets the default color for thenormal text in the document.y alink=color Sets the color of active links in

the document.y link=color Sets the default color for all the

links in a document.

y vlink=color Sets the color for the visitedlinks in the document.


23/45

How to specify colors?

y Two ways:(1) By specifying the red, green, blue or RGB

components.y Each color encoded in 8 bits.

y

00 means that the color is turned off; FF meansfully turned on.y Example:


24/45

How to specify colors? (cont..)

(2) By specifying the color name.

y Some of the colors that are supported by browsers are:

aqua black blue fuchsiagray green lime maroon

navy olive purple redsilver teal yellow white

y Many other colors are possible.y

Example:


25/45

Text Formatting in HTML


26/45

Paragraphs and Headings

y . y Used to generate headings, 1 n 6.

y Six different levels of headings.y is the largest, is the smallest.

y

.
y Paragraph marker, used to separate text into paragraphs.
y End tag
is optional.
y A series of paragraph tags

with nointervening text is treated as a single

.


27/45

y

Attributes


Align left

rightcenter

justify

Specifies the alignment of the text

within a paragraph

Example

This is the first paragraph.

This is another paragraph.


28/45

y
y Used to indicate that the text following

should begin on the next line.

y The amount of line spacing is less than that of a

break.

y Example:This is the first line.

This is the second line.

This is the third.

Example


29/45

y y Produces a horizontal line, which can be used to

delimit sections.y Length of the line can be specified.y Attributes


Align left

right

center

Specifies the alignment of hr element

Size pixels Specifies the height of a hr element

Width pixels

%

Specifies the width of a hr element


30/45

y

Examples:

y Across full width of browser, 20 pixels

thick, 75% of available page width, and

120 pixels right-justified.

Example


31/45

y . y

Supplies the contact information of the author.y Generally formatted in italics, with a line break above

and below.

y Example:

Prof. Indranil Sen Gupta

Dept. of Computer Science & Engg.

I.I.T. Kharagpur, INDIA

Email: [email protected]

Example


32/45

Appearance of Text

y

. y Displays the enclosed text in bold.y Ex : text

y . y Displays the enclosed text in italics.y Ex : text

y . y Displays the enclosed text as underlined.y Ex : text


33/45

y . y Displays the enclosed text as subscript.

y . y

Displays the enclosed text as superscript.

y . y Centers the enclosed elements horizontally on the page


34/45

y . y Specifies the style of the enclosed text.

y

Attributes:Attribute Value description

Color rgb(x,x,x)#xxxxxx

color name

Specifies the color of text

Face font_family Specifies the font of text

Size number Specifies the size of text

[1 to 7; 3 is the default]

[can also specify as +n or n]

Example

This is some text!


35/45

y . y Allows browser to display carefully laid out text.y

Text in a pre element is displayed in a fixed-width font ,and it preserves both spaces and line breaks.y Example:

main(){

int i, j;abc ();

}

Example


36/45

Example 1

Title of the Document

This is the content of the document.

This is an italic font,

and this is bold .


37/45


38/45

Example 2

Demonstration of Headings

This is a first level heading.

The second level

The third level

Fourth level.

Fifth level.

And, finally, the sixth .

A small amount of plain non-heading text.


39/45

E l 3


40/45

Example 3

Paragaph Aligning

This paragraph will be aligned

at the center. Even as the browser windowsize changes, the alignment remains the same.

This demonstrates left alignment.

How about aligning by the right

margin?


41/45

E l 4


42/45

Example 4

Layout Features 1

begin

if (a > b)

then max := a;else max := b;

end;


43/45

E l 5


44/45

Example 5

Superscript and Subscript

y = x 3 + 2 x 2 + 4

W total = x 2 - 5


45/45

chapter 2 html

Documents