HTML Attributes and Text Formatting

Welcome come to the HTML Attributes and Text Formatting

Appreciate the significance of attributes of HTML elements.

Apply various attributes of common formatting elements.

Understand and apply HTML color codes.

Display HTML special characters using HTML entities.

We know what is an HTML element. We also know that elements are of two types – container and empty. While some elements apply a specific effect on the content such as , <UL></UL>, etc.

There are certain elements which are used in different ways. There are certain elements which have various properties. These properties.

These properties can be changed to bring out a different effect or output. These properties describe that element. So, the Properties that describe an element are called its attributes.

Some elements have one or more attributes, Following are the important points to remember about attributes: Attributes are always specified in the opening tag of the element. Most of the attributes are assigned some value by the help of ‘=’ sign.

Attributes can be assigned in any sequence in the opening tag.

It is not necessary to use all the attributes of an elements

Each attributes definition is separated from the other by a space.

Attributes of BODY Element

Body element has following attributes:

ATTRIBUTE	EXPLANATION
Text	Takes a colour name or code to set the text color.
BgColor	Takes a colour name or code to set the background colour of the web page.
Leftmargin	Takes a number to leave blank area on the left side of the web page.
Topmargin	Takes a number to leave blank on the top of the web page.
Background	Takes and image both path to set an image in the background of the web page.

Example 1

<HTML>

<HEAD> <TITLE> Body attributes </TITLE> </HEAD>

<BODY> text=”white” bgcolor=”blue” lefmargin=20 topmargin=50>

Can you confidently tell who is intelligent and who isn’t? Do you think dogs and parrots are intelligent ? If yes, how? Ants are not good at math but they sure are great engineers! We all have a combination of various types of intelligence, If not all.

</BODY>

The four attributes are specified separated with a space. Each attribute has a value assigned with ‘=’ sign. The angle bracket (>) is closed after the list of attributes. Also, notice left margin(20) and top margin (50) in the output.

Example 2

This code is displaying an image in the web page background The path to the image file needs to be assigned to the BACKGROUND attribute. If image file is in the same folder as the html file, then path is skipped.

<HTML>

<HEAD> <TITLE> body attributes</TITLE></HEAD>

</BODY>

</HTML>

A Primer on HTML Colour Codes

You have seen that attributes like bgcolor and text are given a colour name as value. There is a better way to specify colours. The three primary colours are Red, Green and Blue. All the other colours are the combination of various intensities of these three primary colours.

In HTML the colour are specified in hexadecimal notation. Hexa = 6 and decimal =10 i.e. base of hexadecimal notation is 16. The hexadecimal values range from 0 to 9 and then a to f i.e. 0 to f. 0 denotes least intensity of a primary colour and f denoted the heighted the intensity.

The colour are preceded by # sign. For Example, for black colour, the intensity to all the three primary colours will be 0 so the notation for black in hexadecimal will be #000000. The first pair of numbers is for Red, middle pair for green and the last pair is for blue.

All Zeroes mean black. Can you guess, the colour for white? Yes, Highted intensity value for RGB i.e.#ffffff. So, the combinations of the values from 0 to f of the primary colours can give you a huge range of different colours. Some rare colours are given here.

List of HTML color Code:

Goldenrod

#DAA52

Khaki

#F0E68E

Lemonchiffon

#FFFACD

Lightyellow

#FFFFF0

Green

#008000

Lightseagreen

#2082AA

Mediumseagreen

#00FA9A

Light green

#90EE90

Imidnightblue

#191970

Mediumblue

#0000CD

Mediumslateblue

#7B68EE

Lightblue

#ADD8E6

Maroon

#800000

Indianred

#CD5CdC

Lightcoral

#F08080

Lightsalmon

#FFA07A

Indigo

#4b0082

Mediumnochid

#BA55D3

Magenta

#FF00FF

Hotpink

#FF69B4

Mediumvioletred

#C71585

Mediumpurple

#9370DB

Mediumturquoise

#66CDAA

Lightpink

#FFB6C1

Navy

#000080

Lightseelblue

#B0C4DE

Lightskyblue

#87CEFA

Lavender

#E6E6FA

Gray

#808080

Orange

#FFA500

Lightgoldenrodyellow

#FAFAD2

Mintcream

#F5FFFA

Paragraph Break

Paragraph element is denoted by tags and it is used to start a new paragraph. It is very useful in arranging the content neatly in paragraphs. Paragraph element has an attribute align which takes values left, and center.

These has an attribute align which takes values left, right and center. This attribute aligns the paragraph content either left, right, or center accordingly. Default value is left. See the

Example.

<HTML>

<HEAD> <TITLE> paragraph</TITLE> </HEAD>

<BODY>

Can you confidently tell who is intelligent and who isn’t ? Do you think dogs and parrots are intelligent? If yes, how?

Ants are not good at math but they sure are great engineers! We all have a combination or various types of intelligent, it not all.

To solve different types of problems, different types of intelligences are needed.

</BODY>

</HTML>

Notice in the output, how the content is broken 3 district paragraphs.

HTML Attributes and Text Formatting