Click anywhere to start

1. Click anywhere to start

2. Introduction to Web PagesSupplement to EDUC 211Educational Technology Portfolio I http://www.unca.edu/education/educ211

3. OBJECTIVE Introduce to the beginning web page author web terms and concepts.

4. INTRODUCTION TOWEB PAGES OUTLINE • Goals of a web page. • Define web terms. • Concepts • Web tools (Microsoft FrontPage and others). • Suggestions about web sites.

5. GOALS OF A WEB PAGE Clearly communicate intended/appropriate information to the target audience. (The target audience can be any combination of  parents, visitors, colleagues and students.) Provide effective access to desired resources.(Effective student access to resources can effectively expand content contact time and variety, both inside and outside the classroom.)

6. DEFINITIONS • HTTP • HTML • FrontPage • Browser • index.htm • Web Page • Web Site • Home Page  • URL • Hyperlink

7. Web Page • Is a text file. • Contains a combination of key-words or codes and user defined material. (For example text, locations for images and/or other web pages.) • Is structured in format.(In accordance to HTML requirements.)

8. Web Site Grouping of web pages in logical collection.

9. Home Page A web page that is typically the location of the first page in a series of related pages or web site.

10. URL Uniform Resource Locator (Formerly: Universal Resource Locator) –is a standardized unique address scheme for web pages and content on the World Wide Web. Uniform ---------------

11. Hyperlink Special areas on a web page when clicked takes you to another URL. Referred to as a link.

12. HTTP HyperText Transfer Protocol –Protocol used to communicate requests and information between a browser and web page server. Other Protocols • file:// - Reading HTML files from local hard drive • ftp:// - File Transfer Protocol - Download files from a host server • news:// - Usenet protocol for reading news groups • gopher:// - An information system designed for Unix computers • telnet:// - Telnet is a protocol for interactive sessions

13. HTML HyperText Markup Language –The language or code that the browser uses to format the text and graphics on the screen.

14. FrontPage Application that includes FrontPage Explorer and FrontPage Editor. From Getting Started with Microsoft FrontPage 98, “You use the FrontPage Explorer to create the structure or layout of your Web site” and “[you] use the FrontPage Editor to create, design, and edit World Wide Web pages.”

15. FrontPage  FrontPage Editor  FrontPage Explorer

16. Browser A client program (software) that is used to look at various kinds of Internet resources

17. index.htm The most common name* of the first file that is looked for in a web directory if you do not specify a file name. If you go to the URL: http://www.unca.edu/education/edtech/workshops/ The actual page that is interpreted by the browser in the above example is the file “index.htm” or:http://www.unca.edu/education/edtech/workshops/index.htm Therefore, it is a good idea to make “index.htm” your home page or splash page. * Other common names can include: index.asp, index.html and default.htm

18. CONCEPTS • HTML • Browsers • Web pages • Web tools

19. HTMLWhen HTML is “working” it looks like:

20. HTML is actually text:(The file below contains 12380 characters excluding spaces.Approximately ⅓ of the actual file is visible below.)

21. HTML – HyperText Markup Language

22. HTML – HyperText Markup Language The language that browsers use toknow how to display the contents of a web page.

23. Examples of browsers Netscape Internet Explorer Opera Chrome (Google) Safari (Apple) Firefox

24. Is a text file. Contains a combination of key-words or codes and user defined material.(For example text, locations for images and/or other web pages.) Is structured in format.(In accordance to HTML requirements.) web page

25. web page Same text file interpreted by browser Small part of previous HTML text file

26. web site Screen capture from: www.dictionary.com

27. Web tools • Web tools significantly simplifies the creation of web pages and the generation of HTML code. • Allows a WYSIWYG interface to creating web pages.(WYSIWYG – What You See Is What You Get.)

28. A few common web tools • Microsoft FrontPage (Dead product!)(Replaced by MS SharePoint Designer) • Most current application suites. Microsoft Office OpenOffice Corel Office • WordPad and notepad (Text editing) • Flash / Dreamweaver / GoLive /ColdFusion… • Seamonkey Composer and Nvu (open source, free BUT…) • Others: http://en.wikipedia.org/wiki/List_of_HTML_editors FREE!

29. SUGGESTIONS • Plan before starting a serious site. Saves time and effort. Storyboard if you need to. • Know your audience. Anticipate needs. • Keep pages and site structures simple and clean. • Keep pages within a site similar in style and layout. • Useful, easy to find information is a good thing. • Check your pages in other browsers and in browsers on different operating systems. • Check download speeds. Slow loading pages make for a very unhappy audience. • Keep image file sizes to a minimum and hold the number of images per page low. Reuse the same images if possible within a site or on a page. Less can be a whole lot more... • Emulate good examples of pages/sites found on the web. Isolate why a page/site works. • A tool get easier the more it is used.

30. Audience Play to your audience. Know who they are and anticipate their needs. Clearly communicate intended/appropriate information to the target audience. Usually, a person visiting your page is looking for information. Can they find it quickly and easily? Useful, easy to find information is a good thing. Remember, you may be a member of your audience. As a tool-maker you can put the tools and resources you often need, on your site, a click away.

31. Quote Most people visit a web site to solve one or more of these four problems: • They want/need information. • They want/need to make a purchase / donation. • They want/need to be entertained. • They want/need to be part of a community. Given: A web site exists to solve users’ problems. Then: The effective web-designer must successfully address the question: What problems does the page I'm designing solve? Image from and text derived from “Biggest Mistakes in Web Design 1995-2015” http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html

32. www.unca.edu/education Noncommercial site.Designed to disseminate general and specific standardized information to a target audience of current students, prospective students, alumni, parents, visitors, cooperative groups, faculty and staff.

33. www.disney.com Commercial site.Designed to reinforce product loyalty and generate product interest in a broad range of the general public.

34. Brush Creek Elementary SchoolHomework Help Page Noncommercial site. Designed to disseminate general resource information to a target audience of elementary students, parents, faculty and general public.

35. and one more thing… “Sites” feature of your UNCA email (AKA Google-mail) account

36. Done

37. http://www.unca.edu/education/educ211 frandall@unca.edu Fran Randall