How to create HTML files:
You only need to know a few HTML commands (tags) to create files to "put up" on the Web. It's nice to know that these files can be created with Microsoft Word® or any other word processing program for that matter. The only catch is that you must save them as text files and give them an HTML (or HTM for PC computers) extension (i.e., aatg.html or aatg.htm). The .html or .htm extension tells your web browser that these are documents created for the Web. Necessary HTML Tags
Basic HTML commands
<p>text you type in</p> Creates paragraphs (one space between lines is created) <i>text you type in</i> Italicizes text between commands <b>text you type in</b> Bolds text between commands <blockquote>text you type in </blockquote> Puts text you're quoting into web document--text will be indented <pre>text you type in</pre> Retains format/indentation of text entered <strong>text you type in</strong> Also bolds text between tags <center>text you type in</center> Centers text between commands <blink></blink> Text between commands flashes <font size=7>text</font> Changes size of text--7 is biggest font available and 1 is the smallest (single-spaced) <h1> text you type in</h1>Text appears in biggest font available (double-spaced) <h6> text you type in</h6>Text appears in smallest font available There are <h2> through <h5> tags available for font sizes between <h1> and <h6>--experiment with the sizes that work best for you. <body bgcolor="#FFFFFF"> To create background colors/patterns There are web sites where you can find the code (e.g., #FF0000=red) for background/text colors: Backgrounds <body background="small.gif"> There are many web sites with background images (e.g., "small.gif") free for the taking. Three of my favorites can be found at: Background Images I Background Images II Background Images III As URLs are frequently updated/changed,
check these addresses periodically to make sure they still exist!
Creating Lists UNORDERED LIST
Creating Tables You may find it useful to include tables on your web page. Below are a few very basic tags for creating tables. <table border>This is the tag for creating a table <tr>This is the tag for a table row <td>This is the tag for a cell (box) within a row</td> <td>You may want to have two or more cells in each table row.</td></tr> <tr>This is the tag for the second table row <td>This is the tag for the first cell (box) in the second row</td> <td>This is the second cell (box) in the second row</td> </tr> </table> Other HTML tags can be used within each cell to format your text. At some point you might want to have more control over the border or spacing of your tables. See one of the numerous tutorials on the Web. Do a search and enter the key words "HTML tutorial." <hr> Puts a "shadow" line on the web page <br>Type at end of a line to initiate line break (i.e., this is like a carriage return) Note that there are no "end" tags (i.e., no </hr> or </br>) with these tags. Creating Links <a href="http://www.aatg.org">AATG Homepage</a> Type a URL or file to which you wish to link between the quotes! In this example "AATG Homepage" will appear in blue or in another color on the web page, thus signifying that there is a hypermedia link here! Example: <a href="http://www.mtholyoke.edu">Mount Holyoke College</a> The text which will appear in blue on the web page is: "Mount Holyoke College" If you click on it, you will automatically be sent to Mount Holyoke's homepage! To create a link to an E-mail address: <a href="mailto: dvanhand@mhc.mtholyoke.edu">Donna Van Handle</a> (If you click on Donna Van Handle, an E-mail form pops up) IMAGES
Sound Files You can also link sound files to your web page. You can either record your own sound file (using a program like SoundEdit®--see example 1), or link to a sound file at another web site (see example 2). Example 1: This is a <a href="willkommen.au"> greeting</a> in German! Example 2: Another <a href="http://www.dfki.uni-sb.de/imedia/herzog/noise/willkommen.au"> German greeting!</a> To find sounds in German to which you can link, go to the following site (http://de.altavista.com/searchaud?stype=saudio) and conduct a search for the word or words you would like to include on your page. Be sure that you have the appropriate plug-in available to play the sound files! If you are using Netscape 3.0® or higher, most of the appropriate plug-ins are already installed. Foreign Characters You'll need to type in a special HTML code to generate German characters. For instance, if you want können to appear on the web page, you have to type the word (within an HTML file) like this--> können The character set codes for German are: Ä = Ä (ORÄ) ä = ä (OR ä) Ö = Ö (OR Ö) ö = ö (OR ö) Ü = Ü (OR Ü) ü = ü (OR ü) ß = ß (OR ß) As mentioned before, after you've generated your HTML file, save it as a text only file and give it a name like "aatg.html" (if you're using a Macintosh) or "aatg.htm" (if you're using a PC). DON'T FORGET THE HTML or HTM EXTENSION! Now you're ready to put your file(s) on the Web!!! There are different protocols for doing this. Check with your Internet service provider or with the technology specialist at your school. The HTML tags I've described here are REALLY the most basic and important ones you need to know right now. Anything more fancy you need to do can probably be done in HTML. For a more comprehensive overview of HTML (including the fancy stuff), do a search to find one of the many tutorials on the Web. A good tutorial can be found at: http://hotwired.lycos.com/webmonkey/authoring/html_basics/ Advanced Features: Frames and Forms FRAMES: If you want to "divide" a web page
into "sections" or windows, some of which will remain permanently in place
and others that are linked to other HTML files or sites on the Web, you
will have to learn how to create frames. Let's look at a sample HTML file
which will generate frames:
There are also two columns in row
2. In column 1 we find "frames1.html" and in column 2 we find "window1."
The 1st row represents 30% of the page and the 2nd row represents 70% of
the page--thus, we have the tag <frameset rows="30%, 70%"> in the HTML
code for the file "frames.html." The 1st column (in row 2) represents 30%
of the page and the 2nd column (in row 2) represents 70% of the page--thus,
we have the tag <frameset cols="30%, 70%"> in the HTML code for the
file (page) "frames.html." Although I have chosen to divide the page this
way, you can use other percentages (40%, 60% OR 50%, 50%, etc.) depending
on how you want the page to look and how big you want your rows and columns
to be.
Let me explain how I used frames
to create a web page to display my class web sites. In the HTML file I've
called "frames2.html," I will keep the same text year after year. The text
I have put in this file is: Deutschkurse im Netz. In the HTML file
I have called "frames1.html," I listed the titles of my class web sites.
What I have done is to link the names of the courses listed in "frames1.html"
to the course web site--i.e., when I click on Deutsch 103, which is listed
in "frames1.html," the course web site automatically appears in "window1."
Let's take a look at the source code for "frames1.html" so that you can
see what I did:
FORMS Another way to add some interactivity
to your web site without using frames or learning CGI scripting, you
can use HTML tags to design various types of forms. For a very good
tutorial on how to create a number of different forms, check out the
following site: |