Transcript li - Index of

HTML I
ECT 270
Robin Burke
Digital Divas





2
Friday 9/26 5:30-7:00 pm
9th floor (9102)
"Digital Divas: Career Advising, Networking, and
Resources for Women in CTI"
 Reception hosted by the DePaul CTI chapter of the
ACM-W.
All graduate and undergraduate women at CTI.
Agenda
 Dean Epp
 Career Center, Student Services, the Honor Society,
DeFRAG and DLUG.
 There will also be networking and advising
opportunities.
Outline





3
Definition and history
The HTML standard
 Syntax
Tags
 Document
 Structure
 Style
 Anchors and links
 Images
Break
Lab I
HTML
HyperText Markup Language
 HyperText



4
text containing navigable links to other
texts
Markup Language
Markup
“In computerized document preparation,
a method of adding information to the
text indicating the logical components
of a document, or instructions for
layout of the text on the page or other
information which can be interpreted
by some automatic system”
– FOLDOC
5
Markup
Adding information to text document
 Indicating

Logical components of document
 Instructions for layout

6
A Complex Example
7
HTML Pre-history



8
1970s and 80s
 Interest in a representation for large text documents
 SGML became a standard in 1985
SGML
 integrated many existing efforts in different
organizations
 a complex “language for languages”
 concentrated on paper documents
CERN
 was using SGML when Berners-Lee was there
 he saw the benefits of the approach
SGML


Standard Generalized Markup Language
Design principles

generic
• An organization could build a custom language for
their particular documents


minimize keystrokes of input personnel
represent the logical structure of a document
• leave the graphical rendering to a separate
process

9
use meaningful tags as labels
HTML

From SGML

the idea of tags
• <foo> </foo>


the need to label logical structure
For the Web


hyperlinks
media
• images, video, sounds, applets, controls, etc.

10
a simplified document processing model
An aside

The idea of a generic, tailorable
language has continued to evolve


Winter 2004

11
XML
ECT 360 – Introduction to XML
HTML Principles

Platform, device, modality
independence
hard to achieve in reality
 different browser, different rendering


Human-readable text format


12
independence from an editing
application
Standard conformance and evolution
HTML Standard





What tags exist?
How are the tags to be interpreted?
How are the tags related to each other?
How should the client respond to user
interaction with the page?
Standard body is the World Wide Web
Consortium

13
www.w3c.org
Versions of the standard

HTML 1.0



HTML 2.0



1998
XHTML 1.0


14
3.0 never released
added tables, applets, text flow
HTML 4.0


1994
HTML 3.2
 1996


1993
never fully standardized
current recommendation
makes HTML conformant with XML
Browser Versions


27 available browser versions
 all support different combinations of HTML features
Current leaders
 IE 6
 IE 5
 Netscape 6
• way behind
Opera
In this class
 We will concentrate on IE features
 Talk some about compatibility issues


15
Other rendering issues



16
User’s monitor
 size
 resolution
 color depth
 color temperature
User preferences
 window size
 browser preference settings
 images off
Browser capabilities
 format-specific plug-ins
 Java version
Tools

Text editor



Web client / browser



viewing files
IE 5 or 6
Web server


17
editing HTML files
(no WYSIWYG editors, please)
deliver the files to users
students.depaul.edu
Process

Write HTML file
ASCII / text format
 extension .html or .htm


Upload to server
public_html directory
 permissions 644


Similar with images

18
.gif and .jpg formats
Terminology

Document content


Tag


properties associated with a tag
Entities

19
HTML codes that control document
appearance
Attributes


the parts of the file that the user sees
specially-coded characters
Character Entities
(Appendix B)
Code name
Code
Symbol
&lt
&#60
<
&gt
&#62
>
&amp
&#38
&
&copy
&#169
©
&reg
&#174
®
&nbsp
&#160
Non-breaking space
&#64
@
&#183
●
20
Tag syntax





21
Tags are case-insensitive
 but all lower case is recommended
 XHTML will require it
Tags are enclosed in angle brackets
 <html>
