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., abcd.html or abcd.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.
(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):
(to use within the <body> of the file):
<p>write your text here</p>
Creates paragraphs (one space between lines is created)
<i>write your text here</i>
Italicizes text between commands
<b>write your text here</b>
Bolds text between commands
<blockquote>text you type in </blockquote>
Puts text you're quoting into web document--text will be indented
<pre>write your text here</pre>
Retains format/indentation of text entered
<strong>write your text here</strong>
Also bolds text between tags
<center>write your text here</center>
Centers text between commands
<blink>write your text here</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>
write your text here
</h1>Text appears in biggest font available (double-spaced)
<h6>
write your text here
</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.
<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>
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 Lists
UNORDERED 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.
<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.sakhihosting.com">Sakhi Hosting homepage</a>
Type a URL or file to which you wish to link between the quotes! In this example "Google 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://sakhihosting.com/linux-dedicated-hosting/">Dedicated Server</a>
The text which will appear in blue on the web page is: "Dedicated Server"
If you click on it, you will automatically be sent to Dedicated server page
To create a link to an E-mail address:
<a href="mailto: heena@gmail.com">Heena</a>
(If you click on Heena, an E-mail form pops up)
IMAGES
<img src="MHCSeal.gif">
Typing the tag above will put an image called "MHCSeal.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="mhc.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="MHCSeal.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.
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 "about.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.
