HTML for Beginners

400 views

Published on

In this introduction to HTML we start at the very beginning by defining HTML, looking at tags and how we actually use them. We'll learn how to markup paragraphs, bold and italic text, headings, links, images and lists.

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

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

No notes for slide

HTML for Beginners

  1. 1. lunch & learn HTML
  2. 2. this is for you ASK QUESTIONS
  3. 3. MarkupHypertext Language
  4. 4. Markup
  5. 5. content DESCRIBES html
  6. 6. fonts, colours & layout CSS
  7. 7. TAGS
  8. 8. this is a <tag>
  9. 9. <tag>Hello!</tag>
  10. 10. <tag>Hello!</tag> Opening Closing
  11. 11. <tag> not a real tag
  12. 12. <p> paragraph
  13. 13. It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning.
  14. 14. <p>It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning.</p>
  15. 15. <p>It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning.</p> Opening Closing
  16. 16. RECAP
  17. 17. <b> bold <i> italic
  18. 18. <p>It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning.</p>
  19. 19. It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning.
  20. 20. It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning.
  21. 21. <p>It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of <i>golf balls</i> tore onto the scene. Smartphone footage shows sunbathers on the shore of <b>Ob River in Siberia</b> fleeing for shelter as the storm erupts without warning.</p>
  22. 22. It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning.
  23. 23. It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning.
  24. 24. <p>It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of <i><b>golf balls</b></i> tore onto the scene. Smartphone footage shows sunbathers on the shore of <b>Ob River in Siberia</b> fleeing for shelter as the storm erupts without warning.</p>
  25. 25. <p>It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of <b><i>golf balls</i></b> tore onto the scene. Smartphone footage shows sunbathers on the shore of <b>Ob River in Siberia</b> fleeing for shelter as the storm erupts without warning.</p>
  26. 26. It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning.
  27. 27. It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning.
  28. 28. RECAP
  29. 29. <h1> <h2> headings
  30. 30. It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning. Freak Russian Hailstorm Clears Out The Beach
  31. 31. <p>It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of <i>golf balls</i> tore onto the scene. Smartphone footage shows sunbathers on the shore of <b>Ob River in Siberia</b> fleeing for shelter as the storm erupts without warning.</p> <h1>Freak Russian Hailstorm Clears Out The Beach</h1>
  32. 32. It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning. Freak Russian Hailstorm Clears Out The Beach Sunbathers flee the shores
  33. 33. <p>It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of <i>golf balls</i> tore onto the scene. Smartphone footage shows sunbathers on the shore of <b>Ob River in Siberia</b> fleeing for shelter as the storm erupts without warning.</p> <h1>Freak Russian Hailstorm Clears Out The Beach</h1> <h2>Sunbathers flee the shores</h2>
  34. 34. It must have felt like the end of days for these beach goers when a cyclone pelting hailstones the size of golf balls tore onto the scene. Smartphone footage shows sunbathers on the shore of Ob River in Siberia fleeing for shelter as the storm erupts without warning. Freak Russian Hailstorm Clears Out The Beach Sunbathers flee the shores
  35. 35. RECAP
  36. 36. <a> link
  37. 37. <a>Contact Us</a>
  38. 38. <a>Contact Us</a> needs more information
  39. 39. <a href=“”>Contact Us</a> where should the link go?
  40. 40. <a href=“”>Contact Us</a> attribute
  41. 41. <a href=“http://www.coastdigital.co.uk/contact-us”>Contact Us</a>
  42. 42. <a href=“http://www.coastdigital.co.uk/contact-us”>Contact Us</a>
  43. 43. <a href=“http://www.coastdigital.co.uk/contact-us”>Contact Us</a>
  44. 44. RECAP
  45. 45. <img> images
  46. 46. <tag>Hello!</tag> Opening Closing
  47. 47. <img>Hello!</img> we’re not describing text
  48. 48. <img/> self-closing tag
  49. 49. <img/> needs more information
  50. 50. <img src=“”/>
  51. 51. <img src=“”/> attribute
  52. 52. breadcat.jpg
  53. 53. <img src=“”/>
  54. 54. <img src=“breadcat.jpg”/>
  55. 55. <img src=“breadcat.jpg”/>
  56. 56. <img src=“” width=“” height=“” alt=“”/>
  57. 57. <img src=“” width=“” height=“” alt=“”/>
  58. 58. <img src=“” width=“” height=“” alt=“”/>
  59. 59. 640 x 480
  60. 60. 640px 480px
  61. 61. <img src=“” width=“640” height=“480” alt=“”/>
  62. 62. <img src=“” width=“640” height=“480” alt=“”/> screen readers and search engines
  63. 63. <img src=“” width=“640” height=“480” alt=“a cat wearing a bread accessory”/>
  64. 64. <img src=“breadcat.jpg” width=“640” height=“480” alt=“a cat wearing a bread accessory”/>
  65. 65. <img src=“breadcat.jpg” width=“640” height=“480” alt=“a cat wearing a bread accessory”/>
  66. 66. <img src=“breadcat.jpg” width=“640” height=“480” alt=“a cat wearing a bread accessory”/>
  67. 67. <img src=“breadcat.jpg” width=“640” height=“480” alt=“a cat wearing a bread accessory”/>
  68. 68. <img src=“breadcat.jpg” width=“640” height=“480” alt=“a cat wearing a bread accessory”/>
  69. 69. RECAP
  70. 70. <ul> <ol> bullet lists
  71. 71. <ul> unordered list
  72. 72. <ol> ordered list
  73. 73. recipe
  74. 74. <ul>
  75. 75. <ol>
  76. 76. <ol>
  77. 77. <ul> <ol> does changing the order change the meaning?
  78. 78. <li> list item
  79. 79. <li> bullet point
  80. 80. <li>Butter</li>
  81. 81. <ul></ul>
  82. 82. <ul> <li>Butter</li> </ul>
  83. 83. <ul> <li>Butter</li> </ul> opening closing
  84. 84. <ul> <li>Butter</li> </ul> list starts list ends
  85. 85. <ul> <li>Butter</li> </ul>
  86. 86. <ul> <li>Butter</li> <li>Eggs</li> <li>Flour</li> </ul>
  87. 87. <ul> <li>Butter</li> <li>Eggs</li> <li>Flour</li> </ul> list starts list ends
  88. 88. <ul> <li>Butter</li> <li>Eggs</li> <li>Flour</li> </ul> bullet points
  89. 89. <ul> <li>Butter</li> <li>Eggs</li> <li>Flour</li> </ul>
  90. 90. <h1>Shopping List</h1> <ul> <li>Butter</li> <li>Eggs</li> <li>Flour</li> </ul>
  91. 91. Shopping List • Butter • Eggs • Flour
  92. 92. <ol></ol>
  93. 93. <ol> <li>Pre-heat oven</li> <li>Grease cake tins</li> <li>Mix dry ingredients</li> <li>Stir in eggs</li> <li>Pour mixture in tins</li> <li>Bake for 20 mins</li> </ol> list starts list ends
  94. 94. <ol> <li>Pre-heat oven</li> <li>Grease cake tins</li> <li>Mix dry ingredients</li> <li>Stir in eggs</li> <li>Pour mixture in tins</li> <li>Bake for 20 mins</li> </ol>
  95. 95. <h1>Baking Instructions</h1> <ol> <li>Pre-heat oven</li> <li>Grease cake tins</li> <li>Mix dry ingredients</li> <li>Stir in eggs</li> <li>Pour mixture in tins</li> <li>Bake for 20 mins</li> </ol>
  96. 96. Baking Instructions 1. Pre-heat oven 2. Grease cake tins 3. Mix dry ingredients 4. Stir in eggs 5. Pour mixture in tins 6. Bake for 20 mins
  97. 97. RECAP
  98. 98. SUMMARY
  99. 99. this is a <tag>
  100. 100. <p> paragraph
  101. 101. <b> bold <i> italic
  102. 102. <h1> <h2> headings
  103. 103. <a href=“”> link
  104. 104. <img src=“” width=“” height=“” alt=“”/> images
  105. 105. <ul> <ol> lists
  106. 106. THANKS for listening please fill in the survey

×