1 / 47

ITEC 745

ITEC 745. Instructional Web Authoring I Instructor: Ray Cole. Week 4. Recall from Last Week:. Writing a Web Page. Tags. Two kinds of tags: Tags that mark the beginning and end of content Tags that don’t wrap content. Tags. Tags that wrap content Open tag: <tag> Close tag: </tag>

hoffmana
Download Presentation

ITEC 745

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. ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 4

  2. Recall from Last Week: Writing a Web Page

  3. Tags • Two kinds of tags: • Tags that mark the beginning and end of content • Tags that don’t wrap content

  4. Tags • Tags that wrap content • Open tag: <tag> • Close tag: </tag> • Between the open and close tags is the content: • <tag>content goes here</tag> • e.g., <h1>Top Level Heading Goes Here</h1> • Tags that don’t wrap content • Open and close “all at once”: <tag /> • No separate open or close tags, and no content outside the angle brackets, e.g.: • <hr /> • <img src=“a_photo.jpg” alt=“photo of something” />

  5. Required Minimum Markup • Web pages have three sections • A prologue: more on this later • The head: a section that does not render (display) in the browser window’s content area, and • The body: a section that does render in the browser window’s content area

  6. Required Minimum Markup • Minimum web page: <html> <head> <title>This is my title</title> </head> <body> </body> </html> Head section NOTE: Nothing can be legally placed between the close of the head section (</head>) and the start of the body section (<body>). Don’t put any tags or content here! Tags go only in the head or body section, never between! Body section

  7. Tags Learned So Far • <html> </html>  Wraps around the head and body sections of your HTML code • <head> </head>  Defines the head section of your page. Tags placed in the head section (i.e., placed after <head> but before </head>) do not appear in the web browser’s main content area, though they may appear elsewhere (e.g., the title gets displayed in the top title-bar of the browser’s window)

  8. Tags Learned So Far (cont.) • <body> </body>  Defines the body section of your page. All content that you want the browser to display in its primary content area must be placed in the body section of your page (i.e., placed after <body> but before </body> • <h1> </h1>  Defines the top-level heading for your web page. Subheadings can be marked with <h2> </h2>, and sub-subheadings with <h3> </h3>, and so on down to <h6> </h6>. Don’t place paragraphs in your headings! Headings are meant to be short, like titles or chapter titles in a book

  9. Tags Learned So Far (cont.) • <blockquote> </blockquote>  Defines a lengthy passage quoted from a reference source. Mark the whole (possibly multi-paragraph) quotation with a single set of these tags, one to start and one at the very end. Nest paragraph (<p> </p>) tags inside the blockquoted section, as necessary • <cite> </cite>  Identifies text as being the title of a substantial work, such as a movie or book title. Don’t use this tag just to get italic font! • <em> </em>  Used to indicate words that should be emphasized. Don’t use this tag just to get italic font!

  10. Tags Learned So Far (cont.) • <i> </i>  Generic italic font. Don’t use this if <cite> or <em> tags would more accurately reflect the reason for the italics. Generally, this tag violates the “structure, not layout” philosophy of the web, and should be avoided. The correct way to apply generic italicization is with Cascading Style Sheets (CSS), which we’ll cover in another week or so. • <strong> </strong>  Used to indicate words that should be read with a “strong” emphasis. Don’t use this tag just to get bold font!

  11. Tags Learned So Far (cont.) • <b> </b>  Generic bold font. Don’t use this if <strong> would more accurately reflect the reason for the bold. • <p> </p>  Marks text as belonging to a paragraph.

  12. Tags Learned So Far (cont.) • <img src=“[name of image file goes here]” alt=“[required alternate text goes here]” />  Places an image on your web page. The name of the image file is specified in the src attribute. Remember, name your files in all lower-case letters, with no spaces. End your filenames with the appropriate extension, usually “.gif” for images with few colors or with transparencies, and “.jpg” for photographic images. • <hr />  Places a horizontal rule (line) on your page.

  13. Tags Learned So Far (cont.) • <br clear=“[left|right|all]” />  Forces subsequent text or other elements onto the start of the next line on your page, ending the flow of text around an image. • <a href=“[absolute or relative URL goes here]”>Text of hyperlink goes here</a>  Marks a hyperlink to another page or resource on the web. The text between the <a href=“[url]”> tag and the </a> tag appears by default in blue underlined font, so readers know it’s clickable.

  14. Images (cont.) • Tag (simplest form): <img src=“image.gif” alt=“[alt text]” /> or <img src=“image.jpg” alt=“[alt text]” /> • Other important attributes: • Alt: specifies alternate text to display in case the browser is unable to display the image (e.g., if the specified image file can’t be found, or if the browser is text-only (like “Lynx”), or if the “browser” is actually a screen-reader for the visually impaired). The alt attribute is required in XHTML! • <img src=“image.gif” alt=“alternate text goes here” />

  15. Images (cont.) • More image attributes • Align: specify how the image affects the flow of text • <img src=“image.gif” alt=“[alt text]” align=“right” /> • <img src=“image.gif” alt=“[alt text]” align=“left” /> • Cancel the alignment attribute’s effect with • <br clear=“right” /> • <br clear=“left” /> • <br clear=“all” /> • See: http://www.htmlref.com/examples/chapter05/brclear_src.html for details

  16. Images (cont.) • More image attributes • Height: specify the height of the image (in “pixels”) • Width: specify the width of the image (in “pixels”) • Border: specify the presence and width of a border around the image (in “pixels”) • Hspace: specify the horizontal space (in “pixels”) to be kept clear around the image horizontally (e.g., to its left and right) • Vspace: specify the vertical space (in “pixels”) to be kept clear around the image vertically (e.g., above and below it) • <img src=“image.jpg” height=“240” width=“320” border=“2” hspace=“10” vspace=“10” alt=“alternate text goes here” />

  17. Images (cont.) <img src=“user_illusion.gif" width="150" height="237" hspace="20" vspace="10" alt="cover of The User Illusion by Tor Norretranders" align="left“ />

  18. HTML Entities Complete list: http://www.december.com/html/spec/latin1.html • Allows you to include “meta” characters in your web pages • E.g., can’t write “I like to use the <strong> tag!” in your web page because the browser will interpret <strong> as an unclosed tag! • Instead: write “I like to use the &lt;strong&gt; tag!” • Entities begin with an ampersand (&) and end with a semicolon (;). They allow meta and foreign characters into your web page’s text

  19. Uniform Resource Locators (URLs) How to Read a URL

  20. Uniform Resource Locators (URLs) • Note: Uniform, not “universal”! • Example URL: http://www.sfsu.edu:80/~itec/program/index.html Port: 80 Scheme: http Hostname: wwwDomain: sfsu.edu Resource: index.html Path to resource: ~itec/program/

  21. URL Resource Paths and Names • Legal characters in URL resource paths and names include the following: • Lowercase letters “a” to “z” and uppercase letters “A” to “Z” • Digits “0” to “9” • The plus character “+” • The period character “.” • The dash character “-” • The underscore character “_” • …plus a few others, depending on context… • Note that the space character “ ” is not one of the allowable characters. Donotput spaces in your file names!

  22. This Week: Unordered (Bulleted) Lists, Ordered Lists, and Definition Lists

  23. 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> NOTE: list items can contain paragraphs, but paragraphs cannot contain lists!

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

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

  26. HTML/XHTML Comments Comments

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

  28. In-Class Exercise Create the Following Page (Content spans two PowerPoint slides, but see the rendered example that follows them for what you are trying to achieve)

  29. In-Class Exercise • Bloom's Taxonomy • Benjamin Bloom's famous taxonomy identifies three domains of learning: • Cognitive • Affective • Psychomotor • The cognitive domain is further divided into six major categories. They are in order, from most elementary to most sophisticated: • Knowledge—Can the learner recall facts and other fundamental information? • Comprehension—Can the learner restate a solution in his or her own words? • Application—Can the learner apply classroom ("book") learning to new situations in the real world? • Analysis—Can the learner deconstruct complex ideas to understand how they are formed from simpler parts? Can the learner tell the difference between facts and inferences? • Synthesis—Can the learner construct complex ideas by drawing together multiple previously unconnected ideas to create a new understanding? • Evaluation—Can the learner make a value judgement about the worth or value of objects and ideas?

  30. In-Class Exercise • Associating key words with each category can help you as an instructional designer to write learning objectives that target individual categories within the cognitive domain. Here are some useful key words associated with the Knowledge domain, along with their definitions as taken from The Free Dictionary, a free online dictionary. • Define • To state the precise meaning of (a word or sense of a word, for example) • Describe • To give an account of in speech or writing • Identify • To ascertain the origin, nature, or definitive characteristics of • Label • To identify or designate with a label; describe or classify • Select • To take as a choice from among several; pick out • This is not a comprehensive list of keywords associated with the Knowledge category, but it is enough for the purposes of this exercise.

  31. In-Class Exercise

  32. Intro to Cascading Style Sheets Taking Control of the Look of Your Web Page Elements with Cascading Style Sheets (CSS)

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

  34. Cascading Style Sheets (CSS)

  35. 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 • 6 hexadecimal (base-16) digits • In base-16, we count like this: • 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, …, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21,…, 29, 2A, …, 99, 9A, 9B, 9C, 9D, 9E, 9F, A0, A1, A2, …, FF

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

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

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

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

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

  41. 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; }

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

  43. In-Class Exercise 2 Create a CSS File to Convert Your “Bloom’s Taxonomy” Page into this Colorful Grotesquery!

  44. In-Class Exercise Background color is red=none, green=99, blue=ff Text color is red=max, green=max, blue=none Font is “Comic Sans MS” Bulleted and numbered list color is white (max for R, G, and B) Definition terms are bold Definition list color is red=max, green=cc, blue=cc

  45. In-Class Exercise • Bloom's Taxonomy • Benjamin Bloom's famous taxonomy identifies three domains of learning: • Cognitive • Affective • Psychomotor • The cognitive domain is further divided into six major categories. They are in order, from most elementary to most sophisticated: • Knowledge—Can the learner recall facts and other fundamental information? • Comprehension—Can the learner restate a solution in his or her own words? • Application—Can the learner apply classroom ("book") learning to new situations in the real world? • Analysis—Can the learner deconstruct complex ideas to understand how they are formed from simpler parts? Can the learner tell the difference between facts and inferences? • Synthesis—Can the learner construct complex ideas by drawing together multiple previously unconnected ideas to create a new understanding? • Evaluation—Can the learner make a value judgement about the worth or value of objects and ideas?

  46. In-Class Exercise • Associating key words with each category can help you as an instructional designer to write learning objectives that target individual categories within the cognitive domain. Here are some useful key words associated with the Knowledge domain, along with their definitions as taken from The Free Dictionary, a free online dictionary. • Define • To state the precise meaning of (a word or sense of a word, for example) • Describe • To give an account of in speech or writing • Identify • To ascertain the origin, nature, or definitive characteristics of • Label • To identify or designate with a label; describe or classify • Select • To take as a choice from among several; pick out • This is not a comprehensive list of keywords associated with the Knowledge category, but it is enough for the purposes of this exercise.

  47. For Next Week • Read lessons 1, 2, 3, and 4 of HTML.NET’s free CSS tutorial at http://www.html.net/tutorials/css/ • Create a CSS file and attach it to your interactive interview to spruce up its look. Turn it in next week, along with any images used and the XHTML pages. Your CSS filenames must end with “.css” • Download and read ITEC745-Week05.ppt.

More Related