<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> element. You can then use the <font> elements to override the <basefont> settings.
<basefont face=”arial, verdana, sans-serif” size=”2″ color=”#ff0000″>
<p>This is the page’s default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size=”+2″ color=”darkgray”>Here is some darkgray text
two sizes larger</font></p>
<p><font face=”courier” size=”-1″ color=”#000000″>Here is a courier
font, a size smaller, in black</font></p>
<FONT> TAG
Font face and color depends entirely on the computer and browser that is being used to view your page. But the <font> tag is used to add style, size, and color to the text on your site.
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 page, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag.
SYNTAX
<FONT FACE=”VERDANA”>FAIPS IS MY SCHOOL<Font> it will make “FAIPS IS MY SCHOOL” in verdana font
<FONT FACE=”MODERN, ARIAL, VERDANA ”>FAIPS IS MY SCHOOL<Font> Browser try to find the first font if it find on computer it will show “FAIPS IS MY SCHOOL” is Modern font other wise it try to find ARIAL font if find show “FAIPS IS MY SCHOOL” in ARIAL otherwise in VERDANA
<FONT FACE=”VERDANA” SIZE=”4” COLOR=”RED”> FAIPS IS MY SCHOOL<Font> it will make “FAIPS IS MY SCHOOL” in verdana font and size 4
TEXT STYLES
Bolding <b>…text… </b>
Italicizing <i>…text… <i>
Underlining<u> …text… </u>
Striking<strike>…text… </Strike>
You may also want to bold, italicize, or underline some of you website. It is very good for making things stand out.
New Lines/Spacing <br> tag
New lines are very important for making any website. In order to create a new line you would add the following
code:
<BR>
Spacing is also very important. When using HTML, you can use just a space, but only up to the first space. Beyond the first space, the web-browser will just ignore. In order to do any amount, you must use the following code for each space wanted:
= one space = = three space
Center tag*
HTML allows us to center text without using an attribute. So when you want to center your text, it’s simple. Use the following tag:
<center> Your text</center>
Horizontal RULE <HR> Tag
<HR> tag is used to create a horizontal line Attributes of HR Tag are Color,Size Width and align
You can also change the width of the line as well as align them to the left or right, as can be seen here:
<HR ALIGN=”left” WIDTH=”60%” Size=3 color=”red”>
<HR ALIGN=”Right” WIDTH=”75%” Size=4 color=”green”>
<HR ALIGN=”Center” WIDTH=”50%” Size=5 color=”Blue”>
Please note that you can have the width in pixels instead of percentages as well. You can also change the height in pixels by doing the following:
The <h#> Elements:
Any documents starts with a heading. You use different sizes for your headings.
HTML uses six levels of “heading level” tag pairs; the smaller the heading level number, the larger is the print size:
- <H1>heading</H1>: creates heading level #1 (24 point type—largest)
- <H2>heading</H2>: creates heading level #2 (18 point type)
- <H3>heading</H3>: creates heading level #3 (14 point type)
- <H4>heading</H4>: creates heading level #4 (12 point type)
- <H5>heading</H5>: creates heading level #5 (10 point type)
- <H6>heading</H6>: creates heading level #6 (8 point type—smallest)
A line space automatically is inserted before and after a heading (that is, an entire line is skipped between a heading and any text before and after it).
OUTPUT
Heading Level #1
Heading Level #2
Heading Level #3
Heading Level #4
Heading Level #5
Heading Level #6
Note: No matter what the font size is, headings with the same level number are always the same size.
Note: Headings are always in bold print.
The <H#> tag may contain within it an alignment parameter (recognized by most browsers) as part of the command:
- ALIGN=”LEFT”|”CENTER”|”RIGHT”: positions the heading at a specific location on the page.
“LEFT” (the default) aligns the heading with the left margin of the page.
“CENTER” centers the heading horizontally on the page.
“RIGHT” aligns the heading with the right margin of the page.
Note: Some browsers do not recognize the ALIGN parameter for headings.
In most cases, it is preferable for a heading to be centered horizontally on the page. However, since some browsers so not recognize the ALIGN parameter for headings, it is a good idea to center a heading by using <CENTER> & </CENTER> tags.
PARAGRAPH <p> </p>
Since web browsers ignore carriage returns (lines breaks) and tabs, then HTML source code text must include “paragraph” tags to create proper spacing between paragraphs:
- <P>paragraph</P>: defines the boundaries of a paragraph. A line break automatically is inserted before and after a paragraph. Also, a line space automatically is inserted before a <P> tag and after a </P> tag (that is, an entire line is skipped between a paragraph and any text before and after it). When a </P> tag ends a paragraph and a <P> tag begins the paragraph following it, only one line space is inserted between the paragraphs. Many browsers recognize only the <P> paragraph tag, and this really is the only tag required to separate paragraphs. However, it is a good habit in HTML word processing to end each paragraph with the </P> tag. This makes proofreading an HTML source code much easier.
Note: A <P> tag has the same effect as two <BR> tags.
The <P> tag may contain within it an alignment parameter as part of the command:
- ALIGN=”LEFT”|”CENTER”|”RIGHT”|”JUSTIFY”: positions the lines of the paragraph at a specific location on the page.
“LEFT” (the default) aligns each line of text with the left margin of the page.
“CENTER” centers each line of text horizontally on the page.
“RIGHT” aligns each line of text with the right margin of the page.
“JUSTIFY” aligns each line of text with both the left and right margins of the page, creating non-uniform spacing between words.
Note: Many browsers do not recognize the “JUSTIFY” value and treat it the same as a “LEFT” value.
The following short poem I composed, with 3 different alignment parameters:
<H3 ALIGN=”LEFT”>High Flying</H3>
<P ALIGN=”LEFT”>I gazed down into valleys,<BR>
At the snowcaps white as cream,<BR>
Then soared above the puffy clouds—<BR>
Too bad it was a dream!</P>
<H3 ALIGN=”CENTER”>High Flying</H3>
<P ALIGN=”CENTER”>I gazed down into valleys,<BR>
At the snowcaps white as cream,<BR>
Then soared above the puffy clouds—<BR>
Too bad it was a dream!</P>
<H3 ALIGN=”RIGHT”>High Flying</H3>
<P ALIGN=”RIGHT”>I gazed down into valleys,<BR>
At the snowcaps white as cream,<BR>
Then soared above the puffy clouds—<BR>
Too bad it was a dream!</P>
is marked up these 3 ways on a browser:
High Flying
I gazed down into valleys,
At the snowcaps white as cream,
Then soared above the puffy clouds—
Too bad it was a dream!
High Flying
I gazed down into valleys,
At the snowcaps white as cream,
Then soared above the puffy clouds—
Too bad it was a dream!
High Flying
I gazed down into valleys,
At the snowcaps white as cream,
Then soared above the puffy clouds—
Too bad it was a dream!
Previous |
Solved Examples |
Unsolved Questions for Practice |
Next |
VKS-LEARNING HUB 