This is an old revision of the document!
Table of Contents
~~SLIDESHOW~~
Text, Images and Links
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 and Links
Text
- Figures and Time (New in HTML5)
All the Text Examples
All the examples to be explored in this session are from Chapter 4 of Castro and Hyslop:
Paragraphs
<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>
<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>
Addresses
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.
Figures and Time
Phrasing elements
- Emphasis
- Use the
em
element to add emphasis (usually displayed italic) - Use the
strong
element for strong emphasis (usually displayed bold)
Other Examples
- Explaining abbreviations –
abbr
- Defining a term –
defn
- Noting edits and inaccurate text –
ins
anddel
:
More semantic elements
Other miscellaneous elements
Images
All the Images Examples
All the examples to be explored in this session are from Chapter 5 of Castro and Hyslop:
Links
All the Links Examples
All the examples to be explored in this session are from Chapter 6 of Castro and Hyslop: