This is the first lab, so our goals are getting everyone up and running. As you can see from the example section of this page, the content you will be creating is fairly modest. The Standard lab includes the creation of a basic HTML web page, logging on and setting up your SFTP client software, and validating your new page. The result of this lab will be an index.html page that will serve as the home page for the rest of your labs in this course. Below, you'll find instructions and an example of the Standard version of Lab 01. This is the version covered in class, so it should be fairly straight-forward.

DIGI 220 Labs

About Me

I have a strong interest in supervising the production of human hair in Suffolk, NY. Have some experience managing velcro in the financial sector. Once had a dream of exporting fried chicken in Mexico. Earned praised for my work researching toy monkeys in the aftermarket. Set new standards for marketing bacon in Las Vegas, NV. Spent 2001-2005 consulting about acne in Naples, FL.

In 2009 I was developing bagpipes in the government sector. Spent a year implementing bathtub gin on Wall Street. Spent 2002-2007 getting to know human hair in Suffolk, NY. Spent several years writing about yard waste in Africa. Developed several new methods for licensing hugs in Ocean City, NJ. Garnered an industry award while researching country music in the government sector.

Standard Lab

Checklist
  • site structure is correct
  • lab01 completed
  • title element
  • h1 and h2 elements
  • two p elements
  • site Valid
  • some polish on lab
  • ADV: self-portrait
  • ADV: professional bio

Part 1 - Create a Simple Webpage

  1. Grab the HTML 5 template
  2. Open the file in your chosen text editor, and make a copy of the file; name it index.html
  3. Change the title element in the head section of the document. Use the title Your Name - Digi220 Labs
  4. Add an h1 element with content that includes Your Name - DIGI 220 Labs
  5. Add an h2 element with content that reads something like About Me
  6. Add two paragraphs to say something about yourself, using two p elements.
  7. Save the file in a folder labelled labs (or something like that) in a location on your local drive that makes sense

Part 2 - Access Your Web Account & Upload Your First Page

  1. Follow the instructions provided, and access (log in to) your web space using your chosen SFTP client
  2. Once you have connected to your web account with your SFTP client, upload your index.html page to your web account. This is the first page in your website for this class!
  3. Check that your new index.html file is properly uploaded by loading your first web page into a browser. Your URL should be: student.learnnewmedia.ca/123456789. This is the URL you would use to share your work with someone else (such as me!)
  4. Use the button in your SFTP client to create a new, empty folder (directory) called labs. We will use this folder for other labs

Part 3 - Validate Your Page

  1. Open the W3C validation page (validator.w3.org), and type (copy and paste!) in the full URL of your website
  2. If you get any errors, see what they are and fix them!
  3. If you like, put an HTML valid note on the bottom of your index.html page, like this page does.
  4. That's it - you're done the standard lab!

Advanced Lab

To complete the advanced lab, you must enhance the exisiting home page you created in the standard version of this lab (index.html), by adding a new, original self-portrait (photo, drawing, cartoon, collage, etc.), and a professional biography. Be creative, and consider how you could use this biography to market your skills. Don't forget to validate your page after you make these changes! Completing the advanced version of this lab will earn you up to three additional marks. As well, if you do complete the advanced section of this lab, be sure to indicate this in the title you give your lab (i.e. Lab 1 Standard & Advanced).