Scribd
Upload
12 views

CSCB20 2023S_ Week05 - Intro to Web Development

Uploaded by

imalexanderjason
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

CSCB20 2023S_ Week05 - Intro to Web Development

Uploaded by

imalexanderjason
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

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)

You might also like