Introduction to HTML: "The Language of the World Wide Web"

So what is this thing called the Internet? It is really less confusing than you might think. A network is a collection of computers that are connected together in a way that allows them to share information. The Internet is a network of these networks. It allows users on one network to share information with users on another network that may be in the same city or on another continent.

How does the Internet work (in English please)? These networks that form the Internet are connected together with routers that allow data to pass from network to network. Every computer on the Internet has a numerical address (IP address). So all that is needed to send or retrieve information across the Net is the "to" address and a "from" address. There are rules that govern how the information travels between addresses. These rules are called protocols. The Internet Protocol (IP) is a set of rules that takes care of interpreting the "to" and "from" addresses so that the routers that receive the called for information know what to do with it when it arrives. The router determines if the information has reached its destination or if it must be sent on to another router.

Does it make julienne fries? What you can do on the Internet is limited only by your knowledge and what the computer that is your point of contact with the Internet is able to do. The most common Internet applications are telnet, ftp, e-mail, and the World Wide Web (WWW).

Aren't the WWW and Internet the same thing? It is the WWW that has been getting all the attention lately. It can be thought of as a subset of the Internet. It is a protocol that allows the transfer of text, images, sound, and video files from one computer to another. The protocol is called HyperText Transfer Protocol. These files are embedded in Web pages which are themselves text files. The WWW is a collection of these thousands or perhaps millions of Web pages. A Web page is written in a special format that conforms to the HyperText Markup Language or HTML.

HTML consists of a set of tags that are translated by your Web browser (Netscape, Mosaic, MS Explorer, Lynx, etc.) and define the "look" of the Web page. As you will see below, HTML is easy to learn and even fun.

A summary of HTML tags is included at the end of this tutorial.

Every Web page has the same basic form:

<html;> <head;> <title;> . . . . . </title> </head> <body;> . . . . </body> </html>

Note that there are two sections, the heading and the body. The title is not displayed in the web page but is used when the page is bookmarked and appears at the top of the browser (Netscape). The body contains the code that dictates the appearance of the web page. Also note that most tags come in pairs with the ending tag denoted with a /.

For example:

<html;>
<head;>
<title;> This is an HTML Example </title>
</head>
<body;> >From Einstein's book Relativity: In your schooldays most of you who read this book made acquaintance with the noble building of Euclid's geometry, and you remember-perhaps with more respect than love-the magnificent structure, on the lofty staircase of which you were chased about for uncounted hours by conscientious teachers.
</body>
</html>

produces the following Web page (example 1):

Add a few more tags for italics, to display some words in bold, paragraph breaks, line breaks, and horizontal rules:

<html;>
<head;>
<title;> This is an HTML Example </title>
</head>
<body;>
<hr;>
<p;>
<b;>From Einstein's book <i;>Relativity</i></b>:
<p;> In your schooldays most of you who read this book made acquaintance<br;> with the noble building of Euclid's geometry, and you remember-perhaps with<br;> more respect than love-the magnificent structure, on the lofty staircase of which<br;> you were chased about for uncounted hours by conscientious teachers.
<p;>
<hr;>
</body>
</html>

produces the following Web page (example 2):

Choose a background color, add an image that is centered on the page:
(see color choices)

<html;>
<head;>
<title;> This is an HTML Example </title>
</head>
<body; bgcolor="#00FFFF">
<hr;>
<p;>
<b;>From; Einstein's book <i;>Relativity; </i></b>:
<p;> In your schooldays most of you who read this book made acquaintance <br;> with the noble building of Euclid's geometry, and you remember-perhaps with <br;> more respect than love-the magnificent structure, on the lofty staircase of which <br;> you were chased about for uncounted hours by conscientious teachers.
<p;>
<center;>
<img; src="person.gif">
</center>
<hr;>
</body>
</html>

produces the following Web page (example 3):

Now add a HyperText link to another Web page:

<html;>
<head;>
<title;> This is an HTML Example </title>
</head>
<body; bgcolor="#00FFFF">
<hr;>
<p;>
<b;>From; Einstein's book <i;>Relativity; </i></b>:
<p;> In your schooldays most of you who read this book made acquaintance <br;> with the noble building of Euclid's geometry, and you remember-perhaps with <br;> more respect than love-the magnificent structure, on the lofty staircase of which <br;> you were chased about for uncounted hours by conscientious teachers.
<p;>
<center;>
<img; src="person.gif">
</center>
<hr;>
<a; href="http://bioc.rice.edu/~k12hhmi">Go to the Galveston Bay Project Web page </a>
</body>
</html>

produces the following Web page (example 4):

Now add some text displayed as a heading (see range of font sizes) and a blockquote- text that is setoff from ordinary text with left and right indents:

<html;>
<head;>
<title;> This is an HTML Example </title>
</head>
<body; bgcolor="#00FFFF">
<hr;>
<p;>
<b;>From; Einstein's book <i;>Relativity; </i></b>:
<p;> In your schooldays most of you who read this book made acquaintance <br;> with the noble building of Euclid's geometry, and you remember-perhaps with <br;> more respect than love-the magnificent structure, on the lofty staircase of which <br;> you were chased about for uncounted hours by conscientious teachers.
<p;>
<center;>
<img; src="person.gif">
</center>
<h1;> A quote from Descartes: </h1>
<h2;> A quote from Descartes: </h2>
<h3;> A quote from Descartes: </h3>
<h4;> A quote from Descartes: </h4>
<h5;> A quote from Descartes: </h5>
<h6;> A quote from Descartes: </h6>
<blockquote;>It is truth very certain that when it is not in our power to determine what is true we ought to follow what is most probable.</blockquote>
<hr;>
<a; href="http://bioc.rice.edu/~k12hhmi"> Go to the Galveston Bay Project Web page </a>
</body>
</html>

produces the following Web page (example 5):

Bulleted Lists, Numbered Lists and Nested Lists (with a few more hyper-links):

<html;>
<head;>
<title;> This is an HTML Example </title>
</head>
<body; bgcolor="#00FFFF">
<hr;>
<p;>
<b;>From; Einstein's book <i;>Relativity; </i></b>:
<p;> In your schooldays most of you who read this book made acquaintance <br;> with the noble building of Euclid's geometry, and you remember-perhaps with <br;> more respect than love-the magnificent structure, on the lofty staircase of which <br;> you were chased about for uncounted hours by conscientious teachers.
<p;>
<center;>
<img; src="person.gif">
</center>
<h1;> A quote from Descartes: </h1>
<h2;> A quote from Descartes: </h2>
<h3;> A quote from Descartes: </h3>
<h4;> A quote from Descartes: </h4>
<h5;> A quote from Descartes: </h5>
<h6;> A quote from Descartes: </h6>
<blockquote;>It; is truth very certain that when it is not in our power to determine what is true we ought to follow what is most probable.</blockquote>
<p;><h3;> These are my favorite Greek Mathematicians (unordered list): </h3>
<ul;>
<li;>Archimedes
<li;>Eratosthenes
<li;>Euclid
<li;>Hypatia of Alexandria
<li;>Pythagoras
</ul>

<p;><h3;> These are my favorite Greek Mathematicians (ordered list): </h3>
<ol;>
<li;>Archimedes
<li;>Eratosthenes
<li;>Euclid
<li;>Hypatia of Alexandria
<li;>Pythagoras
</ol>

<p;><h3;> These are my favorite Greek <a; href="http://aleph0.clarku.edu/~djoyce/mathhist/greece.html">Mathematicians </a> (nested-unordered lists): </h3>
<ul;>
<li;>Archimedes
<li;>Eratosthenes