Download HTML

CSCI/CINF 4230
HTML
Instructor: Charles Moen
HTML (Ding, Schultz, Wikipedia)
HTML
 Hypertext Markup Language
 Language that is used to write Web pages
 Provides structure for plain text by using
markup tags
 Web pages are stored as HTML documents on
computers that we call Web servers
2
HTML (Ding, Wikipedia, Schultz)
HTML History
 Specification maintained by the
World Wide Web Consortium (W3C)
 Current specification
•
•
Version 4.01
Published in Dec. 1999
 Originally published by Tim Berners-Lee in 1991; and then
made public and free to use in 1993 by CERN
 Based on SGML (Standard Generalized Markup
Language)
 In 2000, XHTML 1.0 was specified; it is HTML 4.01 with
stricter syntax rules
3
HTML (Wikipedia)
What is hypertext?
 A document that organizes information using
links within its text
•
Traditional documents use a linear progression. Reading a book from
the beginning to the end is an example of getting information linearly.
•
A hypertext document is better than a traditional document, because it
allows the reader to use links to branch from one topic to another,
depending on the reader’s interests.
 Web pages are filled with links that are defined by
the HTML markup tags in an HTML document
 Makes the Web a powerful tool
4
HTML (Wikipedia)
Early Hypertext Development
Vanevar Bush
Hypertext
Early precursors to hypertext
The Memex
A device from the imagination
of Vanevar Bush, that inspired
Ted Nelson and
Douglas Englebart
Described a device he called
the Memex in 1945, which he
imagined to be a mechanical
desk used in the future to
retrieve books and documents
from a microfilm library.
Ted Nelson
Invented the term “hypertext” in
1965
Developed the Hypertext Editing
System at Brown University
in 1968
Douglas Englebart
In the early 1960s, designed the
NLS (oN-Line System) that used
hypertext. Demo’d it in 1968,
including the first public demo of
controlling a computer with a
mouse.
HyperCard
First successful hypertext system
Created at Apple Computer, 1987
5
HTML (Guelich)
How does a link work on the Web?
The Web uses a client-server architecture
1.
A Web browser,
such as FireFox
is the client
Web server software,
such as Apache or IIS
is the server
A user clicks a link on a Web
page, which causes the browser
to send an HTTP request over
the Internet to a server
3.
4.
The server sends an
HTTP response to the
browser containing the
HTML text
The browser interprets the
HTML and displays it as a
Web page
2.
The server examines the
request to determine
what document to
return, index.html in this
example
GET /index.html HTTP/1.0
6
HTML (Ding, Spainhour)
What is an HTML document?
 A text file containing markup tags that tell a
browser how to display the text
 Stored on a Web server
 Can be created with any text editor, like Notepad
 File extensions
.html
.htm
7
HTML (Ding, Spainhour)
HTML Markup Tags
 Specify the structure of the Web page
•
Heads, paragraphs, lists, links, etc.
 Syntax
•
•
•
•
Angle brackets
Tag name
Elements are defined by start tags and end tags that turn on and turn off
a specification. The tags do not appear on the Web page.
Tag names are not case sensitive, but you should always use lower case
so that your Web pages comply with XHTML standards
An HTML element:
End tags always have a slash
<h1>This is a level 1 head</h1>
Tag name
Start tag
A start tag should be
followed by an end tag
End tag
8
HTML (Ding)
HTML Editors
 For this class, use a text editor, such as Notepad
 Text-based HTML editors
•
•
A plain text editor, often with color highlighting, sometimes including code
snippets
e.g., Notepad, Crimson, TextPad
 WYSIWYG HTML editors
•
WYSIWYG (What You See Is What You Get) editors allow you to
construct a Web page visually, dragging components onto the page from
a toolbox
• e.g., Adobe Dreamweaver, MS Sharepoint Designer
 If you want to be a skillful Web developer, you should
use a text-based editor so that you can learn HTML
9
HTML (Ding)
Creating an HTML document
 Open a new text file
 Type the required HTML elements
•
html, head, body, doctype
 Add any content and additional elements needed
 Save the file with the extension .html
•
Initially the HTML language was developed on UNIX systems and
.html was used
• Later, MS-DOS systems were used for creating Web pages, and the
extension had to be shortened to .htm
• Today, both extensions work
 An HTML file can be previewed by opening it with a
10
browser
HTML (Spainhour)
HTML Document Structure
All Web pages should have one head and one body element, and both
must be nested within a single html element.
index.html
<html>
<head>
<title>Simple Web Page</title>
</head>
<body>
<h1>This is a level 1 head</h1>
<p>
This is a paragraph of text.
</p>
</body>
</html>
11
HTML (Spainhour)
HTML Document Structure
All Web pages should have one head and one body element, and both
must be nested within a single html element.
index.html
<html>
<head>
<title>Simple Web Page</title>
</head>
<body>
<h1>This is a level 1 head</h1>
<p>
This is a paragraph of text.
</p>
</body>
</html>
The head element contains the title,
which is displayed in the browser’s
title bar or on a tab.
It can also include other elements that
are not to be displayed on the page,
such as the CSS styles that define the
appearance of the page or a meta
element that provides information
about the page.
12
HTML (Spainhour)
HTML Document Structure
All Web pages should have one head and one body element, and both
must be nested within a single html element.
index.html
<html>
<head>
<title>Simple Web Page</title>
</head>
<body>
<h1>This is a level 1 head</h1>
<p>
This is a paragraph of text.
</p>
</body>
</html>
The body element contains
everything that will be displayed on
the Web page.
13
HTML (Zeldman, Wikipedia)
HTML Document Structure
The correct DOCTYPE element must be on the first line of every HTML
file.
index.html
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>Simple Web Page</title>
</head>
<body>
<h1>This is a level 1 head</h1>
<p>
This is a paragraph of text.
</p>
</body>
</html>
The DOCTYPE element is used by
modern browsers to determine which
standard to use for displaying your
Web page
If you leave it out, your page will be
displayed using an old, outdated
standard.
Standards mode
The browser uses HTML and CSS
standards to render the page
Quirks mode
The browser attempts to emulate the
rendering in older browsers, such as IE4
14
HTML (Zeldman, Wikipedia)
DOCTYPE Element
 For your HTML files, use the “strict” DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 Older Web pages sometimes use the “transitional” DOCTYPE
• Allows deprecated elements to be used on the page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
15
HTML (W3C)
Markup Validation
 A markup validator checks whether your markup
code follows the standards; it checks the following:
•
•
•
•
Only allowed elements are used
Tag names are spelled correctly
Opening and closing tags are matched
No grammar rules are violated
 W3C Markup Validation Service
http://validator.w3.org
All homework assignments for this course must be validated, using the W3C
Markup Validator, and they must have a W3C validator link on the page
16
HTML
Nesting Elements
 HTML elements can be nested
Here is an example of an em element correctly nested within an h1
element:
<h1>This is a <em>level 1 head</em></h1>
The em tags are used to emphasize part of the text
 COMMON ERROR
Here is an example of incorrect nesting:
<h1>This is a <em>level 1 head</h1></em>
These end tags are misplaced!
17
HTML
HTML Markup Tags
(Cont.)
 Extra space is ignored (e.g., extra blank lines)
 Some elements do not require two tags
<br/>
<hr/>
Backslash is always required, even though most browsers
will still format your page correctly if it’s missing
 Some tags require attributes, and some tags allow optional
attributes
<body bgcolor="white">Hello World</body>
Attribute
• Attribute name
• Assignment operator
• Value within quotation marks
18
HTML (Ding)
Some Useful HTML Elements




Comment
Headings
Paragraph
Line break
<html>
<head>
<title>Simple Web Page</title>
</head>
<body>
<!-- This is a comment -->
<h1>This is a level 1 head</h1>
<h2>This is a level 2 head</h2>
<h3>This is a level 3 head</h3>
<p>
This is a paragraph<br/>of text.
</p>
</body>
</html>
19
HTML (Ding, Spainhour)
HTML Lists
Unordered List
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
Ordered List
<ol>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ol>
Definition List
<dl>
<dt>First term</dt>
<dd>Definition of the first term.</dd>
<dt>Second term</dt>
<dd>Definition of the second term.</dd>
</dl>
20
HTML (Ding, Spainhour)
Nested Lists
A nested list must be a child of an li element
<ol>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Green beans</li>
<li>Broccoli</li>
<li>Spinach</li>
</ul>
</li>
<li>Grains</li>
</ol>
21
HTML (Ding, Spainhour)
Common Error
Where is the error?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<ol>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
</li>
<li>Vegetables</li>
<ul>
<li>Green beans</li>
<li>Broccoli</li>
<li>Spinach</li>
</ul>
<li>Grains</li>
</ol>
</body>
</html>
22
HTML (Ding, Spainhour, Schultz)
HTML Links
 A Web page can link to many types of resources, e.g. another
Web page, a sound file, or a movie
 Links can be assigned to
•
•
•
Text
Image
Part of an image
 By default, a text link is displayed as underlined text, and the
cursor changes when the mouse hovers over a link
 Links are created with the anchor tag, <a>
<a href="http://www.uhcl.edu">UHCL</a>
When the user clicks on this link, the
browser will open the Web page at
the URL in the href attribute
23
HTML (Ding, Schultz)
Relative and Absolute Paths
 The value of the href attribute can be either a relative
path or an absolute path to a resource
 Absolute path
•
The complete URL of a resource
 Relative path
•
A path beginning at the location of the file for the current page
• Makes your Web app more portable, because the relative paths will not
change if you move your app to a different computer
<a href="HW1/index.html">Homework 1</a>
This is a relative path to a document inside a directory named “HW1,” which is
nested within the same directory as the page where this link appears
24
HTML
Relative and Absolute Paths
<a href="http://dcm.uhcl.edu/moen/">Charles Moen</a>
pages
index.html
<a href="http://dcm.uhcl.edu/moen/HW2/deli.html">HW2</a>
HW2
A link that uses an absolute path
deli.html
menu.html
images
poorboy.jpg
burger.jpg
deli.html
Links that use a relative path
<html>
<head>
<title>Links example</title>
</head>
<body>
stylesheets
<a href="menu.html">Menu</a>
deli.css
<img src="images/burger.jpg"/>
</body>
scripts
deli.js
</html>
25
HTML (Wikipedia)
Displaying an Image on a Web Page
 Images are linked to a Web page by the img element
 Stored as a separate file – needs another round trip from the server
Often stored in a folder named “images”
• GIF (Graphic Interchange Format) .gif
– Good choice for hard-edged graphics with flat colors, like logos
– 256 color palette
– supports animation
• JPEG (Joint Photographic Experts Group) .jpg
– Good choice for photographs or images with shaded colors
– Compression reduces the file size
• PNG (Portable Network Graphics) – usage is similar to GIF files
•
<img src="images/UHCLicon.gif" alt="UHCL" height="85" width="65"/>
26
HTML (Schultz, Ding)
Linking to a location on a page
 A link can scroll to a particular location on a page
index.html
<html>
<head>
<title>Links example</title>
</head>
<body>
<a id="top"/>
<p>A lot of text goes here.</p>
<a id="middle"/>
This link scrolls the page to the top
<p>More text goes here.</p>
<a href="#top">Return to top</a>
</body>
This link opens the page and scrolls to the
middle
</html>
http://dcm.uhcl.edu/moen/index.html#middle
27
HTML (Spainhour)
Linking to an Email Address
 When this link is clicked, it will launch the default
email program and open a new message to the
address after “mailto:”
<a href="mailto:[email protected]">Charles Moen</a>
28
HTML (Ding, Spainhour, Schultz)
HTML Tables
 HTML table elements are used to display tabular
data
<html>
<head>
<title>Table Sample</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" width="300">
<caption>Deli Menu</caption>
<tr>
<th>Sandwich</th><th>Price</th>
</tr>
<tr>
<td>Shrimp Poorboy</td><td align="right">$5.99</td>
</tr>
<tr>
<td>Grilled Burger</td><td align="right">$4.99</td>
</tr>
</table>
</body>
</html>
29
HTML (Ding, Spainhour, Schultz)
Character Entities
 Some characters have a special meaning in HTML
The “less than” symbol: <
• The “greater than” symbol: >
•
 Some characters are ignored or they do not have a key
on the keyboard
•
Extra spaces
• The copyright symbol
 We can display these characters using a character entity
or a numeric entity
Character entity for a non-breaking space
&nbsp;
ampersand
assigned
name
Numeric entity for a non-breaking space
&#160;
semicolon
Unicode number
30
HTML (Ding, Spainhour, Schultz)
Common Character Entities
Character entity
Numeric entity
 Non-breaking space
&nbsp;
&#160;
 Less than
