Web Development - PowerPoint PPT Presentation

About This Presentation
Title:

Web Development

Description:

... Logo that leads to homepage More guidelines Top Ten Guidelines for Homepage Usability 10-minute ... Arial Times New Roman Default Design Web Development ... – PowerPoint PPT presentation

Number of Views:104
Avg rating:3.0/5.0
Slides: 21
Provided by: Jakob61
Learn more at: https://www.uwosh.edu
Category:

less

Transcript and Presenter's Notes

Title: Web Development


1
Web Development
  • 311 Fall 2003

2
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

3
Developing and managing a web site
Publish (FTP)
Internet
Web developer
Access, publish
Business manager
4
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
  • lta href http//www.google.comgtSearch at
    Googlelt/agt
  • Search at Google

5
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/g
    ardenrocks

6
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

7
Partial 311 Flowchart
Not always hierarchical structure
8
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

9
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 groups 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?

10
FrontPage Tutorial
  • Startup
  • File location
  • Develop and test web on local machine. When its
    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

11
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

12
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

13
Coding in HTML
  • ltHTMLgt
  • lt/HTMLgt

Every HTML file must begin and end like this
14
Coding in HTML
  • ltHTMLgt
  • ltHEADgt ltTITLEgtMy first Web pagelt/TITLEgt
  • lt/HEADgt
  • lt/HTMLgt

Appears in browser title bar
Nothing inside HEAD appears on actual page
15
Coding in HTML
  • ltHTMLgt
  • ltHEADgt ltTITLEgtMy first Web pagelt/TITLEgt
  • lt/HEADgt
  • ltBODYgt
  • lt/BODYgt
  • lt/HTMLgt

Page content goes inside BODY tags
16
Coding in HTML
  • ltHTMLgt
  • ltHEADgt ltTITLEgtMy first Web pagelt/TITLEgt
  • lt/HEADgt
  • ltBODYgt
  • ltH1gtTop Level Headinglt/H1gt
  • ltpgtA 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.
  • ltpgtA new ltbgtboldlt/bgt paragraph.
  • ltimg srcimage1.gifgt
  • lta hrefhttp//www.google.comgtSearchlt/agt
  • lt/BODYgt
  • lt/HTMLgt

Picture
Hyperlink
17
Hyperlink from image
  • Put image inside the lta href...gt tags instead of
    text
  • ltA HREF"http//www.mypage.com"gt
  • ltIMG SRC"http//www.myimage.com/myimage.gif"gt
  • lt/Agt

18
More detail about HTML Tags
  • Structure of every tag
  • ltELEMENT ATTRIBUTEvaluegt
  • Example
  • ltH1 AlignmentcentergtCentered Headinglt/H1gt
  • ltimg src../images/mypic.img
  • Different tags have different possible attributes

19
FrontPage and HTML
  • Dont use Frontpage to handcode HTML
  • Itll 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)

20
Coming up
  • Thursday
  • Lab DB Project or Problem 4
  • Tuesday TBD
  • Thursday
  • Gobble-gobble, thank you
Write a Comment
User Comments (0)
About PowerShow.com