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>
Last
modified: Mon Aug 30 16:42:12 EDT 2004