DIGI 110 Labs
Due Before Next Class
STANDARD (75% marks):
By completing the standard portion of this lab students will demonstrate:
Ability to create a valid HTML5 Template file
Create a simple HTML5 page that includes:
A page title to name their page.
Using block level elements.
Using inline elements including a link to a website.
ADVANCED (+25% Marks):
By completing the advanced portion of this lab students will demonstrate:
Discover how to create an HTML comment
Insert three HTML comments describing the DOCTYPE, html, and meta elements.
Standard Lab: Create your Template!
- Open Brackets Download here if you don't laready have it.
- Brackets should open a new document automatically.
- Type (do not copy/paste) the following code:
<meta charset="utf-8" />
- Save your document as template.html in your DIGI110 Labs folder
- 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)
- Check your document for errors at: validator.w3.org/nu/
- Select “Check by File Upload” in the drop down menu.
- 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.
- 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
- Use the Save As command from the File Menu to create a brand new file from your template called “index.html”.
- Save it in the DIGI110 Labs folder
- Change the content of the <title> element to read: About Myself
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
- Create a mini-essay about yourself - Just Two or Three Paragraphs with some headings.
- Now markup your document. That means, put HTML tags around sections of your document.. using the examples below:
- 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.
- Now markup all the paragraphs in your document with the <p> element, donʼt forget the ending </p> at the end of your paragraphs.
- 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.
- Finally, use the <a> element, to create a link to another website. Jumping ahead and don't know how? Google it my friend! :)
- Check and Validate your document at validator.w3.org/nu/
- Discover how to create a "comment" in your HTML code
- Insert a comment into your code right after DOCTYPE that describes what DOCTYPE is.
- Insert a comment into your code right after head that describes what the head element is.
- Insert a comment into your code right after meta that describes what the meta element is.
Submit your Lab!
- Make sure your lab and all files including your template is in your DIGI110Labs folder
- Close the folder so you only see the DIGI110Labs folder icon on the screen.
- Compress the DIGI110Labs Folder:
- In Mac: Right-Click (two fingers on the trackpad and click) or hold the Control key and click on the folder then select "Compress" from the Menu
- In Windows, Right-Click the folder and look under "Send To" for "Zip/Compress File". Make sure you use this method only. Please no 'tar', 'rar' or '7zip' archives.
- Submit it to email email@example.com with the subject INTR 101