« ome Learn nyw ere

single spaces when displaying. This is an overly simplistic

It is clear that the browser did not seem to care about contiguous whitespace characters & coalesced them into
the browsers will not behave that way in all situations. More specifically, this is controlled through CSS & formatting contexts, which will be covered in detail
planation &
bsequently.

Select all the HTML snippets using <hl> element, that will result in the below output
,-. •iOl

j h1 is what I am
... :t°'\"
~
;tO)"
<°'~

<°'-s • \(O~ ;tO)"

(of •io~
<°'~
~
mI <hl >hl is what I am</ hl > i°')...
•:to~
•io~:t°'\"

I
<°'~
<°'~ •io~o:
(of~

is ;t0)"
<hl>hl

m what

I am</hl >
. •~(O~
(O'S •io~
<°'~
:t°'\"'
--:i,.,<0~
:to\...
(O'S

of'l<°'\
:to\... ·
I
•io~
:to\...
<hl >hl is what am . </ hl > .~(O~ .
(O'S

:t ~--
mI
io~
hl is what I am </ Hl >
't\<o\
ie)l
<Hl >
<°'~
 Q jt Home Learn Anywhere..

2 1.2. Non -breaking space ~

metimes, a developer needs to actually add multiple consecutive spaces whereas

c:J

e default inline formatting context coalesces the consecutive spaces into one space
-
QI 0
o--------
]-

~
1
index.html O
[email protected] ..

.,ci\.,

<hl>Hello&nbsp&nbsp&nbs p&nbsp&nbspWorld</hl >

0-
Support Logout (!

as seen previously.

In such cases, it is possible to use a special character representation called as a non-

breaking space to make it possible, without changing the default formatting
context.

G
The text &nbsp ; represents the existence of a non - breaking space
when encountered as part of the HTML code. When displayed,
browsers will replace the string &nbsp ; with a single space character
that will not be coalesced with the other consecutive space characters.

For example, this snippet

one space </ strong > LIVE VIEW

Hello World

1
( <strong >Four&nb sp; &nb sp; &nbsp; &n bsp; spaces</ strong>

results in
fl! Terminal m Test cases
 Q ~ Home Learn Anywhere• [email protected] .... Support Logout(♦

2 1 3 HTM L e nt1t1es ~ c:> - w ~ index.html 0 0 Ql

_g - - - - - - - - CJ)
CJ)
:::,
~ 1 <aside>lOO &deg ; · Fahrenheit · &lt ; · SO&deg ; ·Ce lsiu s< /a side>
..0
w Ql
I HTML elements begin with the< character. Since it signifies the start of an 0

ement, it is called as a reserved character. When you really need to show that
character to the user, it will not work as expected. This is where we use an entity
•V, •

called as &lt ; which when displayed by the browser appears like <
~,
0
a::

Entities in HTML are any text that begins with an ampersand (&
character) and ends with a semicolon (; character). They are mostly
used to display invisible characters or reserved characters or symbols
which are not easy to type using typical keyboards.
e
Here's a list of commonly used entities & their type

Entity Description
....
·C
CalJed the non-breaking space, it appears
&nbsp;
as an invisible single space character.
LIVE VIEW

Character for less than. It is to represent

-~100° Falu-enheit < 50° Celsius
&It; :tO.\' the reserved character <.
~. .;.,'<°'~
,~-
Character for greater than . It is to
&gt;
represent the reserved character >.
A,--,
,c Character for ampersand. It is to represent
&amp;
the reserved character &. :tO.\'
....;.,'<f
f3 Terminal Ee Test cases
 Q 11 Home Learn Anywhere• [email protected] • Support Logout (♦

2 1 4 Pre formatted text ~ c:> - QJ 0 index.html 0 ~6\'

•~O.~
0 ai
0 °'
a. 1 2 &gt; '(6~ °'
::::,
.0
~ QJ
ing non-breaking space entities was a good way to control the appearance of 2 &gt ; 0
~
hitespaces in output of a given HTML code. There are many other situations where
it is simpler if the browser can display the whitespaces as they are in the.HTML code
3
4
~6\'
•
5 •~O.~ V'l

without coalescing them. Pre-formatted text allows one to do that 6 -~~

t61
~o; a:0
•~6~
'(6~ ~I
<pre> element in HTML is used to wrap text that has to be displayed
?:
QJ
to the user exactly as written in the HTML file. It stands for pre- >
~6\' QI
>
formatted text. Commonly all text inside it is displayed by browsers -~~
•~O.~ :.:::i
t0.1
using what is called as a mono-spaced font, one where every character G
of the text has the same width.
~6\'
•~O.~
The foll owing code snippet uses only whitespaces, ...J I,\ & / characters to achieve the '(6~ •~O.~
~6\'
effect of a banner-like text as can be seen in the output below the snippet. Without '(6~
using a pre-formatting, this would not be easy. ).,
6
6'(\'(

<pre > t6\~'( ~6\'

•i\'<
t0.1 erl&\ LIVE VIEW ~ □
I _I
<h2 >
I I Heading <u >2 < /u >
II_ < /h2 >
\_I
</ pre > ~6\'
-~-~o.~·
t0.1
.
-~o.~
~6\'
I 6\•I
'(6~
o. I I
11- ~6\'
\_I -~~
;_..-VS.
-~i.
f3 Terminal m Test cases <(61
 0 e ►1,_,,,i,p i .-arr, Anywh~,., • 123 11 240 <,t (u'lpu 111 • ~upport Logout(♦

- - - - <>~'
' . , .. ,.. r---~, - cw r;:t( mdex.html
------~--
..
. 2 ----- - ---
.,s:,,
Q.
~
p , now that one of the mo~\>ornrnon use cases; of the r > clement 1s to show
ource cod , Howeve,Jf1ec,:mearnng of a
~
J element a~ d1~our;:.ed prcv~~y. ,~
.
'( ~ •:tO:
only lo tnd1cale :that 11s contents are pre formatted & that wh1tespa~~u~ be
d1spla1ed exactly as in the code. On the other hand., to and,cate that a text 1 ,ourcc
cod~e,:Je must u~e the ' > element. thni doc5 not s.ay anything about
. , ,~
. .
.. ~~·nrlespace~ :<~\...
," ·:t~~

The <(;od( > element in HTML is u~ed to wr3p h?~ that 1s m~ant to bl?
<°'~
source code. Commonly., atl te>ct in:.id<? a t, > el'=ment ~) d,,playf.:d

~
:<~\...
by browsers using wNit is called a~ o mono sparred font, one.? whf.?l·'-'...
every character of the te><t h3s th<! nme width . '<°'~.,-
HeieJ ~ a code sn ppet showlng th,, u g :

'( I\:::. J.v.S,npt •-••sion <codrnon,t

a const.ot b~ nAme <var >empt>'Arr< /var > that cont atn• "" c
,.,,::.."'~0.\;l,,/codo ..c1.,.,,
t ~ c,vrtr ►Ar-rllt ' / 'liU ►
c/ p>

. ~~'(
Heading l
which browsers d1spl~f i
'(
<h2 > O.\""
The JavaScript e>'.press,on n t 1111 t yhi 1 ( 3 ; declare~ • com,tant by name llead1ng <u>2 </~ ..:
</h2'>
e:f~/•,rr that contains an empty Array obJect

•:t6~'(
~0.\""
'<°'~ •:t6(t.
As can be noted here, there 1s no use of the f r. element as ther~ is no need to
'<°'~
121 Terminnl m Test cases
 Q A Home Learn Anywhere • [email protected] • Support Logout C+

;:_ 1 6 , kbd' .. <,amp, elements ~_....- 1

r::> _
... index.html 0
~
0
a. 1 V <p>
J)
2 To selec t all , yo u ca~ uze • ~ ~ 5 ► r- oJ · ~
~ /kbd >Co mmandtA//ldY:I > o~ ¥.acOS &a - ;
3
Like the <code > e lement is used for source code, there are two other 4 l /khd~Contr o ltA✓ /kbd > O LJ o t~~: pl a•fr.r- -
~0.)'
e lements, the <kbd> e lement & the <samp> element. The former is 5 o n yo ur k~ yboa,\ ,i,N Ill

6 </p> tO~ ~6 0
a:
-~o.~
used to indicate keyboa rd shortcuts or user input whereas the latter is tO~ ~
osed to indicate the output of a program. ~to.),
?;
QI
tO~ >
He re is a code snippet showing the usage: QI
>
::;
e

I
<pre >$ <kbd >ls -al</ kbd > •
<samp >total 0 ..
drwxr-sr-x 2 ct-4 ct-\Jser 16 Sep 27 04 :48
drwxr-sr-x 3 ct-4 ct-user 15 Sep 27 04:48
</ samp >< / pre > ~0)'
-~o.~
resulting in '<°'~
$ls - al
total 0
drwxr - sr -x 2 c t - 4 c t - user 16 Sep 27 04 : 4 8
dr~xr - sr -x 3 c t - 4 ct - us&r 15 Sep 27 04 : 48
i

What the <kbd > & <samp> elements did is to associate meaning to the text they
e nclosed .

• •tO.''
t 0Vour task ~0)'
1. In the j ndex . html fi le, wrap the keyboard shortcuts Control +A. -~o.~
r _____ ..J , A : - , , l _1, -•----J..-
..ti~
E! Terminal G:I Tc5t casci
 Q -8 Home Learn Anywhere • [email protected] • Support Logout[+

2 1 7 strong importance, bold c:J - ~

index.html 0
_Q
c.. 1 V <p>
~
2 ----;)! You ·must ·ensure · that ·< strong>important ·< /strong>things ·are ·marked · up · accordingly <br >
~
3 ~ We · use·a · strong · element · to ·wrap ·something ·which · is <stro ng >· important ·< /str ong><br>
The <strong> element indicates strong
importance or criticality for the text it wraps. Most
4
5 t ----;)! If · it ·is · only · to ·bri ng ·visual · <b>a ttention </b> , ·we · use ·a ·b ·e l ement !
</p>
,,0,~'
' .,,
,1\.(0
-~()''
V)

0
a:
browsers typically display the text in bold
typeface.
<°'~
~0.\"'
- · - - - - - - - - ~ "'t,.(!J.~
~~-
'(O.~
<p>
<strong >Smoking is prohibited . </ strong >
Do not smoke in this area. Use designated areas f o r smok:
</p >

resulting in

Smoking is prohibited. Do not smoke in th is a rea. Use

deisgnated areas for smoking .

While browsers typically use bold face to display this text, the
element's purpose is not to make the text bold faced (for bold
•\l•-e•~o.\-- LIVE VIEW

facing, one case use CSS). A related element <b> can be used You must ensure that

.I
important things are marked up
if attention has to be drawn to a piece of text without accordingly
enhancing its importance. We use a strong element to
wrap something which is ~<0.\"'
important
<b> element, historically, used to mean bold If it is only to bring visual
1 typeface. However, it now only brings attention to attention, we use a b element!

· to the text it wraps.

f3 Terminal m Test cases

 ~Home Learn Anywhere • [email protected] • Support

2.1 .8 emphasis, 1tal1cs -~ \;:; !"'f"·"1' c:J - ai index.html 0 ai

o------
]-1 <p >
-- V
Ol
Ol
::,
..c
w 2 ---;){ Thank ·goodness ! ·You ·are late · <em>only</em> ·by ·an ·hour ! (I)
0
~
In spoken language, when we want to emphasize on a word or a
3 </p>
•
phrase, we stress that word or phrase. The stress imparts a slight V,

0
change of meaning to the emphasized words and phrases. A common a:
~I
practice to indicate the same in written texts such as printed books,
magazines, etc. is to italicize the stressed words and phrases. The
<em> element in HTML imparts that meaning to the browser that the
text it wraps has to be stressed when spoken. e
See the below code snippet, that shows two different lines

I <p: em >I </ em > never said she took my stuff <br >
I <em >never </ em > said she too k my stuff
</ p >
--------~---~------~1(6t~
resulting in
~ci,)..
•~O.~

,rO.)--
.~\'.· ~ - LIVE VIEW ~ □

/ never said she took my stuff

Thank goodness! You are late
only by an hour!
I never said she took my stuff

The stress in the first sentence is on the word I where as it is on never in the second
sentence, subtly changing the meaning of the same written sentence, This is an
example of how the <em> element can be used for imparting emphasis to the
relevant part of a text. On one hand the text becomes an interesting read because of
the emphasis, it also benefits those who rely on screen readers where they can voice

f2I Terminal m Test cases

 2 1 ~ underline or unarticulated annotation c:> - ai ~ index.html 0 0 a,
o -------- O'l
O'l
:,
]- 1 V <p> ..0
UJ
~ 2
~ The ·most ·<u >butiful </u>· things · in ·the ·world · cann o t ·be · seen ·or ·<u> tuched</u >, ~
3 --)l they ·are · felt·with ·the ·<u>haart</u> . 0
The <u> element in HTML traditionally was just a <Ip>
presentational element, visually underlining the text it V,

