ITNP43: HTML Lecture 3 · html3_llt.ppt Author: Carron Shankland Created Date: 9/12/2011 3:14:48 PM

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)



2

HTML So Far...

•  Structural tags –  <html>, <head>, <body>

•  Text formatting –  <p>, <b> etc

•  Element attributes –  e.g. <p class=“new”>

•  Inline images –  <img />



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



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



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>.



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”>



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>



8

Table of Contents

•  Links to parts of a document are very useful for tables of contents within a long document



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



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 ...



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>



12

Lists in HTML

•  Unordered (bulleted) lists •  Numbered lists •  Definition lists

•  We have limited control over appearance, such as bullet styles



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>



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>



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>



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>



17

Tables •  Rows and columns of tabular data



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>



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>



20

Cell Spacing and Padding

<table cellspacing=“10” cellpadding=“1”>

*** </table>

<table cellspacing=“1” cellpadding=“10”>

*** </table>



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



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



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>



24

End of Lecture

Next: Cascading Style Sheets

Documents

ITNP43: HTML Lecture 3 · html3_llt.ppt Author: Carron Shankland Created Date: 9/12/2011 3:14:48 PM