June 12-14, 1997
NorTANA, the LCTL Project, St. Olaf College, and the Norwegian Foreign Ministry
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Introduction to Netscape
Beginning HTML
There are many introductions to HTML on the web. I recommend one of these:
Basic definitions
HTML stands for 'Hyper Text Markup Language.' That means that the files that are sent out from a computer (server) (somewhere in the world) are marked up with codes or tags. The receiving computer (client) runs a program (a browser) that interprets the codes and presents the information (texts, graphics, sounds, animations, forms to fill out) based on the tags.
The beauty and universality of the world wide web is that what the viewer sees on his or her screen does not depend on the type of computer in use. When things run properly (and they usually do with the web), files look almost identical on Macintoshes, PCs, and UNIX computers.
We do not need to worry about how files are served out by the server. This section will describe the simplest kinds of files that you can create. These files have all the necessary elements for a browser to let users see the files.
Tags
Tags are enclosed in brackets: <>. Most tags come in pairs: an opening tag and a closing tag. The closing tag resembles the opening tag, but has a forward slash.
The distance between the opening and closing tags can span the entire document, or just a single letter.
A minimal file for HTML would look like this (View here):
<HTML>
<HEAD>
<TITLE>Intro to HTML </TITLE>
</HEAD>
<BODY>
<H1> Have a look at these tags </H1>
<P>You can just start typing the text that you want to show up on the browsers screen. Note that you don't need to type 'return' and the lines 'wrap' automatically, depending on the width of the browser's screen. </P>
<P>If you want to break a line without a paragraph, use the tag <br>
The next line starts right after <br> but is not a new paragraph.
You can put in explicit paragraphs with these tags.</P>
</BODY>
</HTML>
The whole file is enclosed in <HTML>...</HTML> tags. Within <HEAD>...</HEAD> you place the title (also with a pair of tags <TITLE> </TITLE>). When someone browses your file, the title appears in the top part of the window. It is also used automatically when someone bookmarks your file's location.
The <body> ... </body> tags enclose the main text.
There are six levels or sizes of headings, which you specify with the tags <h1>...</h1> through <h6>....</h6>. <h1> is the biggest.
Enclose each paragraph between the tags <P> and </P>
A very useful tag (which doesn't come in a pair) is <br>, which breaks a line of text.
Text size, color and emphasis (View here):
The best way to change the size of part of a text is to use a tag to increase or decrease the character size. On word processors, we usually can set point size explicitly. The tag <font> needs to have more information added. These attributes come within the same set of brackets. For example to increase the size of a word, put the following in your text:
To make this <font size=+2>word </font> bigger.
After the closing tag </font> the default size returns.
You can change the color of the characters, using the tags <font>...</font>, this time modified by the attribute ëcolor'. To make a word appear red, type this in to your text:
What color is this <font color=red>word </font>?
As built in tags, you can use boldface and italicized characters. The tags are <b>...</b> and <i>...</i>.
Making a simple list (View here):
HTML makes it simple to create lists. There are two steps for each list.
- Say you will be beginning a list
- Say when each item in the list begins
The first tag (establishing a new list) is either <ul> or <ol>. <ul> makes a bulleted, or unordered, list. <ol> assigns a number to each item in the list.
The second tag which is necessary to make a list (for either type) is <li>, which means list item.
Here's a simple example:
<ul>My favorite Norwegian verbs
<li>gjøre
<li>kjøre
<li> smøre
</ul>
Note that each list is enclosed within <ul> and </ul> tags, but each list item does not need to be closed. Also note that you do not need to break the lines with <br> when you have a new list item.
Inserting an image (View here):
When you write HTML codes, you can specify a place in the text to insert an image. You essentially point to an image you want the browser to go and get, and place in the page, as it creates it. These are called in line images.
The tag you use is somewhat more complex than the formatting ones discussed above. It its simplest form, if you want to insert an image stored in a file called "flag.gif" you type in this tag: <img src=flag.gif>
The user's browser fetches that file and inserts it. Here is a simple example:
The Norwegian <b>flag</b> has a blue cross, with a white border, on a red background <img src=flag.gif><br>
The file you ask the browser to fetch (in this case flag.gif must be in the same folder as the main document you are serving. Otherwise, you will have to give a more exact location of the file.
Making a link to another file (View here):
The real power of the world wide web is the ease with which the user can move from one location to another. When someone creates a web page (as you will do in a few minutes), you can code in links for the browser to follow, if the topic is interesting. When the user clicks on the link (which is indicated with a different color or underline), the browser goes to the location that has been coded, and loads the new file.
A link consists of two main parts:
- The word or words that show the user where to click
- The address that tells the browser which file to fetch.
Let's build up a simple link, one step at a time.
First, the main tags are <a> and </a> which indicate that the text is anchored. The attribute of <a> is that we are creating a hypertext reference, which is coded: <a href..>
After this, we enter a valid address for a file that we
want the browser to fetch. If the file is in the same
directory of the rest of the document, just the name of the
file will suffice:
<a href="page2.html">.
Now the href is complete, but we need to show the words the
user can click on. <a
href="page2.html"> click here for page 2</a>.
When the file is located on another computer, then the
address is more complicated: click
<a
href="http://carla.acad.umn.edu/lctl/lctl.html">
here </a> for the LCTL
project's page.
Adding a "mailto" link (View here):
To give the user of your page an opportunity to e-mail you (or someone else) easily, you can include a clickable link, called a 'mailto'. The browser program, when the user clicks on a mailto, opens up an e-mail program, and inserts the person's address as the recipient. Here is a mailto link to the Less Commonly Taught Language's e-mail address:
To register a complaint, write to <a href= "mailto:janus005@maroon.tc.umn.edu"> the author </a>
</BODY>
</HTML>
|| Norwegian Department | St. Olaf College ||
URL: http://www.stolaf.edu/depts/norwegian/conf/html.html
Last updated: June 11, 1997