Post on 28-Jan-2015
description
transcript
HTML CSSOnline News Packages
Review
HTMLCSS
JavaScript
HTMLCSS
JavaScript
Content (tags)
HTMLCSS
JavaScript
Content (tags)
Form (styles)
HTMLCSS
JavaScript
Content (tags)
Form (styles)
Function (code)
HTML Review
<h1an HTML tag
</h1>>
HTML Review
<h1an HTML tag
>id="title"an attribute
Three attributes we will be using a lot:
id="some_identifier"
class="some_grouping"
style="size:14px; margin:0;"
Three attributes we will be using a lot:
id="some_identifier"
class="some_grouping"
style="size:14px; margin:0;"
Three attributes we will be using a lot:
id="some_identifier"
class="some_grouping"
style="size:14px; margin:0;"
Three attributes we will be using a lot:
id="some_identifier"
class="some_grouping"
style="size:14px; margin:0;"
ID Attribute
<h1 id="title">This is a title</h1> <h2 id="subhead">This is a subhead</h2> <p id="part1">This is a paragraph describing something important. I've given it an identifier.</p> <p id="part2">This is another paragraph.</p>
ID Attribute
<h1 id="title">This is a title</h1> <h2 id="subhead">This is a subhead</h2> <p id="part1">This is a paragraph describing something important. I've given it an identifier.</p> <p id="part2">This is another paragraph.</p>
<style> #title{ font-‐size: 20px; } #subhead{ font-‐size: 30px; } #part1{ font-‐size: 22px; }
</style>
ID Attribute
<h1 id="title">This is a title</h1> <h2 id="subhead">This is a subhead</h2> <p id="part1">This is a paragraph describing something important. I've given it an identifier.</p> <p id="part2">This is another paragraph.</p>
<style> #title{ font-‐size: 20px; } #subhead{ font-‐size: 30px; } #part1{ font-‐size: 22px; }
</style>
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
CSS goes in the <style> tag<script> !
#some_id1{ font-‐size:22px;
} !
#some_id2{ font-‐size:35px;
} !
</script>
CSS goes in the <style> tag<script> !
#some_id1{ font-‐size:22px;
} !
#some_id2{ font-‐size:35px;
} !
</script>
Exercise
Step 1
In your text-editing app, create three headlines as <h2> tags. They should be: !
"My favorite movie" "My favorite restaurant" and "My favorite hobby"
Step 2
Give each h2 header a unique ID attribute.
Answer so far
<h2 id="movie">My favorite movie</h2><h2 id="food">My favorite restaurant</h2><h2 id="hobby">My favorite hobby</h2>
Step 3
Create a pair of <style> tags (opening and closing) above everything else you just typed.
Answer so far
<style> !
</style>
Step 4
Using the pound-sign selector, type CSS code to adjust the font-‐size for each headline so that they are all different sizes.
Answer<style>
#movie{ font-‐size: 30px;
} #food{
font-‐size: 22px; }
</style> <h2 id="movie">My favorite movie</h2><h2 id="food">My favorite restaurant</h2><h2 id="hobby">My favorite hobby</h2>
Class attribute in HTML
<h1 </h1>>
Class attribute in HTML
<h1 >class="name"
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
Exercise
Step 1
Give two of your <h2> tags the same class attribute. !
Hint: Tags can have both an id and a class attribute!
Answer so far
<h2 id="movie" class="fun">My favorite movie</h2><h2 id="food" class="fun">My favorite restaurant</h2><h2 id="hobby">My favorite hobby</h2>
Step 2
Add a single CSS class to your style tag and set the color property to red.!
Hint: look at how you did the ID, and use the same format.
Answer<style> !
.fun{ !
color: red; !
} !
!
</style>
Let's add some more properties
Try adding a few more properties to either individual tags, or to the class.!border: 1px solid black; background: green; background: url('http://placekitten.com/200/');
Inline CSS
<h2 style="color:red;"> </h2>
style attribute
Exercise
Write some CSS directly in the h2 tag.!
Create a style attribute where the style sets the color property to blue.!
Take note, if it contradicts your CSS in your <style> tag, this takes precedence.
Answer so far
<h2 id="movie" class="fun">My favorite movie</h2><h2 id="food" class="fun">My favorite restaurant</h2><h2 id="hobby" style="color:blue;">My favorite hobby</h2>
Answer so far
<h2 id="movie" class="fun">My favorite movie</h2><h2 id="food" class="fun">My favorite restaurant</h2><h2 id="hobby" style="color:blue;">My favorite hobby</h2>
Pop Quiz
What's the pound symbol for?
What's the pound symbol for?
Signifies an ID sector
What CSS selector uses the period?
What CSS selector uses the period?
A class selector
Which selector would I use if I wanted to style multiple items in my news
package at once?
Which selector would I use if I wanted to style multiple items in my news
package at once?
A class selector
Explain the difference between a class selector and ID selector
Explain the difference between a class selector and ID selector
IDs are used to reference one unique tag. !
Classes are used to reference multiple tags at once.
RecapThree Attributes:
RecapThree Attributes:
ID attribute: Give each tag a unique identifier, so we can reference it in CSS.
RecapThree Attributes:
ID attribute: Give each tag a unique identifier, so we can reference it in CSS.
CLASS attribute: Give groups of tags a class name, so we can reference it in CSS.
RecapThree Attributes:
ID attribute: Give each tag a unique identifier, so we can reference it in CSS.
CLASS attribute: Give groups of tags a class name, so we can reference it in CSS.
STYLE attribute: Screw all that. Just put the CSS right in the tag.
Understanding <div> tags
HTML:
CSS:
<div id="container"> !!</div>
Some rules about divs
• By default, <div> tags are invisible.
Some rules about divs
• By default, <div> tags are invisible.
• By default, <div> tags have height of zero.
Some rules about divs
• By default, <div> tags are invisible.
• By default, <div> tags have height of zero.
• By default, <div> tags stretch to the full width of the browser.
HTML:
CSS:#container{ !
border: 1px solid black; !}
<div id="container"> !!</div>
HTML:
CSS:#container{ !
border: 1px solid black; height: 300px;
!}
<div id="container"> !!</div>
HTML:
CSS:#container{ !
border: 1px solid black; height: 300px; width: 200px;
!}
<div id="container"> !!</div>
HTML:
CSS:#container{ !
border: 1px solid black; height: 300px; width: 400px; background: red;
}
<div id="container"> !!</div>
Pop Quiz!
If I don't set a width, how wide are divs by default?
100% or the full browser width!
If I don't set a width, how wide are divs by default?
How tall are empty divs if I don't set a height?
Zero pixels.!
How tall are empty divs if I don't set a height?
If I create a div, and I don't see it on my screen, what do I need to do to see it?
Add some CSS styling, like border, height, width, background colors/images, etc.!
If I create a div, and I don't see it on my screen, what do I need to do to see it?
• <div> tags conform to the height of their content.!
• If you set a height on a <div> tag, it overrides the content inside of it.!
• If you set a width on a <div> tag, it overrides the content inside of it.
HTML:
CSS:#container{ !
border: 1px solid black; !}
<div id="container"> !!!</div>
HTML:
CSS:#container{ !
border: 1px solid black; !}
<div id="container"> !Hello world! !</div>
Hello world!
HTML:
CSS:#container{ !
border: 1px solid black; !}
<div id="container"> !Hello world!<br> Foo<br> Bar<br> !</div>
Hello world! Foo Bar
HTML:
CSS:#container{ !
border: 1px solid black; height: 12px;
!}
<div id="container"> !Hello world!<br> Foo<br> Bar<br> !</div>
Hello world! Foo Bar
HTML:
CSS:#container{ !
border: 1px solid black; height: 25px; width: 20px;
!}
<div id="container"> !Hello world! !</div>
Hello world!
CSS!IS!AWESOME
Pop Quiz!
What happens to a <div> tag's height when I add some text to it?
It expands to conform to the content.!
What happens to a <div> tag's height when I add some text to it?
What happens if the width of a <div> is smaller than a single word?
The text will protrude from the box.!
What happens if the width of a <div> is smaller than a single word?
HTML:
CSS:#container{ !
border: 1px solid black; height: 15px; width: 50px; !
}
<div id="container"> !Hello world! !</div>
Hello world!
HTML:
CSS:#container{ !
border: 1px solid black; height: 15px; width: 50px; overflow: hidden;
}
<div id="container"> !Hello world! !</div>
Hello world!
HTML:
CSS:#container{ !
border: 1px solid black; height: 15px; width: 50px; overflow: hidden;
}
<div id="container"> !Hello world! !</div>
Hello world!
The Box Model
The box model
he l loMargin Border Padding
Width
Box Model
Any padding, borders or margin are in addition to the width of the box.
HTML:
CSS:#container{ width: 960px; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; padding: 5px; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; padding: 5px; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
960px
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; padding: 5px; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
960px
Margins, Padding, Width
he l loMargin Border Padding
Width
Box model
Box model
Box model
Box model
Pop Quiz
What is the width of this box?
he l lo20px 2px 10px
200px
200 pixels
What is the width of this box?
he l lo20px 2px 10px
200px
What is the width and padding combined?
he l lo20px 2px 10px
200px
220 pixels
What is the width and padding combined?
he l lo20px 2px 10px
200px
What is the width and padding and border combined?
he l lo20px 2px 10px
200px
224 pixels
What is the width and padding and border combined?
he l lo20px 2px 10px
200px
What is the total (outer) width?
he l lo20px 2px 10px
200px
200 + 20 + 20 + !10 + 10 + 2 + 2 =!
!
264 pixels
What is the total (outer) width?
he l lo20px 2px 10px
200px
padding and margins
padding:
padding and margins
padding:10px;
padding and marginspadding:10px 5px 1px 0;
padding and marginspadding:10px 5px 1px 0;
top
padding and marginspadding:10px 5px 1px 0;
top right
padding and marginspadding:10px 5px 1px 0;
top right
bottom
padding and marginspadding:10px 5px 1px 0;
top right
bottom
left
padding and marginspadding:10px 5px 1px 0;
top right
bottom
left
padding and margins
margin: 5px 15px 1px 10px;
padding and margins
margin: 5px 15px 1px 10px;
top
padding and margins
margin: 5px 15px 1px 10px;
top right
padding and margins
margin: 5px 15px 1px 10px;
top right bottom
padding and margins
margin: 5px 15px 1px 10px;
top right bottom left
padding and margins
padding:10px 2px;
padding and margins
padding:10px 2px;
top!bottom
padding and margins
padding:10px 2px;
top!bottom
right!left
Pop Quiz
Explain the size of the margins around the box
margin: 5px 25px;
Top and bottom are 5 pixels, !left and right are 25 pixels.!
Explain the size of the margins around the box
margin: 5px 25px;
Explain the size of the padding inside this box
padding: 1px 1px 1px 40px;
Top, right, bottom are 1 pixel,!the left side is 40 pixels
Explain the size of the padding inside this box
padding: 1px 1px 1px 40px;
Explain the size of the margins around the box
margin: 0 5px;
Top, right are 0 pixels,!the left and right side is 5 pixels
Explain the size of the margins around the box
margin: 0 5px;
Explain the size of the padding inside the box
padding: 15px;
All sides are 15 pixels
Explain the size of the padding inside the box
padding: 15px;
bootstrap |ˈbo͞otˌstrap|
!noun !1 a loop at the back of a boot, used to pull it on. !2 Computing [ usu. as modifier ] the technique of starting with existing resources to create something more complex and effective: we see the creative act as a bootstrap process. !!verb (bootstraps, bootstrapping, bootstrapped) [ with obj. ] !1 get (oneself or something) into or out of a situation using existing resources: the company is bootstrapping itself out of a marred financial past. !• start up (an enterprise), esp. one based on the Internet, with minimal resources: they are bootstrapping their stations themselves, not with lots of dot-com venture capital.
Bootstrap
Bootstrap CDN
http://bit.ly/google-bootstrap
Include these <script> and <link> tags in the head of your document. !
You should also include jQuery too.
start with a responsive image
<img src="http://placehold.it/2000x1000" class="img-‐responsive" />
start with a responsive image
<img src="http://placehold.it/2000x1000" class="img-‐responsive" />
add a container
<div class="container"> !
!
!
!
!
</div>
add a container
<div class="container"> !
!
!
!
!
</div>
Grid System
4 col 4 col
4 col
8 col
row
row col 3
row col 3 col 3
row col 3 col 3 col 3
row col 3 col 3 col 3 col 3
row col 3 col 3 col 3 col 3 =12
row col 3 col 3 col 3 col 3
row
=12
row col 3 col 3 col 3 col 3
row col 5
=12
row col 3 col 3 col 3 col 3
row col 5 col 2
=12
row col 3 col 3 col 3 col 3
row col 5 col 2 col 4
=12
row col 3 col 3 col 3 col 3
row col 5 col 2 col 4 col 1
=12
row col 3 col 3 col 3 col 3
row col 5 col 2 col 4 col 1
=12
=12
Nested grids
Row
Nested grids
col 8Row
Nested grids
col 8Row col 4
Nested grids
col 8
Row
Row col 4
Nested grids
col 8
Row
Row col 4
Nested grids
col 8
Row
Row col 4
Nested grids
col 8
Rowcol 4
Row col 4
Nested grids
col 8
Rowcol 4 col 4
Row col 4
Nested grids
col 8
Rowcol 4 col 4 col 4
Row col 4
Nested grids
col 8
Rowcol 4 col 4 col 4
Row col 4
row
row
row
row
col 4
row
row
col 4 col 8
row
row
col 4 col 8
row
row
col 4 col 8
row
row
col 4 col 8
col 4
row
row
col 4 col 8
col 4 col 8
row
row
col 4 col 8
col 4 col 8
col 8
row
row
col 4 col 8
col 4 col 8
col 8 col 4
col 8
col 8 col 4
col 8 col 4
col 8 col 4
col 6
col 8 col 4
col 6 col 6
col 8 col 4
col 6 col 6
col 8 col 4
col 6 col 6
col 4
col 8 col 4
col 6 col 6
col 4 col 4
col 8 col 4
col 6 col 6
col 4 col 4 col 4
Offsets
col 6
col 5 col 2 col 4 col 1
Offsets
col 6
col 5 col 2 col 4 col 1
offset-3
Offsets
col 6
col 5 col 2 col 4 col 1
offset-3
Offsets
col 6
col 5 col 2 col 4 col 1
offset-33 col
Offsets
col 6
col 5 col 2 col 4 col 1
offset-33 col 3 col
Responsiveness
row col 3 col 3 col 3 col 3
Responsiveness
row col 3 col 3 col 3 col 3
Responsiveness
rowcol 3
col 3
col 3
col 3
col 3 col 3 col 3 col 3
col 5 col 2 col 4 col 1
col 3 col 3 col 3 col 3
col 5 col 2 col 4 col 1
Order 1 Order 2 Order 3 Order 4
Order 5 Order 6
Order 7 Order 8
When should they stack?
col-sm-
col-md-
col-lg-
750px
970px
1170px
never
When should they stack?
col-sm-
col-md-
col-lg-
750px
970px
1170px
never
When should they stack?
col-sm-
col-md-
col-lg-
750px
970px
1170px
col-xs- never
Add some rows
<div class="container"> !
!
!
!
!
!
!
!
!
</div>
Add some rows
<div class="container"> !
!
!
!
!
!
!
!
!
</div>
<div class="row"> !
!
</div> !
<div class="row"> !
!
</div>
Add some rows
<div class="container"> !
!
!
!
!
!
!
!
!
</div>
<div class="row"> !
!
</div> !
<div class="row"> !
!
</div>
Add some rows
<div class="container"> !
!
!
!
!
!
!
!
!
</div>
<div class="row"> !
!
</div> !
<div class="row"> !
!
</div>
Add some rows
<div class="row"> !
!
!
!
!
!
!
!
</div>
<div class="col-‐sm-‐8 col-‐sm-‐offset-‐2"> !
</div>