Basic HTML Exercises Using Notepad Project

DISCUSSION 5 OVERVIEW
HTML – Basic HTML Exercises Using Notepad
In this discussion you will use Microsoft NotePad to create a simple personal web page and post it as your initial post for all your classmates to see and respond to it. Begin by following the steps below.
1 – Creating a directory (folder) and your initial Notepad file
Create a folder on your desktop to save your HTML pages in (call it “My web page”)
Start Notepad. Type the document tags below in your Notepad file.
This file will ultimately be your Homepage file.
2 – Now save the Notepad file to the HTML directory you created (the “My web page” folder)
Save your Notepad file in your HTML directory and name it index.txt.
Now close your index.txt file and then in the HTML directory folder rename the file index.html within the folder.
You can change the extension .txt of your Notepad file to .html to view the file and back to .txt to edit your progress as you start adding your HTML code.
NOTE: Opening your Notepad file with the .html extension will open it in the default internet browser installed in your computer to view it as a web page. Opening the file with the .txt extension will open the file in Notepad for editing.
Enter your custom title by typing it between the
for example:
3 – Add a heading that is bold & in italics
Place the cursor immediately under the tag. Press Enter to create a line, if needed.
Type

(Heading 1), (bold), (italics) then your choice of heading name. For example:

Your Name: This is my first homepage
After typing in the heading name, you must close the heading by typing (end bold), (end italics),

(end heading 1).
Your finished heading line should look like this
4 – Add an image or picture
You may use any image or picture you like. If you don’t know where to get one, do Google search for a picture you like. Once you have found the image or picture you like, save it in the “My web page” folder.
Enter a new line under the Heading you created above and type the following line:

You may change the specs of the width, height, hspace and border as you wish for aesthetic purposes later.
Your image or picture line should look like this:
If the image or picture is not in the “My web page” folder, the webpage will not know where to look.
Make sure to place the picture in the “My web page” folder with the index.html file.
NOTE: If the image is changed and is given the same name and extension, the new picture will automatically reflect in the web page.
5 – Add a horizontal rule
Place the cursor immediately under the image or picture line (step 4), press Enter to create a line, if needed.
Add a horizontal rule tag:

---

6 – Add a paragraph
Place the cursor immediately under the horizontal rule tag (step 5), press Enter to create a line, if needed. Type the following line:
(sets the color for the text in the paragraph)
You have many color choices to use. The following link lists a few: http://www.w3schools.com/html/html_colornames.asp (Links to an external site.)Links to an external site.

(this begins a paragraph)
Type your text, “This is my first web page. When it’s finished it will include:” (no quotes)

(this ends a paragraph)
Your new paragraph line should look like the following:
7 – Add an unordered list
Place the cursor immediately under the horizontal rule tag (step 6), press Enter to create a line, if needed. Type the following line:
(sets the font color of the unordered list, many choices: http://www.w3schools.com/html/html_colornames.asp (Links to an external site.)Links to an external site.

(begins the unordered list)
• Movies (bullet item 1)
• Games (bullet item 2)
• Music (bullet item 3)

(ends the unordered list)
Your new unordered list line should look like the following:
8 – Change the background color
Place the cursor immediately under the unordered list line (step 7), press Enter to create a line, if needed. Type the following line:
(choose any color, you have many choices: http://www.w3schools.com/html/html_colornames.asp (Links to an external site.)Links to an external site.
9 – Add a Hyperlink
Place the cursor immediately under the background color line (step 8). Press Enter to create a line, if needed. Type the following lines:
(quotes included)
I’m currently attending Grossmont College
Press enter then type,

Press enter then type,

Your new unordered list line should look like the fo