Download html for viii class

HTML VIII CLASS










Introduction to HTML elements
Basic structure of HTML program
Creating title and heading
Saving and Running HTML program
Applying colour to webpage
Font attributes
Formatting text Using heading styles
Alignment
Paragraph
Introduction to DHTML and XML
Lesson 1. INTRODUCTION TO HTML
INTRODUCTON
Internet is the network of computer networks that connect millions of
computers around the globe. Now a days millions of computers were
connected to the internet. The number of users are increasing.
Servers: In computing, a server is a computer program or a device that
provides functionality for other programs or devices, called "clients". This
architecture is called the client–server model, and a single overall
computation is distributed across multiple processes or devices. Servers
can provide various functionalities, often called "services", such as
sharing data or resources among multiple clients, or performing
computation for a client.
Websites : A website, also written as web site, is a collection of
related web pages.
Web pages: Web pages, which are the building blocks of websites,
are documents, typically composed in plain text interspersed with
formatting instructions of Hypertext Markup Language (HTML, XHTML).
WWW The collection of all the websites on the Internet is called the
World Wide Web or WWW or W3.
You are already familiar with these terms. In this chapter, you will
learn about how to create Web Pages using a language called HTML.
ABOUT HTML
HTML was created by Timothy John Berners-Lee
English computer scientist, best known as the
inventor of the World Wide Web. He made a
proposal for an information management system
in March 1989, and he implemented the first
successful communication between a Hyper Text
is
an
Transfer Protocol (HTTP) client and server via the
Internet sometime around mid-November of that
same year. but "HTML 2.0" was the first standard
HTML specification which was published in 1995. HTML 4.01 was a major
version of HTML and it was published in late 1999. Though HTML 4.01
version is widely used but currently we are having HTML-5 version which
is an extension to HTML 4.01, and this version was published in 2012.
BASICS OF HYPERTEXT MARKUP LANGUAGE ( HTML )
Hypertext Markup Language comprises two major components, namely,
hypertext and markup. Hypertext is the text that enables you to organize
information by connecting different pieces of information together.
Hence, it enables you to create links between separate individual
documents and also between different parts of the same document.
Markup is the special code that specifies to the web browser how parts of
the document are to be processed.
The main advantage of HTML is that it does not require any
additional software to execute any code. Also, different multimedia
components can be displayed together in a web page. There are some
other advantages of HTML too.
 It is used with all the browsers.
 It does not require prior knowledge of any programming
language.
Tools Required
1. Text editor: A text editor is a type of program used for editing
plain text files.
Example: Notepad, notepad++, Edit plus, Word pad, MS word, MS
Front page, etc.
2. A web browser : A web browser (commonly referred to as
a browser) is a software application for retrieving, presenting, and
traversing information resources on the World Wide Web.
An information resource is identified by a Uniform Resource
Identifier (URI/URL) and may be a web page, image, video or other
piece of contentFront page, etc.
Example: Internet Explorer, Mozilla Firefox, Opera, Google Crome,
safari etc.
3. A web server (optional ): these are required when you want to
store the HTML document.
Basic Terms used in HTML
The HTML code consists of tags, attributes and elements. All these work
together to identify parts of a document and instruct web browsers how
to display them.
HTML is not case sensitive. This implies that HTML is the same as html or Html. A
common convention is to write the HTML code in uppercase so that it can be easily
differentiated from the rest of the document.
HTML Tags
Tags are used to describe how a web page should be displayed.
They determine the major structural components in a document such as
headlings, paragraphs, horizontal lines, etc. A tag comprises of text
enclosed in angle brackets <>. All tags have their own attributes and
default values. Each tag in HTML follows specific rules known as syntax.
These tags are not case sensitive. For example, <tag name > and >TAG
NAME> will have the same effect. There are infinite combination of HTML
tags/elements which are used for forms, images and lists. Everything
displayed on a web page requires the use of a tag. The HTML elements
can be categorized as :

Container Tags / Elements

Empty tags / Elements
CONTAINER ELEMENTS
In HTML, the tags that include both ON and OFF tags are called
container elements. It has a starting and an ending tag. A tag is opened
using opening angle brackets<> and closed using closing brackets </>.
For example, <HTML> tag has its closing tag which is </HTML> and
attributes as well.
EMPTY ELEMENTS
It has only the opening tag and its attributes. Empty elements perform
their specific functions without affecting the rest of the document. These
elements do not enclose any data. Instead they function their own. For
example, <BR> tag is an empty tag which breaks the line and displays
the text from the next line.
Creating and saving HTML Documents
To create an HTML document, a text editor is required. The extension
given to the page is always .html or .htm. Let us see how to open and
create an HTML document using notepad.
Open A Notepad
1.Click on start
2. All programs 3. Accessories 4.Notepad
The notepad window will appear. Type the HTML code as shown in the
following fig.
1.
2.
3.
4.
5.
6.
Click on File > save menu option.
The Save As dialog box will appear.
Select the folder to save the file.
Select All files in Save as type option.
Mention the name in File name text box with an extension .html.
Click on save button
Viewing HTML Documents
When an HTML document is created, it is viewed in the web browser.
When a web page is viewed in the web browser, it displays only the
actual information ( without the tags, elements and attributes ) formatted
according to the tags or elements.
To view an HTML document, you first need to open Internet Explorer. To
view you created web page, follow these steps.
1. Double click the Internet Explorer icon placed on the Desktop.
OR
Click the internet explorer icon on the quick Launch bar.
2. Click the File menu and then click open. The open dialog box
appears
3. Click Browse. The Microsoft Internet Explorer dialog box appears.
Click here to locate
the web page
a) Open dialogue box
b) Microsoft internet explorer dialogue box
Path of list
the file
that isthe LOOK
4. Select the file to be opened from the available
or click
to be opened
IN drop down box to locate your file.
5. Click Open. The Open dialog box reappears with the path of the file
that is to be opened.
6. Click OK. The web page is opened in the Internet Explorer.
Path of the HTML file
Text specified in the
body tag
Lesson 2. Creating A Webpage Using HTML
HTML Document Structure
A typical HTML document will have following structure:
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
We will study all the header and body tags in subsequent chapters, for
now let's see what is document declaration tag.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to
understand the version of the HTML used in the document. Current
version of HTML is 5 and it makes use of the following declaration:
<!DOCTYPE html>
There are many other declaration types which can be used in HTML
document depending on what version of HTML is being used. We will see
more details on this while discussing <!DOCTYPE...> tag along with other
HTML tags.
A typical HTML document will have following structure:
<html>
<head>
Documnt header related tags
</head>
<body>
Document body related tags
</body>
</html>
We will study all the header and body tags in subsequent chapters,
for now let's see what is document declaration tag.
Heading Tags
Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While
displaying any heading, browser adds one line before and one line after
that heading.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
This will produce following result:
Line Break Tag
Whenever you use the <br /> element, anything following it starts from
the next line. This tag is an example of an empty element, where you do
not need opening and closing tags, as there is nothing to go in between
them.
The <br /> tag has a space between the characters br and the forward
slash. If you omit this space, older browsers will have trouble rendering
the line break, while if you miss the forward slash character and just use
<br> it is not valid in XHTML
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
This will produce following result:
Hello
You delivered your assignment ontime.
Thanks
Mahnaz
Centering Content
You can use <center> tag to put any content in the center of the page
or any table cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
This will produce following result:
This text is not in the center.
This text is in the center.
Horizontal Lines and color to the line
Horizontal lines are used to visually break up sections of a document.
The <hr>tag creates a line from the current position in the document to
the right margin and breaks the line accordingly.
For example you may want to give a line between two paragraphs as in
the given example below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<h1> Welecome to my world </h>
<hr color= red”>
<hr color = “blue”>
<p>This is paragraph one and should be on top</p>
<BR> you will know more about me…………….
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
This will produce following result:
This is paragraph one and should be on top
This is paragraph two and should be at bottom
Again <hr /> tag is an example of the empty element, where you do
not need opening and closing tags, as there is nothing to go in between
them.
The <hr /> element has a space between the characters hr and the
forward slash. If you omit this space, older browsers will have trouble
rendering the horizontal line, while if you miss the forward slash
character and just use <hr> it is not valid in XHTML
TEXT LEVEL ELEMENTS
Text level elements affect the appearance of text in a web page. These
elements can be applied to certain characters in the HTML code. The text
level elements are of two types, namely,

physical elements and

logical elements.
PHYSICAL ELEMENTS
Physical elements (also known as character formatting elements)specify
how text is displayed in al web page. For example, these elements can
be used when you want to highlight some text (make it bold, italic, or
underlined) in the web page. Here are some of the commonly used
physical elements.
 Bold: it specifies that the text enclosed in the opening and the
closing tags should be displayed in bold. The syntax of the bold
element is given here.
<B>…….</B>
 Italic :it specifies that the enclosed text should be displayed in
italics. The syntax of the italic elements is given here.
<I>…….</I>
 Underline : it specifies that the enclosed text should be displayed as
an underlined text. The syntax of the underline element is given
here.
<U>…….</U>
 Superscript : it specifies that the enclosed text should be displayed
as a superscript , using a smaller font size as compared to normal
font size of the text. The syntax of the superscript element is given
here.
<SUP>…….</SUP>
 Subscript : it specifies that the enclosed text should be displayed as
a subscript, using a smaller font size as compared to the normal font
size of the text. The syntax of the subscript element is given here.
<SUB>…….</SUB>
LOGICAL ELEMENTS
Logical elements indicate general description of a web page. These
elements can be used any number of times in a web page. Note that
logical elements are browser dependent. For example, some of these
logical elements may not work in Netscape Navigator. Here are some
commonly used logical elements.

