Adventures in Science and Technology

[Computer Science]

This project idea comes to you from Virtual Ventures in Ottawa, Ontario.

To learn to design your own web page in an organized fashion.

HTML (HyperText Markup Language) provides the World Wide Web with a more interactive means of obtaining information, by allowing the users to link to various topics with the click of a button. Not only can ideas be expressed through HTML documents, but the author's personal characteristics can also be expressed through the images, sounds, and animations chosen.

HTML works on a system of tags. There is an opening tag, <TAG> and an ending tag, </TAG>. Note that there is a slash in front of the ending tag. You must surround whatever it is you wish to edit (i.e. words, pictures, etc.). There are some exceptions to the rules, however.

Some words you might need to know:

Web Browser or Browser

This is the program you use to load and see pages on the World Wide Web. It converts HTML files into nice, formatted text which should be much easier to read. Many people use Netscape Navigator or Microsoft Internet Explorer as their primary web browser.

Text Editor

Any program which will do basic word processing and save files as text format (.txt).

WWW or World Wide Web

According to the World Wide Web Consortium, "The World Wide Web (known as 'WWW', 'Web' or 'W3') is the universe of network-accessible information, the embodiment of human knowledge." You can learn more about the World Wide Web at http://www.w3.org/WWW/.

Web Pages

Web pages, often referred to just as "pages", are files written in HTML.

URL

URL is short for Uniform Resource Locator. It is a standard way of indicating the location and the type of a resource (such as a telnet connection, a web page, ftp site, etc.). You can learn more about URLs at http://www.ncsa.uiuc.edu/demoweb/url-primer.html.

a text editor (such as Notepad or SimpleText)
a browser (such as Netscape or Internet Explorer)
[Optional] a list of HTML tags (You may want to print this out, since it's a good reference.)

What you need to do to start is open up your text editor and create a new file. The filename should end in .html or .htm so that anyone looking at the file name can tell that it is an HTML file. To start with, index.html is a good file name.

To build your basic page, you should have the following tags in this order.

<HTML>

<HEAD>
<TITLE>This information is displayed at the top of 
your browser's window, not on the actual page.</TITLE>
</HEAD>
<BODY>

<P>This is where everything you want on your web page
goes.</P>

</BODY>
</HTML>

[Making a web page] Try copying these tags into your new .html file. Make sure to save your file, then go into your browser (which might be Netscape, Internet Explorer, Lynx, Mosaic, etc.) and open the file. (Usually you can find an "open page" or "open file" option under the "file" menu.) You will see the title (the stuff between <TITLE> and </TITLE>) somewhere on the top of your browser, and the stuff in the body (between <BODY> and </BODY>) down on the main page. Try changing your title or the information in your body. Make sure to save your page, then reload it into your browser to see the changes. Try different things to see what happens.

As you learn new tags, try using them in your sample document. Make sure to save and reload each time you make a change!

Note: If you save and reload, but your page doesn't change, your browser may be reloading from cache. That means that your computer saves a copy of the page the first time you load it, then loads that saved copy instead of checking for a new one. To get it to reload your page so you see the changes, try holding down the shift key as you reload, or going into Options or Preferences in the menu of your browser and turning the cache off.

You should note that nothing should go between the </HEAD> and <BODY> tags, since this will cause problems with some older versions of Netscape and Mosaic. You will not require any editing tags (i.e. bold, italics, etc.) between the <HEAD> and the </HEAD> tags; this will also cause errors in older versions of Netscape and Mosaic.

Within the <BODY> of your page, each of your paragraphs should start with a <P> tag and end with a </P> tag. (Most browsers will work just fine if you forget the closing </P> tag, but many people use it anyhow to make the HTML code easier to read.) HTML doesn't recognize when you push enter at the end of a line or when you type extra spaces in to do formatting, so if you forget to put paragraph tags in to mark your paragraphs, your entire web page could end up in one big paragraph without any blank lines. That makes it very hard to read!

If you want a line break then you can use one of the following tags:

New paragraph: <P></P>

Line break: <BR>

Horizontal rule: <HR> (This actually draws a horizontal line in your document.)

If you want your text to look exactly the way you typed it, including any spaces or returns you've put in, you should surround that text with the tags <PRE> and </PRE>. PRE is short for Preformatted, meaning that you've already decided how you want the words laid out.

The original text, as you typed it:
------- - My Poem - ------- HTML text Is not that hard to write well, If you are careful.
The text as it would appear in your browser: ------- - My Poem - ------- HTML text Is not that hard to write well, If you are careful.
The original text, with the <PRE> tag used:
<PRE> ------- - My Poem - ------- HTML text Is not that hard to write well, If you are careful. </PRE>
The text as it appears if you use the <PRE> tag:
------- - My Poem - ------- HTML text Is not that hard to write well, If you are careful.

Within your paragraphs, the following tags will edit your text:

bold: <B>bold</B>

italics: <I>italics</I>

center: <CENTER>center</CENTER> (This can also be used to center images.)

You can change the size of your paragraphs using the <FONT SIZE="#"></FONT> tag. You replace "#" with a number depending on how big you want the font to be. For example, <FONT SIZE="-1"></FONT> would make the font size a little bit smaller or <FONT SIZE="+5"></FONT> would make it a lot bigger.

One size smaller
Two sizes bigger
Five sizes bigger

<FONT SIZE="-1">Hello World!</FONT>
<FONT SIZE="+2">Hello World!</FONT>
<FONT SIZE="+5">Hello World!</FONT>

Hello World!
Hello World!
Hello World!

You can change the style of your titles using the <H#></H#> You replace # with a number depending on how important the header is. (In HTML, header means a smaller title within your page and title means the title of the entire page. That's why the tag uses H instead of T). The <H#> tags are slightly different from most tags, in that they are always in bold and automatically end with a line break.

<H1>Header 1</H1>
<H2>Header 2</H2>
<H3>Header 3</H3>

Header 1

Header 2

Header 3

<H4>Header 4</H4>
<H5>Header 5</H5>
<H6>Header 6</H6>

Header 4

Header 5

Header 6

Continue to more HTML.

Produced by Galactics.
Comments: galactics@spacesim.org.
Last updated on 14 August 1998.

New paragraph:	<P></P>
Line break:	<BR>
Horizontal rule:	<HR> (This actually draws a horizontal line in your document.)

The original text, as you typed it:	------- - My Poem - ------- HTML text Is not that hard to write well, If you are careful.
The text as it would appear in your browser:	------- - My Poem - ------- HTML text Is not that hard to write well, If you are careful.
The original text, with the <PRE> tag used:	<PRE> ------- - My Poem - ------- HTML text Is not that hard to write well, If you are careful. </PRE>
The text as it appears if you use the <PRE> tag:	------- - My Poem - ------- HTML text Is not that hard to write well, If you are careful.

bold:	<B>bold</B>
italics:	<I>italics</I>
center:	<CENTER>center</CENTER> (This can also be used to center images.)

One size smaller	Two sizes bigger	Five sizes bigger
<FONT SIZE="-1">Hello World!</FONT>	<FONT SIZE="+2">Hello World!</FONT>	<FONT SIZE="+5">Hello World!</FONT>
Hello World!	Hello World!	Hello World!

<H1>Header 1</H1>	<H2>Header 2</H2>	<H3>Header 3</H3>
Header 1	Header 2	Header 3
<H4>Header 4</H4>	<H5>Header 5</H5>	<H6>Header 6</H6>
Header 4	Header 5	Header 6