How to build an Adsense Website
How to Add Images to a Website
After your images have been manipulated (compressed, edited and resized) you can put them into the images folder of your site. Images are put into a web page using the <img> tag. Like the <br /> tag it is singular; it doesn’t have a closing </img> equivalent. Right-click on the image below and save it as 'beatlePCB330x199' into the images folder you created within the sites directory.
About the image tag
Make sure that the picture is in the images folder. Now let’s take a look at a basic image element:
<img src="images/beatlePCB330x199.jpg" alt="Beatle and PCB" width="330" height="199" align="left" vspace="10" hspace="8" />
The only part of this code that is important is the img src section of the tag. The rest just gives us better control of the image but is not completely necessary.
- The <img> part tells the browser that its working with an image and the src tells the browser where it is.
- The forward slash tells the browser to look in the root of the websites space for the folder. It’s a good way to link different parts of your site together.
- The name specifies which image to use. The numbers following the name is its dimensions and it is a good way of keeping track of its properties.
- The width and height parameter tells the browser how much of the image you want to display. Without it your browser will display the whole image (which may be large if you haven’t cropped it properly).
- Align tells the browser to align the image with the left-hand margin. Other options include setting it to the right (align='right') or center (align='center').
- The hspace and vspace instructions ensure that our image is protected from intrusion. It makes sure that no other image or text encroaches on the image leaving a space of 10px on the vertical axis and 8px on the horizontal axis.
Copy and paste the code above into the index.html document (paste it below the last </p> tag) and view th results in a browser.
The web page should look something like this:
As you can see HTML is quite simple. There are a few more pieces of code that we still need to learn and incorporate into our document but the tutorial has covered the most fundemental aspects of HTML.
The next stage of building an Adsense Website
The next part of the tutorial involves using CSS to make the web page look dazzling. All the presentational aspects of the site is controlled using CSS. There is more code (often called CSS declarations) to learn than in HTML but the overall size of the CSS style sheet is more or less the same as the HTML document we just created.
To allow us to elaborate a bit more about the various code we're using for the presentational styles we've put the CSS section of the Adsense website tutorial in the PDF document accompanying this section of the site. All the necessary bits and pieces required to complete the tutorial can be downloaded from below. Remember that all these elements can be replaced by images, text and code that YOU want to use to create your own distinct Adsense website. If you want to learn more about how to create more complex sites you can buy some good text books (like those recommended in Website books) that goes through each stage simply and meticulously.
Here are the text and images needed for the tutorial:
AdSense website tutorial elements
To get the AdSense CSS tutorial click the following link:
