DIGI 110 Labs

First Webpage

Due Before Next Class
Go Back to Labs Page

STANDARD (75% marks):

By completing the standard portion of this lab students will demonstrate:

ADVANCED (+25% Marks):

By completing the advanced portion of this lab students will demonstrate:

Standard Lab: Create your Template!

  1. Open Brackets Download here if you don't laready have it.
  2. Brackets should open a new document automatically.
  3. Type (do not copy/paste) the following code:
  4. <!DOCTYPE html>
    <html lang="en">

    <head>
    <title>Template</title>
    <meta charset="utf-8" />
    </head>
    <body>

    </body>
    </html>
  5. Save your document as template.html in your DIGI110 Labs folder
  6. Double click the template.html file in your DIGI110Labs folder to ensure it opens in a web browser. (It should be a blank page with “Template” in the Title bar)
  7. Check your document for errors at: validator.w3.org/nu/
  8. Select “Check by File Upload” in the drop down menu.
  9. If you have any errors, work on them one at a time, top down, and revalidate your page every time you make *one* change. Often one error in the code will cause multiple errors on the validator.
  10. Once you get a Green result, you can move on.

    You have now created your template!
    Donʼt modify this file, just open it first and use the “Save As” command under the File menu to create a new file and start any new webpage!

Standard Lab: The Work

  1. Use the Save As command from the File Menu to create a brand new file from your template called “index.html”.
  2. Save it in the DIGI110 Labs folder
  3. Change the content of the <title> element to read: About Myself
  4. Do all of the following work between the opening <body> and closing </body> tags....

    You must only use the elements and techniques shown here.

    An excellent resource to find more HTML elements is http://www.w3schools.com

  5. Create a mini-essay about yourself - Just Two or Three Paragraphs with some headings.
  6. Now markup your document. That means, put HTML tags around sections of your document.. using the examples below:
  7. Wrap and mark up your headings with heading element. You can choose <h1>, <h2>, <h3> <h4>, or <h5> based on your heading’s importance. You can markup more than one heading with the same type of elements.
  8. Now markup all the paragraphs in your document with the <p> element, donʼt forget the ending </p> at the end of your paragraphs.
  9. Now use an inline element inside one of your paragraphs. Use an <em> and a <strong> element to emphasize a word, or section, of the text.
  10. Finally, use the <a> element, to create a link to another website. Jumping ahead and don't know how? Google it my friend! :)
  11. Check and Validate your document at validator.w3.org/nu/

ADVANCED Lab

  1. Discover how to create a "comment" in your HTML code
  2. Insert a comment into your code right after DOCTYPE that describes what DOCTYPE is.
  3. Insert a comment into your code right after head that describes what the head element is.
  4. Insert a comment into your code right after meta that describes what the meta element is.

Submit your Lab!

  1. Make sure your lab and all files including your template is in your DIGI110Labs folder
  2. Close the folder so you only see the DIGI110Labs folder icon on the screen.
  3. Compress the DIGI110Labs Folder:
  4. Submit it to email chris.alemany@viu.ca with the subject INTR 101
Go Back to Labs Page

Valid CSS!