HTML Elements

Colin Gourlay & Kevin Vanderbeken

Today:

Text Elements

Lists

Links

Images

text elements

<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...

semantic structure

headings

<h1> <h2> <h3> <h4> <h5> <h6>

<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...

paragraphs

<p>

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

common inline text elements

<em> <strong>

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

Please note: the kettle must be unplugged every evening.

<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.

lists

unordered lists

<ul> <li>

• milk• bread• butter• coffee beans

• bread• coffee beans• milk• butter

or

<ul><li>bread</li><li>coffee

beans</li><li>milk</li><li>butter</li>

</ul>

ordered lists

<ol> <li>

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

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

<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>

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

letters

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

nested lists

1. Chapter Onei. Section Oneii. Section Twoiii. Section Three

2. Chapter Two3. Chapter Three

<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>

Links

<a href=""> </a>

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>

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.

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.

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>

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>

Images

<img src="" alt="" />

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.

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"

/>

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"

/>

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>

next week...

Workshop writing HTMLOR

Styling HTML with CSS