1. Link and Table in HTML

2. Statistics

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

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

5. Separation of Content and Presentation Content Use tags like,,, or 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

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

7. Hyperlinks in HTML Code Text for link Opening Tag Tag Attribute: URL Closing Tag Link text href = “Hyper Text Reference ”

8. Hyperlinks in Action Welcome to Lyman Briggs School. Lyman Briggs School is a residential science program. What it will look like: Welcome to Lyman Briggs School. Lyman Briggs School is a residential science program.

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

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

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

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

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

14. Adding Email link If you want to do it by adding HTML code. contact us! If you want do it in dreamweaver: Menu: Insert->Email link

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

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

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

18. Tables in HTML Tables are incredibly difficult to hand code. Why? Each cell needs a tag, each row needs a tag, and the outer table needs a tag. Use dreamweaver to insert and edit table.

19. Why Tables? CONTROL! Tables allow you to control where items appear on pages. LBS Homepage is all tables (without borders)

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

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

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