Brian Harrington
(Slides adapted from material by Dr. Purva Gawde and Dr Anna Bretscher)
Lecture Plan
● Basics of Web Development
● HTML
● CSS
Admin
● A1:
○ Out now
○ Due after reading week
● Midterm:
○ Saturday, March 11
○ 9:00-11:00
○ IC130
Review
● Relational Algebra:
○ Formalism for querying relations
● SQL:
○ Language for creating/manipulating/querying tables
● Important:
○ We have NOT taught you all of SQL
○ We will NOT teach you all of HTML/CSS/etc
○ Lectures in this course are about giving you enough to
get started
Web Development
● Back End:
○ SQL: Store data
○ Javascript: Access/manipulate data
Web Development
● Front End:
○ Dealing with what the user sees when they open the
web app
○ HTML - What’s on the page
○ CSS - How things look
○ Javascript - Dynamic interaction
HTML:
● HyperText Markup Language
○ Describes content of page
○ What goes where
○ Can describe how things look… but shouldn’t
● Uses <tag>... </tag> syntax for starting/stopping sections
● <head> - stores metadata about page
● <body> - stores content of page
HTML:
● Lots more tags
○ Headers: <h1>, <h3>, etc
○ Paragraphs: <p>
○ Images: <img>
○ Links(anchors): </a>
○ Lists (ordered/unordered): <ol><ul>
○ …lots more
CSS
● CSS: Cascading Style Sheets
○ We don’t want to define how things look in html
■ Why not?
● 2 parts: Style sheet + Cascading
● Format:
Selector{
Property1: value1;
Property2: value2;
…
}
CSS
● 2 ways of applying CSS to HTML
○ Embed directly into html DO NOT DO THIS
○ Use <link> to link to external .css file
CSS
● Selector:
○ Target a specific html element
● Cascading:
○ Tag - all html tags of this type
○ Class (.)- each tag can have multiple classes
○ ID (#)- uniquely identify this specific element
BREAK
https://www.utsc.utoronto.ca/hwc
CSS
● Pre 2000s: HTML + CSS was easy
● Now: >60% of sites are viewed on mobile devices:
○ Small screens
○ Portrait orientation
● So we need to make sure things look good on all sorts of
screens
○ Dynamic sizing
Recap
● HTML - What goes on the page
● CSS - How it looks
● Both - LOTS of tags/flags/features
○ We’ve only covered some very small examples
○ Not teaching you all of HTML/CSS, instead giving you a
start to let you play
● How to learn more?
○ Formal exercises + Readings = Good
○ Playing + looking at existing sites = Better
Jobs for this week
● Read A1 handout (if you haven’t already) and ask questions
on Piazza
● Draw a simple website layout, how you want it to look on
mobile/full screens
● Try to make it work with HTML + CSS
Brian Harrington
(Slides adapted from material by Dr. Purva Gawde and Dr Anna Bretscher)
