1. HTML Elements Colin Gourlay & Kevin Vanderbeken

2. Today: Text Elements Lists Links Images

3. text elements

4. <h3>There's a lot of space in this heading</h3> ...is the same as... <h3>There's a lot of space in this heading</h3>

5. semantic structure

6. headings <h1> <h2> <h3> <h4> <h5> <h6>

7. <h1>HTML Elements</h1> <h2>In This Lesson</h2> <h3>Assumed Knowledge</h3> <h2>Text Elements</h2> <h3>Semantic Structure</h3> <h3>Headings</h3> <h3>Paragraphs</h3> <h3>Common Inline Text Elements</h3> <h2>Lists</h2> and so on...

8. paragraphs <p>

9. <p>This is a very short paragraph. It only has two sentences.</p>

10. common inline text elements <em> <strong>

11. <p><em>Please note:</em> the kettle must be unplugged every evening.</p> Please note: the kettle must be unplugged every evening.

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> Please note: the kettle must be unplugged every evening, otherwise it will explode - killing us all.

13. lists

14. unordered lists <ul> <li>

16. bread

17. butter

18. coffee beans

19. bread

20. coffee beans

21. milk

22. butteror

23. <ul> <li>bread</li> <li>coffee beans</li> <li>milk</li> <li>butter</li> </ul>

24. ordered lists <ol> <li>

25. Gather ingredients Mix ingredients together Place ingredients in a baking dish Bake in oven for an hour Remove from oven Allow to stand for ten minutes Serve

26. Gather ingredients Bake in oven for an hour Remove from oven Serve Place ingredients in a baking dish Allow to stand for ten minutes Mix ingredients together

27. <ol> <li>Gather ingredients</li> <li>Mix ingredients together</li> <li>Place ingredients in a baking dish</li> <li>Bake in oven for an hour</li> <li>Remove from oven</li> <li>Allow to stand for ten minutes</li> <li>Serve</li> </ol>

28. letters Lowercase ascii letters (a, b, c...) Uppercase ascii letters (A, B, C...) Lowercase classical Greek: (έ, ή, ί...)

29. numbers Decimal numbers (1, 2, 3...) Decimal numbers with leading zeros (01, 02, 03...) Lowercase Roman numerals (i, ii, iii...) Uppercase Roman numerals (I, II, III...) Traditional Georgian numbering (an, ban, gan...) Traditional Armenian numbering (mek, yerku, yerek...)

30. nested lists

31. Chapter One Section One Section Two Section Three Chapter Two Chapter Three

32. <ol> <li>Chapter One<ol> <li>Section One</li> <li>Section Two</li> <li>Section Three</li> </ol></li> <li>Chapter Two</li> <li>Chapter Three</li> </ol>

33. Links <a href=""> </a>

34. Links (anchor tags): Allows jumping between (x)html documents! Wrapping content or other inline elements with an <a> element and you create an ‘anchor’ point to somewhere else (and link them together). <p>You can search the internet from the <a href=“http://www.google.com">Google</a> homepage.</p>

35. Attributes of Anchors: href - the resource it points to (external document or an anchor ID). id - the anchor ID if the anchor is a target and not a link title - extra information about the external resource.

36. Attributes of Anchors: Href’s can tell us to link to: Relative links – figured out from the current URL. href=“page.html” would look for that file in the same location of the document. href=“somewhere/page.html” is a subfolder called “somewhere” in the same location of the document you have open. href=“/somewhere/page.html” is a subfolder from the root of the site. Absolute links – figured out from the top level URL. 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 If you specify a different domain name, and are linking to another site, then that’s also known as an external link.

37. Attributes of Anchors: Href’s can tell us to link to: Fragment Identifiers – Linking to specific things in a page. href=“#in-this-lesson” would look inside the current document for an element with the ID of in-this-lesson. A Fragment Anchor point:<h2>In This Lesson <a id="in-this-lesson">¶</a> Linking to that point in the page from another page:<a href="/somepage.html#footer">The footer on some page on this site</a>

38. Attributes of Anchors: Href’s can tell us to link to: Non-HTML Resources – for something completely different. 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>

39. Images <imgsrc="" alt="" />

40. Images: Images might be turned off to save bandwidth on some browsers. Visitors may be visually impaired to a degree. Search engines are picture illiterate.

41. The img Element: <imgsrc="http://www.lots-of-pictures.com/cat.jpg" alt="Fuzzy orange cat" title="A picture of a cat" /> It’s an empty element – self closing tag. src - Image Source - The URL of the image you want to display (quite similar to the href attribute on the a element) alt - Alternative Text - This is displayed instead of the image under certain circumstances. title - Image Title - Extra information about the image. This is displayed as a tooltip when you hover your mouse over the image.

42. When good img’s go bad <imgsrc="http://www.lots-of-pictures.com/cat.jpg" alt="Fuzzy orange cat" title="A picture of a cat" /> 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). Sometimes you can’t actually see them – Accessibility. 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.

43. The img Element: <a href=“http://www.im-a-cat-site.com"> <imgsrc="http://www.lots-of-pictures.com/cat.jpg" alt="Fuzzy orange cat" title="A picture of a cat" /> </a> You can nest images inside other elements of course... It’s part of the normal document hierarchy. When you want a clickable image, you’re putting an img element inside of an anchor element a!

44. next week...

45. Workshop writing HTML OR Styling HTML with CSS