|
This is a recap of the Web Page Design and Build Class 4.
It is intended to build upon the lesson in Class 3.
If you have not completed lesson 3, go back to
last week's lesson
before continuing.
You may click on a link below to go directly to that section of this page, or simply scroll down at your leisure.
I use the following format in all steps:
L-Click = Left Click
R-Click = Right Click
DL-Click = Double Left Click
UPPER CASE = TAG names
Click Here
to see the transcript from the class.
Create a copy of page3.html and save it as page4.html
This step will create the working file for this class. It will be a copy of the page1.html file you created in lesson 1.
- L-Click Start. This opens a popup list of options.
- L-Click Run. This opens the Run window.
- Type notepad
- L-Click the OK button.
- L-Click File.
- L-Click Open.
- Navigate to your myhtml folder from last week. Make sure you have changed File Types to All Files from Text Files.
- L-Click page3.html.
- L-Click Open button.
Now save the file as page4.html
- L-Click File
- L-Click Save As
- Navigate to your myhtml folder from last week. Make sure you have changed File Types to All Files from Text Files.
- L-Click page4.html.
- L-Click Save button.
Return to Summary
Recap of last weeks lesson.
Last week, we learned about attributes and values to the BODY tag in our pages and we also began learning about
the FONT tag and some of its attributes.
We all know that Tags are used to format our web page. Attributes are the parts of our page we want to format and
Values are what we want them to be formatted as. Attributes and their values belong inside the angle brackets < >
of their related tags. Each attribute also needs a value specified. An attribute with its value is shown as <TAG ATTRIBUTE=VALUE>.
A Tag may have one, many or no valid attributes. The BR tag has no valid attributes. The BODY tag has many. Attributes are not
dependent on each other nor are they required in all cases. For example, the BGCOLOR and TEXT attributes may both be defined in any order, only one
can be used or none of them can be used.
The first attribute we learned is the BGCOLOR attribute of the the BODY tag. The BGCOLOR attribute formats the background
color of the body of our page. The value we provide, for now is the name of a color, Blue, Green, etc...
Another attribute for the BODY tag is the TEXT atttribute. This attribute formats the default color of the text on our page. Again, you
specify the name of the color you want for the value.
Next we learned the FONT tag. The FONT tag requires a closing tag as well. The FONT tag formats the text between it and its closing
tag. The FONT tag has a number of attributes. The ones we learned were SIZE and COLOR. Size specifies how big the text should be, similar
to the differences between each of the Heading tags. You can specify a relative size to the default by using a + or - sign and a number for the value.
a +1 value means to increase the size of the text 1 level from the default while -1 stands to decrease the size one level.
The next attribute of the FONT tag was the COLOR attribute. The COLOR attribute does the same thing as the TEXT attribute of the BODY tag only
it is in effect only until the closing FONT tag. It is a way to override the color of a section of text to make it stand out for emphasis. The values for the
COLOR attribute again are the names of a color.
Before continuing, you should have a page3.html file saved in your myhtml folder that contains the information from last week's
lesson. If this is not the case, you need to go back and work through
last week's lesson. Before continuing.
Return to Summary
Week 4: B(bold), I(italic) and PRE(preformatted) Tags.
In this week's class, I will introduce 3 new tags that affect how text is formatted. The <B>, <I> and <PRE> tags. Each of these have required
closing tags </B>, </I> and </PRE>
The <B> tag is signals the browser to BOLD all text between it and the closing B tag.
In your page4.html file, add a line after "Line 4" as "<BR>This is line 5 of <B> Cubs Web Page</B>.". Then save and view page4. What you
should see is the text "This is line 5 of " in normal font and the text "Cubs Web Page" in bold characters.
The <I> tag signals the browser to ITALICIZE the text between it and the closing I tag.
In your html file, add a line after "Line 5" as "<BR>This is line 6 of <I> Cubs Web Page</I>.". Then save and view page4. What you
should see is the text "This is line 6 of " in normal font and the text "Cubs Web Page" is in italics.
In your html file, add a B tag before the I tag on line 6 and add the closing B tag after the word Cubs. When you save and view your page, you will see
the text "This is line 6 of " in normal font and the text "Cubs" in bold and italics and "Web Page" in italics only.
Next, we learned was the <PRE> tag. The PRE or Preformat tag will tell the browser that the text is already formatted and it should leave whatever
spaces and/or line breaks that are there.
If you remember from our first lesson, when we put text on two or more lines in our HTML file, when we viewed it, it appeared to be on one line in
the browser. This is because the browser normally ignores 'white spaces'. This is the term for all the space and line breaks in your source code. The
browser changes any multiple spaces and line breaks to a single space. Thus the lines will be separate in your source code, but not when displayed
through the browser. To get around this, we have been using the <BR> tag when we want to start a new line.
The best way to understand the difference is to see it. Click
Here to see the transcript from lesson 3 iwthout the PRE or BR tags.
You can see that the text all runs together. Now, click Here to see
the same transcript with the PRE tags put in but still no BR tags. The difference should be very obvious to you. The PRE tag is good for long transcriptions of things,
be it class transcripts or census transcripts. You can just type in the data add the opening and closing PRE tags and you are done.
Another benefit from the PRE tag is when want to separate words on a line with more than one space. This could be used in separating a list of
dates without having to list them all vertically, you can list many across a page. In your source file, add the following text to a new line after line 6
"This is Line 7 of Cubs Web Page". Do not put any tags on this line. Save and view your page. It should be on line 6, why? because we
have no BR tag and the extra spaces between the words we typed have been removed down to a single space. Now, add a <PRE> tag
to the line between lines 6 and 7, and add a closing PRE tag </PRE> after line 7. Save and View. You should see that line 7 is now on its
own and even double spaces, and the spaces between our words are back in.
Now add "This is Line 8 of Cubs Web Page" after line 7, before the closing PRE tag. Make sure it is on a line by itself and there are no
tags on the line. Save and View. Without the PRE tag, line 8 would be moved up and tacked on to line 7. With the PRE tag, you can see that it leaves
the line break there even without the BR tag.
What are some of the things you can do with the B I and PRE tags? Do the B and I tags work within the PRE tags? Try it and see what happens.
What would happen if you took out the closing B tag on line 6? What would lines 7 and 8 look like? Again, play around with your file and see what
things you can do. Try inserting a FONT tag inside the PRE tag (between the opening and closing tag).
Once you are done, make sure your page4.html looks something like this:
<HTML>
<HEAD>
<TITLE>Cubs Web Page</TITLE>
</HEAD>
<BODY BGCOLOR=lightblue TEXT=red>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
This is Cubs Web Page.
<BR>
This is line 2 of my web page.
<BR><FONT SIZE=+3 COLOR=green>Line 3 of my web page</FONT>
<BR><FONT SIZE=-3>Line 4 of my web page</FONT>
<BR>Line 5 of <B>Cubs Web Page</B>
<BR>Line 6 of <B><I>Cubs</B> Web Page</I>
<PRE>
This
is
Line
7
of
Cubs
Web
Page
This is Line 8 of Cubs Web Page
</PRE>
</BODY>
</HTML>
Click
Here
to see how your Page 4 should look when viewed.
Return to Summary
Return to Mom's Library
Copyright ©2000-2007
GCF Webmaster
All rights reserved.
| 