0
comments
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
(note that upper-case/lower-case is not important)
The "guts" of every HTML file must look like this:
<html>
<head>
<title>Document's name which appears in the heading, not on the page</title>
</head>
<body>Type in the information you want to appear on the page here
</body>
</html>
Within the <body> tag (command), you may use other HTML tags to add images and/or sounds, link your page to other pages (URLs) on the Web, highlight your text by bolding or italicizing it, or change font size. Note that all tags must be invoked by typing the tag between two brackets (i.e., <body>). Type the tag in brackets again with a slash in front of if (i.e., </body>) to negate the effect.
Basic HTML commands
(to use within the <body> of the file):
<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 appears in biggest font available (double-spaced)
<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 IIIAs URLs are frequently updated/changed, check these addresses periodically to make sure they still exist!
You can also copy a background image that you see used on a web page--but only if you are using a PC (you press down on the right side of the mouse and save the background image in the appropriate place!).
<body text="#FF0000">
This will change the color of all text in the document to red
<font color="#FF00FF">
This will change the color of what you type here to magenta</font>
Creating ListsUNORDERED LIST
<ul>
<li>This is the tag for creating an unordered list
<li>Each thing you type after the <li> tag will appear next to a bullet on the web page
<li>This text will appear next to the third bullet--bullets are indented
</ul>
ORDERED LIST
<ol>
<li>This is the tag for creating an ordered list
<li>Each thing you type after the <li> tag will appear next to a number on the web page
<li>This text will appear next to the number "3" on the web page
</ol>
DESCRIPTIVE LIST (useful for creating bibliographies, for instance)
<dl>
<dt>Tag for creating the first title of your descriptive list
<dd>This is the first item under the first title of the list--it will be indented
<dd>Another item in the list under the same title--it will also be indented
<dt>This is the second title in your descriptive list
<dd>This is the first indented item under the second title in your descriptive list
</dl>
Note that you may "nest" lists -- i.e., create an unordered list within an ordered list, etc.
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
<img src="logo.gif">
Typing the tag above will put an image called "logo.gif" on your web page. You have either created the image yourself or copied it from a page on the Web (more on this below). By the way: GIF stands for "Graphics Interchange Format" and JPEG stands for "Joint Photography Exchange Group."
You can copy images you see on other web pages by placing the mouse on the image and pressing down. A box with various options, one of which is saving the image, will pop up on the screen. Save it as a file and you can then incorporate it (the image) into your own HTML file! There are also many icon/image sites on the Web.
If you are unable to find an image here (including animated gifs!), then you should do a search on the Web to access countless additional sites where nice people have collected images for you to use on your web pages! Be sure to give the necessary credit to the person who created the image (this is certainly the polite thing to do--> netiquette!).
By the way: you may also view other people's HTML code by accessing "document source" under "view" on the browser menu You can then highlight, copy, and paste code into your own HTML file so that your page will do the same neat things that someone else's does.
To center an image on your web page (without accompanying text):
<center><img src="logo.gif"></center>
If you wish to align text with images or graphics on your web page (see above example with MHC image!), there are several tags you may use:
<font size=2>Your text goes here</font><img src="logo.gif" align=right>
You can substitute top, bottom, left or middle for right, and your text and image will be displayed accordingly. Note that some of your text may be displaced depending on the size of the font or image you have chosen.
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>
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.
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:
<html>
<head>
<title>Practice with Frames</title>
</head>
<frameset rows= "30%, 70%">
<frame src= "frames2.html">
<frameset cols="30%, 70%">
<frame src= "frames1.html">
<frame src= "homepage.html" name="window1">
</frameset></frameset>
</html>
Above is the code for an HTML file I have named "frames.html." Embedded in the file "frames.html" (which is the name of the entire web page), you can see that there are two HTML files (called "frames1.html" and "frames2.html"). One of the frames (windows) is linked to a file called "homepage.html." This means that "homepage.html" will appear in the frame I have named "window1." It may be easier if you see a graphic display of this page:
Here you see that the web page is divided into three different sections--there are two frames, each of which is a separate HTML file ("frames1.html" and "frames2.html"); "window1" is the name I have given to the frame where the targeted URL will appear. This web page is also divided into 2 rows (row 1 is where "frames2.html" resides; row 2 is where "frames1.html" and "window1" reside).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.
The HTML files ("frames1.html," "frames2.html" and "homepage.html") can contain any HTML tags you wish. The nice thing about using frames is that you can keep the same text in one or two of the frames and have the contents of the third frame (in this example: "window1") change.
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:
<html>
<head>
<title>frames1.html</title>
</head>
<body bgcolor="FF00FF">
<h3><ul>
<li><a href="http://www.mtholyoke.edu/acad/germ/courses/german103/germ103.html" target= "window1">Deutsch103</a>
<p></p>
<li><a href="http://www.mtholyoke.edu/acad/germ/courses/german209/dvhj12.html" target= "window1">Deutsch 209</a>
</body>
</html>
In "frames1.html" two of my class web sites are listed: Deutsch 103 and Deutsch 209. If you click Deutsch 103, "homepage.html" will disappear and the web site for that course (i.e., the URL listed previously) will pop up in "window1." If you then click on Deutsch 209, the web site for that course will pop up in "window1." That's all there is to FRAMES! If you have a good use for them, frames can be a life saver! You can also use frames to add some interactivity to your web site--i.e., you can have a question appear in one frame, then the answer in another frame. Remember that you can only display frames if you are using Netscape 2.0®or higher!
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
(note that upper-case/lower-case is not important)
The "guts" of every HTML file must look like this:
<html>
<head>
<title>Document's name which appears in the heading, not on the page</title>
</head>
<body>Type in the information you want to appear on the page here
</body>
</html>
Within the <body> tag (command), you may use other HTML tags to add images and/or sounds, link your page to other pages (URLs) on the Web, highlight your text by bolding or italicizing it, or change font size. Note that all tags must be invoked by typing the tag between two brackets (i.e., <body>). Type the tag in brackets again with a slash in front of if (i.e., </body>) to negate the effect.
Basic HTML commands
(to use within the <body> of the file):
<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 IIIAs URLs are frequently updated/changed, check these addresses periodically to make sure they still exist!
You can also copy a background image that you see used on a web page--but only if you are using a PC (you press down on the right side of the mouse and save the background image in the appropriate place!).
<body text="#FF0000">
This will change the color of all text in the document to red
<font color="#FF00FF">
This will change the color of what you type here to magenta</font>
Creating ListsUNORDERED LIST
<ul>
<li>This is the tag for creating an unordered list
<li>Each thing you type after the <li> tag will appear next to a bullet on the web page
<li>This text will appear next to the third bullet--bullets are indented
</ul>
ORDERED LIST
<ol>
<li>This is the tag for creating an ordered list
<li>Each thing you type after the <li> tag will appear next to a number on the web page
<li>This text will appear next to the number "3" on the web page
</ol>
DESCRIPTIVE LIST (useful for creating bibliographies, for instance)
<dl>
<dt>Tag for creating the first title of your descriptive list
<dd>This is the first item under the first title of the list--it will be indented
<dd>Another item in the list under the same title--it will also be indented
<dt>This is the second title in your descriptive list
<dd>This is the first indented item under the second title in your descriptive list
</dl>
Note that you may "nest" lists -- i.e., create an unordered list within an ordered list, etc.
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
<img src="logo.gif">
Typing the tag above will put an image called "logo.gif" on your web page. You have either created the image yourself or copied it from a page on the Web (more on this below). By the way: GIF stands for "Graphics Interchange Format" and JPEG stands for "Joint Photography Exchange Group."
You can copy images you see on other web pages by placing the mouse on the image and pressing down. A box with various options, one of which is saving the image, will pop up on the screen. Save it as a file and you can then incorporate it (the image) into your own HTML file! There are also many icon/image sites on the Web.
If you are unable to find an image here (including animated gifs!), then you should do a search on the Web to access countless additional sites where nice people have collected images for you to use on your web pages! Be sure to give the necessary credit to the person who created the image (this is certainly the polite thing to do--> netiquette!).
By the way: you may also view other people's HTML code by accessing "document source" under "view" on the browser menu You can then highlight, copy, and paste code into your own HTML file so that your page will do the same neat things that someone else's does.
To center an image on your web page (without accompanying text):
<center><img src="logo.gif"></center>
If you wish to align text with images or graphics on your web page (see above example with MHC image!), there are several tags you may use:
<font size=2>Your text goes here</font><img src="logo.gif" align=right>
You can substitute top, bottom, left or middle for right, and your text and image will be displayed accordingly. Note that some of your text may be displaced depending on the size of the font or image you have chosen.
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>
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.
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:
<html>
<head>
<title>Practice with Frames</title>
</head>
<frameset rows= "30%, 70%">
<frame src= "frames2.html">
<frameset cols="30%, 70%">
<frame src= "frames1.html">
<frame src= "homepage.html" name="window1">
</frameset></frameset>
</html>
Above is the code for an HTML file I have named "frames.html." Embedded in the file "frames.html" (which is the name of the entire web page), you can see that there are two HTML files (called "frames1.html" and "frames2.html"). One of the frames (windows) is linked to a file called "homepage.html." This means that "homepage.html" will appear in the frame I have named "window1." It may be easier if you see a graphic display of this page:
| frames2.html | |
| f r a m e s1. h t m l | This is called "window1" |
The HTML files ("frames1.html," "frames2.html" and "homepage.html") can contain any HTML tags you wish. The nice thing about using frames is that you can keep the same text in one or two of the frames and have the contents of the third frame (in this example: "window1") change.
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:
<html>
<head>
<title>frames1.html</title>
</head>
<body bgcolor="FF00FF">
<h3><ul>
<li><a href="http://www.mtholyoke.edu/acad/germ/courses/german103/germ103.html" target= "window1">Deutsch103</a>
<p></p>
<li><a href="http://www.mtholyoke.edu/acad/germ/courses/german209/dvhj12.html" target= "window1">Deutsch 209</a>
</body>
</html>
In "frames1.html" two of my class web sites are listed: Deutsch 103 and Deutsch 209. If you click Deutsch 103, "homepage.html" will disappear and the web site for that course (i.e., the URL listed previously) will pop up in "window1." If you then click on Deutsch 209, the web site for that course will pop up in "window1." That's all there is to FRAMES! If you have a good use for them, frames can be a life saver! You can also use frames to add some interactivity to your web site--i.e., you can have a question appear in one frame, then the answer in another frame. Remember that you can only display frames if you are using Netscape 2.0®or higher!
Displaying your XML Files with CSS?
The image above represents one book in the XML below:
