Download presentation
Presentation is loading. Please wait.
1
The structure and style of web pages
HTML and CSS The structure and style of web pages Warm-up: How is the internet like an onion?
2
How is the internet like an onion?
There are many different layers Trying to get to them all could bring tears to your eyes ;) People don’t realize their using (eating) it much of the time, though sometimes it’s obvious. Also:; you don’t usually see it, it’s not completely necessary (the browser will display the information anyway)
3
If this is an HTML tag and this is an inline style, which is the correct way to arrange them?
< > < > < > < > </ >
4
WHY does it matter? 1 in 4 HS Offer CS How to start coding video
Did you know? -China will soon become the number 1 English-speaking country in the world. -25% of India’s population with the highest IQ’s is greater than the total population of America, or put another way: India has more honor kids than America has kids. And those kids all learn CS. Computer science in all grades.
5
Who should learn to code?
Everybody!
6
Last class: Add inline styles to a page
Challenges: CSS syntax is very tricky and picky It’s not obvious how to combine HTML and CSS We haven’t made many web pages from scratch. We need to learn to debug!
7
Today Take style notes in folders back page.
Drag the styles where they belong. Debugging activity. Continue work on Khan Academy HTML and CSS HTML alone is boring Black text on a white background … in a straight line from top to bottom.
8
Remember…. Coding: Takes a while to learn. There’s a whole year long class on web design! We are only going to learn the basics. This computer lab is open EVERY day at PRIDE time A and B
9
Notes on CSS styles to copy down
Syntax note: Every dash, quote, =,and semicolon matters in picky CSS syntax Notes on CSS styles to copy down Inline styles fit inside of an HTML tag. To add an inline style: <tag style=“property: setting; property: setting; “> Possible HTML tags: body, p, h1-h6, img, list tags, table tags, … CSS property options color (for words) Any color by name, hex or rgb code background-color border solid, dashed, dotted, double, …. float left, right text-align (for words) left, center, right Inline styles are fine for “one-of-a-kind” styles
10
Examples of inline CSS styles
Syntax note: Every dash, quote, =,and semicolon matters in picky CSS syntax Make the entire body of a webpage red <body style="background-color: red"> Make all the words in a heading that says TOPICS blue <h4 style=“color: blue;“> TOPICS </h4> Align a frog picture to the right with wordwrap <img style="float: right“ src=“frogs.png”> Put a border around a heading saying WoW! that is white text on a red background. <h2 style="border: solid; background-color: red; color: white"> WoW! </h2>
11
Choose the best HTML joke to put on the wall
12
Do the inline style drag and drop exercise
13
Debugging exercise Circle all the HTML and CSS errors in this web page: Look for: 3 missing ending tags 3 missing punctuation marks 3 misspelled key words Define Plan – how to be efficient as a team? Try Reflect
14
Work through Khan Academy HTML lists, images and the picture perfect trip.
Similar presentations
