Scribd
Upload
26 views44 pages

Chapter - 3

This document discusses the basics of HTML and CSS including how to create, save and view HTML documents. It covers HTML tags, elements and attributes as well as formatting text and adding images and links to web pages.

Uploaded by

Archit iphone
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views44 pages

Chapter - 3

This document discusses the basics of HTML and CSS including how to create, save and view HTML documents. It covers HTML tags, elements and attributes as well as formatting text and adding images and links to web pages.

Uploaded by

Archit iphone
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

II

BASICS OFHTML AND CSS

3.1 INTRODUCTION

HTML (Hypertext Markup Language), a language having collection of key


words called 'Tags,' used to create a web document. It is a platform
independent language that can be used on any platform such as Windows,
Linux, Macintosh, and so on.

To display a document in web it is essential to mark-up the different elements


(headings, body, paragraphs, tables, and so on) of the document with the
HTML tags. The elements may include one or more attributes that are included
inside the tag. For Example: attribute - align (left, right, center and justify)
can be used to align the text inside paragraph. To view a mark-up document,
user has to open the document in a browser.

HTML also provides tags to make the document look attractive using graphics,
font size and co lors. User can make a link to the other document or the different
section of the same document by creating hypertext links,known as hyperlinks.
All the web sites in the web that comprising of web pages are created using
HTML.

3.2 OBJECTIVES

-
After going through this lession, you will be able to :

• Create, save and view a HTML document.


-
Basics ofHTML and CSS;!' 47

• Formatting a web page using:

./ Section heading tags .

./ Paragraph formatting tags .

./ Character formatting tags.

• Use of graphics in HTML document

./ The image tag and its attributes

./ The Image Maps.

• Use of Hypertext links, making text/image links to external/same


document.

3.3 CREATING, SAVING AND VIEWING HTML DOCUMENT

Websites comprising of web pages are created using the language Hypertext
Markup Language (HTML). Each HTML document corresponds to a single
web page. HTML document is written in the form of HTML elements
consisting of 'tags'. An HTML tag comprises a left angular bracket «),
followed by name of the tag, and closed by a right angular bracket (». Tags
are not case-sensitive i.e. there is no difference in small and capital letters in
tags. HTML elements can be categorized as Container elements and Empty
elements.

Container Elements: Tags which have both the opening and closing i.e.
<TAG> and </TAG> are called container elements. The closing tag is the same
as the opening tag, except for the slash (I) mark. Container Elements holds
the text and other HTML tags in between the tags. The <HTML>, <HEAD>,
<TITLE> and <BODY> tags are all container tags.

Example:

<BODY>This is a container tag. It holds both the text and HTML tag
</BODY>

Empty Elements: elements which have no content are called empty elements.
Empty elements do not have closing tags. <HR>, which is used to draw

- Horizontal rule across the width of the document, line break <BR> tags are
empty tags.
48 :: Certificate in Web Designing and Development

3.3.1 Creating a HTML document

The essential elements that are required to create a HTML documents are:

1. HTML Element

2. HEAD Element

3. BODY Element

HTML Element

Every HTML document must include the opening <HTML> tag at the top of
the file, and the closing </HTML> tag at the very end ofthe file.

The format is:

<HTML>

Your Title and Document (contains text with HTML tags) goes here

</HTML>

An HTML document has two distinct parts HEAD and BODY element

The Format is:

<HTML>
<HEAD>

</HEAD>

<BODY>

</BODY>
</HTML>

HTML Attributes

HTML elements can have attributes, provide additional information about


an element. Attributes are always specified in the start tag and come in name/
Basics ofHTML and CSS:: 49

value pairs like: name="value", eg: <BODY BGCOLOR="yellow">

HEAD Element

The Head Element contains an unordered collection of information about the


HTML Document. It comes after the HTML start tag. It contains TITLE
element to give the document a title that displays on the browsers title bar at
the top.

The Format is:

<HEAD>
<TITLE>
Your title goes here
<lTITLE>
</HEAD>

BODY Element

The BODY element contains all the text and graphics of the document with
all the HTML tags that are us.ed for control and formatting ofthe page.

The Format is:

<BODY>

Your Document content goes here

</BODY>

An HTML document, web page can be created using a text editor, Notepad,
WordPad or any HTML editor. All the HTML documents should have the
extension .htm or .html. A web browser like Internet Explorer or Mozilla
Firefox or Chrome or Safari Netscape Navigator/Communicator is required
to view the document.

Example: It s my first web page

Follow the steps to create an HTML document and view in browser:

Step-I: Open text editor N otepad (click on


start - AllPrograms - Accessories - Notepad)
Step-2: Enter the following lines of code:
<HTML>
<HEAD>
<TITLE>
50 :: Certificate in Web Designing and Development

My first Page
</TITLE>
</HEAD>
<BODY>
WELCOME TO MY FIRST WEB PAGE
</BODY>
</HTML>
Step-3: Save the file as myfirstpage.html (go to File- choose SaveAs,
type: All Files' giveFile name: myfirstpage.html'.

click save
Step-4: Viewing document in web browser (open Internet Explorer Click
on File - Open - Browse select the file myfirstpage.html

Click Open. click OK.)

i Fie Edt F~ View HeIo


<HTIt1L>
<HEAD>
<TITLE>
My fi r s t page
</TITLE>
</HEAD>
<BODY>
WELCOME TO MY FIRST WEB PAGE
</BODY>
</HTML>

Oii libraries
~ Documents I
./1-
~PictJ.res
ail Videos

~ local Disk (f
11,,--_.--.-,,,5 ""stem Resr- r --
--

Rename: ~ge.htl1~ __ __ _ _ _
~.~'~-A~J1~fiI~es ~l

-
- Fig. 3.1 : Shows creating and saving the HTML document using Notepad
Basics ofHTML and CSS:: 47

• Formatting a web page using:

./ Section heading tags .

./ Paragraph formatting tags .

./ Character formatting tags.

• Use of graphics in HTML document

./ The image tag and its attributes

./ The Image Maps.

• Use of Hypertext links, making text/image links to external/same


document.

3.3 CREATING, SAVING AND VIEWING HTML DOCUMENT

Websites comprising of web pages are created using the language Hypertext
Markup Language (HTML). Each HTML document corresponds to a single
web page. HTML document is written in the form of HTML elements
consisting of 'tags'. An HTML tag comprises a left angular bracket «),
followed by name of the tag, and closed by a right angular bracket (». Tags
are not case-sensitive i.e. there is no difference in small and capital letters in
tags. HTML elements can be categorized as Container elements and Empty
elements.

Container Elements: Tags which have both the opening and closing i.e.
<TAG> and </TAG> are called container elements. The closing tag is the same
as the opening tag, except for the slash (I) mark. Container Elements holds
the text and other HTML tags in between the tags. The <HTML>, <HEAD>,
<TITLE> and <BODY> tags are all container tags.

Example:

<BODY>This is a container tag. It holds both the text and HTML tag
</BODY>

Empty Elements: elements which have no content are called empty elements.
Empty elements do not have closing tags. <HR>, which is used to draw
Horizontal rule across the width of the document, line break <BR> tags are
empty tags. •
48 :: Certificate in Web Designing and Development

3.3.1 Creating a HTML document

The essential elements that are required to create a HTML documents are:

1. HTML Element

2. HEAD Element

3. BODY Element

HTML Element

Every HTML document must include the opening <HTML> tag at the top of
the file, and the closing </HTML> tag at the very end of the file.

The format is:

<HTML>

Your Title and Document (contains text with HTML tags) goes here

</HTML>

An HTML document has two distinct parts HEAD and BODY element

The Format is:

<HTML>
<HEAD>

</HEAD>

<BODY>

</BODY>
</HTML>

- HTML Attributes

HTML elements can have attributes, provide additional information about


an element. Attributes are always specified in the start tag and come in name/
,
Basics ofHTML and CSS:: 49

value pairs like: name="value", eg: <BODY BGCOLOR="yellow">

HEAD Element

The Head Element contains an unordered collection of information about the


HTML Document. It comes after the HTML start tag. It contains TITLE
element to give the document a title that displays on the browsers title bar at
the top.

The Format is:

<HEAD>
<TITLE>
Your title goes here
<lTITLE>
</HEAD>

BODY Element

The BODY element contains all the text and graphics of the document with
all the HTML tags that are used for control and formatting of the page.

The Format is:

<BODY>

Your Document content goes here

</BODY>

An HTML document, web page can be created using a text editor, Notepad,
WordPad or any HTML editor. All the HTML documents should have the
extension .htm or .html. A web browser like Internet Explorer or Mozilla
Firefox or Chrome or Safari Netscape Navigator/Communicator is required
to view the document.

Example: It s my first web page

Follow the steps to create an HTML document and view in browser:

Step-I: Open text editor N otepad (click on


start - AllPrograms - Accessories - Notepad)

- Step-2: Enter the following lines of code:


<HTML> -
<HEAD>
<TITLE>
50 :: Certificate in Web Designing and Development

My first Page
</TITLE>
</HEAD>
<BODY>
WELCOME TO MY FIRST WEB PAGE
</BODY>
</HTML>
Step-3: Save the file as myfirstpage.html (go to File- choose SaveAs,
type: All Files 'giveFile name: myfirstpage.html' .

click save
Step-4: Viewing document in web browser (open Internet Explorer Click
on File - Open - Browse select the file myfirstpage.html

Click Open. click OK.)

. File Edt F~ View HeIo -,


<H"TML>
<HEAD>
<TITLE>
My fi r s t page
</TITLE>
</HEAD>
<BODY>
WELCOME TO MY FIRST WEB PAGE
«BODY>
</HTML>

Iml~
Orgar'tto:. Nowfi>lder Il= •• ~;
~ RecentPia<:J:.If ......,. _o- I Sze I~~l
j I~'.
" Libraries
No items IMtcn yo.x search.
~ DoaJments

JI~
~ Pictu-es
IiIVodeos

I 1:_.

-
,al~
-
Fig. 3.1 : Shows creating and saving the HTML document using Notepad
Basics ofHTML and CSS:: 51

fJMyfirstPage

WELCOME TO MY FIRST WEB PAGE

Fig. 3.2 : Viewing HTML 'document myfirstpage.html in browser

Attributes used with <BODY>

~ BGCOLOR: used to set the background color for the document

Example:

<BODY BGCOLOR="yellow">
Your document text goes here.
</BODY>

~ MARGINS: set the left hand/right hand margin of the document

LEFTMARGIN: set the left hand margin of the document

Example:

<BODY LEFTMARGIN="60">
This document is indented 60 pixels from the left hand side of the page.
</BODY>

~ TOPMARGIN: set the top margin of the document

Example:

<BODY TOPMARGIN="60">
This document is indented 60 pixels from the top of the page.
<fBODY>

~ BACKGROUND: used to point to an image file with an extension


.gif(Graphic Interchange Format), .jpeg(Joint Photographic Expert
Group) that will be used as the background of the document. The image
file will be tiled across the document.
52 :: Certificate in Web Designing and Development

Example:

<BODY BACKGROUND="filename.gif'>
Your document text goes here
</BODY>

Example:An HTML document attribute.html that shows the use of attributes


with the <BODY> tag

<HTML>
<HEAD>
<TITLE>
Use of Attributes with the Body Tag
</TITLE>
</HEAD>
<BODY BACKGROUND="computer.gif' text="blue"
TOPMARGIN="75 " LEFTMARGIN="75">
Your document text will be indented 75 pixels from the left hand and 75
pixels from the top of the page. The background image computer.gifwill
be tiled across the document. Your image and HMTL document should
present at the same place.
</BODY>
f::IHTML>

N.B: Ensure that image "computer.gif" is available in the same path where
the attribute.html is stored.

-
- Fig. 3.3

Viewing HTML document attribute.html in browser, Image computer.gif


is tiled in entire body shown in browser as the image size is small.
Basics ofHTML and CSS :: 53

N.B: Attributes BACKGROUND and BGCOLOR are declared as


Deprecated (Deprecated tags and attributes are those that have been
replaced by other, newer, HTML constructs.) in HTML 4.0.

Browsers should continue to support deprecated tags and attributes, but


eventually these tags are likely to become obsolete and so future support cannot
be guaranteed.

Therefore it is suggested to avoid using this tag further.AIl these


deprecated attributes can be replaced by style-sheet controls, discussed
in later point of chapter.

INTEXT QUESTIONS 3.1

1. The language that is used to create document on the World Wide Web
IS:

A. XML B. HTML C. UML D. VRML


2. HTML is a Platform dependent language. (True/False)

3. An HTML document has two distinct parts and _

4. What part of a web page should the <TITLE> tag be used in:

A. head B. body C. footnote D. anywhere

5. HEAD is a container tag. (True/False)

3.4 FORMATTING WEB PAGE


HTML tags used for formatting a web page are:
Section Heading:<H1> <H6>
Headings and used to define the structure of the document.
HTML has six header tags <HI>, <H2> <H6> used to specify section
headings. Text with header tags is displayed in larger and bolder fonts than
the normal body text by a web browser. Every header leaves a blank line above
and below it when displayed in browser.

Example: An HTML document, headings. html shows the different section


headings
- <HTML>
<HEAD>
<TITLE>
Section Heading
54 :: Certificate in Web Designing and Development

</TITLE>
</HEAD>
<BODY>
<HI> This is Section Heading 1 </HI>
<H2> This is Section Heading 2 </H2>
<H3> This is Section Heading 3 </H3>
<H4> This is Section Heading 4 </H4>
<H5> This is Section Heading 5 </H5>
<H6> This is Section Heading 6 </H6>
</BODY>
</HTML>

This is Section Heading 1


This is Section Heading 2
Tbis is Section Heading 3

Tbis is Section Heading 4

Tbis is Sectioa HeadiD& 5

Fig. 3.4 : Viewing HTML document headings.html in browser

Some peculiarities about the web browser on viewing HTML document


text.-
);> Browsers ignore extra space within HTML document

Browsers ignore any additional space you type, and compress the text as if
the space did not exist. For Example: You can have text "My
First Page" in HTML document but in browser it display, "My First Page".

);> Browsers ignore your extra line and paragraph breaks

Generally you press enter when you want to create line and paragraph breaks, but
it will not be displayed when you view the document in browser.

In order to control your paragraph and line breaks <P> and <BR> tags are
used.
-
Basics of HTML and CSS :: 55

3.5 USING PARAGRAPH TAG:<P>

This tag <P> indicates a paragraph, used to separate two paragraphs with a blank:
line.

Example:

<P> Welcome to the world ofHTML </P>


<P> First paragraph.
Text of First paragraph goes here </P>

Output:

Bin~

• Page. Safety. Tools· »

Welcome to the world ofHTML

First paragraph. Text of First paragraph goes here

Fig. 3.5 i Using paragraph tag


Here, two paragraphs are separated with a line. But web browser ignores the
line breaks in the second paragraph that can be controlled by putting <BR>
tag.

3.6 USING LINE BREAK TAG: <BR>

The empty tag<BR> used, where the text needs to start from a new line and
not continue on the same line. To get every sentence on a new line, it is
necessary to use a line break.

Example:

- <BODY>
National Institute of Open Schooling <BR> •
A 31, Institutional Area, Sector - 62 <BR>
Distt - GautamBudh Nagar, Noida, Uttar Pradesh, India
</BODY>
56 :: Certificate in Web Designing and Development

Output:

o C:\Oocuments and Settings\AdmJO\[)esktop\ht... 1!~E3


~. l~c:'/JooJments.mSe:::J [S(R I",.,,,·;.,,
I fie Edit Wo:N Fawrites Tools ~ I.
J PI I
~~fJc~..::,,~~:::·--r~
.~.
National Institute of Open Schooling
A 31, Institutional Area, Sector - 62
Distt - Gautmn Budh Nagar, Noida, Uttar Pradesh, India

r I

Fig. 3.6 : Using <BR> tag

3.7 USING PREFORMATTED TEXT TAG:<PRE>

<PRE> tag can be used, where it requires total control over spacing and line
breaks such as typing a poem. Browser preserves your space and line break
in the text written inside the tag.

Example:

<BODY>
<PRE>
National Institute of Open Schooling
A 31, Institutional Area, Sector - 62
Distt - GautamBudh Nagar, Noida, Uttar Pradesh, India
</PRE>
</BODY>

Output:

r: (:\Documents and Settings\Admin\l>eslctop\html\body1.html- Windows ..• 1!l1iI1:I

File Edit View Favorites Tools Help

C:'j)oo..rnon1Sond s"ttings ...

National In3titute of Open Schooling


~ 31, Ins~~tut~onal Area, Sec~or - 62

I
Distt - GautL~ Budh Nagar, N01da, Utter Pradesr., Ind1a

.:JI
~Ir-!Ir ?' MYCompu~
--I ffj.l00% • A<l

Fig. 3.7 : Using <PRE> tag


Basics of HTML and CSS :: 57

Example:An HTML document control. html shows the use of <P>, <BR> and
<PRE>

<HTMl>
<HEAD>
<TITLE>
Use of Paragraph, Line break and preforrnatted text Tag
<lfITLE>
</HEAD>
<BODY>
HTML Tutorial
<P>
HTML stands for Hypertext Markup Language.
It is used for creating web page. It is very simple
and easy to learn.
</P>
<P>
HTML stands for Hypertext Markup Language.<BR>
It is used for creating web page. It is very simple<BR>
and easy to learn. <BR>
</P>
<PRE>
HTML stands for Hypertext Markup Language.
It is used for creating web page. It is very simple
and easy to learn.
</PRE>
</BODY>
</HTML>
58 :: Certificate in Web Designing and Development

HTML stands for Hypertext Markup Language. It is used for creating web page. It is
very simple and easy to learn.

HTML stands for Hypertext Markup Language.


It is used for creating web page. It is very simple
and easy to leam.

HTML stands for Hypertext Markup Language.


It is used for creating web page. It is very simple
and easy to learn.

Fig. 3.8 : Viewing HTML document control.html in browser

3.8 Using Horizontal Rule Tag:<HR>

An empty tag <HR> basically used to draw lines and horizontal rules. It can be
used to separate two sections oftext.

Example:

<BODY>
Your horizontal rule goes here.
<HR>
The rest of the text goes here.
</BODY>

Output:

Your horizontal rule goes here.

The rest of the text goes here.

<HR> accepts following attributes:

- ~ SIZE: Determines the thickness of the horizontal rule. The value given
is a pixel value.
-
Example:<HR SIZE="3 ">

~ WIDTH: Specifies an exact width ofHR in pixels, or a relative width as


percentage of the document width.
Basics ofHTML and CSS :: 59

Example:<HR WIDTH="50%">, horizontal rule a width a 50 percent of


the page width.

~ COLOR: Set the color of the Horizontal rule.

Example:<HR COLOR="BLUE">

Example of <HR> with its attribute:

<HR WIDTH="50%" SIZE="3" COLOR="BLUE''>

N.B: Attributes SIZE, WIDTH and COLOR are declared as Deprecated


(Deprecated tags and attributes are those that have been replaced by other,
newer, HTML constructs.) in HTML 4.0.

3.9 CHARACTER FORMATTING TAGS

The character formatting tags are used to specify how a particular text should
be displayed on the screen to distinguish certain characters within the
document.

The most common character formatting tags are:

• Boldface <B>: displays text in BOLD

Example: Welcome to the <B> Internet World </B>

Output: Welcome to the Internet World

• Italics <I>: displays text in Italic

Example: Welcome to the <I> Internet World <II>

Output: Welcome to the Internet World

• Subscript <SUB>: displays text in Subscript

• Superscript <SUP>:displays text in Superscript

• Small <SMALL>: displays text in smaller font as compared to normal


font

• Big <BIG>: displays text in larger font as compared to normal font


60 :: Certificate in Web Designing and Development

3.10 USING SOME SPECIAL CHARACTERS

There are certain specialcharacters that can be used whilecreating document. These
are called HTML entities.

Following are some special character:

Symbols Entity
©,® &copy,&reg
1,4,~,% &frac14, &frac12, &frac34
7, <, >, ~ >-+ &divide, &It, &gt, &le, &ge
& &amp
0,.,0 &spades, &clubs, &hearts

·&nbsp insert space

All these special character must be ended with a semicolon;

Example:<PRE>
The copyright symbol is: &COPY;
The registered rank: is: &REG;
<!PRE>
Output: The copyright symbol is:©
The registered rank: is:®

3.11 USING LIST IN WEB PAGE

HTML Supports several ways of arranging items in lists. The most commonly
used are: '

• Ordered List (Numbered List)

• Unordered List (Bulleted List)

Ordered List <OL>

Ordered list also called as Numbered list, is used to present a numbered list
of item in the order of importance or the item (paragraph) is marked with a
number.

An ordered list must begin with the <OL> followed by an <LI> list item
tag.
Basics ofHTML and CSS:: 61

Example: An HTML document orderedl.ist.html shows the use of Ordered


List

<HTML>
<HEAD>
<TITLE>
An Ordered List
<lTITLE>
</HEAD>
<BODY>
<Hl><U> Various Terms Used In Intemet<IU></Hl>
<OL>
<U> WWW-World Wide Web<ILI>
<U> URL- Uniform Resource Locator<ILI>
<U> HTTP-HypertextTransfer Protocol</U>
<U> FTP-FileTransferProtocol</U>
<U> HTML-Hypertext Markup Language<ILI>
</OL>
</BODY>
</HTML>

Various Terms Used In Internet


1. WWW-WorldWideWeb
2. URL-Uniform Resource Locator
3. HTTP-Hypertext Transfer Protocol
4. FTP-File Transfer Protocol
5. HTML-Hypertext Marlrup Language

Fig. 3.9: Viewing HTML document orderedList.html in browser


62 :: Certificate in Web Designing and Development

3.11.1 Attributes of <OL>tag:

~ COMPACT:render a list in compact form.

~ TYPE: allows marking list items with different types. By default the list Item
markers are set to numbers 1,2,3 ... so on.

Other values o/TYPE attribute are:

Attribute Description
Type=A Capital letter egoA, B, C .........
Type = a Small letter egoa, b, c, .........
Type=I Uppercase Roman Numbers egoI, II, III ......
Type=i Lowercase Roman Numbers egoi, ii, iii......
Type = 1 ego 1,2,3 .............

~ START: used for liststhat need to start at values other than 1. START always
specified in default numbers, and is completed based on TYPE before display,
For example, If START =5 it would display either an 'E', 'e', 'V', 'v', or '5'
based an TYPE attribute.

3.11.2 Nested Order List

One ordered list might contain one or more ordered list that is called as Nested
Order lists.

Example: An HTML document nested. html shows the use 0/ Nested Order
Lists with attributes.

<HTML>
<HEAD>
<TITLE> Use of Nested Ordered Lists</TITLE>
</HEAD>
<BODY>
<OL TYPE = A START =3>
<LI> Fruits</LI>
<OLTYPE=I>
<LI> Apple</LI>
<LI> MANGO</LI>

</OL>
<LI>Orange</LI>
-
<LI> VEGETABLES</LI>
<OLTYPE=I>
Basics of HTML and CSS :: 63

<LI>Brinjal<ILI>
<LI> Cabbage</LI>
<LI> Tomato</LI>
</OL>
</OL>
</BODY>
</HTML>

: ~ Use of Nested Ordered Lists I:dJ rjl • Page· Safety y Tools· •• »

C. Fruits
1. Apple
II. MANGO
III. Orange
D. VEGETABLES
I. Brinjal
II. Cabbage
III. Tomato

CQ!!1J:!!!terIProtected Mode: Off

Fig. 3.10: Displaying Nested Ordered Lists with attributes in browser

3.11.3 Unordered List <UL>

Unordered List also called as bulleted list, used to present list of items marked
with bullets. An unordered list starts with in <UL> followed by <LI> (List
Item) tag. Use of<UL> is very similar to <OL> (ordered list).

Example: Use of Unordered List and Various Attributes

<HTML>
<HEAD>
<TITLE> Use of Unordered List </TITLE>
</HEAD> -
<BODY>
<UL>
<LI> FRUITS<ILI>
64 :: Certificate in Web Designing and Development

<VI>
<U> Apple<ILI>
<LI> Mango<ILI>
<LI>Orange<ILI>
<IUI>
<U> VEGETABLE<ILI>
<VI>
<LI>Brinjal<ILI>
<LI> Cabbage</LI>
<LI> Tomato<ILI>
<IUL>
<IUI>
</BODY>
</HTML>

• FRUITS
o Apple
o Mango
o Orange
• VEGETABLE
o Brinjal
o Cabbage
o Tomato

Fig. 3.11: Displaying Unordered Lists in browser

The unordered list also used the attributes COMPACT and TYPE = CIRCLE or
DISC (filled Circle used as a bullet)

INTEXT QUESTIONS 3.2:

6. Which ofthe following is a line break tag:

A.<lb> B.<br> C.<hr> D.<break>

7. HTML has seven header tags <HI> <H7> (True/False)


Basics ofHTML and CSS :: 65

8. The tag is used for bullet ed, unordered list.

9. In order to create an ordered list we can have the tag:

A <ul> .... </ul>B.<p> .... </P>C.<A> .... </A>D.<ol> ..... </01>


10. Special characters are not supported by HTML. (True/False)

11. Ordered list can be nested. (True/False)

3.12 USING GRAPHICS IN WEB PAGE <IMG>

Graphics enhance user acceptability and aesthetic value of a document. It


makes the document interesting and easier for the user to understand. There
are three image formats widely used in web pages: GIF(Graphics Interchange
Format), JPEG(Joint Photographic Experts Group), and PNG(Portable
Network Graphics).

Points to remember:

JPEG
• JPEG can display large number of colours therefore use for jpeg for
photographs.

• JPEG cannot have transparent backgrounds.

• JPEG is not good at preserving exact colors - do not use them for logos or
text.

GIF
• GIF can display only 256 colours
• Use GIF to save images that have sharp lines (like text) and solid colors.
• Use GIF to save images that need to have a transparent background.
• GIF was invented for creating screen graphics - do not use GIF for images
that you want to print on paper.

PNG
- • Use PNG if you want to have images with blended transparent
backgrounds.

• Use PNG if you need to create print ready high-resolution graphics.


66 :: Certificate in Web Designing and Development

Graphics can be placed in a web page by using Image: <IMG> tag.

It is an empty tag (only start tag, no end tag) and is written as:

<IMG SRC = "image_URL">

SRC - Source ofthe image file

image _URL - represents the image file with its location.

Example:<IMG SRC="file:IIIC:INIOSlogo.GIF">

Here, image_URL=file:IIIC:INIOSlogo.G[F, it means linage is available in the


Hard Drive C: on the local hard disk.

This SRC attribute is mandatory for the <IMG> tag.

Other attributes used with <IMG>are: -

o HEIGHT AND WIDTH

o ALT

o BORDER HEIGHT and WIDTH

Height and Width of an image can be controlled by using the HEIGHT and WIDTH
attributes in the <IMG> tag as follows:

Example:<IMG SRC= "NIOSlogo.gif' HEIGHT="320" WIDTH="240">

AL T (Alternative Text)

This attribute is used to give alternative text that can be displayed in place ofthe
image. This is required when the user needs to stop display of images while retrieving
a document in order to make the retrieval faster, or when the browser does not
support graphics. It is also used a too I tips - displaying description ofthe image
when the mouse is over the image.

Example:<IMG SRC=NIOSlogo.gifALT = "Logo ofNIOS ">

- It is mandatory to use alt attribute with every image. Ifthe image is for decoration
alt = " " should be used.
Basics ofHTML and CSS :: 67

BORDER
Border around the image can be controlled by using BORDER attribute of <IMG>
tag. By default image displays with a thin border. To change the thickness or
turn the border off the value in pixels should set to BORDER attribute.

Example:<IMG SRC="NIOSlogo.gif' BORDER=O>

BORDER =0 to Turn the Border off

Example:<IMG SRC="NIOSlogo.gif' BORDER=3>

BORDER=3 to make the border thickness to 3

N.B: Border attribute is now declared as Deprecated (Deprecated tags and


attributes are those that have been replaced by other, newer, HTML
constructs.) in HTML 4.0.

3.13 WORKING WITH LINKS: <A>ANCHOR TAG

Web pages are linked to one another through Hypertext Links. Section oftext
or image in the HTML document can be linked to an external document or to
a specific place within the same document. The text or image that provides
such linkage is known as Hypertext or Hotspot.

HTML provides <A> Anchor Tag to create links. The format of using anchor
tag is as follows:

<A HREF ~"URL"> Make Me The Link <fA>

HREF (Hyper Link Reference) is a mandatory attribute used to refer the URL
of the resource. URL (Uniform resource locator) is an address tells the browser
about the file to link to. It identifies file locations (Addresses) on the web or
on the local hard drive. These addresses can be those ofHTML documents or
elements such as images, scripts, applets and other files. It is always enclosed
in quotes.

3.13.1 Linking a text to a web site I an external document

Example:
-
<A HREF = ••http://www.nios.ac.in ••>Link to Website ofNIOS</A>
In the above example the link text "Link to Website ofNIOS" would appear
68 :: Certificate in Web Designing and Development

underlined and in a color differentfrom any other text inthe document to distinguish
a link from normal text. Also you would find that the mouse pointer changes into a
hand like symbol when taken over the hyperlink.

3.13.2 Linking an image to web site

An image can be linked to a web site or HTML document.

Example:

<A HREF = ••http://www.nios.ac.in •• ><IMG SRC=NIOSlogo.GIF


BORDER=3></A>

3.13.3 Linking Uumping) to a specific place within the


same document

Sometimes, it is required to jump different sections in the same document.


For this it needs two steps, first identify section with a name and then jumps
to the location using the name used.

The syntax is:

1. <A HREF= "#section_name"> link to another section of the same


document </A>

This link text jumps to the section named with HREF on click. The #
symbol before the section name is must.

2. <A NAME= "section_name"> Beginning of the section </A>

The NAME attribute is used to identify a section with a name. It is a


unique identifier within the document for the anchor.

One can also jump to a specific section of different document specifying the
path on HREF attribute.

Example:

Within the same document:<A

Same folder, but different


HREF="#section

document:<A
name">

HREF="document.html#
-
section name">
Basics of HTML and CSS :: 69

Different folder, different document: <A HREF="folder/document.


html#section name">

A different server: <A HREF= ••http://www.nios.ac.in/foldername/


document.html#section name">

3.13.4 Attributes used with <A>Anchor Tag

TITLE
This attribute is used to provide additional/advisory information (expand on
the meaning ofthe link). The anchor text is supposed to "name" the link, while
the title text provides-information about where the link will send the user.

Title attribute must be used with non descriptive links like 'click here' or 'Read
More'.

Title attribute increase site's usability and accessibility level.

Example:<AHREF= ••http://www.nios.ac.in ••TITLE= ••Click here to access


national institute of open schooling(NIOS) web site''>Click to Access NIOS
Website</ A>

Example: Use of Anchor Tag

<HTML>
<HEAD><TITLE> Use of Anchor Tag</TITLE></HEAD>

<BODY>
<A HREF= ••http://www.nios.ac.in ••TITLE="Click here to access national
institute of open schooling(NIOS) web site"> Click here to Access NIOS
Website</ A>

</BODY>
</HTML>

- -
70 :: Certificate in Web Designing and Development

r Use of Anchor Tag - Windows Inte;net Ex... I!!Gl E'J


OO ...I. C:'l)ocunents and Se3 6)~ IMyP1ayaty~1

J FIe EdIt VIIM Favd!!s Tools IfI!b J

,
J PI I:
j
i ~:lSt • Use of Anchor Tag J9. :I
Click here to Access NIOS Website
I

Irllllli.My~ter

Fig. 3.12 : Display of an example using Anchor Tag <A> in Browser

3.14 IMAGE MAPPING

The technique of making link(s) in different parts of an image to several pages


is called as image mapping.

You simply specify which areas of the image should link to where.

Example:

<HTML>

<BODY>

<P>Click on the sun or on one of the planets to watch it closer:</P>

<IMG SRC="PLANETS.GIF" WIDTH="145" HEIGHT="126"


ALT="PLANETS" USEMAP="#PLANETMAP">

<MAP NAME="PLANETMAP">

<AREA SHAPE="RECT" COORDS="O,O,82,126" ALT="SUN"


HREF="SUN.HTM"">
- <AREA SHAPE="CIRCLE" COORDS="90,58,3" ALT="MERCURY"
HREF="MERCUR.HTM">

<AREA SHAPE="CIRCLE" COORDS="124,58,8" ALT="VENUS"


HREF="VENUS.HTM">
Basics ofHTML and CSS:: 71

</MAP>
</BODY>
</HTML>

Source: http://www.w3schools.com

N.B:Ensure that image "Planets.gif' and the page sun.htm, mercur.htm and
venus.htm are available in your system at one place.

The <map> tag is used to define a client-side image-map. An image-map is


an image with clickable areas. The required name attribute of the <map>
element is associated with the <img> 's usemap attribute and creates a
relationship between the image and the map. The <map> element contains a
number of <area>eiements, that defines the clickable areas in the image map.

There are three different shapes (commonly termed "hot spots") that can be
used in image maps. Those are as follows:

RECT
CIRCLE
POLYGON

INTEXT QUESTIONS 3.3

12. HTML does not allow a web page to include an image. (True/False)

13. Syntax to make a text link is:


A. <A HREF="URL"> text describing link <IA>
B. <HREF="URL"> text describing link </A>
C. <A> text describing link <IA>
D. None ofthe above

14. tag is used to add images to HTML documents.

15. Border around the image can be controlled by using attribute


of image tag.

3.15 CASCADING STYLE SHEETS (CSS)

Cascading Style Sheets is a simple mechanism for adding style (e.g., fonts,
colors, spacing) to Web documents written in HTML.

CSS is used by both the authors and readers of web page to define colors,
fonts, layouts and other aspects of document presentation. It is designed
72 :: Certificate in Web Designing and Development

primarily to enable the separation of document content from document presentation


This separation can improve content accessibility, provide more flexibility and control
in the specification of presentational characteristics, and reduce complexity and
repetition in the structural content.

Advantages of using CSS include:

• Presentation of information for the entire website or collection of pages can


be held in one CSS file, allowing global changes to be propagated quite
conveniently.

• Web browser software can store a copy of the CSS file in computer's cache,
so that it doesn't have to be downloaded each time the user views a page
that reference it, hence improving the access time.

• Different users can have different style sheets: for example a large text
alternative for visually impaired users or a layout optimized for small
displays for mobile phones.

• The document code is reduced in size and complexity, since it does not
need to contain any presentational markup.

3.15.1 Applying ess to a HTMLdocument


Here, you wi1lleam CSS, its syntax and how it is applied to a HTML document
through an example. It explains how to create an HTML file, a CSS file and how
to make them work together.
At the end ofthe section, you will have made an HTML file that looks like this:

r Mv fir st stylpo p<'ge . Windows Internet Explorer lie E!

My first styled page


Welcome to my styled page!

It lacks images, but at least it has style. I feel it is


very easy to apply colors to my page.

Quite interesting!

FT T'TT'T"] MvCon1'UtI:r -
Fig. 3.13 : HTMLFile

The resulting HTML page, with colors and layout, all done with CSS
Basics of HTML and CSS :: 73

Step I:Create an HTML document style.html

<HTML>
<HEAD>
<TITLE>My First Styled Page<ffITLE>
</HEAD>
<BODY>
<!- Site Navigation Menu->
<UL>
<LI><A HREF="absolute.html"> About Me</A><ILl>
<LI><A HREF=''http://www.nios.ac. in">
My School</ A></LI>
<LI><A HREF="myfriends.html">My Friends</ A></U>
<LI><A HREF="contactme.html">Contact Me</ A></U>
</uL>
<!- Main content ->
<Hl>My First styled page</Hl>
<P>Welcome to my styled page!</P>
<P>It lacks images, but at least it has style. I feel it is very easy to
apply colors to my page.</P>
<P>Quite interesting!</P>
</BODY>
</HTML>

r: My first styled Pdge·. Windows Internet Explorer !;EJ

• AboutMe
• ).ivSchool
• ).iv Friends
• ContactMe

My first styled page


Welcome to my styled page!

It lacks images. but at least it bas style. I feel it is very easy to apply colors to my page.

Quite iote1"esting!
.:::.J
Done 100% • hi

Fig. 3.14 : Viewing HTML document style.html in browser


74 :: Certificate in Web Designing and Development

Step 2:Adding Some Colors

You probably see some black text on a white background, but it depends on how
the browser is configured. So one easy thing you can do to make the page more
stylish is to add some colors.

You need to add a <style> element to the HTML file.The style sheet will be inside
that element. Go back to the editor notepad( click on start' >
AllPrograms'!Accessories'!Notepad) -> open the HTML document
'style.html' and add the following five lines in the head part of the HTML
file then Save the file. The lines to add are shown in bold.

<HTML>
<HEAD>
<TITLE>My first styled page</TITLE>
<STYLE Type="text/css">
BODY {
COLOR: Purple;
BACKGROUND-COLOR: #d8da3d}
</STYLE>
</HEAD>

<BODY>
[etc.]

The first line says that this is a style sheet and that is written in CSS ("textl
css"). The second line says that you add style to the "body" element. The third
line sets the color of the text to purple and the next line sets the background
to a sort of greenish yellow.

Style sheets in CSS are made up of rules. Each rule has three parts:

1. the selector (in the example: "body"), which tells the browser which part
of the document is affected by the rule;

2. the property (in the example, 'color' and 'background-color' are both
properties), which specifies what aspect of the layout is being set;
-
3. and the value ('purple' and '#d8da3d'), which gives the value for the style
property.
Basics ofHTML and CSS:: 75

The example shows that rules can be combined. You have set two properties, so
you could have made two separate rules:

body {color: purple}


body { background-color: #d8da3d }

but since both rules affect the body, you only wrote "body" once and put the
properties and values together.

The background ofthe body element will also be the background of the whole
document. You have not given any of the other elements (p, li, address ... ) any
explicit background by default they will have none (or: will be transparent). The
'color' property sets the color of the text for the body element, but all other elements
inside the body inherit that color, unless explicitly overridden. Apart from the list of
links at the top, the text should now be purple against a greenish yellow background.

Now save this file (use "Save" from the File menu) and go back to the browser
window and open to get the page as shown below.

1:' My first styled page - Windows Interne~ Explorer ~ , . --, ';,_ '_ ;: ,BIilE!
~. l~c:~tsandsettWlgs~..:J .! X I .' p.

J Fie Edt VIew Favotites Tools ~

<{)z ~ ~MY frststyled page

• AboutMe
• MvSchool
• MyFriends
• ContactMe

My first styled page


Wekome to my styled page!

It Jacks images. but at least it has style, I feel it is very easy to apply colors to my page.

Quite interesting!
.:J
. ~iOo% • hi

Fig. 3.15 : Viewing HTML document style.html in browser after adding


color to the body of the document using CSS

Step 3:Adding Fonts


Another thing that is easy to do is to make some distinction in the fonts for the various
elements of the page. So let's set the text in the "Georgia" font, except for the hl
heading,
76 :: Certificate in Web Designing and Development

On the web, you can never be sure what fonts your readers have on their computers,
you add some alternative fonts as well.

Open the file style.html and add the following lines:

<HTML>
<HEAD>
<TITLE>My first styled page</TITLE>
<STYLE Type="text/css">
BODY {
FONT - FAMILY: Georgia, "Times New Roman",
Times, Serif;
COLOR: purple;
BACKGROUND_COLOR: #d8da3d }
HI {
FONT_FAMILY: Helvetica, Geneva, Arial, SunSans_Regular,
Sans_Serif}
</STYLE>
</HEAD>
<BODY>
[etc. ]

r; /.Iy f.rst srvled page'. Wmdows'lnternet ['plor"r' !l1ilE:!

I,J ••..
"'" fdt _ Favorites Tools H$

• AboutMe
• MvScboal
• MvFftspd<
• CoatactMe

My first styled page


Welcome to my styled pace!

It 1achiaJaees. bat lit Ieest it bas style. I feel it is WI}' aDY to IIFIJIYcolao to my ~
-
rrrrrr My~

Fig. 3.16 : Viewing HTML document style.html in browser after adding fonts
to the body and header using CSS
Basics ofHTML and CSS :: 77

Step 4:Adding a Navigation Bar

The list at the top ofthe HTML page is meant to become a navigation menu. Many
web sites have some sort of menu along the top or on the side ofthe page and this
page should have one as well. You will put it on the left side, because that is a little
more interesting than at the top.

The menu is already in the HTML page. It is the <ul> list at the top. The links in it
do not work, since our "Website" so far consists of only one page, but that does
not matter now. On a real Website, there should not be any broken links, of course.

You need to move the list to the left and move the rest of the text a little to the right,
to make room for it. The CSS properties you use for that are 'padding-left' (to
move the body text) and 'position', 'left' and 'top' (to move the menu).

<HTMl>
<HEAD>
<TITLE>My first styled page<ffITLE>
<STYLE TYPE="textlcss''>
BODY {
PADDING_LEFT: Hem;
FONT_FAMILY: Georgia, ''Times New Roman",
Times, serif;
COLOR: Purple;
BACKGROUND_COLOR: #d8da3d }
HI {
FONT_FAMILY: Helvetica, Geneva, Arial,
SunSans _ Regular, Sans Serif}
<lSTYLE>
</HEAD>
<BODY>
[etc.]
78 :: Certificate in Web Designing and Development

/ /.Iy f II st styled page - Windows Internet Explorer l!llil £J


lm
j ••.•

• AboutMe
• MyScbool
• MyFrieods
• CoatactMe

My tirst styled page


Welcome to my styled pagel

It IacIcs images, but at ~ it bas style. I feel it is wry easy to apply colors to my page..

Quite interesling!

16\ 100% ._h<

Fig. 3.17 : Viewing HTML document style.html in browser after


adding Navigation Bar using ess

Step 5: styling the Links

The navigation menu still looks like a list, instead of a menu. Let's add some
style to it. You will remove the list bullet and move the items to the left, to
where the bullet was. You will also give each item its own white background
and a black square.

In this example blue color is used for links and purple color for visited links.

<HTML>
<HEAD>
<TITLE>My first styled page</TITLE>
<STYLE TYPE="text/css">
BODY {
PADDING-LEFT: l Iem;
FONT-FAMILY: Georgia, "Times New Roman",
Times, serif;
COLOR: purple;
BACKGROUND-COLOR: #d8da3d }
UL.NAVBAR {
- LIST-STYLE- TYPE: none;
PADDING: 0;
Basics of HTML and CSS :: 79

MARGIN: 0;
POSITION: absolute;
TOP:2ern;
LEFT: l em;
WIDTH: gern}
HI {
FONT- FAMILY: Helvetica, Geneva, Arial,
SunSans- Regular, sans-serif}
UL.NAVBAR LI {
BACKGROUND: white;
MARGIN: 0.5ern 0;
PADDING: 0.3ern;
BORDER-RIGHT: I ern solid black}
UL.NAVBARA {
TEXT-DECORATION: none}
A:LINK {
COLOR: blue}
A:VISITED {
COLOR: purple}
</STYLE>
<!HEAD>
<BODY>
[etc.]

r: My first styled page Windows Internet Explorer I!lliIeJ

J fie ~ _ - FavoriIe$ Tools Help


I.
<ll .:f;I • ~MylYsts~page J a . §I • ~ • @page • @TooIs. »

About Me

My School

My Friends
•
I
My first styled page
Welcome to my styled pagel

It lacks images, but at least it has style. I feel it is


very easy to apply colors to my page.
Contact Me
I Quite interesting!

- ..:.l

Fig. 3.18: Viewing HTML document style.html in browser


after styling links using CSS
80 :: Certificate in Web Designing and Development

Traditionally, browsers show hyperlinks with underlines and with colors. Usually,
the colors are similar to what we specified here: blue for links to pages that you
haven't visited yet (or visited a long time ago), purple for pages that you have already
seen.

In HTML, hyperlinks are created with <a> elements, so to specify the color, you
need to add a style rule for "a". To differentiate between visited and unvisited links,
CSS provides two "pseudo-classes" (:link and :visited). These are called ''pseudo-
classes" to distinguish these from class attributes, that appear in the HTML directly,
e.g., the c1ass="navbar" in our example.

Step 6: putting the style sheet in a separate file

You now have an HTML file with an embedded style sheet. But if our site grows
you probably want many pages to share the same style. There is a better method
than copying the style sheet into every page: if we put the style sheet in a separate
file, all pages can point to it.

To make a style sheet file, you need to create another empty text file using notepad.

Store following style sheet contents in the text file

BODY {
PADDING-LEFT: IIEM;
FONT-FAMILY: Georgia, ''Times New Roman",
Times, serif;
COLOR: purple;
BACKGROUND-COLOR: #d8da3d }
UL.NAVBAR{
LIST-STYLE- TYPE: none;
PADDING: 0;
MARGIN: 0;
POSITION: absolute;
TOP: 2em;
LEFT: lern;
WIDTH: gem}
Ht{
FONT-FAMILY: Helvetica, Geneva,Arial,
SunSans- Regular, sans-serif}
UL.NA VBAR LI {

- BACKGROUND: white;
MARGIN: O.SemD;
Basics ofHTML and C~S :: 81

PADDING: O.3em;
BORDER-RIGHT: lemsolidblack}
UL.NAVBARA {
TEXT-DECORATION: none}
A:LINK {
COLOR: blue}
A:VISlTED {
COLOR: purple}

Style Sheet File(mystyle.css)

Choose "Save As ... " from the File menu, make sure that you are in the same
directory/folder as the style.html file, and save the style sheet as "mystyle.css".

Now go back to the HTML document remove everything from the <style> tag up .
to and including the <lstyle> tag and replace it with a <link> element, as follows:

<HTML>
<HEAD>
<TITLE>My first styled page<ITITLE>
<LINK REL="stylesheet" href="mystyle.css">
</HEAD>
<BODY>
<!- Site navigation menu->
<UL CLASS="navbar">
<LI><A href="aboutme.html"> About Me<!A><ILI>
<LI><A href=••http://www.nios.ac.in ••>MySchool<lA><ILI>
<LI><A href="myfriends.html">My Friends<lA><ILI>
<LI><A href="contactme.html">Contact Me<!A></LI>
</UL>
<!- Main content->
<Hl>My first styled page<lHl>
<P>Welcome to my styled page!</P>
<P>It lacks images, but at least it has style.</P>
I feel it is very easy to apply colors to my page.
<P>Quite interesting!</P>
</BODY>

-
82 :: Certificate in Web Designing and Development

r.: My first styled pdge· Wmdows Internet Explorer I!SE3

.I!i}Page. @T"" »

About Me
My first styled page
Welcome to my styled pagel
My School
It lacks images, but at least it has style. I feel it is
My Friends
very easy to apply colors to my page.

Quite interestingl

100% • A<

Fig. 3.19 : Viewing HTML document style.html in browser after


applying CSS stored in an external file

This will tell the browser that the style sheet is found in the file called "mystyle.css"
and since no directory is mentioned, the browser will look in the same directory
where it found the HTML file.

If you save the HTML file and reload it in the browser, you will notice that there is
no change: the page is still styled the same way, but now the style comes from an
external file.

3.16 WHAT YOU HAVE LEARNT

In this lesson you have learnt how to create, save and view a HTML document,
formatting a web page, use of hypertext links. Also you have learnt about image
mapping (the technique of making links in different parts of an image to several
pages), and applying CSS to a HTML document.

-
Basics of HTML and CSS :: 83

3.17 TERMINAL QUESTIONS

1. Create a HTML file for the fo llowing web page as shown in figure:

11••••.•• _'_' •••• ...., ~


IL•.~~ •• · O@l!:ll ~- 1iI-- IIJ- CJr~- cia a -lB@
1I~\hoIo_~ ~.~Go""'''
-IP-I·I@-"'.,,' 1Il-
..,-
~
••'I
. It-I _<I>_I·II..-.."'_ ••••••• _v_,... ~"""'- »

Hello World!
Its my first web page.

JITML (Hypertext Markup Language) contains some predefined tags to create web pages.
n is very simple and easy to learn.
There are munb er ofJITML editors available. Most popular are:

MIcrosoft FrootPage

Dreamweaver

You can download some JITML editors that fteeIy available on the Internet

2. Write a HTML file to create the following web page:

~:'?tftrj;
••• Edt v_ FilVortH lods ....,
4o'ad< - ••• @ @l~ I iQ_m Cii_ .- G I~· ~ iii • I!l @
-It! c,.•••
_,_""'dj,jt""".hbn1 !I ('>,. I•.••••
»
m_-I LP-J:l©••.•••.
""'" f!lSa_, I>"'""'~
~·lt-I """'h_I·IEO- """'_1..l>doIe e"",-,
·1121•••••• »
.:
Tennlnoiogies used In Internet

1. JITML (Hypertext Markup Language)


2. lITTP (Hyperteo<l Transfer Protocol)
3. URL (Unifonn Resource Locator)
4. FI'P (PileTransfer Protocol)

IITML

Some irr;>ortant JITML tegs ore:

• <htm1>
• <head>
• <title>
• <body>

-
.. ....
.:J
'= rl'F~"-,',,,
em
.,.,
lilll<re ~

- 3. Write the tag that is used to place images in a web page. Give five attributes
that you can associate with this type oftag. Define Image Maps.

4. Explain Hypertext links. What is the method to link a specific place within the
same document?
84 :: Certificate in Web Designing and Development

5. Create a HTML file for the following web page:

Add"·"I~c:\Iinl<s.htm
m,1\oIIIIJIIeIIIr -I

Natlonlll mldtiJte of Optn Sclloelllg


B31-B, Kailash Colony
New DeIhi-48

Useful Links

Yahoo
Hotmail
Times of India
Hinduslan times

N.B: Image should be linked to http://www.nios.ac.in. The Text Yahoo,


Hotmail, Times of India, Hindustan times should linked to http://
www.yahoo.com,http://www.hotmail.com,http://www.timesofindia.com
and http://www.hindustantimes.com respectively.

ANSWER TO INTEXT QUESTIONS

l. B

2. False
3. Head, Body
4. Head
5. True

6. B
7. True
Basics ofHTML and CSS:: 85

8. <UL>

9. D

10. False

11. True

[0
12. False

13. B

14. <IMG>

15. BORDER

You might also like