Scribd
Upload
15 views15 pages

Plus 2 Cs CHP 5

Chapter 5 covers web designing using HTML, focusing on different types of lists (unordered, ordered, and definition lists), creating hyperlinks, and embedding multimedia. It explains the use of various HTML tags for structuring content, including how to create tables, frames, and forms. Additionally, it discusses attributes for customizing lists, links, and multimedia elements.

Uploaded by

achuzzpraveen
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
15 views15 pages

Plus 2 Cs CHP 5

Chapter 5 covers web designing using HTML, focusing on different types of lists (unordered, ordered, and definition lists), creating hyperlinks, and embedding multimedia. It explains the use of various HTML tags for structuring content, including how to create tables, frames, and forms. Additionally, it discusses attributes for customizing lists, links, and multimedia elements.

Uploaded by

achuzzpraveen
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/ 15

CHAPTER 5

WEB DESIGNING USING HTML

Lists in HTML
There are three kinds of lists in HTML - unordered lists, ordered lists and definition lists.

Unordered Lists
Unordered lists or bulleted lists display a bullet or other graphic in front of each item
in the list. We can create an unordered list with the tag pair <UL> and </UL> . Each item in
the list is presented by using the tag pair < LI > and </LI>.

We can customize unordered lists by setting the Type attribute to three different values:
Disc (default value), Square and Circle, which set the type of bullet that appears before each
list item.

<HTML>

<HEAD >

<TITLE > Unordered Lists < / TITLE>

</HEAD >

<BODY Bgcolor = “#DEB887”>

<H2 Align = “center”> Unordered List </H2>

While buying a computer, we have to consider many items. Here are some important
items to consider.

<UL>

<LI> RAM </LI>

<LI> Hard Disk </LI>

<LI> Mother Board </LI>

<LI> Processor </LI>

</UL>

12th Computer Science New10’s Web Designing Using HTML


</BODY>

</HTML>

Ordered lists

Ordered list presents the items in some numerical or alphabetical order. HTML provides the
tag pair < OL> and < /OL > to create an ordered list. The items in the ordered list are presented
by <LI > tag in < OL> element.

<HTML>

<HEAD >

<TITLE > Ordered Lists < / TITLE>

</HEAD >

<BODY > Bgcolor = “#DDA0DD”>

<H2 Align = “center”> Ordered List </H2

Consider the memory devices of a computer.

Then according to the speed of data processing.

We can arrange the memory devices as follows.

<OL>

<LI> Registers </LI>

<LI> Cache </LI>

<LI> RAM </LI>

<LI> Hard Disk </LI>

</OL>

</BODY>

</HTML>

12th Computer Science New10’s Web Designing Using HTML


We can customize the numbering system used in ordered list by using the Type
attribute, which can set with the values as detailed below:

1. Default numbering scheme (1, 2, 3, ...)

A Upper case letters (A, B, C, ...)

a Lower case letters (a, b, c, ...)

I Large roman numerals (I, II, III, ...)

i Small roman numerals (i, ii, iii, ...)

Definition lists

A definition list is a list of terms and the corresponding definitions. No bullet symbol or number
is provided for the list items. The tag pair <DL> and </DL> enclose the definition lists. Each
term in the list is created using the <DT> tag and the <DD> tag supplies the definition of the
term.

To create a definition list

<HTML>

<HEAD> <TITLE> Definition List </TITLE> < /HEAD>

<BODY Bg color = # FFE4C4” Left margin = “100” Right margin = “150”>

<H2 Align = “center”> Definition List </H2>

Today cyber security has an immense role in the field of Internet. The following are
some of the threats that affect a computer network.

<DL>

<DT> Spam :</DT>

<DD> Spam is the unsolicited e-mail sent in the hope of increasing the sales of some
product, or just for annoying people. </DD>

<DT> Phishing: </DT>

<DD> Phishing is an attempt to acquire information such as usernames, passwords and


credit card details by posting as the original website, mostly that of banks and other
financial institutions. </DD>

12th Computer Science New10’s Web Designing Using HTML


</DL>

<BODY>

</HTML>

Nested lists

A list inside another list is called nested list. Usually unordered and ordered lists are
nested.
Eg: -

<HTML>

<HEAD>

<TITLE> Nested Lists </TITLE>

</HEAD>

<BODY Bgcolor = “#E0FFFF”>

<H2 Align = “center”> Nested List </H2>

Consider the devices of a computer.

We can list some of them as follows.

12th Computer Science New10’s Web Designing Using HTML


<OL>

<LI> Input Devices </LI>

<UL>

<LI> Keyboard </LI>

<LI> Mouse </LI>

<LI> Scanner </LI>

<LI> MICR </LI>

</UL>

<LI> Output Devices </LI>

<UL Type = “Square”>

<LI> Printer </LI>

<LI> Monitors </LI>

<LI> Speakers </LI>

</UL>

<LI> Memory Devices </LI>

<UL Type = “Circle”>

<LI> hard Disc</LI>

<LI>CD Rom </LI>

<LI> Flash Drive/ LI>

</UL>

</OL>

</BODY>

</HTML>

12th Computer Science New10’s Web Designing Using HTML


Tags Use Attributes Values and Purpose
To create bulleted To specify the type of bullet. “Disc”,
<UL> Type “Circle”
list
and “Square” are the values for ●, ○ and ▪
To specify the type of numeral. The values
To create numbered Type
are “1”, “I”, “i”, “a” and “A”.
<OL> list
To specify the starting number. The value
Start
should be an integer.
To specify an item in the unordered or ordered list. Used inside the pairs
<LI> <UL>…</UL> and <OL> … </OL>
<DL> To create a definition list
<DT> Used inside <DL>… </DL> to specify each data item (or term) in the list
<DD> Used after each <DT> to describe the term

Creating links

A hyperlink (or simply link) is a text or an image in a web page that we can click on, and move
to another document or another section of the same document. The <A> tag, called anchor tag
is used to give hyperlinks. Anything given between the tag pair <A> and </A> will be a link.
Href is the main attribute of <A> tag. The URL (address of the web page/site) is given as its
value.

There are two types of linking – internal linking and external linking.

Internal linking

A link to a particular section of the same document is known as internal linking. The
attribute Name of <A> tag is used to specify the name of a section of the web page. This
name should be prefixed with # symbol to create the link using Href attribute.

<A Name = “Introduction”> INTRODUCTION </A>


<A Name = “Air”> Air Pollution </A>
<A Href = “# Introduction”> Go to Introduction </A>
<A Href = “#Air”> Air Pollution </A>

Example :
<HTML>
<HEAD> <TITLE> Internal Linking </TITLE> </HEAD>

12th Computer Science New10’s Web Designing Using HTML


<BODY Bgcolor = “f8f8f8” >
<H2 Align = “Center”> ENVIRONMENTAL POLLUTION </H2>
<A Name = “Introduction”> <B> INTRODUCTION <B> </A>
<P> <FONT Size = “15” >E</FONT >nvironment pollution is a wide-reaching problem and it
is likely to affect the health of human population. Here we discuss the environment pollution
in the perspective of <A HREF = “#Air” > air pollution </A>.
<A Href = “Water”> water pollution <A> and land/soil waste pollution. Studies find that these
kinds of pollutions are not only seriously affecting humans but also animals and plants. </P>
<A Name = “Air” > <B> Air Pollution </B> </A>
<P> The air we breathe is an essential ingredient for our health and wellbeing. Unfortunately,
polluted air is common throughout the world, especially in developed countries. </P>
<A Name = “Water”> <B> Water pollution </B> </A>

<P>The water we drink is an


essential ingredient for our ENVIRONMENTAL POLLUTION
health and wellbeing. INTRODUCTION
Unfortunately, polluted water Environmental pollution wide-reaching problem and is likely to affect the
and air are common throughout health of human population. Here we discuss the environmental pollution in
the world. Water pollution is the perspective of

caused by the discharge of air pollution , water pollution and land/ soil waste pollution. Studies find that
these kinds of pollution are not only seriously affecting humans but also
industrial effluents, sewage animals and plants
water and agricultural or
Air pollution
household waste. </P>
The air we breathe is an essential ingredient for our health and wellbeing.
<A Href = “# Introduction” > Unfortunately, polluted air is common throughout the world, especially in
developed countries.
Go to Introduction </A>
Water pollution
</BODY>
The water we drink is an essential ingredient for our health and wellbeing.
</HTML> Unfortunately, polluted water and air are common throughout the world.
Water pollution is caused by the discharge of industrial effluents, sewage
water and
agricultural or household waste.
. Go to Introduction

External linking
The link from one web page to another web page is known as external linking. The
URL (address of the web page/site) is given as the value for Href attribute.
<A Href = “http://www.dhsekerala.gov.in”>
The text inside the tag pair <A> and </A> will appear underlined and in different colour.

12th Computer Science New10’s Web Designing Using HTML


Example:
<HTML>
<HEAD>
TITLE> Anchor Tag </TITLE>
</HEAD>
<BODY Bgcolor= “FFFFFF”>
<H2 Align = “center”> Hyperlinks </H2>
<P> Now this will create a hyperlink to the website of Higher Secondary
Department. <BR>
Kindly click on the words.
<A Href = “http://www.dhsekerala.gov.in”> Higher Secondary Education </A>
<BODY>
<HTML>

Note:
The referencing <A Href = “http://www.scertkerala.gov.in”> is an absolute URL, because it is
referring to a specific URL. On the other hand, <A Href = “image .html”> is relative reference.
Here we give the file name, 'image.html' as the URL.
If the URL of the current web page document is D:\HTML\hyperlink.html, the web browser
knows that the hyperlink <A Href = “image. Html”> points to the file image.html in the
directory D:\HTML itself.

Creating graphical hyperlinks


We can make hyperlinks to images by using <IMG> tag inside the <A> tag.

Creating e-mail linking


We can create an e-mail hyperlink to a web page using the hyperlink protocol mailto.

<A Href= mailto: "[email protected]"> SCERT</A>

12th Computer Science New10’s Web Designing Using HTML


Inserting music and video

To add music or video to the web page, <EMBED> tag is used. There is another tag
<NOEMBED> which can be used to display a text if the <EMBED> tag is not supported by
the browser. The main attribute of the <EMBED> tag is Src, which specifies the URL of the
musicor video files to be included. The other attributes are Height, Width, Align, etc.
There is another tag <BGSOUND> with which music can be played in the background while
the page is viewed.
Eg: -
<HTML>
<HEAD>
<TITLE> Embed Tag </TITLE>
</HEAD>
<BODY Bgcolor = “#DDFFFF”>
<H2 Align = “center”> Adding Music and Videos </H2>
Here is a tag <B> <1> EMBED </I> </B> with the Multimedia features. <BR>
<EMBED Src = “song1/.mp3”, Width = “300” Height = “60”>
</EMBED>
</BODY>
</HTML>

Creating tables in a web page

Tags Use Attributes Values and Purpose


To specify the thickness of the border
Border line
around the table.
Bordercolor To set the colour to the border
To specify the position of the table
Align inside
<TABLE> To create table
the browser window.
Bgcolor To set the background colour of the
table.
To set an image as the background of the
Background
table.
To specify the space to be left
Cellspacing
between cells.
To specify the space in between the cell
Cellpadding
border and cell content.

12th Computer Science New10’s Web Designing Using HTML


To specify the horizontal alignment of
Align
thetext in a cell in that particular row.
To specify a To specify the vertical alignment of the
<TR> rowin a table Valign content in a cell of a row. Top, Middle,
Bottom or Baseline are the values.
Bgcolor To give background colour to a
particular row.
To specify the Align
heading cell. Data Valign Same as in the case of <TR>, but
<TH> will be bold and Bgcolor applicable only in a particular cell.
central aligned. To span a cell over 2 or more columns in
a
Colspan row. It is a kind of merging 2 or more
columns
in a row.
To specify the To span a cell over 2 or more rows in a
<TD> Rowspan
data in a cell column. It is a kind of merging 2 or
within a row. more rows in a column.
<CAPTION> To add descriptive text to a table as its caption.

Dividing the Browser window

The browser window can be divided into two or more panes to accommodate different pages
simultaneously. HTML provides a tag <FRAMESET> to partition the browser window into
different sections. Each individual section is called a frame. Such a frame can contain a web
page.

Tags Use Attributes Values and Purpose


To specify the number of vertical
To partition the Cols frames in the frameset.
<FRAMESET> browser Rows To specify the number of horizontal
window into frames.
different frame To specify the thickness of border
Border for the frames
sections.
To define the To specify the html file to be
Src
frame for loaded in the frame.
<FRAME>
including the
web page Name To give a name to target the frame
Used to display some text content in the window if the browser is
<NOFRAME> unable to support frames.

12th Computer Science New10’s Web Designing Using HTML


Nesting of Frameset
When we want to divide a horizontal frame into 2 or more vertical frame or vice versa nesting
of frameset is used.

Forms in Web pages


HTML Forms are used to collect data from the webpage viewer for processing. A Form
consists of two elements: a <FORM> container tag and Form controls like text boxes,
textarea fields, drop-down menus, radio buttons, checkboxes, etc.

