1 04-html elements


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

1 04-html elements

  1. 1. HTML Elements<br />Colin Gourlay & Kevin Vanderbeken<br />
  2. 2. Today:<br />Text Elements<br />Lists<br />Links<br />Images<br />
  3. 3. text elements<br />
  4. 4. <h3>There's      a    lot   of    space<br />       in   this        heading</h3><br />...is the same as...<br /><h3>There's a lot of space in this heading</h3><br />
  5. 5. semantic structure<br />
  6. 6. headings<br /><h1> <h2> <h3> <h4> <h5> <h6><br />
  7. 7. <h1>HTML Elements</h1><br /><h2>In This Lesson</h2><br /><h3>Assumed Knowledge</h3><br /><h2>Text Elements</h2><br /><h3>Semantic Structure</h3><br /><h3>Headings</h3><br /><h3>Paragraphs</h3><br /><h3>Common Inline Text Elements</h3><br /><h2>Lists</h2><br />and so on...<br />
  8. 8. paragraphs<br /><p><br />
  9. 9. <p>This is a very short paragraph. It only has two sentences.</p><br />
  10. 10. common inline text elements<br /><em> <strong><br />
  11. 11. <p><em>Please note:</em> the kettle must be unplugged every evening.</p><br />Please note: the kettle must be unplugged every evening.<br />
  12. 12. <p><em>Please note: the kettle <strong>must</strong> be unplugged every evening, otherwise it will explode - <strong>killing us all</strong>.</em></p><br />Please note: the kettle must be unplugged every evening, otherwise it will explode - killing us all.<br />
  13. 13. lists<br />
  14. 14. unordered lists<br /><ul> <li><br />
  15. 15. <ul><li> milk
  16. 16. bread
  17. 17. butter
  18. 18. coffee beans
  19. 19. bread
  20. 20. coffee beans
  21. 21. milk
  22. 22. butter</li></ul>or<br />
  23. 23. <ul><br /><li>bread</li><br /><li>coffee beans</li><br /><li>milk</li><br /><li>butter</li><br /></ul><br />
  24. 24. ordered lists<br /><ol> <li><br />
  25. 25. Gather ingredients<br />Mix ingredients together<br />Place ingredients in a baking dish<br />Bake in oven for an hour<br />Remove from oven<br />Allow to stand for ten minutes<br />Serve<br />
  26. 26. Gather ingredients<br />Bake in oven for an hour<br />Remove from oven<br />Serve<br />Place ingredients in a baking dish<br />Allow to stand for ten minutes<br />Mix ingredients together<br />
  27. 27. <ol><br /><li>Gather ingredients</li><br /> <li>Mix ingredients together</li><br /> <li>Place ingredients in a baking dish</li><br /> <li>Bake in oven for an hour</li><br /> <li>Remove from oven</li><br /> <li>Allow to stand for ten minutes</li><br /> <li>Serve</li><br /></ol><br />
  28. 28. letters<br />Lowercase ascii letters (a, b, c...)<br />Uppercase ascii letters (A, B, C...)<br />Lowercase classical Greek: (έ, ή, ί...)<br />
  29. 29. numbers<br />Decimal numbers (1, 2, 3...)<br />Decimal numbers with leading zeros (01, 02, 03...)<br />Lowercase Roman numerals (i, ii, iii...)<br />Uppercase Roman numerals (I, II, III...)<br />Traditional Georgian numbering (an, ban, gan...)<br />Traditional Armenian numbering (mek, yerku, yerek...)<br />
  30. 30. nested lists<br />
  31. 31. Chapter One<br />Section One<br />Section Two<br />Section Three<br /> Chapter Two<br /> Chapter Three<br />
  32. 32. <ol><br /> <li>Chapter One<ol><br /> <li>Section One</li><br /> <li>Section Two</li><br /> <li>Section Three</li><br /> </ol></li><br /> <li>Chapter Two</li><br /> <li>Chapter Three</li><br /></ol><br />
  33. 33. Links<br /><a href=""> </a><br />
  34. 34. Links (anchor tags):<br />Allows jumping between (x)html documents!<br />Wrapping content or other inline elements with an <a> element and you create an ‘anchor’ point to somewhere else (and link them together).<br /><p>You can search the internet from the <a href=“http://www.google.com">Google</a> homepage.</p><br />
  35. 35. Attributes of Anchors:<br />href - the resource it points to (external document or an anchor ID).<br />id - the anchor ID if the anchor is a target and not a link<br />title - extra information about the external resource.<br />
  36. 36. Attributes of Anchors:<br />Href’s can tell us to link to:<br />Relative links – figured out from the current URL. <br />href=“page.html” would look for that file in the same location of the document.<br />href=“somewhere/page.html” is a subfolder called “somewhere” in the same location of the document you have open.<br />href=“/somewhere/page.html” is a subfolder from the root of the site.<br />Absolute links – figured out from the top level URL. <br />An absolute link defines the location of the document from scratch: The protocol to use to get the document, the server to get it from, the directory it is located in, and the name of the document itself: http://businessfinda.com.au/somewhere/page.html<br />If you specify a different domain name, and are linking to another site, then that’s also known as an external link. <br />
  37. 37. Attributes of Anchors:<br />Href’s can tell us to link to:<br />Fragment Identifiers – Linking to specific things in a page. <br />href=“#in-this-lesson” would look inside the current document for an element with the ID of in-this-lesson.<br />A Fragment Anchor point:<h2>In This Lesson <a id="in-this-lesson">¶</a><br />Linking to that point in the page from another page:<a href="/somepage.html#footer">The footer on some page on this site</a><br />
  38. 38. Attributes of Anchors:<br />Href’s can tell us to link to:<br />Non-HTML Resources – for something completely different. <br />Forms of absolute links which tell the browser to use a different protocol, like mailto. Clicking this would open a compose new email window on most computers (with the address filled in):<a href="mailto:colin.gourlay@apn.com.au">Email Colin</a><br />
  39. 39. Images<br /><imgsrc="" alt="" /><br />
  40. 40. Images:<br />Images might be turned off to save bandwidth on some browsers.<br />Visitors may be visually impaired to a degree.<br />Search engines are picture illiterate.<br />
  41. 41. The img Element:<br /><imgsrc="http://www.lots-of-pictures.com/cat.jpg" alt="Fuzzy orange cat" title="A picture of a cat" /><br />It’s an empty element – self closing tag.<br />src - Image Source - The URL of the image you want to display (quite similar to the href attribute on the a element)<br />alt - Alternative Text - This is displayed instead of the image under certain circumstances.<br />title - Image Title - Extra information about the image. This is displayed as a tooltip when you hover your mouse over the image.<br />
  42. 42. When good img’s go bad<br /><imgsrc="http://www.lots-of-pictures.com/cat.jpg" alt="Fuzzy orange cat" title="A picture of a cat" /><br />Sometimes the image may not be available because it got lost, connection issues, or because of the user agent (normally what we know as the browser).<br />Sometimes you can’t actually see them – Accessibility.<br />In these cases the alt attribute is provided. This is what you keep hearing people call the “alt tags”. It’s alt="" IN an element tag.<br />
  43. 43. The img Element:<br /><a href=“http://www.im-a-cat-site.com"><br /><imgsrc="http://www.lots-of-pictures.com/cat.jpg" alt="Fuzzy orange cat" title="A picture of a cat" /><br /></a><br />You can nest images inside other elements of course... It’s part of the normal document hierarchy.<br />When you want a clickable image, you’re putting an img element inside of an anchor element a!<br />
  44. 44. next week...<br />
  45. 45. Workshop writing HTML<br />OR<br />Styling HTML with CSS<br />