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

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>

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>

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>

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>

More HTML:

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>

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

<ul>
<li>The Sieve
<li>Ancient Geography
<li>Earth Circumference
<a href="http://www.cs.rice.edu/~ddonovan/Lessons/eratos.html">Experiment </a>
</ul>
<li>Euclid
<li>Hypatia of Alexandria
<li>Pythagoras
</ul>


<hr>
<a href="http://bioc.rice.edu/~k12hhmi"> Go to the Galveston Bay Project Web page </a>
</body>
</html>

Review of HTML tags used in this tutorial:

<html>
<head>
<title> . . . . . </title>
</head>
<body>
.
.
.
.
</body>
</html> 		The "standard" HTML template.
<body bgcolor="#XXXXXX"> Body tag modification to include a background color. XXXXXX is the color code in hexadecimal.
<i> . . . </i> To display text in italics.
<b> . . . </b> To display text in bold.
<center> . . . </center> To center text and images on the page.
<p> Paragraph break- skips one line.
<br> Line break- forces a break to the next line.
<hr> Horizontal rule.
<img src=" url of image file "> To display an image.
<a href=" url of web page to link to ">
Text that is "clickable" </a> 		To add a hypertext link to another web page.
<hN> . . . </hN>
N = 1,2,3,4,5, or 6		 To display text as a heading.
<blockquote> . . . </blockquote> To indent a text block.
<ul>
<li>
<li>
.
.
.
<li>
<li>
</ul>
 To create an unordered (un-numbered) list.
<ol>
<li>
<li>
.
.
.
<li>
<li>
</ol>
 To create an ordered (numbered) list.

WWW HTML Resources

Back to Main Page