Website Development

1
Website Development Management
MIS 3353 -- Fall 2002

• Introduction Overview

Instructor John Seydel, Ph.D.
2
Student Objectives

• Outline the major course components
• Locate course materials and homework
• Define web page, website, homepage, browser,
  server
• Explain static versus interactive pages
• Contrast design and development
• Identify parts of a URL
• Create basic web page, to include
• Headings, paragraphs, and lists
• Links (absolute/relative, http, mailto)
• Images
• Organize server space for website
• Post pages/files to server

3
Lets Get Started

• Course overview
• Computer languages
• Course materials
• Platform to be used

4
What are We Doing Here?

• Studying the technical aspects of creating web
  pages and websites
• Creating the code behind the pages
• The homebuilder rather than the architect (more
  on this at a later date)
• Three major aspects to be covered
• HTML (actually, XHTML), starting today
• Client side scripting, starting in about 5 weeks
• Server side scripting, final third of class
• Essentially, developing applications for delivery
  through the Web (or intranets)

5
Well Be Using Five Computer Languages!

• Markup XML (i.e., HTML)
• Scripting
• JavaScript on the client side
• VBScript on the server
• Database SQL
• Stylesheet CSS

6
Course Materials

• Course website
• Syllabus
• Office hours
• Texts (used as reference guides)
• Course description, objectives, expectations
• Grading
• Portfolio site starter site the good, the bad,
  and the ugly
• Exams quizzes
• Homework
• Handouts
• Always under construction (i.e., evolving)
• Tour . . .
• Reserve materials at Library
• Various websites (e.g., WDVL, LearnASP, . . . )

7
Our Platform

• OS Win2000 (also XP, ME, 98)
• User agent (i.e., browser)
• IE 6.0 or higher
• But always compare to results in others
• Editor Arachnophilia 4.0 (and NotePad some)
• WS_FTP 4.1
• IIS 5.0 (running on AITP server)
• MS PhotoEditor 3.01
• Flash MX
• But not
• FrontPage
• DreamWeaver
• Other WYSIWYG tools

8
Now, Some Web Concepts

• Website basics
• New look at the input/process/output concept
• All about URLs
• File organization (folders)

9
Overview of Web Basics

• Web file concepts/terminology
• Web page, website, web
• Home page (default.htm, index.html, . . . )
• Object files (e.g., graphic images, sounds,
  applets, . . . )
• Browser/server interaction
• User agent (typically running browser) requests
  file/page
• Then
• Page (and related files) pulled from local cache
• Or server retrieves and sends
• Pages
• Static
• Interactive client side and server side
• Simply a modern means of processing data input,
  processing, output

10
Input / Processing / Output
(Program code VB, Java, . . . )
Input (data)
Output
Process/Program
Browser/orServer
HTML file (text)
Web page(s)
Rich includes programming, markup, pointers to
files, . . .
11
Anatomy of a URL

• Example
• http//www.clt.astate.edu80/jseydel/mis3353/syll3
  353.htmtext
• Protocol
• Assumed is http
• Others mailto, ftp, file (i.e., local resource),
  . . .
• Location of the computer (corresponds to IP)
• Domain
• Domain name
• Machine
• Port (not part of IP) 80 is standard for http
• Location on the computer
• Folder
• Subfolders
• File extension (.htm, .asp, .html, .php, . . .
  )
• Bookmark (anchor)

12
Folders Example Suzy Student

• Root (folder/file names emphasized)
• default.htm (home page for website)
• personal.htm (personal info page)
• images
• LogoASU.gif (ASU logo)
• torch.gif (background logo)
• working_.gif (man working image)
• exercises
• default.htm (start page for exercises folder)
• Folder structure organizes files within site
• Not just for web stuff all files should be
  organized into folders (e.g., MyDocuments/MIS2403/
  proj1.mdb)

13
Introduction to Markup Languages

• What is markup
• Anatomy of a web document
• Markup by example
• Rules to follow
• Web publishing via FTP
• Lab exercise

14
Markup, Whats That?

• Languages for describing text
• Standard generalized markup language (SGML)
• Extensible markup language (XML)
• Hypertext markup language
• HTML
• XHTML
• Read as data file by browser
• HTML (or XHTML) file contains
• Content
• Markup
• Can incorporate functionality (JavaScript)
• Example
• FirstHTML.htm Suzy Jo Student
• Now modify lth1gtSuzy Jo Studentlt/h1gt
• Take a look at an entire document

15
Recall
(Program code VB, Java, . . . )
Input (data)
Output
Process/Program
Browser/orServer
HTML file (text)
Web page(s)
Rich includes programming, markup, pointers to
files, . . .
16
Web Documents

• HTML file contains content and markup
• Markup elements
• Three general categories
• HTML markup
• Head
• Body
• Script markup ltscript . . . gt . . . lt/scriptgt
• Style sheet markup ltstyle . . . gt . . .
  lt/stylegt
