HTML and CSS The structure and style of
- Slides: 14
HTML and CSS The structure and style of web pages Warm-up: How is the internet like an onion?
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.
If this is an HTML tag and this is an inline style, which is the correct way to arrange them? < >< > < > </ >
WHY does it matter? 1 in 4 HS Offer CS 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. How to start coding video Computer science in all grades.
Who should learn to code? Everybody!
Last class: Add inline styles to a page Challenges: 1. CSS syntax is very tricky and picky 2. It’s not obvious how to combine HTML and CSS 3. We haven’t made many web pages from scratch. We need to learn to debug!
Today 1. 2. 3. 4. 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.
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
Notes on CSS styles to copy down Inline styles fit inside of an HTML tag. To add an inline style: <tag style=“property: setting; “> Possible HTML tags: body, p, h 1 -h 6, img, list tags, table tags, … CSS property options color (for words) Any color by name, hex or rgb code background-color Any color by name, hex or rgb code border solid, dashed, dotted, double, …. float left, right text-align (for words) left, center, right http: //www. w 3 schools. com/css_howto. asp Syntax note: Every dash, quote, =, and semicolon matters in picky CSS syntax
Examples of inline CSS styles Make the entire body of a webpage red <body style="background-color: red"> Syntax note: Every dash, quote, =, and semicolon matters in picky CSS syntax Make all the words in a heading that says TOPICS blue <h 4 style=“color: blue; “> TOPICS </h 4> Align a frog picture to the right with wordwrap <img style="float: right“ src=“frogs. png”> Put a border around a heading saying Wo. W! that is white text on a red background. <h 2 style="border: solid; background-color: red; color: white"> Wo. W! </h 2>
Choose the best HTML joke to put on the wall
Do the inline style drag and drop exercise
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
Work through Khan Academy HTML lists, images and the picture perfect trip.