8/2/2019 Chapter 2 HTML
1/45
HTML Fundamentals
8/2/2019 Chapter 2 HTML
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.
8/2/2019 Chapter 2 HTML
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.
8/2/2019 Chapter 2 HTML
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.
8/2/2019 Chapter 2 HTML
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.
8/2/2019 Chapter 2 HTML
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.
8/2/2019 Chapter 2 HTML
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/2/2019 Chapter 2 HTML
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
8/2/2019 Chapter 2 HTML
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.
8/2/2019 Chapter 2 HTML
10/45
Some points (cont..)
y Some tags can have one or more (named) attributes todefine some additional characteristics of the tag.
8/2/2019 Chapter 2 HTML
11/45
Some points (cont..)
y Unrecognized tagsBrowsers normally ignore tags it does not recognize.
y Comment linesComments are included between .
8/2/2019 Chapter 2 HTML
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.
8/2/2019 Chapter 2 HTML
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
8/2/2019 Chapter 2 HTML
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
8/2/2019 Chapter 2 HTML
15/45
Two Major Sections of
an HTML Document
my home page
hi there
Head Section
Body Section
8/2/2019 Chapter 2 HTML
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)
8/2/2019 Chapter 2 HTML
17/45
8/2/2019 Chapter 2 HTML
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.
8/2/2019 Chapter 2 HTML
19/45
Structural HTML Tags (cont)
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
8/2/2019 Chapter 2 HTML
20/45
Structural HTML Tags (cont)
y
Example
8/2/2019 Chapter 2 HTML
21/45
Structural HTML Tags (cont)
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.
8/2/2019 Chapter 2 HTML
22/45
Structural HTML Tags (cont)
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.
8/2/2019 Chapter 2 HTML
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:
8/2/2019 Chapter 2 HTML
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:
8/2/2019 Chapter 2 HTML
25/45
Text Formatting in HTML
8/2/2019 Chapter 2 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
.
8/2/2019 Chapter 2 HTML
27/45
y
Attributes
Attribute Value description
Align left
rightcenter
justify
Specifies the alignment of the text
within a paragraph
Example
This is the first paragraph.
This is another paragraph.
8/2/2019 Chapter 2 HTML
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
8/2/2019 Chapter 2 HTML
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
Attribute Value description
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
8/2/2019 Chapter 2 HTML
30/45
y
Examples:
y Across full width of browser, 20 pixels
thick, 75% of available page width, and
120 pixels right-justified.
Example
8/2/2019 Chapter 2 HTML
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
8/2/2019 Chapter 2 HTML
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
8/2/2019 Chapter 2 HTML
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
8/2/2019 Chapter 2 HTML
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!
8/2/2019 Chapter 2 HTML
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
8/2/2019 Chapter 2 HTML
36/45
Example 1
Title of the Document
This is the content of the document.
This is an italic font,
and this is bold .
8/2/2019 Chapter 2 HTML
37/45
8/2/2019 Chapter 2 HTML
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.
8/2/2019 Chapter 2 HTML
39/45
E l 3
8/2/2019 Chapter 2 HTML
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?
8/2/2019 Chapter 2 HTML
41/45
E l 4
8/2/2019 Chapter 2 HTML
42/45
Example 4
Layout Features 1
begin
if (a > b)
then max := a;else max := b;
end;
8/2/2019 Chapter 2 HTML
43/45
E l 5
8/2/2019 Chapter 2 HTML
44/45
Example 5
Superscript and Subscript
y = x 3 + 2 x 2 + 4
W total = x 2 - 5
8/2/2019 Chapter 2 HTML
45/45
Top Related