Web Publishing I

1. Web Publishing I Introduction to HTML and the Web Publishing Process

2. Who Am I & Who Are You? Me:Diane Cunningham You: Paired Interviews

3. Key Course URL • UCSD Web Pub Student Resources • http://www.technoweenies.com/webpub/ • Information on required textbooks • Information on available student resources (mailing list, vault of links, software, etc.)

4. Terminology

5. Internet Intranet Extranet World Wide Web Browsers Client Server URLs HTML DHTML XML XHTML ASP JavaScript Terminology

6. Internet: Publicly Accessible Web Servers

7. Intranet • Intranet: non-publicly accessible web servers • A network that is internal to an organization • Provides organization's users with same types of services available in the Internet • Intranet resources are available internally and are not located on the Internet • Usually if you have an intranet you have access the the Internet but a firewall is used to prevent access from the Internet to the intranet • A firewall is a security mechanism used to protect files and programs on the intranet from unwanted access

8. Internet Intranet TCP/IP Internet vs. Intranet

9. Extranet • You sometimes see the term extranet used in relation to the Internet and various Internet technologies • An extranet is an extension of an intranet that allows certain users outside of the intranet to have limited access to the intranet • Often used to allow vendors or suppliers access to information on an organization's intranet

10. World Wide Web Global Interactive Dynamic Cross Platform Distributed Graphical/Multimedia Hypertext/Hyperlink Information System

11. Browsers • You need a special program (called a Browser) so you can view information stored on the World Wide Web. On a personal computer you typically use • Netscape Navigator 3.x, 4.x, 6.x • Microsoft Internet Explorer 3.x, 4.x, 5.x, 6.x • The Browser interprets information, that is, it displays it on the screen and lets you move between linked items (hyperlinks)

12. World Wide Web URL URL URL URL Client Server HTTP IP Address: http://209.130.124.111/ URL: http://www.technoweenies.com/

13. URLs An URL is a: Uniform Resource Locator that is, a pointer to a location on the internet, an address: http://www.ucsd.edu http://geocities.com/gumby9/html/samples.html

14. The Internet Universe Chat & Conferencing Newsgroups FTP E-Mail Mailing Lists WWW Telnet Sites Gopherspace

15. Types Of URLs (in Browsers) • telnet://name_of_site • Remote computing with telnet • gopher://name_of_gopher_server • Menu Driven System for Information Research • ftp://name_of_site/directory/filename • The File Transfer Protocol • news:rec.food.cooking • mailto:diane@technoweenies.com • http://www.godiva.com

16. HTML • HyperText Markup Language • A subset of SGML • Standard Generalized Markup Language • Web pages are HTML Files • Created as a plain ASCII text file • Using Embedded codes • called tags • Tags • instructions for displaying text or linking to other Web documents <h2>Hello world!</h2>

17. HTML • HTML is a defined, standardized markup language • That standard was developed by the World Wide Web Consortium or W3C www.w3c.org • It is based upon SGML (Standard Generalized Markup Language) which is something of the "mother of all" markup languages • It is a language that uses tags to define the structure and sometimes the style of your text

18. HTML • As HTML grew it evolved • From version 1.0 to 2.0 to 3.0 to 3.2 and now to 4.0 • It has developed and gotten more and more complicated and the style and content tags have combined into one language • Eventually, the W3C decided that there was a need for a separation between the style of a Web page and the content • A tag that defines the content alone, such as <h1>, would remain in HTML while tags that define style, such as <font>, are deprecated in the latest version of HTML in favor of style sheets called "cascading style sheets" (CSS) – more on this in Web Pub II!

19. DHTML • DHTML: Dynamic HTML • DHTML is a set of enhancements to HTML (CSS, JavaScript and the Document Object Model) that was created to add interactivity to web pages • DHTML enables Web pages to update dynamically in response to user actions such as moving the mouse over text or clicking text, without having to download data from a server

20. XML • The eXtensible Markup Language is the language that the new version of HTML is based on • XML is also based on SGML but is less strict than SGML yet still providing the extensibility to create various different languages as they relate to your business or Personal need • XML is a language for writing markup languages • For example, if you are working on genealogy, you might create tags using XML to define the <father>, <mother>, <daughter>, and <son> in your documents • There are also several standardized languages already created with XML: • MathML for defining mathematics, SMIL for working with multimedia, and XHTML

21. XHTML • XHTML (eXtensible HyperText Markup Language) is really HTML reformatted to XML standards • There is NOT that much difference between the two (XHTML and HTML) ... but here are a few notable differences • XHTML is written in lower case • All XHTML tags must have an end tag • All attributes must be quoted in XHTML • XHTML attributes must have a name and a value • XHTML requires that tags are nested correctly

22. ASP • ASP: Active Server Pages • An .asp file is a text file that contains normal HTML tags and text as well as script commands written in a scripting language like VBScript, JavaScript, etc. that are executed on the Web server • By including script commands, interactivity and customization can be added to a Web page without having to be concerned with the operating system used by the client accessing the Web page • When a .asp file is requested from the server the Web server carries out any script commands it may contain and generates an .html file that is sent to the client's browser

