HTML

Download Report

Transcript HTML 

HTML
Your Friend or Foe?
and a little bit from Lazar
Some Terms. . .




HTML: Hypertext Markup Language
SGML: Standard Generalized Markup
Language
DTD: Document Type Definitions
HTML is a SGML DTD used on the WWW
What does HTML Do?


HTML script uses a code called a tag to
describe how items should look
HTML uses a syntax that is supposedly
generally agreed upon to make it portable
Specifications or Standards





The World Wide Web Consortium (W3)
0.0, 1.0, 2.0, 3.2, 4.0, 4.01 (recent)
xhtml 1.1
http://www.w3.org
Proprietary code problems
Ways to Write HTML


HTML Converters (Word, StarOffice)
HTML Editors





WYSIWYG
WYSIWAG
UNIX Editors (pico, jpico, vi, emacs)
Notepad ;}
EditPlus
Creating an HTML Document (AKA
Web page)

Let’s look at Mary’s Resume. . .
Creating an HTML Document (AKA
Web page) - cont.

Document Content -- controlled by HTML
Tags
<tag name Properties>
Document Content
</tag name>
HTML Tags

<h1 align=center> Mary Taylor </h1>

Different Browsers interpret tags . . .
differently.

<font size = "4"> Mary Taylor </font>

A different approach
More HTML Tags
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Subtle Differences. . .

h tags versus font tags






<h1> versus <font size=1>
spacing
bold
the align property (3.2 and higher)
the <p> tag -- to </p> or not to </p>?
your friend the <br>
Lists



Unordered
Ordered
Definition
Unordered Lists
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li> and a </p> are optional right now, but this is
changing
Ordered Lists
<ol>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
</ol>
Definition List
<dl>definition list
<dt>definition term
<dd>definition
<dt>
<dt>
<dd>
</dl>
Options on Lists

Unordered List




<ul type=disk>
<ul type=circle>
<ul type=square>
Ordered List

<ol type=[1,i,A,a] start=[1,i,A,a]>

Let's Look
Using Notepad and Browser



Saving the file as “foo.htm” (or foo.html)
Making sure to save it as "All Files (*.*)"
Looking at file in browser

Saving before looking
Character Tags

physical versus logical



physical: exactly how you want the text to
appear -- <b>, <i>, <big>, <small> (big and
small are html 3.0 and above)
logical: how you want to use the text -- <em>,
<strong>, <var>, <cite>, <code>, <kbd>
when to use one over another?
Example
<em><strong>
satellite technician
</strong></em>
<i><b>
satellite technician
</b></i>
Horizontal Lines
<hr>
<hr align=center>
<hr size="12">
<hr width="30%">
<hr width="15">
<hr align=center size="12" width="30%">
More Line Options

More Options



With Explorer



<hr noshade><p>
<hr noshade size="8"><p>
<hr color="#ff0000"><p>
<hr size="10" width=30% color="green">
Let’s Look
Inserting Images

Inline Image


Appears directly on the Web page
External Image

Browser needs a file viewer
Image Tag
<img src = “filename”>
GIF versus JPEG
Needs to be one of them
Two Ways to Center
<p align=center><img src=“taylor.gif”></p>
(3.x and above)
<center><img src=“taylor.gif”></center>
Filenames are case sensitive!
Lifecycle and Evolutionary

SDLC



Hoffer, George, and Valacich
Whitten and Bentley
Evolutionary

Spiral model


Risk factors
End user plays somewhat of a role
Lazar User-Centered Web
Development Lifecycle



Define the mission of the Website and the
user population
Collect the user requirements for the
Website
Create the conceptual design of the
Website
Lazar User-Centered Web
Development Lifecycle (cont.)




Create the physical design of the Website
Perform usability testing on the Website
Implement and market the Website
Evaluate and improve the Website
Challenges to Web Development






Browser Type
Browser Version
Screen Size
Operating System
Download Time
Infrequency of use

Users don’t use your site all the time

Some exceptions, of course
Clients versus Users



Melding Mission with Need
Determining User base
Negotiating soltions
Clients

Client versus User






Not the same people
Make sure the client has a clear purpose
Make sure the client is committed
Keep client frequently updated
Learn the client's interaction style and use
it to your advantage
Meld client mission with user needs
Mission of the Website

Type of Website




Informational
E-Commerce
Entertainment
Target Population


local, international
audience-split?

WMU site
Let’s Set Up Your Site