Web Page Design and an Introduction to HTML
Download
Report
Transcript Web Page Design and an Introduction to HTML
Web Page Design
and an Introduction to HTML
HTML:
Hypertext Markup Language
Markup language: describes elements of a
page in a general way, e.g., begin paragraph
HTML,
SGML, XML
Page description language: precise
description of exact page layout
Adobe
PostScript
Adobe PDF (Portable Document Format)
Advice (HTML) versus control (PostScript)
2
Hypertext
Hypertext – text with embedded links to
other documents
Reading hypertext documents is
fundamentally different from reading
sequential documents – the reader has
much more control
Newspaper
vs. book
3
What HTML Is Not
Do not try to use HTML as you would a
text formatting program, e.g., Microsoft
Word – use it to structure the content of a
document
Some tools try to force formatting rather
brutally – usually with unpleasant results
4
Tools for Building Web Pages
For static content, many tools exist
“WYSIWYG” page creation editors –
What You See Is (almost) What You Get
Site Management Tools
Multi-Author Management Tools
Version Management Tools
5
Static vs. Dynamic Content
Static content: fixed pages
Dynamic content: customized
Database-driven
User
form entry and interaction
Requires generation of HTML pages (typically
via programming) on server
6
Tags and Content
HTML tags are elements used by the web browser
to format the page
Tags are delimited by < and > characters
Content is outside of the < and > delimiters
Unrecognized tags will be ignored by browser –
allows extension of HTML
Tag names are cAsE INseNSiTiVe
Tags are not displayed – e.g., <this will
disappear>
7
Attributes
Tags may have additional information in the form
of attributes
Attributes may be a simple word or may be of the
form attributename=value, e.g. color="blue"
Tag names and attributes are separated by spaces
Not all browsers recognize all attributes
Quote values with either double "…" or single '…'
quotes
8
Character Entities
To display special characters use &char;
notation:
<
<
> >
& &
€ €
¥ ¥
Non-breaking space:
9
How’d They Do That?
HTML document source is visible to users!
Use “view source” function of browser
May
need to right-click within a frame to see
frame source
OK to borrow techniques
Not OK to borrow actual page source
10
A Simple HTML Document
<html><head>
<title>Sample Page</title>
</head>
<body bgcolor="aqua">
<h1>Important News</h1>
<p>No news is good
News.
<p>Thanks for visiting!
<br>Come back soon!
</body></html>
Sample Page – Netscape
Important News
No news is good news.
Thanks for visiting!
Come back soon!
11
HTML Document Format
<html>
<head>
Document header
</head>
<body>
Document body
</body>
</html>
Many tags are paired:
<tag> … </tag>
In document:
Header
is optional
Body is mandatory
http://usf.rho.net
12
The Document Header
<title> title text </title>
Title is displayed in window title bar and in
history list
<meta …>
Additional information, such as search
engine keywords
Style sheets, JavaScript code, etc.
13
Control of the Document Body
<body> tag has many available attributes
Control
of page background:
background="imagefile"
bgcolor ="colorname_or_value"
bgproperties="fixed" (don’t scroll background)
Text
and link color (not recommended!)
Text color: text ="colorname_or_value"
Link colors: link, vlink, alink
14
Simple Formatting
<p>
<br>
Begin new paragraph
Line break
<hr>
<center> … </center>
<nobr> … </nobr>
<pre> … </pre>
Horizontal Rule
Center text
No changes in line breaks
No formatting
15
Headings
<h1>heading text</h1> through
<h6>heading text</h6>
produce successively smaller headings.
No automatic numbering, indentation, table
of contents, etc.
16
Text Formatting
<b> … </b>
<i> … </i>
<u> … </u>
<strike> … </strike>
<tt> … </tt>
<big> … </big>
Bold
Italic
Underline
Strikethrough
Typewriter font
<small> … </small>
<sub> … </sub>
<sup> … </sup>
Smaller
Bigger
Subscript
Superscript
17
Comments
<!-- comment text -->
Comments may be multi-line:
<!-- comment
text -->
18
Lists
Enclose the entire list:
<ol>
… </ol> – ordered (numbered) list
<ul> … </ul> – unnumbered (bulleted) list
List Items:
<li>text
Dictionary list:
<dl>
… </dl> – enclose the list
<dt>term</dt><dd>definition</dd>
19
Lists: Easy and Powerful
<p>
Why eat vegetables?
<ol>
<li>They’re good for
you.
<li>They taste good.
<li>They make mom
happy.
</ol>
Why eat vegetables?
1. They’re good for you.
2. They taste good.
3. They make mom
happy.
20
Hyperlinks
Click and go: the web paradigm
<a href="url"> … </a>
May enclose text or an image <img>
You can define a document fragment
for use as a target (this isn’t a link!):
<a name="fragmentname"> … </a>
21
URLs
Uniform Resource Locator
scheme:scheme_specific_part
Common schemes:
– hypertext transfer protocol
ftp – file transfer protocol
mailto – send an email message
news, nntp – newgroups (be careful!)
telnet – interactive terminal session
http
22
HTTP URLs
http://server/path
http://server:port/path#fragment
http://server:port/path?search
:port defaults to :80 (shttp: port 443)
server is Internet name or IP address
#fragment is <a name="xxx"> within page
?search gets “sent” to page (CGI)
23
HTTP: Relative URLs
Use relative URLs whenever possible:
<a href="#weather"> refers to
<a name="weather"> within this page
<a href="info.html"> and
<img src="pics/hot.jpg"> refer to pages
within this directory on the server
<a href="/images/logo.gif"> refers to
pages at root of this server
24
MAILTO URLs
mailto:[email protected]
mailto:[email protected]?subject=inquiry
subject=
cc=
carbon copy address(es) [not IE3]
bcc= blind carbon copy address(es) [not IE3]
mailto:[email protected]?subject=usf
course&[email protected]
Note: requires client to have e-mail configured!
25
Images
<img src="url">
Attributes
(strongly advised):
height="pixels" width="pixels"
alt="text"
Additional
attributes:
border="pixels"
… and many more
Image
maps
JPEG versus GIF versus PNG
26
Tables
First real “formatting” paradigm – used
very heavily
Can
be used for “pixel-perfect” positioning
Define table: <table> … </table>
Define row in table: <tr> … </tr>
Define data cell in row: <td> … </td>
27
Simple Table
<table>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr><tr>
<td>Apple</td>
<td>Red</td>
</tr><tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</table>
Fruit
Color
Apple
Red
Banana
Yellow
28
Forms
Forms allow user to enter data
Form data is sent to host when user presses
submit button
Making forms work competently is a
requirement for a good interactive web site
<form> … </form> tags surround a form
29
Form Elements
Text – plain, textarea, and password
Check boxes (on/off)
Radio buttons (select one of N)
Selection lists (select one or many)
Action buttons (n.b., submit, reset)
Hidden data (part of form, send as response)
30
Sessions
HTTP interaction between user and server
is a one-shot
Session orientation is important for many
applications (user context, personalization)
Server must link together disconnected
requests
http://www.duats.com
31
Cookies
Allow server to pass simple data to browser
Context information is transmitted with
each http request to the server (matching
domain)
Methods of making sessions work:
– some users protest (very few)
URL with embedded session ID – ugly!
Hidden fields – tricky, all pages must be forms
Cookies
32
Frames
Allow window to be partitioned into
multiple panes
Good for fixed navigation bars
Problems with some browsers and printing
Multiple scrolling panes – very bad design
Many web designers avoid frames
completely
33
Meta Tags & Search Engines
Description and keyword info is used by most
search engines for display & indexing
<META name="description" content="Find out
everything you need to know about growing
herbs in your backyard.">
<META name="keywords" content="herbs,
herb garden, growing herbs, gardening,
garden, herbology">
See http://www.builder.com/Authoring/Metadata/
34
Other Meta Tags
Preventing indexing: <META
name="robots" content="noindex,
nofollow">
Redirect: <META http-equiv="refresh"
content="time;URL=url">
Expiry: <META http-equiv="expires"
content="Sat, 1 Jan 2000 00:00:00
GMT">
35
Color
Be careful with color – unreadable sites are very
easy to produce – test on 8-bit systems, laptops
Restrict yourself to the 216-color “browser safe”
palette if possible: http://the-light.com/colclick.html
Don’t change text, link colors unless absolutely
necessary – this confuses users
Use #rrggbb notation rather than color names
36
Fonts
font="facename,facename,…" may be
added to many tags
Be careful! User systems have wide variety
of fonts loaded – don’t count on yours being
there!!! Provide alternates, e.g.
font=“verdana,arial,helvetica"
Be minimal! Too many fonts = ransom note
37
JavaScript
A “simple” language which allows
programs to run in the browser
Text of JavaScript programs are transmitted
with each page (part of header)
Good for forms data checking, simple
animation, etc.
http://www.duats.com
38
Style Sheets
Supposed to allow significantly greater
flexibility in formatting
Site-wide control and changeability
Unfortunately, Microsoft didn’t implement
the standard, and Netscape’s
implementation is broken
Minimal use at this point
39
No-Nos
<blink> … </blink>
<marquee> … </marquee>
Frames
Framing others sites
40
Design Tips
Design for 800x600 screens
Do
not design for 1024x768 or 1280x1024!!
640x480 possible, but less common
Check with 256-color palette, also laptops
Don’t have huge long pages of text – use the
hypertext paradigm
Have a consistent look and feel
Have a good navigation paradigm
Be prepared to change!
41
Glitz Glutton for Bandwidth
HTML’s major advance: easy to mix text and
graphics (images)
Remember that graphics can get BIG
Slow
download times
Frustrated users
Developers typically work on high-speed LAN
and T1 connections
Almost all users still at 28.8k bits/second
Server load goes way up with lots of little pieces!
42
Browser Wars
HTML isn’t yet really standardized!
Don’t use advanced HTML features unless you’re
prepared to have multiple page versions
Microsoft
is particularly bad at simply promoting their
view of HTML as “The Standard”
Test with multiple browsers
Netscape
3, 4; Internet Explorer 3, 4, 5
AOL; Opera (good for checking conformance!)
PC and Macintosh
43
Simple “Bundled/Free” Editors
Netscape Composer
Microsoft Front Page Express
44
Low and Medium-Cost Tools
Adobe PageMill
Filemaker (Claris) Home Page
Microsoft FrontPage
SoftQuad HoTMetal
Symantec Visual Page
45
High-end Tools
Adobe GoLive
Macromedia Dreamweaver
Macromedia
Flash plugin
NetObjects Fusion
46
Other Tool Categories
Java Programming Tools
Automated Web Publishing
Tools
CGI Programming Tools
HTML and Link
Verification Tools
HTML Color Pickers
HTML Editors
HTML Index Generators
HTML Text Styling Tools
HTML to ASCII
Converters
Image Mapping Tools
Multimedia Web
Authoring Tools
Scripting Tools
Search Authoring Tools
Site Mapping Tools
Style Sheets Authoring
Tools
Web Commerce Building
Tools
Web Site Promotion
Tools
Misc. Web Authoring
Tools
List from http://www.winfiles.com/apps/nt/program.html
47
Useful Articles: Jakob Nielsen
How Users Read on the Web
http://www.useit.com/alertbox/9710a.html
Top Ten Mistakes in Web Design
http://www.useit.com/alertbox/9605.html
… Revisited Three Years Later
http://www.useit.com/alertbox/990502.html
Top Ten New Mistakes in Web Design
http://www.useit.com/alertbox/990530.html
48
Vendor Sites
Microsoft: Site Builder Network
– tries to push you into using MSspecific HTML and other features
Some good general information
Beware
Netscape Developer Site
Generally
good information, reasonably
portable
Both sites: hard to find what you want!
49
Recommended Books
HTML: The Definitive Guide, 3rd Edition
Chuck Misciano & Bill Kennedy
O’Reilly, 1998
Webmaster in a Nutshell, 2nd Edition
Stephen Spainhour & Robert Eckstein
O’Reilly, 1999
50