Barcamp Blackpool HTML workshop

432 views

Published on

Barcamp Blackpool HTML Workshop slides by Samantha Bail @ Manchester Girl Geek Tea Party

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
432
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Barcamp Blackpool HTML workshop

  1. 1. Girl Geek Tea Party v5 HTML Express Intro!Saturday, 3 July 2010
  2. 2. Sooo...Saturday, 3 July 2010
  3. 3. Sooo... • What’s that Girl Geek thingy?Saturday, 3 July 2010
  4. 4. Sooo... • What’s that Girl Geek thingy? • What’s the plan for today?Saturday, 3 July 2010
  5. 5. Sooo... • What’s that Girl Geek thingy? • What’s the plan for today? • Quick intro - view sourceSaturday, 3 July 2010
  6. 6. Sooo... • What’s that Girl Geek thingy? • What’s the plan for today? • Quick intro - view source • HTML skeletonSaturday, 3 July 2010
  7. 7. Sooo... • What’s that Girl Geek thingy? • What’s the plan for today? • Quick intro - view source • HTML skeleton • Some elements...Saturday, 3 July 2010
  8. 8. Sooo... • What’s that Girl Geek thingy? • What’s the plan for today? • Quick intro - view source • HTML skeleton • Some elements... • ... and attributesSaturday, 3 July 2010
  9. 9. HTML what!?Saturday, 3 July 2010
  10. 10. Hyper Text Markup LanguageSaturday, 3 July 2010
  11. 11. Hyper Text Markup Language • Whatever.Saturday, 3 July 2010
  12. 12. Hyper Text Markup Language • Whatever. • View source!!Saturday, 3 July 2010
  13. 13. HTML Tags <h1> </h1>Saturday, 3 July 2010
  14. 14. HTML Tags • Look like this <h1> </h1>Saturday, 3 July 2010
  15. 15. HTML Tags • Looklike this • Opening tag: <h1> </h1>Saturday, 3 July 2010
  16. 16. HTML Tags • Look like this • Opening tag: <h1> • Closing tag: </h1>Saturday, 3 July 2010
  17. 17. HTML Elements <h1>This is a very large heading</h1>Saturday, 3 July 2010
  18. 18. HTML Elements • Have an opening & closing tag <h1>This is a very large heading</h1>Saturday, 3 July 2010
  19. 19. HTML Documents <html> <head> <title>title in browser</title> other stuff that is not visible! </head> <body> all the content goes here! </body> </html>Saturday, 3 July 2010
  20. 20. HTML Documents • Must have a certain structure: <html> <head> <title>title in browser</title> other stuff that is not visible! </head> <body> all the content goes here! </body> </html>Saturday, 3 July 2010
  21. 21. HTML AttributesSaturday, 3 July 2010
  22. 22. HTML Attributes • Can / must occur in a tag:Saturday, 3 July 2010
  23. 23. HTML Attributes • Can / must occur in a tag: <img src=”mypic.jpg” />Saturday, 3 July 2010
  24. 24. HTML Attributes • Can / must occur in a tag: <img src=”mypic.jpg” /> <img src=”mypic.jpg” alt=”lovely picture” />Saturday, 3 July 2010
  25. 25. Most important tags Browser interprets the style!Saturday, 3 July 2010
  26. 26. Most important tags <p> text </p> - Paragraph <br /> - Line break <h1> text </h1> - Heading (up to h6) <img src=”filename.jpg” /> - Image <a href=”http://twitter.com"> text </a> - Link Browser interprets the style!Saturday, 3 July 2010
  27. 27. It’s your turn now. Yay! http://www.w3schools.com/html/html_intro.asp http://www.w3schools.com/tags/default.aspSaturday, 3 July 2010
  28. 28. Thanks :) manchestergirlgeeks@gmail.comSaturday, 3 July 2010

×