Website Development

1
Website Development Management
CIT 3353 -- Fall 2006 www.clt.astate.edu/jseydel/m
is3353

• Going Live with Web Pages (b)

Instructor John Seydel, Ph.D.
2
Student Objectives

• Upon completion of this class meeting, you
  should be able to
• Access your website through HTTP and through FTP
• Compare and contrast XHTML and HTML
• Understand the basic concepts behind style rules
• Explain the major elements and attributes used in
  XHTML and HTML

3
Miscellaneous Items

• Lets start with a short quiz
• Should take 5-10 minutes
• Dont forget to put your name in the upper right
  portion
• Use a pencil (and eraser)
• Return quizzes / explain grading
• FTP issues firewalls, other . . . ?
• File system and naming instructions
• Use directory structure provided
• Locally
• On SuSE1
• File names for exercises note the format
• xch04_1.html
• pch07_3.html
• Quiz next Thursday closed book exercise using
  all markup covered so far (i.e., a preliminary
  exam)

4
Overview of the Editing Process

• Create (or edit) a page locally
• Use NotePad or other editor
• Save it using an appropriate filename and
  extension
• Upload the page to SuSE1 (into correct directory)
• Use your web browser to view the page on SuSE1
  (refresh as appropriate)
• Identify any changes needed
• Make changes locally and save again
• Upload again, refresh your browser, and view the
  modified page
• Repeat as needed

5
Lets Experiment

• Applications needed
• SmartFTP (connect to SuSE1)
• Internet Explorer (navigate to your website)
• NotePad
• Login to your SuSE1 account
• Note the predefined file system structure of your
  website
• Copy either
• The entire public_html directory to your local
  machine
• The entire contents of public_html to your local
  webroot directory (e.g., htdocs)
• Use NotePad to open index.html
• In case you foul up, replacement files are
  available on SuSE1
• UserID cit3353
• Password FunStuff06
• Edit index.html as instructed . . .

6
Convert from HTML to XHTML

• Recall that XHTML is just HTML formatted to meet
  XML specifications
• Follows rules for markup
• Case
• Quotes
• Deprecated elements
• Nesting elements
• Separates stylistic aspects from markup
• Includes DTD declaration namespace (add these
  now)
• lt?xml version"1.0" ?gt
• lt!doctype html public
• "-//W3C//DTD XHTML 1.0 Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transi
  tional.dtd"
• gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt

7
Now, Play with the Style Rules

• First, comment out that section
• Precede the ltstylegt tag with lt!--
• Follow the lt/stylegt tag with --gt
• Save
• Upload the file and refresh your browser
• Now, uncomment the style section
• Change the font-family to Comic Sans MS
• Save, upload, and refresh

8
Style Rules

• Customize HTML tag definitions
• Create custom look/theme
• More control over how pages look
• Provide information on formatting
• Can be
• Embedded within ltstylegt . . . lt/stylegt tags
• External separate file use ltlinkgt tag
• Inline as attributes within HTML tags
• Cascading Style Sheets (CSS) concept
  incorporates cascading levels of precedence

9
Working with Style Rules

• Typically there are two parts to a style rule
• Selector (e.g., body, h1, table, alink)
• Declaration (e.g., aligncenter, font-size 28px)
• Example body background-colorteal
• Typical format
• selector
• attributevalue
• attributevalue
• Note the examples in Suzy Students pages
• Well do more with style rules in a few weeks

10
Lets Look at References to Other Files

• Where?
• Hyperlinks
• Images (inline or background)
• Objects (e.g., Flash movies)
• And other places also, but beyond our scope
• Absolute referencing resources on another
  server
• Relative referencing
• Preferred
• Need to specify relative to calling document
• In same folder (./filename or just filename)
• In higher level folder (../filename or
  ../../filename or . . . )
• In lower level folder (./foldername/filename or
  just foldername/filename)
• In sibling folder (../foldername/filename)

11
About the ltimg /gt Element

• Required attributes
• src
• alt
• width
• height
• Will work with only the src attribute, but you
  should use all the above
• However, dont use width and height to resize the
  image display
• Instead edit the image file to the size it needs
  to be
• Consider using thumbnail images linked to
  full-sized files
• Lets link the ASU logo to the AState homepage .
  . .

12
Summary of Important HTML Body Elements

• What youll need to know (red indicates what you
  should know already)
• Hyperlinks ltagt
• Objects
• ltimg /gt
• ltobjectgt, or ltembedgt
• Lists ltulgt, ltligt
• Tables lttablegt, lttrgt, lttdgt
• Text blocks ltpgt, ltdivgt
• Display ltfontgt, ltigt or ltemgt, ltbgt or ltstronggt,
  ltcentergt
• Forms ltformgt, ltinputgt, ltselectgt, ltoption /gt
• Miscellaneous ltbr /gt, lthr /gt
• Also, HTML entities, such as nbsp
• Note these tags and their attributes in the
  source code for the pages youve done already

13
Summary of Todays Objectives

• Access your website through HTTP and through FTP
• Compare and contrast XHTML and HTML
• Understand the basic concepts behind style rules
• Explain the major elements and attributes used in
  XHTML and HTML

14
Homework Summary for Tuesday

• Work exercise 1 from Chapter 3
• Work exercise 1 from Chapter 4
• Post work to SuSE1
• Should be in /exercises directory
• Need to add links on exercises.html
• Start preparing for quiz exercise

15
Appendix
16
Using SmartFTP

• Enables transferring files between computers
• Upload/download
• Client to server / server to client
• Assumes
• Local files stored in My Documents
• Server files stored in public_html
• Process
• Start by navigating through Start Programs
  SmartFTP . . .
• Open connection to server (enter values into
  textboxes)
• Host www.suse1.astate.edu
• Login (lower case) your last name plus hyphen
  plus first initial
• Password (mixed case) first 4 characters of
  your first name plus last 3 digits of your
  student number
• Port 21
• Open Local Browser and navigate to My Documents
• Navigate server to public_html
• Tile windows horizontally
• Transfer files select file or folder and then
  click on arrow button

17
Browser/Server Interaction