HTML CSS Online News Packages
HTML News Packages Lesson
Jan 28, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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>
Related Documents
