(Fast) Introduction to HTML & CSS


Published on

for @091Labs

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

(Fast) Introduction to HTML & CSS

  1. 1. (Fast) Introduction to HTML & CSS<br />Dave Kelly ( @davkell )<br />for @091Labs<br />
  2. 2. What are HTML & CSS?<br />HTML structures documents on the web<br />Tells browser what content is (not what it means)<br />CSS = presentation (how things look)<br />JavaScript adds interaction / behaviours<br />Peanut lifted from http://www.alistapart.com/articles/understandingprogressiveenhancement/<br />Why separate?<br />http://www.ambientage.com/blog/091labs : 1<br />
  3. 3. Standards.... <br />define the mark-up you use <br />tell the browser what to do with it<br />HTML 4.01 (Don’t use)<br />xHTML1.0<br />Frameset (nope)<br />Transitional (nope)<br />Strict *<br />HTML5 (New. Not fully supported / implemented. It’s the future.)<br />All those defined standards....do all browsers work the same?<br />
  4. 4. Tools<br />Firefox (wide support for standards)<br />Firebug (Firefox add-on, Chrome also, but weak). Your best friend with front-end web dev.<br />Web Developer Toolbar (Firefox add-on)<br />Validators<br />HTML: http://validator.w3.org<br />CSS: http://jigsaw.w3.org<br />Development environment<br />Netbeans / Aptana for me.... Your choice (not WYSIWYG!!)<br />(My) Development process<br />Firefox -> Webkit (chrome / safari) -> IE8 -> IE7 -> (IE6?)<br />Browsershots.org<br />http://www.ambientage.com/blog/091labs : 2<br />
  5. 5. HTML<br />Made up of “tags”  (elements)<br /><h1>I’m an important heading</h1> (Heading level 1)  <br /><img src=”images/myprofilepic.jpg” alt=”It’s a picture of me!!” /> (Image tag)<br />Elements can contain plain text, other elements, or both<br />No state / no logic (Mark-up content only, not programming)<br />xHTML Strict elements...<br />must be properly nested<br />must be closed<br />must be lower case<br />attributes must have a value<br />
  6. 6. HTML Tags<br />Tags are usually paired (e.g..., <h1> and </h1>) <br />Some elements are “self-closing” e.g. <br /> <img … /><br />Some elements may include attributes, (additional information that is included inside the start tag).<br />Every HTML document contains standard tags. <br />Each document consists of a head and body <br />The head contains the title (and more…), and <br />The body contains the actual text that is made up of paragraphs, lists, images, and other elements<br />
  7. 7. Simple HTML Example<br />http://www.ambientage.com/blog/091labs : 3<br />
  8. 8. Some HTML tag examples<br /><ul><li>Headings
  9. 9. <h1></h1> , <h2> </h2> …… <h6> </h6>
  10. 10. Paragraph: <p>Some text </p>
  11. 11. Lists
  12. 12. Ordered List <ol> <li>I’m a list item</li></ol>
  13. 13. Unordered list <ul> <li>I’m a list item</li> </ul>
  14. 14. Document Section <div></div> (Important for page layouts!)
  15. 15. Image <img src=“../images/mypic.jpg” alt=“My Picture” title=“It’s me!” />
  16. 16. Links <a href=“http://www.google.com”>Google</a>
  17. 17. Table <table><tr><td>table cell</td></tr></li></ul> <tr><td>second row cell</td></tr><br /> </table><br />http://www.ambientage.com/blog/091labs : 4 & 5<br />
  18. 18. Some HTML attribute examples<br /><ul><li>HTML tags can have attributes => give some more info about the tag
  19. 19. Most can have:</li></ul><h1 id=“mainHeading” class=“myHeadingClass” title=“Website title” style=“color: #000000;”>My Heading</h1><br />
  20. 20. HTML Forms<br />Forms are used to accept information from the Web page user<br />Forms can use text boxes, password boxes, check boxes, radio buttons, text areas, drop-down lists, hidden fields, as well as Submit and Clear buttons.<br />To create a form, the <form></form> element is used.<br />Forms have 2 basic attributes: action & method, e.g.,<br /> <form name=“myForm” action=“processPage.php” method=“post”><br />action = “where’s the data going?”<br />method = “how’s it getting there? (post vs get)”<br />
  21. 21. HTML Forms<br />
  22. 22. HTML Forms<br />
  23. 23. CSS (Cascading Style Sheets)<br /><ul><li>Handles presentation of web page
  24. 24. It allows document authors to specify the look of a web page (e.g. fonts, spacing, margins,etc.) separately from the structure of the web page (e.g. body, text, links, etc.)
  25. 25. There are 3 ways document styles can be defined: </li></ul>1. Inline (No!)<br />2. Internal (ehhhm….no)<br />External (Yes!)<br /><ul><li>Concept of the “Cascade”
  26. 26. If a duplicate style is declared, it “cascades” through various layers, each overriding the previous…</li></li></ul><li>The Cascade<br /><ul><li>The Layers</li></ul>User agent settings (default browser styles - user is usually able to modify some of these)<br />Any External (Linked) style sheets (.css file)<br />Any Internal styles (in head section inside <style> tags)<br />Inline Styles (in the style attribute of an element)<br /><ul><li>Each level of style overrides the previous level where duplicate properties are defined</li></li></ul><li>Creating Style Rules<br /><ul><li>There are 2 pieces to each rule:
  27. 27. The Selector ~ tells the rule what elements it should apply to
  28. 28. The Rule ~ does the formatting of the element
  29. 29. Made up of a property:value pair
  30. 30. The formatting of rules:</li></ul> Selector { property1: value1;<br />property2: value2;<br /> propertyN: valueN;<br />}<br />http://www.ambientage.com/blog/091labs : 6<br />
  31. 31. Selectors: Match by Element<br /><ul><li>Easiest selector method is to use an element name, e.g.
  32. 32. p { color: #000000; }
  33. 33. Doing this causes all the tags of that name (i.e.<p>) to be formatted according to the style rule declared.
  34. 34. Possible to do this for multiple elements
  35. 35. h1, h2, h5, p { colour: #ff0000;}</li></li></ul><li>Selectors: Match by Class<br /><ul><li>Used to display elements of the same type in different ways, e.g.
  36. 36. If the page you’re working with has 2 colours in its background, you need to put light text on the dark background, and dark text on the light background
  37. 37. Classes are defined using a dot (.) and a given name, e.g.
  38. 38. .lightText { color: #ffffff }
  39. 39. To use the class in the document:
  40. 40. <p class=“lightText”>This is white text</p></li></li></ul><li>Selectors: Match by Identifier<br /><ul><li>Used to display a specific element in a different way, e.g.
  41. 41. If you need an element on a page presented in a particular way, you can use an Identifier (remember an element’s id attribute is unique to a page)
  42. 42. Identifiers are defined using a hash (#) and a given name, e.g.
  43. 43. #siteTitle{ font-family: ‘Times New Roman’, serif}
  44. 44. To use the class in the document:
  45. 45. <h1 id=“siteTitle”>My Site Name</h1></li></li></ul><li>Inline Style Rules<br />…only apply to the current element…<br />Overrides other styles if duplicates declared (because of the cascade)<br />Maintenance nightmare<br />
  46. 46. Internal Style Rules<br />…only apply to the current page…<br />still slightly nightmarish to maintain<br />
  47. 47. External Style Sheets (.css)<br /><ul><li>These allow you to…
  48. 48. customise & alter the look of multiple web pages
  49. 49. ensure continuity of design throughout the website
  50. 50. To link an external style sheet to a HTML page use the <link> tag in the <head> section of the document, e.g.</li></ul>http://www.ambientage.com/blog/091labs : 7<br />
  51. 51. Link Styles<br /><ul><li>Pseudo-classes are identifiers understood by the browser to apply to a subset of elements, without the element needing to be explicitly tagged with the style</li></li></ul><li>Questions?<br />Get in touch…<br /><ul><li> dkelly@ambientage.com
  52. 52. @davkell
  53. 53. linkedin.com/in/davkell
  54. 54. www.ambientage.com
  55. 55. www.davidkelly.ie
  56. 56. Slides & Footnotes
  57. 57. www.ambientage.com/blog/091labs/</li>