More Related Content
What's hot (20)
Viewers also liked (10)
Similar to (Fast) Introduction to HTML & CSS (20)
Recently uploaded (20)
(Fast) Introduction to HTML & CSS
- 1. (Fast) Introduction to HTML & CSSDave Kelly ( @davkell )for @091Labs
- 2. What are HTML & CSS?HTML structures documents on the webTells browser what content is (not what it means)CSS = presentation (how things look)JavaScript adds interaction / behavioursPeanut 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 itHTML 4.01 (Don’t use)xHTML1.0Frameset (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. ToolsFirefox (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)ValidatorsHTML: http://validator.w3.orgCSS: http://jigsaw.w3.orgDevelopment environmentNetbeans / Aptana for me.... Your choice (not WYSIWYG!!)(My) Development processFirefox -> Webkit (chrome / safari) -> IE8 -> IE7 -> (IE6?)Browsershots.orghttp://www.ambientage.com/blog/091labs : 2
- 5. HTMLMade 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 bothNo state / no logic (Mark-up content only, not programming)xHTML Strict elements...must be properly nestedmust be closedmust be lower caseattributes must have a value
- 6. HTML TagsTags 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
- 8. Some HTML tag examplesHeadings
- 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!” />
- 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
- 18. Some HTML attribute examplesHTML tags can have attributes => give some more info about the tag
- 19. Most can have:<h1 id=“mainHeading” class=“myHeadingClass” title=“Website title” style=“color: #000000;”>My Heading</h1>
- 20. HTML FormsForms are used to accept information from the Web page userForms 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
- 23. CSS (Cascading Style Sheets)Handles presentation of web page
- 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. There are 3 ways document styles can be defined: 1. Inline (No!)2. Internal (ehhhm….no)External (Yes!)Concept of the “Cascade”
- 26. If a duplicate style is declared, it “cascades” through various layers, each overriding the previous…The CascadeThe LayersUser agent settings (default browser styles - user is usually able to modify some of these)Any External (Linked) style sheets (.css file)Any Internal styles (in head section inside <style> tags)Inline Styles (in the style attribute of an element)Each level of style overrides the previous level where duplicate properties are definedCreating Style RulesThere are 2 pieces to each rule:
- 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
- 31. Selectors: Match by ElementEasiest selector method is to use an element name, e.g.
- 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
- 35. h1, h2, h5, p { colour: #ff0000;}Selectors: Match by ClassUsed to display elements of the same type in different ways, e.g.
- 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:
- 40. <p class=“lightText”>This is white text</p>Selectors: Match by IdentifierUsed to display a specific element in a different way, e.g.
- 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:
- 45. <h1 id=“siteTitle”>My Site Name</h1>Inline Style Rules…only apply to the current element…Overrides other styles if duplicates declared (because of the cascade)Maintenance nightmare
- 46. Internal Style Rules…only apply to the current page…still slightly nightmarish to maintain
- 47. External Style Sheets (.css)These allow you to…
- 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
- 51. Link StylesPseudo-classes are identifiers understood by the browser to apply to a subset of elements, without the element needing to be explicitly tagged with the styleQuestions?Get in touch… [email protected]
- 52. @davkell