~~SLIDESHOW~~
Contact Hour 14: To be discussed on Tuesday 13th March, 2012.
Lecturer: 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.
All the examples to be explored in this session are from Chapter 4 of Castro and Hyslop:
<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>
<note>
p
element.</note>
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.
em
element to add emphasis (usually displayed italic)strong
element for strong emphasis (usually displayed bold)abbr
defn
ins
and del
:code
pre
<note tip>
If you want to present HTML code in your code examples, you have to replace each <
and >
by <
and >
respectively.
</note>
small
br
span
<note>
Because they don't have any default styling, spans are usually used with class
or id
and CSS rules.
</note>
See pages 136–145 of Chapter 4. Of these, meter
and progress
are new elements added by HTML5.
<img src="images/image.url" alt="Alternative text -- displayed if image is not." />
<note>
img
src
attribute is the source of the image – A URL. The browser will issue an HTTP get request to obtain this.alt
atribute is required for accessibility. </note>
All the examples to be explored in this session are from Chapter 5 of Castro and Hyslop:
To another page:
<a href="page2.html">Page 2</a>
<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>
id
attribute can serve as an anchor.<a id=“link-to-me”>I am an anchor</a>
<a href=“#link-to-me”>Link to an anchor</a>
<a href=“page.html#link-to-me”>To an interesting bit</a>
of another page.All the examples to be explored in this session are from Chapter 6 of Castro and Hyslop:
Markup a blog post and make a note of the tags you use.
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.
<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>
* Add some extra entries and link them to a table of contents.
Experiment highlighting parts of the document using styles.