Week 3: Intro to HTML

In this lesson you'll begin to learn HTML: you'll learn the syntax, the categories of elements, and begin to learn some of the large number of elements and attributes available. You'll also learn how to keep up-to-date with new developments in the HTML standard, where to learn about new elements/attributes, and how to ensure that your HTML code is valid and well-formed. Lastly, you'll learn how to publish your web sites and applications to the development server.

Intro to HTML

Notes

• Intro to HTML
• Minimal HTML
• Valid HTML
• Basic Elements (just the first few sections)
• How to Publish your Web Sites

Resources

• References
  • MDN (Mozilla Developer's Network) HTML Guide: the starting point for anything and everything to do with learning HTML, including references/API and tutorials.
  • Quick access to the MDN HTML Elements Reference NOTE: Another quick and easy way to get information on a specific element is to type "MDN ____ element" in a search engine (replace the blank with the name of the element, e.g. "MDN section element")
  • HTML Living Standard
  • The two main standards organisations: World Wide Web Consortium (W3C) and WHATWG
  • W3Schools: HTML Tutorial
• Tools
  • HTML Validator - always validate all of your HTML.
  • Lorum Ipsum Text Generator - there are other ones, I like this one. Feel free to use a different one. Generates filler text for web pages. There are even some funny ones.
• Tutorials and Articles
  • MDN: Getting Started with HTML
  • W3Schools' Introduction to HTML
  • What Is HTML? from HTML Source.
  • MDN: Block Elements and Inline Elements
  • MDN: Document and Website Structure

Publishing

Notes

• How to Publish a Web Site

Homework

Practice/Study Questions

• Install software and set up your workspace/server space.
  • You need to set up your workspace on your own computer.
  • You also need to request and set up your web space on the Sheridan server where you will publish all assignments/exercises.
  • You must use Sheridan's dev.fast server to publish all assignments.
  • NOTE: Your Sheridan login name is the 8-character name at the start of your email e.g.in login@sheridancollege.ca, login is your Sheridan login name. Note your email address! The value "login@shernet.sheridancollege.ca" is NOT an email address - it's a UPN (User Principle Name)
• Complete this week's worksheet. Note that worksheets can be completed during class or after class. They can be completed using your own lecture notes or from the provided materials. Worksheets are not directly graded, but the questions might appear on exams and other evaluations. Ask the professor if you would like feedback on your worksheet (you must make an attempt on the worksheet in order to receive feedback).
• Watch the video The Internet: HTTP and HTML
• Answer the following questions where you take your class notes (form your answers using YOUR OWN WORDS; you might have to search for answers in the resources above). Feel free to DISCUSS the answers with your classmates.
  1. What is HTML? What does HTML stand for?
  2. What are tags or elements? What are attributes?
  3. What is the minimal, basic structure of an HTML page?
  4. What is the difference between an in-line element and a block element? Out of the elements you've learned so far, which are in-line elements and which are block elements?
  5. What is "well-formed" HTML? Why should our code be well-formed? How can you check that your code is well-formed?
  6. What are semantic elements? What are some of the semantic elements you've learned so far?

Practice Exercises

For each exercise, validate the HTML using the HTML Validator. Fix all problems until you get no errors.

1. If you haven't already done so, create a sub-directory in your local workspace and in your server workspace (off /syst10049) called "week1". Feel free to add an extra level for all of your practice exercises (e.g. /exercises).
   • For each practice exercise in each lesson, you'll usually be asked to create an exercise directory for that project, such as "/exercise1".
   • It is assumed that you will create the exercise project directory in both your local workspace and in your server workspace using the appropriate and standard directory structure discussed in class.
2. Create a new project directory called /exercise1 in this week's directory. Add an index.html page to your exercise1 directory. Add the minimal HTML to your index page. Set the title of the page to "Week 2, Exercise 1". Add a paragraph (<p> element) to the BODY of your page containing information about yourself.
3. If you've done some HTML coding before, check the Lesson 4 exercises for some more challenging projects.