Web Publishing I

© 2002 D & D Enterprises1

Web Publishing I

Introduction to HTML and the Web Publishing Process

2 © 2002 D & D Enterprises

Who Am I & Who Are You?

Me: Diane Cunningham

You: Paired Interviews


Key Course URL

UCSD Web Pub Student Resourceshttp://www.technoweenies.com/webpub/

Information on required textbooksInformation on available student resources (mailing list, vault of links, software, etc.)

http://www.wirelessdevnet.com/channels/wap/training/wml.html


Terminology


Terminology

InternetIntranetExtranetWorld Wide WebBrowsersClient ServerURLs

HTMLDHTMLXMLXHTMLASPJavaScript


Internet: Publicly Accessible Web Servers


Intranet

Intranet: non-publicly accessible web serversA network that is internal to an organizationProvides 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


Internet vs. Intranet

IntranetIntranetInternetInternet

TCP/IP


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


World Wide Web

Global Interactive Dynamic Cross Platform Distributed Graphical/MultimediaHypertext/Hyperlink Information System


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.xMicrosoft 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)


World Wide WebWorld Wide Web

URLURLURLURL

URLURLURLURL

HTTPHTTP

HTTPHTTP

IP Address: http://209.130.124.111/IP Address: http://209.130.124.111/

URL: http://www.technoweenies.com/URL: http://www.technoweenies.com/

Client Server

http://members.home.net/gumby9/html/usability.html

http://members.home.net/gumby9/html/usability.html

http://209.130.124.111/

http://209.130.124.111/


URLs

An URLURL is a:UUniform RResource LLocator

that is, a pointer to a location on the internet, an address:

http://www.ucsd.eduhttp://geocities.com/gumby9/html/samples.html

http://www.ucsd.edu/


The Internet Universe

Newsgroups E-Mail

Gopherspace Telnet Sites

FTP

WWWMailing Lists

Chat & Conferencing


Types Of URLs (in Browsers)

telnet://name_of_siteRemote computing with telnet

gopher://name_of_gopher_serverMenu Driven System for Information Research

ftp://name_of_site/directory/filenameThe File Transfer Protocol

news:rec.food.cookingmailto:[email protected]://www.godiva.com


HTML

HyperText Markup LanguageA subset of SGML

Standard Generalized Markup Language

Web pages are HTML FilesCreated 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>


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

http://www.technoweenies.com/


HTML

As HTML grew it evolvedFrom 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!


DHTML

DHTMLDHTML: Dynamic HTMLDHTML is a set of enhancements to HTML (CSS, JavaScript and the Document Object Model) that was created to add interactivity to web pagesDHTML 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


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 needXML 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


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 caseAll XHTML tags must have an end tagAll attributes must be quoted in XHTMLXHTML attributes must have a name and a valueXHTML requires that tags are nested correctly


ASP

ASPASP: Active Server PagesAn .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 pageWhen 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


JavaScript

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 lifeThe 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


What is a Home Page?

A Home PageHome Page can be defined in several ways:To a Web UserUser:

The Web page that loads when you start your Browser (like the Netscape Home Page)

To a Web DeveloperDeveloper: The top level page; the first page presented when a user selects a web site or web presence on the World Wide Web


Web Site Terminology

Web Site

Web Page

Home PageSplash Page


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


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

http://www.w3c.org/


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


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


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


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/


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


Web Pub I Final Project

You final project assignment is to create a 5-9 page website!

BUT how to begin??


Blueprint Specification

Defining Your Web Site!


Planning Your Web Presence

PlanningPlanning is the single most important step in the HTML Publishing process!

KEYKEY: 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 categorieswhat 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??


Consider Web Site Purposes

Marketing and promotional informationCommerce retail salesEntertainmentTechnical supportInformation presence (on-line brochure vs. white paper)Research or educationPersonal Home Page


What Do You Want Your Web Presence to Be?

Personal InformationHobbies or Special InterestsPersonal Publications

Poems, letters, etc.Shopping CatalogsOpinion GatheringAnything else you can think of!

Corporate PublicationsNewslettersDocumentationCompany ProfilesJob InformationSales Materialsetc.


Set Your Web Page GoalsGoals

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?


Deciding What You Want on Your Web Site

