Heading level six Comment Tag HTML comments are not displaye' r Comments are usually written to provide Poa al Very useful for understanding the code by anyone who a -->. This is how a comment Is entered: 1d by the browser. Any text placed as a comment will be ignored. bout the HTML code. These comments would be ccesses it in future. The comment tags are 1e text on a Web page. For examp| TEHT FORMATTING TAGS or you may want it to appea, Text formatting allows you to change the > a word by making it bold lable in HTMLS appearance of th or underlining it, are discussed below. le * You May ie fou \want to empha Various text formatting tags avail: Bold and Italics Tags . The tags for eee text as bold and italics are and respectively. They are containg, elements. For example, This text is in bold This text is in italics You can even combine these tags. For example, write it like this: This text is in bold and is also in italics if you wish to make the text bold and italic, You ¢. 7 YOU can The output would be: This text is in bold and is also in Italics More Text Formatting Tags ‘Some more tags for formatting the text are explained in Table 7.1. Table 7.1 More text formatting tags Tag Description Example Output a tag / The tag defines | Foundation | Foundation of Information Technol the title ofa book,a | of Information by Oxford University Press, India movie, a song, etc. Technology : by Oxford | University Press, | India. tag _| This tag is used to Emphasized emphasize the text. | Text Emphasized Text | Defines important Strongly “yl tas 8 text and emphasizes Emphasized Text Strongly Emphasized Text strongly than the | | tag J tag | Defines a piece of This is a “9 computer code Computer Code This is a Computer Code | mae ‘n> tag | Defines a defini —~? re lefinition Definition | Ee | Term Definition Term o a 168 iqqaaess> | Used to display contact] For aay eS information for the ee visit : document. This results | in italicized text, tis a container element and is typically placed | at the bottom of the | document. This tag defines preformatted text. It is a container element. The text written within this tag is displayed exactly as itis written in the | HTML document and preserves both spaces and line breaks letails, For more details, visit: Oxford University Press New Delhi

Oxford University Press New Delhi

She sings | She sings
She sings | z
ae she sings
sings ae

sings TEHT PROPERTIES USING CSS The various text properties in HTMLS provide you with different text formatting options to format the text on a Web page. Let us discuss these properties in detail. The following table (Table 7.2) shows these text properties, their description, and their possible values. Table 7.2 Text properties using CSS a Specifies the etign horizontal alignment of text or block of text L__Joftextorblock oftex | Property Description Values Examples color | Specifies the Color name/Hexadecimal | This tells the browser that the text ‘of the HTML element

should be in purple and text of the

‘element should be in #D2691E color text-align: right justify pee aoN line~ ] mal (Default) line-height; > meigne | ae oe ae | pumber (a number that will | 14ne-heighe oi | be multiplied with the current | font size to set the line height) | length (a fixed line height in | Px, pt, cm) | percentage value (the line | height in percentage of current value) ~ [see none (default; defines normal | text-decoration, = | decoration | decorations that are | text) text-decoration, . added to the text underline (defines a line | — underlining, line | below the text) | through, etc. coverline (defines a line above the text) line-through (defines a line b | through the text) text~ | Specifies alist of | none/Color name/Color value | text-shadow: 2 > =| shadow shadow effects to be oy f { applied to the text text- | Controls the none (default; the text appears | text-transform: Capital; | transform | capitalization of text _| as itis) capitalize (the first character of each word in uppercase) ‘uppercase (all characters in uppercase) lowercase (all characters in lowercase) Let us discuss these properties in detail. The Color Property -_ This property specifies the for following ways: Predefined color names Predefined colour names like, green, etc., can be used for colour specification in CSS, For example, Hexadecimal color values Hexadecimal color values are sp (green), and BB (blue) are the components of the colour and example, color: #00FF00 RGB color values RGB color values are sp and blue should be from 0 to 255 ora (165, 42,42) and color: rgb (08,1008, red, blue, aqua, grey, maroon, yelo% reground colour of the text. The colours can be defined in ‘one of the and color: navy BB, where RR (red), 6 between 0 and FF."OO —<— = i” ign Property the following example code t¢ » 10 Set the toxt, ij pe eyner"eent/onn"> Ne toxtalign property (or different HTML elements al eee justify) ( Old you Know? @ acstnse: ener — align: left oper assigned he value “us —" , tach line i stretched to ensure eal 4 (textratign: right) ‘width, asin che ease of newspapers N nage ejatyle? hove code tells the browser thatthe Teste lyre atthe paragraph text is justified, heading level two is centre-aligned, ancl heading level four is rightealigned. ie tine-height Property Consider the following code to set the line-height property for the paragraph tag: eatyle types “text/cas"> p (line-height: 10px} his code specifies that the line height for the paragraph has been set to 10 px. ther values that can be assigned to this property are given below: Normal This specifies a normal line height. This is the default value, Length This specifies a fixed line height in px, pt, or cm. The line height is in percentage of the current font size. -decoration Property ing example code will make you understand the text-decoration property, for the heading tag: type= “text/css”> i ag decoration: underline) “The underline .. coration: overline} ‘no longer valid in HTMLS. Instead the property text-decoration is oration: line-through} ‘used now. h the heading level one will be unetined heading level wo will havea line above three will have a line through it. erty applies shadow to the text ‘The syntax for this property is: y v-shadow color wmjorizontal shadow where alow ; ion of h h-shadlow specifies the position of He y-shadow specifies the position of vertical s » shadow color specifies the colour of the shado For example, adow, 2px specifies the Posi text-shadow: 4px 2px gree! ion of horizontal sh In the above example, 4px specifies the positior he shadow. vertical shadow, and green specifies the color of th erty for different HTML elements, Consider the following code to set the text-shadow prop : The Text-transform Property . lowercase. Consider the following Code} This property can have values — none, capitalize, uppercase, set the text-transform property for different HTML elements:

