Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
1
ITNP43: HTML Lecture 3
Niederst, Chapts 10, 11, 13 (3rd edn)
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
2
HTML So Far...
• Structural tags – <html>, <head>, <body>
• Text formatting – <p>, <b> etc
• Element attributes – e.g. <p class=“new”>
• Inline images – <img />
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
3
Hypertext Links
• This is what the Web is all about! • You can create to links to:
– other documents • HTML or otherwise (e.g. PDF)
– parts of the same document – images
• Links can be local or to any web-accessible address
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
4
The Anchor Tag • Links are created using the anchor tag: <a>
– e.g. <a href=“page2.html”>next page</a> – results in the text “next page” being a link to the
local HTML file, “page2.html” • relative URL: page2.html is in the same folder as linking
web page (or relative to a specified <base>)
– “next page” will be displayed by the browser in a different colour and usually underlined
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
5
Links with Absolute URLs
• Remote pages are linked with absolute URLs – the complete URL, e.g. Here’s a link to Bruce’s <a href=“http://www.cs.stir.ac.uk/~bpg/research.html”> research page</a>.
• A URL with no HTML file finds a default page – defined by server – either index.html or default.html (default.htm) Here’s a link to Bruce’s <a href=“http://www.cs.stir.ac.uk/~bpg/”> home page</a>.
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
6
Links with Relative URLs • Local pages are linked with relative URLs
– relative to location of current document • or relative to location specified by <base> tag
e.g. Here’s a link to Bruce’s <a href=“research.html”>research page</a>. – “research.html” in same folder e.g. Here’s a link to Bruce’s <a href=“Research/research.html”> research page</a>. – “research.html” in subfolder “Research”
• Never use absolute file paths!! e.g. <a href=“H:/Research/research.html”>
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
7
Linking Within a Document • Parts of a document can be named:
– e.g. <h1><a name=“stocks”>Daily Stock Quotes</a></h1>
– e.g. <h1 id=“stocks”>Daily Stock Quotes</h1>
• Elsewhere in the same document we may place a link: – e.g. Check out the <a href=“#stocks”>stock
quotes</a> • And in another document we may include
Go to today’s <a href=“dailynews.html#stocks”>stock quotes</a>
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
8
Table of Contents
• Links to parts of a document are very useful for tables of contents within a long document
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
9
Links to Other Media
• Links to images: e.g. Here is <a href=“alan.jpg”>me</a>.
• Links to email addresses: e.g. <a href=“mailto:[email protected]”>Mail me</a>
• Links to other types of document: e.g. <a href=“mydoc.pdf”>my document</a> – requires non-browser software to view it, either
stand-alone or browser plugin
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
10
Thumbnail Images • Images are usually big and can take a long time
to download • Often use a thumbnail-sized image as a link to
the full image, using <a> – the target attribute tells the browser to open a new
window: <a href=“bruce.jpg” target=“myimage”> – it helps to indicate size of full image near thumbnail – user has choice as to whether to download or not
• More details ...
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
11
<p> <a href="bruce.jpg" target="myimage"> <img src="bruce65x75.jpg" alt=“me"></a> Click the thumbnail to see a larger image (6.2kb) of me! </p>
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
12
Lists in HTML
• Unordered (bulleted) lists • Numbered lists • Definition lists
• We have limited control over appearance, such as bullet styles
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
13
Unordered (Bulleted) Lists • <ul>…</ul> • List entries with <li>…</li> • Bullet style can be set with style sheets
<p><b>Shopping List</b></p> <ul> <li>Avocados</li> <li>Tomatoes</li> <li>Scallions</li> <li>Black beans</li> </ul>
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
14
Ordered (Numbered) Lists • <ol>…</ol>
– first number and numbering style can be set with style sheets
• List entries with <li>…</li> <p><b>The Morning</b></p> <ol> <li>Wake up</li> <li>Get up</li> … </ol>
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
15
Definition Lists • <dl>…</dl> • Term with <dt>…</dt> • Definition with <dd>…</dd>
<p><b>Some Definitions</b></p> <dl> <dt>Internet</dt> <dd>Network of networks.</dd> <dt>World Wide Web</dt> <dd>Distributed system of hypertext documents known as web pages.</dd> <dt>HTML</dt> <dd>Hypertext markup language.</dd> </dl>
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
16
Nested Lists • Lists can be nested
– Browser automatically changes bullet style for unordered lists
– (Ordered lists can also be nested but change numbering style with style sheets)
<ul> <li>Breakfast <ul> <li>Cereal</li> <li>Toast</li> <li>Coffee</li> </ul></li> <li>Lunch</li> <li>Dinner</li> </ul>
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
17
Tables • Rows and columns of tabular data
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
18
A Very Simple Table
• As basic as it gets…
– <tr>…</tr> defines each row – <td>…</td> defines each entry (cell)
<table> <tr> <td>Cell 1</td><td>Cell 2</td> </tr> <tr> <td>Cell 1</td><td>Cell 2</td> </tr> </table>
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
19
Headers and Borders
<table border=“1”> <tr> <th>Row 1:</th> <td>Cell 1</td><td>Cell 2</td> </tr> <tr> <th>Row 2:</th> <td>Cell 1</td><td>Cell 2</td> </tr> </table>
Note: <th> … </th>
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
20
Cell Spacing and Padding
<table cellspacing=“10” cellpadding=“1”>
*** </table>
<table cellspacing=“1” cellpadding=“10”>
*** </table>
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
21
Images in a Table
<table summary=“Web design books” border=“1”>
<tr> <th>Web Design In A Nutshell:</th> <td><img src="dnut.jpg” alt=“cover” /></td> </tr> <tr> <th>WebMaster In A Nutshell:</th> <td><img src="mnut.jpg” alt=“cover” /></td> </tr> </table>
Note: summary
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
22
Spanning Columns <table border=“1” cellpadding=“3”> <caption>A Complicated Table</caption> <tr> <td rowspan=“3”>Cell 1</td> <td colspan=“2”>Cell 2</td> </tr> <tr> <td>Cell 3</td><td>Cell 4</td> </tr> <tr> <td>Cell 5</td><td>Cell 6</td> </tr> </table>
Note: caption
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
23
Table Sizing • Table and cell widths can be specified
– Table attributes and style sheets
• Relative sizing – Table relative to size of browser window – Cell relative to table size
• Absolute sizing in pixels <table border=“1” width=“100%”> <tr> <td class=“narrow”>Left-hand</td> <td>Right-hand</td> </tr> </table>
Autumn 2011 © University of Stirling
ITNP43: Interface Design and the World Wide Web
24
End of Lecture
Next: Cascading Style Sheets