Basic HTML Code

Send Questions about HTML to: StudentWeb Help

Section 1.1: A Basic Background on HTML

HTML:: HTML stands for HyperText Markup Language. This language is what allows you to create hypertext links, fill in forms, and form clickable images. Along with this markup launguage there are two other acronyms that are important to know: URL & HTTP.
URL:: URL stands for Uniform Resource Locators. A URL is the address at which a specific "chunk" of information is located on the Web.
HTTP:: HTTP stands for Hyper Text Transfer Protocal. HTTP is a group of client-server interactions. These actions are specifically to distribute HyperText documents.

The Basis of the HyperText Markup Language is in the HTML tags . These tags are the portions of text surronded by greater-than & less-than signs < __ > . These are the instructions that tell the client browser what the page looks like. For example:
 <H1> This is a Heading level one </H1> 
What the above line does by using the tag <H1> is indicate that the the following text will be displayed as a Level 1 Header. The closing tag of </H1> ends the Level 1 Header.
The previous example using <H1> and </H1> shows how almost all HTML commands need an end tag with a forwad slash. This tag ends the command. There are a few examples of tags that do not need an end tag, like a line break <BR> o r an image tag <IMG>.

Section 1.2: Creating an HTML File

When you register for your account on StudentWeb a homepage is automaticly made for you. It will end up to be located in your public_html directory. The name of this file is index.html this will be the page that will see first. It is highly recomended that you DO NOT change the name of this file...although feel free to edit the heck out of it. When someone accesses the URL:
http://studentweb.tulane.edu/~ Your_login_name /
They will automaticly be brought to the index.html file. The above line is equivalant to:
http://studentweb.tulane.edu/~ Your_login_name / index.html
Here is an example of the page that is premade for you. It will have Your name, a link to StudentWeb, and an email to you.
The easiest way for you to edit or create a HTML document is through one of the UNIX editors: Z, VI, Pico, and the others too. You may choose to use Word, Wordperfect, or any other program that types text (the notepad or simple text).
What you need to do, though, is end the file name with .html . For example, if you title your document "homepage" you need to add the .html to make it "homepage.html". This tells HTML browsers that this is an HTML document. If you are us ing a DOS machine, you may have to put .htm instead, but it will work in the same way.
In order to make this document work, you will need to put it into the directory named public_html in your account on StudentWeb. For this reason, it may be easier to create the document in the UNIX shell (while logged on) in order to cut down on the necessary steps. If you still want to create a file on your personal computer, there is on e more step that you must do, which is FTP (File Transfer Protocol) the file over to your account on StudentWeb. This is done using Fetch for Macintosh, or _____ for DOS/Windows Machines.
When your file is in the public_html directory, its URL (or Internet address) will be:
http://studentweb.tulane.edu/~ your_login_name / file_name.html
That line contains no spaces, and capital letters do matter. It is necessary to put the "~" sign before your login name.

Section1.3: How to Start an HTML file

There are a few basic tags that you should put into your html file, these are:
<html> <title> </title> <body> </body> </html>
If this was all that you put in your page, it would be blank. They are not necessary, but highly recomended.
This below is a very basic page, but it should give you a basic look at HTML.
<html> <title> This is your title </title> <body> <h1> This is your main heading </h1> This is just text. If you insert a paragraph tag... <p> Then it creates a new paragraph. Spaces don't matter. </body> </html>

The above code would make a page that would look like this example

Notice that what is in the <title> title </title> part shows up at the very top of the browser. Again, notice that extra spaces don't do anything.

A Few Things to Remember:
If you insert extra spaces into your text, HTML browsers will reduce the spaces into a single space. If you want your text to look a certain way, then you will have to use the HTML tags.
When using HTML tags, capital letters are the same as lowercase letters, so:
<TITLE>   is the same as   <title>    and also    <TitLe>
On all text modifying tags you must insert the ending tags to stop the modification of text.

Section 1.4: Making Links & Adding Pictures

To add a link to your page, you must know the URL (address) of the page or image you want to link it to. You make a link by using the <a href=""> </a> tag. You need to put the address of the page or image that you want to link inside of the quotes. What you want them to click on needs to go between the > and the </a>. If that was not clear look at the folowing example:
<A HREF="You Put The Address Here"> This is what you Click </A>

This would give you:
This is what you Click
If you want to make a link to send email to yourself from your web page the link is coded like this:
 <A HREF="mailto: You Put YOUR Email Address Here"> email </A>
Which looks like:
email
In order to link a picture to your page, you need to know its address. Once you know its adress, you insert it into a HTML tag <IMG SRC=""> Again, you put the internet address within the quotes.
<IMG SRC="This is the address of the picture">
For more on pictures refer to Section 3.3 Graphic Commands

Basic HTML Code

Section 2.1: Paragraphs

There are a few basic things that you need to remember about paragraphs. The first is that in HTML language the number of spaces from one letter to the next will be, at most, one space. You can get around this is by using HTML tags. For ease of subject , I will use the same sentence for all the examples in this section.

The use of Paragraph Breaks <p>, Line Breaks <br>, and Indentation <dd>

The paragraph break does this: <p>
the line break does this: <br>
These     extra     spaces    really    don't    do     anything: <br>
<dd>another line break and an Indentation does this:

Would look like this:

The paragraph break does this:

the line break does this:
These extra spaces really don't do anything:

another line break and an Indentation does this:

In the above example you can see that the spaces are in the code but not when the code is run. You also saw the uses of the paragraph break <p> and the line break <br>.

Section 2.2: Text Types & Headings

Text types:

Here are the main types of text that are used, with how the code and font will look:

<i> italic </i>

Heading types:

Headings are different type sizes that you may use to title the sections of your page.

To make a heading, you begin with the start tag <h1> and then type what you want before the end tag </h1>.

<h1> h1, Heading level 1 </h1>

This example would give you a level one heading as shown below.

h1, Heading level 1

Here are how some additional heading levels would look:

h2, Heading level 2

h3, Heading level 3

h4, Heading level 4

h5, Heading level 5

h6, Heading level 6

Section 2.3: Horizontal Rules

Horizontal rules are thin lines that will run across your page horizontally.
To use the shown horizontal rules, you must use the following commands:

<hr>

<hr size=1>

<hr size=2>

<hr size=3>

<hr size=4>

<hr size=5>

<hr size=6>

<hr width=25%>

<hr width=50%>

<hr width=75%>

Or combinations of the two previous examples:

<hr size=5 width=50%>

<hr size=15 width=15>

Section 2.4: Color Help

The use of colors as backgrounds or as text colors is very simple. Here is how it works. The color commads are inserted into the "body" tag's brackets at the top of your page. You then assign color values for the link, alink, vlink, and text, along wit h the background color if you like.

Here are a list of color-related terms:

bgcolor = background color
   link = link          (a link you have not been to)
  alink = active link   (the link you are currently clicking)
  vlink = visited link  (a link you have been to already)
   text = text          (all the text on the page that is not a link)

A page with a white background, black text, a red link, a blue visited link, and a green active link would be represented as follows:

<body bgcolor="#FFFFFF" text="#000000" link="#FF0000" vlink="#0000FF" alink="#00FF00">

and would look like: Click here

The 8 Basic colors:

White=#FFFFFF	Red=#FF0000	Green=#00FF00	Blue=#0000FF
Magenta=#FF00FF	Cyan=#00FFFF	Yellow=#FFFF00	Black=#000000

Here at StudentWeb we have a small list of colors that you may look at.
For most of the colors in the known universe, here are two pages from InfiNet that have color help:
Page #1 This page will give you a list of colors.
Page #2 This is the same list but with color swatches of each color (it may take a while to load).

Section 2.5: Backgrounds

Backgrounds are used much like the background colors...but instead of a solid color you may use a picture. The only requirement is that it must be in GIF or JPG format.

It looks like this:

<body background="http://studentweb.tulane.edu/~login_name/Your_Picture.gif" text="#000000">

You may link a picture from across the WWW as your background, BUT it will take longer for it to load. This is written:

<body background="http://www.wherever.com/~name/A_Picture.gif" text="#000000">

We have a number of backgrounds pre-made here at this server which are located here
There are also many other places that you can go to get more backgrounds.

More Advanced HTML Code

Section 3.1: More on Text Types

Here are some more ways to change text. Again, you begin with a start tag and end with an end tag.

<strong> Strong is like bold </strong>

<blink> BLINK </blink>

You can change text by using the <font> </font> command. You need to start a tag with font, but before you put the > symbol you have to add a size statment much like the ones used in horizontal rules. This command has a few different variations which basicaly do the same thing.

For Example:

 <font size=6> I like football </font>

Gives an output like this:

I like football

or:

 <font size=+2> I like baseball </font>

Would give an output like this.

I like baseball

Notice that there is a difference between the two but they both will work. One cool example that you can do with this feature would be this:

NETSCAPE!

Section 3.2: Lists

Lists can be used in many ways. Two types of lists used in HTML are Ordered Lists and Unordered Lists. Both of the lists insert a tab and then, depending on the type of list, it will add a bullet or numbers accordingly.

An Unordered List:

<ul>
<li> first item
<li> second item
<li> third item
</ul>

Looks like:

first item
second item
third item

An Ordered List:

<ol>
<li> first item
<li> second item
<li> third item
</ol>

Looks like:

first item
second item
third item

In these two examples you should notice two things. The first being that the only main difference between the lists is the fact that the Ordered List uses <ol> and the Unordered list uses <ul>. In both examples, the "bullets" were initiated with an <li> which put the appropriate number or dot.

You may also use sublists in your page.

<ul>
<li> item A
<li> item B
<li> item C
<ol>
<li> first item
<li> second item
<li> third item
</ol>
<li> item D
<li> item E
</ul>

Looks Like:

item A
item B
item C
1. first item
2. second item
3. third item
item D
item E

You can do as many sub lists as you want, BUT if you forget to put an end tag, ie: </ul> or </ol>, you will get all sorts of messed up list shapes.

Section 3.3: Graphic Commands

There are only a few graphic commands. Here is a list of most of them. They are explained below.

<img src="http://studentweb.tulane.edu/~login_name/Your_Picture.gif">
<img align=right src="mailbox.gif">
<img align=left src="mailbox.gif">
<img align=top src="mailbox.gif">
<img align=middle src="mailbox.gif">
<img align=bottom src="mailbox.gif">
<img alt="mailbox" src=".mailbox.gif">
<img border=0 src="mailbox.gif">
<img border=10 src="mailbox.gif">
<img height=15 src="mailbox.gif">
<img width=15 src="mailbox.gif">

There are a few icons that you may use from StudentWeb they are located here

 <img src="mailbox.gif">

This loads the image to the page.

<img align=right src="mailbox.gif">

This alligns the image to the far right of the page.

<img align=left src="mailbox.gif">

This alligns the image to the far left of the page.

<img align=top src="mailbox.gif">

This alligns the text to the top of the image.

<img align=middle src="mailbox.gif">

This alligns the text to the middle of the image.

<img align=bottom src="mailbox.gif">

This alligns the text to the bottom of the image.

<img alt="mailbox" src=".mailbox.gif">

If the image does not load properly, you can have text appear in its place. mailbox

When using a picture as a link a border is automaticly included

<a href="><img src="mailbox.gif"></a>

If you choose to get rid of the border, you can use these commands.

<a href="><img border=0 src="mailbox.gif"></a>

<img border=10 src="mailbox.gif">

When using a Picture as a link this allows you to change the size of the border.

<img height=15 src="mailbox.gif">

With these two you can change the size of the image you are loading.

<img width=15 src="mailbox.gif">

Section 3.4: Imagemaps

Imagemaps are pretty simple to set up. The first step is creating or finding an image, and the second being creating a map based off of it. Map files should have the same name as the image file. An image with the name of "filename.gif" would have a map named "filename.map"

Within the .map file you need to "map out" your picture. To do this you need to break your picture up into rectangles, circles, or straight edged polygons.

The map defines the shapes and also where each shape points. This is done by nameing type of shape, then the URL linked to that shape, and finaly the coordinates of the necessary points for each shape. These coordinates are in pixels.
The necessary points are as follow:

For a Rectangle the points are the upper-left corner and the lower-right corner.

For a circle the points are the center and any point on the outer rim of the circle.

Finaly for a polygon the points needed are all of the corners in consecutive order around the shape.

For this upcoming example useing example.gif the html code would look like this: (NOTE: the ISMAP addition at the end of the img tag)

<a href="http://studentweb.tulane.edu/help/example.map">
<img src="http://studentweb.tulane.edu/help/example.gif" ISMAP> </A>

The .map file (called example.map) looks like:

default http://studentweb.tulane.edu/help/White.html
rect http://studentweb.tulane.edu/help/Red.html  16,16 82,52
poly http://studentweb.tulane.edu/help/Green.html 137,56 182,10 194,48 209,49  206,92  167,90
circle http://studentweb.tulane.edu/help/Blue.html 66,98 102,97

