1 / 22

Link and Table in HTML

Link and Table in HTML. Statistics. 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.

avent
Download Presentation

Link and Table in HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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 <a href=“URL”>Text for link</a> Tag Attribute: URL Closing Tag Opening Tag Link text href = “Hyper Text Reference ”

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

  9. Absolute vs Relative links • Use an absolute (sometimes called remote) link when linking to other sites • Absolute links use full URLhttp://... • 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. • <ahref="mailto:nanzhang@egr.msu.edu">contact us!</a> • 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 <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.

  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.

More Related