Level 1 - Week 4

Transcript

1. </> wiggywebmasters.com
2. Links
3. Links can take you to... • another website • another page on the same website • another part of the same page • a particular part of a different page They can also open new browser windows (or tabs) and open an email client
4. Link to another website <a href="http://www.thomson.co.uk/index.html">Thomson</a> ! Absolute path - the URL MUST be the exact path to the page
5. Link to another page on the same website <a href="about.html">About</a> ! Ralative path - the same server is assumed - the current server address is automatically pre-pended to the address
6. Link to another part of the same page Requires two things: 1. A tag with an id attribute, and 2. the link to that tag For example... <a href="#section_1">Section 1</a> <h2 id="section_1">Section 1</h2>
7. Link to a particular part of a different page • Works exactly the same as linking to a different part of the same page, but now requires the path to the appropriate file. • This path can be absolute or relative.
8. Opening links in a new window <a href="http://www.thomson.co.uk" target="_blank">Thomson</a>
9. Opening an email client <a href="mailto:fred@bedrock.com">Email Fred</a>
10. Styling links a:link {} a:visited {} a:active {} a:hover {}
11. Lists
12. Out of order Lists can be: • Ordered, or • Unordered
13. Ordered lists <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol>
14. Unordered lists <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>
15. Styling lists li { list-style-type: none; /* For unordered lists: none, disc, circle, square For ordered lists: decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman */ list-style-image: url('my-bullet-point.png'); /* can be an image! */ list-style-position: inside; /* or outside */ }