Tags typically come in pairs
 <title>
 </title>
Tags typically enclose document content
 <p>some text... </p>
Tags can only be nested
 <foo> <bar> </foo> </bar> illegal
Attribute syntax

Attributes are name / value pairs included in
tags


Attributes never include document content



may include formatting information
color, size, etc.
HTML attributes do not need to be quoted

22
<body bgcolor=“black”>
But XHTML will require it
Tag types





23
Document tags
 identify the various parts of the document (Head,
Body)
Text structure tags
 determine the layout of the text (lists, paragraphs)
Style tags
 tell the browser how to display the text
Image tags
 to incorporate images
Anchor tags
 to create hyperlinks
Document tags




<html> … </html> Mark the beginning and end of the
html file
<head> … </head> Text in this part of the document
is not displayed in the browser’s window. It includes
other tags like <title> and <meta>
<title> … </title> Displayed in the browser’s title bar.
It is used as the default bookmark description.
<body> … </body> The contents displayed in the
browser’s window.
24
The bare minimum
<html>
<head>
<title>ECT270: The bare minimum
</title>
</head>
<body>Hello world
</body>
</html>
25
Actually
<title>Real bare minimum</title>
Hello World!
26
HTML Comments


The comment feature provides you with a way to
document your HTML files and make notes to
yourself
Basic form



<!-- + Comments + -->
<!-- This is a comment -->
Do not include any embedded HTML code in
commented text because the results are
unpredictable
27
Text structure tags

Headings: <hx> … </hx> for 1  x  6
The smaller x the larger the text

Paragraph: <p> … </p>
A blank line is inserted before the paragraph.
Line Break: <br>
 Ordered lists: <ol> … </ol>
 Unordered lists: <ul> … </ul>

28
Spacing example
<hmtl>
<head>
<title>Spacing example</title>
</head>
<body>
<h1>Important! (This is an H1)</h1>
<p>Notice that we have some text in this paragraph.</p>
<h3>Spacing test (this is an H3)</h3>
<p>Here I
am
spacing things
It does not make a difference.
widely.
I just left two lines blank, but I am still here!
</p>
One line<br>
Second line<br>
<p>Another paragraph!</p>
</body>
</html>
Unordered lists


An unordered (or bullet) list uses the tag pair <ul> … </ul>
Each item in the list is preceded by a single list item tag
<li>


It produces an indented list with a browser-supplied character in
front of it (a small circle or a square)
You can specify the type of symbol used by using the TYPE attribute
<ul type=“disc”>
<li>item 1 </li>
</ul>30
Other possible types are:
square|circle
Example
<html>
<head>
<title></title>
</head>
<body>
<h1>Here is an example of a list</h1>
<ul>
<li>First item </li>
<li>Second item </li>
</ul>
<ul type=“square”>
<li>Third item </li>
<li>Fourth item </li>
</ul>
</body>
</html>
•First item
•Second item
Third item
Fourth item
Ordered lists


An ordered list uses the tag pair <ol>… </ol>
Each item in the list is preceded by a single list
item tag <li>
1.
2.
This also produces an indented list but the items are
ordered.
The default is to order by numbers (like this)
32
Example
<html>
<head>
<title> …. </title>
</head>
<body>
<h1>Here is an example of a ordered list
</h1>
<ol>
<li>First item </li>
<li>Second item </li>
</ol>
</body>
</hmtl>
1. First item
2. Second item
Nested lists
Both ordered and unordered lists can be
nested
 This is done by starting a new list before the
current list has ended
 There is no limit to the number of levels of
nesting
 Use indenting in the source code to distinguish
between each level of nesting

34
Attributes for ordered lists
 TYPE can change the type of numbering used in
a list.
 TYPE = “I” Uppercase Roman numerals
 TYPE = “i” Lowercase Roman numerals
 TYPE = “A” Uppercase Latin letters
 TYPE = “a” Lowercase Latin letters
 START can change where the lists begins the
numbering.
 START = “3” Starts from 3 instead of 1
 START = “b” Starts from b instead of a
