Playing with Text

In the previous chapter: Writing Your First Web Page you created the infrastructure for the first HTML page of Justin's web site. This was the about.html page.

In this chapter you will:

Add some content and format it into the Web page you have already created (about.html).
Build a new Web page with content (homePage.html).

At the end of this chapter your Web pages will look as follows:

Formatting headings and paragraphs

Viewing an HTML file in the browser

Open Windows Explorer.
Windows 9x/ME: Click the Start button, choose Programs, Windows Explorer

Windows 2000/XP: Click the Start button, choose All Programs, Windows Explorer

Or

Press the + E keys together. First press the key (located between Alt and Ctrl) and hold it down, then lightly press the E key (located directly beneath the number keys 3 and 4 at the top of the keyboard). Only then release the key.
Go to the justin folder on drive C, where the HTML page named about.html is located.
Double click on the file about.html to view it in the browser.

Note - Internet browser is abbreviated to browser.

Viewing the source code of the HTML page

Return to Windows Explorer, highlight the file about.html, right-click with the mouse and choose Open With, and then choose Notepad. Notepad will open.

Note - If you do not see Notepad on the Open With list, select Choose Program..., roll down until you see Notepad, highlight it and click OK.

By keeping the HTML file open in both the Notepad (text editor) and the browser, you can easily create and view the changes.

Typing the content

In Notepad, position the cursor on the empty line following the <body> tag. Everything you type between the <body> tag and the </body> tag will appear in the browser window in the content pane (see figure 3.1).
Now continue proceed to type the text. You can either type the following text (press the Enter key only where told to do so) or download it from the book's Web site Click Chapter 3 on the left menu. Instructions for using the text are available on the Web site under Help.
```
About

My name is Justin and I have a really cool baseball
card collection. I'm a fifth-grade student at the George
Washington Elementary School in New York.
I built a personal web site where you can find
information about me, my hobbies, my family and my
friends.
I was helped by the book Look Mom! I built my own
Web site.
```
Figure 3.1: This is how the text you typed in Notepad looks (about.html file).
You will find a lot of examples in this book. You can copy the source code of all the examples from the book's Web site. The examples for each chapter are found in the book's Web site on a page bearing the number of that chapter.
Note
- The full source code of all the examples in the book can be downloaded from the book's Web site.
- Sometimes only part of the source code appears in the book, therefore you will need to check the full source code that you downloaded from the book's Web site.
- All the examples were checked and run with: Microsoft Internet Explorer browsers: versions 5.x and 6.x and Firefox browser: version 1.0.6
Save the changes you made in the about.html file.

Viewing an HTML file in the browser

Use the Taskbar to open the browser window.
Click the Refresh\Reload button to view the changes you made in the about.html page, as follows:
Figure 3.2: This is how the browser displays the about.html file.
Note - If you see letters in a different style, this is because of the browser definitions on your computer.

Does the text look the way you intended it to look? (please circle your answer) Yes / No

The page does not look good in the browser, because the line breaks in the text editor are meaningless in HTML.
Go to the Notepad window where the about.html file is displayed.

Preparing empty lines for writing tags

Position the cursor to the left (before) of the About text and press . A new empty line will open.
Position the cursor to the left of the My name text and press .
Position the cursor to the left of the I Built text and press .
Position the cursor to the left of the I was text and press .
Position the cursor to the left of the </body> tag and press .

Formatting text

Formatting the word "About" as a heading - Level 1

Position the cursor on the empty line before the word About, and type <h1>
Position the cursor on the empty line after the word About, and type </h1>
Press .

Formatting the first paragraph

Position the cursor on the empty line before the first paragraph that begins with the text My Name, and type <p>
Position the cursor on the empty line between the first and second paragraphs, and type </p>
Press Enter.

Formatting the second paragraph

Type <p>
Position the cursor on the empty line between the second and third paragraphs, and type </p>
Press Enter.

Formatting the third paragraph

Type <p>
Position the cursor on the empty line after the third paragraph, and type </p>
Press Enter.

Figure 3.3: This is how the about.html file in Notepad will appear after the paragraph tags have been inserted.

