Creating a simple personal web page

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

  1. Create a folder on your desktop to save your HTML pages in (call it “My web page“)
  2. Start Notepad. Type the document tags below in your Notepad file.
  3. 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)

  1. Save your Notepad file in your HTML directory and name it txt.
  2. Now close your index.txtfile and then in the HTML directory folder rename the file html within the folder.
    • You can change the extension .txtof your Notepad file to .html to view the file and back to .txt to edit your progress as you start adding your HTML
    • NOTE: Opening your Notepadfile 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 <title> and the </title>

    • for example:

3 – Add a heading that is bold & in italics

  1. Place the cursor immediately under the <body> tag. Press Enter to create a line, if needed.
  2. Type <h1> (Heading 1), <b> (bold), <i> (italics) then your choice of heading name. For example: <h1><b><i>Your Name: This is my first homepage
  3. After typing in the heading name, you must close the heading by typing </b> (end bold), </i> (end italics), </h1> (end heading 1).
  4. Your finished heading line should look like this

4 – Add an image or picture

  1. 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.
  2. Enter a new line under the Heading you created above and type the following line:
    • <img src= (this stands for Image Source)
    • “the_title_of_your_image.jpg” (this name and extension needs to reflect the actual name ad extension of your image or picture)
    • width=134
    • height=200
    • hspace=5 (specifies the amount of space on either side of image)
    • border=0>
    • You may change the specs of the widthheighthspace and border as you wish for aesthetic purposes later.
  3. Your image or picture line should look like this:
  4. If the image or picture is not in the “My web page” folder, the webpage will not know where to look.
  5. 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

  1. Place the cursor immediately under the image or picture line (step 4), press Enter to create a line, if needed.
  2. Add a horizontal rule tag: <hr>

6 – Add a paragraph

  1. Place the cursor immediately under the horizontal rule tag (step 5), press Enter to create a line, if needed. Type the following line:
  2. <font color=#000000> (sets the color for the text in the paragraph)
  3. <p> (this begins a paragraph)
  4. Type your text, “This is my first web page. When it’s finished it will include:” (no quotes)
  5. </p> (this ends a paragraph)
  6. 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:

  1. <font color=#B4045F> (sets the font color of the unordered list, many choices: (Links to an external site.)
  2. <ul> (begins the unordered list)
  3. <li>Movies (bullet item 1)
  4. <li>Games (bullet item 2)
  5. <li>Music (bullet item 3)
  6. </ul> (ends the unordered list)
  7. Your new unordered list line should look like the following:

8 – Change the background color

  1. Place the cursor immediately under the unordered list line (step 7), press Enter to create a line, if needed.
    • Type the following line:
  2. (choose any color, you have many choices (Links to an external site.)

9 – Add a Hyperlink

  1. Place the cursor immediately under the background color line (step 8). Press Enter to create a line, if needed. Type the following lines:
  2. <a href= (stands for Hypertext Reference)
  3. “”> (quotes included)
  4. I’m currently attending Grossmont College</a>
  5. Press enter then type, <p><br>
  6. Press enter then type, </p>
  7. Your new unordered list line should look like the following three lines:

10 – End your HTML tags

  1. Place the cursor immediately under the </object> line (step 9), press Enter to create a line, if needed. Make sure the following tags are the last tags of your code:
    • </body> (ends the editing to the body of the page)
    • </html> (ends the HTML code for the page)
  2. Your end tag lines should look like the following:


11 – Check your code

Your entire block of code should look similar to the code in the image below.

12 – Save the page and view it

  1. Click save. If you haven’t saved it already, please save it in the “My web page” folder.
  2. Make sure it has been saved as index.html.
  3. Double click and open the index.html file. This will open up the browser for you to view your webpage so far. You should see your new page appear in the browser, looking something like the example below.
    • REMEMBER: You should change the extension of your Notepad file from .txt to .html often to make sure you’re on the right path.

13 – Copy & Paste your code

You will Copy & Paste your code in the HTML Editor feature within this Canvas discussion, so we can all see your page without having to download a file. Read the following article for instructions on using the HTML Editor: HTML Editor (Links to an external site.)

14 – Resource Sites for your reference

HEX Color Codes for HTML: (Links to an external site.)
HTML Tags:


Place your order
(550 words)

Approximate price: $22

Calculate the price of your order

550 words
We'll send you the first draft for approval by September 11, 2018 at 10:52 AM
Total price:
The price is based on these factors:
Academic level
Number of pages
Basic features
  • Free title page and bibliography
  • Unlimited revisions
  • Plagiarism-free guarantee
  • Money-back guarantee
  • 24/7 support
On-demand options
  • Writer’s samples
  • Part-by-part delivery
  • Overnight delivery
  • Copies of used sources
  • Expert Proofreading
Paper format
  • 275 words per page
  • 12 pt Arial/Times New Roman
  • Double line spacing
  • Any citation style (APA, MLA, Chicago/Turabian, Harvard)

Our guarantees

Delivering a high-quality product at a reasonable price is not enough anymore.
That’s why we have developed 5 beneficial guarantees that will make your experience with our service enjoyable, easy, and safe.

Money-back guarantee

You have to be 100% sure of the quality of your product to give a money-back guarantee. This describes us perfectly. Make sure that this guarantee is totally transparent.

Read more

Zero-plagiarism guarantee

Each paper is composed from scratch, according to your instructions. It is then checked by our plagiarism-detection software. There is no gap where plagiarism could squeeze in.

Read more

Free-revision policy

Thanks to our free revisions, there is no way for you to be unsatisfied. We will work on your paper until you are completely happy with the result.

Read more

Privacy policy

Your email is safe, as we store it according to international data protection rules. Your bank details are secure, as we use only reliable payment systems.

Read more

Fair-cooperation guarantee

By sending us your money, you buy the service we provide. Check out our terms and conditions if you prefer business talks to be laid out in official language.

Read more
error: Content is protected !!
Open chat
You can contact our live agent via WhatsApp! Via + 1 3234125597

Feel free to ask questions, clarifications, or discounts available when placing an order.

Order your essay today and save 25% with the discount code CLASS