闪电代写 -代写CS作业_CS代写_Finance代写_Economic代写_Statistics代写_代码代做_IT代写_加急帮助

Links

Creating a Link to Another Web Page

• You can create links from one page to the next.

• Recommendations

– Note that the address are case sensitive (i.e. Uppercase is different from lowercase).

– Use the keyword(s) as the link’s label.

– Don’t make the link’s label too long.

<a href="destination">Label </a>

Links

Creating a Link to Another Web Page

11 <body>

12

13 <h1>ABC Banking Corporation Limited</h1>

14 <h2>Online Banking Services</h2>

16

17 <p>Information</p>

18 <p><img src="../images/loans.jpg" width="105" height="85" alt="Personal Installment Loan" /><br /><a href="loans.html">Loans</a></p>

20

21 <h3>Payments</h3>

22 <p>Our online payment services provide a simple and easy way to manage your bills.</p>

23 <p>Select a service: <br /> (1) Bill Payment <br /> (2) AutoPay </p>

Images

Offering Alternate Text

• Descriptive text can be added if the image does not appear. (old browser like Lynx, or in case image missing / damaged)

• Although browsers could still show the image without alt, but in theory the alt attribute is compulsory.

Images

Offering Alternate Text

11 <body>

12

13 <h1>ABC Banking Corporation Limited</h1>

14 <h2>Online Banking Services</h2>

16

17 <p>Information</p>

18 <p><img src="../images/loans.jpg" alt="Personal Installment Loan" /><br/>Loans</p>

20

21 <h3>Payments</h3>

22 <p>Our online payment services provide a simple and easy way to manage your bills.</p>

23 <p>Select a service: <br /> (1) Bill Payment <br /> (2) AutoPay </p>

Links

Creating a Link to Specific Locations on Web Page

• An anchor is the text you will use internally to identify that section of the Web page.

• Once you have created an anchor, you can define a link so that a visitor’s click will bring them directly to the section of the Web page, that contains the anchor, not just the top of that page.

id="archorname" or <a name="archorname">...</a>

<a href="page.html#anchorname">Label</a>

Links

Creating a Link to Specific Locations on Web Page

20

21 <h3>Payments</h3>

22 <p>Our online payment services provide a simple and easy way to manage your bills.</p>

23 <p>Select an account: <br />

24 (1) <a href="#billPayment">Bill Payment</a> <br />

25 (2) <a href="#autopay">AutoPay</a> </p>

27 <h4 id="billPayment">Bill Payment</h4>

28 <<p>It allows you to make online bill payments to over 200 merchants in Hong Kong. </p>

29 <p>Feature: <br/> (1) Review, pay and organize your bills 24-hour a day <br /> (2) Pay a bill through your bank account, debit card, or credit card <br /> (3) Place payment instructions, up to 60 days in advanced <br /> (4) Provide a comprehensive report for Bill Payments transactions. </p>

31 <h4 id="autopay">Autopay</h4>

Links

Targeting Links to Specific Windows

• A target attribute is used to open a link in a particular frame or even in a new window.

• NOTE: Instead of using the target attribute, HTML documents may also use JavaScript as an alternative (e.g. for opening new advertisement popup window) . It will be discussed later.

target="window_name" or

target="_blank"

New window is prompted36

Links

Targeting Links to Specific Windows

2 <!DOCTYPE html>

3 <html>

4 <head>

…

22 <p>Our online payment services provide a simple and easy way to manage your bills.</p>

23 <p>Select an account: <br />

24 (1) <a href="#billPayment" target="_blank">Bill Payment</a> <br />

25 (2) <a href="#autopay">AutoPay</a> </p>

27 <h4 id="billPayment">Bill Payment</h4>

28 <p>It allows you to make online bill payments to over 200 merchants in Hong Kong. </p>

Links

Creating Other Kinds of Links

• Movies /Sounds / Programs / Excel Spreadsheets, etc.

<a href="http://www.site.com/path/file.ext">Label</a>

• FTP Site

<a href="ftp://ftp.site.com/path">Label</a>

• Newsgroup

<a href="news:newsgroup">Label</a>

• Email

<a href="mailto:[email protected]">Label</a>

• Telnet Site

<a href="telnet://site">Label</a>

Links

Using Images to Label Links

• Adding an image to a link creates a navigational button that the visitor can click to access the referenced URL.

• Simply put the <img> tag in between <a> and </a>

• IE automatically draw a border around image links but most browsers do not.

Tables

• Tables are the best way for displaying tabular information.

• Major Components

– Table Cells

• They are basic structural unit of tables.

• They contain data.

– Table Rows

• They are horizontal set of cells.

• They are grouped into a head, body, and foot sections.

– Table Columns

• They are vertical set of cells.

Simple Table Structure

<thead>

</thead>

<tfoot>

</tfoot>

<tbody>

...

</tbody>

</table>

Simple Table Structure

• <table> Element

– It contains all other elements that specify caption, rows, content and formatting.

• summary Attribute

– It is a summary of a table’s content and structure so that people using nonvisual user agents may better understand it.

• <caption> Element

– It provides a short description of the table’s purpose.

– It is only permitted immediately after the <table> start tag.

– A <table> element may only contain at most one <caption> element.

• <thead> Element

– It contains table head information (e.g. col label) about the table’s columns.

• <tfoot> Element

– It contains table foot information (e.g. total) about the table’s columns.

Simple Table Structure

• <tbody> Element

– It contains the main information for the table (excluding headings).

• <tr> Element

– It acts as a container for a row of tables cells.

• <th> Element

– It defines a cell that contains header information text are bolded and centered.

• <td> Element

– It defines a cell that contains typical data. text are normal: left-aligned and not bolded .

How to merge TABLE cells ?

• The <th> and <td> elements have colspan and rowspan attributes which allow merging of columns and/or rows.

</table>

</table>

Other attributes of <table> and <td>

• Apart from colspan and rowspan, there are many other attributes for the <table> / <td> / <th> tags, which can be used to customize the table appearance.

• Yet those attributes of the <table>/<td> tags are becoming deprecated. Students are advised to switch to CSS statements for new pages instead. (Engineers believe that formatting should be done in CSS, but not HTML, which is supposed to be used for structure)

• Interested students could refer to: http://www.somacon.com/p141.php

Attributes of <table> Tag

Attributes of <td> Tag

HTML5 semantic tags

• HTML is designed to describe the content (the WHATs) of a webpage, it may happen that a tag does not make any visible change to the appearance of webpage.

• HTML5 introduced some new semantic tags to describe the meaning of the parts of your webpage:

• Those tags are not compulsory, and the nesting order is not specified as well (e.g. <section> inside <article>, or <article inside <section> are both okay)