Come up with ideas for your Web Site by browsing the Internet and looking at lotslots 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!!!


About Site Flowcharting

From Designing Web Graphics.3

by Lynda Weinman


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 pageThe next level of the organizational chart would then be the menu optionsmenu 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 topicsclassify the individual topics that your Web site will contain


Flowcharting

Once you’ve developed a basis for the structure, your next task is to design a means of intuitive intuitive navigation throughout the structurenavigation 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


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

FrontPage Navigation View

HomeSite View As Tree

HomeSite View As Chart


Further Flowcharting Resources


Audience Analysis

For Your BlueprintDetermine:

Who is your Target PopulationTarget Population?


Audience Analysis – CRUCIAL!!!

WhoWho is your intended audience?What do they want?Where are they coming from?When are they viewing your site?

Why have they picked YOUR site?How are they accessing your site?

What technologies do they have?


Identify Information Sharing Needs

When you create your blueprint, you need to spend time identifying your target audience and determining your mission statement

When you determine the purpose of your web site, it helps you determine what kind of web site you require – you have identified your "information sharing needs"

Information sharing needs can be categorized as internalinternal or externalexternal

This helps you to determine if you should create an Internet Web Site or an Intranet Web Site


Surveying Your Information Sharing Needs

ReportsReports prepared by department? Required information? Access to the reports?

ProjectsProjects within the department? Required information? Who needs information?

Customer SupportRequired information? Reduce requests by providing information?

Communication TasksInformation provided regularly? Information required regularly?

FormsForms used by organization? Information requirements? Combine or eliminate forms? Move paper-based forms online?

DatabasesIdentify type of information? Type of access and results required?


AccountingAccountingDataData

AccountingAccountingDataData OrganizationalOrganizational

ChartsChartsOrganizationalOrganizational

ChartsCharts

SalesSalesProjectionsProjections

SalesSalesProjectionsProjections

Project StatusProject StatusInformationInformation

Project StatusProject StatusInformationInformation

ProductInformation

ProductInformation

Orderingand

Payment

Orderingand

PaymentProduct

AvailabilityProduct

Availability

ShippingStatus

ShippingStatus

Share withOrganization

Share withOrganization

Share withCustomersShare withCustomers


Identify Information Sharing Needs

InternalInternal information sharing needs are addressed by an intranetintranet Web solutionExternalExternal information sharing needs are addressed by an InternetInternet Web solution


Audience Analysis – WHOWHO?

ExternalBusiness to ConsumerBusiness to BusinessBusiness to Customer

InternalEmployee to EmployeeDepartment to DepartmentManager to Employee


External Audience

Business to Consumerhttp://www.mysimon.com/


External Audience

Business to BusinessBusiness Online Publishers International

http://www.bopi.com/


External Audience

Business to Customerhttp://www.amazon.com/ http://www.godiva.com/


WHATWHAT?

What do THEY want?You have defined your mission statement, you know what you want the site visitor to do, say, think, or feel after they visit your Web Site Now, flip it, what do do they want?

Do we have a match?


Audience Specifications -- WHEREWHERE

Where are Viewers Coming From?

HomeWorkSchoolPublic Places

Airport terminalsCybercafes

Geography (local or international)


Audience Specifications -- WHENWHEN

When is your site being viewed?

WeekdaysWeeknightsWeekends


WHYWHY?

Why have site visitor's picked YOUR Web Site? Why not a competitor's?What makes your site so good for your target population?

The goal of a good Web Site is to attract and attract and retainretain members of the target population


Audience Specifications

HOW?HOW?


Audience Specifications

We have examined:Who?What?Where?When?Why?Now we must consider a most important and ever changing aspect, HOW, that is, using what technologies??


Audience Specifications – HOWHOW?

What technologies do your viewers use?What Browser?

PC, Macintosh, UNIX? Netscape 3.x 4.x 6.xMicrosoft Internet Explorer 3.x 4.x 5.xAOL? (More on this in a sec)Other like Opera?

http://www.opera.com/

Download the browser of your choice at www.browsers.com



What technologies do your viewers use?What Browser Extensions?

Plug-ins: Shockwave, Flash, Real Audio, Specialized?With what programming Support:

Java, Active X, JavaScript

Cookies?Cookie FAQ: http://www.cookiecentral.com/faq.htm



