Fundamentals of Web Publishing MIS 208-B LEC: T 08:15PM-10:05PM- ADM102 LAB: TH 08:15PM-10:05PM -...

Fundamentals of Web Publishing

MIS 208-BLEC: T 08:15PM-10:05PM- ADM102

LAB: TH 08:15PM-10:05PM - ADM138

Andy Stokes

Course Introduction

• Syllabus

• Teaching Philosophy

• Assignments

• Projects

• Schedule

• Absences, Feedback, Email Policy

Fundamentals of Web Publishing

• 5 Ws of www• HTML in 25 words or less OR Tag, you’re

it! • Guten Tag(s) - Start to Finish• Design and Usability Issues• Why buy the cow when you can get the milk

for free? - A host of issues or an issue of hosts?

• Other issues and considerations

Chapter One

• Internet

• WWW

• Web Browsers

• HTML

Internet

• Huge network of computers

• Began with ARPA

• TCP/IP– Backbone of the Internet Infrastructure

WWW

• Created in 1992

• Organizing, presenting, and accessing information

• Developed by CERN

Technologies

• HTML

• Hypertext Transfer Protocol (http)

• Web Browsers

Growth Factors

• Graphical User Interfaces (GUIs)

• Easy ISP Access

• Faster Modems

• Improved Compression Technologies

• Less Expensive Hardware

Client-Server Network

• Your computer is a Client– The Web Browser is Client Software

• The Internet is a Network

Web Browsers

• Client Software

• Receives Information over the Internet

• Interprets the HTML

• Displays the Results

Features

• Back Button

• Bookmark

• Reload

• Home

• Search

• Web Address

Source Code

• Page Source

• HTML Tags– Cross Platform Independence

HTML or Tag, you’re it!

HTML Explained

• H-T-M-L are initials that stand for HyperText Markup Language (computer people love initials and acronyms -- you'll be talking acronyms ASAP). Let me break it down for you:

HTML Explained

• Hyper

HTML Explained

• Text

HTML Explained

• Mark up

HTML Explained

• Language

Simple Page

HTML Source for Simple Page

Start with a title

Every HTML document needs a title. Here is what you need to type:

<title>My first HTML document</title>

Change the text from "My first HTML document" to suit your own needs. The title text is preceded by the start tag <title> and ends with the matching end tag </title>. The title should be placed at the beginning of your document.

Add headings and paragraphsIf you have used Microsoft Word, you

will be familiar with the built in styles for headings of differing importance. In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.

Add headings and paragraphsHere is how to add an important heading:<h1>An important heading</h1>

and here is a slightly less important heading:

<h2>A slightly less important heading</h2>

Add headings and paragraphs

Each paragraph you write should start with a <p> tag. The </p> is optional, unlike the end tags for elements like headings. For example:

<p>This is the first paragraph.</p>

<p>This is the second paragraph.</p>

Adding a bit of emphasis

You can emphasize one or more words with the <em> tag, for instance:

This is a really <em>interesting</em> topic!

Add interest to your pages with images

WidthHeight

Alt

More Alt

Images and Formats

GIF

JPG

PNG

Adding links to other pages

What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!

<a> </a>

Link to another site

Link an image

May 1996:Top Ten Mistakes in Web

Design

1. Using Frames

2. Gratuitous Use of Bleeding-Edge Technology

3. Scrolling Text, Marquees, and Constantly Running Animations

4. Complex URLs

5. Orphan Pages

6. Long Scrolling Pages

7. Lack of Navigation Support

8. Non-Standard Link Colors

9. Outdated Information

10. Overly Long Download Times

The Top Ten New Mistakes of Web Design

1. Breaking or Slowing Down the Back Button

2. Opening New Browser Windows

3. Non-Standard Use of GUI Widgets

4. Lack of Biographies

5. Lack of Archives

6. Moving Pages to New URLs

7. Headlines That Make No Sense Out of Context

8. Jumping at the Latest Internet Buzzword

9. Slow Server Response Times

10. Anything That Looks Like Advertising

Why buy the cow when you can get the milk for free? - A host of issues or an

issue of hosts?

• Commercial Hosting vs Free Hosting

• BYOS and BYOB

Other issues and considerations

• Size matters

• Stream this!

• Flash-ers

• XML, PERL, CGI, TCL

Backup