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

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

• Chapter 5 Images

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

• Chapter 6 Links

• Text
• Images
• Links