Hammersmith Fundamentals     HTML fundamentals
Technology•   Editor•   Webserver•   Browser•   Paths & URLs
Separate content and layout• HTML, CSS, JS
HTML• H1 – H6  – <h1>big text</h1>• P  – <p>some text</p>• Br  – <br />• Strong and emphasis  – <strong>bold</strong>, <em...
Lists• OL – numbered lists     <ol><li>item1</li>                          <li>item2</li>                          </ol>• ...
Links & Images• A  – <a href=“”>text</a>• Img  – <img src=“” alt=“” />
Box Modelhttp://www.w3.org/TR/CSS2/box.html
ID’s & Class                          <html>• ID => #                          <head>                           <style>   ...
Exercise  1. Simple web page        2. Add styles• H1 and couple        • Float text left  paragraphs           • Add styl...
Resources• Code Academy• Wikipedia• Mozilla Developer Network• NOT W3Cschools
Upcoming SlideShare
Loading in …5
×

Hammersmith fundamentals html fundamentals

680 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Hammersmith fundamentals html fundamentals

  1. 1. Hammersmith Fundamentals HTML fundamentals
  2. 2. Technology• Editor• Webserver• Browser• Paths & URLs
  3. 3. Separate content and layout• HTML, CSS, JS
  4. 4. HTML• H1 – H6 – <h1>big text</h1>• P – <p>some text</p>• Br – <br />• Strong and emphasis – <strong>bold</strong>, <em>italics</em>• Div – <div>blah blah</div>
  5. 5. Lists• OL – numbered lists <ol><li>item1</li> <li>item2</li> </ol>• UL – bullet lists <ul><li>item1</li> <li>item2</li> </ul>• LI – list item
  6. 6. Links & Images• A – <a href=“”>text</a>• Img – <img src=“” alt=“” />
  7. 7. Box Modelhttp://www.w3.org/TR/CSS2/box.html
  8. 8. ID’s & Class <html>• ID => # <head> <style> div { background: #444; – Open per page } color: white;• Class => . div.padded { padding-top: 10px; padding-right: 0px; – Multiple per page padding-bottom: 0.25in; padding-left: 5em; } </style> </head> <body> <div> No padding (but some style added) </div> <br> <div class="padded"> Padded<br> Top: 10px; bottom: 0px<br> Left: 5em; right: 0px </div> </body> </html>
  9. 9. Exercise 1. Simple web page 2. Add styles• H1 and couple • Float text left paragraphs • Add styles• Add picture – boarders, margin, sizes, classes
  10. 10. Resources• Code Academy• Wikipedia• Mozilla Developer Network• NOT W3Cschools

×