Emphasis : It emphasizes a specific word, character or text in a
web page. The enclosed text is displayed in italic in the
web page. The syntax is <EM>…….</EM>

Strong : It indicates a strongly emphasized word, character or text
in a web page. The enclosed text is displayed in bold in
the web page. The syntax is <strong>………….</strong>

Variable: It indicates a variable name in a programming language.
The enclosed text is displayed in italics in the web page.
The syntax is <var>………………………….</var>

Define: It defines an instance of a term in a web page. The
enclosed text is displayed in italics in the web
page.<Dfn>……………………………………</Dfn>
Example:
<html>
<Head>
<title > local elements </title>
</head>
<body>
<em> emphasis element </em>
<strong> strong element </strong>
<var variable element </var>
<dfn> define element </dfn>
</body>
</html>
Paragraph Tag
Any text containing more than a few lines should be given inside the
paragraph tag. The <p> tag offers a way to structure your text into
different paragraphs. To mark the end of a paragraph, </P> element is
used. A paragraph can be aligned using the attribute named “ Align”.
Various attributes of a paragraph element are displayed here.
Syntax: <P>
Starts a new paragraph
<P Align= “center”>
Aligns the text in center
< P Align= “Right”>
Aligns the text to the right side
<P Align= “Left”>
Aligns the text to the left side
<P Align= “Justify”>
Aligns the text from both left and right margins.
“Align” attribute can also be given with Heading Style tag, Font tag or Paragraph
tag.
Preformatted text element
The preformatted text element is used to display a preformatted text in a
web browser. It implies that the web browser displays the text in the
same manner as specified in the HTML document.
<pre>…………………………………</pre>
Changing Font
To show text in a particular font
Syn : <font face = “font name”>
Example: <font face = “vardana” >
Changing Font size
This is used for increase or decreases the size of the
font by the number you specify.
Syn: < font size= “n”>
Example : < font size= “34” >
Changing Font colour : To change the colour of the text.
Syn: < font color= “color name ”>
Example : <font color = “red”>
IMAGES IN HTML
A small picture is equivalent to a thousand words. Pictures immediately
attract attention. They play a dominant role in educational technology. If
a teacher is going to teach about mangoes in the class, the must first
show a picture of a mango or a mango itself in the class. Even though
every body might already have seen a mango, they will be attracted by
the picture and begin to listen.
In a web page, it is strongly recommended that a number of
relevant pictures must be inserted. A picture or an image in the web page
can be inserted using the <img>tag. The <img>tag has several attributes
to inform the source, height of the picture, width of the picture alighment,
etc., the following are its important attributes.
1.Src
2. Height
3. Width
4. Align
5. Alt
The src attribute specifies the source of the picture. It gives the file name
of the picture file. The height and the width may be expressed in terms of
either pixels, percentages or an units. The default is pixels. For example,
<img src= “ elephant.gif” height = 150 width=250>
The above statement embeds the picture available in the file “elephant.
gif” in the size of height 150 pixels and width 250 pixels.
The align attribute specifies the alignment of the picture.
Alignment
Syntax
Align
<img align= “value”>
Effect
The value of the align attribute
can
be
TOP,
BOTTOM,
OR
MIDDLE. By default, the image is
bottom aligned. In addition, the
value of align attribute can also
be set to RIGHT or LEFT.
It provides the alternative text
which is displayed if the image is
ALT
<IMG ALT= “VALUE”
not displayed. Internet Explorer
also uses the text as a Tool Tip
when you place the mouse over
the image
SRC
<IMG SRC= “PATH” OR
URL”
It specifies the location of the
image to be inserted
It
HEIGHT
<IMG HEIGHT=
“VALUE”>
specifies
dimensions
of
the
an
vertical
image.
The
height of an image is specified
either in pixels ( height = “n”) or
in percentage ( HEIGHT = “n%”)
It
WIDTH
<IMG WIDTH=
“VALUE”>
specifies
dimensions
of
the
an
horizontal
image.
The
width of an image is specified
either in pixels ( width = “n”) or
in percentage ( width = “n%”)
Example :
Consider the following HTML document
OUTPUT :
Example :
Consider the following HTML document
OUTPUT
LAB ACTIVITY
1.
2.
3
Create a web page with title “ About Me”. Apply different tags you
have learnt and save it under a suitable name.
Create a web page which contains information about your school . It
should contain some pictures of your school.
Write down the list of items that you need for your holiday trip. Give a
suitable name to the list.
4.
5.
Create a web page for your class with information such as your
class teacher’s name, the class strength, etc. Give an appropriate
title to your web page. Also, include a link named timetable which
when clicked opens another web page containing your class
timetable. Use the preformatted text element to create the
timetable. Make both the web pages as attractive as possible, using
images and the various formatting elements learnt in the charpter.
Develop an HTML document which displays your name as an <h1>
heading and displays the name of any four friends. Each of your
friend’s name must be a text. When you click a friend’s name, it
must open another HTML document, which tells about your friend.