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
eg-146:lecture14 [2012/03/11 18:13] – [Links] eechriseg-146:lecture14 [2012/03/13 21:27] (current) – [Coming Next] 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:lecture15]]
eg-146/lecture14.1331489606.txt.gz · Last modified: 2012/03/11 18:13 by eechris