HTML structures web documents and defines the semantics, or meaning, of content. CSS handles presentation and styling. HTML uses tags to define headings, paragraphs, lists, links and other content. CSS allows styling of elements using selectors, properties and values. External CSS files allow separation of concerns and reuse of styles across pages.

1. (Fast) Introduction to HTML & CSS Dave Kelly ( @davkell ) for @091Labs

2. What are HTML & CSS? HTML structures documents on the web Tells browser what content is (not what it means) CSS = presentation (how things look) JavaScript adds interaction / behaviours Peanut lifted from http://www.alistapart.com/articles/understandingprogressiveenhancement/ Why separate? http://www.ambientage.com/blog/091labs : 1

3. Standards.... define the mark-up you use tell the browser what to do with it HTML 4.01 (Don’t use) xHTML1.0 Frameset (nope) Transitional (nope) Strict * HTML5 (New. Not fully supported / implemented. It’s the future.) All those defined standards....do all browsers work the same?

4. Tools Firefox (wide support for standards) Firebug (Firefox add-on, Chrome also, but weak). Your best friend with front-end web dev. Web Developer Toolbar (Firefox add-on) Validators HTML: http://validator.w3.org CSS: http://jigsaw.w3.org Development environment Netbeans / Aptana for me.... Your choice (not WYSIWYG!!) (My) Development process Firefox -> Webkit (chrome / safari) -> IE8 -> IE7 -> (IE6?) Browsershots.org http://www.ambientage.com/blog/091labs : 2

5. HTML Made up of “tags” (elements) <h1>I’m an important heading</h1> (Heading level 1) <img src=”images/myprofilepic.jpg” alt=”It’s a picture of me!!” /> (Image tag) Elements can contain plain text, other elements, or both No state / no logic (Mark-up content only, not programming) xHTML Strict elements... must be properly nested must be closed must be lower case attributes must have a value

6. HTML Tags Tags are usually paired (e.g..., <h1> and </h1>) Some elements are “self-closing” e.g. <br /> <img … /> Some elements may include attributes, (additional information that is included inside the start tag). Every HTML document contains standard tags. Each document consists of a head and body The head contains the title (and more…), and The body contains the actual text that is made up of paragraphs, lists, images, and other elements

7. Simple HTML Example http://www.ambientage.com/blog/091labs : 3

9. <h1></h1> , <h2> </h2> …… <h6> </h6>

10. Paragraph: <p>Some text </p>

11. Lists

12. Ordered List <ol> <li>I’m a list item</li></ol>

13. Unordered list <ul> <li>I’m a list item</li> </ul>

14. Document Section <div></div> (Important for page layouts!)

15. Image <img src=“../images/mypic.jpg” alt=“My Picture” title=“It’s me!” />

16. Links <a href=“http://www.google.com”>Google</a>

17. Table <table><tr><td>table cell</td></tr> <tr><td>second row cell</td></tr> </table> http://www.ambientage.com/blog/091labs : 4 & 5

19. Most can have:<h1 id=“mainHeading” class=“myHeadingClass” title=“Website title” style=“color: #000000;”>My Heading</h1>

20. HTML Forms Forms are used to accept information from the Web page user 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. To create a form, the <form></form> element is used. Forms have 2 basic attributes: action & method, e.g., <form name=“myForm” action=“processPage.php” method=“post”> action = “where’s the data going?” method = “how’s it getting there? (post vs get)”

21. HTML Forms

22. HTML Forms

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.)

27. The Selector ~ tells the rule what elements it should apply to

28. The Rule ~ does the formatting of the element

29. Made up of a property:value pair

30. The formatting of rules: Selector { property1: value1; property2: value2; propertyN: valueN; } http://www.ambientage.com/blog/091labs : 6

32. p { color: #000000; }

33. Doing this causes all the tags of that name (i.e.<p>) to be formatted according to the style rule declared.

34. Possible to do this for multiple elements

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. Classes are defined using a dot (.) and a given name, e.g.

38. .lightText { color: #ffffff }

39. To use the class in the document:

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. Identifiers are defined using a hash (#) and a given name, e.g.

43. #siteTitle{ font-family: ‘Times New Roman’, serif}

44. To use the class in the document:

46. Internal Style Rules …only apply to the current page… still slightly nightmarish to maintain

48. customise & alter the look of multiple web pages

49. ensure continuity of design throughout the website

50. To link an external style sheet to a HTML page use the <link> tag in the <head> section of the document, e.g.http://www.ambientage.com/blog/091labs : 7

52. @davkell

53. linkedin.com/in/davkell

54. www.ambientage.com

55. www.davidkelly.ie

56. Slides & Footnotes

57. www.ambientage.com/blog/091labs/