HTML

Basic HTML Features
Advanced HTML
Cascading Stylesheets

Network Effect (Review)

Metcalfe's Law:
The value of a network increases exponentially with the number of users
Other examples: phone, fax, e-mail

HTML

HyperText Markup Language
- Proposed by Tim Berners-Lee in 1989
- Released in 1991
Subset of SGML
- Standard Generalized Markup Language
Formatting language for the Web
- Defines tags (e.g. <h1>, <p>)
- Defines their attributes (e.g. name, color)

HTML Tags

Tags delimit document elements
```
<h1>Title</h1>
```
Tags can have attributes
```
<h1 align="center">Title</h1>
```
Most, but not all have ending tags (e.g. <br>)
Tags are case insensitive
However, new standard, XHTML, will not be as forgiving

HTML Document Structure

Enclosed by <html> tags

Contain a head and a body section

<html>
  <head>
    <title>Title</title>
    ... other headers, meta-tags, etc.
  </head>
  <body>
    ... body of the document
  </body>
</html>

Text Formatting

Headings (<h1> to <h6>)
Paragraph (<p>)

Emphasis (<em>)

<h1>An important heading</h1>
<h2>A slightly less important heading</h2>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is a really <em>important</em> topic!

Run the example

Links to Other Pages

Links to other pages are created with the anchor <a>

<a href="http://www.scs.carleton.ca/~weiss">Home</a><br>
<a href="mailto:[email protected]">Send e-mail</a><br>
<a href="mailto:[email protected]?subject=205">Send
    me e-mail about 205</a><br>
<a href="example-1.html">Relative link</a>

Run the example

Lists

Unordered lists

<ul>
    <li>the first list item</li>
    <li>the second list item</li>
    <li>the third list item</li>
</ul>

Ordered lists

<ol>
    <li>the first list item</li>
    <li>the second list item</li>
    <li>the third list item</li>
</ol>

Run the example

Special Characters

Copyright sign (©)
Trademark (™)
Less than (<)
Greater than (>)
```
&copy;
&#8482;
&lt;
&gt;
```
Run the example

Images

Add an image with the <img> tag
- "src" attribute names the image file
- "alt" attribute is used to give a short description
Images are typically of type "gif" or "jp[e]g"
```
<img src="metcalfe.jpg" alt="Metcalfe's Law">
```
Run the example

Image Maps

Define clickable regions in an image with an image map

<p align="center">
    <img src="map.gif" width="384" height="245"
         alt="site map" usemap="#sitemap" border="0">
    <map name="sitemap">
         <area shape="circle" coords="186,44,45" 
             href="http://www.w3.org/MarkUp/Guide/" alt="Getting Started">
         <area shape="circle" coords="42,171,45" 
             href="http://www.w3.org/MarkUp/Guide/Style.html" alt="A Touch of Style">
         <area shape="circle" coords="186,171,45"
             alt="Web Page Design">
         <area shape="circle" coords="318,173,45"
             href="http://www.w3.org/MarkUp/Guide/Advanced.html" alt="Advanced HTML">
    </map>
</p>

Run the example

Tables

Tables consist of one or more rows of table cells
They can be used to display information

Tables are also often used for very sophisticated layout

<table border="1">
  <tr><th>Year</th><th>Sales</th></tr>
  <tr><td>2000</td><td>$18M</td></tr>
  <tr><td>2001</td><td>$25M</td></tr>
  <tr><td>2002</td><td>$36M</td></tr>
</table>

Run the example

Frames

<html>
  <frameset rows="20%,*">
    <frame src="top.html" name="top">
    <frameset cols="20%,*">
      <frame src="left.html" name="left">
      <frame src="right.html" name="right">
    </frameset>
  </frameset>
</html>

Run the example

Frames

Most common use of frames is to define a table of contents and a main document frame
- Table of contents typically a list of links to an area of the web site
- Each link specifies that the main document frame, or target, should be loaded with the linked page
The cols and rows parameters of a frameset define the initial size and number of frames
- "20%,50%,*" specifies three frames to be defined
Frame names allow frame to be used as the target of a link
```
<a target="right" href="about.html">About us</a>
```

Cascading Stylesheets (CSS)

Stylesheets allow you to set the fonts, color, backgrounds, etc., which the browser should use to display your document
Enclosed between <style> tags

For example, the following stylesheet sets the color and background of h1 headings

<style type="text/css">
  h1 {
    color: white;
    background: black;
  }
</style>
<h1>This heading will be displayed in reverse</h1>

Run the example

Stylesheet Rules

A stylesheet is a collection of style rules
Each rule starts with a tag name, followed by a list of style properties
```
tag {
  property-1: value-1;
  property-2: value-2;
  ...
}
```
Each style property starts with the property name, then a colon, followed by the value for this property
Stylesheets should be placed in the head of a document

Controlling the Font

As an example, let's look at how we can change the font

<style type="text/css">
  h2 {
    text-transform: uppercase;
    font-size: 200%;
    font-family: Verdana, Arial, Helvetica;
  }
</style>
<h2>Changing the font</h2>

Run the example

Readings

W3C, Getting started with HTML
U o S, Designing a Website