Using More Than One Attribute
One of the great things about attributes is that you can combine them. Let’s say you wanted to say "Hello!" using text with an "arial" face with a size of "+3". Here is what that would look like in your HTML code:
<FONT FACE="arial" SIZE="+3">Hello!</FONT>
and here is what you would end up with:
Hello!
Notice that you can simply put the FONT and SIZE attributes next to each other.
Aligning Text
So far, we’ve created Web pages with all of our text aligned to the left. But you may want to create pages with text aligned:
to the left, or
to the center, or
to the right.
On the Web pages that you’ve written so far, you’ve noticed that the text that appeared in the browser window was justified to the left of the screen. That's what's known as the default. It just happens without you giving any other specific directions.
Can you get text to the center or to the right? Sure. It's done by using the <P> command you already know about with an attribute:
Here's the format:
<P ALIGN="center">Text in here is centered</P>
<P ALIGN="right">Text in here is pushed to the right</P>
This seems pretty simple, but there is one important point I need to bring up. See how I added the ALIGN="center" attribute and the ALIGN="right" attribute to the <P> command? Okay, but you also have to remember that if you add an attribute to a single tag like the <P> tag, you'll need to use an end tag. See the </P> up there? If you're just using <P> to create a new paragraph, then it can sit all by itself. But the moment you add an attribute, you need to use the end tag.
This is great, but what if you want to center something that is not a paragraph? (like a heading) You can use the <CENTER> and </CENTER> commands. If you wanted to center a <H3> heading, here is what it might look like:
<CENTER><H3>This is a Heading</H3></CENTER>
On your browser, here is what this will look like:
This is a Heading
Let’s Make a Web Page!
OK, now let’s use this new information to create a Web page. Look carefully at this code. What do you think this page will look like?
<HEAD>
<TITLE> What I Learned This Week </TITLE>
</HEAD>
<BODY>
<CENTER><H1>What I Learned This Week</H1></CENTER>
<P><HR>
<CENTER><H3>Text Alignment</H3></CENTER>
<P>This week I learned how to manipulate text. First I learned how to align text
<P>to the left
<P ALIGN="center">to the center</P>
<P ALIGN= "right">or to the right.</P>
<P><HR>
<CENTER><H3>Headings</H3></CENTER>
<P>The heading tags are very useful. Here are the 6 that I can use.
<H1>This is a sample of H1</H1>
<H2>This is a sample of H2</H2>
<H3>This is a sample of H3</H3>
<H4>This is a sample of H4</H4>
<H5>This is a sample of H5</H5>
<H6>This is a sample of H6</H6>
<P><HR>
<CENTER><H3>Text Font and Size</H3></CENTER>
<P>I know how to control the size and font of my text. Here are some examples.
<P><FONT FACE= "arial" SIZE="+4">This is <B>arial</B> font, size <B>+4</B></FONT>
<BR><FONT FACE= "courier" SIZE="+3">This is <B>courier</B> font, size <B>+3</B></FONT>
<BR><FONT FACE= "verdana" SIZE="+2">This is <B>verdana</B> font, size <B>+2</B></FONT>
<BR><FONT FACE= "arial" SIZE="+1">This is <B>arial</B> font, size <B>+1</B></FONT>
<BR><FONT FACE= "courier" SIZE="-1">This is <B>courier</B> font, size <B>-1</B></FONT>
<BR><FONT FACE= "verdana" SIZE="-2">This is <B>verdana</B> font, size <B>-2</B></FONT>
</BODY>
</HTML>
You have now completed the Week 3 Lesson. Please feel free to re-read this information until you feel like you really understand it. If you feel like you already understand the information on this page, you are ready to complete your Week 3 Assignments.
