Basic HTML for IC210

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> and </html>, anything that's supposed to show up in the browser window comes between a <body> and a </body>. (Note: Anything sandwiched between < >'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:


#include <iostream>
using namespace std;

int main()
{
  // 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;

  return 0;
}

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 the file 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 ".html".

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 tag <table> and ends with the tag <table>. Within that, each row begins with the tag <tr> and ends with the tag </tr>. Each cell within a row then begins with the tag <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 <table border=2>


Christopher W Brown
Modified by LT John Schultz