This tutoria presents examples of some HTML code that you may want to use in your home page.
These are basic web page features but allow you to create a wide and interesting variety of web formats. Further information is available through links at the end.
These codes may be used: anywhere between the <body> and </body> tags of the Editor. The top part of each section is what the code should look like in your document. The lower part of each section is what it will look like on your home page.
Big Hint! Cut and Paste the top part of each sample right into your page. It's easy. Try it!
The title element contains your document title and identifies its content in a global context. The title is displayed somewhere on the browser window (usually at the top), but not within the text area. The title is also what is displayed on someone's hotlist or bookmark list, so choose something descriptive, unique, and relatively short. A title is also used during a WAIS search of a server.
<html> <header> <titleYour Title Here> </header>
Neither the Head nor the Title show on the text area
Start with the colors you want. <body bgcolor="#ffffff" text="#0000ff " link="#ff0000" vlink="#ff18ff">
This page has a white (ffffff, or all colors) background ("bg"), blue(0000ff) text, a red link highlight and a green (00ff00) highlight for visited links (vlink). You can see the pattern here for mixing colors. (Note that "f" is hexadecimal for 16 and "ff" is 256) You can also just call out colors as you will see later.
<font face="Helvetica">Helvetica font
<font face="New Century Schoolbook">New Century Schoolbook font </font>
New Century Schoolbook font
<font face="Lucida">Lucida font </font>
In the advanced editor, you can place the HTML code anywhere. Usually graphics are in a directory called /images. For example, to put the animated book on a page you would put:<img src="/images/bookani2.gif">To use any other image just replace the bookani2.gif with the name of the image you want. It can be a gif or jpg image.
To put your uploaded grahics on your page do the following:<img src="xx/yyy/images/zzzz.ttt">where: xx web name yyy is your directory name zzzz is the image filename .ttt is the .gif or .jpg filename extension
How do I make graphics smaller?
Use the HEIGHT and WIDTH options in the IMG SRC tag:<img src="xx/yyy/images/zzzz.ttt" height=30 width=20>where: xx web name yyy is your directory name zzzz is the image filename .ttt is the .gif or .jpg filename extension 30 is a height of 30 pixels. 20 is a width of 20 pixels.
Some World Wide Web browsers--primarily those that run on VT100 terminals--cannot display images. Some users turn off image loading even if their software can display images (especially if they are using a modem or have a slow connection). HTML provides a mechanism to tell readers what they are missing on your pages. The ALT attribute lets you specify text to be displayed instead of an image. For example: </IMG SRC=" zzzz.ttt " ALT="Up"> where zzzz.ttt is the picture file name and extension (gif or .jpg).
<a href="/doc/faq.html"> create a link to another page on the same server</a>
create a link to another page on the same server
<a href="http://werbach.com/barebones/barebone.html"> create a link to another page on another server</a>
create a link to another page on another server
<blink> make text blink </blink>
width font with preformatted text
</pre>turn on fixed width font with preformatted text
<li> list item 1
<li> list item 2
This will quote a block of text as a separated paragraph like this, indented on both the left and right sides. You may also put other codes inside the blockquote as well, such as this bold, italicized link to point you to other HTML resources which you haven't found here.
<TABLE> start of table definition <CAPTION> caption contents </CAPTION> caption definition <TR> start of first row definition <TH> header contents 01</TH> first cell in row 1 (a head)The <TABLE> and </TABLE> tags must surround the entire table definition.
<TH> header contents 02</TH> last cell in row 1 (a head) </TR> end of first row definition <TR> start of second row definition <TD> cell contents </TD> first cell in row 2
<TD> cell contents </TD> last cell in row 2 </TR> end of second row definition
<TR> start of last row definition <TD> cell contents </TD> first cell in last row ... <TD> cell contents </TD> last cell in last row </TR> end of last row definition </TABLE> end of table definition
This table looks like this:
|header contents 01||header contents 02|
|cell contents 11||cell contents 12|
|cell contents 21||cell contents 22|
Now you know basic web page features that allow you to create a wide and interesting variety of web formats.
Further information is available through links below.