What is HTML?
When you view a webpage in your browser, what you see on the screen is your browser's interpretation of a text file that is the webpage. This file contains HTML code, which consists of directions to the browser on how to display the information in the page. You can open any HTML file in your browser, including files on your own computer, and it will follow the directions in the HTML code and produce the appropriate page in the browser window.
We're interested in writing C++ programs that produce html code as output - i.e. programs that output webpages.
Hello World in HTML
In some sense HTML is a programming
language, so we'll start with the typical first program - "Hello
World". Any HTML document begins with
<html> and ends with
</html>. In between
</html>, anything that's
supposed to show up in the browser window comes between a
<body> and a
</body>. (Note: Anything
>'s is called a tag.)
Then in the body, any text
you write is displayed in the browser. So, here's "Hello World",
first in Notepad you see the HTML file, and then in Internet Explorer you see
the file viewed in the browser:
Now, there's no reason that a C++ program couldn't produce its output in HTML code. For example, if I wanted to write a "Hello World" C++ program that produced its output in HTML, here's how I'd do it:
using namespace std;
// Print html and body starting tags
cout << "<html>" << endl << "<body>" << endl;
// Print the Hello World message
cout << "Hello World!" << endl;
// Print html and body closing tags
cout << "</body>" << endl << "</html>" << endl;
If you were to run this program, paste the output into a notepad
document and save as a file named, for example,
HelloWorld.html, you could open
HelloWorld.html in your browser
and the results would be just what you see above. To view a local file in your
browser, go to your browser's File menu and choose Open, and in
the resulting menu choose either Browse or Choose (depending on
whether you run Explorer or Netscape). This should allow you to navigate your
file system and click on the file to be opened. NOTE: To save yourself
some headaches, make sure that your file's name ends in "
Of course it's even nicer to write programs that create a new file with the appropriate name and write the html code directly to it!
Tables in HTML
When we have lots of data, we often
present it in tables. In HTML, tables are quite simple: a table starts with the
<table> and ends with the
<table>. Within that,
each row begins with the tag
<tr> and ends with the
</tr>. Each cell within a row then begins with
<td> and ends with
</td>. The contents of
a cell in a table can be text, which is all we'll want here, or more HTML tags.
For example, here's a simple table:
Now, to bring out the fact that it's a table and make things
easier to read, we probably would like to have a border around our cells. To instruct
your browser to do this, the beginning tag for the table, i.e.
<table>, needs to be
changed to something like
Last modified: Mon Aug 30 16:42:12 EDT 2004