HTML Information

Web Resources on HTML

HTML codes for a web page

Referencing other pages or graphics on the web

When referencing other pages or graphics on the web, you must know the complete URL of the source in order to create a link to it. However, depending on where the resource is located, you may be able to speed up the loading of your page by using relative references.

The basic codes for a page are

<html>
  <head>
    <title>HTML codes for a web page</title>
  </head>
  <body>
    place your HTML code here
  </body>
</html>

Here are some examples of HTML formatting codes

<b>boldface</b>
boldface
<i>italic</i>
italic
<u>underline</u>
underline
<h1>Heading 1</h1>

Heading 1

<h2>Heading 2</h2>

Heading 2

<h3>Heading 3</h3>

Heading 3

<h4>Heading 4</h4>

Heading 4

<h5>Heading 5</h5>
Heading 5
<h6>Heading 6</h6>
Heading 6

Image Alignment

<img src="/images/paw_blue.gif" alt="fiu paw print">
Here is a line of text that is above all the pictures. Notice that the images appear in the line of text.
fiu paw print An image can be at the start of a line. Also, notice that the image fiu paw print can be inserted in a line of text. But that extra text does not wrap around the picture.
<img src="/images/paw_blue.gif" alt="fiu paw print" align = left>
fiu paw printHere you can see that the image appears on the left, but that extra text (like this very long description) wraps to the right of the image.
<img src="/images/paw_blue.gif" alt="fiu paw print" align = right>
fiu paw printNow you can see that the image is on the right, but the extra text (like this very long description) wraps to the right of the image.
<a href="http://www.fiu.edu">FIU Home Page</a>
FIU Home Page Creating a link in a document to another document
<a href="http://www.fiu.edu"><img src="/images/paw_blue.gif" alt="fiu paw print">FIU Home Page</a>
fiu paw printFIU Home Page Making the image clickable, too.

Breaking lines and inserting visible lines

<hr>


first line<br>second line<br>third line

first line
second line
third line

Paragraph Formatting

<p>Paragraph 1<p>Paragraph 2<p>Paragraph 3

Paragraph 1

Paragraph 2

Paragraph 3

Creating Lists

Ordered List
<OL>
    <LI>First
    <LI>Second
    <LI>Third
</OL>
  1. First
  2. Second
  3. Third
Unordered List
<UL>
    <LI>Red
    <LI>Green
    <LI>Blue
</UL>
  • Red
  • Green
  • Blue
Definition List
<DL>
    <DT>Miami
    <DD>A big city
    <DT>Maine
    <DD>A state
    <DT>Marne
    <DD>A river
</DL>
Miami
A big city
Maine
A state
Marne
A river

Here is the code that will create the table at the bottom of the page.

<TABLE class="em-border">
  <TR>
    <TD rowspan="2">
      <IMG ALT="JCCL Logo" SRC="http://www.cis.fiu.edu/images/jcclbutton.png"><BR>
      <IMG ALT="JCCL Logo" SRC="http://www.cis.fiu.edu/images/jcclbutton.png"></TD>
    <TD colspan="2">
      <IMG ALT="JCCL Logo" SRC="http://www.cis.fiu.edu/images/jcclbutton.png">
      <IMG ALT="JCCL Logo" SRC="http://www.cis.fiu.edu/images/jcclbutton.png"></TD>
  </TR>
  <TR>
    <TD rowspan="2" colspan="2">
      <IMG ALT="JCCL Logo" SRC="http://www.cis.fiu.edu/images/jcclbutton.png">
      <IMG ALT="JCCL Logo" SRC="http://www.cis.fiu.edu/images/jcclbutton.png"><BR>
      <IMG ALT="JCCL Logo" SRC="http://www.cis.fiu.edu/images/jcclbutton.png">
      <IMG ALT="JCCL Logo" SRC="http://www.cis.fiu.edu/images/jcclbutton.png"></TD>
  </TR>
  <TR>
    <TD><IMG ALT="JCCL Logo" SRC="http://www.cis.fiu.edu/images/jcclbutton.png"></TD>
  </TR>
  <TR>
    <TD><IMG ALT="JCCL Logo" SRC="http://www.cis.fiu.edu/images/jcclbutton.png"></TD>
    <TD><IMG ALT="JCCL Logo" SRC="http://www.cis.fiu.edu/images/jcclbutton.png"></TD>
    <TD><IMG ALT="JCCL Logo" SRC="http://www.cis.fiu.edu/images/jcclbutton.png"></TD>
  </TR>
</TABLE>

JCCL Logo
JCCL Logo
JCCL Logo JCCL Logo
JCCL Logo JCCL Logo
JCCL Logo JCCL Logo
JCCL Logo
JCCL Logo JCCL Logo JCCL Logo