Website Designing:

Nextsteps
CONNECT
Write the attributes for ibe followingtags.

Tag Attributes

< font >

LEARN
You will learn about:
Creating a list on the web page • Creating hyperlinks
Inserting images - Inserting audio and video

TASK
You have formatted the text of the website for Mrs. Sharma. The different types of activitiesarestill
not clear. Organise or list the differentactivities under various categories. Insert imagesandcreate
links to move back to the top of the page.
Let us learn how to organise and enhance the appearance of websites.

100
 TAG
MMENTS
co allow you to explain a document to improveits
comments are not visible in the clarity or provide other
formation. browser;they are only displayed when
iri HTML source code. These comments are useful in explaining an author's
viewingview. Comment tag is an empty tag.
oint of Note : Use text-formatting
P esample, < ! tags to enhance text-
for
LIST
CREATINGA
havelearnt and used lists in MS Word. It is a greatway to organise information.
supportsthe following types of lists:
HTML
Ordered list
Unordered list
Definitionlist or description list
ORDEREDLIST TAG
Orderedlist is a numbered list. It is used when the items have a specific order. The
listis enclosed within and tags.The list item tag, is used to add
to
individualitems the list. The default numberingstyle is 1, 2, 3, 4,
Followingare the attributesof the tag.
Table 7.1 tag attributes
Attribute Description Example
type It sets the type of numbering type
to be used for each list item.
The values can be: a, A, i, I
and 1.
start It allows you to startthe list start
from a different number or where a is any number
letter. It always accepts the type "a" start
integer value.
The list will start with c.

UNORDERED LIST TAG

Unorderedlist is a bulleted list. It is used when the items do not have a specific
Order.
The list is enclosed within and tags. The list item tag,
Precedesthe individual items in the list. The default bullet style is disc (e).
 Following is the attributeof the tag.
Table 7.2 tag attribute
Attribute Description Example
type It sets the type of bullets to be used <ul type
for each list item.
disc
circle/squares /
The values can be: disc (e), a solid
round bullet
Circle (o), a hollow round bullet
Square (r), a solid square filled bullet

ACTIVITY

What will be the output?

type
type = "a" start
3 type — "I" start
4. <01 type = "1" start
5 . <ul type = disc>

6 . <ul type — circle>

DEFINITION LIST OR DESCRIPTION LIST

Definition is a list of terms followed by their description. It consists of the following
three tags:
Table 7.3 Definition list tags
Tags Description
Description list: It marks the beginning and end of the list.
Description term: It marks the definition term.
Description definition: It marks the description of the definition.

102
 Hindi

nüflt

n ( list d list, Orderedand unorderedlists can be nested

而而 tth fo a multilevellist
1
 ACTIVITY 3

A. Using a nested list makes a list

•Lucida site-4-eolor•
of activities in the Activity ktlvity
ep•Ilgn•
Studio web page. chr color-•
ep Then Is plenty to after schml hwr-sl
Activity hasa varietyof after-S&OI •ctivltles ranging
Craft, Cwklng, Dance, Education, Languages, Sports and Mventure
fr« Art
Plus. read the belcu for de-tans and about

face • •LucidaCalligraphy- color—

typ• —
Art Craft
cuitm
Painting
Calligraphy

Clay Art c/11>

%kfng
&klng

cui type
Starters
and Salads
Baking

Snacks

You will get the following result.

B. In the same manner, add
the list of other activities Activity Studio
under relevant categories.
•Thereisprenry to do after schoo(fiours!
C. Explore the other types ActivityCfubhas a variety of after•scftooCactivitiU
and Adventure, an" •Theatre.PCease
rmying from art anmcraft. cooking.Dance.
readafftfte information "tails and specificationsaboutour after-schoolLanguages,
sport,
activttt&
of ordered and unordered A Art &craft
lists. o Drawmg
o Painting
o Calligraphy
Or9ami
eTfcwer
Cray
Art
D. What will be the output of *faking
o Cam" :Maftng
the following code? 3, Coooftng
Oioco(ate
*faking
o Starters
Co-scholastic subjects Soups and Sarads
o Baking
Desserts
offered: o Snacks

<LI>Art andCraft</LI>

104
 IMAGES
the look of the web page. It will add more meaning
imageswill enhance
visual meaning added to it. HTMLallows you to insert the
text will have
formats:
it. it-nage
Interchange Format
f0110. Graphics
Photographic Experts Group
EG: Joint
portable Network Graphics
JPNC.
is used to insert images. It is an empty tag. It has the following attributes:
tag
Table 7.4 < img> tag attributes

Description Example(s)
Attributes
It specifies the URL or the path of < img src=
etc
the image. The image can be stored /desktop/ activity .jpeg>
in any folder of your computeror it
ma be a link to a web a e.
the height and width of src= "art .jpeg"
height It specifies
<img
he ight= "300" >
and the image.
width The value can be expressed in < img src= "art .jpeg"
pixels or percentage. height= "30%" >
< img src= "art .jpeg"
width= "500" >
< img src= "art .jpeg"
width= "50%" >
align It specifies the alignment of the <img src= "art .jpeg"
al ign= "bottom" >
image. The image can be vertically
or horizontally aligned. < img src= "art .jpeg"
Values for vertical alignment: align= "right " >
top, bottom.
Values for horizontal alignment:
left, centre, right.
B default ima es are left ali ned.
border It specifies the width or the thickness <img src= "art .jpeg"
of the border around the image. The border= "6" >

value is s ecifiedin ixels.

alt It specifies an alternative text that<img src= "art .jpeg"
the browser displays if the image is alt= "Activity Studio" >
loadin or cannot be dis la ed.

105
 Help Look Up
If you do not specify the height and width of the Snippet: a
of code small
image, it will be inserted in its actual size. designed
illustrate a to
Align and border attributesare not supported by HTML 5. specific
It is not essential to mention the complete path of the
image if it is in the same folder as the web page.

CTIVITY 4

A. If image is to be used as a background then which tag and attribute will you use?
Hint: background attribute of body tag
B. Can Activity Studio website be in Hindi? Write the code snippet.

.CTIVITY 5

Add images of various activities. Fie

chtnl>

<tltl» Activity </tltlo

<font face "LucidaCalligraphy" size- color—

Chl> •Ilgn• -center-» Studio
src• "A "king
(hr Size •3- color• width•-8%- allgn• •center-y
align TMr• is plenty to do after schoolhours!
Actavlty Club has a variety Of after-school activities ranging
fr• Art and Craft, Cooking, Dance, Education, Languages, Sports
Please read An the below for detans and specifications and uventure
about our

Activity Studio

Tfiereispfenty to (o after
You will get the output as shown.
activities frontArt and Dance,
andspectficatimu
about "w for details

A Art &craft
Drawing
• Caffigrap/iy
• J(mver5taking
CanuCe *taking
3. Cooofing
CftocoCate
*taking
Starters
• Soups
andSafatG
 small icon in
will find a
es,youimage.
f an the browser
cannot -Activity Studio
because the
using
image
It you gave.
Tfiere isprenty to do after
Activity Club fias a variety of
ath
p problem, put the image
Dance. EducatiotcLanguages.Sprts an' Adventure.and
the information 6ef0%'
for detaiCsand
of we this as your html
'Bcifteattoru our

samefolder t -a Art & Craft

. the o Drawing
o Patnttng
document. " means that the o Catngrapfiy
•jpg folder as the o Origami
in the same o CfayArt
e is that called for it.
o f[cwer Making
o CamdTe Making
document B. Coooking
o CjiocoCate*taking

HYPERLINKS IN HTML
CREATING
Awebsiteis a collection of web pages. These pages are linked to each other through
At times, a web page has text and images that take you to different web
hyperlinks.
Such text and images are hyperlinks.
pages.
aretwo types of links in HTML:
There
link: A link that connects two differentweb pages. When you click this link
External
anewweb page opens in the browser window.
link: A link that connects to another section on the same page.
Internal
youcanspecify the colours to hyperlinks by using the following attributes of the
body tag:

Table 7.5 Body tag attributes

Attributes Description
Iink It specifies the colour of the link that is not clicked even once.
The default colour of the link attribute is blue.
VIink Visited link specifies the colour of the link that has been clicked.
By default the colour of the link is purple.
alink Active link specifies the colour of the link when you hover the
mouse over it. The default colour is red.
TOchangethe colour
of the link, change the value of the attribute.
<body link=
"orange" v link= "blue" al ink "green" >
 ANCHOR TAG
It is a container tag.
It is used to create a hyperlink in a web page.
Following are the important attributes:
Table 7.6 tag attributes
Examples
Attributes Description
<a href — "c :/ desktop/
href It specifies the Drama
html " > Theatre </a>
destination of the link.
If the word 'Theatre' is clicked, thefile
'Drama' that is stored on desktop
opensin
the browser.
<a name= "top" > Activity
name It specifies the linking Studio
sections on the same
page.

ACTIVITY

The web page has become too long. Create a link TOP at the bottom of the page to takethe
user back to the starting of the page.
<html>
<head>
<title> Activity Studio </title>
</head>

< font face = "Lucida Calligraphy" size ="4" color

<A name — "top" > align - "center" > Activity Studio

<img src="A boy making a sandwich. jpg" >

<hr color= "green" align="center" size
align = "justify" > There's plenty to do after school hours! <br>
Activity Studio has a variety of after school activities ranging
from Art & Craft, Cooking, Dance, Education, Languages, Sports and
below
Adventure , Plays and Musicals. Please read all the information
for specifics about our after school activities .
<br> <br>
 type
zo & Craft
M circle” >
type
zul
Drawing </li>
Painting
Calligraphy
origami
Quilling </li>
C lay Art </li>
Flower Making </li>
Candle Making

Cooking
"circle” >
zul type
Chocolate Making </li>
Starters </li>
Soups & Salads </li>
Baking </li>
</li>
(li> Desserts
Snacks </li>
< li >

dol >
<br> <br>
the
Jf you want to join
activityjoyride
o e
ride then contact C O FileI
Appl Free Sh&Ŕińt O Cisooń
the undersigned Activity Studio
align
Contact :
Mr. Rahul Verma
Phone:9599057107
ť after
<br>

align "right” > Orvamî

<A href
TOP • St•rtfTS

< / html
> Ett•dŕyFy

YouWill get the

outputas shown:
 ACTIVITY 7

Observe the link 'TOP' at the left corner of the web page.
A. Create a hyperlink to an email address.
To do so mailto: keyword has to be proceeded before the email address
of the
example,<a href — "mailto :activitystudio@gmail .com"
s recipient
Contact
B. Linkthe page you created with a page on the Internet.
Type the following code:
<a href - . Click here to search
for information

ACTIVITY 8

In the given web page, identify the tags

and its attributes used. e file.///C:/htmlÆolarssystenhtm
Solar System
There are 8 planets in the Solar system. These planets
Click the given planets to know more aboutthe orbitaround
theSun.
planets.
1. Mercury
2. Menus
3. Farth
4.Mas
6.Satum
7. uranus
8. Neptune

EMBEDDINGAUDIO
You can easily insert audio files in a web page. The <audi0> tag specifies
a
standard way to embed an audio file. In HTML 5, there are 3 supportedaudio
formats:
mp3: MPEG (Motion Picture Experts Group) Layer-3
wav: Waveform Audio File
ogg: from the jargon word logging'

110
 are:
ttribUtes Table 7.7 <audi0>
flied tag attributes
Descri tion
Attributes le(s) Exam
It defines the URL or the <source src= "D: \ intro.
svc
address where the audio file mp3" >
is hosted.
It defines the file format. < source src= "D: \ intro .mp3"
type
type "audio/mp3" >
s It adds audio controls such <source src= "D:\intro .mp3"
control
as play, pause, volume. type = "audio/mp3" controls >
defines multiple media resources for media elements, such as
sourcetag It allows you to specify alternativeaudio/videofiles which
The
ide0> and
choose from. The browser will use the first recognised format.
thebrowsermay

support all three formats, whereas InternetExplorer supports only mp3.

GoogleChrome and Firefox

VIDEO
EMBEDDING
The tag specifies a standard way to embed a video file. There are
video formats:
3 supported (MPEG) Layer-4
mp4:Moving Picture Experts Group
webM:Web Media
logging'
ogg:from the jargon word
Theattributes are: tag attributes
Table 7.8 <video>
Exam le(s)
Attributes Description
the address <source src= "D: \ intro .
src It defines the URL or
where the video file is hosted. .
<source src= "D: \ intro
type It defines the file format. "video/mp4
mp4" type
">

of <source src=
width and It sets the height and width intro .mp4"
height the video. If height and width width= " 320" height= " 240
">
flicker
are not set, the page may
while loading the video. <source src= "D: \ intro
.
such as "
controls It adds video controls mp4" type = "video/mp4
play, pause, volume. controls>
111
 ACTIVITY 9

Write the following •untitled • Notepad

Help
code. You may use File Edit F«mat View
the audio and video <bodp
of your own choice. (audio controls> type - •audio/mpeg•controls
<source src >
Executethe code.
width=Ø32ø• height-'24€•
control

Ln 10,Col 8 100% Windows (CRLF)

ACTIVITY10

Discuss:
'S} Different types of lists and their uses.
Different image formatsthat can be used in a web page.

RECAP
Commentsallow you to explain a documentto improve its clarity or provideother
information.
Ordered list is used when the items have a specific order. The default numberingstyleis

Unordered list is used when the items do not have a specific order.
Definition list is a list of terms followed by their description.
Adding images will enhance the look of the web page. Image can be insertedusing ta

Anchor <A> tag is used to createa hyperlink in a web page.

You can insertaudio and video files using <audi0> and <video> tags.

112
 comments
list
dere d
or
list
onordered
list
sested
erlink
HYP
link
'External
link
: Internal

ASSESS

Fill in the blanks with the help of the given words.

Link Ordered <img> Definition Unordered

Li,iÅ specifies the colour of the link that is not clicked even once.

2. tag is used to insert images.

ist is enclosed within the and </ol> tags.

4. list is enclosed within the <ul> and </ul> tags.

5. .60 list is a list of terms followed by their description.

Q fick (V) the correct answer.

1. Name the link you see when you hover your mouse over that link.
b. Vlink c. link d. Dlink
2. Which tag is used to create a hyperlink in a web page?

3. A link that connects two different web pages.

a. Internal link External link c. E-mail link d. chainlink
 4. . allow you to explain a code in the document.
Comments b. Image c. List d. Video
5. Which symbol is the unnumberedlist displayed with?
a. Rectangle b. Arrow c. Bullet d. Star
6. type = "i" start="6"> will startthe list from which number?
b. vi d. 06
7. In which unit is the value of height in the code <img src= "house.jpeg"
height
specified?
a. Inch b. Points c. Pixels d. Metres
8. type = "audio/mp4" defines which type of edia file.
a. Image b. Audio Video d. Animation

State True or False.

In the definition list, items have a bullet symbol in front of them.
2. Vlink attributespecifies the colour of the link that has been clicked.

3. The href attributespecifies the destinationof the link.

4. The border attribute specifies an alternative text that the browser displays
if the image is loading or cannot be displayed.

5. The src attribute specifies the URL.

Answer the following questions.

1. What is a nested list?

2. Why is linking between web pages required?Explain with an example.

3. Name the two types of image files used in web pages.

4. What do you understand by hyperlink? Explain. What are the differenttypesof linking?

5. Jaya created a simple web page. Now she wants to add a logo, link a few pagesandadd
images. Can you suggest her the appropriate tags and their syntax?

APPLY
A. What will be the output of the following codes?
<html>

My favourite fruits are:

14
 dit3C>
type
4/11 >
App e
Banana
Ii >
orange
< / 1 i >
papaya

/btrnl>
code to change the disc to square.
Rewritethe

2.

220" height=" 340" controls>

video width="
z movie .mp4"
src=" >
zsource

:
The movie clip is about the impact of Corona viz-us .
z p > zb>Note

z/b0dY>

z/html>
the error
B. Identify
in the following HTMLcode that attempts to show the list of sports/games
Write the correct code.
againsta red background.
<html>

<ultype square bgcolor = blue>

Football </li>
Cricket </li>
Hockey </li>

< / html >

C.Findthe error in the code to insert a jpg file.

scr= ="pic.jpg ">
2. < img
src= ="pic.igf ">
3. <img
pic. jpg" width="100" height=" 80" alt= " PIC"
4.
img
.jpg width— I'100" height—" alt=" Pic"

115
 following output.
D. Write the code for the

Balanced Diet

VitaminB
VitaminC
• VitarnmD
2. Minerals
Iron
e Iodine

E. Create a web page on Term 1 syllabus.

Follow the instructions:
(3 Change background colour
Heading Level 1: Term 1 Syllabus
Add a horizontal rule f size 6 which is red in colour
- Heading Level 1: Gra e 7
(3 Write a paragraph on the importance of testing knowledge
Change the font colourand size of the paragraph written
- Right align the paragraph
List the syllabus for all the subjects using a nested list.
Bold: Name of your subjects
Underline: Name of your subjects
($) Insert a link to go back to the top of the page
F. Write the HTML code to generate a web page in the format shown below:
Title of the page should be New Taste Restaurant.
Text colour of the main heading: Teal
Background colour: light blue
Font face: Arial
• Logo to be put on the top corner of the page from a file on your computer
Pages linked with:
Starters as starters.htm"
Main course as maincourse.htm"
Desserts as "desserts.htm"

16
 desserts to be displayed in
course and pink colour
be visited link colour
should be black and
active link colour
message font size should be
page for your school. Include pictures and
a web hyperlinks.
6,

following features:
hasthe
designed to describe data, not to display data like HTML.
XMLwas
are not predefined.
XMLtags
programmerdefines his/her own tags.
The
a replacement for HTML.
XMLis not
in XML:
A code
>
(not e
<t0>Ashish</t0>

<from>Nimisha</from>
<heading>Meeting scheduled</heading>
Meeting scheduled on Aug 12, 9:20 a.m

</note>

Thetags like and <from> are not defined in any XML standard.These tags are created by the
programmer.

Thedifferencebetween XML and HTML is that the tags used in XML are defined by the programmer
andin HTML the tags are predefined.