ITEC 745

1. ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 5

2. Recall from Last Week: • Tags: • Open: <tag> • Close: </tag> • “All at once” (no separate open and close tags): <tag /> • Attributes • Specify additional features of tags • Always of the form: attribute_name=“attribute_value” • Example: <img src=“myphoto.jpg” alt=“My photo” /> tag is img 1st attribute is src=“myphoto.jpg” 2nd attribute is alt=“My photo”

3. Unordered (Bulleted) Lists • Bulleted lists are technically called “unordered lists” in HTML/XHTML: <ul> <li>This is the first “List Item”</li> <li>This is the second “List Item”</li> <li>This is the third “List Item”</li> </ul> <p> Although I refer to the list items as “first,” “second,” and “third,” this is an “unordered list”, so the items are preceded by bullets, not numbers.</p>

4. Ordered (Numbered) Lists • Numbered lists are technically called “Ordered lists” in HTML/XHTML: <ol> <li>This is the first “List Item”</li> <li>This is the second “List Item”</li> <li>This is the third “List Item”</li> </ol> <p> Since this is an “ordered list,” each list item is preceded by a number, instead of a bullet.</p>

5. Definition Lists • Definition lists are intended for marking lists of terms and definitions: <dl> <dt>This is “term” 1</dt> <dd>This is “term” 1’s definition</dd> <dt>This is “term” 2</dt> <dd>This is “term” 2’s definition</dd> </dl> <p>To maintain the “structure, not layout” philosophy of the web, you should only use definition lists for terms and definitions, not for managing indents.</p>

6. HTML/XHTML Comments • You can place comments in your HTML/XHTML code • Anything between the comment markers is ignored by the web browser, but can still be useful as a way to provide notes to human readers of your code (or to yourself) • <!-- begins a comment • --> ends a comment • Comments can span multiple lines of code and content • Example: <!-- This is a comment. It will be ignored by the web browser. -->