Saving and viewing the changes

From Notepad menu bar, select File and then select Save to save your work.
Use the Taskbar to bring the browser window to the front. The Taskbar is at the bottom of the display (screen) and includes buttons - one button for every application that is currently open.
From the browser standard buttons toolbar, click the Refresh\Reload button to reload the page and to view the changes you made in about.html (as shown in figure 3.4).
Figure 3.4: The about.html file formatted into paragraphs.
There are six levels of headings: h1, h2, h3, h4, h5 and h6. Each heading level is displayed by the browser in a different font size, so that the size of the h4 heading is different from the h1 heading.

Note - The header information of the Web page is in the <header> tag. The tags: <h1>, <h2>... are used to format text. Do not be confuse between these two "headers"

The <p>....</p> tags mark the boundaries of a section of text and define it as a paragraph, making it both convenient to handle and more attractive to look at.

Bold format

Bold text

Go to the Notepad window where the content of the about.html file is displayed.
Place the cursor to the left of (i.e. before) the Justin text.
Type <b>
Place the cursor the right of (i.e. after) the Justin text.
Type </b>

Figure 3.5: The text Justin is "surrounded" by the <b> and </b> tags.
You have just completed formatting the Justin text.
Save the changes that you made in the about.html file.
Go to the browser window and click the Refresh\Reload button to view the changes that you made in the about.html file (as shown in figure 3.6).

Figure 3.6: The text Justin appears in bold.
The text that appears between the <b> and </b> tags appears in bold (as shown in figure 3.6).

Other formats examples:

Format the following in bold:
- George Washington Elementary School
  at the <b>George Washington Elementary School</b> in New York
- Look Mom! I built my own Web site
  the book <b>Look Mom! I built my own Web site</b>.
Change the heading About from <h1> to <h2>
<h2>
About
</h2>
Save the changes you made in the about.html file.
Go to the browser window and click the Refresh\Reload button to view the changes that you made in the about.html file.

Figure 3.7: The about.html page is even more complete.
Close the browser window displaying the about.html file.
Close the Notepad window displaying the about.html file.

Building a new HTML page named homePage.html

If Windows Explorer is already open, go to it now. If Windows Explorer is not open, open it before you continue with the following instructions:

Windows 9x/ME: Click the Start button, choose Programs, Windows Explorer

Windows 2000/XP: Click the Start button, choose All Programs, Windows Explorer

Or

Press + E
Go to the folder justin you created on drive C.
In the left pane (where there is only one file: about.html) right click with the mouse. From the shortcut menu select New and then select Text Document.
Make sure that the new document, which is now called New Text Document.txt, is highlighted. If not, highlight it now.
Change the name of the document to homePage.html (note the change in the file name extension from .txt to .html). A dialog box will appear asking if you wish to change the file name extension. Click Yes.
Double click on the file name homePage.html (either double or single click depending on your Windows definitions).

Viewing the source code of the HTML page

Return to Windows Explorer, highlight the file homePage.html, right-click with the mouse and choose Open With and then select Notepad. Notepad will open, but you will see nothing in it because the file homePage.html is still empty.

Typing the content

In Notepad, type:

<html>
 <head>
  <title>Home Page</title>
  <meta http-equiv="content-type"
    content="text/html;charset=iso-8859-1" />
 </head>
<body>

</body>
</html>

In the File menu, select Save to save the file.

Type the following text after the <body> tag and before the </body> tag (press Enter only where told to do so). You may copy the text from the book's Web site. Instructions for using the text are available on the book's Web site under Help.

Justin's site
I'm Justin and this is the site I built. One day my
grandfather, who worked for many years as a warehouse
worker at a big plant, brought me a book: Look Mom!
I built my own Web site.
The truth is, I was a little disappointed when I saw
the book. I really wanted a Playstation or a GameBoy 
and I thought: What am I going to do with this book?
So I just droped the book on my desk and I did my
homework on top of it. One day one of my teachers said 
that she was building a Web site. I thought to myself: 
well, if she can build a Web site, so can I... and this 
is the Web site that I built, with the help of the 
book, of course.

