Intro to HTML & CSS
Upcoming SlideShare
Loading in...5
×
 

Intro to HTML & CSS

on

  • 479 views

Slides from the Reno Collective University introduction to HTML & CSS workshop.

Slides from the Reno Collective University introduction to HTML & CSS workshop.

Statistics

Views

Total Views
479
Views on SlideShare
479
Embed Views
0

Actions

Likes
0
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intro to HTML & CSS Intro to HTML & CSS Presentation Transcript

  • WEB 101HTML & CSS
  • TOOLS OFTHE TRADE
  • CODA
  • TEXT WRANGLER
  • TExTMATE
  • EXPRESSION WEB
  • DREAMWEAVER
  • BROWSERS the big four
  • BUILDINGTHE FOUNDATION
  • HTMLbuilding blocks
  • <html> html tag
  • <html></html>
  • <head>head definitions
  • <html> <head> </head></html>
  • <title> page title
  • <html> <head> <title>Our Page</title> </head></html>
  • <body>document body
  • <html> <head> <title>Our Page</title> </head> <body> </body></html>
  • <!-- # --> comments
  • <html> <head> <title>Our Page</title> </head> <body> <!-- code body here --> </body></html>
  • <p>paragraph tag
  • <p>My paragraph</p>
  • <br>line break
  • <br /> line break
  • <p>My<br /> paragraph</p>
  • <h1>heading tag
  • <h2>heading tag
  • <h3>heading tag
  • <h4>heading tag
  • <h5>heading tag
  • <h1> Important heading</h1><h3> Less important heading</h3>
  • <small>small font style tag
  • <p> Some text <small> some smaller text </small></p>
  • <div>division/container tag
  • <div> <h3>My section</h3> <p>Lorem ipsum</p></div>
  • <span>inline container
  • <p> Some<span>thing</span></p>
  • BUILD TIME
  • <ul>unordered list
  • <li>list item
  • <ul> <li>item 1</li> <li>item 2</li></ul>
  • <table>table definition
  • <thead> table header
  • <th>table header cell
  • <tbody> table body
  • <tr>table row
  • <td>table cell
  • <tfoot> table footer
  • <table> <thead> <th>Name</th> <th>Price</th> </thead> <tbody> <tr> <td>Latte</td> <td>$3.95</td> </tr> </tbody></table>
  • NAMINGCONVENTION
  • ids
  • singular
  • <div id = “intro”> Some text</div>
  • classes
  • many
  • <div class = “product”> Some text</div>
  • SEMANTIC WEB
  • less > MORE
  • SELFdocumenting
  • BUILD TIME
  • ADDING STYLE
  • stylesheets
  • .css files
  • selectors
  • h2 { ... }li { ... }p { ... }by element
  • .products { ... }li.products { ... }li .products { ... } by class
  • #intro { ... }div#intro { ... }div #intro { ... } by ID
  • #intro ul.products li{ ... } mix and match
  • style options
  • structure
  • height 50px;
  • width: 100px;
  • margin:5px 5px 5px 5px
  • WAIT!
  • introducing the box model
  • margin padding height width
  • padding: 5px 5px 5px 5px
  • div { height: 50px; width: 100px; padding: 5px 10px 5px 10px; margin: 5px 10px 5px 10px;}
  • 5px 5px10px 10px 50px 10px 10px 100px 5px 5px
  • HEIGHTHeight + padding-top + padding-bottom + margin-top + margin-bottom 50px + 5px + 5px + 5px + 5px = 70px WIDTHWidth + padding-left + padding-right + margin-left + margin-right50px + 10px + 10px + 10px + 10px = 90px
  • div { margin: top right bottom left;}div { margin: 5px 10px 5px 10px;}
  • Shorthanddiv { margin: 5px 10px;}div { margin: 5px;}
  • OK!
  • BUILD TIME
  • FLOATS
  • div { float: left;}div { float: right;}
  • fonts
  • 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;
  • BUILD TIME