Differences

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

--- eg-146:lecture14 [2012/03/11 18:20] – [Images] eechris
+++ eg-146:lecture14 [2012/03/13 14:21] – [Example] eechris
@@ Line 20: / Line 20: @@
   * [[#Images]]
   * [[#Links]]
+  * [[#Example]]
 ===== Text =====
@@ Line 168: / Line 169: @@
   * [[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 =====
@@ Line 174: / Line 193: @@
   * [[#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 =====