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 <B></B>, <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! <BR> 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 background=”flower.jpg”>
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! <BR> We all have a combination of various types of intelligence, If not all.
</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 <P></P> 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>
<P>
Can you confidently tell who is intelligent and who isn’t ? Do you think dogs and parrots are intelligent? If yes, how?
</P>
<P Align=”right”>
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.
</P>
<P align=”center”>
To solve different types of problems, different types of intelligences are needed.
</P>
</BODY>
</HTML>
Notice in the output, how the content is broken 3 district paragraphs.