ITEC%20745

1
ITEC 745

• Instructional Web Authoring I
• Instructor Ray Cole

Week 2
2
ITEC 715
Recall from Last Week

• Required Entry Skills
• Grading
• Homework Final Project
• No midterm or final exam
• Overview of Course Goals
• Fluency with XHTML and CSS
• Use of Adobe Dreamweaver (industry standard tool)
• Using instructional design principles to craft
  effective web sites to support the needs of
  learners, instructors, and instructional
  designers
• Academic Honesty

3
ITEC 715
Recall from Last Week

• No required textbook
• The important Web standards and documentation are
  all freely available online
• Recommended book
• Sams Teach Yourself Web Publishing with HTML and
  CSS in One Hour a Day by Laura Lemay and Rafe
  Colburn Sams Publishing, 2006, ISBN
  0-672-32886-0

4
Instructional Uses of the Web(examples)
5
Instructional Uses of the Web

• Examples
• http//www.sfsu.edu/
• School presence info, identity
• http//webcast.berkeley.edu/
• Course presence (ILT) syllabus, lectures,
  handouts, supplementary materials
• http//home.znet.com/ikorn/teaching.html
• Instructor presence Biography, CV (resume),
  courses taught, contact info, special projects
• http//www.ddiworld.com/WBT-course-demo/demo.html
• Web-based training (WBT), also known as
  e-learning, or sometimes online learning

6
What Is the World Wide Web?

• What is a network?
• Two or more computers connected by a wire (or,
  these days, by a radio wave or beam of light).
• What is an internet?
• Two or more networks connected by a wire (or,
  these days, by a radio wave or beam of light).
• What is the Internet?
• The worldwide, publicly accessible internet
  commonly used to carry email, web, and other data
  traffic.
• What is the WWW?
• A set of software services that run on the
  Internet (or any network that runs the
  appropriate networking software protocols).
• What is an intranet?
• Just like the Internet, but private to an
  institution of limited set of users.

network internet
7
WWW Pieces and Parts

• Web Browsers
• Firefox, Internet Explorer, Safari, Opera,
  Netscape, etc.
• Web Servers
• Apache, Microsoft IIS, etc.
• Web Sites
• Where all the content is located

Mosaic The first popular graphical web browser,
first released in 1993
8
The Web Browser

• What a web browser does (not a complete list)
• Accepts a URL from the end-user
• Based on the URL, sends requests for each web
  page and web page component (e.g., any embedded
  graphics or multimedia components) to the
  appropriate web server
• Receives a copy of the requested document from
  the web server, along with some additional
  information, such as the documents associated
  MIME type
• Decides, based on the MIME type and helper app
  associations, whether to display the document
  directly, or to launch it into a helper
  application
• Renders the document if it decided to display it
  directly. It does this by interpreting the HTML
  or XHTML code in the document, and translating
  that into a particular way of displaying the
  document
• Keeps local copies of recently-viewed web pages
  in order to display them more quickly if accessed
  again in the near future (local files stored in
  the browsers cache)

9
Browser Tricks

• View Source ? See the code that makes the web
  page you are currently viewing
• Forced Reload ? Force the browser to reload the
  page from the web server, even if there is a
  recent copy of the page still in the browsers
  cache
• Mozilla/Firefox Shift reload
• Internet Explorer Control refresh
• Safari Option refresh

10
More Browser Tricks

• Clear Cache ? Empty the browsers cache by
  deleting all files stored in it this guarantees
  that the next page you load will not be from the
  local cache
• Open in New Window ? Leave the current web page
  open, but follow a link and load it into a new
  browser window (allows you to see two or more
  pages at once). Can be done programmatically, too

11
This Week
Writing a Web Page
12
Anatomy of a Web Page

• Structure, not layout
• Markup marks sections by their function, not by
  how they look
• Headings, not Large font, bold
• Citations, not Italicize
• Quotations, not Change the indent
• Paragraphs, not Type a blank line to separate
• etc.

13
Tags

• Markup is implemented as tags and attributes
• Most tags come in two parts
• Open lttaggt
• Close lt/taggt
• Between the open and close tag comes the content
  that the tag marks
