Intro to HTML

Intro to HTML - text

Create a text file, homepage.html containing (eg) Peter Hewitt's Home Page
Save it then double click on it ... you've just created your first web page!
"HTML" stands for Hyper Text Markup Language ie we "mark up" the text to show how we want it presented.
This is done by enclosing a piece of text in "tags". Here's an example:
```
Peter Hewitt's Home Page
```

and another:

<center><h1><i>Peter Hewitt's Home Page</i></h1></center>

in fact, the whole document should be "marked up" thus:

<html>
<head>
<title>Peter Hewitt's Home Page</title>
</head>
<body>
<center><h1><i>Peter Hewitt's Home Page</i></h1></center>
</body>
</html>

Note the title ... this will appear at the top of the browser window.

Colour is added by the use of the "font" tag ... for example:
```
Peter Hewitt's Home Page
```
"color" is called an "attribute" of the font tag
to get the full range of colours that are ok on most browsers we use "colour codes".
For example:
```
Peter Hewitt's Home Page
```
and you can change the background colour by using an attribute of the body tag like this:
```
<body bgcolor=#3399CC>
```

tags must not overlap ... they must nest ...

<i><h1>Peter Hewitt's Home Page</i></h1> Wrong!

<h1><i>Peter Hewitt's Home Page</i></h1> Right!!

Browsers ignore line breaks and multiple spaces. You can use the tag to break lines.
Note that has no closing tag.
If you want to preserve the formatting of existing text, use the <pre> tag.
For example:
<pre>
I hope you are enjoying
these HTML notes.
</pre>

produces:
```
I hope you are enjoying
these HTML notes.
```
Bulleted lists (like on this page) are used a lot in web pages.
A <ul> tag is used to specify that a list follows and each item has an <li> tag.
Here's an example: <ul> <li>apple <li>banana <li>pear </ul> produces:
- apple
- banana
- pear

Table of Contents