Week 4: Basic Elements & Document Structure; Images

In this lesson you'll learn the semantic elements used to create a standard web document (e.g. header, footer, main content, etc) and you'll learn some of the basic HTML elements used to create content such as paragraphs, links, and images. You'll also learn about valid and well-formed HTML and why this is important, and how to ensure that all your HTML files containn valid HTML.

Basic HTML Elements & Images

Notes

• Adding Images
• Basic Elements (we did the first few sections in the previous lesson, so in this lesson, just the last couple of sections)

Resources

• References:
  • MDN element reference: img, figure, figcaption.
• Tutorials and Articles:
  • MDN: Embedding Images in HTML

Document Structure, DOM

Notes

• Elements for Document Sectioning
• HTML DOM

Resources

• References:
  • HTML Living Standard 4.3 - Sections (of a document)
  • MDN Learning Guide: Document and Website Structure
• Tutorials and Articles:
  • MDN Document and Website Structure
• 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.

Homework

Practice/Study Questions

• 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).
• 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):
  1. In what situation would you use the <article> element? In what situation would you use use the <aside> element? In what situation would you use the <section> element?
  2. Why is it important to use the alt="" attribute on images in your document?
  3. What is an absolute path? What is a relative path? Which should you use for images and other files in a web document and why?
  4. What is hotlinking? When shouldn't you hotlink and why?
  5. What are the <figure> and <figcaption> elements used for?

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 and set the title to something that makes sense.
   • In the index page, add the minimal HTML structure. Inside the BODY element, add a HEADER element that contains a level-1 heading containing your first and last name.
   • Below the header, add a paragraph element with 5 sentences describing why you are taking your current program of study and what you hope to do after graduation. Feel free to add more than 5 sentences, if you wish, or multiple paragraphs. Get creative and feel free to look ahead and use some of the other elements you're going to learn.
   • Add a FOOTER element that contains an ADDRESS element. The ADDRESS should contain your standard copyright information, including the © symbol and your full name. (to display the © symbol, use the code &copy; - this is called a character entity and we'll learn these in a later lesson)
3. Add a paragraph to your page in the previous question. Inside the paragraph, add a link to one of your favourite web sites.
4. Add an image of yourself or an image that is relevant to you, to the page in the previous question.
5. Create a new project directory called /exercise2 in this week's directory. Add an index.html page to your project directory. Add the minimal HTML and set the title to something that makes sense.
   • Add a standard HEADER and FOOTER to your page. Your header should include a level-1 heading containing "Semantic Example" and a level-2 heading containing your first and last name. Your footer should contain your standard copyright.
   • Add a MAIN element that contains three ARTICLE elements. Each ARTICLE should start with a level-2 heading and contain at least 2 paragraphs of text. Use Lorum Ipsum text for your headings and paragraphs (use common sense regarding the length and number of words).
   • Choose one ARTICLE and add an ASIDE that contains a paragraph of Lorum Ipsum text.
6. Create a new project directory called /exercise3 in this week's directory. Add an index page to your project directory. Add the minimal HTML and set the title to something that makes sense.
   • Add a standard HEADER and FOOTER to your page. In your HEADER, add a level-1 heading with the content "Course Terminology". Your footer should contain your standard copyright.
   • Add a SECTION element that contains a level-2 heading with the content "Client/Server". Below the level-2 heading, add a paragraph with the definition of "client/server" IN YOUR OWN WORDS. Do not copy/paste from any source or this will count as plagiarism.
   • Add a second SECTION element to the MAIN element: the level-2 heading contains the content "Progressive Enhancement". Below the level-2 heading, add a paragraph with the definition of "progressive enhancement" IN YOUR OWN WORDS. Do not copy/paste from any source or this will count as plagiarism.
   • Add a third SECTION that's just like the first two, but this one defines "HTML".
7. Make a reference list of the elements you have learned today: DOCTYPE, HTML, HEAD, BODY, TITLE, META, P, H1, IMG, and any others you learned. Explain the purpose of each element. You'll need this list for your exam reference!
8. Create a new project directory called /exercise4 in this week's directory. Add an index page to your project directory. In the index page, add the minimal HTML structure. Add the necessary elements to your page to display a portfolio of your future work and projects, as follows:
   • In the HEADER element of your document, add the following:
     • A level-1 heading with your first and last name.
     • A level-2 heading with "Online Portfolio".
   • Add a SECTION that contains a level-3 heading with the content "Experience", and then a paragraph summarizing your experience and education so far (you can imagine perhaps that you're writing this after you graduate and embellish a little bit).
   • Add a section that contains a level-3 heading with the content "My Projects". Follow this with a paragraph containing a list of links to your four (future) web assignments on your Dev.FAST space (e.g. http://login.dev.fast.sheridanc.on.ca/syst10049/assign1)
   • Make sure you have your standard FOOTER at the bottom of the document with your first and last name, and the current date.
9. Create a new project directory called /exercise5 in this week's directory. Add an index page to your project directory. In the index page, add the minimal HTML structure. Your index page shows news for a pet shelter:
   • Your header section should contain a level-1 heading with "Sydney's Shelter News". Your footer should contain a standard copyright notice with your first and last name and the current year.
   • Add three articles to your page. Each article should have authors and dates (you can make these up). Use Lorum Ipsum text for your article content. Each article should have about 700 words. Article 2 contains an ASIDE with 250 words.
10. A client wants a web page for their jewelry-making business. Create a new project directory called /exercise6 in this week's directory. Add an index page to the project directory. Add 3 more pages to the project directory: contact.html, about.html, and catalog.html. The index page should contain a HEADER section and FOOTER section. The header section should contain a level-1 heading with the content "Arti's Jewelry" and a level-2 heading with the content "Custom made jewelry by hand". The footer section should contain a standard copyright notice with your first and last name and the current year. Add a navigation area to the header with links to the contact, about, and catalog pages. Between the header and footer, add a MAIN element. Inside the MAIN, add a SECTION with a level-3 heading that contains the content "News". Add 3 paragraphs of Lorum Ipsum text below the News heading (about 300 words total). The other 3 pages should have the following content:
    • contact.html: The same header and footer sections as the index page, and the same navigation except the contact.html link should be missing. Add a link to the index page as the first link in the navigation. After the navigation, add a paragraph with the following content:

      Contact me for custom orders or more information.
      
      Artemesia Jollymore
      Email: arti@artijewelry.com
      Phone: 905-845-9430

      Put the name in bold, as well as the "Email:" and "Phone:" text.
    • about.html: The same header and footer sections as the index page, and the same navigation except the about.html link should be missing. Add a link to the index page as the first link in the navigation. After the navigation, add 1000 words of Lorum Ipsum text in 3 paragraphs.
    • catalog.html: The same header and footer sections as the index page, and the same navigation except the catalog.html link should be missing. Add a link to the index page as the first link in the navigation. After the navigation, add a level-3 heading with the content "Coming Soon".
11. Create a new project directory called /exercise7 in this week's directory. Add an index page to your project directory. In the index page, add the minimal HTML structure. Add the following to your index page:
    • Right-click this image and select "Save Image As". Save it into an appropriate location inside your project.
    • Use Google Image Search of a food or beverage that you like. To find an image you're allowed to use/modify (after performing your search, select Settings under the search bar and select "Advanced Search". Near the bottom, look for the "Usage Rights" field and select any "use or share" option.) Download the image and store it in an appropriate location inside your /exercise7 directory.
    • Add the necessary elements to your page to display information about your favourite food or beverage:
      • In the HEADER element of your document, add the following:
        • A level-1 heading with your first and last name.
        • A level-2 heading with "My Favourite Foods/Beverages".
      • Add your standard FOOTER with your name and copyright info.
      • In between the header and footer of your page, add an ARTICLE with a level-3 heading containing the name of your chosen food or beverage.
      • Below the level-3 heading, add a couple of paragraphs about your chosen food/beverage. You can describe it, why you like it, how it's made, talk about its ingredients, etc.
      • Add the picture you downloaded as an example of the food or beverage you're desribing. This is a sample of your chosen item, so should you use a <figure>?