23. JavaScript is an extension of HTML that allows a programmer to do things with the Web page as it is displayed to the user JavaScript is an interpreted programming (or script language) from Netscape It is somewhat similar in capability to Microsoft's Visual Basic Where HTML is the skeleton that gives a document its appearance and structure, JavaScript is the brains and the muscles that give a page life The web page must be displayed in a browser that understands the JavaScript language Netscape browsers versions 2.0 and above do, and MSIE versions 3.0 and above does JavaScript

24. What is a Home Page? • A Home Page can be defined in several ways: • To a Web User: • The Web page that loads when you start your Browser (like the Netscape Home Page) • To a Web Developer: • The top level page; the first page presented when a user selects a web site or web presence on the World Wide Web

25. Web Site Terminology • Web Site • Web Page • Home Page • Splash Page

26. Web Site Web Site: a related collection of Web files that includes a beginning file called a home page A company or an individual tells you how to get to their Web site by giving you the address of their home page • From a home page, you can get to all the other pages of a web site

27. Web Site • For example, the Web site for IBM has the home page address of http://www.ibm.com • The home page address actually includes a specific file name like index.html but, as in IBM's case, when a standard default name is set up, users don't have to enter the file name • IBM's home page address leads to thousands of pages. • So, a Web site can have thousands of pages or it can be just a few pages

28. Web Page • Web Page: a file notated with the Hypertext Markup Language (HTML) • Usually, a web page contains text and specifications about where image or other multimedia files are to be placed when the page is displayed • You can think of a Web site as a book (albeit a hypertext kind of book rather than a sequentially arranged kind of book) that arrives a page at a time as you request each one

29. Web Page • Each web page is an individual HTML file with its own Web address (URL) • The first page you usually request at a site is known as the home page • Most home pages have a default name that doesn't have to be specified; you only need to enter the domain name for the site itself

30. Splash Page Splash Page or Splash Screen: • An initial Web site page used to capture the user's attention for a short time as a promotion or lead-in to the site home page or • To tell the user what kind of browser and other software they need to view the site

31. Splash Page Examples • A good example of the meta push splash page is provided by Coleman College: • http://www.coleman.edu/ • A good example of a "Plain" Splash Page is: • http://www.nleomf.com/

32. About Splash Pages • Some people LOVE Splash pages and others HATE them! • Spend some time at home researching the pros and cons of splash pages and decide if you want to include one in your Web site! • http://www.thewebseye.com/doorway.htm • http://webdesign.about.com/library/weekly/aa031401a.htm • http://www.netmechanic.com/news/vol3/promo_no13.htm • http://webdesign.about.com/library/weekly/aa031401b.htm

33. Web Pub I Final Project • You final project assignment is to create a 5-9 page website! • BUT how to begin??

34. Blueprint Specification Defining Your Web Site!

35. Planning Your Web Presence • Planning is the single most important step in the HTML Publishing process! • KEY: Mission Statement: What you want people who visit your site to be able to do, think, say, feel or see? • You need to map out your top level Web categories • what do you want your various Web pages to do or show and who you want to reach… • Decide: What is the purpose of your web site??

36. Consider Web Site Purposes • Marketing and promotional information • Commerce retail sales • Entertainment • Technical support • Information presence (on-line brochure vs. white paper) • Research or education • Personal Home Page

37. Personal Information Hobbies or Special Interests Personal Publications Poems, letters, etc. Shopping Catalogs Opinion Gathering Anything else you can think of! Corporate Publications Newsletters Documentation Company Profiles Job Information Sales Materials etc. What Do You Want Your Web Presence to Be?

38. Set Your Web Page Goals • What do you want people to be able to accomplish after viewing your web presentation? • Will you be giving them specific information on how to do something? • Do you expect them to read through each page in your presentation or start at your home page and wander around until they get bored?

39. Deciding What You Want on Your Web Site • Come up with ideas for your Web Site by browsing the Internet and looking at lots of Web pages! • When looking for ideas, make sure to look at Web pages that are based on the same topics and aimed at a similar target population as your site • We will do lots of targeted site browsing in our Web Pub I, II and III course assignments, but get a heard start now for this homework assignment!!!

40. About Site Flowcharting From Designing Web Graphics.3 by Lynda Weinman

41. Flow Charts Initially, it’s a good idea to think of your Web site as one great big organizational chart with the CEO being your site’s home page • The next level of the organizational chart would then be the menu options available on your home page • This idea is illustrated in next few slides scanned from <designing Web graphics.3 by Lynda Weinman • Sketching a flowchart or ‘Web chart’ will help you to classify the individual topics that your Web site will contain

42. Flowcharting • Once you’ve developed a basis for the structure, your next task is to design a means of intuitive navigation throughout the structure • If you’ve developed a logical structure, the navigational paths will almost define themselves • We devote much of Web Pub III to the critical topic of designing navigation

46. WYSIWYG Tools Flowchart Options • Tools like Dreamweaver, GoLive and FrontPage (and even HomeSite!) have site management capabilities which include automated creation of flowcharts and site maps

49. FrontPage Navigation View

50. HomeSite View As Tree