HTML Project Lesson 1 - The Home Page
Introduction to the Project
With these project lessons you will build a very basic, 3 page web site, showcasing a famous horse. Before you start making the first page, there are a few things that must be done first. Follow the steps below.
With these project lessons you will build a very basic, 3 page web site, showcasing a famous horse. Before you start making the first page, there are a few things that must be done first. Follow the steps below.
1 |
|
You will need to make a folder somewhere on your computer that will store all the files used for this project.
Click on the File Explorer button (looks like a yellow folder) in the bottom task bar. On the left hand side select This PC then double-click on Drive (G:). Click on the New Folder button. A new folder will appear with its name highlighted. Change the folder's name to heartland_equality_ followed by your 3 initials. For example, if your name was George W. Bush, the folder name would be heartland_equality_gwb.
Click on the File Explorer button (looks like a yellow folder) in the bottom task bar. On the left hand side select This PC then double-click on Drive (G:). Click on the New Folder button. A new folder will appear with its name highlighted. Change the folder's name to heartland_equality_ followed by your 3 initials. For example, if your name was George W. Bush, the folder name would be heartland_equality_gwb.
2 |
|
Next you are going to open the most basic word processing program on your computer, Notepad. Click the search box Type to search located on the bottom task bar. Then type notepad. Press enter. Type your foundation HTML Tags into Notepad exactly as shown below.
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 the folder you created in Step 1 (GO TO THIS PC and OPEN the G: DRIVE). Double-click on your folder to open it.
In the File Name menu near the bottom of the window, type index.htm, then click Save, as seen in the example below.
In the File Name menu near the bottom of the window, type index.htm, then click Save, as seen in the example below.
4 |
|
With Notepad still open, type World Grand Champion Heartland Equality between the opening and closing title tags as shown at the right.
Click Ctrl + S to save your html for the web page.
Click Ctrl + S to save your html for the web page.
5 |
|
You are now going to set the background color of your page. You will do this by placing an attribute and value inside the body tag. Type the following, bgcolor=gold, inside the opening body tag, as shown at the right.
Click Ctrl + S to save your html for the web page.
It is now time to take your first look at the web page you are building. Minimize all programs you have open you you can see your computer's Desktop. Click on the My Computer Icon then your G drive. Then double-click on the drive you are storing your work on. Then double-click on your heartland_equality folder. Finally, double-click on the index.htm file. Your web page should open up in a web browser and look like the example below.
Click Ctrl + S to save your html for the web page.
It is now time to take your first look at the web page you are building. Minimize all programs you have open you you can see your computer's Desktop. Click on the My Computer Icon then your G drive. Then double-click on the drive you are storing your work on. Then double-click on your heartland_equality folder. Finally, double-click on the index.htm file. Your web page should open up in a web browser and look like the example below.
6 |
|
The background color is a bit too bright. Change the background color, bring up your Notepad again, then replace the word gold with lemonchiffon as seen at the right.
NOTE: When one usually sees this color referred to, it is in two words, Lemon Chiffon. When expressed in HMTL it is in one word.
Here are other colors you can use LINK.
Click Ctrl + S to save your html for the web page. Your web page should still be on your task bar at the bottom of your screen. Click on the page to maximize it. Click on the Refresh or Reload button in your browser's toolbar. Your most recent change to your HTML (background color of Lemon Chiffon) should now be visible.
IMPORTANT: Before you can view any changes you make to your web page, you must do two things.
1) Save the HTML for your page.
2) Refresh or reload our page.
NOTE: When one usually sees this color referred to, it is in two words, Lemon Chiffon. When expressed in HMTL it is in one word.
Here are other colors you can use LINK.
Click Ctrl + S to save your html for the web page. Your web page should still be on your task bar at the bottom of your screen. Click on the page to maximize it. Click on the Refresh or Reload button in your browser's toolbar. Your most recent change to your HTML (background color of Lemon Chiffon) should now be visible.
IMPORTANT: Before you can view any changes you make to your web page, you must do two things.
1) Save the HTML for your page.
2) Refresh or reload our page.
7 |
|
You are now going to add your first line of text to your web page. With your HTML open in your Notepad file, type Heartland Equality in 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), the 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), the click Refresh or Reload button to view the page. Your page should look like the status check below.
8 |
|
You are now going to change the size of the text you have just placed in the page. You will do this by using the size attribute of the font tag. This attribute will have an associated value. Match the HTML in your Notepad file to the example 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), click the 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), click the Refresh or Reload button to view the page. Your page should look like the status check below.
9 |
|
You are now going to change the face and color of your font. Match your HTML to the example 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), click the Refresh or Reload button to view the page. Your page should look like the status check below.
10 |
|
You are now going to place an image in your web page. The first step in the process is to place the image in the same folder you are saving your web page (heartland_equality). The image shown at the right is the image you will place in your web page.
To save this image in your folder right-click on the image and choose either Save As or Save Image As. A window will appear with a Save In menu near the top. Use that menu to navigate to your heartland_equality folder. Rename the file exactly equality1.jpg. Once you are in the folder, click Save in the lower right area of the window.
There should now be two files in your folder, index.htm and equality1.jpg.
To save this image in your folder right-click on the image and choose either Save As or Save Image As. A window will appear with a Save In menu near the top. Use that menu to navigate to your heartland_equality folder. Rename the file exactly equality1.jpg. Once you are in the folder, click Save in the lower right area of the window.
There should now be two files in your folder, index.htm and equality1.jpg.
11 |
|
To place the image in the page, add the following HTML code 2 lines beneath the font tag 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), click the 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), click the Refresh or Reload button to view the page. Your page should look like the status check below.
12 |
|
Notice how both the text and image are "side by side". You are now going to place them on two separate lines. There is a tag that will place something similar to a "double space" in your web page. Add the "Paragraph" tag as shown below.
NOTE: The closing </p> tag is often used to place a "double space" like you would see between paragraphs. In this case the double space is between 2 items on your web page, the text and the image. The closing </p> tag is optional, you may include it if you like.
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), click the 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), click the Refresh or Reload button to view the page. Your page should look like the status check below.
13 |
|
You will now center all the contents of your web page. To do this, place the <center> tags just after the opening body tag and before the closing body tag 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), click the Refresh or Reload button to view the page. Your page should look like the status check below.
Be certain all your work is saved, upload index.htm below and then proceed to the next lesson.
