|
|
The site with something for everyone
|
|
|
|
Tutorials> Building a web page: Introductory Tags
|
|
|
Introductory Formatting Tags
Now that you know how to set tag properties and understand the
format of an HTML document we can throw you some to the basic formatting
tags that are used. The following is a list of tags that are frequently used
and a description of how to use them.
|
|
|
Heading Tags <H#> and </H#>
These tags, not to be confused with the <HEAD> tag, are used to
denote text as a heading. Thus text can be highlighted. The heading tags
go from 1 to 6, that is they look like <H1>,<H2>....<H6>.
Some examples of these are:
This is a size 1 heading
the code looks like this: <H1>This is a size 1 heading</H1>
This is a size 6 heading
the code looks like this: <H6>This is a size 6 heading</H6>
The heading tags can be placed anywhere on your page, it is simply
a way to highlight text.
|
|
|
Font Tags <FONT> and </FONT>
The font tags allow you to manipulate your text in various ways. You
can change the size, color or the face (type of font) using this tag.
This tag can be very useful but it is being superceeded by style sheets.
This will be the subject of another tutorial so let's not
concern ourselves with it at the moment.
Some of the properties of the Font tag are:
- SIZE - which takes values between 6 to +6
- COLOR - set in the same way as the BGCOLOR attribute of the <BODY> tag
- FACE - the name of the font you wish to use, it defaults to what
Some examples of these are:
- This is white Courier text of size +1
the code looks like this: <FONT SIZE="+1" COLOR="White" FACE="Courier">This is white courier text of size +1</FONT>
- This is yellow Times New Roman text of size 2
the code looks like this: <FONT SIZE="2" COLOR="#DAE328" FACE="Times New Roman">This is yellow Times New Roman text of size 2</FONT>
- This is Lime and blue Arial text of size +1
the code looks like this: <FONT SIZE="+1" COLOR="Lime" FACE="Arial">This is Lime a</FONT><FONT SIZE="+1" COLOR="blue" FACE="Arial">nd blue</FONT><FONT SIZE="+1" COLOR="Lime" FACE="Arial"> Arial text of size +1</FONT>
As you can see the FONT tag can be very useful when you want to have some fun
with your text or if you simply want to highlight something.
|
|
|
Helpful little tags!
The following list of tags allow you to do some of the things that a normal
wordprocessor can do and they are self expainatory.....
- <B></B> - This is bold text
the code looks like this: <b>This is bold text</b>
- <I></I> - This is italicized text
the code looks like this: <i>This is italicized text</i>
- <SUB></SUB> - This is subscripted text
the code looks like this: <sub>This is subscripted text</sub>
- <SUP></SUP> - This is superscripted text
the code looks like this: <sup>This is subscripted text</sup>
- <U></U> - This is underlined text
the code looks like this: <U>This is underlined text</U>
|
|
|
Line Break Tags <BR>,<P> and <HR>
In HTML no matter how many carriage returns you type your text will be displayed in on
long line. That is unless you use one of the tags that are provided for you to force a
line break.
The <BR> tag produces a
carriage return or a line break. That is it causes any text after the tag to be displayed
on the next line. In order to skip a line you must use two BR tags one after the other.
We get to kill two birds with one stone with this tag.... The <P> tag has
the effect of two br tags one after the other. It can also be used to enclose text as a paragraph with it's associated
</P> closing tag.
The <HR> tag is a little different. It does produce a
line break but it also draws a line! Cool isn't it...so you can separate paragraphs by placing a
line between them. This tag has some properties that should be set. The following examples contain these properties.
Some examples of these are:
- There is a line break after this word
and suddenly the text appears on the next line
the code looks like this: There is a line break after this word<BR> and suddenly the text appears on the next line
- This is the way to skip a line with the BR tag
and I continue on this line
the code looks like this: This is the way to skip a line with the BR tag <BR><BR> and I continue on this line
- This is the way to skip a line with the P tag
and I continue on this line
the code looks like this: This is the way to skip a line with the P tag <P> and I continue on this line
This is the first paragraph using the P tags This is the second paragraph using the P tags
the code looks like this: <P>This is the first paragraph using the P tags</P><P>This is the second paragraph using the P tags</P>
|
|
|
Time to experiment
Edit the test page that you have created and experiment with the various new tags you see here!
You can click here to see an example.
|
|
|
Great, but this is my homepage can I show a picture of me? Yes you can...let's have some fun with images!
|
|
|
|
|