Formating the heading

Format the text "Justin's site" as heading level 2 (<h2>).

<h2>Justin's site</h2>

Format paragraphs

Use the <p> and </p> tags to "surround" each paragraph.

<p>
I'm Justin and this is the site I built. One day my 
grandfather, who worked for many years as a warehouse 
worker at a big plant, brought me a book: Look Mom! 
I built my own Web site.
</p>
<p>
The truth is, I was a little disappointed when I saw 
the book. I really wanted a Playstation or a GameBoy 
and I thought: What am I going to do with this book?
</p>
<p>
So I just droped the book on my desk and I did my 
homework on top of it. One day one of my teachers said 
that she was building a Web site. I thought to myself: 
well, if she can build a Web site, so can I... and this 
is the Web site that I built, with the help of the 
book, of course.
</p>

Draw a horizontal line between each paragraph (3 paragraphs, 2 horizontal lines). Look below for the first horizontal line:

<p>
I'm Justin and this is the site I built. One day 
my grandfather, who worked for many years as a 
warehouseman at a big plant, brought me a book: 
Look Mom! I built my own Web site.
</p>
<hr />
The truth is, I was a little disappointed when I saw 
the book. I really wanted a PlayStation or a GameBoy 
and I thought: What am I going to do with this book?
</p>

The <hr /> tag, which stands for horizontal rule, creates a horizontal line.

Change the font of the word "grandfather" to a font that is 2 points larger than usual (size="+2"), in olive color (a shade of green) (color="olive").
my <font size="+2" color="olive">grandfather</font>, who...

The font size can be selected by using numbers 1 to 7 or by using relative numbers (relative to the font size that precedes it) from -4 up to +4.

Note - Size and color are attributes. An attribute includes three components:
- The name of the attribute, such as "size," "color" etc.
- The equal sign (=).
- The value of the attribute, which comes after an equal sign (=) and is placed within quotation marks, such as the value "1" for the attribute "size".
Note - The use of color will be explained later.

Note - The attribute "size" can have any of the following values: 1, 2, 3, 4, 5, 6 or 7.
The following table shows the values of the "size" attribute as compared with the sizes that are usually used in word processors:

1 2 3 4 5 6 7

8pt 10pt 12pt 14pt 18pt 24pt 36pt

Note - There must be a space before the attribute's name.
Save the changes you made in the homePage.html file.
Go to the browser window and click the Refresh\Reload button to view the changes that you made in the homePage.html file (see figure 3.8).

Figure 3.8: This is how the Home Page (homePage.html) will look.

Additional formatting exercise

Format the word "grandfather" in regular font size and change its color to fuchsia (a bright pink, color="fuchsia"). This means you have to delete size="+2" from the <font> tag and instead of "olive" you have to write "fuchsia", so that it now displays like this:
my <font color="fuchsia">grandfather</font>, who...
Save the changes you made in the homePage.html file.
Go to the browser window and click the Refresh\Reload button to view the changes that you made in the homePage.html file (see figure 3.9).
Figure 3.9: This is how the Home Page (homePage.html) will look.

This is so much Fun! Soon you will be able to implement some creative ideas of your own too, but for now� we'll just carry on building Justin's personal Web site. First build a Web site according to the instructions in the book, then later� the sky is the limit!

But if your fingers are simply itching and you really can't wait to build your own Web site about whatever subject you have chosen, then this is my advice:

Leave Justin's personal Web site alone and DO NOT touch it!
Build your own Web site about your own subject in a separate folder.

You can always use Justin's personal Web site pages as a basic starting point for building a Web site on any subject. And you can always go back and check how it's done (by following the instructions in the book) and how it actually looks (when you use the browser). If you change anything in Justin's Web site, then you will lose track of the book's instructions and you will find it difficult to find your way through the following chapters.

To build your own Web site on any subject (it could be the Los Angeles Dodgers, flowers, your dog - anything you wish), open a new folder. You can refer to the pages that you already built in Justin's Web site for help. You can copy all the files from the Justin folder to your new folder for that purpose.

Part I

Part II