• ltcitegtTeach Yourself Web Publishinglt/citegt
• ltpgtThis is a short paragraph. It contains only
  two sentences, and they are placed between the
  open and close paragraph tags.lt/pgt

14
Tags (cont.)

• Some tags dont require content. They can be
  closed and opened all at once
• Place a horizontal rule (line) on the page lthr
  /gt
• Place an image (picture) on the page ltimg
  srcphoto.jpg altphoto of something
  interesting /gt
• The space before the slash
• XHTML specification says not required
• For compatibility with older browsers required

15
Tags (cont.)

• Note Lower case for all tags
• Required by XHTML standard
• Contradicts older HTML conventions
• White space tabs, spaces, newlines
• White space in content
• Collapsed e.g.,
• 5 spaces followed by a tab ? reduced to a single
  space
• 20 newlines ? reduced to a single space (use ltp
  /gt instead)

16
Attributes

• Most tags support one or more attributes
• Attributes are always attached to the open tag
• Associate special indentation rules with this
  paragraph
• ltp classfancy_indentgtThis paragraph will
  render with a fancy indent.lt/pgt
• Attributes come after the tag name but before the
  closing angle bracket
• ltimg srcmypictures/rayc.jpg altPhoto of Ray
  Cole /gt

The src attribute tells the browser where to find
the image file.
The alt attribute tells the browser what text
message to display if the browser cant display
or cant find the image file.
17
Required Minimum Markup

• Web pages have three sections
• A prologue sectionmore on this later ignore for
  now
• A head section that does not render (display) in
  the browser windows content area, and
• A body section that does render in the browser
  windows content area

18
Head Section Doesnt Display
19
Body Section Does Display
20
Required Minimum Markup

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

21
Other Useful Tags Headings

• Headings h1 h6
• lth1gtThis is the topmost headinglt/h1gt
• lth2gtThis is a subheadinglt/h2gt
• lth3gtThis is a sub-subheadinglt/h3gt
• etc
• lth6gtThis is a sub-sub-sub-sub-subheading!lt/h6gt

22
Headings
lth1gtITEC 745, Spring 2008lt/h1gt lth2gtClass
Descriptionlt/h2gt lth2gtContact
Informationlt/h2gt lth2gtClass Slideslt/h2gt
23
Other Useful Tags Paragraphs

• Paragraphs
• ltpgtThis is a paragraph.lt/pgt
• ltpgtHere is another paragraph.lt/pgt
• ltp /gt (empty paragraph)

24
Paragraphs
ltpgtThis class will give you a solid grounding
in web authoring fundamentals, focusing on three
key areaslt/pgt
25
Other Useful Tags Citations

• Citations
• ltpgtJ.R.R. Tolkien is most famous for his Middle
  Earth novels, ltcitegtThe Hobbitlt/citegt, ltcitegtThe
  Fellowship of the Ringlt/citegt, ltcitegtThe Two
  Towerslt/citegt, and ltcitegtThe Return of the
  Kinglt/citegt.lt/pgt

26
Other Useful Tags Block Quotes

• Block Quotes
• ltblockquotegtQuotation goes here.lt/blockquotegt

Block Quote
27
Other Useful Tags Strong, Em

• Strong
• ltpgtTo reiterate, I ltstronggtstronglylt/stronggt
  encourage you to keep the structure, rather than
  look, of your pages foremost in your mind.lt/pgt
• Emphasis
• ltpgtDo ltemgtnotlt/emgt be late!lt/pgt

28
Other Useful Tags Strong, Em

• Why use ltstronggt instead of ltbgt (for bold), since
  they usually look the same?
• ltstronggt identifies purpose, not look. Screen
  readers may read words tagged ltstronggt with a
  different inflection. Bold (ltbgt) is primarily a
  visual tag, and as such, really shouldnt be
  used, since it violates the webs structure not
  layout philosophy (use CSScovered later in this
  courseto affect the look of your web pages,
  including making words bold, instead).
• Why use ltemgt instead of ltigt (for italic)?
• Essentially, same answer as above.

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

