eg-146:lecture14
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
eg-146:lecture14 [2012/03/11 17:48] – [Other Examples] eechris | eg-146:lecture14 [2012/03/13 13:44] – [Example] eechris | ||
---|---|---|---|
Line 20: | Line 20: | ||
* [[#Images]] | * [[#Images]] | ||
* [[#Links]] | * [[#Links]] | ||
+ | * [[# | ||
===== Text ===== | ===== Text ===== | ||
Line 27: | Line 28: | ||
* [[#Figures and Time]] (New in HTML5) | * [[#Figures and Time]] (New in HTML5) | ||
* [[#Phrasing elements]] | * [[#Phrasing elements]] | ||
- | * [[#More semantic elements]] | + | * [[#Marking up Code, etc.]] |
+ | * [[#Fine print, line breaks and spans]] | ||
* [[#Other miscellaneous elements]] | * [[#Other miscellaneous elements]] | ||
- | |||
===== All the Text Examples ===== | ===== All the Text Examples ===== | ||
Line 78: | Line 79: | ||
[[http:// | [[http:// | ||
- | ===== Other Examples | + | ===== Phrasing elements (2) ===== |
* [[http:// | * [[http:// | ||
Line 85: | Line 86: | ||
* [[http:// | * [[http:// | ||
* [[http:// | * [[http:// | ||
+ | ===== Phrasing elements (3) ===== | ||
* [[http:// | * [[http:// | ||
* Noting edits and inaccurate text -- '' | * Noting edits and inaccurate text -- '' | ||
Line 90: | Line 92: | ||
* [[http:// | * [[http:// | ||
* [[http:// | * [[http:// | ||
- | ===== More semantic | + | ===== Marking up Code, etc. ===== |
+ | |||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | <note tip> | ||
+ | If you want to present HTML code in your code examples, you have to replace each ''<'' | ||
+ | </ | ||
+ | ====== Fine print, line breaks and spans ===== | ||
+ | |||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | < | ||
+ | Because they don't have any default styling, spans are usually used with '' | ||
+ | </ | ||
===== Other miscellaneous elements ===== | ===== Other miscellaneous elements ===== | ||
+ | |||
+ | See pages 136--145 of Chapter 4. Of these, '' | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
===== Images ===== | ===== Images ===== | ||
+ | <code html> | ||
+ | <img src=" | ||
+ | </ | ||
+ | |||
+ | ----- | ||
+ | |||
+ | < | ||
+ | * Element is the image element '' | ||
+ | * The '' | ||
+ | * If successful, the image replaces the element in the document. | ||
+ | * The '' | ||
+ | </ | ||
===== All the Images Examples ===== | ===== All the Images Examples ===== | ||
Line 102: | Line 142: | ||
===== Links ===== | ===== Links ===== | ||
+ | |||
+ | To another page: | ||
+ | <code html> | ||
+ | <a href=" | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | < | ||
+ | * The element name '' | ||
+ | * The '' | ||
+ | </ | ||
+ | |||
+ | ==== Anchors ===== | ||
+ | |||
+ | * An //anchor// provides a place to link to within a page. | ||
+ | * Any element with an '' | ||
+ | * You can also define your own anchors for an arbitrary location in a document: ''< | ||
+ | * To link to an anchor within the current page use: ''< | ||
+ | * To link to an anchor in another document use: ''< | ||
===== All the Links Examples ===== | ===== All the Links Examples ===== | ||
Line 108: | Line 168: | ||
* [[http:// | * [[http:// | ||
+ | |||
+ | |||
+ | ===== Example ===== | ||
+ | |||
+ | Markup a blog post and make a note of the tags you use. | ||
+ | |||
+ | < | ||
+ | The Ballad of John and Yoko | ||
+ | John Lennon' | ||
+ | Post title: A day in the life | ||
+ | [image] | ||
+ | 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! | ||
+ | |||
+ | //Posted by//: John, 1967. | ||
+ | </ | ||
+ | |||
===== Summary ===== | ===== Summary ===== | ||
Line 113: | Line 193: | ||
* [[#Images]] | * [[#Images]] | ||
* [[#Links]] | * [[#Links]] | ||
+ | * [[# | ||
+ | |||
===== 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> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | <article id= " | ||
+ | < | ||
+ | <div class=" | ||
+ | < | ||
+ | <p> ... </ | ||
+ | <footer class=" | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <nav role=" | ||
+ | <!-- Put links to previous posts here --> | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | Copyright notice etc | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * 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