html & css 2017
TRANSCRIPT
INTRODUCTIOn
TO HTML
TOOLS OF
THE TRADE
Chrome
Firefox
Safari
Edge & IE
BROWSERS
HANDLING HTML
PROJECT FILES
BUILDING THE
FOUNDATION
HTML BUILDING BLOCKS
<!DOCTYPE html>HTML5 DOCTYPE
<html>html tag
<!DOCTYPE html><html>The rest our our websitewill go here.</html>
<head>head definitions
<!DOCTYPE html><html><head></head></html>
<title>page title
<!DOCTYPE html><html><head><title>Our First Page</title>
</head></html>
<body>document body
<!DOCTYPE html><html><head><title>Our First Page</title>
</head><body>The rest of our website here
</body></html>
<!-- # -->comments
<!DOCTYPE html><html><head><title>Our First Page</title>
</head><body><!-- This is a comment -->The rest of our website here
</body></html>
<h1>heading tags
<h2>heading tags
<h3>heading tags
<h4>heading tags
<h5>heading tags
…<h1>Largest Heading</h1><h2>Largest Heading</h2><h3>Largest Heading</h3><h4>Largest Heading</h4><h5>Largest Heading</h5>…
<p>paragraph tag
…<h1>Our headline</h1><p>Some cool paragraph text.</p><p>Another awesome paragraph with even more text.</p>…
<br>line break
…<h1>Our headline</h1><p>An awesome paragraph with a line <br /> break in it.</p>…
<small>smaller font size
…<h1>Our headline</h1><p>This word will be <small>smaller</small> than the rest.</p>…
element attributes
<a>anchor (link) tag
<a href=“http://google.com”>
anchor (link) tag
…<h1>Our headline</h1><p>This word will be <a href=“https://google.com”>a link</a> to google.com.</p>…
<img>image tag
<img src=“loading.gif”>
image tag
…<h1>Our headline</h1><p>A time machine!</p><img src=“delorean.gif”>…
BUILD TIME
Create a new HTML document that includes:
• Doctype • Head • Title • Body • H1 Headline • H3 Headline • Paragraphs • Bold text • Link to your favorite website • An image
<ul>unordered list
<li>list item
…<ul><li>Apples</li><li>Bananas</li><li>Oranges</li>
</ul>…
INTERMEDIATE
HTML
<div>div containers
…<div>Any HTML content you want to organize in a div container, including more divs.</div>…
<span>span containers
…<div>Any <span>HTML</span> content you want to organize in a div container, including more divs.</div>…
NAMING THINGS
ids
…<div id=“intro”>Some text
</div>…
applied to a singular element
classes
…<div class=“product”>Product 1
</div><div class=“product”>Product 2
</div>…
applied to many elements
semantic web
self documenting
INTRODUCTION
TO CSS
adding style!
inline css
…<div style=“color: red”>Any HTML content you want to organize in a div container, including more divs.</div>…
<style>style tag
…<style>div {color: red;
}</style>…
using .css files
…<head><link rel="stylesheet" href=“css/mystyle.css” media="screen" charset="utf-8"></head>…
html {font-family: arial;
}
body {margin: 0px;padding: 0px;
}
mystyle.css
selectors
element selectors
h2 { … }
li { … }
p { … }
div { … }
body { … }
table { … }
.product { … }
li.product { … }
li .product { … }
class selectors
#intro { … }
div#intro { … }
div #intro { … }
id selectors
#intro ul.products li {/* styles go here */
}
mix and match selectors
css properties
providing structure
height:50px;
width:100px;
margin:5px 5px 5px 5px;
display:inline;
display:block;
display:none;
typography
font-family:helvetica, arial, sans-serif;
font-size:12px;
font-size:12pt;
font-size:1em;
font-size:70%;
font-weight:bold;
font-weight:normal;
text-decoration:underline;
text-decoration:none;
color!
color:black;
color:#000000;
color:#000;
color:rgb(0,0,0);
background-color:
black;
div {height: 50px;width: 100px;color: white;font-size: 16px;background-color: black;
}
putting it all together
introducing thebox model
height
width
margin-top
margin-bottom
margin-rightmar
gin-
left
padding:5px 5px 5px 5px;
div {height: 50px;width: 100px;padding: 5px 10px 5px 10px;margin: 5px 10px 5px 10px;
}
putting it together
5px
50px100px
5px
5px
5px
10px 10px10px 10px
height of elementpadding-toppadding-bottommargin-topmargin-bottomborder-topborder-bottom+actual height
width of elementpadding-leftpadding-rightmargin-leftmargin-rightborder-rightborder-left+actual width
div {margin: top right bottom left;
}
putting it together
div {margin: 5px 10px 5px 10px;
}
div {margin: 5px 10px;
}
shorthand
div {margin: 5px;
}
floats
div {float: left;
}
img {float: right
}
CSS TIPS & TRICKS
BACKGROUND IMAGES
div {
background-image: url(path/to/image.jpg);background-size: cover;background-repeat: no-repeat;
}
BUILD TIME
CSS Layout Exercise
https://github.com/rcacademy/webdevcamp/tree/master/week1/w1d3
CSS RESET
• Resets allow you to set things to make your website look consistent across browsers
• You can add more than one stylesheet to a page
• Alternatively, you can do a normalize.css that sets all of your elements to a common baseline that is not 0.
