ICCT Wiki

User Tools

Site Tools

Trace:
eg-146:lecture14

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
eg-146:lecture14 [2012/03/11 18:13] – [Links] eechriseg-146:lecture14 [2012/03/13 14:21] – [Example] eechris
Line 20: Line 20:
   * [[#Images]]   * [[#Images]]
   * [[#Links]]   * [[#Links]]
 +  * [[#Example]]
  
 ===== Text ===== ===== Text =====
Line 121: Line 122:
 ===== Images ===== ===== 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 Images Examples =====
Line 140: Line 153:
 * The element name ''a'' stands for anchor. * 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. * 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 ===== ==== Anchors =====
Line 148: Line 162:
   * 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 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.   * 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 Links Examples =====
  
Line 153: Line 168:
  
   * [[http://www.bruceontheloose.com/htmlcss/examples/#chapter-6|Chapter 6 Links]]   * [[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 ===== ===== Summary =====
  
Line 158: Line 193:
   * [[#Images]]   * [[#Images]]
   * [[#Links]]   * [[#Links]]
 +  * [[#Example]]
 +
  
 ===== Homework ====== ===== 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 ===== ===== Coming Next =====
- 
  
  
eg-146/lecture14.txt · Last modified: 2012/03/13 21:27 by eechris