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.
-
If the resource is in the same directory as the HTML page that references
it, then only include the file name, not the server, or the directory.
<img src="picture.gif">
-
If the resource is in a subdirectory of the directory where the HTML page
that references it is located, then include the name of the subdirectory
and the file name.
<img src="my_graphics/picture.gif">
-
If the resource is on the same server, but is not descended from the current
diretory, then include the full path from the document root, starting with
a /.
<img src="/not_my_images/picture.gif">
-
If the resource is not on the same server, then you must specify the entire
URL.
<img src="http://www.where.com/images/picture.gif">
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.
An image
can be at the start of a line. Also, notice that the image
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>
-
Here
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>
-
Now
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 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>
|
-
First
-
Second
-
Third
|
| Unordered List |
<UL>
<LI>Red
<LI>Green
<LI>Blue
</UL>
|
|
| 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>
