1-04: html elements
DESCRIPTION
TRANSCRIPT
![Page 1: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/1.jpg)
HTML Elements
Colin Gourlay & Kevin Vanderbeken
![Page 2: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/2.jpg)
Today:
Text Elements
Lists
Links
Images
![Page 3: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/3.jpg)
text elements
![Page 4: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/4.jpg)
<h3>There's a lot of space in this heading</h3>
<h3>There's a lot of space in this heading</h3>
...is the same as...
![Page 5: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/5.jpg)
semantic structure
![Page 6: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/6.jpg)
headings
<h1> <h2> <h3> <h4> <h5> <h6>
![Page 7: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/7.jpg)
<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...
![Page 8: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/8.jpg)
paragraphs
<p>
![Page 9: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/9.jpg)
<p>This is a very short paragraph. It only has two sentences.</p>
![Page 10: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/10.jpg)
common inline text elements
<em> <strong>
![Page 11: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/11.jpg)
<p><em>Please note:</em> the kettle must be unplugged every evening.</p>
Please note: the kettle must be unplugged every evening.
![Page 12: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/12.jpg)
<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.
![Page 13: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/13.jpg)
lists
![Page 14: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/14.jpg)
unordered lists
<ul> <li>
![Page 15: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/15.jpg)
• milk• bread• butter• coffee beans
• bread• coffee beans• milk• butter
or
![Page 16: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/16.jpg)
<ul><li>bread</li><li>coffee
beans</li><li>milk</li><li>butter</li>
</ul>
![Page 17: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/17.jpg)
ordered lists
<ol> <li>
![Page 18: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/18.jpg)
1. Gather ingredients2. Mix ingredients together3. Place ingredients in a baking dish4. Bake in oven for an hour5. Remove from oven6. Allow to stand for ten minutes7. Serve
![Page 19: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/19.jpg)
1. Gather ingredients2. Bake in oven for an hour3. Remove from oven4. Serve5. Place ingredients in a baking dish6. Allow to stand for ten minutes7. Mix ingredients together
![Page 20: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/20.jpg)
<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>
![Page 21: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/21.jpg)
Lowercase ascii letters (a, b, c...)Uppercase ascii letters (A, B, C...)Lowercase classical Greek: (έ, ή, ί...)
letters
![Page 22: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/22.jpg)
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...)
numbers
![Page 23: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/23.jpg)
nested lists
![Page 24: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/24.jpg)
1. Chapter Onei. Section Oneii. Section Twoiii. Section Three
2. Chapter Two3. Chapter Three
![Page 25: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/25.jpg)
<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>
![Page 26: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/26.jpg)
Links
<a href=""> </a>
![Page 27: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/27.jpg)
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>
![Page 28: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/28.jpg)
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.
![Page 29: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/29.jpg)
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.
![Page 30: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/30.jpg)
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>
![Page 31: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/31.jpg)
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:[email protected]">Email Colin</a>
![Page 32: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/32.jpg)
Images
<img src="" alt="" />
![Page 33: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/33.jpg)
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.
![Page 34: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/34.jpg)
The img Element:
• 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.
<img src="http://www.lots-of-pictures.com/cat.jpg" alt="Fuzzy orange cat" title="A picture of a cat"
/>
![Page 35: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/35.jpg)
When good img’s go bad
• 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.
<img src="http://www.lots-of-pictures.com/cat.jpg" alt="Fuzzy orange cat" title="A picture of a cat"
/>
![Page 36: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/36.jpg)
The img Element:
• 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!
<a href=“http://www.im-a-cat-site.com">
<img src="http://www.lots-of-pictures.com/cat.jpg" alt="Fuzzy orange cat" title="A picture of a cat" />
</a>
![Page 37: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/37.jpg)
next week...
![Page 38: 1-04: HTML Elements](https://reader033.vdocument.in/reader033/viewer/2022061220/54bb642e4a79596d238b4580/html5/thumbnails/38.jpg)
Workshop writing HTMLOR
Styling HTML with CSS