Link and Table in HTML

Statistics

Grade statistics before web assignment 1

0

5

10

15

20

25

100 125 150 175 200 225 250 275 300 325 350 375

Points

.00%

20.00%

40.00%

60.00%

80.00%

100.00%

120.00%

Number of person

Percetage

HTML review

The two faces of a HTML file• In a notepad program.

• In a internet browser program.

The function of HTML tags.• Tags are specific commands that tell the

browser how to format text.

Using WYSIWYG (Dreamweaver) to edit HTML file is just like using MS-Word

Cascading Style Sheets

HTML tags only have limited format. Cascading style sheets control the

structure and style of the web page. Dreamweaver provides very convenient

user interface to deal with the CSS.

Separation of Content and Presentation

Content• Use tags like <h1>, <h2>, <p>, <em> or <li> to indicate the structure of your pages

Presentation • Use a CSS style sheet to determine how the

tags are formatted

Advantage of separation• Changing the formatting only requires editing

the style sheet

What is a Hyperlink?

Hyperlinks (also called “links”) are references in an HTML file that allow a user to connect to a different URL

Hyperlinks are the magic behind the WWW - they transport you to a different world

Michigan State University You may link to any page you wish!

Hyperlinks in HTML Code

<a href=“URL”>Text for link</a>

Opening Tag

Tag Attribute: URL Closing Tag

Link text

href = “Hyper Text Reference ”

Hyperlinks in Action

<p>Welcome to Lyman Briggs School. <a href=“http://www.msu.edu/~lbs/index.html”>Lyman Briggs School</a> is a residential science program. </p>

What it will look like:

Welcome to Lyman Briggs School. Lyman Briggs School is a residential science program.

Absolute vs Relative links

Use an absolute (sometimes called remote) link when linking to other sites

• Absolute links use full URL http://...

Use a relative (or sometimes called local) link when linking between pages on the same web site• Relative links refer only to the relative path

and filename.

Create a link in Dreamweaver

Highlight the text you want to make a link.

In the right click menu: “make link”.

Browse file to make a relative link.

Or typing in URL to make an absolute link.

Customize your link

Make your link outstanding: when mouse move over the link, it changes color.

Edit the CSS style sheet to customize your link.

The “a” tag should be customized.

Change the style of HTML Link Tag a:link – Customizes the style of a link that has not been

visited recently a:visited -- Customizes the style of a link that has been

recently visited a:hover -- Customizes the style of a link while the

user’s mouse is over it.

Color Control Codes

Computer monitors combine Red, Green and Blue (RGB) in various amounts

Hexadecimal codes tell the computer how much Red, Green and Blue to display • Red: FF0000

• Green:00FF00

• Blue: 0000FF

• Other colors? Combinations! Yellow = FFFF00

• White: FFFFFF

• Black: 000000 Approximately 17 million combinations.

Adding Email link

If you want to do it by adding HTML code.• <a href="mailto:nanzhang@egr.msu.edu">contact us!</a>

If you want do it in dreamweaver:• Menu: Insert->Email link

Anchor links

Anchors are like bookmarks, when you want to jump to a specific position of a long HTML files.

Create a named anchor. Menu: Insert-> Named anchor

Jumping to the anchor within the same document. #AnchorName

Jumping to the anchor in a different page. Page URL + #AnchorName• http://www.msu.edu/course/lbs/126/assignment4.html#PartB

Targeting your links

You can either open the linked page in the same window or in a “pop-up” window.

In dreamweaver you can set the link to a target window.• _self – open in the same window (default)

• _blank – open in a pop-up window.

Question

In MS-Word, how do you arrange complex layout? (Do you remember how you did the resume assignment?)

Answer: Tables with invisible borders. In HTML we can also use tables with

invisible borders to control the layout.

Tables in HTML

Tables are incredibly difficult to hand code.

Why? Each cell needs a <td></td> tag, each row needs a <tr></tr> tag, and the outer table needs a <table></table> tag.

Use dreamweaver to insert and edit table.

Why Tables?

CONTROL! Tables allow you to control where items

appear on pages. LBS Homepage is all tables (without

borders)

Inserting Tables in Macromedia DreamWeaver

Menu: Insert->Table Determining rows, columns, cell padding,

and cell borders. (Note: when cell borders are set to zero, table is invisible.)

Table can be nested into another table. Fine tuning the size of each cell. Done

A Word about Frames

Frames are also used to control layout Each cell is a separate window Frames are BAD! because they are user-

UN-friendly

Extra material

Downloading the Macromedia Dreamweaver tutorial file from the lecture notes page.

Home work:• Read Page 39-46 for Cascading style sheets.

• We have only focused on the external style sheet.