|
Reminder |
| Remember to book mark
this site! |
|
HTML stands for HyperText Markup Language
Part 2: Font Size, Breaks and Alignment
- From Part 1: The Basics -
This is how your html should look so far.
FONT SIZE
We are going to learn font attributes
The first attribute is size.
Size can use the Heading tag <H1> or the Size Attribute tag, <font
size="1">
You do not need to memorize these sizes.
Most web developers guess at sizes or use a size chart.
You should have an idea of the sizes though.
- HEADING
Headings are used to capture attention on pages.
Headings goes from <h1> being the largest and <h6> being the smallest.
Headings should be ordered from largest to smallest on the page. Enter the
following onto your html page as you edit it in Notepad.
When you save it on the notepad and refresh your internet explorer, the
page should look like this:
- FONT SIZE
Size <font size="1"></font> goes from 1 being the smallest to 7 being the largest.
We are going to try a couple of these in your text to see how they look.
Enter this code and save to see how it looks.
When you save it on the notepad and refresh your internet explorer,
the
page should look like this:
- PREFORMATED
While you can see the sizes changed, did you notice something peculiar?
Even though we returned after the word html and before the word page,
there is no line break there.
This is because HTML does not recognize the carriage return.
We can make it see the returns by using the <pre></pre> tags
with <pre> the text is taken just as you type it.
This can however become a hassle because you will not be able to change
size, color or format the text in any other way between the <pre> tags.
So usually other tags are used.
Try the pretag as it is written below.
Enter this code and save to see how it looks.
When you save it on the notepad and refresh your internet explorer,
the
page should look like this:
- BREAKS
To control line breaks we can use one of the following codes
- <br> means break to the next line
- <nobr> means no break, and will not let your text break(this causes the
reader to scroll over)
- <wbr> will put a break into a <nobr> area, so this text won't break
EXCEPT for where you put this code to force the break
- <br clear="all"> will cause a line break to the next full line.
- <p></p> means break two lines for a new paragraph
Assigning a break to the end of each line in the font size code will give
us code that looks like this
This code cause the different size text to show up in different lines like
this
- CENTER
<center> </center>can be used to center objects and text on a line.
Please the begine center tag <center> in front of the line of text, and
the end center tag </center> at the end of the objects or text you want
centered. If you place the center tag around the text in your HTML code
you will see that the code looks like this:
The result will look like this:
- ALIGNMENT
We can also align our text to left, center or middle using a simple
attribute of the Heading <H1></H1> tag, the Paragraph<p></p> tag or the
Division<div></div> Tag.
To do this we use the following attributes within these tags.
- align="center"
- Align="left"
- align="right"
Because the alignment is an attribute of a tag, Aligns must go inside the
main tag it is set to align.
They can go into the following tags
- <H1 align="center"> </h1> To center the heading
- <p align="center"> </p> To have a double line break before centering
- <div align="center"> </div> To center without having to double line break
Using the code below, test out the paragraph align right <p
align="right"> </p> for your text.
It should appear like this:
- BLOCKQUOTE
<blockquote></blockquote> can also be used to make the text indent after the first
line.
This is useful when creating outlines or quoting people.
- PUTTING IT ALL TOGETHER
Let's put some of these into our text
and add a little more content to our page
Notice I changed the font sizes, and added breaks and centering.
Save this as html and view (refresh) your page.
Your page should look like this:
My very first html page
Welcome to my html page
where I am showing my html skills
I want to learn everything I can about html
So I can make cool web pages
|
I know we have learned a lot of tags so far, and it is a lot to remember.
Keep in mind that you do not have to memorize it all. It is important to
know what you CAN do with the tags! However, most web developers have to refer to an HTML chart for tags they don't
use frequently,
just as they have to refer to color charts.
As you use html, you will find that you memorize those tags that you use
the most.
Now we have finished lesson 2 let's go on to lesson 3,
font attributes
|
"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2025 All Rights Reserved
Privacy
and Legal
|
|
 |