What technologiestechnologies do your viewers have?Speed

High speed always-on direct connect broadband or 28.8 dial-up?

Audio Visual Supportstreaming audio, video, chat, IM?

People in offices generally do not have SoundBlasters or speakers!

Monitor IssuesVideo card support and resolution varies wildly, and you have to consider color depth and gamma.16 colors, 256 colors, True color?


HOWHOW: What Screen Resolution?

http://www.zdnet.com/anchordesk/story/story_4491.html (Feb 2000) [more on this later!]

11%11% 640 x 48054%54% 800 x 600

How can you test for screen resolution?This is really for Web Pub II, but here is a JavaScript for automatically determining the site visitor's screen resolution

http://javascript.internet.com/user-details/resolution-page.html


HOWHOW: AOL User?

In January 1999 CMP's TechWeb Reported that AOL had 15.1 million subscribers

According to Dr. Crompton, there are more AOL subscribers than Wall Street Journal, New York Times and USA Today…combinedcombined

http://www.ultranet.com/~mejac/intro2/sld084.htm

By January 2001 AOL had 27 million subscribersBy January 2001 AOL had 27 million subscribersSource Ziff Davis News: http://www.zdnet.com/zdnn/stories/news/0%2C4586%2C2675364%2C00.html

Current Estimates place AOL subscription numbers at 37 million…


HOWHOW: AOL User?

So what? Well, for example, AOL uses their own added, proprietary image file compressed using the Johson-Johson-Grace compression algorithmGrace compression algorithm on top of your gif and jpeg compression, so caveat emptor and do your homework!

AOL Design Tips (meta list)AOL Design Tips (meta list)http://webdesign.about.com/compute/webdesign/msubaol.htmhttp://webmaster.info.aol.com/

http://webdesign.about.com/cs/aol/


HOWHOW: WebTV User?

After more than 3 years on the market Web TV just topped 1 million subscribers in January 2000

http://www.zdnet.com/intweek/stories/news/0,4164,2522434,00.html

WebTV Design Tips (meta list)WebTV Design Tips (meta list)

http://webdesign.about.com/compute/webdesign/msubwebtv.htm


HOWHOW: WebTV User?

See http://developer.webtv.net/ Screen resolution of only 544 x 372!!Titles truncate to 35 characters or lessFrames are converted to tables in version 2

No frame support in version 1

Forms often choke if not coded perfectlyRed and (*gasp*) white!! appear VERY bright

Best on black or dark backgrounds


HOWHOW: Palm Pilot or Handheld PDA?

Probably exaggerated, International Data Corporation projections show non-PC devices outnumbering PCs as Internet clients by the year 2005! (source: Internet World July 15, 1999 Page 61)


Final Project

Ok, so now you have the URLs and resources to determine the who, what, where, when, why and how of your blueprint and all the help you need to design the 5-9 page website for your final project!On the next slide are a few URLs to help your refine your blueprint!


Blueprint Resources

How to establish a clear mission, determine a target audience, create user personas, and clarify design goals

http://builder.cnet.com/webbuilding/pages/Graphics/Conceptualize/?tag=st.bl.3881.plbl

Pre-Design Stepshttp://webdesign.about.com/compute/webdesign/library/weekly/aa071999.htm

Information Architecture Tutorialhttp://hotwired.lycos.com/webmonkey/design/tutorials/tutorial1.html


Blueprint Homework

Blueprint Assignment: Create Sample Page Layout Sketches

Main PageContent Page

http://www.jshook.com/flexible_pages/planning.html


File Naming Guidelines

The Rules, The Guidelines and the Suggestions


How to Name Your Files

How you name your actual files is very important!

You name:HTML files, Graphic files, etc.

Files are read by all sorts of computersYou need to take file names down to the least common denominator

Make sure there is nothing “funny” some computers cannot understand


index.html

Most Web servers recognize the index.html as the default home pageIf you type http://www.technoweenies.com what you really see is http://www.technoweenies./index.html even though you didn't type it that way


index.html

The Web server knows to open the index.html file automatically without requiring the full URL to be typed in

Therefore, if you name the opening page of your Web Site with the file name index.html the Web server will know to automatically display this file first


index.html

