Topics

<Font>,<basefont> & <hr> tag

8.The text Formatting with <BASEFONT> and <FONT>

1. The <BASEFONT> Tag

Lets you define the basic size for the font.(Text/Letter)
Attribute( size):
The size can have absolute value from 1 to 7. The base font size is increased or
decreased by that relative amount i.e. size=+1 will result into size =5 if the previous
size is set to 4. Ending tag </BASEFONT> is optional.

Each virtual size is successively 20% larger or smaller than the default font size
3.
 2. The <FONT> tag:
• The <FONT> tag lets you change the size, style and color of text.
• Attributes:
1. Size: Lets you change the size of text(size =1-7)
e.g. <FONT size=7> Hello</FONT>
2. Color: To change color of the text.
e.g. <font color=red>Free Tibet</font>
3. Face: To change font type of the text you are displaying.
e.g. <font face=”Broadway, Arial, Times new roman”>Save Tibet</font>
Complete example of <font> tag.
<font size=6 color=blue face=“comic san ms”>Free Tibet</font>
9. Horizontal Rules- <HR> Tag.
• The <HR> tag produces a horizontal line spread across the width of the browser
window.
• Attributes:
1. Size: To set the size(thickness) of horizontal line.
e.g. <hr size=5>
2. Width: The length of horizontal rules can be controlled with width attribute
and value can be given in pixel or percentage.
e.g. <hr width=200> or <hr width=50%>

Default size of horizontal rule is 3 pixels.

3. Color: To set the color for horizontal line/rule.
e.g. <hr color=green>
4. No shade: To make 3D horizontal rules to a flat(2D) rule just add
noshade to <HR>.
e.g. <HR size=36 noshade>
Complete example of <Hr> tag.
<hr size=6 width=80% color=green noshade>
 10. Lists.

There are three basic types of lists in HTML.

• Unnumbered /Unordered
• Numbered/Ordered
• Definition
1. Unnumbered or Unordered lists<UL>:
• Are indented lists with a special bullet symbol in front of each item.
• To make an unnumbered/bullet list
• Start with an opening list <UL> (for unnumbered list) tag.
• Enter the <li> (list item) tag followed by the individual item, no closing
</li> tag is needed.
• End the entire list with a closing list </UL> tag.
• Attributes of the unnumbered lists: The by default, a solid circle is used
for the bullets. However, you can change the bullet style using type
attribute.
• The type attribute can contain value:
• Disc (a solid circle)
• Square (a solid square)
• Circle (a hollow circle)
E.g. 1 <UL type=disc> • one
<LI>one
<LI>two
• two OUTPUT
CODE
<LI>three • three
</UL>
E.g. 2 <UL type=circle> oone
<LI>one
<LI>two
otwo OUTPUT
CODE
<LI>three othree
</UL>
E.g. 3 <UL type=square>  one
<LI>one
<LI>two
 two OUTPUT
CODE
<LI>three  three
</UL>
 PRACTICAL ON
UNORDERED LIST
 2. Numbered or Ordered lists<OL>:
• Are indented lists that have numbers or letters in front of each
item.
• Attributes of the Numbered Lists:
• The start attribute: The start attribute for the <OL> tag lets you
change the beginning value.
• The type attribute: By default, browsers number ordered list items
with a sequence of Arabic numerical. You can use the type attribute
with the <OL> tag to change the numbering style itself.
 The type attribute

Type value General style Sample sequence

A Capital letters A, B, C, D
a Lowercase Letters a,b,c,d
I Capital roman numerals I, II, III, IV
i Lowercase roman numerals i,ii,iii,iv
1 Arabic numerals 1,2,3,4,
E.g. 1
Fruits: Fruits:
<OL type=”A”> A. Apple
OUTPUT
<LI>Apple.
CODE B. Orange
<LI>Orange
C. Mango
<LI>Mango
</OL>
E.g. 2
Fruits: Fruits:
<OL type=”a” start=3>
c. Apple
<LI>Apple. OUTPUT

<LI>Orange
CODE
d. Orange
<LI>Mango e. Mango
</OL>
E.g. 3
Fruits: Fruits:
<OL type=”i” >
i. Apple
<LI>Apple.
<LI>Orange
CODE
ii. Orange OUTPUT

<LI>Mango iii. Mango

</OL>
E.g. 3
Fruits: Fruits:
<OL >
<LI>Apple.
1. Apple OUTPUT
CODE
<LI>Orange 2. Orange
<LI>Mango
</OL>
3. Mango
 3. Definition/Description Lists (<DL>)
• Are indented lists without any bullet symbol or any number in front of each item
and usually consists of alternating a definition term (coded as <DT>) and a
definition description (coded as <DD>).
• E.g. <DL>
HTML CODE Output:
<DT>TCV
TCV
<DD>Tibetan Children’s Village Tibetan Children’s
</DL> Village
Text formatting using :
<B>,<U> , <I>,<sub> and <sup> Tags

• <B> -To make text/letter bold. E.g <b>Free Tibet</b> Output: Free Tibet
• <U> -To make text/letter Underline. E.g <u>Free Tibet</u> Output: Free Tibet
• <I> -To make text/letter Italic. E.g <i>Free Tibet</i> Output: Free Tibet
• <sub>-To make text/letter Subscript. E.g H ₂ Output: H2O
• ^{-To make text/letter Superscript. E.g 1 <sub>st} Output: 1st
 OUTPUT/RESULT OF
HTML CODE HTML CODE
 Good
Morning
11. INSERTING IMAGES:

• You can insert different types image in a web page. Like

• GIF (Graphics Interchange Format)
• PNG (Portable Network Graphics)
• JPEG (Joint Photographic Experts Group)
• Web browsers can display images in your document if they are in above format.
• The image can be insert in a web page by using tag<IMG >
• E.g. <img src=”tashi.jpg”>
The attributes of <img> tag are:

1. The src attribute-to specify image source: It is the value of the image
file’s URL or name of the image.
E.g. <img src=”d:\html\plant.gif”> or <img src=“plant.jpg”>
<img src="https://tibet.net/HHDL.png">
2. The alt attribute-to specify alternate text: The alt attribute specifies
alternative text the browser may show image display is not possible or
disable by the user. <IMG src=”newpic.gif” alt=”This is New Pic”>

The value for the alt attribute is a text string of up to 1024 characters, enclosed
in quotation marks if you include spaces or other punctuation.
3. The align attribute-for image alignment: The HTML standard
specifies five image-alignment attributes values: left, right, top,
middle and bottom.
e.g.<img src=“Tibet.jpg” align=right>
4. The height and width attributes: it specifies the height and
width of the image inserted in the web page.
e.g. <img src=“tibet.jpg" width="500" height="600">
5. The border attribute: it specifies the border to be placed
around the image.
e.g. <img src=”hello.jpg” alt=”hello test” align=right height=300 width=300
border=5>
THANK YOU !