00-introduction DAD 2015 mix

1.0x

00-introduction DAD 2015 mix

Created 3 years ago

Duration 0:00:00
lesson view count 8
Select the file type you wish to download
Slide Content
  1. Launch Yourself in HTML5

    Slide 1 - Launch Yourself in HTML5

    • Welcome to this Session on Digital Application Development
  2. Slide 2

    • Des Keiher
    • Module Leader
    • Web & Multimedia LecturerSoftware Developer
    • d.keiher@staffs.ac.uk
    • ID Contact Details
  3. ID Contact Details

    Slide 3 - ID Contact Details

    • Anthony Nixon
    • Lecturer
    • A.Nixon@staffs.ac.uk
  4. USING HTML 5

    Slide 4 - USING HTML 5

    • Digital Application Development
    • With Des Keiher
  5. What is  HTML5?

    Slide 5 - What is HTML5?

  6. Keeping Up with the Interactive Media Consumer

    Slide 6 - Keeping Up with the Interactive Media Consumer

    • Interactive media is more prevalent in our culture today because the technologies used to view, interact with, and produce these experiences are now readily available and relatively inexpensive.
    • Immersive 3D animation graphics
    • Voice Activation
    • Touch screens
    • Motion Capturing
    • digital scent
  7. HTML Then and HTML5 Now ?

    Slide 7 - HTML Then and HTML5 Now ?

  8. A book about code that doesn't read like a 1980s VCR manual...It's not just for programmers, it's written and presented to make it easy for designers, bloggers, content and e-commerce managers, marketers to learn about the code used to write web pages...

    Slide 8 - A book about code that doesn't read like a 1980s VCR manual...It's not just for programmers, it's written and presented to make it easy for designers, bloggers, content and e-commerce managers, marketers to learn about the code used to write web pages...

    • HTML & CSS: Design and Build Web Sites Paperback –2011
    • Jon Duckett (Author)
    •  Visit Amazon's Jon Duckett Page
  9. Course Code Samples http://www.htmlandcssbook.com/code-samples/

    Slide 9 - Course Code Samples http://www.htmlandcssbook.com/code-samples/

  10. Jon Duckett (Author)

    Slide 10 - Jon Duckett (Author)

    •  Visit Amazon's Jon Duckett Page
    • JavaScript & JQuery: Interactive Front-end Web Development Paperback – 18 Jul 2014
    • WHO IS THIS BOOK FOR?
    • This book was written for anyone who wants to make their websites a little more interesting, engaging, interactive, or usable. In particular, it is aimed at people who do not have a degree in computer science (well, not yet anyway).
    • If you have ever struggled to get a script working on a web page, wanted to customize a script you have downloaded, or wanted to create your own scripts from scratch, then you are who we were thinking of when we made this book.
    • We can't promise to remove all the jargon that programmers use, but we can try to tell you what it means (with the aid of visual examples and diagrams) so that it doesn’t seem like a foreign language any more.
  11. What is HTML5 and its Technologies ?

    Slide 11 - What is HTML5 and its Technologies ?

  12. Real-world example: Expressive Web

    Slide 12 - Real-world example: Expressive Web

    • http://beta.theexpressiveweb.com
  13. Real-world example: CanvasMol

    Slide 13 - Real-world example: CanvasMol

    • http://alteredqualia.com/canvasmol/
    • Caffeine
  14. https://developer.apple.com/safaridemos/

    Slide 14 - https://developer.apple.com/safaridemos/

  15. https://developer.mozilla.org/en-US/demos/tag/tech:canvas

    Slide 15 - https://developer.mozilla.org/en-US/demos/tag/tech:canvas

  16. Real-world example: Raphaël-JavaScript Library

    Slide 16 - Real-world example: Raphaël-JavaScript Library

    • http://raphaeljs.com
  17. http://www.chromeexperiments.com/arcadefire/

    Slide 17 - http://www.chromeexperiments.com/arcadefire/

  18. http://www.thewildernessdowntown.com

    Slide 18 - http://www.thewildernessdowntown.com

  19. mugtug.com/sketchpad

    Slide 19 - mugtug.com/sketchpad

  20. http://www.pirateslovedaisies.com

    Slide 20 - http://www.pirateslovedaisies.com

  21. What Makes up HTML 5?

    Slide 21 - What Makes up HTML 5?

    • HTML (tags)
    • CSS3
    • (APIs) Application Programming Interfaces
    • JavaScript
    • HTML5
  22. Identifying the Interactive Media Designer/Developer Skillset

    Slide 22 - Identifying the Interactive Media Designer/Developer Skillset

    • Important skills that the interactive media designer or developer need:
    • Know current usability and accessibility standards and practices.
    • Develop excellent graphic design skills.
    • Develop a flexible project vision.
  23. Identifying the Interactive Media Designer/Developer Skillset

    Slide 23 - Identifying the Interactive Media Designer/Developer Skillset

    • Many designers and developers work in teams, where each member of the team has a particular skillset that complements the others.
    • You will learn, in broad strokes, the workflow of an HTML 5 project by a single designer– you!
  24. Questions? Comments?

    Slide 24 - Questions? Comments?

    • We are happy to help you!
  25. Course Weekly Structure Section 1 Week 1

    Slide 28 - Course Weekly Structure Section 1 Week 1

    • What is HTML 5
    • Week1
    • HTML Structure
    • a
    • c
    • HTML Lists
    • b
    • USING Text
    • d
    • HTML Links
  26. What is HTML used for?

    Slide 29 - What is HTML used for?

  27. STRUCTURE

    Slide 30 - STRUCTURE

    • Text
    • Video
    • Tables
    • Links
    • Audio
    • Images
    • Forms
    • Lists
  28. What is CSS used for?

    Slide 31 - What is CSS used for?

  29. LAYOUT

    Slide 32 - LAYOUT

    • PRESENTATION
  30. ACCESSING THE WEB

    Slide 33 - ACCESSING THE WEB

    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
    • .
  31. HOW THE WEB WORKS

    Slide 34 - HOW THE WEB WORKS

    • A user in Vancouver visits airindia.in in Bangalore
  32. HOW THE WEB WORKS

    Slide 35 - HOW THE WEB WORKS

    • A user in Stockholm visits qantas.com.au in Sydney
  33. HOW THE WEB WORKS

    Slide 36 - HOW THE WEB WORKS

    • A user in New York visits google.com in San Francisco
  34. HOW THE WEB WORKS

    Slide 37 - HOW THE WEB WORKS

    • A user in Barcelona visits sony.jp in Tokyo
  35. Slide 38

    • 1
    • You connect to the web via an Internet Service Provider (ISP).
  36. Slide 39

    • 2
    • Your computer contacts a network of servers called Domain Name System (DNS) servers. They return an IP address.
  37. Slide 40

    • 3
    • Your computer uses the number provided by the DNS servers to go to the web server hosting the website you want to visit.
  38. Slide 41

    • 4
    • The web server then sends the page you requested back to your web browser.
  39. Slide 45

    • HOW PAGES USE STRUCTURE
    • HEADLINE
  40. Slide 46

    • HOW PAGES USE STRUCTURE
    • TEXT
  41. Slide 47

    • HOW PAGES USE STRUCTURE
    • IMAGE
  42. Slide 48

    • HOW PAGES USE STRUCTURE
    • SUBHEADING
  43. Slide 49

    • HOW PAGES USE STRUCTURE
    • Digital versions often have similar structure
  44. Slide 50

    • STRUCTURE IN WORD DOCS
    • Headings and subheadings reflect hierarchy of information
  45. Slide 51

    • STRUCTURE IN WORD DOCS
    • Main headingand important informationappear first
  46. Slide 52

    • STRUCTURE IN WORD DOCS
    • The informationis expanded upon and may use subheadings
  47. HTML: PAGE STRUCTURE

    Slide 53 - HTML: PAGE STRUCTURE

    • <html>
    • </html>
    • <body>
    • </body>
    • <h1>This is the Main Heading</h1>
    • <h2>This is a Sub-Heading</h2>
    • <h2>Another Sub-Heading</h2>
    • <p>This text might be an introduction to
    • the rest of the page.</p>
    • <p>Here you can see another.</p>
    • <p>Many long articles have sub-headings
    • to help you follow the structure.</p>
  48. A CLOSER LOOK AT TAGS

    Slide 54 - A CLOSER LOOK AT TAGS

    • OPENING TAG
    • CLOSING TAG
    • CHARACTER
    • CHARACTER
    • LEFT-ANGLE BRACKET
    • RIGHT-ANGLE BRACKET
    • FORWARD SLASH
  49. lang

    Slide 55 - lang

    • lang
    • en-us
    • en-us
    • ATTRIBUTES TELL US MOREABOUT ELEMENTS
    • <a =" ">Paragraph in English</p>
    • ATTRIBUTE
    • NAME
    • ATTRIBUTE
    • VALUE
  50. BODY, HEAD & TITLE

    Slide 56 - BODY, HEAD & TITLE

    • <html>
    • <head>
    • <title>This is the Title of...</title>
    • </head>
    • <body>
    • <h1>This is the Body of the Page</h1>
    • <p>Anything within the body of a web
    • page is displayed in the main
    • browser window.</p>
    • </body>
    • </html>
  51. BODY, HEAD & TITLE

    Slide 57 - BODY, HEAD & TITLE

    • <html>
    • <head>
    • <title>This is the Title of...</title>
    • </head>
    • <body>
    • <h1>This is the Body of the Page</h1>
    • <p>Anything within the body of a web
    • page is displayed in the main
    • browser window.</p>
    • </body>
    • </html>
  52. BODY, HEAD & TITLE

    Slide 58 - BODY, HEAD & TITLE

  53. BODY, HEAD & TITLE

    Slide 59 - BODY, HEAD & TITLE

    • <html>
    • <head>
    • <title>This is the Title of...</title>
    • </head>
    • <body>
    • <h1>This is the Body of the Page</h1>
    • <p>Anything within the body of a web
    • page is displayed in the main
    • browser window.</p>
    • </body>
    • </html>
  54. BODY, HEAD & TITLE

    Slide 60 - BODY, HEAD & TITLE

  55. HTML pages are text documents.

    Slide 61 - HTML pages are text documents.

    • SUMMARY
  56. HTML uses tags, which act like containers and tell you about the information that lies between them.

    Slide 62 - HTML uses tags, which act like containers and tell you about the information that lies between them.

    • SUMMARY
  57. Tags are often referred to as elements.

    Slide 63 - Tags are often referred to as elements.

    • SUMMARY
  58. Tags usually come in pairs. Opening tags denote the start of a piece of content; closing tags denote the end.

    Slide 64 - Tags usually come in pairs. Opening tags denote the start of a piece of content; closing tags denote the end.

    • SUMMARY
  59. Opening tags can carry attributes, which tell us more about the content of that element.

    Slide 65 - Opening tags can carry attributes, which tell us more about the content of that element.

    • SUMMARY
  60. Attributes require a name and a value.

    Slide 66 - Attributes require a name and a value.

    • SUMMARY
  61. To learn HTML you need to know what tags you can use, what they do, and where they can go.

    Slide 67 - To learn HTML you need to know what tags you can use, what they do, and where they can go.

    • SUMMARY
  62. Learning HTML involves...

    Slide 72 - Learning HTML involves...

  63. Learning how these elements are used

    Slide 73 - Learning how these elements are used

    • Learning a list of elements
  64. Slide 74

    • TAGS DESCRIBE CONTENT
    • Creating a page involves adding tags to content
  65. Slide 75

    • TAGS DESCRIBE CONTENT
    • These tags are known as "markup"
  66. There are two types of markup...

    Slide 76 - There are two types of markup...

  67. SEMANTIC

    Slide 77 - SEMANTIC

    • STRUCTURAL
  68. <h1>This is a Main Heading</h1>

    Slide 78 - <h1>This is a Main Heading</h1>

    • <h2>This is a level 2 heading</h2>
    • <h3>This is a level 3 heading</h3>
    • <h4>This is a level 4 heading</h4>
    • <h5>This is a level 5 heading</h5>
    • <h6>This is a level 6 heading</h6>
    • HEADINGS
  69. <p>A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line.</p>

    Slide 80 - <p>A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line.</p>

    • <p>Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading will be one or more paragraphs.</p>
    • PARAGRAPHS
  70. <p>This is how we make a word appear <b>bold</b>.</p><p>This is how we make a word appear <i>italic</i>.</p>

    Slide 82 - <p>This is how we make a word appear <b>bold</b>.</p><p>This is how we make a word appear <i>italic</i>.</p>

    • BOLD & ITALIC
  71. <p>This is how we make a word appear <b>bold</b>.</p><p>This is how we make a word appear <i>italic</i>.</p>

    Slide 83 - <p>This is how we make a word appear <b>bold</b>.</p><p>This is how we make a word appear <i>italic</i>.</p>

    • BOLD & ITALIC
  72. <p>This is how we make a word appear <b>bold</b>.</p><p>This is how we make a word appear <i>italic</i>.</p>

    Slide 84 - <p>This is how we make a word appear <b>bold</b>.</p><p>This is how we make a word appear <i>italic</i>.</p>

    • BOLD & ITALIC
  73. <p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p><p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in2009<sub>1</sub>.</p>

    Slide 86 - <p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p><p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in2009<sub>1</sub>.</p>

    • SUPERSCRIPT & SUBSCRIPT
  74. <p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p><p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in2009<sub>1</sub>.</p>

    Slide 87 - <p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p><p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in2009<sub>1</sub>.</p>

    • SUPERSCRIPT & SUBSCRIPT
  75. <p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p><p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in2009<sub>1</sub>.</p>

    Slide 88 - <p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p><p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in2009<sub>1</sub>.</p>

    • SUPERSCRIPT & SUBSCRIPT
  76. <p>The    moon is       drifting    away     from the  earth.</p>

    Slide 90 - <p>The moon is drifting away from the earth.</p>

    • WHITESPACE IS COLLAPSED
  77. <p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>

    Slide 92 - <p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>

    • LINE BREAKS
  78. <p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>

    Slide 93 - <p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>

    • LINE BREAKS
  79. <p>Venus is the only plant that rotates clockwise</p><hr /><p>Jupiter is bigger than all the other planets combined.</p>

    Slide 95 - <p>Venus is the only plant that rotates clockwise</p><hr /><p>Jupiter is bigger than all the other planets combined.</p>

    • HORIZONTAL RULES
  80. <p>Venus is the only plant that rotates clockwise</p><hr /><p>Jupiter is bigger than all the other planets combined.</p>

    Slide 96 - <p>Venus is the only plant that rotates clockwise</p><hr /><p>Jupiter is bigger than all the other planets combined.</p>

    • HORIZONTAL RULES
  81. VISUAL EDITORS &THEIR CODE VIEWS

    Slide 98 - VISUAL EDITORS &THEIR CODE VIEWS

  82. VISUAL EDITORS &THEIR CODE VIEWS

    Slide 99 - VISUAL EDITORS &THEIR CODE VIEWS

  83. Slide 100

    • SEMANTIC MARKUP
    • WHAT IS IT?
    • Set of elements, for example:
    • The <em> tag adds emphasis
    • <blockquote>contains a quote
    • WHY USE IT?
    • Provides extra information about your content
    • Do NOT use it to alter presentation of those elements
    • APPLICATION
    • Screen readers can add emphasis to words in <em>
    • Search engines can find quotations in <blockquote>
  84. <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

    Slide 101 - <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

    • STRONG & EMPHASIS
  85. <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

    Slide 102 - <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

    • STRONG & EMPHASIS
  86. <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

    Slide 103 - <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

    • STRONG & EMPHASIS
  87. <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

    Slide 104 - <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

    • STRONG & EMPHASIS
  88. <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

    Slide 105 - <p><strong>Beware</strong> pickpockets operate in this area.</p><p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>

    • STRONG & EMPHASIS
  89. <blockquote cite="http://en.wikipedia.org/wiki/  Winnie-the-Pooh"> <p>Did you ever stop to think, and    forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk   to animals. Not many listen though.   That's the problem.</q></p>

    Slide 107 - <blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>

    • QUOTATIONS
  90. <blockquote cite="http://en.wikipedia.org/wiki/  Winnie-the-Pooh"> <p>Did you ever stop to think, and    forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk   to animals. Not many listen though.   That's the problem.</q></p>

    Slide 108 - <blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>

    • QUOTATIONS
  91. <blockquote cite="http://en.wikipedia.org/wiki/  Winnie-the-Pooh"> <p>Did you ever stop to think, and    forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk   to animals. Not many listen though.   That's the problem.</q></p>

    Slide 109 - <blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>

    • QUOTATIONS
  92. <blockquote cite="http://en.wikipedia.org/wiki/  Winnie-the-Pooh"> <p>Did you ever stop to think, and    forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk   to animals. Not many listen though.   That's the problem.</q></p>

    Slide 110 - <blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>

    • QUOTATIONS
  93. <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p><p><acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.</p>

    Slide 112 - <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p><p><acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.</p>

    • ABBREVIATIONS & ACRONYMS
  94. <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p><p><acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.</p>

    Slide 113 - <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p><p><acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.</p>

    • ABBREVIATIONS & ACRONYMS
  95. <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p><p><acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.</p>

    Slide 114 - <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p><p><acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.</p>

    • ABBREVIATIONS & ACRONYMS
  96. <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p><p>A <dfn>black hole</dfn> is a region of space from which nothing, note even light, can escape.</p>

    Slide 116 - <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p><p>A <dfn>black hole</dfn> is a region of space from which nothing, note even light, can escape.</p>

    • CITATIONS & DEFINITIONS
  97. <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p><p>A <dfn>black hole</dfn> is a region of space from which nothing, note even light, can escape.</p>

    Slide 117 - <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p><p>A <dfn>black hole</dfn> is a region of space from which nothing, note even light, can escape.</p>

    • CITATIONS & DEFINITIONS
  98. <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p><p>A <dfn>black hole</dfn> is a region of space from which nothing, note even light, can escape.</p>

    Slide 118 - <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p><p>A <dfn>black hole</dfn> is a region of space from which nothing, note even light, can escape.</p>

    • CITATIONS & DEFINITIONS
  99. <address> <p><a href="homer@example.org">  homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield</p></address>

    Slide 120 - <address> <p><a href="homer@example.org"> homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield</p></address>

    • AUTHOR DETAILS
  100. <address> <p><a href="homer@example.org">  homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield</p></address>

    Slide 121 - <address> <p><a href="homer@example.org"> homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield</p></address>

    • AUTHOR DETAILS
  101. <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p><p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>

    Slide 123 - <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p><p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>

    • CHANGES TO CONTENT
  102. <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p><p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>

    Slide 124 - <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p><p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>

    • CHANGES TO CONTENT
  103. <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p><p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>

    Slide 125 - <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p><p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>

    • CHANGES TO CONTENT
  104. <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p><p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>

    Slide 126 - <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p><p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>

    • CHANGES TO CONTENT
  105. HTML elements are used to describe the structure of the page (e.g. headings, subheadings, paragraphs).

    Slide 128 - HTML elements are used to describe the structure of the page (e.g. headings, subheadings, paragraphs).

    • SUMMARY
  106. They also provide semantic information (e.g. where emphasis is placed, definitions of acronyms, when text is a quotation).

    Slide 129 - They also provide semantic information (e.g. where emphasis is placed, definitions of acronyms, when text is a quotation).

    • SUMMARY
  107. 1. Chop potatoes into quarters2. Simmer in salted water3. Heat milk and butter4. Drain potatoes and mash5. Mix in the milk mixture

    Slide 134 - 1. Chop potatoes into quarters2. Simmer in salted water3. Heat milk and butter4. Drain potatoes and mash5. Mix in the milk mixture

    • THREE LIST TYPES
    • UNORDERED
    • DEFINITION
    • ORDERED
    • • 1kg King Edward potatoes• 100ml milk• 50g salted butter• Freshly grated nutmeg• Salt and pepper to taste
    • Sashimi Sliced raw fishScale A device used to accurately measure weight
  108. <ol>

    Slide 135 - <ol>

    • <li>Chop potatoes into quarters</li>
    • <li>Simmer in salted water for 15-20
    • minutes until tender</li>
    • <li>Heat milk, butter and nutmeg</li>
    • <li>Drain potatoes and mash</li>
    • <li>Mix in the milk texture</li>
    • </ol>
    • ORDERED LISTS (numbered)
  109. <ul>

    Slide 137 - <ul>

    • <li>1kg King Edward potatoes</li> <li>100ml milk</li> <li>50g salted butter</li> <li>Freshly grated nutmeg</li> <li>Salt and pepper to taste</li>
    • </ul>
    • UNORDERED LISTS (bullets)
  110. <dl>

    Slide 139 - <dl>

    • <dt>Sashimi</dt> <dd>Sliced raw fish served
    • with condiments.</dd> <dt>Scale</dt> <dd>Device used to measure the weight of ingredients.</dd> <dd>A technique by which the scales are
    • removed from the skin of fish. </dd></dl>
    • DEFINITION LIST
  111. <ul>

    Slide 141 - <ul>

    • <li>Mousses</li>
    • <li>Pastries</li> <ul>
    • <li>Croissant</li>
    • <li>Milles-feille</li>
    • <li>Palmier</li>
    • <li>Profiteroles</li>
    • </ul>
    • <li>Tarts</li>
    • </ul>
    • NESTED LIST
  112. There are three types of HTML lists: ordered, unordered, and definition.

    Slide 143 - There are three types of HTML lists: ordered, unordered, and definition.

    • SUMMARY
  113. Ordered lists use numbers.

    Slide 144 - Ordered lists use numbers.

    • SUMMARY
  114. Unordered lists use bullets.

    Slide 145 - Unordered lists use bullets.

    • SUMMARY
  115. Definition lists are used to define terminology.

    Slide 146 - Definition lists are used to define terminology.

    • SUMMARY
  116. Lists can be nested inside one another.

    Slide 147 - Lists can be nested inside one another.

    • SUMMARY
  117. WRITING LINKS

    Slide 151 - WRITING LINKS

    • <a href="http://www.imdb.com">IMDB</a>
  118. WRITING LINKS

    Slide 152 - WRITING LINKS

    • <a href="http://www.imdb.com">IMDB</a>
    • THE PAGE THE LINK TAKES YOU TO
  119. WRITING LINKS

    Slide 153 - WRITING LINKS

    • <a href="http://www.imdb.com">IMDB</a>
    • THE PAGE THE LINK TAKES YOU TO
    • THE TEXT THE USER CLICKS ON
  120. <a href="http://www.empireonline.com"> Empire</a>

    Slide 154 - <a href="http://www.empireonline.com"> Empire</a>

    • LINKING TO OTHER SITES
  121. <a href=”index.html”>Home</a><a href=”about.html”>About</a><a href=”movies.html”>Movies</a><a href=”contact.html”>Contact</a>

    Slide 156 - <a href=”index.html”>Home</a><a href=”about.html”>About</a><a href=”movies.html”>Movies</a><a href=”contact.html”>Contact</a>

    • LINKING TO OTHER PAGES
    • ON THE SAME SITE
  122. DIRECTORY

    Slide 158 - DIRECTORY

    • STRUCTURE
    • examplearts
    • index.html
    • movies
    • cinema
    • index.html
    • listings.html
    • reviews.html
    • dvd
    • index.html
    • listings.html
    • reviews.html
    • music
    • index.html
    • listings.html
    • reviews.html
    • theater
    • index.html
    • listings.html
    • reviews.html
  123. DIRECTORY

    Slide 159 - DIRECTORY

    • STRUCTURE
    • examplearts
    • index.html
    • movies
    • cinema
    • index.html
    • listings.html
    • reviews.html
    • dvd
    • index.html
    • listings.html
    • reviews.html
    • music
    • index.html
    • listings.html
    • reviews.html
    • theater
    • index.html
    • listings.html
    • reviews.html
    • ROOT FOLDER
  124. examplearts

    Slide 160 - examplearts

    • index.html
    • movies
    • cinema
    • index.html
    • listings.html
    • reviews.html
    • dvd
    • index.html
    • listings.html
    • reviews.html
    • music
    • index.html
    • listings.html
    • reviews.html
    • theater
    • index.html
    • listings.html
    • reviews.html
    • CHILD
    • DIRECTORY
    • STRUCTURE
  125. examplearts

    Slide 161 - examplearts

    • index.html
    • movies
    • cinema
    • index.html
    • listings.html
    • reviews.html
    • dvd
    • index.html
    • listings.html
    • reviews.html
    • music
    • index.html
    • listings.html
    • reviews.html
    • theater
    • index.html
    • listings.html
    • reviews.html
    • CHILD
    • PARENT
    • DIRECTORY
    • STRUCTURE
  126. examplearts

    Slide 162 - examplearts

    • index.html
    • movies
    • cinema
    • index.html
    • listings.html
    • reviews.html
    • dvd
    • index.html
    • listings.html
    • reviews.html
    • music
    • index.html
    • listings.html
    • reviews.html
    • theater
    • index.html
    • listings.html
    • reviews.html
    • CHILD
    • PARENT
    • GRANDCHILD
    • DIRECTORY
    • STRUCTURE
  127. examplearts

    Slide 163 - examplearts

    • index.html
    • movies
    • cinema
    • index.html
    • listings.html
    • reviews.html
    • dvd
    • index.html
    • listings.html
    • reviews.html
    • music
    • index.html
    • listings.html
    • reviews.html
    • theater
    • index.html
    • listings.html
    • reviews.html
    • CHILD
    • PARENT
    • GRANDPARENT
    • GRANDCHILD
    • DIRECTORY
    • STRUCTURE
  128. examplearts

    Slide 164 - examplearts

    • index.html
    • movies
    • cinema
    • index.html
    • listings.html
    • reviews.html
    • dvd
    • index.html
    • listings.html
    • reviews.html
    • music
    • index.html
    • listings.html
    • reviews.html
    • theater
    • index.html
    • listings.html
    • reviews.html
    • RELATIVE URLS
  129. examplearts

    Slide 165 - examplearts

    • index.html
    • movies
    • cinema
    • index.html
    • listings.html
    • reviews.html
    • dvd
    • index.html
    • listings.html
    • reviews.html
    • music
    • index.html
    • listings.html
    • reviews.html
    • theater
    • index.html
    • listings.html
    • reviews.html
    • SAME
    • reviews.html
    • RELATIVE URLS
  130. examplearts

    Slide 166 - examplearts

    • index.html
    • movies
    • cinema
    • index.html
    • listings.html
    • reviews.html
    • dvd
    • index.html
    • listings.html
    • reviews.html
    • music
    • index.html
    • listings.html
    • reviews.html
    • theater
    • index.html
    • listings.html
    • reviews.html
    • SAME
    • reviews.html
    • CHILD
    • music/index.html
    • RELATIVE URLS
  131. examplearts

    Slide 167 - examplearts

    • index.html
    • movies
    • cinema
    • index.html
    • listings.html
    • reviews.html
    • dvd
    • index.html
    • listings.html
    • reviews.html
    • music
    • index.html
    • listings.html
    • reviews.html
    • theater
    • index.html
    • listings.html
    • reviews.html
    • CHILD
    • music/index.html
    • SAME
    • reviews.html
    • PARENT
    • ../index.html
    • RELATIVE URLS
  132. examplearts

    Slide 168 - examplearts

    • index.html
    • movies
    • cinema
    • index.html
    • listings.html
    • reviews.html
    • dvd
    • index.html
    • listings.html
    • reviews.html
    • music
    • index.html
    • listings.html
    • reviews.html
    • theater
    • index.html
    • listings.html
    • reviews.html
    • PARENT
    • ../index.html
    • GRANDCHILD
    • movies/dvd/index.html
    • RELATIVE URLS
    • CHILD
    • music/index.html
    • SAME
    • reviews.html
  133. examplearts

    Slide 169 - examplearts

    • index.html
    • movies
    • cinema
    • index.html
    • listings.html
    • reviews.html
    • dvd
    • index.html
    • listings.html
    • reviews.html
    • music
    • index.html
    • listings.html
    • reviews.html
    • theater
    • index.html
    • listings.html
    • reviews.html
    • GRANDCHILD
    • movies/dvd/index.html
    • GRANDPARENT
    • ../../index.html
    • RELATIVE URLS
    • PARENT
    • ../index.html
    • CHILD
    • music/index.html
    • SAME
    • reviews.html
  134. <a href="mailto:jon@example.org">Email Jon</a>

    Slide 170 - <a href="mailto:jon@example.org">Email Jon</a>

    • EMAIL LINKS
  135. <a href="mailto:jon@example.org">Email Jon</a>

    Slide 171 - <a href="mailto:jon@example.org">Email Jon</a>

    • EMAIL LINKS
  136. <a href="http://www.imdb.com"   target="_blank">IMDB</a> (opens in a   new window)

    Slide 173 - <a href="http://www.imdb.com" target="_blank">IMDB</a> (opens in a new window)

    • OPENING LINKS INA NEW WINDOW
  137. <a href="http://www.imdb.com"   target="_blank">IMDB</a> (opens in a   new window)

    Slide 174 - <a href="http://www.imdb.com" target="_blank">IMDB</a> (opens in a new window)

    • OPENING LINKS IN A NEW WINDOW
  138. Slide 176

    • <h1 id="top">
    • Film-Making Terms</h2>
    • <a href="#arc-shot">
    • Arc shot</a><br />
    • <a href="#interlude">
    • Interlude</a><br />
    • <a href="#prologue">
    • Prologue</a><br />
    • <h2 id="prologue">
    • Prologue</h2>
    • <a href="#top">Top</a>
    • LINKING TO A SPECIFIC PART OF THE SAME PAGE
  139. <h1 id="top">

    Slide 177 - <h1 id="top">

    • Film-Making Terms</h2>
    • <a href="#arc-shot">
    • Arc shot</a><br />
    • <a href="#interlude">
    • Interlude</a><br />
    • <a href="#prologue">
    • Prologue</a><br />
    • <h2 id="prologue">
    • Prologue</h2>
    • <a href="#top">Top</a>
    • <h1 id="top">
    • Film-Making Terms</h2>
    • <a href="#arc-shot">
    • Arc shot</a><br />
    • <a href="#interlude">
    • Interlude</a><br />
    • <a href="#prologue">
    • Prologue</a><br />
    • <h2 id="prologue">
    • Prologue</h2>
    • <a href="#top">Top</a>
    • LINKING TO A SPECIFIC PART OF THE SAME PAGE
  140. <h1 id="top">

    Slide 178 - <h1 id="top">

    • Film-Making Terms</h2>
    • <a href="#arc-shot">
    • Arc shot</a><br />
    • <a href="#interlude">
    • Interlude</a><br />
    • <a href="#prologue">
    • Prologue</a><br />
    • <h2 id="prologue">
    • Prologue</h2>
    • <a href="#top">Top</a>
    • <h1 id="top">
    • Film-Making Terms</h2>
    • <a href="#arc-shot">
    • Arc shot</a><br />
    • <a href="#interlude">
    • Interlude</a><br />
    • <a href="#prologue">
    • Prologue</a><br />
    • <h2 id="prologue">
    • Prologue</h2>
    • <a href="#top">Top</a>
    • <h1 id="top">
    • Film-Making Terms</h2>
    • <a href="#arc-shot">
    • Arc shot</a><br />
    • <a href="#interlude">
    • Interlude</a><br />
    • <a href="#prologue">
    • Prologue</a><br />
    • <h2 id="prologue">
    • Prologue</h2>
    • <a href="#top">Top</a>
    • LINKING TO A SPECIFIC PART OF THE SAME PAGE
  141. <h1 id="top">

    Slide 179 - <h1 id="top">

    • Film-Making Terms</h2>
    • <a href="#arc-shot">
    • Arc shot</a><br />
    • <a href="#interlude">
    • Interlude</a><br />
    • <a href="#prologue">
    • Prologue</a><br />
    • <h2 id="prologue">
    • Prologue</h2>
    • <a href="#top">Top</a>
    • <h1 id="top">
    • Film-Making Terms</h2>
    • <a href="#arc-shot">
    • Arc shot</a><br />
    • <a href="#interlude">
    • Interlude</a><br />
    • <a href="#prologue">
    • Prologue</a><br />
    • <h2 id="prologue">
    • Prologue</h2>
    • <a href="#top">Top</a>
    • LINKING TO A SPECIFIC PART OF THE SAME PAGE
  142. <h1 id="top">

    Slide 180 - <h1 id="top">

    • Film-Making Terms</h2>
    • <a href="#arc-shot">
    • Arc shot</a><br />
    • <a href="#interlude">
    • Interlude</a><br />
    • <a href="#prologue">
    • Prologue</a><br />
    • <h2 id="prologue">
    • Prologue</h2>
    • <a href="#top">Top</a>
    • <h1 id="top">
    • Film-Making Terms</h2>
    • <a href="#arc-shot">
    • Arc shot</a><br />
    • <a href="#interlude">
    • Interlude</a><br />
    • <a href="#prologue">
    • Prologue</a><br />
    • <h2 id="prologue">
    • Prologue</h2>
    • <a href="#top">Top</a>
    • LINKING TO A SPECIFIC PART OF THE SAME PAGE
  143. Links are created using the <a> element.

    Slide 181 - Links are created using the <a> element.

    • SUMMARY
  144. The <a> element uses the href attribute to indicatethe page you are linking to.

    Slide 182 - The <a> element uses the href attribute to indicatethe page you are linking to.

    • SUMMARY
  145. If you are linking to a page within your own site, it is best to use relative links rather than qualified URLs.

    Slide 183 - If you are linking to a page within your own site, it is best to use relative links rather than qualified URLs.

    • SUMMARY
  146. You can create links to open email programs with an email address in the

    Slide 184 - You can create links to open email programs with an email address in the

    • "to" field.
    • SUMMARY
  147. You can use the id attribute to target elements within a page that can be linked to.

    Slide 185 - You can use the id attribute to target elements within a page that can be linked to.

    • SUMMARY