Web Development

Download Report

Transcript Web Development 

Web Development
311 Fall 2003
Why web pages?
• Most companies have intranets,
extranets, and web sites
• Content can be changed quickly and
easily
– Make sure all links are still updated
• More and more people are putting up
personal pages
– E.g. blogs
311: Fall 2003
2
Developing and managing a
web site
Web
server
Internet
Web
developer
Extranet
server
Access, publish
Intranet
server
Business
manager
311: Fall 2003
3
Web basics
• HyperText Transfer Protocol (HTTP)
– Browser sends server an HTTP request
– Server sends browser an HTTP response
– No established connection between the two computers
• HyperText Markup Language (HTML)
– Ordinary text files, but “marked up” with code that the
browser interprets
• Hyperlinks
– Jump from page to page
– <a href = “http://www.google.com>Search at Google</a>
– Search at Google
311: Fall 2003
4
You need this to develop web pages
• HTML editor
– Text-based
• Can be very powerful at editing HTML code
• Tedious
– WYSIWYG (e.g. FrontPage)
• Means of publishing files
– FTP program or built into editor
• Web server
– IIS or Apache are most popular
– IIS can have FrontPage extensions
– Where is it hosted?
• Domain name
– Some ISPs will let you have your own domain name
– www.gardenrocks.com vs.
www.myISP.com/users/webs/gardenrocks
311: Fall 2003
5
Web Development Basics
• Planning the site
• User centered design
– Who are the users? Different user groups?
– What should they get out of visiting the site?
– Example www.uwosh.edu
• Planning the content
– Draw a flowchart
– E.g. 311 website
311: Fall 2003
6
Partial 311 Flowchart
Welcome
Syllabus
Assignments
IT Problem 1
Schedule
Grades
IT Problem 2
Not always hierarchical structure:
Page 1
Page 2
311: Fall 2003
Page 3
7
Navigation through the Site
• Site identity
– Each page needs to clearly identify where it belongs
– Good example: Most corporate web sites
– Bad example: UWO Calendar of events and TitanWeb
• Knowing where you are
– Give clues on where you are and how to get out of there
– Good example: www.about.com
– Bad example: 311 web site
• Navigational tools
– Persistent Menu (710-Osh web site using frames)
– Sitemap or Index (www.kelloggs.com)
– Logo that leads to homepage
• More guidelines
– Top Ten Guidelines for Homepage Usability
311: Fall 2003
8
10-minute exercise
• Define the purpose for your web site
– Is there more than one purpose?
• Determine possible audiences for your personal
web site
• What would be each group’s reason for visiting your
site?
• Draw a flowchart for some of the pages that might
be on your site
– Hierarchical? Sequential?
• Sketch the welcome page. How do you give each
group information about where to go?
• What basic navigational structure would you use?
311: Fall 2003
9
FrontPage Tutorial
• Startup
• File location
– Develop and test web on local machine.
When it’s ready to go, post it to the server
– A Frontpage web is a directory that has
some special files in it. To copy/move a
web you just copy/move the entire folder
311: Fall 2003
10
FrontPage Tutorial - 2
• Entering information
– Create a single-page web
– Entering text
– Adding images
– Hyperlinks to text, images, and email
addresses
– Using tables to set up layout
311: Fall 2003
11
FrontPage Tutorial - 3
• Managing a web site
– Multiple pages, folders
– Navigation
– Shared borders, frames
• Publishing to web server
– UWO server does not have FrontPage
extensions
– Must publish using FTP
311: Fall 2003
12
Coding in HTML
<HTML>
Every HTML file must begin and end like this
</HTML>
311: Fall 2003
13
Coding in HTML
<HTML>
Appears in browser title bar
<HEAD>
<TITLE>My first Web page</TITLE>
</HEAD>
Nothing inside HEAD appears on actual page
</HTML>
311: Fall 2003
14
Coding in HTML
<HTML>
<HEAD>
<TITLE>My first Web page</TITLE>
</HEAD>
<BODY>
Page content goes inside BODY tags
</BODY>
</HTML>
311: Fall 2003
15
Coding in HTML
<HTML>
<HEAD>
<TITLE>My first Web page</TITLE>
</HEAD>
<BODY>
<H1>Top Level Heading</H1>
<p>A simple paragraph of text. A simple paragraph of text. A
simple
paragraph of text. A simple paragraph of text.
A simple
paragraph of text. A simple paragraph of text.
<p>A new <b>bold</b> paragraph.
Picture
<img src=“image1.gif”>
<a href=“http://www.google.com”>Search</a>
</BODY>
</HTML>
Hyperlink
311: Fall 2003
16
Hyperlink from image
• Put image inside the <a href...> tags instead of text:
<A HREF="http://www.mypage.com">
<IMG
SRC="http://www.myimage.com/myimage.gif">
</A>
311: Fall 2003
17
More detail about HTML Tags
• Structure of every tag:
– <ELEMENT ATTRIBUTE=value>
– Example
• <H1 Alignment=center>Centered
Heading</H1>
• <img src=“../images/mypic.img”
– Different tags have different possible
attributes
311: Fall 2003
18
FrontPage and HTML
• Don’t use Frontpage to handcode
HTML
– It’ll mess up everything
– Can use it to view source
• Use Notepad or other text editor
– Not Word or WordPad
– Save with .html or .htm extension
• Save file and open in browser (refresh)
311: Fall 2003
19
Coming up
• Thursday
– Lab: DB Project or Problem 4
• Tuesday: TBD
• Thursday
– Gobble-gobble, thank you
311: Fall 2003
20