HTML and CSS workshop
•Download as PPTX, PDF•
1 like•511 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.
![Girl Geek Afternoon Tea HTML & CSS Workshop Who Am I? Kathryn “Kat” Reeve a.k.aBinaryKitten ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
More Related Content
What's hot
What's hot (19)
Similar to HTML and CSS workshop
Similar to HTML and CSS workshop (20)
Recently uploaded
Recently uploaded (20)
HTML and CSS workshop
- 1. Girl Geek Afternoon Tea HTML and CSS Workshop
- 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 Tea HTML & CSS Workshop HTML
- 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 Structure Head content Page content <title>My Site’s Title</title> <div></div> <h1></h1>
- 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
- 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
- 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
- 42. Girl Geek Afternoon Tea HTML & CSS Workshop CSS
- 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>
- 50. Tag name like ul or li or table
- 52. Each rule has a score
- 54. class names score 10
- 56. Girl Geek Afternoon Tea HTML & CSS Workshop