|
In this example we will learn how to format our text display.
When we create our HTML file, since it is just a text file, if we do not add
a few format tags, the display will be a boring text file. So we need to learn
some of the tags that will spruce up the look
- Heading Tags -
<h(1-6)>
- There are six Heading tags which we can use for page and table headings, or to
introduce a new section of our page. The heading tags take the following format,
<h1>Heading 1 Text
</h1>, h1 is the largest heading size, and
h6 is the smallest heading size. When we
use a heading tag to format our text, it will put a line feed in at the end of our text (on the browser).
Click Here for an example of each heading size.
- If you wish to, you can insert the align= attribute inside of your h(1-6) tags.
You can then select the heading position, ie
<h3 align="right">level 3 heading
which is right aligned</h3>. You can choose, left, right or center aligned
headings
- BOLD, UNDERLINE & ITALICS
- The three easiest tags to remember. use
<b>for BOLD text
</b>, <u>for UNDERLINE
</u>, & <i>for ITALICS
</i>. Not too hard at all Is it...
- BIG, small & FONT
- Use
<big>Increase Current Font Size By One Unit</big>
- Use
<small>Decrease Current Font Size By One Unit</small>
- And Use
<font size="+2">Font Size +2 Units</font>
You can use "+" to increase (or use "-" to decrease) the current font size.
- You can also use the
<font> tag to change the font-face by using
<font face="ms serif">MS Serif Font</font>. We can
now combine the font size & face into one tag like this, <font size="+2" face="courier">
Courier font-face Size +2</font>. You are free to select any font as the font-face, bear in mind however, if you choose a
font for your page, and a person viewing your page does not have that particular font on their system, the browser will default to a standard font (ie. ms sans-serif, courier, times new roman)
or to a font that the user has selected as a default for their browser.
- Color's!
Yep! we can also use the font tag to change the color of our text, by typing
<font color="blue">blue text</font>.
and yes we can use one tag to change the color, size, and face like this, <font color="yellow" face="ms serif" size="+1">
Font size +1, Font-face "MS Serif", Font color YELLOW</font>.
- Inserting a
Line Break
- You can tell the browser where you want to start the next line of text by typing in
<br />. Notice that this tag looks a little different than
all of the tags we have used previously. The break tag is known as an empty tag, the format shown here is actually XHTML or XML format rather than HTML. In XML we have to make
sure that all of our tags come in pairs and typing <br /> is equal to typing <br></br>.
There is nothing between the two tags (and there shouldn't be), hence the name empty tag, or empty pair.
- Paragraphs
- Use the paragraph tag
<p> to seperate paragraphs (interesting notion, huh).
<p>this is a paragraph</p>
<p>this is a paragraph...</p>
<p>and, this is a paragraph.</p>
The paragraph tag will insert a blank line in between paragraphs.
- Learn the Horizontal Rule
- We can set of a section of our page by using a Horizontal Rule tag which looks like this,
<hr />. This is
another empty pair (like the line break tag), which will insert a horizontal line instead of an empty line, into our page.
we can specify the width (% of screen size, or table (cell) width), size (1-5), color (IE) & alignment (left, right or center) of our horizontal rule, defaults are
100%, size 1, left aligned and black. <hr size="5" align="center" width="15%" /> a rule of size 5, width 15%, centered.
<hr align="right" width="25%" color="green" /> size 1 (default), width 25%, right aligned, color green.
<hr size="3" color="blue" /> rule size 3, left aligned (default), width 100% (default), color blue-
|
