ITEC 745

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 dont wrap content

4
Tags

• Tags that wrap content
• Open tag lttaggt
• Close tag lt/taggt
• Between the open and close tags is the content
• lttaggtcontent goes herelt/taggt
• e.g., lth1gtTop Level Heading Goes Herelt/h1gt
• Tags that dont wrap content
• Open and close all at once lttag /gt
• No separate open or close tags, and no content
  outside the angle brackets, e.g.
• lthr /gt
• ltimg srca_photo.jpg altphoto of something /gt

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 windows content area,
  and
• The body a section that does render in the
  browser windows content area

6
Required Minimum Markup

• Minimum web page
• lthtmlgt
• ltheadgt
• lttitlegtThis is my titlelt/titlegt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

Head section
NOTE Nothing can be legally placed between the
close of the head section (lt/headgt) and the start
of the body section (ltbodygt). Dont put any tags
or content here! Tags go only in the head or body
section, never between!
Body section
7
Tags Learned So Far

• lthtmlgt lt/htmlgt ? Wraps around the head and body
  sections of your HTML code
• ltheadgt lt/headgt ? Defines the head section of your
  page. Tags placed in the head section (i.e.,
  placed after ltheadgt but before lt/headgt) do not
  appear in the web browsers main content area,
  though they may appear elsewhere (e.g., the title
  gets displayed in the top title-bar of the
  browsers window)

8
Tags Learned So Far (cont.)

• ltbodygt lt/bodygt ? 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 ltbodygt but before lt/bodygt
• lth1gt lt/h1gt ? Defines the top-level heading for
  your web page. Subheadings can be marked with
  lth2gt lt/h2gt, and sub-subheadings with lth3gt lt/h3gt,
  and so on down to lth6gt lt/h6gt. Dont 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.)

• ltblockquotegt lt/blockquotegt ? 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 (ltpgt lt/pgt) tags
  inside the blockquoted section, as necessary
• ltcitegt lt/citegt ? Identifies text as being the
  title of a substantial work, such as a movie or
  book title. Dont use this tag just to get italic
  font!
• ltemgt lt/emgt ? Used to indicate words that should
  be emphasized. Dont use this tag just to get
  italic font!

10
Tags Learned So Far (cont.)

• ltigt lt/igt ? Generic italic font. Dont use this if
  ltcitegt or ltemgt 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 well cover
  in another week or so.
• ltstronggt lt/stronggt ? Used to indicate words that
  should be read with a strong emphasis. Dont
  use this tag just to get bold font!

11
Tags Learned So Far (cont.)

• ltbgt lt/bgt ? Generic bold font. Dont use this if
  ltstronggt would more accurately reflect the reason
  for the bold.
• ltpgt lt/pgt ? Marks text as belonging to a
  paragraph.

12
Tags Learned So Far (cont.)

• ltimg srcname of image file goes here
  altrequired alternate text goes here /gt ?
  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.
• lthr /gt ? Places a horizontal rule (line) on your
  page.

13
Tags Learned So Far (cont.)

• ltbr clearleftrightall /gt ? Forces
  subsequent text or other elements onto the start
  of the next line on your page, ending the flow of
  text around an image.
• lta hrefabsolute or relative URL goes
  heregtText of hyperlink goes herelt/agt ? Marks a
  hyperlink to another page or resource on the web.
  The text between the lta hrefurlgt tag and the
  lt/agt tag appears by default in blue underlined
  font, so readers know its clickable.

14
Images (cont.)

• Tag (simplest form) ltimg srcimage.gif
  altalt text /gt or ltimg srcimage.jpg
  altalt text /gt
• 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 cant 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!
• ltimg srcimage.gif altalternate text goes
  here /gt

15
Images (cont.)

• More image attributes
• Align specify how the image affects the flow of
  text
• ltimg srcimage.gif altalt text
  alignright /gt
• ltimg srcimage.gif altalt text
  alignleft /gt
