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 17:58] – [Other Examples] eechriseg-146:lecture14 [2012/03/13 21:27] (current) – [Coming Next] eechris
Line 20: Line 20:
   * [[#Images]]   * [[#Images]]
   * [[#Links]]   * [[#Links]]
 +  * [[#Example]]
  
 ===== Text ===== ===== Text =====
Line 85: Line 86:
   * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/abbreviations.html|Explaining abbreviations]] -- ''abbr''   * [[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''   * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/defining-instance-of-term.html|Defining a term]] -- ''defn''
-===== Other Examples =====+===== Phrasing elements (3) =====
   * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-04/superscript-and-subscript.html|Creating subscripts and superscripts]] -- ''sub'' and ''sup''   * [[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'':   * Noting edits and inaccurate text -- ''ins'' and ''del'':
Line 102: Line 103:
 If you want to present HTML code in your code examples, you have to replace each ''<'' and ''>'' by ''&lt;'' and ''&gt;'' respectively. If you want to present HTML code in your code examples, you have to replace each ''<'' and ''>'' by ''&lt;'' and ''&gt;'' respectively.
 </note> </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 ===== ===== 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 ===== ===== 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 113: Line 142:
  
 ===== Links ===== ===== 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 Links Examples =====
Line 119: 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 124: 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.1331488685.txt.gz · Last modified: 2012/03/11 17:58 by eechris