35
List example
<html>
<head><title>ECT270 Lists</title></head>
<body><h1>To do list</h1>
<ol type =“A” >
<li>Pick up dry cleaning
<li>Clean the house
<ul>
<li>Sweep the floors </li>
<li>Take out garbage </li>
<li>Clean kitchen </li>
</ul>
<li>Stop by post office
<ul>
<li>Get stamps
<ul>
<li>Overseas airmail </li>
<li>Domestic </li>
</ul>
<li>Mail package </li>
</ul>
</ol>
</body>
</html>
Other structure tags



37
definition lists
 <dl>
 never really caught on
blockquote
 <blockquote>
 Indents with using a list
 supposedly for extended quotations
 often used for spacing
preformatted text
 <pre></pre>
 no HTML formatting performed
Style tags

Tags that determine how text is to be
rendered
undermine the separation between
content / display
 deprecated but widely used
 solution: cascading style sheets

38
Display style tags






39
specify text properties directly
italic
 <i>
bold
 <b>
font
 <font>
underlined
 <u>
 bad idea
center
 <center>
Logical style tags





40
describe text content
 browser chooses rendering
Emphasis
 <em>
 usually italic
Strong
 <strong>
 usually bold
Code
 <code>
 monospaced font
Others
Style example
<html>
<head>
<title>Style example</title>
</head>
<body>
<p><center><font color="red">Red text, centered</font></center></p>
<p align="center"><font color="red">Red text, centered also</font></p>
<p><font color="blue" size="+1"
face="Arial, Helvetica, sans-serif">Blue text, larger,
in a sans-serif font</font></p>
<p>Preformatted</p>
<pre>I can use space however I want
10 spaces
!
</pre>
Back to normal.<br>
</body>
</html>
41
Anchor tag (Hyperlinks)

<a> … </a> Used to create hyperlinks to





other documents in the same Web site
to different locations in the same document.
to external Web sites
The attribute HREF indicates the destination of
the link.
<a href= “url" > Clickable text </a>
42
Link to external webpages
<a href="http://josquin.cs.depaul.edu/~rburke/">
My Web page</a>
To force a document to appear in a new window, use the
target attribute
<a href="http://josquin.cs.depaul.edu/~burke/"
target="new_window"> My Web page</a>
43
Relative URLs

Full URL


Can be abbreviated in a link


<a href="foo.html">
The rest of the URL is filled in

44
http://josquin.cs.depaul.edu/~rburke/fo
o.html
from the URL of the current page
Relative paths

What if the destination is not in the same
directory as the source


We can use Unix path syntax for navigation
Elements

/
• go back up to the very top

foo/
• go down to a child directory named "foo"

..
• go up to the parent directory
45
Relative path
public_html
main.htm
file1.htm
ect270
images
hw
hw3.htm
hw2.jpg
Link main.htm to hw3.htm: <a href=“ect270/hw3.htm”>
Link hw3.htm to main.htm: <a href=“../main.htm”>
Link hw3.htm to hw2.jpg: <a href=“../images/hw/hw2.jpg”>
Structure

Your local directory structure


Must match the structure on the
server


where you are writing your web pages
contents of public_html directory
Otherwise
links will work when you test locally
 but not after being uploaded

47
Mailto hyperlinks
The anchor tag and the HREF attribute can be used
to reference the e-mail protocol.
In general this looks like:
<a href = “mailto:e-mail address” > name</a>
Example:
To make an appointment contact
<a href = “mailto:[email protected]”>Robin Burke</A>.
To make an appointment contact Robin Burke.
48
Intra-document linking
Hyper link
Anchor
Intra-document linking

You can specify a hyperlink that takes the user
to a particular location in the current Web
page. This is done by
1.
2.

Placing a named anchor at the target location
<a name=“webpage”>Course Web Page</a>
Hyperlink a word to that named location
<a href=“#webpage”>Course Web Page</a>
Link to an anchor in another document in the
same Web Site.
<a href=“DePaul.htm#integrity”>…</a>
50
Inserting a Graphic

