HTML and CSS workshop
Download as PPTX, PDF•1 like•533 views
The document is about an HTML and CSS workshop given by Kathryn "Kat" Reeve. It introduces HTML and CSS, covering topics like document structure, tags, attributes, tables, and how CSS works. HTML is described as using tags to define content and structure, while CSS is used to style HTML content using selectors, properties, and values. The workshop provides examples of common tags and attributes in both HTML and CSS.
HTML and CSS workshop
- 1. Girl Geek Afternoon TeaHTML andCSS Workshop
- 2. Girl Geek Afternoon TeaHTML & CSS WorkshopWho Am I?Kathryn “Kat” Reeve a.k.aBinaryKittenGirl Geek
- 3. PHP Web Developer (not Designer)
- 4. Gamer (Console, PC and Tabletop)
- 5. Book Reader (tooo many to list)
- 7. Twitter user (@BinaryKitten)Who Are You?
- 8. Girl Geek Afternoon TeaHTML & CSS WorkshopHTML
- 9. Girl Geek Afternoon TeaHTML & CSS WorkshopWhat is HTML?HyperTextMarkupLanguage Became a standard 2000
- 10. First Conceived by Tim Berners-Lee in 1990
- 11. First mentioned online in 1991
- 12. Current Version 4.01 published 1999 and errorsacknowledge 2001.
- 13. HTML 2.0 completed 1995
- 14. HTML 5 first drafted in January 2008
- 15. HTML 5 is still a Work in ProgressTags that define content. Usually paired with an opening and closing tag <tag></tag>Start with “<“End with “>“Unpaired tags self close - <tag /><html></html>HTML is made up by a few different types of tag.Document StructureHead contentPage content<title>My Site’s Title</title><div></div> <h1></h1>
- 16. Girl Geek Afternoon TeaHTML & CSS WorkshopHTML Document Structure<html> <head> <title>My Webpage</title></head><body> Hi from my Webpage</body></html>Start and end of the documentStart and end of the Head section.The Title TagStart and end of body sectionWeb page Content goes hereDocTypes – What are they and how do you use them?Defines how browsers interpret the page
- 17. Allows for ValidationDOCTYPE HERE<html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE HTML>HTML 5!http://tinyurl.com/geekGirlTea-doctype
- 18. Girl Geek Afternoon TeaHTML & CSS WorkshopTag ExamplesHeading Tagsh1-h6 <ul><li>Item</li> <li>Item</li> <li>Item</li></ul><ol><li>Item</li> <li>Item</li> <li>Item</li></ol>List Tagsul, li and ol, li Item
- 19. Item
- 21. br
- 22. em
- 23. strong
- 24. i
- 25. b
- 26. u
- 28. input
- 29. fieldset
- 30. label
- 31. textarea
- 33. span
- 35. dt, dd, dl
- 36. acronym
- 38. Girl Geek Afternoon TeaHTML & CSS WorkshopHTML TableThe Table Tag - <table></table>Rows - <tr></tr>Cells - <td></td>Headings - <th></th>Table Section Tags<thead></thead> - Headers
- 40. <tbody></tbody> - Body<table><caption>Table’s Caption</caption><thead> <tr> <th>heading</th> <th>heading</th> </tr></thead><tfoot> <tr><td>footer</td><td>footer2</td></tr></tfoot><tbody><tr><td>content</td><td>content</td></tr> <tr><td>content</td><td>content</td></tr> <tr><td>content</td><td>content</td></tr> <tr><td>content</td><td>content</td></tr></tbody></table>http://tinyurl.com/geekGirlTea-tables http://tinyurl.com/geekGirlTea-tables2
- 41. Girl Geek Afternoon TeaHTML & CSS WorkshopTag attributes<tag attribute=“value”></tag>Used for grouping, identification and selection<p id=“name”> - an id is a good thing to have on all unique items.<li class=“name”> - a class is way of grouping non similar items together. Used to show how items relate to each other or the document<thscope=“col”> - scope denotes what the th refers to<label for=“item”>Name:</label><a rel=”friend” href=“website”>text</a>Used to provide needed functionality<a rel=”friend” href=“website”>text</a><input type=“text” name=“item” id=“txt_item” />Used to hold information (html 5) <span data-name=“peter” data-lastname=“pan” />Be careful in your knowledge of what refers to what.<label for=“item”>Name:</label><input type=“text” name=“item” id=“txt_item” />Wrong<label for=“txt_item”>Name:</label><input type=“text” name=“item” id=“txt_item” />Correct
- 42. Girl Geek Afternoon TeaHTML & CSS WorkshopCSS
- 43. Girl Geek Afternoon TeaHTML & CSS WorkshopWhat is CSS?Cascading Style SheetsUses tag names, id and class attributes
- 45. Myriad of properties can be set
- 46. Rules can be overwritten or updated later on
- 47. Different styles can be used for screen and print – the media attribute <style type="text/css">li { border-bottom: 5px solid green; } ulli { border-bottom: 1px dashed red;} </style>This can be in separate file<html><head> <title>Site Title</title><link href="/style.css" media="screen" rel="stylesheet" type="text/css" ><link href="/printStyle.css" media=“print" rel="stylesheet" type="text/css" ></head>
- 48. Girl Geek Afternoon TeaHTML & CSS WorkshopHow Does CSS Work?CSS divided up into Rules
- 49. Rules divided up into selector & property/value pairsli { border-bottom: 5px solid green; } ul li { border-bottom: 1px dashed red;} selectorRuleValuePropertyWhat is a selectorA tag’s id attribute prefixed with # (#id)
- 50. Tag name like ul or li or table
- 51. A tag’s class attribute prefixed with . (.class)How do the rules applyApplied in order of listing
- 52. Each rule has a score
- 53. Higher score = applied firstHow are the scores calculatedTag names (ul / li) score 1
- 54. class names score 10
- 55. IDs score 100Girl Geek Afternoon TeaHTML & CSS WorkshopNotes Onlinehttp://tinyurl.com/geekGirlTea-doctypehttp://tinyurl.com/geekGirlTea-wikiCSShttp://tinyurl.com/geekGirlTea-wikiHTMLhttp://tinyurl.com/geekGirlTea-tables http://tinyurl.com/geekGirlTea-tables2http://tinyurl.com/geekGirlTea-wikiHTML5http://tinyurl.com/geekGirlTea-ictstudenthttp://www.w3schools.com/http://www.w3schools.com/css/default.asp
- 56. Girl Geek Afternoon TeaHTML & CSS Workshop