Build a basic page in HTML5

Read, in order, the info on these three pages, which are a series of successive pages in the W3Schools website:

  1. https://www.w3schools.com/html/html_intro.asp
  2. https://www.w3schools.com/html/html_editors.asp
  3. https://www.w3schools.com/html/html_basic.asp

When you open any of these pages, feel free to use the green "Try it Yourself" button to test your knowledge. If you do, be sure to click the green "Run" button at the top of the coding (left) side in order to see on the right side (browser simulation side) the results of any code changes you have made. This is an opportunity to have some fun (maybe?).

As per the reading, open either one of  the following:

Then create a basic HTML file with a few HTML elements as follows:

  1. Before you enter any code, save the file as: yourlastname-basic-html-page.html - insert YOUR Last Name! - no spaces.
    • For example, I would save my file as:
      • vaughan-basic-html-page.html
    • Be sure to manually add the .html file extension, otherwise a different file extension will be added for you by the program you are using.
    • Be sure you save your file somewhere that you can find it when you submit the file.
    • Regarding not using spaces in file or folder names:
      • Do not use spaces in folder or file names for web files because almost all servers run on Apache software which runs on LINUX.
      • UNIX (and its various versions such as LINUX) interprets any spaces as a discrete separation between items such as files, commands, etc.
      • Also note that, conventionally, file and folder names use lower case letters, with some exceptions such as database generated names.
  2. Put in a basic HTML page structure as shown near the top of this page, under the heading "A Simple HTML Document".
  3. Inside the title element put:
    • Welcome to the YOUR FULL NAME page
      • Please use your full name!
      • For example, my title would be "Welcome to the Dan Vaughan page"
  4. Change the h1 element to h2 and replace the text in it to:
    • "This is a level 2 header" - do not include the quotes
  5. Replace the entire paragraph element with the following div (division) element:
    <div style="color:#2b70b5;font-family:arial,sans-serif;">Hello!</div>
    • style is an HTML attribute. Attributes are usually optional. They are used to modify a tag in any one of many different ways. They are always in the opening tag. You can use as many as you like within an opening tag, but have no more than one of each type.
    • For example, in the above element you cannot have another style attribute. Well, you can enter it into the code, but it might cause problems and it is poor coding.
  6. Then add the following code beneath the closing </div> tag to insert an image of a (chocolate!) cake:
    <img src="https://images2.pics4learning.com/catalog/2/thumb_big/20150121_142742_resized_thumb_big.jpg">
  7. Save the file.
  8. In your browser use Ctrl-O for Windows, or ⌘-O on a Mac, and select your html file and open it. It ought to open in your browser. If it does not look correct, you probably have a coding error, or I gave you incorrect instructions, which is entirely possible! Please let me know.
  9. Assuming all is well, submit your HTML file to me (you will see a Canvas submit button illustration below).
The results of my coding:

 

The submit assignment area