Document

Download Report

Transcript Document 

CIT 3353 -- Fall 2006
www.clt.astate.edu/jseydel/mis3353
Website Development &
Management
Introduction & Overview
Instructor: John Seydel, Ph.D.
Student Objectives
Upon completion of this class meeting, you
should be able to:






Locate the course materials and homework
Define: web page, website, homepage, browser,
server
Identify parts of a URL
Discuss browser/server interaction
Use basic web terminology
Understand basic markup concepts
First, Some Introductions
Course
People






Name
Major
Hometown
Web development experience
Something you hope to learn (in this class)
Something interesting, not associated with school
Course Materials
Course website:

Syllabus




Office hours
Texts
Course description, objectives, expectations
Grading





Portfolio site
Exams & quizzes
Homework
Handouts
Always under construction (i.e., evolving)
Various websites





Web Developers Virtual Library (www.wdvl.com)
The PHP Group (www.php.net)
MySQL website (www.mysql.com)
Apache website (www.apache.com)
Others . . .
Our Platform
OS:


WinXP on development end
SuSE Linux on server end
User agent (i.e., browser):


IE 6.0 or higher
But always compare to results in others (e.g., FireFox)
Editors: NotePad and PHP Designer
Web server: Apache 2
Flash MX (maybe)
But not



FrontPage
DreamWeaver
Other WYSIWYG tools
Our Development Environment
Multiple independent applications running
simultaneously
Browser windows (view web pages)


Local: solutions “disk”
Server
File manipulation windows



Windows Explorer (solutions “disk”)
Internet Explorer / FTP: server
Works best when these windows are cascaded rather than fullscreen or minimized
Source code editors



NotePad
PHP Designer
No WYSIWYG options (i.e., for this class)
Some Web Basics
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

Multiple processes all on the same server
 A server process listens for and responds to requests from
clients
 Servers using Internet protocols manage multiple listener
processes through the concept of ports
 A port corresponds to a memory location on a server
 Every request sent from a client to a server must specify:


Server’s IP address
Port number of the server process to which the message is
directed
It’s simply a modern means of processing data:
input, processing, output . . .
Input / Processing / Output
(Program code: VB, Java, . . . )
Input (data)
Process/Program
Output
HTML file (text)
Browser
&/or
Server
Web page(s)
Rich: includes programming, markup, pointers to files, . . .
HTML: A Computer Language
Programming languages

Standalone
 Procedural


Traditional (e.g., COBOL)
Object-oriented (e.g., Java, VB.NET)
 Nonprocedural (e.g., SQL)

Scripting languages (rely on other components)
 JavaScript
 VBScript
 Others (e.g., Perl)
Markup languages (e.g., SGML, HTML, XHTML, DHTML)
Stylesheet languages (e.g., CSS, XSL)
Database languages (e.g., SQL)
Note: we’ll use most of these during the semester
Markup Languages: An Overview
SGML
HTML
XHTML
MathML
XML
Others
GuestML
...
An Example: Home Page for
Suzy Student
First, what’s a



Web page?
Website?
Homepage?
Refer to the handout



Plain text file (index.txt)
Same text but marked up (index.html)
Output
Note the “hyper” nature of hypertext
Overview of Markup Syntax
Standard elements (e.g., paragraph)
<tag attr1=“...” attr2=“...” . . .>
Content
More content
...
</tag>
Empty elements (e.g., image)
<tag attr1=“...” attr2=“...” . . . />
Examples: see Suzy Student’s pages
Note:


Browsers are very forgiving, but don’t try to take advantage;
use good coding practices (indentation, closing tags, etc.)
Many ways to do most things, and many will work but don’t
follow good practice; hence, for the next 15 weeks, do it my
way!
HTML in Suzy Student’s Page
Main element <html> contains


<head> which contains <title> and others . . .
<body> which is where the content is
Within the <head> element


<title> which shows what will appear in the browser title bar
<style> which defines appearance variations from defaults
Within the <body> element
Headings <h1> and <h2>
 Image <img />
 Hyperlink <a>
 List <ul> which contains <li>
 Others: <br />, <p>, <hr />
Don’t forget the closing tags

Summary of Today’s Objectives
Locate the course materials and homework
Define: web page, website, homepage,
browser, server
Identify parts of a URL
Discuss browser/server interaction
Use basic web terminology
Understand basic markup concepts
Appendix
Some Web Skills
HTML or XHTML
JavaScript
PHP or ASP or CFML or CGI or . . .
CSS
SQL
FrontPage or DreamWeaver or . . .
Applications Involved
Anatomy of a URL
Example:
http://www.clt.astate.edu:80/jseydel/mis3353/syll3353.htm#text
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)
Browser/Server Interaction