Images can be displayed in two ways: as inline
images or as external images.




an inline image displays directly on the Web page and
is displayed when the page is accessed by a user
an inline image can be placed on a separate line in
your HTML code, or it can be placed directly within a
line of text
inline images should be in one of several file formats.
Most common
• GIF (Graphics Interchange Format)
• JPEG (Joint Photographic Experts Group)
• PNG (Portable Net Graphics)
51
Inserting a Graphic
Continued



52
an external image is not displayed with the
Web page, the browser must have a file
viewer, which is a separate program that the
browser launches when it encounters an
external image file
external images are represented by an icon
that a user clicks to view the image
external images are only limited by
applications available at the client
Image file formats

GIF (Graphic Interchange Format)




JPG (Joint Photographic Expert Group)




To display clip art containing < 256 colors
To create animated graphics
To use transparent colors
To display photographs
To use images containing >256 colors
To reduce the size of the image through file compression
PNG (Portable Net Graphics)




A replacement for GIF
Compressed
More color depth
α transparency
53
Image tag



Inline image: a picture file that is referenced in the
HTML code and is loaded with the HTML file.
<img src ="photo.jpg">
src attribute



URL
is usually relative
If you want to retrieve an image from a different
directory, you can add path information to the file
name:
<img src=“images/photo.jpg”>
54
More image tag attributes





HEIGHT: specifies the height of the image in pixels
WIDTH: specifies the width of the image in pixels
BORDER: determines the size of the border
ALT: specifies the text displayed on-screen when the image
cannot be loaded
ALIGN: enables text to flow around the image: at the TOP,
MIDDLE, or BOTTOM of the image. Also used to flush the
image to the RIGHT or LEFT of the screen
55
Flowing Text

Use the align attribute to make text flow
alongside an image:
<img src=“cat.jpg” align=“left”>
positions the image on the left side of the page and
allows text to run down its right side
 To center an image, use
<p align=“center”><img src=“…”></p>
56
Image example
<html>
<head></head>
<body>
<h1 align="center"> Martin Luther King, Jr. </h1>
<p> <img src="mlk.gif" align="right“ width=“336”
height=“400”>
I have a dream that one day this nation will rise up and live out
the true meaning of its creed: "We hold these truths to be selfevident: that all men are created equal." …… I have a dream
today. </p>
<p> I have a dream that one day the state of Alabama, whose
governor's lips are presently dripping with the words of
interposition and nullification, will be transformed into a
…..</p>
…………
</body>
</html>
57
Bandwidth

Image files are larger text files


Users who access the Internet via telephone lines
will have to wait for image files


estimate 7K / sec or less
Use image files no larger than 30-40KB


Use more network resources (bandwidth)
especially on heavily used pages
Use "alt" text to describe images

for users with image loading turned off
58
Battling Bandwidth
Limitations

Always specify height and width attributes for all
your images so the browser can “work around” each
image while it is downloading.



TIP: To find an image dimension: open it using a Web browser,
then select Properties on the File Menu.
Don’t put large images at the top of a Web page
Use interlaced GIFs and progressive JPGs.
Several shareware graphic programs save GIF or JPG files in
convenient formats: Paint Shop Pro or GIF Wizard

Use thumbnails – reduced versions of your image
59
Image links

Anchors can be used to hyperlink images instead of
text.
<a href=“URL”><img src=“photo.jpg” alt=“My photo”></a>


Whenever the mouse enters the clickable region, it
will display the contents of the ALT attribute.
By default, clickable images have blue borders

No blue border? Set the BORDER attribute inside the
IMG tag to 0.
<a href=“URL”><img src=“photo.jpg” alt=“My photo”
border=“0”> </a>
60
Example from course web site
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<TITLE>ECT 270 - Notes</TITLE>
<link href="../ect270.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P>
<a href="../index.html">
<img src="../ect270.gif"
alt="ECT 270: Client-Side Web Application Development"
border="0" width="475" height="75">
</a>
</P>
61