How do I add a background image to my page?

What do I do first? After you have picked out your Web hosting company and signed up, you need to find the advanced editor on their site. Like I've mentioned before, if you use the easy editor you will not have much freedom in creating your page. Once you've found the advanced editor you can get started with the next step (page setup). If you decided instead to buy your own domain space and use a plain text editor (Notepad for Windows, SimpleText for Mac) to make your HTML documents, you can get started here.

How do I set up my page? Basic page setup is easy. You can copy and paste this code into your editor (to see what most editors basically look like before you've added anything click here) and just add your own stuff in between the <body> and </body> tags:

A basic document looks like this:

<html>
<head>
<title>Choose your own site title, and type it in here.</title>
</head>
<body>
Everything that appears on your site will be entered here (text, images etc.), between the body tags.
</body>
</html>

This is what the above document looks like when published on the WWW. Not very exciting, is it?

Here is a more exciting document, with just a few tags added:

<html>
<head>
<title>Max's Page</title>

<style type="text/css">

body { background-color: #33ccff; }
h1 {font-family: arial, verdana;
color: 6600ff }
p {font-family: arial, verdana;
color: 6600ff }
.center { text-align: center; }

</style>

</head>

<body>

<p class="center"><h1>Max's Page</h1></p>

<p class="center"><p>My name is Max. I'm Lissa's pet poodle. This is my first, and probably my last, Web page.</p>

<p class="center"><img src="max.jpg" width="161" height="195" alt="Max" /></p>

</body>
</html>

Want to see what the above document looks like when published on the Web? Click on the demo button:

You can see that the document begins with <html> and ends with </html>. These are the beginning and ending tags to every document on the WWW. The head tag contains the title of your page, and between the <body> tag and the </body> tag is where you put all the information that will appear on your page. Tags must always be nesting. For example, <b><u><Hello</u></b> is correct, <b><u><Hello</b></u> is not. Basic tags are covered in the HTML sections of this page.

Complete tutorial for Notepad/plain text editor/FTP here

If you have Windows you can also use Notepad to make your Web pages. If you have a Mac you can use Simpletext or TextEdit. Any plain text editor will do. Open Notepad in Windows (start/programs/accessories/notepad) and type in your HTML there. It is easiest to copy and paste the above code and add your own HTML where it says "Everything that appears on your page will be entered here." When you're finished with your page you need to save the file as "index.html." To save while you're still in Notepad click "file/save as/" and then type in "index.html" or "aboutme.html," whatever you want to name your page. Remember though that your main page has to be called "index.html." You should make a folder to put all of your HTML documents in, and save it in a place that will be easy for you to find like your desktop. You can view your new Web page even before it's uploaded to your server by double clicking on the file name where you have it saved. It will appear on your computer just like a Web page even if you're not online. You can edit this page by right clicking on it and then clicking "view source". The HTML document will come up and you can make changes there. Just be sure to save it! To view your new changes click "refresh."

If you use Notepad or a plain text editor to make your pages, you will have to download a FTP (file transfer protocol) program so that you can upload your files (HTML documents, java programs, images) to your server space. I use WS-FTP Pro. You can download it here. The download is free, but it's a trial version. If you can't afford to buy a program, try FileZilla. If you're using a Mac, you can use a program called Fetch. You can download it from their site, the cost is approximately $29.00. You need to make sure that you are allowed to upload files with FTP to your server, some of the free servers require you to use their editor to upload.

I have a nifty little program that allows you to format your page, and then convert it into HTML without any knowledge of HTML. It's called an HTML editor. It's not meant to take the place of learning HTML, but it's a fun tool that shows you how plain text is converted into an HTML code that browsers can read. The editor is IE only.

How do I add a background image to my page? I suggest using a style sheet to change your background attributes. The following codes are still recognized by most browsers but I recommended style sheets.

To add a background image to your page, you need to add this tag after the </head> tag, remember that you can use a .gif or a .jpg, you just have to change the filename in the following code if you use a .jpg. Substitute your own information where you see bold text:

If you just want a background color, you would add this tag after the </head> tag:

<body bgcolor="#000000" (whatever color # you want)> To find the color to put in the code, click here.

If you want to have a color background AND a background image (you will have a color background while the background image loads), you can add this tag after the </head> tag:

You can also have a fixed background. When you scroll down your page, your images and text will move but the background image will stay in a fixed position. Just put this tag after the </head> tag:

Unfortunately, this tag only works in the IE browser. Other browsers will ignore this tag, showing a regular background instead. CSS gives you more freedom with background attributes.

How do I add text to my page? To add text, you need to set up headers and paragraphs.

Headers come in 6 sizes, h1-h6, h1 being the largest. The tags look like this:

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

This is how the tags appear when published:

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

<p>This is a paragraph, it's a nice paragraph too. I'm not sure what to write here, but I'm writing anyway. OH, if you want to see an example of a header and a paragraph you can find one here. A header is kinda like a title. You can have less important headers named h2, h3, h4, h5, and h6. You can change the header font, font color, font size, etc. by using style sheets.</p>

You can align your paragraphs this way, the default is aligned left:

<p>You write your text here</p>

To center your text you do this:

<div align="center"><p>This will center your text</p></div>

To align your text on the right you do this:

<div align="right"><p>This will align your text to the right</p></div>

To make your text bold you do this:

To italicize your text you do this:

<p><i>This will italicize your text</i></p>

To underline your text you do this:

<p><u>This will underline your text</u></p>

In order to make a line break you need to add this tag wherever you want to return to the next line: <br>. You can use this tag to make vertical spaces between images, and it works just like the enter key on your keyboard.

For example, to write an address:

<p>Jane Smith<br>
123 Any Street<br>
Anywhere, Any State 12345</p>

A <br> tag does not need a closing tag.

You can wrap your text around an image like this:

<p><img src="turtle1.gif" width="75" height="50" alt="turtle" align="left">Adding your text here will wrap your text around your graphic, with your graphic on the left and your text aligned to the left of the graphic. You can see an example of text wrapping on my biography page.</p>

For example:

turtle Adding your text here will wrap your text around your graphic, with your graphic on the left and your text aligned to the left of the graphic. You can see an example of text wrapping on my biography page. I'm writing more stuff here, because you see, my little paragraph was not long enough for an example of text wrapping. I think I have enough text now ;)

Text wrapping with forced line breaks to form paragraphs:

For example:

How do I change the font on my page? You can change the font on your page by using style sheets, also known as CSS. You can find complete instructions here.

If you want to change the font for just a portion of your text you can override your style sheet by adding this code:

All of the text in between <font> and </font> will be changed, but the text before and after this tag will be the default font that you set up in the basefont tag.

The font face tag is frowned upon because it does some really creepy things in other languages.

This Web site is registered with the Library of Congress Copyright Office.