30
HTML Entities Examples
Complete list http//www.december.com/html/spec/l
atin1.html

• Vowels with umlats
• Moumltley Cruumle
• Vowels with forward-tilted accents
• Mikloacutes Roacutesza
• Vowels with backward-tilted accents
• Departament de Fiacutesica Aplicada i
  Ograveptica, University of Barcelona
• Vowels with slashes
• Tor Noslashrretranders

31
Images

• Only two image formats are directly supported by
  the majority of browsers JPEG and GIF
• JPEG
• Filenames should end with the extension .jpg or
  .jpeg (preferably .jpg).
• Use this format when your image has lots of
  colors (e.g., a photographic image, or a lit 3-D
  model with lots of gradients).
• GIF
• Filenames should end with the extension .gif
• Use this format when your image has few colors
  (e.g., cartoons, drawings, simple illustrations
  and diagrams) or requires regions to be
  transparent.

32
Images (cont.)

• Tag (simplest form) ltimg srcimage.gif
  alttext description for screen reader /gt or
  ltimg srcimage.jpg alttext description for
  screen reader /gt
• The alt attribute is required in XHTML
• It 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).

33
Images (cont.)

• More image attributes
• Align specify how the image affects the flow of
  text.
• ltimg srcimage.gif altdescription
  alignright /gt
• ltimg srcimage.gif altdescription
  alignleft /gt
• Cancel the alignment attributes effect with
• ltbr clearright /gt
• ltbr clearleft /gt
• ltbr clearall /gt
• See http//www.htmlref.com/reference/appa/tag_bre
  ak.htm and htttp//www.htmlref.com/examples/chapt
  er05/brclear_src.html for details

34
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 (i.e., to its left and right).
• Vspace specify the vertical space (in pixels)
  to be kept clear around the image vertically
  (i.e., above and below it).
• ltimg srcimage.jpg height240 width320
  border2 hspace10 vspace10 altalternate
  text goes here /gt

35
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
36
Keeping Your Code Tidy
Indenting
37
Indenting

• To keep your code readable, you need to pay
  attention to how you use indentation.
• Use it to line up matching open and close tags.
  Remember that white space is collapsed anyway, so
  you can freely place line breaks around tags.

38
Indenting

• Poor indenting
• lthtmlgt
• ltheadgt
• lttitlegtblahlt/titlegtlt/headgt
• ltbodygtlth1gtBlah
• lt/h1gt
• ltpgtMy first paragraph.lt/pgt
• ltpgtMy 2nd.lt/pgtltpgtAnd my third.lt/pgtlt/bodygt
• lt/htmlgt

Better indenting lthtmlgt ltheadgt
lttitlegtblahlt/titlegt lt/headgt ltbodygt
lth1gtBlahlt/h1gt ltpgtMy first paragraph.lt/pgt
ltpgtMy 2nd.lt/pgt ltpgtAnd my third.lt/pgt lt/bodygt lt/
htmlgt
39
Tidy Code

• Recommendations
• Use 4 spaces to indent each level.
• Use line breaks to separate logical chunks of
  code.
• Use lower case for all tags (required by XHTML).
• Use lower case for all file names (e.g., the
  names of image files specified in the src
  attribute).

40
In-class Exercise

• Open ITEC-745-Week02-ICE.doc for the text.
• Using the text from the ITEC-745-Week02-ICE.doc
  Word file, create the web page shown at right.
  Watch out for smart quotes!
• Youll need to include a heading, an image,
  several vowel-with-slash entities, a blockquote,
  and several paragraphs.
• Dont forget the ltheadgt section!

41
In-class Exercise

• In-class review of student web pages

42
Photos

• Take or hand out digital photos to class for use
  in this weeks homework assignment.

43
For Next Week

• Imagine that youve just written an instructional
  design book. Your publisher has asked you to
  supply a short (3-5 paragraph) biography of
  yourself for the back cover of the book. Create
  this biography as web page. Make sure it includes
  a photo. Turn it in next week as an XHTML file
  (extension .html) along with the linked photo
  (extension .jpg).
• Download and read the ITEC745-Week03.ppt slides.