Scribd
Upload
21 views

HTML4

Uploaded by

itsdebjitt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

HTML4

Uploaded by

itsdebjitt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

HTML - Fonts

Fonts play a very important role in making a website more


user friendly and increasing content readability. Font face
and color depends entirely on the computer and browser
that is being used to view your page but you can use
HTML <font> tag to add style, size, and color to the text
on your website. You can use a <basefont> tag to set all
of your text to the same size, face, and color.
The font tag is having three attributes called size, color,
and face to customize your fonts. To change any of the
font attributes at any time within your webpage, simply
use the <font> tag. The text that follows will remain
changed until you close with the </font> tag. You can
change one or all of the font attributes within one <font>
tag.
Set Font Size:-
You can set content font size using size attribute. The
range of accepted values is from 1(smallest) to 7(largest).
The default size of a font is 3.
Example

<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>
Relative Font Size:-
You can specify how many sizes larger or how many
sizes smaller than the preset font size should be. You can
specify it like <font size = "+n"> or <font size = "−n">
Example

<html>

<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>

</html>
Setting Font Face:-
You can set font face using face attribute but be aware
that if the user viewing the page doesn't have the font
installed, they will not be able to see it. Instead user will
see the default font face applicable to the user's
computer.
Example

<html>

<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New
Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans
MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>
Specify alternate font faces:-
A visitor will only be able to see your font if they have that
font installed on their computer. So, it is possible to
specify two or more font face alternatives by listing the
font face names, separated by a comma.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida
Console">
When your page is loaded, their browser will display the
first font face available. If none of the given fonts are
installed, then it will display the default font face Times
New Roman.
Setting Font Color:-
You can set any font color you like using color attribute.
You can specify the color that you want by either the color
name or hexadecimal code for that color.
Example

<html>

<head>
<title>Setting Font Color</title>
</head>

<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>

</html>
The <basefont> Element:-
The <basefont> element is supposed to set a default font
size, color, and typeface for any parts of the document
that are not otherwise contained within a <font> tag. You
can use the <font> elements to override the <basefont>
settings.
The <basefont> tag also takes color, size and face
attributes and it will support relative font setting by giving
size a value of +1 for a size larger or −2 for two sizes
smaller.
Example

<html>

<head>
<title>Setting Basefont Color</title>
</head>

<body>
<basefont face = "arial, verdana, sans-serif" size = "2"
color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the &lt;basefont&gt; Element</h2>

<p><font size = "+2" color = "darkgray">


This is darkgray text with two sizes larger
</font>
</p>

<p><font face = "courier" size = "-1" color = "#000000">


It is a courier font, a size smaller and black in color.
</font>
</p>
</body>

</html>
The following table shows the 16 color names that were introduced in HTML 3.2 −

Color Name Hex Value Color

aqua #00ffff

black #000000

blue #0000ff

fuchsia #ff00ff

green #008000

gray #808080

lime #00ff00

maroon #800000

navy #000080
olive #808000

purple #800080

red #ff0000

silver #c0c0c0

teal #008080

white #ffffff

yellow #ffff00

There are other colors which are not part of HTML or XHTML but they are supported by most of the
versions of major browsers.

Color Name Hex Value Color

aliceblue #f0f8ff

antiquewhite #faebd7

aquamarine #7fffd4

azure #f0ffff

beige #f5f5dc

bisque #ffe4c4

blanchedalmond #ffebcd

blueviolet #8a2be2

brown #a52a2a

burlywood #deb887
cadetblue #5f9ea0

chartreuse #7fff00

chocolate #d2691e

coral #ff7f50

cornflowerblue #6495ed

cornsilk #fff8dc

crimson #dc143c

cyan #00ffff

darkblue #00008b

darkcyan #008b8b

darkgoldenrod #b8860b

darkgray #a9a9a9

darkgreen #006400

darkkhaki #bdb76b

darkmagenta #8b008b

darkolivegreen #556b2f

darkorange #ff8c00

darkorchid #9932cc

darkred #8b0000
darksalmon #e9967a

darkseagreen #8fbc8f

darkslateblue #483d8b

darkslategray #2f4f4f

darkturquoise #00ced1

darkviolet #9400d3

deeppink #ff1493

deepskyblue #00bfff

dimgray #696969

dodgerblue #1e90ff

firebrick #b22222

floralwhite #fffaf0

forestgreen #228b22

gainsboro #dcdcdc

ghostwhite #f8f8ff

gold #ffd700

goldenrod #daa520

gray #808080

greenyellow #adff2f
honeydew #f0fff0

hotpink #ff69b4

indianred #cd5c5c

indigo #4b0082

ivory #fffff0

khaki #f0e68c

lavender #e6e6fa

lavenderblush #fff0f5

lawngreen #7cfc00

lemonchiffon #fffacd

lightblue #add8e6

lightcoral #f08080

lightcyan #e0ffff

lightgoldenrodyellow #fafad2

lightgreen #90ee90

lightgrey #d3d3d3

lightpink #ffb6c1

lightsalmon #ffa07a

lightseagreen #20b2aa
lightskyblue #87cefa

lightslategray #778899

lightsteelblue #b0c4de

lightyellow #ffffe0

limegreen #32cd32

linen #faf0e6

magenta #ff00ff

mediumblue #0000cd

mediumorchid #ba55d3

mediumpurple #9370db

midnightblue #191970

mistyrose #ffe4e1

moccasin #ffe4b5

oldlace #fdf5e6

orange #ffa500

orchid #da70d6

peachpuff #ffdab9

peru #cd853f

pink #ffc0cb
plum #dda0dd

purple #800080

rosybrown #bc8f8f

royalblue #4169e1

salmon #fa8072

sandybrown #f4a460

seagreen #2e8b57

sienna #a0522d

skyblue #87ceeb

slateblue #6a5acd

steelblue #4682b4

tan #d2b48c

thistle #d8bfd8

tomato #ff6347

violet #ee82ee

wheat #f5deb3

whitesmoke #f5f5f5

yellow #ffff00

yellowgreen #9acd32

You might also like