Click Here to go to Main Page

Jackie's Pages

Nail Soup Blog

Denim Purse Tutorial

Denim Purse Gallery

Kid's Corner

Kid's Games

Def Leppard

HTML How To





Looking around Pamster.net you might ask yourself how I created it. The truth is I hand coded each page in Notepad and eventually after I got the hang of using HTML I downloaded a HTML editing program called Edit Plus but I wouldn't recommend even looking at that until you've learned the basics and they aren't hard. If you've learned BbCodes from posting on message boards many of them are the same except for the brackets, the codes for italics, bold, & underline are the same letters but the brackets make them look like this:


<i> <b> <u>


Each tag as they are called in HTML must have a closing tag, so for instance to bold the word 'tag' in a repeat of part of this sentence it would look like this:


so for instance to bold the word <b>'tag'</b> in a repeat...


Now let's start at the beginning, you have a document you're writing and want to convert to HTML. This is not hard if you know some basic codes. Think of a business letter, they have three parts, a header, a body and a footer. So when you open an HTML document you need to have an opening HTML tag, now remember I said each tag needs a closing tag? The trick with this opening code is that it's encompassing the entire page contents so you don't close it until you're done with your page contents and are at the very end of the page code. So let's look at the top part of the HTML document, the header can contain all kinds of information that the search engines will read but will not be displayed on a web page, for an example just right click on this page and select 'View Source' and it will show you the 'Meta Tags' which are far too advanced for the purpose of this page to get into here. My purpose here is to show you how simple pages can be constructed easily and without much effort.


Now looking at the top part of a HTML document you need to open the 'Body' of the HTML page so you need an opening 'Body' tag, then comes fonts, and I will only go over a couple because there are more fonts around then I could possible name here, so I will let you determine your personal favorite and go with it. This code below is an example of the opening of a HTML document and setting of a font with a heading. You will also see the code for 'Centering' and 'Page Breaks' used here so bear with me on this example, it's not too hard to get your head around if you're still with me so far:


<HTML><BODY>

<FONT FACE="ARIAL"><FONT COLOR="BLACK"><FONT SIZE="+2"><CENTER>Check it out!</CENTER></FONT><P>

<FONT="ARIAL"><FONT COLOR="BLACK"><FONT SIZE="+1"><CENTER>Then this is where the text you're formating and making a size for will be seen. Using the center tag you can center a big chunk of text without having to close it, but as you're starting out it's better to try to close the tags within eachbit of code. The <P> tag is used to make a new paragraph. Now I will show how to close the tags and end the HTML document itself. This is done with a series of closing tags and ending finally with the closing HTML tag.</FONT></CENTER><P> </BODY></HTML>


And that's all there is to it! Seriously, that's all there is to getting a basic page up. Now you want images right? And you want maybe a link for people to email you from right? Those are the last things I will show you here and then you're ready to go on your own and check out other in depth tutorial sites for in depth information on tables and headings and whatnot. But my purpose will be complete and I will be happy to have helped get you started on your way to making your own web pages! Ok, images first...To insert an image you need to know where it's located, you cannot link to images on your hard drive so you need to find a host to put them up and to do that you can explore many sites and compare plans, if you're looking for a free web host try this site: http://www.freewebspace.net/ is a great resource to look around for a free website provider. Now a little bit on using one, just like your computer hard drive has directories, your new webhost will allow you to make and upload images and files to directories you choose to make. You have to make directories in order to organize your site effectively, it's not hard to do and just like your computer's hard drive you can use those files on your pages once you upload them to the directory of your choosing.

Embedding an image...

<img src="http://www.pamster.net/ani-milan.gif">

Now for an example I will use this same code and embed the same image here:

This is my favorite animated gif and I use it to promote Cyber-Soup so if you want to save it and use it to link to my site please feel free to do so. I appreciate any link back to the site and I hope that my site has helped others, if only once person reads this and makes a successful web page then I am very pleased and have fulfilled my need to make a HTML How-To page. Next is making a link:

<A HREF="http://www.pamster.net">Pamster.Net</A>

That is how to make a link that will work like this one Pamster.net now it's very important to always have the quotes if you are missing one the link may not work and it might mess up the entire page. So make sure like with all tags you use a opening and closing quotation mark and you'll do fine. Next is making an image a link, I am going to show you how to make it NOT have a border as well as many people might wish to get rid of the tell tale sign of a link bordering the image. I'll use my favorite image too:

<A HREF="http://www.pamster.net"><IMG SRC="http://www.pamster.net/ani-milan.gif" border="0"></A>

This will give you the following:

There you have it, how to do images and to embed them with link clickable links. Drop the border="0" 'tag' if you want the boarder to show, but many people like images to be seen without the border so I thought including it for you would be useful. Last but not least is how to make a link to email you. To do this you must first have an emaila ddress of course and then find a place on your page you wish to put it. I have mine on the bottom of pages and in the sidebar. So the tag for this is:

<A HREF="maito:pamster@pamster.net?subject='Sent from the HTML How To Page'">Email Pamster</A>

This translates into this: Email Pamster


And there you have it! All you need to know to have a perfectly acceptable webpage to put online. Now go find a host you like and get started!


Some other useful tutorials are:

http://www.htmlgoodies.com

http://www.w3schools.com/html

http://www.pagetutor.com/

http://www.webmonkey.com/webmonkey/teachingtool/html.html


Hope you found this How to useful, let me know what you think by using the email link, it works just like everything else on this page does.


 Search:   for    


All photographs and written content are copyright protected by the site owner. Any unauthorized use is prohibited. To ask permission to use content or if you have problems with accessing parts of the site, email Pamster.

Webhosting provided by 100megswebhosting.

Get your Best Board here.