&lt;
&#60;
 Greater than
&gt;
&#62;
 Ampersand
&amp;
&#38;
 Copyright
&copy;
&#169;
 Registered trademark
&reg;
&#174;
(Some browsers cannot render all symbols)
31
HTML (Ding, Spainhour, Schultz)
HTML Frames
 HTML frames are used to break up a page into multiple panes where
each pane displays a separate HTML document
 Frames are deprecated in XHTML Strict, and there is a separate
specification called “XHTML Frameset 1.0” for pages that still use
frames
 Frames are not used as much today, because of several problems
•
Maintenance problems:
–
–
•
It’s difficult for the developer to keep track of multiple pages
Some older browsers cannot display frames, so the developer has to create a “noframes” version
Usability problems:
–
–
–
It’s very difficult for the user to print all the frames on a single page
It’s difficult for the user to bookmark a particular page correctly
Search engines have trouble with indexing framed Web sites
 Despite the problems, frames are still used; a more common use
today is the “iframe” (inline frame) element
32
HTML (Ding, Spainhour, Schultz)
HTML Frames
 The “frameset” tag defines how to divide the window
into frames
 Each frameset defines a set of rows or columns
and the amount of screen area for each
 The “frame” tag defines which HTML document
to put into each frame
index.html
<html>
<head>
<title>Wilderness Texas Adventures</title>
</head>
<frameset rows="70,*">
<frame src="header.html" scrolling="no" noresize>
<frameset cols="260,*">
<frame src="menu.html">
<frame src="welcome.html" name="main" noresize>
</frameset>
</frameset>
<noframes>Sorry, no frames!</noframes>
</html>
33
HTML (Ding, Spainhour, Schultz)
HTML Frames
 The “frameset” tag defines how to divide the window
into frames
 Each frameset defines a set of rows or columns
and the amount of screen area for each
 The “frame” tag defines which HTML document
to put into each frame
header.html
index.html
<html>
<head>
<title>Wilderness Texas Adventures</title>
</head>
<frameset rows="70,*">
<frame src="header.html" scrolling="no" noresize>
<frameset cols="260,*">
<frame src="menu.html">
<frame src="welcome.html" name="main" noresize>
</frameset>
</frameset>
<noframes>Sorry, no frames!</noframes>
</html>
menu.html
welcome.html
34
HTML
HTML Forms
 Data is input by the user in an HTML form element
 We will cover HTML forms next week
35
HTML (Ding)
Suggested Home Page Creation Procedure
1.
Create the files (e.g., the HTML files) on your local computer
2.
Use relative path names for all the hyperlinks
3.
Use “index.html” for the name of the file for your home page
•
4.
Or you can use “index.htm”, “default.html”, or “default.htm”
Set up the connection with dcm by using either FTP or network drive mapping
•
See the FAQs page for this course for written instructions
•
You can also ask the TA if you need face-to-face help
5.
Upload your HTML files to the “pages” folder under your dcm account
6.
Test your page with the URL
•
http://dcm.uhcl.edu/yourusername
•
Remember that “pages”is not part of the URL
If you create another folder under your “pages” folder, then you will need to add it to
the URL
7.
•
For example, if you create a “HW1” folder in “pages”, then you would use the following URL to access a file
inside HW1 that is named “index.html”
•
http://dcm.uhcl.edu/yourusername/HW1/index.html
36
References
Ding, Wei, “HTML” UHCL lecture slides, 2008.
Guelich, S., S. Gundavaram, and G. Birznieks. CGI Programming with Perl. O’Reilly,
2000.
Schultz, David and Craig Cook, Beginning HTML with CSS and XHTML: Modern Guide
and Reference. Apress, 2007.
Spainhour, Stephen and Robert Eckstein. Webmaster in a Nutshell, 3rd Edition. O'Reilly,
2002.
W3C. (1999). “HTML 4.01 Specification”, [Online]. Available:
http://www.w3.org/TR/html401/
Wikipedia. “HTML”. [Online]. Available:http://en.wikipedia.org/wiki/HTML
Wikipedia. “Hypertext”. [Online]. Available:http://en.wikipedia.org/wiki/Hypertext
Zeldman, Jeffrey. (2002) "Fix Your Site With the Right DOCTYPE!". [Online]. Available:
http://www.alistapart.com/stories/doctype/
37