Uni /DECO1400/Week 2 Tutorial

Week 2 Tutorial

CourseIntroduction to Web Design
SemesterS1 2021

Week 2 Tutorial

Tutorial Exercise 1

  • Look up a few examples of good and bad interface designs

  • Present findings to class

  • Contribute to RiPPLE

Analysis of index.html

Analysing file index.html

  • The HTML5 standard specifies that each HTML document must begin with the <!DOCTYPE html> tag. Furthermore, each HTML document has a html element which encloses all other elements.
    • The HTML element has two children - head and body
      <!DOCTYPE html>

    
        
        DECO 1400/7140 Week 2: HTML Basics

Tutorial Exercise 2

Write a comment with a justification on the padlet link below for the three given examples.

Week 2 Practical

Practical Exercise 1 - Analysis of Exercise1.html

Open exercise1.html in your code editor and your web browser.

  1. What does the `` tag do?

    The `` tag specifies the title of the webpage in the toolbar.

  2. Does any content in between the tags show up in the browser? No content in between the tags show up in the browser.

  3. Does any content in between the tags **NOT** show up in the browser? No, all content in between the tags shows up in the browser

  4. What’s consistent about the colors used (syntax highlighting) when viewing the code in the code editor?

    • Dark grey used for the <, </ and > components of the tag
    • Blue used for the tag name
    • White used for textual content between tags.
    • Orange/red used for string values passed as attributes to tags.

  5. Which line of code tells the web browser what kind of HTML document it is?

    • The first line

  6. How has the presentation (the way it looks) been defined in the document (if at all)?

    • It hasn’t - no CSS has been used.

Practical Exercise 1.1 - Modifying the Code

  1. Add some text content to a pre-existing HTML element. For example: appending a word to a heading or paragraph.
  2. Add an additional paragraph to the bottom of the `` element. See the result by refreshing the page in the web browser. See HTML Paragraphs @ W3Schools for help.
  3. Intentionally sabotage this exercise by removing an HTML tag. What effect does this have on the page when viewed in the web browser?\
    This does nothing - the page seems to render just fine :)

Practical Exercise 2 - Generation of HTML from Scratch.

  • Begin with using the prerequisite HTML5 structure.
    <!doctype HTML>
  • Add the , , , tags in the relevant places.

My implementation can be found here. This was run through the validator found here and passed with no errors.

Practical Exercise 3 - Three Little Pigs

← All DECO1400 notes