0
a:
wraps. Its meaning has been enhanced semantically to
~I
indicate that the text it wraps has a non-textual
~-
annotation (e.g. showing a red squiggly underlining a QI
>
QI
spelling error). >
~

e
See the below code snippet, that indicates spelling errors

<p>
This text has a <u>spaling</u> error, which is marked up in an un'
</ p >

This text has a ~P-aling error, which is marked up in an unarticulated eee LIVE VIEW ~ □
J
annotation. ' I
f I
The most butiful things in the
world cannot be seen or tuched, ri't
l
they are felt with the haart.
1
Note: avoid using this element with its default underline style as
default underlines are visually associated wit~ hyperlinks on the
I I:
internet. When we discuss CSS, styling the <u> element will be
discussed.

l
Your task r
mTerminal e:J Test cases
 Q -8 Home Learn Anywhere • [email protected] • Support Logout[+

2.1.10 . Subscript, superscript c:J - (I) index.html 0

_Q
Q. 1 <h l>Ramanujan ' s ·number ·- · 1729</hl >
X
w
hile indicating math formulae, chemical formulae, V <p>
~
ates or an item number, it is common to use 3 ~ The · number · 1729 · is ·called ·the ·Ramanujan ' s · number , ·which · the ·great ·mathematician , 0
~ Sn inivasan · Ramanuhan · (December ·22 ^nd · l887 ·- ·April · 26 <s up>th </ s up> · 1920 ) , · is ·quoted ·
subscripts & superscripts. In English, the sentence, it
5 ~ to ·have ·described · as · the ·smallest ·number · that ·can ·be ·expressed ·as · the VI
· is common to say, "he came 2 nd in the class!" 6 ~ sum ·o f · two· cubes ·in ·two ·differe nt ·ways . :t"'>' 0
•:tO.~ i:L
Notice the suffix part (nci) of the number, which is
raised above the rest of the text. This is called a i,.),
7
8 V
< /p>
<p>
"-°'~ ~I
9 ~ 172 9 ·= ·12<s up> 3</sup> · + ·l <s up>3< / s up>
superscript. The equation representing the ::Cl.I
Pythagoras theorem in mathematics can be
~r ~(I
10
11
,~
~
<br>
172 9 ·= ·1 0 <s up> 3</sug > ·+ · 9<s up>3< / s up>
>Cl.I
>
indicated as xr + x~ = x~. Here, you can see use 12 </p> :.:::i

of both subscripts & superscripts e

"-°'~ :(o.),
The text that a <sub> element wraps is •:tO.~
treated as a subscript & appears aligned ._i,.~

below the regular flow of the text.

Similarly, a <sup> element causes the
text it wraps to align above the regular
flow of the text.
-~:<°'~
:<°')...
.

~ -i-
._o;..,_
. :(0.),

Ramanujan's
LIVE VIEW

1 See the below code snippets & their corresponding number

outputs to u,nderstand better
1729
<p>
The chemical formula for butane gas The number I 729 is called
(the biggest component of the LPG gas one uses the Rarnanujan's number,
is <strong>C <sub>4</ sub >H< sub >10< / sub ></ strong which th e pre~t

E! Terminal Ee Test cases

Q ~ Home Learn Anywhere .,.. [email protected] .,.. Support Logout[♦

2 111 Small element ~ c:> - ai index.html 0

o--------
]- <label · for= " tnc " >
~ < input · type= " checkbox " ·id= " tnc " > · I · agree · to · the · terms · &amp ; · conditi o ns
~ 2
</label>
<small> element in HTML represents fine -print,
4 V <p>
commonly used to to wrap legal terms or side ( 5 ~ < small>Please·make · sure · to·read · th~ ·terms·&amp ; ·conditions ·before · you ·agree ! </ s mall > ~

remarks. Browsers render the text inside a

< small> element one font size smaller by
6 < /p> 0
0:::
~,
'!,_6)"'
::QI
default.
"'!.°'~ '!,_6)"' >
QI
(.6~ "'!.°'~ >
::i
(.6~
See the below code snippets & their•corresponding outputs to
understand better
e
6)"'
<h3>Cat</h2 > "'!.°'~ '!,_6)"'
(.6~
<p>
The <strong >cat </ strong > is a domestic animal. It is the
.,o.~"'!.°'~ .
"'!.°'~
'!,_6)"'

It is commonly referred to as a <strong>house cat</stron1 .,o.~

</p>
<p> '!,_6)"' ~
<small> "'!.°'~
&copy; Code Tantra .,o.~ .~:• s•
(.6)•
LIVE VIEW ~ □
</small> v,.,.

</p> D I agree to the terms &

6) · conditions
"'!,,o;

Cat f.°'~ '!,_6)"'

.,o.~"'!.°'~
Please make sure to read the terms &
conditions before you agree!
The cat is a domestic animal. It is the only domesticated species v-l.,V'
in the family Felidae. It is commonly referred to as a house cat
to separate it from the other members of the family. t)''
© CodeTantra '!,_6)"'
. "'!.°'~
ti~
13 Terminal m Test cases
Q ~ Home Learn Anywhere "" 12311240.st@lpu .in "" Support Logout[+

2 11 2 Mark element
2.H c7 ~
index.html 0
-
o--------
]- <h3 >Searching · for ·India <lh3 >
1
2 V <p >
~
-----?l <mark>India <lmark>n , · officially ·the ·Republic ·of ·<mark>India <lmark>n , 0
<mark> element in HTML 4 -----?l is ·a · country ·in ·South ·Asia .
represents text which is highlighted 5 -----?l it ·is ~the·seventh - largest ·country ·by ·area ;
6 -----?l the ·most ·populous ·country ·as ·of ·June ·2023 ;
like one marks physical books 7 -----?l and ·from ·the ·time ·of · its ·independence ·in · l 947 ,
using a highlighter. It is commonly 8 -----?l the ·world ' s ·most ·populous·democracy .
9 <Ip > s:Qj
used for highli_ghting a part of a -~
(C)~
10
11
V <p >
-----?l The ·<ma r k>India <lmark>n · subcontinent ·is ·a ·geographical·region ·in · Southern ·Asia , >
larger text. Search results is a QJ

12 -----?l situated ·on · the ·<mark >India <lmark>n · Plate , ·projecting ·southwards·into · t h e ·<mark>Indi a<lmark>n ·Ocean 5
common example 13
i4
-----?l from ·the ·Himalayas .
<Ip>
e

Your task
• In the index.html file, highlight all
occurrences of the text India in the
paragraphs provided using <mar k>
elements
• You must highlight even if there's a eee LIVE VIEW
~

partial match of the text India ignoring Searching for India

case. e.g. if you see a word Indian, you
must mark it as Indian, officially the
. <mar k> I n dia< /mark>n Republic of Indian, is a
country in South Asia. It is
the seventh-largest country
by area; the most populous
country as of June 2023; and
from the time of its
incienencience in 1947. the

f3 Terminal Ee Test cases

Q ft Home Learn Anywhere • [email protected] • Support Logout (♦
~'("'~

i i ~ ul'f1ri1t1rJn PIPmPnt c:J - index.html o \'('1- .,ci.\-- 0 II■■■ aiCJ)

CJ)
<p><dfn >Vel o cit y< / df n > is the ·speed and · the direc tion · of ·motion ·of · an object . < /p > j
<II
0

<df 11> eleme nt in HTM L allows to wrap part of a text 0

inside a la rger text, wh ere the larger text is the definition VI

0
a::
of term (the wrapped text inside the <dfn> element) that ~I
is being defined.

The code snippet below

<p>
In Physics, <dfn >power</dfn > is defined as the amount of work dor •
</ p> ~'(o.),--
-~'('1-
..o.~
produces the following output

In Physics, power is defined as the amount of work done per unit time.

(O.),•
.~ese LIVE VIEW

Velocity is the speed and the

• In the index.html file, highlight th e defin ed term in the given direction of motion of an object.
paragraph using a <dfn> element

f!J Termi na l Ee Test cases

Q ~ Home Learn Anywhere"" [email protected] "" Support Logout C+

2 1.14 Abbre ... c:J - Q) 0 index.html 0 0 Q)

o-------- cr,
cr,
::::,
]- 1 V <p > ..0
Q)
2 · · <abbr · title= " Cascading ·Style ·Sheets " >CSS </abbr > · is · a · language · used · to ·style · <a bbr · title = " Hyper · Te x t ·Ma r kup · 0
~
Language " >HTML</abbr> 0
<abbr> element in </p> 10.f'' .,
HTML represents an '<°'~ 0
V,

a:
abbreviation or an
~I
acronym. E.g. HTML is
the short form_of
Hyper Text Markup
Language. An optional
title attribute can be
used to provide the
expansion of the short
form. Typically, some
browsers render the
wrapped text with a :c,0.\'
dotted underline & •.VJ.•~- LIVE VIEW ~□
some browsers also ~'<ii. , CSS is a language used to style
HTML
display the text in
upper case. It is a good
practice to include the
expansion on the first
use of the abbreviation
in a HTML page.
E! Termina l ~ Test cases
Q ~ Home Learn Anywhere • [email protected] • Support ·'. logo~tC+

• Unordered lists (<ul> elements) are meant to be used to categorize items whose order does not matter
• Ordered lists (<ol> elements) on the other hand are for items whose order does matter
ctrl + k
• Description lists (<dl> elements) are meant for lists of terms & their descriptions
G 2.1.8. emphasis, italics • Data lists (<datalist> elements) are for restricting the options from which the values of other controls can be
selected
G 2.1.9. underline or unarticulated annotation
G 2.1.10. Subscript, superscript Select the best match for the values in the two columns of the table below
G 2.1 .11 . Small element
1. A selection list from which parts of a computer to be :t6\"'
a. <ul> •:tO.~
G 2.1.12. Mark element purchased are selected
(6~
G 2.1.13. Definition element 0.\"' 2. Some scientific terms & their defin itions b. <ol>
G 2.1.14. Abbreviation element
'(\'(6\"'
3. Ingredients of a dish c. <dl>
A

tO
4. Steps of an algorithm d.<datalist>

I
G 2.2.3. Unordered lists - bullet type
Q 1a,2b, 3c,4d
G 2.2.4. Ordered lists
:t6\"'
G 2.2.5. Ordered lists - type attribute 1 d, 2c, 3b, 4a · o.~

G 2.2.6. Ordered lists - start attribute

G 2.2.7. Nested lists

.o 1d,2a,3b,4c

G 2.2.8. Description lists

~ 3. HTML - continued A
- - ffln - - ..
Q * Home Learn Anywhere .... [email protected] .... Support Logout c+

2.2.2. Unordered lists -~f:2~r{~: c:> - QJ

o--------
]- 1 <h3 >India ' s ·western ·neighbo urs </h3 >
2 <ul >
~ 3
The <ul> element, called an unordered list is <li >Maldives </li >
0 2.1.9. underline or unarticu lated annotation
5 <li >Afghanistan </li >
used to represent a group of items w hose
6 <li >Pakistan </li >
G 2.1.10. Subscript, superscript order has no meaning or value. Browsers </ul >

G 2.1.11 . Small element render an unordered list as a bulleted list by

default.
G 2.1.12. Mark element
G 2. 1.13. Defi nition element While the <ul> element represents the group of items,
· each individual item itself is represented by a list it em or
G 2.1.14. Abbreviation element
<li> element.
• c,-a:<°'~"'
.
I 2.2. Lists
"'
<li> or list item element wraps each of the
0 2.2.1. Lists
items in the unordered list. Every <u-f
_ U11orde 1ed lists relement must have one or more <li>

0 2.2.3. Unordered lists - bullet type children, one each for every one of the items eee LIVE VIEW
in the group.
0 2.2.4. Ordered lists India's western
neighbours
0 2.2.s . Ordered lists - type attribute The code snippet below
• Maldives
0 2.2.6. Ordered lists - start attribute <h3 >Parts of a flo we r< /h3 > • Afghanistan
<ul > • Pakistan
0 2.2.7. Nested lists <li >Stigma </li >
<li >Style </li >
0 2.2.8. Descriptio n lists
<li >Petals </ li >
<li >Sepals </li >

Q 3. HTML - continued I! EEi

N ut...)...,_
 Q * Home Learn Anywhere • [email protected] • Support Logout(♦

2.2.3. Unordered lists - bullet type ~~ <ii <ii

c:J -
o-------- Ol
Ol
~ 1
(:) Search course ~ +k By default, a black disc-like filled circle appears as the
w

~
v -~-------
__
eighbo u rs< /h 3>
- type : squa re " > 0
::::,
..0
QI

G 2.1.10. Subscript, superscript

bullet in front of each of the list item children of a <ul>
element. This can, however, be changed using CSS. In this
3

4
5
!::::::::;:;:::::::=~::==.::;=:;:=' >1 •
exercise, we will briefly touch upon changing the bullet 0"'
G 2.1.11. Small element a:
type but more detail can be found in the CSS sectio n. ~
.., G 2.1.12. Mark element '<°'~
.,o.\; ~
G 2.1.13. Definition element •iO.~ (IJ
tO.~
t<>~ list-style-type CSS property (CSS properties >QI
>
G 2.1.14. Abbreviation element ~
will be discussed as part of the CSS section)
e
allows one to change the bullet type. Some of
I 2.2. Lists A
the possible values of this property are: disc,
G 2.2. 1. Lists circle, square . The default value is disc.
G 2.2.2. Unordered lists

-~. o.(\Your• Change

lJi)l)f(J.•iPd l1•,1'c !Jllll1•1 1)'1)1'
task
G 2.2.4. Ordered lists tO.~ the bullet style to a square for the <ul > e e,e LIVE VIEW
element by changing the editable value from di s c
G 2.2.s. Ordered lists - type attribute India's western
to s quare .
G 2.2.6. Ordered lists - start attribute
neighbours

■ Maldives
G 2.2.7. Nested lists
■ Afghanistan
■ Pakistan
G 2.2.8. Description lists

Q 3. HTML - continued A

Q 3.1. Hyperlinks V

Q 3.2. Semantic HTML V

Q ii Home Learn Anywhere• [email protected] • Support Logout (+

0 index.html 0
QJ 0
o--------
]- 1 <h3 >How ·t o·coo k · rice ·without · a ·pressure · cooker? < /h3 >
<o l >
~
<li >Rinse ·the · rice</li>
The <o l> element, called an ordered list is used to represent a list of <li >Mix ·water · to · rice · in · a · 2 : 1 · ratio</li>
items whose order is meaningful. Browsers render an ordered list as a <li >Heat·the ·mixture · t o ·boil</li> V,

<li >Let·it · simmer·without ·stirring · until · the ·water ·evaporates< /l i> 0

a::
numbered list by default. <li >Let·it · rest < /li>
~I
</o l >

As with the <ul> element, each individual item ofthe ordered list also must be
represented by a list item.

I
<li> or list item element wraps each of the items in the ordered list.
Every <ol> element must have one or more <li> children, one each

for every one of the items in the list. _ _ _ _ _ (\>'

The code snippet below

<h3 >Step s to increase sound volume on you r phone </ h3 >

<ul >
<li >Locate the two volume butt ons on the side of the device </ li >
ee ~\ LIVE VIEW
<li >Press once the top button among the t wo to increase t he volume . by one unit < ~
<li >Keep repeating the last step unti l you a r e satisf ied wit h the out put volume
How to cook rice
</ul> without a pressure
cooker?

1. Rinse the rice

Steps to increase sound volume ·on your phone
2. Mix water to rice in a
1. Locate the two volume buttons on the side of the device 2:1 ratio
2. Press once th~ top button among the two to increase the volume by one unit 3. Heat the mixture to
3. Keep repeating the last step until you are satisfied with the output volume boil
. ;,_..;..,i
E! Terminal Ee Test cases
 Q -R Home Learn Anywhere.... [email protected] n ,.. Support Logout c+

2.2 5. Ordered lists - type attribute ~-~~ :_::-=:_~= c:> - QJ (FJ index.html 0 :tO.\"' 0 ai
0 •iO.~ O"I
0..
X 1 <h3 >Table · of ·Contents</h3> ..,o.~ O"I
:J
..c
LJ.J QJ
2 v <ol · type= " I " > D
~
3 ·<li>Introduction</li> 0
The type attribute of an <ol> element sets the numbering type of
· · <li>About < /li>
lo>)'
the list. This allows changing from decimal numbering to Roman 5 ·< li>Taxonomy</li> VI

</ ol > 't''(O.\ 0

•iO. C:
numbering, etc. ..,o.~ ~I
" ::a,
Attribute value Description :tO.\"'
·i''(°' :tO.\... >a,
'(o."S •iO.~ >
-~~ :::i
'(o."S
1
:tO.\...
For numbers (1 , 2 , 3 , etc.). This is the
default value if no type is specified
e
• t\.~
..,o.\'f-"
For lower-case Roman numerals (i , ii , :t6\"'
i •iO.~
iii , etc.) '(6~ :t0.\"'
•iO.~
O.\... ...6~
For upper-case Roman numerals (I , II ,
t II.I , etc.) ~0.\"'
•i\'(0 '(6\•
'(o."S
a
For lower-case English alphabet (a , b , ,~•.\&:r• s• LIVE VIEW ~□

c, etc.) Table of Contents

~'(0.\"'
-~,
'(o."S For upper-case English alphabet (A, Ei , I. Introduction
:tO.\"'
•iO.~ II. About
C, etc.)
'(6~ iO.\"'
III. Ta,xonomy •:tO.~
-~~
'(o."S

,. .o.\. .
. -~'<o. :tO.\"'
1. The file index . html is listing a table of contents (TOC) .,0,'y.
~~~
'(o."S
E!!I Terminal EE Test cases
 Q ~ Home Learn Anywhere... [email protected] ... Support Logout[♦

2.2.6. Ordered lists - start attribute ~~i~J}~~,· d> - w (§:I index.html 0 0 Cl)

o--------
]-
1 <h3>Table ·o f · Contents , · continued</h3>
0)
0)
::::,
..Cl
metimes a list may have to start at a position different from the first step. This 2 v <o l · type= " I " ·start= " 4 " > 0
Cl)

appens generally when a list is broken into 2 different <ol> elements for, various ~ 3 · · <li>Biology</li> 0
· · <li > Dornestic ·Species ~ /li>
reasons. In such cases, the list items will have to continue their numbering rather than · · <l i >Wild ·Species</,J..i> VI

· start from 1 again. The start attribute allows us to do that. < /ol> 0
C:
~I
The start attribute of an <ol> element configures the value from
which to start counting the list item children of an ordered list. This
value must always be a decimal number regardless of the value of the
type attribute. i.e. <ol type = " a " start= "-3 " > is a correct usage _& e
the first item will start with c .

Your task
,.o.~ 1. The file index . html is listing a table of contents (TOC)
2. Change the numbering type of the TOC to upper-caie Roman numerals & . (O.\
make the list start at IV . •:\L.• e e LIVE VIEW
0,,...

Table of Contents,
continued

IV. Biology
V. Domestic Species
VI. Wild Species

~O,~(
E!!I Terminal Ee Test cases
 Q ~ Home

-
Learn Anywhere ... [email protected] ... Support Logout(+

2.2.7. Nested lists ~-. c:> - cii 0 index.htm l 0 :tO.\"'

•'!,_0.~
0 cii
0 01
ci. 1 <h3 >Table ·of ·Contents , · nested< /h3 > o.f-.: 01
::i
~

f°l>
..0
a,
hether with ordered lists or unordered ones, it is possible to nest lists inside other 0
~
ts. A common use-case for this is when we have a step broken into multiple further
steps. It is also possible to nest ordered lists inside unordered ones & the other way
v <li >Chapter · l
v <o l >
·~... ••
5 <li >Se cti o n · l . l < /li> 1/)

· round too. 0
6 <li >Sec ti o n- · l . 2< /µ i > ..,.o.~:(~ 0:::
The below snippet contains an algorithm to compute the factorial of a positive </ o l >
:;1
< /li >
'<°'~
integer
::a,
10
<ol >
1,1 <li >Chapter ·2 :tO.\"' >a,
<li >Read positive integer n</li> •:tO.~ >
12 <o l > :.::;
<li >Initialize index & prod to 1</ li > '<°'~
<li >Increment index by 1 </li >
13 <li >,S ection · 2 . 1</li> G,
14 </ ol >
<li >
15 < /li >
Verify if index reached n
i6
<ul >
17 ..,.o.~:tO.\"' :tO.\"'
<li>If index &lt;= n, go to step 5</ li >
<li >If index &gt; n, go to step 7</ li >
18 '<°'~ •N-'I:
•:tO.~
</ ul>
'<°'~
</li>
<li >Store the result in prod for the product of prod &. index</ li > ~0.\"'
·i''<o
<li >Go to step 3</li>
<li >Return the value of prod as the factorial of n</li >
</ ol >
'<°'~
IV!
•.e• cO.\"'
LIVE V IEW ~ □

Table of Contents, nested

results in ~ l . Chapter l
1. Read positive integer n 1. Section 1.1
2. Initialize index & prod to 1 •i\'<°' :tO.\"'
'<°'~ . 2. Section 1.2 •'!,_0.~
3. Increment index by 1 2. Chapter 2 f
4. Verify if index reached n 1. Section 2. 1
o If index <= n , go to step 5
o If index > n, go to step 7 ~0.\"'
5 . Store the result in prod for the product of prod & index ,:.~,'<o :tO.\"'
6. Go to step 3
-~~
Jl!I Termina l EE Test cases '<°'~
Q 11 Home Learn Anywhere• [email protected] • Support Logout C+

2 2 8 Description lists ' · ~? c:J - QJ (§:I index.html 0 0 ai

a--------
]-1 <h3>Figures ·of · speech</h3>
0)
0)
::i
w ..0
(I)
~ 2
<dl> 0
3 <dt>Hyperbole</dt> 0
The <dl> element, called a description list is used to provide a <dd>A·de liberate ·exaggeration •that ·adds ·emphasis ·or · urgency</dd >
4
list of terms & their descriptions. These are commonly used for 5 VI

I . (o.~' 0
a::
lists such as frequently asked questions & their answers <dt>Oxymoro n</dt>
~I
<dd>A ·phrase · that ·uses·two ·contradictory·words ·to ·create ·a ·new ·meaning</dd>
</dl>
While the <dl> element represents the list of terms, each individual term
itself is represented by a description term or <dt> element & the
corresponding description being wrapped in a <dd> element.
e
<dt> or description term element wraps the text of the term ,.~'( ~,
which is defined/described by the contents of <dd> or (VI

description definition element. A <dl> element must have one

or more pairs of <dt> , <dl> elements as children, one pair
each for every one of the terms in the list.
.,.,(O.\•
•\•e s e LIVE VIEW
0,....
The code snippet below shows an example
Figures of speech
<h3 >Important terms in Mechanics</h3>
<dl >
Hyperbole
<dt >Displacement </ dt >
A deliberate
<dd >Straight line distance between 2 points in a direction </ dd > exaggeration that adds
<dt>Velocity</dt> emphasis or urgency
<dd >Rate of change of distance between 2 points in a direction </ dd > Oxymoron
A phrase that uses two
</dl>
contradictory words to
c reMe a n ew m ean inlJ'

fl!!I Termina_l 9:J Test cases