comp 1850 | introduction to web design and development

lecture two

UPDATED Apr 26, 2016

agenda

  • Review - Chapter 1
  • HTML Overview - Chapter 2 (PPT)
    • block elements vs. inline elements
    • hypertext links
  • In-class Exercises - Chapter 2
  • CSS Introduction - Chapter 3 (PPT)
  • In-class Exercise - Chapter 3
  • Tools of the Trade [Optional - self study]
  • readings

block elements vs. inline elements

  • HTML elements come with default characteristics
  • sample block-element tags: (automatic line breaks)
  • <p></p> - paragraph
  • <h1></h1> - heading (numbers 1-6 indicate importance, not size)
  • <hr> - horizontal rule
  • <ul></ul> - unordered list
    • <li></li> - list items
  • <ol></ol> - ordered list
    • <li></li> - list items
  • <blockquote></blockquote> - quotation format

  • sample inline tags: (no automatic line breaks)
  • <strong></strong> - strong emphasis
  • <em></em> - emphasis
  • <img> - images
  • block-level tags can include inline tags but not vice versa.

In-class Exercises - Chapter 2

  1. Lists - Hands-On Practice 2.6, 2.7 & 2.8
  2. Special Characters - In Class Exploration
  3. Structural Elements - Hands-On Practice 2.10
  4. Hypertext Links - Hands-On Practice 2.12
  5. Email Link - Hands-On Practice 2.13
  6. Using HTML5 Validator - Hands-On Practice 2.18

Intro to CSS - Chapter 3

This week introduces CSS to start preparing you for the week 4, assignment 1. There will be more CSS in future weeks.

  • Overview of CSS
  • Inline CSS

In-class Exercises - Chapter 3

  1. The Style attribute - Hands-On Practice 3.1

tools of the trade [Optional]

homework 2

Your homework for next week is as follows:

  1. Complete exercises 9 and 10 on page 64 in Web Development & Design Foundations. (recipe.html and band.html)
  2. Create a folder in your bcitwebdev.com account called hw2 and upload the files to this folder.
  3. In addition to the instructions in the text, use inline CSS to style at least one element of each HTML file.

Exercise is due before the start of the week three class.

comp 1850 home | about the course | readings | assignments | resources | 01 | introduction | 02 | xhtml & ftp | 03 | images & tables | 04 | css: colour & text | 05 | css: page layout | 06 | site structure | 07 | design principles | 08 | design techniques | 09 | forms | 10 | client-side scripting | 11 | ssi, video & analytics | wednesday at bby | thursday at bby | thursday at dtc | dave tanchak | jeff parker | lynda williams | benjamin yu | students on bcitwebdev | textbook website | my.bcit | D2L login example projects | | bcit | bcit: computing |