A Guide to HTML Code
October 13, 2008
Tips for turning text into html:
- Page Mills: There are many applications (such as Adobe Dreamweaver or later
versions of Microsoft Word) that allow you easily to design your web page. The
applications actually write the html code for you in the background. This makes creating a
web page idiot simple. The drawback is that you don't directly control what the
application writes. Thus, your finished page may contain instructions or background
information that you don't want. Indeed, some applications seem maliciously designed to
work only with preferred browsers. Because of this we REQUIRE that you use the second option
when creating your ELT pages!
- Do it yourself: It's surprisingly easy to make a competent looking web page by
writing your own html code, even if you only kow a few html commands. All you need is an
application for writing text files (examples include WordPad, SimpleText, NotePad, or TextEdit)
and a web browser. Using this method, you can be sure that the web page does only
what you want it to do and nothing else. Plus, you should be able to understand WHY its doing
what it is doing. The downside is that it is a little more time consuming at first.
Your web page assingment requires you to create the beginnings of a personal academic web
page and get it onto the internet. A template for your academic webpage can be found here,
and a list of requirements here.
The following is a helpful (we hope!) guide to writing HTML.
Writing the Code
The code we will be writing will be very simple, and most of it can be written almost
mechanically. Just follow these instructions in this sequence. Please note, server
software is case sensitive with regards to file names (i.e., the files "Tholtz.html" and
"tholtz.html" would be considered different files), so follow the case carefully. For commands,
case is not important.
To start out you need the following:
- A text (.txt) file with whatever text you want to appear on yor web page.
- A text processing application (examples include WordPad, NotePad, SimpleText, and TextEdit).
We STRONGLY encourage you not to use MS Word for
this task: it is quite easy to "accidentally" let the software know that it is an html file, and then
Word will start adding its own cryptic code...
- A web browser (Netscape Navigator, Internet Explorer, Firefox, Safari, etc.)
The steps:
- Go to
http://www.geol.umd.edu/~jmerck/eltsite/templates/website.html. View the source of this
file, and save that file to your hard drive (or the desktop of the computer, if you are working
in a WAM lab).
- This template will give you the essential structure, and a LOT of the important features, that
you need for this site. However, it is good to understand how it works! So, here are the basics:
- NOTE: All html commands are inside caret marks (< and >).
- All HTML files have to begin with a "Header": a set of commands that tell the web browser that
"the following is html coding." Headers have the following sets of commands:
<HTML>
<HEAD>
<TITLE>Home</TITLE>
</HEAD>
<BODY BGCOLOR="white">
(Note: you can actually substitute other colors for "white"; that's just an example)
- Below that Header we've inserted a number of "links": some the University requires, some that ELT
requires. Links are really the essence of HTML. They are codes that call up information, and
that allow the person reading the file to move around the web. This particular set of links includes both
linked images and good old-fashioned hotlinks.
("IMG SRC" is, of course, short hand for "image source".) If your image is in exactly the same folder on the same server as your html file, than this IMG SRC command
would just be the name of the file. However, in the case here we are asking for the computer to
look elsewhere for where the graphic is stored. Using the first of these, the command:
<IMG SRC="http://www.geol.umd.edu/~jmerck/eltsite/images/sunspot.gif" HEIGHT=75">
tells the computer to look for the graphic called "sunspot.gif" in the folder "images", which is in the folder
"eltsite", which is in Dr. Merck's folder on the Department of Geology's server. Also, the command "HEIGHT=75" tells
the computer to display this image at 75 pixels high.
- Hotlinks tell the web browser that if the viewer clicks on the text or image, they
will be sent to a new page. The command for a hotlink is:
<A HREF="location or file you are sending them to">text or image that serves as link</A>
(Note that the "</A>" part of the command tells the computer that this is the end of link.). If the new
file you are redirecting people to is in exactly the same folder on the same server as the page they start out with,
the "location or file you are sending them to" is just the file name. If it is elsewhere on the web, you'll have
to give its complete URL. Again, using the first example from the top of the template, the command:
<A HREF="http://www.scholars.umd.edu"><IMG SRC="http://www.geol.umd.edu/~jmerck/eltsite/images/sunspot.gif" HEIGHT=75></A>
says "when the Sunspot image is clicked, send the viewer to www.scholars.umd.edu". You could also use a line of text as link rather
than a graphic.
- At the bottom of the file is the "Footer", which tells the software that this is the end.
Footers use the following codes:
</BODY>
</HTML>
- Other commands that everyone should know are:
- Line breaks, also called "returns" (for example, right after a title to a paragraph) have the form:
<BR>
- Paragraph breaks have the form:
<P>
- To underline a line of text, use <U>some text, then end with </U>, and
it will come out as follows: some text, then end with
- For italics or bold, it is just like underlining, but with "I" or "B" in place
of "U". (See, HTML is actually is pretty simple...)
- Large text: Put <H2> and </H2> immediately in front of and
behind any text that you would like to have appear in large font size (your name, for
instance.) For example:
BIG WORDS!
- Teeny tiny text: Put <H6> and </H6> around the text. For example:
tiny words...
Indented lists: An indented list of items (such as the clubs to which you belong)
can be made by combining the bullet marks, <LI>, with the indented list commands,
<UL> and </UL>. For example, my list of clubs might be written this way:
Clubs and organizations:
<UL>
<LI>Society of Vertebrate Paleontology
<LI>Chesapeake Dance Weekend Committee
<LI>Society of Northern Virginian Orchid Sniffers
</UL>
and look like this in the browser:
Clubs and organizations:
- Society of Vertebrate Paleontology
- Chesapeake Dance Weekend Committee
- Society of Northern Virginian Orchid Sniffers
You can nest one indented list inside another, as you can see in the discussion of commands above!
[Note that is you were to do a list of organizations like the example above, it would be a good idea to make hotlinks
for each of the items on the list!]
If you want a more complete listing of HTML codes, you can go
here or
here.
Placing your Web Page on the Internet: To make your web site available, you will
need to place its html and image files on a server, a specialized internet computer. There
are numerous methods for doing this, some simple, others cumbersome. In all cases, you
must have a server account (such as a WAM account) and know your log in password. Check with
The Office of Information Technology and their page on
uploading using FTP software
for more information about how to do that from the type of computer and connection you are
using.
- For Mac Users, we recommend Fetch. See here
on downloading your FREE copy of Fetch as a University of Maryland student. (NOTE: pay close attention to each step!)
- For Windows Users, we recommend WinSCP. See here for how
to download your free copy.
Last modified: 13 October 2008
