ITNP43: HTML Lecture 3

Size: px

Start display at page:

Download "ITNP43: HTML Lecture 3"

Madeline Price
6 years ago
Views:

1 ITNP43: HTML Lecture 3 Niederst, Chapts 10, 11, 13 (3rd edn) 1

2 HTML So Far... Structural tags <html>, <head>, <body> Text formatting <p>, <b> etc Element attributes e.g. <p class= new > Inline images <img /> 2

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 3

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 4

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= > 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= > home page</a>. 5

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

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

8 Table of Contents Links to parts of a document are very useful for tables of contents within a long document 8

9 Links to Other Media Links to images: e.g. Here is <a href= alan.jpg >me</a>. Links to addresses: e.g. <a href= >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 9

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

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

12 Lists in HTML Unordered (bulleted) lists Numbered lists Definition lists We have limited control over appearance, such as bullet styles 12

13 <ul> </ul> Unordered (Bulleted) Lists 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> 13

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

15 <dl> </dl> Definition Lists Term with <dt> </dt> Definition with <dd> </dd> <p><b>some Definitions</b></p> <dl> <dt>internet</dt> <dd>network of networks.</dd> <dt></dt> <dd>distributed system of hypertext documents known as web pages.</dd> <dt>html</dt> <dd>hypertext markup language.</dd> </dl> 15

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

17 Tables Rows and columns of tabular data 17

18 A Very Simple Table As basic as it gets <table> <tr> <td>cell 1</td><td>Cell 2</td> </tr> <tr> <td>cell 1</td><td>Cell 2</td> </tr> </table> <tr> </tr> defines each row <td> </td> defines each entry (cell) 18

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

20 Cell Spacing and Padding <table cellspacing= 10 cellpadding= 1 > *** </table> <table cellspacing= 1 cellpadding= 10 > *** </table> 20

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 21

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 22

Table Sizing Table and cell widths can be specified Table attributes and style sheets Relative sizing Table relative to size of browser window Cell

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

24 End of Lecture Next: Cascading Style Sheets 24

CSCU9B2: Web Tech Lecture 1

CSCU9B2: Web Tech Lecture 1 Prof. Bruce Graham b.graham@cs.stir.ac.uk Room 4B76 1 What to Expect 5 lectures covering the programming aspect of the web: HTML5, CSS, JavaScript, HTML5 canvas 8 practicals