Contact Hour 14: To be discussed on Tuesday 13th March, 2012.

Lecturer: Dr Chris P. Jobling.

The contents of these notes and all the examples are from Castro and Hyslop, HTML5 and CSS3: Visual Quickstart Guide, 7th Ed., PeachPit Press, 2012.

These notes are incomplete and you are invited to contribute to them by getting an account on this wiki.

• Text
• Images
• Links

• Paragraphs
• Addresses
• Figures and Time (New in HTML5)
• Phrasing elements
• Marking up Code, etc.
• Fine print, line breaks and spans
• Other miscellaneous elements

All the examples to be explored in this session are from Chapter 4 of Castro and Hyslop:

• Chapter 4 Text

<article>
  <h1>Antoni Gaudí</h1> 
  <p>Many tourists are drawn to Barcelona to see 
     Antoni Gaudí's incredible architecture.</p>
  <p>Barcelona celebrated the 150th anniversary 
     of Gaudí's birth in 2002.</p>
  :
  :
</article>

Example

<note>

• HTML doesn't recognize the returns or other extra whitespace that you enter in your text editor. To start a new paragraph in HTML you use the p element.
• HTML requires the closing </p> tag.
• You can use styles to format paragraphs with a particular font, size or colour.
• Styles can also be used to control the amount of space around a paragraph.

</note>

The address element is used to mark up the contact information of the author, people or organisation responsible for creating the web page or an article within a page.

Example

• Creating a Figure
• Specifying Time
• Specifying Time -- More Examples

• Emphasis
  • Use the em element to add emphasis (usually displayed italic)
  • Use the strong element for strong emphasis (usually displayed bold)

Marking Important and Emphasized Text

• Indicating a Citation or Reference – cite
• Quoting text – blockquote (quoting-text-blockquote.html) and q (quoting-text-q.html)
• Highlighting text – mark (Another Example)
• Explaining abbreviations – abbr
• Defining a term – defn

• Creating subscripts and superscripts – sub and sup
• Noting edits and inaccurate text – ins and del:
  • Noting edits
  • Noting edits example 2
  • Noting inaccurate text

• Marking up code – code
• Other computer and related elements – kbd, samp and var
• Preformatted text – pre

<note tip> If you want to present HTML code in your code examples, you have to replace each < and > by < and > respectively. </note>

• Fine print – small
• Line breaks – br
• Spans – span

<note> Because they don't have any default styling, spans are usually used with class or id and CSS rules. </note>

See pages 136–145 of Chapter 4. Of these, meter and progress are new elements added by HTML5.

• Meter element
• Progress element

<img src="images/image.url" alt="Alternative text -- displayed if image is not." />

<note>

• Element is the image element img
• The src attribute is the source of the image – A URL. The browser will issue an HTTP get request to obtain this.
• If successful, the image replaces the element in the document.

</note>

All the examples to be explored in this session are from Chapter 5 of Castro and Hyslop:

• Chapter 5 Images

To another page:

<a href="page2.html">Page 2</a>

<note> * The element name a stands for anchor. * The href attribute is the location of the resource – A URL. Should be relative if page is in same web site as referring page (the full URL is computed by the Browser). When clicked, browser will issue an HTTP GET request. </note>

• An anchor provides a place to link to within a page.
• Any element with an id attribute can serve as an anchor.
• You can also define your own anchors for an arbitrary location in a document: <a id=“link-to-me”>I am an anchor</a>
• To link to an anchor within the current page use: <a href=“#link-to-me”>Link to an anchor</a>
• To link to an anchor in another document use: <a href=“page.html#link-to-me”>To an interesting bit</a> of another page.

All the examples to be explored in this session are from Chapter 6 of Castro and Hyslop:

• Chapter 6 Links

• Text
• Images
• Links