Introduction to HTML

This lecture notes is based on Prof Doreen De Leon's lectures.

Source

A typical html file look like:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The title is Hello World!</title>
</head>
<body>
<h2>This is a test</h2>
<b>Hello world</b>
</body>
</html>

When view by a browser, it looks like

This is a test

Hello world

Web pages are written in HTML (HyperText Markup Language)
The best way to learn HTML is to view other people's source code.
To view source code, you can :

at the browser, choose view->source

Editor

An editor is a program to your source code. Example a notepad is an editor. There are several editors in the lab. Example, WinEdit and JEdit. You should choose an editor with syntax highlight. Here are some editors that I use to edit my files

Notepad++, This is the easiest to install and use.
Scintilla Text Editor
JEdit, and download Plugin XML. You need to have Java installed
Please E-mail me if you have other recommendation.

How to write your HTML files on your PC

Use any editor to edit a file(don't use microsoft word)
Save it as file with html or htm extension
open the file by browser
To post your website, use cuteftp or SSH FTP to transfer files to your PIC account

Structure of an HTML Document

An HTML document consists of text, which defines the content of the document, and tags, which define the structure and appearance of the document.
Each document technically must begin with an SGML DOCTYPE command, which specifies the document type definition (DTD) (i.e., syntax rules) with which the document complies. For XHTML strict standard, which we will use in the majority of the course, the command is:
<!DOCTYPE html PUBLIC "-//w3c// DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The World Wide Web Consortium (W3C) has an HTML Validator with which you can verify that your Web pages comply with the XHTML strict standard.
Each document has a head and a body
- head: Put title (appears in title bar and not in actual document) and other parameters the browser may use when displaying the document.
- body: Contents of the document.

Example

This is the basic format for your html file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Write your title here</title>
</head>
<body>

Put your stuff here

</body>
</html>

Basic Syntax

Tags specify how browser should display the part of the document associated with them.
Syntax: tag consists of a name, sometimes followed by a list of attributes, enclosed in angle brackets.
Example: Tag with a name, but no attributes.
<h1>Hello</h1>
Tag with 2 attributes
<font size="+2" color="red">Help me!</font>
Under new XHTML 1.0 standard, names and attributes must be all lower case(although upper case still works).
Tag attributes follow after the tag name, separated by whitespace.
Attribute's value follows an equal sign after the name.
Avoid breaking tags across lines wherever possible.
Most, but not all, tags have an opening and closing tag. The closing tag is denoted by slash before the name.
Example:
<p>Here is a paragraph.</p>
Some tags don't have an end tag.
Example:
<br />
(cause a line break) does not have an end tag. The /> indicates this.
Nesting: Must end nested tags starting with the most recent one. Example:
<b>Don't <i>overemphasize</i></b> your text.
Avoid breaking a URL onto two lines.

Comments in HTML are anything between . Comments may extend over multiple lines. Example

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- This is a title -->
<title>The title is Hello World!</title>
</head>
<body>
<!-- comment line 1
comment line 2-->
<h2>This is a test</h2>
<!-- hellow world -->
<b>Hello world</b>
</body>
</html>

Document Content

Requirements for Validating on the W3C's Validator

The first line must give the version of XML (i.e., the version of XML whose rules the document conforms to) and the encoding (i.e., the type of language used) used in the Web page:
<?xml version="1.0" encoding="UTF-8"?>
The next line(s) must contain the SGML DOCTYPE command (see SGML DOCTYPE command above).

The `<html>` Tag

Both the opening and closing tag are required.
This tag delimits an HTML document.
In order to use the W3C's Validator, the opening <html> tag must have the following format:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
The tag now specifies that the document uses XHTML rules and syntax and that the language used in English.

Document Header

This is required.
Describes properties of the document, including the title (required), position within the web, relationship with other documents, etc.
Most data in the head not seen by user.
- The <head> tag
  - May contain other tags that help define and manage the document's content, such as <title> and <style>
- The <title> tag
  - Defines document title appears in browser window title bar or on status line.
  - Title should give content, purpose of the document.

The Document Body

Anything between the <body> and </body> tags is called the body content.

Attributes Deprecated

WARNING: These attributes are deprecated in the XHTML 1.0 standard. This means that a web page using these is not valid under the standard.
bgcolor: background color.
background: for background image (value is the URL of the image).
text: set the color of the text. Make sure to set a color that contrasts well with the background color or image.
link: color of hyperlinks the user has not yet followed.
vlink: links the user has followed at one time or another.
alink: color for active link text one that is currently selected by the user and is under the mouse cursor with the button depressed. Usually the same color as vlink.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>A simple webpage</title>
</head>
<body bgcolor="yellow" text="blue">
<h2>This is a simple webpage</h2>
The background color is yellow. The text is in green. 
</body>
</html>