Your SlideShare is downloading. ×
0
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
1 04-html elements
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

1 04-html elements

2,856

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,856
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML Elements<br />Colin Gourlay & Kevin Vanderbeken<br />
  • 2. Today:<br />Text Elements<br />Lists<br />Links<br />Images<br />
  • 3. text elements<br />
  • 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. semantic structure<br />
  • 6. headings<br /><h1> <h2> <h3> <h4> <h5> <h6><br />
  • 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. paragraphs<br /><p><br />
  • 9. <p>This is a very short paragraph. It only has two sentences.</p><br />
  • 10. common inline text elements<br /><em> <strong><br />
  • 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. <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. lists<br />
  • 14. unordered lists<br /><ul> <li><br />
  • 15. <ul><li> milk
  • 16. bread
  • 17. butter
  • 18. coffee beans
  • 19. bread
  • 20. coffee beans
  • 21. milk
  • 22. butter</li></ul>or<br />
  • 23. <ul><br /><li>bread</li><br /><li>coffee beans</li><br /><li>milk</li><br /><li>butter</li><br /></ul><br />
  • 24. ordered lists<br /><ol> <li><br />
  • 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. 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. <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. letters<br />Lowercase ascii letters (a, b, c...)<br />Uppercase ascii letters (A, B, C...)<br />Lowercase classical Greek: (έ, ή, ί...)<br />
  • 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. nested lists<br />
  • 31. Chapter One<br />Section One<br />Section Two<br />Section Three<br /> Chapter Two<br /> Chapter Three<br />
  • 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. Links<br /><a href=""> </a><br />
  • 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. 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. 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. 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. 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. Images<br /><imgsrc="" alt="" /><br />
  • 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. 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. 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. 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. next week...<br />
  • 45. Workshop writing HTML<br />OR<br />Styling HTML with CSS<br />

×