Take this "auto open" concept one step further:You can have an opening page to each section of your Web Site, not just to your home pageThere are two advantage to this

Visitors to your site will not have to remember really long URLs and typing index.html again and againSite visitors won't end up looking at a generic site index like http://www.technoweenies.com/atp


index.html

So, index.html is significant and most professional Web developers use it as the root file name

NOTE: On some servers a different name is used such as default.htm or index.asp


index.html

Remember, you are not limited to one index.html file on your site

You can have an index.html file inside each folder that represents a major topic or category

http://www.technoweenies.com/webpub/ http://www.technoweenies.com/webpub/html1/ http://www.technoweenies.com/html/ http://www.technoweenies.com/palm/ http://www.technoweenies.com/nav/


Six Filename GuidelinesGuidelines

1. Use all lowercase letters2. Use only letters or numbers,

no special characters (4 exceptions)3. No spaces4. All web pages must end in

.htm or .html5. Include extensions on graphics files like .jpg

or .gif6. Keep filenames short


How to Name Files

It's good practice to use short, easy-to-remember file names that describe the file

A file called "page4.html" is not terribly descriptive, and a file named bobs_page_about_chicken_feet.html" is just too long

Name the file conciselyFor example, Bob could use chickenfeet.html as his file name

You'll want to keep file names short, because the longer they are, the more difficult it becomes to link to them correctly or type them into a browser


How to Name Files

You'll also want to avoid mixing case in your file names for the same reason

A file called ChIcKenFeeT.hTml will frustrate people trying to link to it or even type it into a browser

If you keep your file names lowercase, you'll avoid all sorts of potential problems


Filename Guidelines

SUGGESTION:Use all lowercase lettersSUGGESTION:Use all lowercase lettersTechnically, you can use capital lettersBUT!

It is easier to keep things straight and if names are all lowercaseIt is easier to keep things organized if names are all lowercaseIt looks cleaner if names are all lowercase

Open: http://www.internetsd.com/courses/html1/casesensitive.html


Filename Guidelines

Use Only Letters or NumbersUse Only Letters or NumbersNo Special Characters (4 Exceptions)No Special Characters (4 Exceptions)

Letters and Numbersno apostrophes ( ‘ )no colons ( : ) or semi colons ( ; )More on next slide

ExceptionsUNIX: You can use a tilde ( ~ )

ALL: You can use an underscore ( _ )

ALL: You can use a hyphen ( - )ALL: You can use a period ( . )


Filename Guidelines

No Special CharactersNo Special CharactersDon't begin a filename with a dot (.)

Don't use any of the following characters

; ? { } < : | * \ > # ) [ ] ' $ " ! % /

http://www.challenge.nm.org/Help/bfile98/tsld010.htm


Filename Guidelines

SUGGESTION: Use No SpacesSUGGESTION: Use No SpacesIt is best not to use a space in any file name

Spaces in filenames

Could cause a 404 Not Found Could Need to be rendered as %20 (most common)

Example: http://www.technoweenies.com/atp/head%20labelled.jpg


Filename Guidelines

All of the web pages for this class must end in All of the web pages for this class must end in .htm or .html.htm or .html

.htm is most common on older DOS and Win 3.1 PCs and older Macs.html is most common on new Macs and Win 95/98/NT and UNIX machines

Note: Whether named .htm or .html pages are considered “HTML Files”

On the web you will see .asp .php .cfm .jsp etc. but for now, just think .htm or .html


Filename Guidelines

Include Extensions on Graphics FilesInclude Extensions on Graphics FilesMake sure to name your graphics appropriately so both you and the computer know what they are (don’t worry if you don’t know what these files formats refer to yet - -that is part of next lecture's topic!)

If it is a gif name it .gifIf it is a jpeg name it .jpg or .jpegIf it is a png name it .png


Filename Guidelines

Keep Filenames ShortKeep Filenames Short Names should be kept short for several reasons, not the least of which is reduced typos of people who have to type in the address!Example:

http://www1.scasd.k12.pa.us/scasd/pfe/5th/D-2/Simile-Metaphor/Sim-Met_HomePage.html

How many rules does THIS name violate?


Pop File Name Quiz!!!

How well do you "get it"?


Next...

HTML Basics

Web Publishing I

Documents

Transcript of Web Publishing I