Upload
shanon-greene
View
222
Download
0
Embed Size (px)
Citation preview
HTML
Instructor: Charles Moen
CSCI/CINF 4230
2
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
HTML (Ding, Schultz, Wikipedia)
3
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
HTML (Ding, Wikipedia, Schultz)
4
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
HTML (Wikipedia)
5
Early Hypertext DevelopmentHTML (Wikipedia)
HypertextEarly precursors to hypertextThe MemexA device from the imaginationof Vanevar Bush, that inspiredTed Nelson and Douglas Englebart
Vanevar BushDescribed a device he calledthe 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 NelsonInvented the term “hypertext” in1965Developed the Hypertext Editing System at Brown University in 1968 Douglas Englebart
In the early 1960s, designed theNLS (oN-Line System) that usedhypertext. Demo’d it in 1968, including the first public demo ofcontrolling a computer with a mouse.
HyperCardFirst successful hypertext systemCreated at Apple Computer, 1987
6
How does a link work on the Web?
The Web uses a client-server architecture
HTML (Guelich)
A Web browser,such as FireFox
is the client
Web server software,such as Apache or IIS
is the server
1. A user clicks a link on a Web page, which causes the browser to send an HTTP request over the Internet to a server
2. The server examines the request to determine what document to return, index.html in this example
3. The server sends an HTTP response to the browser containing the HTML text
4. The browser interprets the HTML and displays it as a Web page
GET /index.html HTTP/1.0
7
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
HTML (Ding, Spainhour)
8
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
HTML (Ding, Spainhour)
<h1>This is a level 1 head</h1>
Start tag
An HTML element:
End tag
Tag name
End tags always have a slash
A start tag should befollowed by an end tag
9
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
HTML (Ding)
10
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 browser
HTML (Ding)
11
HTML Document Structure
All Web pages should have one head and one body element, and both must be nested within a single html element.
HTML (Spainhour)
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>
12
<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>
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
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.
HTML (Spainhour)
13
<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>
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
The body element contains everything that will be displayed on the Web page.
HTML (Spainhour)
14
<!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>
HTML Document Structure
The correct DOCTYPE element must be on the first line of every HTML file.
index.html The DOCTYPE element is used by modern browsers to determine which standard to use for displaying your Web pageIf you leave it out, your page will be displayed using an old, outdated standard.Standards modeThe browser uses HTML and CSS standards to render the page
Quirks modeThe browser attempts to emulate the rendering in older browsers, such as IE4
HTML (Zeldman, Wikipedia)
15
DOCTYPE Element
For your HTML files, use the “strict” DOCTYPE
HTML (Zeldman, Wikipedia)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
Older Web pages sometimes use the “transitional” DOCTYPE
• Allows deprecated elements to be used on the page
16
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
HTML (W3C)
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
17
Nesting Elements
COMMON ERRORHere is an example of incorrect nesting:
HTML
HTML elements can be nestedHere 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
<h1>This is a <em>level 1 head</h1></em>
These end tags are misplaced!
18
<body bgcolor="white">Hello World</body>
HTML Markup Tags (Cont.)
Some tags require attributes, and some tags allow optional attributes
HTML
Attribute
Extra space is ignored (e.g., extra blank lines) Some elements do not require two tags
<br/><hr/>
• Attribute name• Assignment operator• Value within quotation marks
Backslash is always required, even though most browsers will still format your page correctly if it’s missing
19
Some Useful HTML Elements
Comment Headings Paragraph Line break
HTML (Ding)
<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>
20
HTML Lists
Unordered List
HTML (Ding, Spainhour)
<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>
21
Nested Lists
A nested list must be a child of an li element
HTML (Ding, Spainhour)
<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>
22
Common Error
Where is the error?
HTML (Ding, Spainhour)
<!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>
23
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>
HTML (Ding, Spainhour, Schultz)
<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
24
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
HTML (Ding, Schultz)
<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
Relative and Absolute Paths
25
HTML
<a href="http://dcm.uhcl.edu/moen/">Charles Moen</a>
pages
index.html
HW2
deli.html
images
stylesheets
poorboy.jpg
scripts
deli.css
deli.js
burger.jpg
<a href="http://dcm.uhcl.edu/moen/HW2/deli.html">HW2</a>
menu.html<html>
<head>
<title>Links example</title>
</head>
<body>
<a href="menu.html">Menu</a>
<img src="images/burger.jpg"/>
</body>
</html>
deli.html
A link that uses an absolute path
Links that use a relative path
26
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
HTML (Wikipedia)
<img src="images/UHCLicon.gif" alt="UHCL" height="85" width="65"/>
27
Linking to a location on a page
A link can scroll to a particular location on a page
HTML (Schultz, Ding)
<html>
<head>
<title>Links example</title>
</head>
<body>
<a id="top"/>
<p>A lot of text goes here.</p>
<a id="middle"/>
<p>More text goes here.</p>
<a href="#top">Return to top</a>
</body>
</html>
http://dcm.uhcl.edu/moen/index.html#middle
index.html
This link scrolls the page to the top
This link opens the page and scrolls to the middle
28
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:”
HTML (Spainhour)
<a href="mailto:[email protected]">Charles Moen</a>
29
HTML Tables
HTML table elements are used to display tabular data
HTML (Ding, Spainhour, Schultz)
<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>
30
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
HTML (Ding, Spainhour, Schultz)
Character entity for a non-breaking space
 
Numeric entity for a non-breaking space
ampersandassigned name
semicolon Unicode number
31
Common Character Entities
Non-breaking space  
Less than < <
Greater than > >
Ampersand & &
Copyright © ©
Registered trademark ® ®
HTML (Ding, Spainhour, Schultz)
Character entity Numeric entity
(Some browsers cannot render all symbols)
32
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
HTML (Ding, Spainhour, Schultz)
33
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
HTML (Ding, Spainhour, Schultz)
<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>
index.html
34
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
HTML (Ding, Spainhour, Schultz)
<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>
index.html
header.html
welcome.htmlmenu.html
35
HTML Forms
Data is input by the user in an HTML form element
We will cover HTML forms next week
HTML
36
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• Or you can use “index.htm”, “default.html”, or “default.htm”
4. 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
7. If you create another folder under your “pages” folder, then you will need to add it to the URL
• 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
HTML (Ding)
37
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/