html instructor: charles moen csci/cinf 4230. 2 html hypertext markup language language that is...

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


<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




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




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>


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>  <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


<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


<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?


<!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> <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


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 ® ®


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


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> <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> <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/

html instructor: charles moen csci/cinf 4230. 2 html hypertext markup language language that is...

Documents