HTML Project Lesson 2 - The Profile Page
The page you are about to construct will display text in two columns. The most common way web designers place text in columns is to use a table. Tables are often used to keep things such as images and text exactly where you want them on your web page. Follow the steps below.
1 |
|
Since you are starting a new page, you will need to start a new HTML document in NotePad. Click Start > All Programs (Programs) > Accessories > NotePad. Type your foundational HTML Tags into Notepad exactly as shown below.
2 |
|

Type Heartland Equality Profile between the opening and closing title tags as shown at the right.
3 |
|
From the drop-down menu of your Notepad window, click File > Save (Ctrl + S). When the Save As window appears, use the Save In menu at the top of the window to navigate to your folder. Double-click on your folder to select it.
In the File Name menu near the bottom of the window, type profile.htm, then click Save, as seen in the example below.
In the File Name menu near the bottom of the window, type profile.htm, then click Save, as seen in the example below.
4 |
|

With Notepad still open, set the background color of the page to match that of the first page by placing bgcolor=lemonchiffon inside the body tag as seen at the right.
Press Ctrl + S to save your file.
Press Ctrl + S to save your file.
5 |
|

You now going to add a line of text to your web page. With your HTML open in your Notepad file, typeHeartland Equality Profile between the opening and closing body tags as shown at the right.
Press Ctrl + S to save your web page, then maximize your page in the browser (it should be on the task bar at the bottom of your page), then click Refresh or Reload button to view the page. Your page should look like the status check below.
Press Ctrl + S to save your web page, then maximize your page in the browser (it should be on the task bar at the bottom of your page), then click Refresh or Reload button to view the page. Your page should look like the status check below.
6 |
|
You are now going to set the size, color, and face for the text you just placed in the page. Add the following <font> tag to your page as shown below.
Press Ctrl + S to save your web page, then maximize your page in the browser (it should be on the task bar at the bottom of your page), the click Refresh or Reload button to view the page. Your page should look like the status check below.
7 |
|
You are now going to construct a very simple table. The purpose of this table is to display text in 2 columns.
In your HTML, place your cursor between the closing </font> tag and the closing </body> tag. Press the Enter Key twice. View the tutorial at the right. When instructed by the tutorial, place the HTML shown in your document. Now that the HTML for a basic table has been inserted, press Ctrl + S to save your web page, then maximize your page in the browser, clickRefresh or Reload button to view the page. Your page should look like the status check below. |
|
8 |
|
It is now time to place text into the first cell of the table. Use your mouse to highlight the text below, then right-click on the text and choose Copy.
Winner of both the Mid-West and National Futurities as a yearling and as a two year-old, Heartland Equality was undefeated in 1997 and 1998 in every "hand" class he was shown in. He finished the 1998 show season by winning the UPHA Hackney Pony Championship as well as Grand Championship Hackney Pony at the American Royal in Kansas City.
In 1999 he was undefeated winning the all his classes at Oklahoma, Devon, Lexington, Illinois State Fair, World's Championship and again winning the Hackney Pony Classic and Stake and the American Royal.
In your HTML document, highlight the that is between the between the first opening and closing <td> tags. Right-click on the highlighted text and choose Paste. The text will replace the and your HTML should look like the example below
Press Ctrl + S to save your web page, then maximize your page in the browser, click Refresh or Reload button to view the page. Your page should look like the status check below.
9 |
|
To place text into the second cell of the table. Use your mouse to highlight the text below, then right-click on the text and choose Copy.
In 2000 he was again crowned the World Grand Champion Hackney Pony. He was undefeated winning all his classes at Oklahoma, Kentucky Spring Premier, Devon, Midwest Charity, World' Championship, and the American Royal.
At the 2000 United Professional Horseman's Convention, Heartland Equality was named Hackney Pony of the Millennium He was retired to stud in 2001 and has not seen the show ring since.
In your HTML document, highlight the that is between the between the second opening and closing <td> tags. Right-click on the highlighted text and choose Paste. The text will replace the and your HTML should look like the example below.
Press Ctrl + S to save your web page, then maximize your page in the browser, click Refresh or Reload button to view the page. Your page should look like the status check below.
10 |
|
You will now change the font you have just pasted into the first cell of your table. Add the <font> tag just inside the first opening and closing <td> tags as shown below.
Press Ctrl + S to save your web page, then maximize your page in the browser, click Refresh or Reload button to view the page. Your page should look like the status check below.
11 |
|
Format the text of the second cell just like you did for the first, by placing the exact same opening and closing <font> tag inside the <td> tags.
NOTE: A <font> tag placed inside a cell will not effect text outside of that cell. Therefore, you must place a <font> tag in each cell containing text you want to change.
Refresh your web page in the browser. It should look like the status check below.
NOTE: A <font> tag placed inside a cell will not effect text outside of that cell. Therefore, you must place a <font> tag in each cell containing text you want to change.
Refresh your web page in the browser. It should look like the status check below.
13 |
|
If you look at your page you will notice that the text in each cell does not start at the top of your cell. It is time to align the text in each cell. This is done inside the <td> tag. Place the attributes and values align=left and valign=top in both your opening <td> tags as shown below.
14 |
|
Notice how the text is right next to the table's borders. This keeps the 2 columns of text too close to one another. To fix this, place another attribute and value inside the table tag. Add cellpadding=5 to your table tag as shown below.
It is now time to remove the border of your table. Simply change the value of the border from "1" to "0".
Press Ctrl+S, then refresh your web page in the browser. It should look like the status check below.
Press Ctrl+S, then refresh your web page in the browser. It should look like the status check below.
15 |
|
Just as you did on the home page, you will center everything on the page by placing a the opening <center> tag just after the opening <body> tag and the closing </center> tag just before the closing </body> tag.
Press Ctrl+S, then refresh your web page in the browser. It should look like the status check below.
Press Ctrl+S, then refresh your web page in the browser. It should look like the status check below.
Be certain all your work is saved, upload profile.htm below and then proceed to the next lesson.