• HTML markup tags describe content
• Structural (e.g., paragraph, heading, list, . . .
  )
• Descriptive indicates contents purpose (e.g.,
  title, . . . )
• Stylistic i.e., display, but should opt for
  style sheets instead
• Syntax
• Opening closing tags
• Within opening tag attributes (describe
  elements)

17
Markup Syntax

• Standard elements (e.g., paragraph)
• lttag attr1... attr2... . . .gt
• Content
• More content
• . . .
• lt/taggt
• Empty elements (e.g., image)
• lttag attr1... attr2... . . . /gt
• Note
• Browsers are very forgiving, but dont try to
  take advantage use good coding practices
  (indentation, closing tags, etc.)
• Many ways to do most things, and many will work
  but dont follow good practice hence, for the
  next 15 weeks, do it my way!

18
HTML By Example

• End product home page for Suzy Student
• Lets start with pure content on the local disk
• Basic text file (see handout)
• How it looks in the browser
• Now lets add some tags (save refresh)
• Structure
• Overall containerlthtmlgt
• Main portions ltheadgt and ltbodygt
• Description lttitlegt
• Display style ltigt
• Then an attribute for the body tag
• stylebackground-imageurl(images/torch.gif)

19
Markup Tags Well Be Using Today

• Structural
• Organizational lthtmlgt, ltheadgt, ltbodygt
• Within body lth1gt, lth2gt, ltpgt, ltulgt, ltligt
• Descriptive
• Referring to other files ltimg /gt, ltagt
• Organizational lttitlegt
• Other ltemgt, ltstronggt
• Stylistic
• Appearance ltigt, ltbgt
• Other lthr /gt, ltbr /gt
• This is just a quick dirty introduction more
  on all these coming later

20
Working Through the Example (a)

• Lets create some headings
• lth1gt and lth2gt for first and second level
• Center first level
• Italicize second level using ltemgt, not ltigt
• Add the ASU logo
• Use ltimg /gt tag note attributes, relative
  address
• Add a line break ltbr /gt to separate
• Designate a paragraph using ltpgt
• Incorporate a hyperlink for ASU
• Use ltagt tag and note attributes
• Note use of absolute reference

21
Working Through the Example (b)

• Create bulleted list
• Use ltulgt tag to contain entire list
• Use ltligt tag to mark each list element
• Make list bold
• Use ltstronggt tag, not ltbgt
• Contain entire list with this tag set
• Create hyperlinks to internal pages
• Within same folder
• Folder one level below
• Insert horizontal rule using lthr /gt tag

22
Working Through the Example (c)

• Make contact info a bold paragraph with small
  font
• Use ltpgt and ltstronggt tags
• Use style attribute to center and reduce font
• Add an email link
• Use ltagt tag and mailto protocol for the href
  attribute
• May or may not work, depending upon browser setup
• Follow the rules . . .

23
Some Rules

• Use lowercase for tags attributes
• Quote attribute values
• Use relative references for resources on same
  server
• Always use closing tags
• Nest elements properly close in reverse order of
  opening
• Use indentation consistently and to make code
  readable
• No more than 80 characters per line of code
  break long tags into multiple lines, typically
  one per attribute
• Avoid deprecated elements, e.g., ltfontgt, ltigt, ltbgt
• Use no spaces in file names
• Treat all URLs and other resource names as if
  case-sensitive

24
Getting Files Onto the Web

• Use
• FTP through IE
• And Windows Explorer
• Open both IE and Windows Explorer
• In Windows Explorer, navigate so that location of
  files is shown in left panel and contents in
  right
• Use IE to navigate to ftp//aitp.astate.edu
• Enter user name, first initial plus last name
  (e.g., sstudent)
• Enter password (last 4 digits of student number)
• Drag drop
• Select files/folders in Windows Explorer
• Drag (or copy) to folder in IE
• Your own web space for this course
• http//aitp.astate.edu/sstudent

25
Now, Its Your Turn Lab Exercise

• Floppy disk to be handed out
• Root folder contents
• default.htm (skeleton home page for website)
• personal.htm (dummy personal info page)
• /images
• LogoASU.gif (ASU logo)
• torch.gif (background logo)
• working_.gif (man working image)
• /exercises
• default.htm (dummy start page for exercises
  folder)
• Work with these files and mirror structure on web
  server
• Edit default.htm create content and tags
  personalize
• When done, post to website
• Finished product should look like Suzys but
  should have information concerning you

26
About the Homework . . .

• Where?
• When?
• Other issues?

27
Summary of Todays Objectives

• Outline the major course components
• Locate course materials and homework
• Define web page, website, homepage, browser,
  server
• Explain static versus interactive pages
• Contrast design and development
• Identify parts of a URL
• Create basic web page, to include
• Headings, paragraphs, and lists
• Links (absolute/relative, http, mailto)
• Images
• Organize server space for website
• Post pages/files to server

28
Appendices
29
Browser/Server Interaction
Alternatively resources pulled from cache