inline styles with HTML - Mrs-oc
Download
Report
Transcript inline styles with HTML - Mrs-oc
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?
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; 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
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.w3schools.com/css/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
<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>
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.