Your SlideShare is downloading. ×
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,842

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,842
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
    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>
  • 15. or
  • 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

×