7. Cascading Style Sheets (CSS) • Let’s look at a simple CSS file. Suppose the following CSS code is saved in a file called “itec745.css”: body { background-color: #990033; font-size: 20px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; } Sets the background color to a dark burgundy red Sets the font to Arial (PC) or Helvetica (Mac) Sets font color to white

8. Cascading Style Sheets (CSS)

9. Cascading Style Sheets (CSS) • A closer look at the elements of this CSS entry body { background-color: #990033; font-size: 20px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; } • Color specifications (cont.) • The first two hexadecimal digits specify how much red you want: 00 = none, FF = the maximum amount • The second two hex digits specify how much green you want: 00 = none, FF = the maximum amount • The last two hex digits specify how much blue you want: 00 = none, FF = the maximum amount • The final color is the result of mixing the specified amounts of red, green and blue.

10. Cascading Style Sheets (CSS) • A closer look at the elements of this CSS entry body { background-color: #990033; font-size: 20px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; } • Font-size specifications • Lots of ways to specify font-size • Pixels: 20px • Point Size: 12pt • Percentage: 120% • “Em”s: 1em Fixed size, can’t be changed in user’s browser Relative size, can be changed in user’s browser; more friendly to the visually impaired

11. Cascading Style Sheets (CSS) • A closer look at the elements of this CSS entry body { background-color: #990033; font-size: 20px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; } • Font-size specifications • Lots of ways to specify font-size • Pixels: 20px • Point Size: 12pt • Percentage: 120% • “Em”s: 1em Increasingly, the differences between fixed and relative font size specifications are disappearing. For example, in Internet Explorer 8, ViewText Size is unable to resized fonts specified in px or pt units. However, ViewZoomis able to resize these fonts. Fixed size, can’t be changed in user’s browser Relative size, can be changed in user’s browser; more friendly to the visually impaired

12. Cascading Style Sheets (CSS) • A closer look at the elements of this CSS entry body { background-color: #990033; font-size: 20px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; } • Font-family lists • Fonts must be identified by their names on the destination system. Spell them exactly as they are spelled on the computer where the page will be viewed. • The browser will try each font in your list, in order from first-listed to last-listed, until it finds one that is installed and available to it. So effectively, it is a list of alternates, presented in order from most desired to least.

13. Cascading Style Sheets (CSS) • A closer look at the elements of this CSS entry body { background-color: #990033; font-size: 20px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; } • Font-family lists (cont.) • Two kinds of font-families: • Specific: names a particular font family (e.g., MS Comic Sans) • Generic: names a generic family to which many specific fonts belong

14. Cascading Style Sheets (CSS) • A closer look at the elements of this CSS entry body { background-color: #990033; font-size: 20px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; } • Font-family lists (cont.) • Three generic font-families • Serif: fonts that have “feet” such as Times New Roman and Georgia • Sans-serif: fonts that have no “feet” such as Arial, Helvetica, and Trebuchet • Monospace: fonts whose letters are not proportionally spaced (i.e., an “i” takes up as much horizontal space as an “m”) such as Courier New and Andele Mono • Generic font-families make good defaults, in case none of the specific font-families listed earlier in the list are present. Any font on the system that belongs to the generic font-family can be used to satisfy the CSS request.

15. Cascading Style Sheets (CSS) • Any HTML/XHTML tag can be given a CSS specification in the CSS file, e.g.: blockquote { font-family: “Times New Roman”, Times, Georgia, serif; font-style: italic; color: #0033ff; } p { font-family: Arial, Helvetica, sans-serif; }

16. Cascading Style Sheets (CSS) • Attach your CSS code to your HTML file with the <link> tag: <link href=“itec745.css” rel=“stylesheet” type=“text/css” /> • The <link> tag must be placed in the head section of your page: <head> <link href=“itec745.css” rel=“stylesheet” type=“text/css” /> <title>Title of My Page Using CSS</title> </head>

17. This Week: CSS for anchor tags,HTML/XHTML Tables

18. CSS for Anchor (<a>) Tags • Recall that any XHTML tag’s look can be redefined by giving it an entry in your CSS file. • In particular, the anchor tag can be given, say, a new color by giving it a CSS entry: a { color: #0000ff; } • However, links (anchors) have different states (e.g., “visited” or not). What to do about them?

19. CSS for Anchor (<a>) Tags • Pseudo-classes let you individually address each of the possible states of a link: a:link { color: #0000ff; } a:visited { color: #ff0000; } a:hover { color: #00ff00; } a:active { color: #cccc00; }

20. CSS for Anchor (<a>) Tags • You’re not limited to just changing the color: a:link { color: #0000ff; text-decoration: none; } a:visited { color: #ff0000; text-decoration: none; } a:hover { color: #00ff00; text-transform: uppercase; font-weight: bold; background-color: #cc0099; } a:active { color: #cccc00; text-decoration: none; }

21. CSS for Anchor (<a>) Tags • a:link and a:visited must come beforea:hover in the CSS definition in order to be effective!! • a:hover must come beforea:active in the CSS definition in order to be effective!! • This means there are only 2 correct orders: OK:OK: a:link { color: #0000ff; } a:visited { color: #ff0000; } a:visited { color: #ff0000; } a:link { color: #0000ff; } a:hover { color: #00ff00; } a:hover { color: #00ff00; } a:active { color: #cccc00; } a:active { color: #cccc00; }

22. Broken CSS Support in IE • For reasons known only to Microsoft, Internet Explorer has been designed to ignore all CSS tags after the 30th. Only the first 30 tag rules will be applied in Internet Explorer (vers. 4 – 8). Microsoft documents this at their knowledge base without further explanation as to why this limit is in place: http://support.microsoft.com/kb/262161 • Keep this limit in mind if you need your page to render properly in IE. Unfortunately, that’s most public-facing web sites because IE is so prevalent. And even many corporate intranets have set IE as their standard browser. 

23. Tables XHTML/XHTML Tables

24. Displaying Tabular Data • Tim Berners-Lee invented the World Wide Web with the express purpose of creating an information-sharing infrastructure. • Frequently, information is most conveniently captured in a table. • How can you present tabular data in HTML/XHTML? • Answer: With HTML/XHTML tables!

25. Displaying Tabular Data (cont.) table { width: 300px; border-style: solid; border-color: #000000; border-width: 2px; } th { border-style: solid; border-color: #000000; border-width: 1px; background-color: #0066ff; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-style: italic; } td { border-style: solid; border-color: #000000; border-width: 1px; } a:visited { color: #ff0000; text-decoration: none; } <html> <head> <link href="itec745.css" rel="stylesheet" type="text/css" /> <title>Tables for Displaying Tabular Data</title> </head> <body> <h1>Tables for Displaying Tabular Data</h1> <p>Here's an example of a table used for displaying tabular data:</p> <table> <tr> <th>State</th> <th>July 2005 Population*</th> </tr> <tr> <td>Alabama</td> <td>4,557,808</td> </tr> <tr> <td>Alaska</td> <td>663,661</td> </tr> </table> <p>*Source: <a href="http://www.factmonster.com/ipka/A0004986.html">http://www.factmonster.com/ipka/A0004986.html</a></p> </body> </html>

26. Displaying Tabular Data (cont.) • Tables consist of 4 main tags: • <table> and </table> mark the beginning and end of the table, respectively. • <tr> and </tr> mark the beginning and end of each table row of the table, respectively. • <th> and </th> mark the beginning and end of each table header cell, respectively. • <td> and </td> mark the beginning and end of each table data cell, respectively.

27. Displaying Tabular Data (cont.) • Although the web browser doesn’t care what your indenting looks like, keeping your tags neatly organized is critical; otherwise, you will quickly get lost when creating tables!

28. Displaying Tabular Data (cont.) • Recommended table code format: <table> <tr> <th>header for column 1</th> <th>header for column 2</th> </tr> <tr> <td>data: r1c1</td> <td>data: r1c2</td> </tr> </table> Let the <table> and <tr> tags be at the same indentation level. Indent the <th> or <td> tags 4 spaces from the <tr> tags that contain them. For <th> and <td> cells that have small amounts of content, place the open tag, cell content, and close tag for each cell together on their own line.

29. Displaying Tabular Data (cont.) • For cells that contain multi-line data, put the <td> and </td> tags on their own lines, with the multi-line content on the lines between them, indented 4 additional spaces: <tr> <td> Multi-line content goes here, indented an additional 4 spaces. </td> </tr>

30. In-class Exercise Note: table width=500px table header background color=#339900 • In-class Exercise: Go to http://www.factmonster.com/ipka/A0004986.html and create a web page that displays the 2004 populations of all the states that begin with the letter “C”, along with their 2004 population rankings.

31. More CSS CSS Classes

32. CSS Classes • In the previous in-class example, you set the table’s width to 500 pixels by creating a table entry in your CSS file: table { width: 500px;} • Does anyone see a problem with this?

33. CSS Classes • In the previous in-class example, you set the table’s width to 500 pixels by creating a table entry in your CSS file: table { width: 500px;} • Does anyone see a problem with this? • What if you want some tables to be 500 pixels wide, and others to be 300 pixels wide?

34. CSS Classes • The problem with re-defining the look of a basic HTML/XHTML tag is that it affects all instances of the named tag the same way. You often will want to have more control than that. • The solution? CSS Classes!

35. CSS Classes • In your CSS file, create an entry that begins with a dot (“.”), e.g., .wide { width: 500px; } .narrow { width: 300px; }

36. CSS Classes • CSS: .wide { width: 500px; } .narrow { width: 300px; } .red-on-blue { background-color: #0000cc; color: #cc0000; } .white-on-green { background-color: #006600; color: #ffffff; } • HTML: • <table class=“wide”> • <tr> • <th class=“red-on-blue”>col heading 1</th> • <th class=“red-on-blue”>col heading 2</th> • </tr> • <tr> • <td class=“white-on-green”>r 1, c 1</td> • <td class=“white-on-green”>r 1, c 2</td> • </td> • </table>

37. More CSS CSS Colors

38. CSS Colors • Colors can always be specified using the hexidecimal notation you’ve already learned: #ff003a = max red, no green, small amount of blue • There are also 16 pre-defined color names that you can use directly: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

39. CSS Colors • CSS: .wide { width: 500px; } .narrow { width: 300px; } .red-on-blue { background-color: blue; color: red; } .white-on-green { background-color: green; color: white; } • HTML: • <table class=“wide”> • <tr> • <th class=“red-on-blue”>col heading 1</th> • <th class=“red-on-blue”>col heading 2</th> • </tr> • <tr> • <td class=“white-on-green”>r 1, c 1</td> • <td class=“white-on-green”>r 1, c 2</td> • </td> • </table>

40. For Next Week • Read lessons 5 and 6 of HTML.NET’s free CSS tutorial at http://www.html.net/tutorials/css/ • Read SFSU’s instructions for how to obtain space on the SFSU web server: http://www.sfsu.edu/training/ (next week we’ll start uploading web pages to the remote server) • Purchase Adobe Dreamweaver if you haven’t already. We’ll start using it next week.