html for beginners

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