~~SLIDESHOW~~
====== Text, Images and Links ======


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

**Lecturer**: [[C.P.Jobling@Swansea.ac.uk|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]]
  * [[#Images]]
  * [[#Links]]
  * [[#Example]]

===== Text =====

  * [[#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 Text Examples =====

All the examples to be explored in this session are from [[http://www.bruceontheloose.com/htmlcss/table-of-contents.php#chapter-4|Chapter 4]] of //Castro and Hyslop//:

  * [[http://www.bruceontheloose.com/htmlcss/examples/#chapter-4|Chapter 4 Text]]

===== Paragraphs =====

<code html>
<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>
</code>

[[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/starting-paragraph.html|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>
===== 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.

[[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/author-contact-information.html|Example]]
===== Figures and Time =====

  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/creating-a-figure.html|Creating a Figure]]
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/specifying-time.html|Specifying Time]]
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/specifying-time-more-examples.html|Specifying Time -- More Examples]]
===== Phrasing elements =====

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

[[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/important-and-emphasized-text.html|Marking Important and Emphasized Text]]

===== Phrasing elements (2) =====

  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/indicating-a-citation.html|Indicating a Citation or Reference]] -- ''cite''
  * Quoting text -- ''blockquote'' ([[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/quoting-text-blockquote.html|quoting-text-blockquote.html]]) and ''q'' ([[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/quoting-text-q.html|quoting-text-q.html]])
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/highlighting-text.html|Highlighting text]] -- ''mark'' ([[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/highlighting-text-example2.html|Another Example]])
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/abbreviations.html|Explaining abbreviations]] -- ''abbr''
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/defining-instance-of-term.html|Defining a term]] -- ''defn''
===== Phrasing elements (3) =====
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/superscript-and-subscript.html|Creating subscripts and superscripts]] -- ''sub'' and ''sup''
  * Noting edits and inaccurate text -- ''ins'' and ''del'':
    * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/noting-edits-del-ins.html|Noting edits]]
    * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/noting-edits-del-ins-example2.html|Noting edits example 2]]
    * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/noting-inaccurate-text-s.html|Noting inaccurate text]]
===== Marking up Code, etc. =====

  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/marking-up-code.html|Marking up code]] -- ''code''
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/kbd-samp-var.html|Other computer and related elements]] -- ''kbd'', ''samp'' and ''var''
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/preformatted-text.html|Preformatted text]] -- ''pre''

----

<note tip>
If you want to present HTML code in your code examples, you have to replace each ''<'' and ''>'' by ''&lt;'' and ''&gt;'' respectively.
</note>
====== Fine print, line breaks and spans =====

  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/specifying-fine-print.html|Fine print]] -- ''small''
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/creating-line-break.html|Line breaks]] -- ''br''
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/creating-spans.html|Spans]] -- ''span''

----

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

===== Other miscellaneous elements =====

See pages 136--145 of Chapter 4. Of these, ''meter'' and ''progress'' are new elements added by HTML5.
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/using-meter-to-provide-gauge.html|Meter element]]
  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/indicating-progress-example2.html|Progress element]]
===== Images =====

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

-----

<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.
  * The ''alt'' atribute is required for accessibility. 
</note>

===== All the Images Examples =====

All the examples to be explored in this session are from [[http://www.bruceontheloose.com/htmlcss/table-of-contents.php#chapter-5|Chapter 5]] of //Castro and Hyslop//:

  * [[http://www.bruceontheloose.com/htmlcss/examples/#chapter-5|Chapter 5 Images]]

===== Links =====

To another page:
<code html>
<a href="page2.html">Page 2</a>
</code>

----

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

==== Anchors =====

  * 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 Links Examples =====

All the examples to be explored in this session are from [[http://www.bruceontheloose.com/htmlcss/table-of-contents.php#chapter-6|Chapter 6]] of //Castro and Hyslop//:

  * [[http://www.bruceontheloose.com/htmlcss/examples/#chapter-6|Chapter 6 Links]]


===== Example =====

Markup a blog post and make a note of the tags you use.

<code>
The Ballad of John and Yoko
John Lennon's blog
Post title: A day in the life -> link: http://bit.ly/xAbMvf 
[image: source -> http://bit.ly/wOEIS5]
Text: I read the news today
Oh, boy! 4,000 holes in Blackburn Lancashire
And though the holes were rather small, they had to count them all.

Now they know how many holes it takes to fill the Albert Hall!

Byline: Posted by: John, January 17th. 1967.
</code>

===== Summary =====

  * [[#Text]]
  * [[#Images]]
  * [[#Links]]
  * [[#Example]]


===== Homework ======

  * Create an HTML5 document to render the Blog entry shown earlier.
  * Mark up the content of the blog page like this:
<code html>
<header>
<hgroup>
<h1>Blog Title</h1>
<h2>Sub title</h2>
</hgroup>
<article id= "unique-id" class="post">
  <h2>Entry Title</h2>
  <div class="entry-text">
    <p>The blog entry</p>
    <p> ... </p>
  <footer class="byline">
    <em>Posted by</em>: 
    <address>Author</address> <datetime>
  </footer>
</article>
<aside>
<h2>Archive</h2>
<nav role="navigation>
  <!-- Put links to previous posts here -->
</nav>
</aside>
<footer>
  Copyright notice etc
</footer>
</code>
    
* Add some extra entries and link them to a table of contents.
    Experiment highlighting parts of the document using styles.
===== Coming Next =====


[[eg-146:lecture15]]