(The Default URL is the link where the map will point if they miss any of the specified shapes.)

The above codes in use:

A Counter and a Clock

Section 4.1: Format for the Counter, Date, and Clock

Counter displays the number of times image has been loaded. The Counter tag has a series of optional fields that are placed at the end seperated by an & or a |. To add a Counter to your home page please email StudentWeb Staff, and they will provide you with the filename to reference.

Parameter	Description	Example
df=FILENAME	Counter with data file sample.dat	<img src="/cgi-bin/Count.cgi?df=sample.dat">
ft=#	Frame thickness in pixels, default is 6.	<img src="/cgi-bin/Count.cgi?df=sample.dat&ft=4">
frgb=R;G;B	Frame color in red, green and blue as specified as a value between 0 and 255.	<img src="/cgi-bin/Count.cgi?df=sample.dat&frgb=200;50;200">
tr=B	Transparency on or off. Uses Y or N to create a transparent background, default is N.	<img src="/cgi-bin/Count.cgi?df=sample.dat&tr=Y">
trgb=R;G;B	Transparent color in red, green and blue as specified as a value between 0 and 255, or in 000000-ffffff format.	<img src="/cgi-bin/Count.cgi?df=sample.dat&trgb=000000">
md=#	Max number of Digits to display, default is 6.	<img src="/cgi-bin/Count.cgi?df=sample.dat&md=10">
pad=B	Padding with 0's, defaults to N without an md= or Y with and md=.	<img src="/cgi-bin/Count.cgi?df=sample.dat&pad=N">
dd=Name	Digit Directory, refer to Digits for the Counter for information on available digit directories. Default is A.	<img src="/cgi-bin/Count.cgi?df=sample.dat&dd=B">
sh=B	Show digits, with a value of N then no digits are displayed but the counter is still updated. Default is Y.	<img src="/cgi-bin/Count.cgi?df=sample.dat&sh=N">
incr=B	Increment Count, used to not increment the counter when value is N, such as throughout this page. Default is Y.	<img src="/cgi-bin/Count.cgi?df=sample.dat&incr=N">
lit=#	Display literal, able to display a predetermined value.	<img src="/cgi-bin/Count.cgi?df=sample.dat&lit=2515049">
negate=B	Negate the color of the counter digits when value is Y. Default is N.	<img src="/cgi-bin/Count.cgi?df=sample.dat&negate=Y">
degrees=#	Rotate counter image to these values: 90, 180 or 270. Default is 0.	<img src="/cgi-bin/Count.cgi?df=sample.dat\|degrees=90">
display=X	Specify display with values: counter, clock or date. Currently works for digit styles A, D, and E. For clock and date it does not require a data file.	<img src="/cgi-bin/Count.cgi?display=date">
timezone=X	Used with timezone=, values are:EST5EDT, CST6CDT, MST7MDT, PST8PDT, GMT, or GMT+#	<img src="/cgi-bin/Count.cgi?display=clock&timezone=GMT">
dformat=X	Specifies date format when with display=date, values: any combination of MMDDYY.	<img src="/cgi-bin/Count.cgi?display=date&dformat=DDMMYY">

Section 4.2: Digits for the Counter, Clock, and Date

Directory	Example	Digits
A	<img src="/cgi-bin/Count.cgi?df=sample.dat&dd=A">
B	<img src="/cgi-bin/Count.cgi?df=sample.dat&dd=B">
C	<img src="/cgi-bin/Count.cgi?df=sample.dat&dd=C">
D	<img src="/cgi-bin/Count.cgi?df=sample.dat&dd=D">
E	<img src="/cgi-bin/Count.cgi?df=sample.dat&dd=E">

Making HTML Tables

Section 5.1: Basic Tables

Tables are more simple HTML. Just like in making lists you need to tell the browser that this is going to be a table. This is done with the <TABLE> tag. From there you need to tell the tabel that you want to make a row, this is done with the <TR>, or "Table Row". Next you need to specify a "Block" in the row with the <TD> tag. You would then input your text or image (your "stuff") and then end each tag. </TD>, </TR>, and </TABLE>.

Here is a basic table example:
			- DISCRIPTIONS-
