Web Development 311 Fall 2003

311: Fall 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 Developing and managing a web site Web server Intranet server Extranet server Internet Web developer Business manager Access, publish Publish (FTP)

311: Fall 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 – Search at Google Search at Google

311: Fall 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 – vs.

311: Fall 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 Planning the content –Draw a flowchart –E.g. 311 website

311: Fall Partial 311 Flowchart Welcome SyllabusAssignments IT Problem 1IT Problem 2 ScheduleGrades Not always hierarchical structure: Page 1 Page 2 Page 3

311: Fall 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: –Bad example: 311 web site Navigational tools –Persistent Menu (710-Osh web site using frames) –Sitemap or Index ( –Logo that leads to homepage More guidelines –Top Ten Guidelines for Homepage UsabilityTop Ten Guidelines for Homepage Usability

311: Fall 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 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 FrontPage Tutorial - 2 Entering information –Create a single-page web –Entering text –Adding images –Hyperlinks to text, images, and addresses –Using tables to set up layout

311: Fall 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 Coding in HTML Every HTML file must begin and end like this

311: Fall Coding in HTML My first Web page Appears in browser title bar Nothing inside HEAD appears on actual page

311: Fall Coding in HTML My first Web page Page content goes inside BODY tags

311: Fall Coding in HTML My first Web page Top Level Heading 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. A new bold paragraph. Search Hyperlink Picture

311: Fall Hyperlink from image Put image inside the tags instead of text:

311: Fall More detail about HTML Tags Structure of every tag: – –Example Centered Heading <img src=“../images/mypic.img” –Different tags have different possible attributes

311: Fall 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 Coming up Thursday –Lab: DB Project or Problem 4 Tuesday: TBD Thursday –Gobble-gobble, thank you