Introduction to Authoring Documents for the World Wide Web

Transcript Introduction to Authoring Documents for the World Wide Web

Lecture 4
Slides by LYNN WARD,UNIVERSITY OF ILLINOIS
HTML
What is HTML (HyperText
Markup Language)?
• A standard collection of codes or "tags" used
for styling and formatting text and defining links
in documents prepared for the World Wide Web
• HTML defines how the document will look on
the screen and/or printed page
• HTML tags are similar to embedded wordprocessor codes, but do not allow for as fine
control
4.2
Options for Working with
HTML
• Plain text editor (vi, pico, DOS edit,
Windows NotePad)
• Text-based HTML editor (inserts tags via
menus and buttons)
• WYSIWYG Editor (works like word
processor; don’t work directly with tags)
• Netscape Gold - free, WYSIWYG editor
• Save as HTML from a word processor
4.3
Why Learn HTML
Coding?
• Your WYSIWYG editor may not be able to
do everything you want
• To update and tweak documents that are
already on line
• To learn how others achieve certain effects
(view source)
• Because it’s good for the soul!
4.4
About HTML Tags
• All HTML tags are surrounded by angle brackets:
<tagname>
• HTML tags are not case sensitive (you can mix
upper and lowercase) except when typing out
directory and filenames
4.5
Paired versus Empty
Tags
• Most HTML tags are paired, consisting of "start"
tag and an "end" tag. Paired tags surround a
block of text and affect that block only
<B>word</B>
<A HREF="http:/www.uiuc.edu"> this is a
hypertext link</A>
• The end tag is identical to the start tag, but is
preceded by a slash (/)
4.6
More About Paired Tags
• When multiple tags surround a block of text,
they should be nested (one pair inside the
other) rather than sequential; i.e., first on-last off):
Correct: <PRE><I>word</I></PRE>
Incorrect: <PRE><I>word </PRE></I>
4.7
Empty HTML Tags
• Empty tags have a start tag but no end tag
• Most end tags affect overall form rather than
styles for text blocks
<p> paragraph marker
<hr> horizontal rule
<br> line break
<li> list item
• Some empty tags can also be paired, but an end
tag is not required (<p>...</p>;
<li>...</li>; etc.)
4.8
Form of an HTML Document
• Head
– With the exception of the title, elements contained in
the head of the document are not displayed; title is
displayed in title bar or special field
– contains title of document as well as information about
the history of the document and its relationship to other
documents
• Body
– contains the text and tags to be displayed and/or
printed
4.9
Form of an HTML
Document
<html>
<head>
<title>Lynn’s Home Page</title>
</head>
<body>
this is my homepage and nobody else's.
</body>
</html>
4.10
Tags Defining Form
• Paragraph <p>, line break <br>,
horizontal rule <hr>
• Lists (numbered <ol>…</ol>, bulleted
<ul>…</ul>, etc.)
• Headings <h1>…</h1> through
<h6>...</h6>
• Tables
4.11
Tags Defining Form
<body>
This is normal text because it
is not surrounded by any
tags.
<p>This is a second
paragraph. It is separated
from the first with a
paragraph tag.
<p>
<hr>
<p>
Send comments to:<br>
Lynn Ward <br>
e-mail: [email protected]
</body>
This is normal text because it is
not surrounded by any tags.
This is a second paragraph. It
is separated from the first with a
paragraph tag.
Send comments to:
Lynn Ward
email: [email protected]
</body>
4.12
Headings/Subheadings
<body>
<h1>first level heading; title of
document</h1>
<h2>second level heading</h2>
<h3>third level heading</h3>
<h4>and so fourth [sic]</h4>
<h5>fifth</h5>
<h6>sixth</h6>
</body>
first level heading;
title of document
second level heading
third level heading
and so fourth [sic]
fifth
sixth
4.13
Ordered and Bulleted
Lists
<body>
<ol>
<li>this is item number one
<li>this is number two
<li>number three, and so
on
</ol>
<p>
<ul>
<li>this is the first
<li>the second
<li>the third
<p>
<li>the fourth
</ul>
</body>
1.
2.
3.
this is item number
one
this is number two; the
text will wrap to the
next line with a hanging indent
number three, and
so on
•
•
•
this is the first
the second
the third
•
the fourth
4.14
Tags for Styling Text
• There are two types of style characteristics that
can be applied to text:
– Logical Styles - specify meaning or function of the
tagged block; the Web browser determines actual
appearance
– Physical Styles - specify the appearance of the tagged
block; always rendered in more or less the same way
• Most HTML guides recommend using logical
styles instead of physical whenever possible
4.15
Logical Styles
• Emphasis (paired) - <em>…</em> - usually displayed in
italics
• Strong emphasis (paired) - <strong>…</strong> - usually
displayed in boldface
• Citation (paired) - <cite>…</cite> - for books titles, etc.;
usually displayed in italics
• Keyboard entry (paired) - <kbd>…</kbd> - used to
instruct the reader what to type on the keyboard
(computer input); usually displayed in a fixed width font
such as Courier
4.16
Physical Styles
• Boldface (paired) - <b>…</b> - displays text
in boldface
• Italics (paired) - <i>…</i> - displays text in
italics
• Underline (paired) - <u>…</u>
• Typewriter Text (paired) - <tt>…</tt> displays text in a fixed width font
• Font size, color, etc. <font …>…</font>
4.17
Text Styles
<body>
To emphasize text in HTML, you
can either use the <b>bold</b>
tags or <em>emphasis</em> tags.
In NCSA’s <cite> A Beginner's
Guide to HTML</cite>, logical
styles are recommended over
physical styles. However, if you
want to control how the browser
will render the text, you may
choose to use physical styles
</body>
To emphasize text in HTML, you
can either use the bold tags or
emphasis tags. In NCSA’s
A Beginner's Guide to HTML,
logical styles are recommended
over physical styles. However, if you want to control how
the browser will render the text,
you may choose to use physical
styles
4.18
HTML Formatting Quirks
• Multiple tabs or spaces are rendered as a single
space (exception is preformatted text within
<pre>...</pre> tags)
• Hard returns are ignored. HTML paragraphs are
separated from one another with the <p> tag
(exception within <pre>...</pre> tags)
• Line length is determined by the current Window
size of the browser unless you use the <br> tag
4.19
What’s a URL
• Uniform Resource Locator
• Defines the protocol (application/scheme),
location, and name of the resource
• Usual format is:
scheme://domain.name[:port]/path/filename
http://www.uiuc.edu/providers/senate/accal.html
4.20
Inline Images
• Graphic images that are displayed within the body
of an HTML document.
• Only two formats currently supported by most web
browsers
GIF
JPEG
• Basic syntax for inline image:
<img src="path/filename" alt="description">
<img src="URL" alt="description" >
4.21
Inline Image
<h1>Welcome to UIUC</h1>
<p>
<img src=guide.gif alt=“visitor’s
guide” align=“left”>
We are pleased to provide
you this convenient and interactive
way to learn more about our
campus, and community.
And we are proud to be
among the most popular world
wide web sites on the Internet.
Welcome to UIUC
We are pleased to provide
you this convenient and
interactive way to learn more
about our campus, and
community. And we are proud
to be among the most popular
world wide web sites on the
Internet.
4.22
HyperText Links/Anchors
• Block of text or image is linked to another document or
resource
• The text block or image is called an anchor because it
anchors the link to a specific location in the document:
Go to the main
<a href="http://www.uiuc.edu"> UIUC
Web Server</a>
• Two types of anchors:
– link anchor
– target anchor
4.23
Link Anchor
• Also called HyperText Reference (HREF)
• Link anchor: <a href="url">link anchor
text</a>
• Link anchors can link to:
– a different document
– to an entirely different type of network resource
– a specific location in the same document or in a different
document (requires a target anchor)
4.24
Target Anchor
• Also called a NAMEd anchor <a name=…>
because it assigns a name to the block of text or
image that is the destination of a hypertext link
• The link anchor points to the target anchor;
preceded by a #
• The target anchor is the destination of the link
anchor
• The target anchor is invisible; does not display or
print
4.25
Link and Target Anchor
<h3>Table of Contents</h3>
<a href=“#I”> I. Getting Started</a><br>
<a href=“#II”>II. Styling Text</a><br>
<a href=“#III”>III. Making Links</a><br>
<p>
<a name=“I”> <h2>I. Getting Started
</h2></a>
blah de blahde de blah lahde de blah
lah de de blah blah lahde de blah
de de blah blah lahde de blah
<p>
<a name=“II”> <h2>II. Styling Text</h2>
</a>
blah de blahde de blah lahde de blah
lah de de blah blah lahde de blah
de de blah blah lahde de blah
<p>
<a name=“III”> <h2>III. Making Links
</h2></a>
blah de blahde de blah lahde de blah
lah de de blah blah lahde de blah
de de blah blah lahde de blah
<em>dfkjsdf</em> blah de blahde
de blah lahde de blah
lah de de blah blah lahde de blah
de de blah blah lahde de blah
4.26
Working With Images
•
•
•
•
•
•
Copying Images from the Web
Image Formats for the Web
Making Images Smaller
Making an Image Transparent
Working with Image Maps
Anti-aliasing
4.27
Copying Images from the
Web
• Place mouse over image
• Right-click to display drop-down menu
• Choose “Save Images As…” or equivalent
4.28
Image Formats for the
Web
• GIF (Graphics Interchange Format
– limited to 256 colors (8-bit)
– compression
– animation
• JPEG (Joint Photographic Experts Group)
– up to 16 million colors (24-bit)
– lossy compression
• GIF is normally used for small icon-like images,
JPEG for real-live photos
4.29
Making Images Smaller
• Play with image editors and format
convertors
• To reduce file size:
– Reduce number of colors (color depth)
– Save as JPEG and increase compression
ratio
4.30
Transparent Images
• Image background is transparent and
takes on background color of page
• Most graphics programs include option of
saving transparency information with GIF
images
4.31
Image Maps
• Inline image and associated HTML
map
• Map identifies geometric shapes in
image with pixel coordinates
• Each shape is associated with a URL
• Clicking inside the shape moves
browser to URL
• Example
4.32
How Image Maps Work
monitor.html
cpu.html
keyboard.html
4.33
Image Map Syntax
<IMG SRC= "URL/filename" WIDTH=432
HEIGHT=432 BORDER="0" USEMAP="#mapname">
<MAP NAME="mapname">
<AREA SHAPE=RECT COORDS= "X,Y,X,Y"
HREF= "URL/filename" >
<AREA SHAPE=POLY COORDS="X,Y1, X,Y2,X,Y3..."
HREF= "URL/filename" >
<AREA SHAPE=CIRCLE COORDS="XCenter,
YCenter, RADIUS" HREF="URL/filename">
</MAP>
4.34
Publishing Web Pages
• Publicly accessible Web pages must
reside on a Web (HTTP) server
• Many different methods for moving files
from desktop to server
• Most common method is FTP (the Internet
File Transfer Protocol)
• Here we can place files of the web page in
public_html directory with copy command.
4.35
Publishing with FTP
• Generic FTP client (Fetch for Mac, WSFTP for Windows)
• Some Web authoring tools have built-in
FTP-based publishing
• What you need to know:
– server name
- username
– password
- path name for Web
– URL for accessing Web
• HTML=text/ASCII GIF=binary
4.36
HTML Tables
• Adds tremendous power to page
formatting
• Good for
– tabular data (data in neat rows and columns)
– controlling page margins
– page layout
4.37
How HTML Tables Work
ONE
TWO
THREE FOUR
<TABLE>
<TR> <TD>ONE</TD> <TD>TWO</TD> </TR>
<TR> <TD>THREE</TD> <TD>FOUR</TD> </TR>
</TABLE>
4.38
HTML Tables
• Table data can be text or images
• Additional tags allow for:
– data spanning row(s) or column(s)
– controlling border width
– vertical and horizontal alignment of data
4.39
HTML Frames
• A method for breaking up a browser
window into multiple “panes”
• Each pane holds a different document
• Often clicking on link in one pane opens a
new document in another
• Older browsers do not support frames
4.40
A Simple Example
M
E
N
U
MAIN
<FRAMESET COLS="216,*">
<FRAME SRC="menu.html” NAME= "MENU">
<FRAME SRC="main.html" NAME= "MAIN" >
</FRAMESET>
4.41
Navigation
• Keep site navigation easy, intuitive, shallow
• Link to home on every page
• Visual cues
–
–
–
–
recurring navigation bar (text or graphical)
color coded site areas
menu system (frames, tables, plain text)
site map
4.42
Mapping Organizational
Model to Page Hierarchy
Home
Lect
1
Lectures
Chat
Lect
2
Lect
3
Assign
ments
Quizzes
Glossary
4.43
Aesthetics
•
•
•
•
Try for a balance of unity and variety
Give your pages a consistent look and feel
Break up the page in interesting ways
Blend text with graphics
4.44
Aesthetics No-Nos
•
•
•
•
•
Blinking text
Large or wide graphics
Small fonts
Overly-animated pages
Loud backgrounds
4.45
Good Habits
• Always provide alternative text for inline
images
• Test all links after you upload your pages
• View your document with multiple
browsers
• Keep download time to a minimum
• Do not use Java and JavaScript unless
really necessary
4.46
File Organization
• Most sites begin with little or no planning
for how files will be organized
• Later changes can require editing all links
• Organizing your files is as important as
your site’s logical organization
4.47
File Organization
home
index.html
lectures
readings announce
assignments
index.html
lect1
lect2
lect3
index.html
index.html
*.gif
*.gif
4.48
Relative vs. Absolute
Paths vs. URLs
• When a page links to another file on the same
server, there are three ways to define the link
– relative path
– absolute path from Web root
(/path/filename.html)
– URL
• Generally relative paths are preferred because
site can be moved with no adjustments
4.49
Relative Path
• Gives the location of the linked file
“relative to” the file linking to it
lectures
index.html
lect1
lect2
When linking to a file in a
directory beneath the current
directory, list the one or more
directory names that lead to the
file without a leading slash:
lect3
<a href=“lect1/index.html”>
index.html
sect2
stars.html
<a href=“lect3/sect2/stars.html”>
4.50
Linking Up with Relative
Paths
lectures
index.html
lect1
lect2
When linking to a file in a
directory above the current
directory, each directory
above the current directory
should be represented with
double dots followed by a
slash (../).
lect3
<a href=“../index.html”>
index.html
sect2
stars.html
<a href=“../../index.html”>
4.51
Linking Over with
Relative Paths
lectures
index.html
lect1
index.html
lect2
When linking to a file in a
directory on a different
branch of the tree, use
double-dots to move up to
a common parent directory
and then progress down
the directories to the file on
the other branch
lect3
sect2
stars.html
<a href=“../../lect1/index.html”>
4.52

Introduction to Authoring Documents for the World Wide Web

Transcript Introduction to Authoring Documents for the World Wide Web

Directory