<TABLE>			<-- Start the Table <TR> <-- Start the 1st row <TD>stuff 1</TD> <-- row 1 block 1 <TD>stuff 2</TD> <-- row 1 block 2 </TR> <-- End the 1st row <TR> <-- Start the 2nd row <TD>stuff 3</TD> <-- row 2 block 1 <TD>stuff 4</TD> <-- row 2 block 2 </TR> <-- End the 2nd row </TABLE> <-- End the Table 
Here is the above code in action:

stuff1 stuff2

stuff3 stuff4

There are a few modifiers that you can use in the <TABLE> tag. The 2 basics are:

BORDER=XXX
CELLPADDING=XXX
Where XXX is a number. Here is the above example with all the same code except the opening "TABLE" tag is now:
<TABLE BORDER=4 CELLPADDING=10>

stuff1 stuff2

stuff3 stuff4

Notice the shaded border around the table from the BORDER
Also notice the extra space around the "stuff" from the CELLPADDING

Section 5.2: More On Tables

If you are interested in having a block be more than one row high or one collum wide, then you will need to add the appropiate modifier in the <TD> tag. The two modifiers are:
COLSPAN=XXX
ROWSPAN=XXX
COLSPAN lets your block be more than 1 collum wide where ROWSPAN makes it more than one row high here are some examples:
<TABLE BORDER=2>
<TR>             
<TD COLSPAN=2>stuff 1</TD> 
</TR>            
<TR>             
<TD>stuff 3</TD>    
<TD>stuff 4</TD>    
</TR>            
</TABLE>
Gives this table:

stuff 1

stuff 3 stuff 4

An exampe for ROWSPAN would be:
<TABLE BORDER=2>
<TR>
<TD ROWSPAN=2>stuff 1</TD>
<TD>stuff 2</TD>
</TR>
<TR>
<TD>stuff 3</TD>     
</TR>
</TABLE>
Gives this Table:

stuff 1 stuff 2

stuff 3

Finally for a Big example of COLSPAN and ROWSPAN:
<TABLE BORDER=2>
<TR>
<TD COLSPAN=2>stuff 1</TD>
<TD ROWSPAN=3>stuff 5</TD>
</TR>
<TR>
<TD ROWSPAN=2>stuff 2</TD>
<TD>stuff 3</TD>
</TR>
<TR>
<TD>stuff 4</TD>
</TR>
</TABLE>
Gives a table looking like:

stuff 1 stuff 5

stuff 2 stuff 3

stuff 4

Section 5.3: Table Decorations

Within tables you may want to do some HTML... feel free. All HTML will work within tables, if you want bold use <B> as you normaly would same for headers, links, images, etc. there are however a few shortcuts. The main shortcut is the <TH> tag. what this tag does is very similer to the <TD> tag, but it also centers, and bolds the text within. view this example:

<TABLE BORDER=4 CELLPADDING=2 WIDTH=50%> <TR> <TH>stuff 1</TH> <TD><CENTER><B>stuff 2</B></CENTER></TD> </TR> <TR> <TD>stuff 3</TD> <TD>stuff 4</TD> </TR> </TABLE>
Looks like:

stuff 1 stuff 2

stuff 3 stuff 4

Notice the how "Stuff 1" and "Stuff 2" are the same but the code for "Stuff 1" is much more simple.

You may also notice the WIDTH attribute. This specifies the Width of the table in relation to the page (much like it does in the <HR> tag).

The final decorative atrribute that i will tell you about is the BGCOLOR="X" attribute. This is used in a <TD> tag, and it will color the background of your table block, (this does not work on all browsers but most of the newer ones it does). The X stands for a color that is in Hex RGB Just like the atributes in the <BODY> tag. (If you need a listing see HTML help Section 2.4: Color Help Here is an Example:
<TABLE BORDER=4 CELLPADDING=4 >
<TR>
<TD BGCOLOR="#00FF00">stuff 1</TD>		(Green)
<TD>stuff 2</TD>
</TR>
<TR>
<TD>stuff 3</TD>
<TD BGCOLOR="#0000FF">stuff 4</TD>		(Blue)
</TR>
</TABLE>
Which Gives:

stuff 1 stuff 2

stuff 3 stuff 4

stuff 1	stuff 2
stuff 3	stuff 4

Send Questions about HTML to:
StudentWeb Help

Help Index - Help Page 1 - Help Page 2
Help Page 3 - Help Page 4 - Help Page 5