Download to read offline
Uploaded byMike Bradshaw
Hammersmith fundamentals html fundamentals
The document provides an overview of HTML fundamentals including common tags like headings, paragraphs, lists, links and images. It discusses separating content and layout using HTML, CSS and JavaScript. Specific HTML tags covered are H1-H6, P, BR, STRONG, EM and DIV. The document also reviews using IDs and classes for styling, and includes an example of adding padding with CSS classes. Resources for further learning include Code Academy, Wikipedia and Mozilla Developer Network.
More Related Content
Similar to Hammersmith fundamentals html fundamentals
Hammersmith fundamentals html fundamentals
- 1. Hammersmith Fundamentals HTML fundamentals
- 2. Technology • Editor • Webserver • Browser • Paths & URLs
- 3. Separate content andlayout • HTML, CSS, JS
- 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. 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. Links & Images •A – <a href=“”>text</a> • Img – <img src=“” alt=“” />
- 7.
- 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. Exercise 1.Simple web page 2. Add styles • H1 and couple • Float text left paragraphs • Add styles • Add picture – boarders, margin, sizes, classes
- 10. Resources • Code Academy •Wikipedia • Mozilla Developer Network • NOT W3Cschools