Web Development 311 Fall 2003 311 Fall 2003
Web Development 311 Fall 2003 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 ) P lish b u P (FT Web developer Web server Internet Extranet server Access, publish Intranet server Business manager 311: Fall 2003 3
Web basics • Hyper. Text Transfer Protocol (HTTP) – Browser sends server an HTTP request – Server sends browser an HTTP response – No established connection between the two computers • Hyper. Text 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. Front. Page) • Means of publishing files – FTP program or built into editor • Web server – IIS or Apache are most popular – IIS can have Front. Page extensions – Where is it hosted? • Domain name – Some ISPs will let you have your own domain name – www. gardenrocks. com vs. www. my. ISP. 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 Titan. Web • 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
Front. Page 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
Front. Page 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
Front. Page Tutorial - 3 • Managing a web site – Multiple pages, folders – Navigation – Shared borders, frames • Publishing to web server – UWO server does not have Front. Page 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> <H 1>Top Level Heading</H 1> <p>A simple paragraph of text. <p>A new <b>bold</b> paragraph. Picture <img src=“image 1. 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 • <H 1 Alignment=center>Centered Heading</H 1> • <img src=“. . /images/mypic. img” – Different tags have different possible attributes 311: Fall 2003 18
Front. Page 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 Word. Pad – 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
- Slides: 20
