Basic HTML Code

Questions about HTML to Contact: StudentWeb Help

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:

<b> bold </b>

<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.

Questions about HTML to Contact:
StudentWeb Help

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