Embed Size (px)
DESCRIPTION
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.
Citation preview
lunch & learnHTML
this is for youASK QUESTIONS
MarkupHypertext Language
Markup
contentDESCRIBES
html
fonts, colours & layoutCSS
TAGS
this is a<tag>
<tag>Hello!</tag>
<tag>Hello!</tag>
Opening Closing
<tag>not a real tag
<p>paragraph
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>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>
<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
RECAP
<b>bold
<i>italic
<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>
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.
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>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>
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.
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>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>
<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>
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.
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.
RECAP
<h1> <h2>headings
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
<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>
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
<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>
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
RECAP
<a>link
<a>Contact Us</a>
<a>Contact Us</a>needs more information
<a href=“”>Contact Us</a>
where should the link go?
<a href=“”>Contact Us</a>
attribute
<a href=“http://www.coastdigital.co.uk/contact-us”>Contact Us</a>
<a href=“http://www.coastdigital.co.uk/contact-us”>Contact Us</a>
<a href=“http://www.coastdigital.co.uk/contact-us”>Contact Us</a>
RECAP
<img>images
<tag>Hello!</tag>
Opening Closing
<img>Hello!</img>
we’re not describing text
<img/>self-closing tag
<img/>needs more information
<img src=“”/>
<img src=“”/>
attribute
breadcat.jpg
<img src=“”/>
<img src=“breadcat.jpg”/>
<img src=“breadcat.jpg”/>
<img src=“” width=“” height=“” alt=“”/>
<img src=“” width=“” height=“” alt=“”/>
<img src=“” width=“” height=“” alt=“”/>
640 x 480
640px
480px
<img src=“” width=“640” height=“480” alt=“”/>
<img src=“” width=“640” height=“480” alt=“”/>
screen readers and search engines
<img src=“” width=“640” height=“480” alt=“a cat wearing a bread accessory”/>
<img src=“breadcat.jpg” width=“640” height=“480” alt=“a cat wearing a bread accessory”/>
<img src=“breadcat.jpg” width=“640” height=“480” alt=“a cat wearing a bread accessory”/>
<img src=“breadcat.jpg” width=“640” height=“480” alt=“a cat wearing a bread accessory”/>
<img src=“breadcat.jpg” width=“640” height=“480” alt=“a cat wearing a bread accessory”/>
<img src=“breadcat.jpg” width=“640” height=“480” alt=“a cat wearing a bread accessory”/>
RECAP
<ul> <ol>bullet lists
<ul>unordered list
<ol>ordered list
recipe
<ul>
<ol>
<ol>
<ul> <ol>does changing the order change the meaning?
<li>list item
<li>bullet point
<li>Butter</li>
<ul></ul>
<ul> <li>Butter</li> </ul>
<ul> <li>Butter</li> </ul>
opening
closing
<ul> <li>Butter</li> </ul>
list starts
list ends
<ul> <li>Butter</li> </ul>
<ul> <li>Butter</li> <li>Eggs</li> <li>Flour</li> </ul>
<ul> <li>Butter</li> <li>Eggs</li> <li>Flour</li> </ul>
list starts
list ends
<ul> <li>Butter</li> <li>Eggs</li> <li>Flour</li> </ul>
bullet points
<ul> <li>Butter</li> <li>Eggs</li> <li>Flour</li> </ul>
<h1>Shopping List</h1> <ul> <li>Butter</li> <li>Eggs</li> <li>Flour</li> </ul>
Shopping List• Butter • Eggs • Flour
<ol></ol>
<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
<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>
<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>
Baking Instructions1. 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
RECAP
SUMMARY
this is a<tag>
<p>paragraph
<b>bold
<i>italic
<h1> <h2>headings
<a href=“”>link
<img src=“” width=“” height=“” alt=“”/>
images
<ul> <ol>lists
THANKSfor listeningplease fill in the survey
