Embed Size (px)
Citation preview
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 <hr noshade><p> <hr noshade size="8"><p>
With Explorer <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