• Cancel the alignment attributes effect with
• ltbr clearright /gt
• ltbr clearleft /gt
• ltbr clearall /gt
• See http//www.htmlref.com/examples/chapter05/brc
  lear_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)
• ltimg srcimage.jpg height240 width320
  border2 hspace10 vspace10 altalternate
  text goes here /gt

17
Images (cont.)
ltimg srcuser_illusion.gif" width"150"
height"237" hspace"20" vspace"10" alt"cover
of The User Illusion by Tor Norretranders"
align"left /gt
18
HTML Entities
Complete list http//www.december.com/html/spec/l
atin1.html

• Allows you to include meta characters in your
  web pages
• E.g., cant write I like to use the ltstronggt
  tag! in your web page because the browser will
  interpret ltstronggt as an unclosed tag!
• Instead write I like to use the ltstronggt
  tag!
• Entities begin with an ampersand () and end with
  a semicolon (). They allow meta and foreign
  characters into your web pages 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.edu80/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. Do not put 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
• ltulgt
• ltligtThis is the first List Itemlt/ligt
• ltligtThis is the second List Itemlt/ligt
• ltligtThis is the third List Itemlt/ligt
• lt/ulgt
• ltpgt
• 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.
• lt/pgt

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
• ltolgt
• ltligtThis is the first List Itemlt/ligt
• ltligtThis is the second List Itemlt/ligt
• ltligtThis is the third List Itemlt/ligt
• lt/olgt
• ltpgt
• Since this is an ordered list, each list
  item is preceded by a number, instead of a
  bullet.
• lt/pgt

25
Definition Lists

• Definition lists are intended for marking lists
  of terms and definitions
• ltdlgt
• ltdtgtThis is term 1lt/dtgt
• ltddgtThis is term 1s definitionlt/ddgt
• ltdtgtThis is term 2lt/dtgt
• ltddgtThis is term 2s definitionlt/ddgt
• lt/dlgt
• ltpgtTo maintain the structure, not layout
  philosophy of the web, you should only use
  definition lists for terms and definitions, not
  for managing indents.lt/pgt

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)
• lt!-- begins a comment
• --gt ends a comment
• Comments can span multiple lines of code and
  content
• Example
• lt!-- This is a comment. It
  will be ignored by the web browser. --gt

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
• KnowledgeCan the learner recall facts and other
  fundamental information?
• ComprehensionCan the learner restate a solution
  in his or her own words?
• ApplicationCan the learner apply classroom
  ("book") learning to new situations in the real
  world?
• AnalysisCan the learner deconstruct complex
  ideas to understand how they are formed from
  simpler parts? Can the learner tell the
  difference between facts and inferences?
• SynthesisCan the learner construct complex ideas
  by drawing together multiple previously
  unconnected ideas to create a new understanding?
• EvaluationCan 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)

• Lets 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
• Ems 1em

Fixed size, cant be changed in users browser.
Relative size, can be changed in users 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
  ltlinkgt tag
• ltlink hrefitec745.css relstylesheet
  typetext/css /gt
• The ltlinkgt tag must be placed in the head section
  of your page
• ltheadgt
• ltlink hrefitec745.css relstylesheet
  typetext/css /gt
• lttitlegtTitle of My Page Using CSSlt/titlegt
• lt/headgt

43
In-Class Exercise 2
Create a CSS File to Convert Your Blooms
Taxonomy Page into this Colorful Grotesquery!
44
In-Class Exercise
Background color is rednone, green99,
blueff Text color is redmax, greenmax,
bluenone
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 redmax,
greencc, bluecc
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
• KnowledgeCan the learner recall facts and other
  fundamental information?
• ComprehensionCan the learner restate a solution
  in his or her own words?
• ApplicationCan the learner apply classroom
  ("book") learning to new situations in the real
  world?
• AnalysisCan the learner deconstruct complex
  ideas to understand how they are formed from
  simpler parts? Can the learner tell the
  difference between facts and inferences?
• SynthesisCan the learner construct complex ideas
  by drawing together multiple previously
  unconnected ideas to create a new understanding?
• EvaluationCan 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.NETs 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.