Hammersmith fundamentals   html fundamentals
Upcoming SlideShare
Loading in...5
×
 

Hammersmith fundamentals html fundamentals

on

  • 571 views

 

Statistics

Views

Total Views
571
Views on SlideShare
568
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 3

http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

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

Hammersmith fundamentals   html fundamentals Hammersmith fundamentals html fundamentals Presentation Transcript

  • Hammersmith Fundamentals HTML fundamentals
  • Technology• Editor• Webserver• Browser• Paths & URLs
  • Separate content and layout• HTML, CSS, JS View slide
  • 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> View slide
  • 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
  • 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> 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>
  • Exercise 1. Simple web page 2. Add styles• H1 and couple • Float text left paragraphs • Add styles• Add picture – boarders, margin, sizes, classes
  • Resources• Code Academy• Wikipedia• Mozilla Developer Network• NOT W3Cschools