Basic html

advertisement
Advanced Web Design CIS4930 – HTML Commands (Review)
1/26/04


The first thing to put on your web page, is a title.
<title>John Doe's Web Page</title>

HTML isn't case sensitive

HTML has six levels of headings, numbered 1 through 6, with 1 being the largest
<h1>Hello</h1>
Hello
<h2>Hello</h2>
Hello

Whenever you have more than a sentence of writing, you should have paragraphs.
<P>This is a paragraph. Put whatever instructions you want here. Maybe
ask them to send an e-mail with suggestions</P>
 There are two types of lists that you can make in HTML,
Dotted
<UL>
<LI> Lisa
<LI> George
<LI> Bill
</UL>
Numbered
<OL>
<LI> Lisa
<LI> George
<LI> Bill
</OL>
 Forced Line Breaks – Sentence1<BR>Sentence2<BR>Sentence3
This is one of the few commands that you don't have to put an ending command on
 Horizontal rule, or line in your page
<HR SIZE=25 WIDTH=75%>
<HR SIZE=3 WIDTH=100%>
<HR NOSHADE SIZE=1 WIDTH=100%>
1

Format some of your text
<b>, </b> for bold
<i>, </i> for italic
<u>, </u> for underlined
<strike>, <strike> for strikeout
<sup>, </sup> for superscript
<sub>, </sub> for subscript
<tt>, </tt> for teletype
<blink>, </blink> for blinking text (very annoying)
You can also mix styles together like this!
 URLs - When you make a link - colored text
<A HREF="http://www.ufl.edu">text that you want to be colored goes here</A>

have a link that will take you further down a page
1) To make the actual link, call it "downstream". If downstream is on the same page that
the link is, you would type:
<A HREF="#downstream">Colored Text
Otherwise, you would add "#downstream" to the end of the URL.
2) Now, you need to make where the link will take you. Go to downstream where you
want the link to take you, and type:
<A NAME = "downstream">

Mailto Links - <A HREF="mailto:jnritz@cise.ufl.edu">Prof Jodi</a>

To display a graphic - <IMG SRC="http://www.ufl.edu/Images/pic.gif">The
"ALT" attribute lets you specify text to be displayed instead of an image. For
example: <IMG SRC="pic.gif" ALT="browser cannot display images">

Animated Graphics - In order to have animation on your web page, you need to
download a program that was made to fit more that one GIF in a file.
2

Background, text, and link Color – You must have "#" sign before actual code.





<body bgcolor="#code">for background color
<body text="#code">for color of text (all non-links)
<body link="#code">for color of unvisited links
<body vlink="#code">for color of visited links
<body alink="#code">for color of active links (while being selected)
You can also string two or more of these commands together:
<body bgcolor="#000015" text="#000020" link="#000050" vlink="#7a7777"
alink="#8f8e8d">

Background Graphics
Instead of having a solid color as a background, you can have one graphic that repeats
over and over to create a background; for a background called "bk.gif" would be:
<body background="bk.gif">

Linking with graphics
(1) You might want to have a graphic that is a link. just mix the two commands of
linking, and displaying graphics.
(2) You can also have a graphic link with text next to the graphic
Yahoo!
first the plain graphic-link:
<A href="http://www.yahoo.com"><IMG
SRC="http://www.infhost.com/members/web/Images/yahoo.gif"></A>
second, the graphic-link with text:
<A href="http://www.yahoo.com"><IMG
SRC="http://www.infhost.com/members/web/Images/yahoo.gif">Yahoo!</A>

Image Maps
Before creating an image map, make sure your server supports them. First, create an
image. Draw a picture with sections that could lead to certain places. Second, create an
image map file. You can go to Yahoo's Image Map Directory.
3
Download