Tags Use Attributes Values and Purpose

To specify the URL of the Form


To provide a Action
<FORM> handler to process the data collected.
container for
To specify the method to upload the data.
Form controls. Method
Get and Post are the values.
To specify the control type. The values:
Text creates textbox,
Password creates textbox in which
Type typedcharacters are displayed as
To make
asterisks (*),
different types
of controls Checkbox creates a checkbox where
<INPUT> user can enter Yes or No values,
such as Text
Box, Radio Radio creates radio buttons for
Button, Submit selection,
Reset clears the entries in the Form,
Button etc.
Submit creates submit button to upload
data,
Button creates a standard graphical button
on the form. We can call functions on
clicking this button.

Name To give a name to an input control.


Value To give an initial value to a control.
To specify the size of the text box
Size
and password box.
To specify the maximum length of
Maxlength
characters in text box and password
box.

12th Computer Science New10’s Web Designing Using HTML


To provide Name To give a name to the control
space to give Rows To specify the number of rows in the area.
<TEXTAREA>
text in more To specify the number of characters
Cols
than one line. in arow.
Name To identify the control
To create drop
<SELECT> To specify whether it is a list box or
down list box Size
combo box.
Multiple To allow selection of multiple items.
To specify the
<OPTION> Selected
items in the To indicate the item for default selection.
SELECT list
<FIELDSET> To group related controls in the Form.
<LEGEND> To set a caption for FIELDSET group

Form submission
The common way to submit a Form to a server is by using a submit button to handle the
submitted form in the <FORM> Tag.

12th Computer Science New10’s Web Designing Using HTML


Important Questions
1. Write HTML tag for the following:
a. Hyperlink to the website http://www.dhsekerala.gov.in
b. email link to [email protected]
2. Discuss the Lists in HTML
3. Write the HTML code for creating the following Webpage:
ABC Pvt. Ltd.
HYDERABAD
1. Health Care
2. Baby Products
a. Toys
b. Dress
3. Men’s Wear
* Casuals
* Formals

4. Aji wants to create a form in HTML to do the following:


1) Input name using text box.
2) Two Radio Buttons to select Male or Female.
3) Input Address.
4) Submit Button with caption ‘OK’
Write HTML program for the above.
5. Describe the use of ‘action’ and ‘method’ attributes of <FORM> tag.
6. Complete the following table.

HTML Tag Use


1. <B>

2. <HR>

3. Un ordered List

4. <DL> ‘

5. It is the line break tag

6. To display Heading in the biggest size

7. Discuss the attributes of <TABLE> tag


8. Write a note on the attributes of <TH>, <TD> and <TR tags>

12th Computer Science New10’s Web Designing Using HTML


Answer
1.
a. <a href = “http://www.dhsekerala.gov.in”>
b. <a href = mailto: “[email protected]”>

3.
<HTML>
<HEAD>
<TITLE> ABC Pvt.Ltd</TITLE>
</HEAD>
<BODY>
<H1> ABC Pvt. Ltd. <BR>HYDERABAD</H1>
<OL>
<LI>HealthCare</LI>
<LI>Baby products</LI>
</OL>
<OLType = “a”>
<LI>Toys</LI>
<LI>Dress</LI>
</OL>
<LI> Mens Wear</LI>
<UL>
<LI>Casuals</LI>
<LI>Formals</LI>
</UL>
</OL>
</BODY>
</HTML

4. 1) <input type= “text”>


2) <input type= “radio” name= “sex” value= “male”> <input type= “radio” name= “sex”
value= “female”>
3) <input type= “text area”>
4) <input type= “Submit” value= “ok”>

5. <Form> attributes
1. Action – Here we give the name of the program (including the path) stored in the
Webserver.
2. Method – There are 2 types of methods get and post.

12th Computer Science New10’s Web Designing Using HTML


Get method Post method
1. Faster 1. Slower
2. To send small volume of 2. To send large volume of
data data
3. Less secure 3. More secure
4. Data visible during 4. Data not visible during
submission submission

6.
HTML Tag Use
1. <B> To display content in Bold

2. <HR> Draws a Horizontal Ruler

3. <UL> Un ordered List

4. <DL> ‘ Define Definition List

5. <Br> It is the line break tag

6. <H1> To display Heading in the biggest size

12th Computer Science New10’s Web Designing Using HTML

You might also like