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:[email protected]">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