How to build an Adsense Website
Setting up a local Website
To test structural tags we have to experiment with basic (X)HTML. To do this we need to set up a notepad document so that it can be viewed through a browser. To do this:
- Create a new folder in your hard drive and call it ‘site’make sure it is placed in a logical and easy to remember location
- Open up notepad or (wordpad in mac).
- Type your name on the page.
- Go to the file in the notepad options menu and click ‘save as’.
- Save this file as index.html to the folder you created called ‘site’ in your local hard drive (remember to add the html extension to the end of the name).
- Open a browser, go to file from the menu bar (top-left of the browser) and browse to the location where you saved your index.html file.
- Open the file and eureka! You’ve created your first webpage. You should see your name in the top left corner of the page.
Not much, is it? Not to worry, we’re going to populate this page with a few more elements soon.
The DOCTYPE declaration
To begin with let us layout our webpage with essential code and tags. At the top we will put the DOCTYPE declaration. The DOCTYPE is almost always the first thing in all web pages and it describes the document type definition (DTD) of your site. Basically, it is what the browser uses to determine how to read your webpage. It tells the browser what markup you are using (XHTML strict, XHTML transitional etc...) and it also tells it what language the content is written in. Type or copy the following into your newly created notepad file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
As you can see we're going to put the site together using (X)HTML strict. It's a little unforgiving in that it doesn't allow the use of presentational markup or deprecated elements within the code but it is a good way to learn about how to put together a modern website.
We're now going to put the page-wide HTML tags. Type (or copy) the following into the index.html document. Don't forget to add the title text inbetween the <title> tags.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Endocrine Disruptors Home</title>
</head>
<body>
</body>
</html>
Point to remember: It is often best to type in the code into the notepad document directly than to just copy and paste it. Even though it can be slow in the beginning it helps you learn the code better and quicker.
Important structural HTML tags
To gain an understanding of how structural tags work we need an example. Copy and paste the following text inbetween the <body> tags of your notepad document.
Our urban, technological lifestyle is beginning to take its toll on us. Slowly, imperceptibly, we are accumulating a chemical legacy that could prove to be our undoing.'
Every human being on the planet now walks around with more than 250 synthetic chemicals in their bodies. From even before we are born, our bodies are been filled with the very chemicals we use in our everyday lives.
Nature itself is beginning to feel the impact of endocrine disruptors as our most treasured animals, from the American Bald Eagle to the mighty Beluga whales are been poisoned to the point of extinction.
The notepad document should look something like this:
Save the file and view it in the browser. In the browser, the text isn’t arranged at all and it just collects all together at the top of the window. Structural HTML tags can give us some basic control of this text.