Democracy

---

government that allows people to choose people rule freedom to

Democracy is a form of the their rulers. In a democracy, only leaders elected Py the country. People have the freedom to express views, organise and freedom to protest. Democracy is based on a free and fair election where those currently in power have a fair choice of losing. In a democracy, each adult citizen must have one vote and each vote must have one value-

A democratic government rules within limits set by ional law and constitut citizen's rights. pest oe oy erence i pees aa I. eg Ce ed ey acaseanoleth | AInaehp er atta ind open sagen Naas ye Web pT iia cer ons set by constitutional lw and 2. Save the documer 3. Open Intemet Explorer ai example html. The view in th browser will be as shown in the figure alongside,ING CSS FONT PROPERTIES US! is different from text? Font means the shapes of the characters While i, Do you know how font is dil font. Using Font properties, you can change the font, r Mey mee ia nate through Table 7.3- ns A isc ? — Table 7.3 Font properties FR ee eet ee ea Example a teeey ey ar font-style, font-variant, font-size, [fonts bole ge oa fies all the , Pee ~ | as font family E a Ge F. font= Specifies alist of ont names | font name ont~faniiy, = ae II / small / a — = : i >xx-small /x-small / sm: ice. font-size | Specifies the font size medium (default) / large / x-large font-size, te /xx-large / larger / smaller / value font-size, Hine //percentage font-style | Speci le of the font | normal italic / oblique et ‘ont-style | Specifies the sty 1 i DL igig ‘The font property is used to set all the font-related properties in one declaration, Its syntax is: font: font-style font-size font-family where, font-style specifies the font style for the text and can take the values normal, italic, or Oblique ‘The default value is normal. le toa pray hei font and can ke ny oe othe values gen the sn table. Ifyou specify an absolute value for this Property, then you can give the value in any unit, such x Px and pt. : font-family: arial, “times New Roman” Pecan Pepe ese ef tet Fr ample Consider the following code to set the font 7 oo HTML elements: ee, Bicecss SETTING MARGINS USING sargin for an HTML element. Let us learn about the, ‘Margin properties can be used to set the marg! foperties through Table 7.4. : 7 ee Table 7.4 Margin properties (crea ves ol Values Example re i - |margin: 10px argin Sets all the margin properties | margin-top, margin: u iat ; na , SPX Spx. 1p, iia screen Fig, margn-botom, | Here the fist value spec | in one declai ee margin, Second value specing¢ tight margin third value spe bottom margin, and the last aj for the leit margin, alu | : S margin-bottom: | margin- | Sets the fixed bottom margin of | length ; g: om: lem | bottom | anelement in px, pt, cm, etc. | Default value is Opx i |margin- | Sets the left margin of an length margin-left: 2cm | left element in px, pt, cm, etc. Default value is Opx 4a zgin- | Sets the right-margin of an length margin-right: 10px | sight element in px, pt, cm, etc. Default value is Opx } |margin- | Sets the top margin of an length margin-top: 3cm . 1 [top element in px, pt, cm, etc. Default value is Opx The margin property is used to set all the margins (left, right, top, and bottom) in one declaration, Consider the following examples: margin: 10px Spx 8px 12px Inthe above example, top margin is 10px, right margin is Spx, bottom margin is 8px, and left marginis 12px. If you write the margin property as margin: 20px 15px then the top and bottom Margins are of 20px and the right and left margins are of 15px. Specifying the margin property as margin: 15px means that all the four margins are of 15px. SETTING BORDERS USING ssbody {background-color: yellow; margin: 50px) P {color:green; text-align: justify; text-height: 87 font-,,. “Comic Sans MS"; font-size: large; border-style: double; bo,4..” color: maroon; border-width: thick} hl(text-align: center; color: blue; text-transform: uppercase, font-family: arial}

carbohydrates

---

Carbohydrates provide energy to the body. Some of the source, of carbohydrates are rice, fruits, bread, corn, honey, and whole grains.

Save the document as example3 htm! ‘Open the document example3htm in Internet Explorer. The view in the Web browser will be as shown in the figure given below.ge STS at supports several types of list el ‘ cuent ‘These elements may also pale re different types of lists that we can Create in an HT! jered List An unordered list uses bullets ( ae ements that can be nested, ie, be included in the tag of the One set of elements can be embedded within List An ordered |i ‘symbols) as the list item marker. “i 'Stuses numbers or alphabets as the lst tem marker. aotion List A description list def; pescript 1ption list defines a particular item. jst tem Tad use the list item tag <1i> to define each ite i F r Fi He ist appeas in Web browses in buleted an ene on define lst items withthe <1i> tag, Lotus type the following HTML code to see h Farge 73+ jow the <1i> tag works. You can see the output of the code ptm? gitlerCreating a List

List Item One dipbist Item Three Fig 73 The tag | ieee is used to specify the value ofthe ist ist item, The value must be a number and this can be used in case of ordered list only. The subsequent list items will increment the Value from that number. The syntax i: _ Sli value=number> the following HTML code:51”">English <1i>Hindi <1i>Maths

Science

Social Science The view in the Web browser will be as shown in Figure 7.4. Fig 7.4 Setting the “alan ? a Working with tist Properties : ; Using the list properties, you can specify the style and position of the list rae €r. Various ligt Properties that are common to both ordered and unordered lists are given in the Table 7.5, Table 7.5. List properties Property Descri aes | 14st | Thisis used to sell ist properties. | lststyle position, list-style list-style [ Style _ in one declaration image, list-style-type inside p list- | Specifies the position of the list inside/outside (default) list-style style- | item marker Position: insige | position | ‘Note: Another property called the list-style-type property is used to specify the type of list item marker and has different values for ordered and unordered list. We will discuss this Property under and tags, Unordered tist a bulleted list. The list is defined using the and tags. Each item in the list is defined Using the <1i> tag. Properties for the tag are given in Table 7.6: Table 7.6 Unordered list properties: [Property | Description Value(s) Examples List- | Specifies the image that will be none (DefaultWeb address | 1ist-style-inage: style- | used as the list item marker of the image url (‘xyz.gif") image list- Specifies the bullet style that will none/disc (Default)circle/ list-style-type: style- | be used as the list item marker | square circle type The following HTML code will show you how to Create an unordered list. Figure 7.5 shows the ouaj manane/ 14> va Fort 37) pratenPur Sikri payee" Temple enad-Ud-Daula Tomb D Dayal Bagh Temple Elen Us Dla Tomb oh? ay sting ists . IML ares fistesvoulcaninest any i Fig 7.7 Creating ordered list within an unordered list y lis inside an i La oth Mec Genco snorkel lst can other ordered lst, The te folowing HTML code shows how nesti ting of lis agoervee. tml? sts works, The output of this code is shown in Figure 7.8 ntl? peas? tlerDevice "text /css”> tyle-type? upper-roman) yle-type: circle} 3 of a Computer jicescomputer Mouse<) i>webcam is used to define paragraphs, ; The horizontal rule element draws a line across the page. The comment tags are used to add comments to an HTML document. headings. and are used to make text bold and italicized, respectively. Using font properties, you can change the font, size, and style of the text. Web page. a font name consists of space, it should be written within quotes, Objective Type Questions 1. Fill in the blanks. The heading element is used to add section The text properties provide you with various text formatting options that help you format the text in a . Margin properties can be used to an HTML element. Border properties can be used border of any HTML element, You should specify the border-style Proper the border-color property because an elem, Sey have a border before you change in coke tg Inline styles are used to apply a Style to Speci elements on a Web page, fig List items are defined by the <1; ta The items of an unordered list are

and

tags, The items of an ordered list are en, and tags. The tags used for creating a descr

,

, and

, HTML allows nesting of lists, Any kind of lis can be nested inside any other. Set the my, ay Bin, y © Set sys enclosed by lobed by, ition list are o- While specifying RGB values, the values must be from 0 to c. The €. An item ina list is specified using the hotness i Property controls the cay & The — Property specifies a list h. The element defines the least Property is used to speci Pe eta ie Property is used to specif Prominent heading. ify horizontal alignment of text. ify an image as the list item marker. pitalization of text, of font names, paipatty is used to set all the font properties ino ——___ i. The default value of font-size Property is J. The items in an unordered lis a. The

---

tag is an empty element, b. The

128 defines the most prominent ©. The value of line-height t are enclosed in Property can be given———— ene sepredetined colour names cannot be eu 4 Mefre> to dele prefomated en « Fancast dploetin te bons ipcertagisacontaner element, . 8 ef FEY se ea ef | ae eee np ‘Opertes in one declaration. Me cannot creat an ordered Ist nested within in an unordered list ‘ the correct option. ised fc «for colour specifications |, choose 5: © \which of the following defines the fi a ifth | i ii,

evel of heading? pHs sed frit ti ne iv, None of these eee ao which the ordering isnot specific a: i, Description f these hich of the following values can be be oe iv. None of c, Which specified to lst: i. Disc nea Saree sind ile specifying RGB col a iv. Allof these on : specifying ah the values must be from __ to 255. «, The textalign property is used to speciy the ues ai = es i. horizontal ii, vertical SS Peat a) : ii, bothi.andii. iv, None of these 4, Whi (alan) lst, an image as ais item markers specified with the list-tle- image property. i, ordered fi, unordered ili, description iv. None of these g. Values that can be assigned to the font-style property are i, normal ii italic ii, oblique iv. Allof these +, Which of the following can be assigned to the fontsize propery? i, medium ii, small il, lage iv. All of these «nan ordered list the ordering is given by a numbering scheme using i. arabic numbers —_i. letters ii, roman numerals iv. all of these i, Which of the following value can be asigned to the font-style property? i, normal ii, italic ii, oblique iv. Allof these Descriptive Type Questions 1. Short answer questions a, What s the use of the 28? b. Is

 tag a container or an empty element?
an HTML document?

¢. Which tag is used to give comments 10
4. Name the tags used for crating ordered an
©. Which tag will you use to display contact In
{. Whatis the default value of text-align property?
8. What is the use of line-height property?

h. Which tag gives the third level of heading?

i. Name the tag used to define 2 paragraph

j. How many levels of headings ar defines

1d unordered lists
formation for the document?

dy the heading 8

189

_.282. Long answer questions
a. What values can be assigned to text-transform prone
b. What is the use of the font-family and fone = a eee
Whats the purpose ofthe font property? Explain wih roperties.
Differentiate between text-shadow and text-decoratio! R ie een
What is the use of the 
 tag? Is it au oned acone
Differentiate between ordered and unordere i ‘ed for creati
What isthe purpose ofa description lis tag? Mention the ae oa io ating a desing, 4
What different ordering styles can be given to items of an or a NOS ic t
Mention the values that can be assigned to list-style-type property

A erties?
J. What is the difference between font-size and font-style prop

FR ~P an

 

Application-based Questions

1. Sukriti has to create a Web page on ‘The French Revolution’. Name the tag/property she will use for the

following purposes:
2. Tag to write the text in paragraphs
b. Tag to give a thematic break
¢- How can she change the colour of the horizontal line?
d. Tag to give the most prominent heading
©. Property to specify the distance between two lines. What is its default value?
2. Observe the following line of HTML code and answer the questions following it:
P(align: justify; text-color: maroon; text-decoration: underline; text-
transform:
a. Identify the error(s) and write the correct code.
b. What value will you assign to the text-transform Property if you want all the characters in Capital lettest
©. What will you do to make the frst alphabet of each word in uppercase?
d. What other values can be assigned to the text-align property?
3. Yajur has written an HTML code to create a simple Web page that uses first three levels of headings. He wan’
to assign maroon color to all the heading levels. He has written the following code:

lowercase}

 

hl(color: maroon}

h2{color: maroon}

h3{color: maroon}
a. What is the other way of writing the above code?
b. Out of 
, 
, and 
, which tag will make the heading of the largest size?
c. Name any two properties that can be set for the heading element,

Identify the error(s) and write the Correct code: