HTML Tutorials on Papershredder

HTML

Lesson 1

How do I start? Once you've chosen your web hosting company, go to their site and find their editor. Generally it's not a good idea to work directly with the editor because you'll probably want to work on it without having to stay on site all the time. Instead, open your computer's text editing application such as Notepad for Window or Textedit for Mac. Type your code in the text application and save it as with a "html" extension. If you have a HTML editor, you can use that to. I highly recommend Adobe Dreamweaver for a page editor. If you decide to buy your own domain space then you'll probably need an FTP program. FTP is short for file transfer protocol, in other words it's an app for transferring HTML and your other resources to the server. I use Smart FTP (www.smartftp.com). If you want to get fancy with the graphics, you'll probably need an image editor like Adobe Photoshop. You can preview also your page in your computer's browser. If you have Microsoft's Internet Explorer click File> Open and click "Browse". Find the HTML document and click "OK".

Basic Tags. A basic page looks like this (replace all bold text with your own content) -

<html>
<head>
<title>your title</title>
-- all additional programming (CSS, JavaScript, Meta tags etc.) goes here --
</head>
<body>
-- everything that appears on your page goes here --
</body>
</html>

As you see, every tag starts with <tag> and ends with a </tag>.
All text in normal font style is required in HTML.

IMPORTANT!

Formatting. Five more basic tags.
<p> This tag starts a new paragraph. Tag ends with a </p>.
<br> This tag is like clicking the Return key on your computer. There is no closing (</br>) tag.
<b> Makes bold text. </b>
<i> Makes italic text. </i>
<u> Makes underlined text </u>

Backgrounds. Put this tag after the body tag: bg color="#ffffff (or whatever color you want)" . It should look like this - <body bg color="ffffff"> -- all body content -- </body>. Note that #ffffff is white in hex code (Hexidecimal code) and #000000 is black. All other colors are made by setting different values. Experiment around, the only thing you need to know is that the first two digits modify the red value ,the second modify green, and the last modify blue. So for all blue you put #0000ff and for a purple you put #ff00ff
To insert a background image, just type in <body background="URL">
-- all body content --
</body>

Images. To insert a image, write <img src="URL" height="your height" width="your width" alt="your alternative text">
Obviously you have to replace the bold text with your own attributes. Also if you only set the height or only set the width the picture will compensate the other dimesion. For instance if your pic origanally had height=4 width=4 if you set the height to 2 the width will be set to 2 also. All distances are measured in pixels.
You can also wrap text around images by putting "align="your attribute" inside the img tag and writing the text.

Lesson 2