Making a Page Tutorial

Making a Page

Once I find something I like I use the same style throughout my site. This makes it easy to change everything quickly if I decide on a new set to use.

You can go and choose a copy and paste table to use for this part. I have a single, a double, triple or quad. Whichever you like. I think maybe a double would be good to begin with. All you need to do is copy and paste it into your new page. The code pages are Here Choose which one you want to use.

I always begin a new page by first making a test folder, uploading any images I will need into this folder. I then make a new page and title it 1.html. Then I begin work on it and it will remain in the test file until it is completed. Then I decide what I will name the page and make a new page in whichever folder I am using. Upload the images, and change the links of the the images. Do whatever is easiest for you.

I copy and paste from notes and it will look like this: This part remains the same. I have my title, my table, my background tiles, and one table because I am making a double. Remember if you copy and paste one of my tables provided you will only need to insert body colors, background tiles and header. The closing tags will already be on your page. If using your own, I would then insert the bottom closing tags. This closes the table for my background set, as well as the body and html tags. The reason I close this all off and add my header is because if you check your page to see the table it will look very odd to you.

Now it is time to add any images for my background set. Header, bars, icons etc. I add all that I am going to use. Once they are in I check my page to see how it all looks. I can move things around until I have the look I want.

Once my background images are in, and I am happy with where they are, it is time to either add your text, or in this case I am making an Awards page so I am adding those images.

After I added the images I open a new window to link back to their websites. I copy and paste and make note of the Title of their Site, and put the link in just before that graphic. Checking to close the tags and to enter the title of their site. Image by image the data is entered. I will save and check the page and the link right away. I also leave vertical spaces between all my graphics and text. After my breaks
I hit the enter bar once and leave a gap.

Now my page is complete, I want to make sure everything is in order and all links work. I then copy and paste my page into my html validator looking for any errors in my code. Errors show up as red and the let you know where and what the error is. And there is usually some :) I fix those errors until I get the green light on the validator.

And there you have a new page. It wasn't hard at all :)

One of the reasons I space my pages the way I do, is not just for neatness but for editing or changing something. Could you imagine a coded page that looks like this: This is all correctly coded and everything is there. The page looks good. But, try and find anything. It would be a nightmare to make a single change. For your own sanity leave some spaces between your text and graphics :)

If you have any questions at all, feel free to email me at :
kkdesigns11@hotmail.com