Websites Help
Start Here
These help pages were originally written to support iVillage members building their websites in an iVillage community. That service was closed on 28 February, 2005. These help files are now, sadly, out of date.
Common Problems
Got a problem with your web page that you just can't solve? Check your page for these common
errors (hey, sometimes they even creep into my corrections).
- Did you enter a closing tag for every link or formatting code? For example,
if you type <A HREF="http://pages.ivillage.com/yourmembername/thispage.html">Go to This Page and omit a final </A> the link won't display properly and may even mess up other links that follow. The same problem can happen when you center, italicize or underline text.
- Your image doesn't show up? Doublecheck that you've spelled the filename correctly, capitalizing only as the exact filename shows. For instance, <IMG SRC="images/mypic.gif"> is not the same as <IMG SRC="images/MyPic.gif">.
- Each Web page MUST be enclosed in the following tags: <HTML><BODY> Your stuff here! </BODY></HTML>
- If you don't see any changes since the last time you looked at your page, maybe your browser's still showing the earlier version! Hit REFRESH in IE or RELOAD in NN and see if your changes now appear.
- When using WebSite Builder, remember to hit PUBLISH after every editing update. Otherwise your site visitors won't seeyour latest changes!
- For images from your own images subdirectory, be SURE to follow the form "images/mypicture.gif" when listing the image URL.
HTML Beginner's Guide
HTML? What does that mean?
HTML is short for HyperText Markup Language, the language used to write Web pages like this one!
- When you use a browser (like Netscape Navigator or Internet Explorer or even some word processors, HTML enables you to see colors, different text sizes, graphics.
- But when you look at the "HTML Code" (for instance, in an online editor) you see a lot of brackets and cryptic words. Those are what make it possible for text to change color, pictures to appear, even music or video clips to play!
Look at the difference between HTML code and what the browser displays:
| HTML Code |
|
Browser Display |
|---|
| HTML Code to <EM>emphasize</EM> text! |
|
HTML Code to emphasize text! |
Code (on the left) gets interpreted by your browser (on the right).
Any text enclosed in "<" and ">" marks is a "tag" that tell the browser what to do. For example:
- The <EM> tag tells the browser to italicize text.
- The </EM> tag means to stop italicizing text.
Tags usually come in twos, one that begins an action and one that ends it.
Important Note: normally, you won't see the tags in the browser, what you see are their effects.
The Most Common Codes
There are several common HTML tags
|
Tag
|
|
HTML Code
|
|
What the Browser Shows
|
|
<STRONG> (Bold)
|
|
This tag will <STRONG>emphasize</STRONG>
|
|
This tag will emphasize
|
|
<EM> (Italic)
|
|
Other code can <EM>italicize</EM>
|
|
Other code can italicize
|
|
<U> (Underline)
|
|
Some will even <U>underline</U>
|
|
Some will even underline
|
What you need to start
Here is the the bare minimum HTML code for a home page:
|
HTML Code
|
|
Browser Display
|
|
<HTML>
<HEAD>
<TITLE>Your Page Title!</TITLE>
</HEAD>
<BODY>
Your Stuff!
</BODY>
</HTML>
|
|
Your Stuff!
|
Remember: You don't need to know what these tags all mean.
Just put your title between the <TITLE> and </TITLE> tags. This title will appear at the top of the browser display.
Your page contents go between the <BODY> and </BODY> tags.
You can type all this code right into the iVillage Advanced Editor.
Making a LINK
A hypertext link is a special tag that links one page to another page or resource. If you click the link, the browser jumps to the link's destination.
There are two parts to a link:
- One part tells you or another viewer what to do (click here!).
- The other part tells the browser what to do (load a new page!).
Look at how HTML makes a link:
|
HTML Code
|
|
Browser Display
|
|
<A HREF="http://www.ivillage.com">Go to iVillage</A>
|
|
Go to iVillage
|
In this example, the phrase "http://www.ivillage.com" tells the browser what the link's destination is, and the phrase "Go to iVillage" invites the viewer to click.
The link on the right is real -- if you press it, you will go to iVillage's Web site.
If you want to make a link from one of your own pages to another page in the same directory, just use the filename or address of the page without the "http://pages.ivillage.com/" prefix. The browser will look for this page in your current directory.
I can't advise you WHAT colors to choose, but I can tell you that common colors can be referred to by name (i.e. black, white, yellow, navy, etc.). For a list of colors by name, consult our colortable at the top of every freeform editor screen.
Note: There are over two hundred colors that are "browser safe" (i.e. will display as you want in any browser). Many of the named colors don't ALWAYS show up nicely on every browser. To be extra careful, you should use the browser-safe color palette and refer to your color by its HEXADECIMAL value (a six-figure number-letter code) as shown below (e.g. "#FFFF00").
|
HTML Code
|
|
Browser Display
|
|
<FONT COLOR="green">Something Green!</FONT>
|
|
Something Green!
|
|
HTML Code
|
|
Browser Display
|
|
<FONT COLOR="#8000FF">Customize some color</FONT>
|
|
Customize some color
|
Can I set colors for my entire page at once?
You can do all this in the BODY tag! Just try:
|
HTML Code
|
|
Browser Display
|
|
<BODY BGCOLOR="blue" TEXT="red">
Red words on Blue
</BODY>
|
|
Red words on Blue
|
What do I do so someone can send me email from my page?
It's a special kind of link that launches an email. Take a look:
|
HTML Code
|
|
Browser Display
|
|
<A HREF="MAILTO:membername@ivillage.com">E-mail Me</A>
|
|
E-mail Me
|
Pictures and Backgrounds
So, how do I get those pictures up there, anyway?
Use the IMG tag. Here's how:
|
HTML Code
|
|
Browser Display
|
|
<IMG SRC="images/mail.gif">
|
|
|
Always remember to type the name of the image file EXACTLY as shown in your directory. Uppercase and lowercase exactly as you see. And browsers can only display .gif and .jpg image files, so make sure that whatever picture you've uploaded is one of these two standard web graphic type.
The Background
If you want to use a picture as your webpage background, it's as easy as adding a bit of information to your <BODY> tag:
|
HTML Code
|
|
Browser Display
|
|
<BODY BACKGROUND="/imagelib/ivillage/70/70003.gif">
|
|
|
Now, when you do this on your page, the background will repeat until it fills the whole page. This can be a strange effect with some pictures so choose your background carefully! Remember, only use .gif or .jpg file types!
Back to the Top
Help from Other iVillagers
There are some SUPERB iVillage member sites for HTML help:
- Hot4Truckers: HTML Help Page that is as fun as it is informative
- CL-Spottydoodle: Website building help with a focus on promoting your site
- The Cook Nook: Cooking up great HTML as well as great eating!
- The Cad: The Cad's got a GREAT help site for HTML codes and home page creation
Has this site been a big help to you? Want to point others to it? Feel free to link back here using one of these buttons:
Just copy and paste in one of the codes below:
Note that the code is formatted for iVillage's "images" subdirectory. If your page is not at iVillage, change the code to work with your own directory system
<!--Begin Ancarett's HTML Help Button Fragment, Trek-->
<A HREF="http://pages.ivillage.com/ancarett/help.html"><IMG SRC="http://pages.ivillage.com/ancarett/images/ancaretthelp.gif" WIDTH=216 HEIGHT=76 BORDER=0 ALT="Ancarett's HTML Help"></A>
<!--End Fragment-->
<!--Begin Ancarett's HTML Help Button Fragment, Large-->
<A HREF="http://pages.ivillage.com/ancarett/help.html"><IMG SRC="http://pages.ivillage.com/ancarett/images/bighelp.jpg" WIDTH=149 HEIGHT=149 BORDER=0 ALT="Ancarett's HTML Help"></A>
<!--End Fragment-->
<!--Begin Ancarett's HTML Help Button Fragment, Small-->
<A HREF="http://pages.ivillage.com/ancarett/help.html"><IMG SRC="http://pages.ivillage.com/ancarett/images/smhelp.jpg" WIDTH=150 HEIGHT=50 BORDER=0 ALT="Ancarett's HTML Help"></A>
<!--End Fragment-->
Created by Ancarett. Last updated 2 February, 2001.