How to build an Adsense Website
Organizing the Content
The gross structure of your site is determined by the HTML markup you use on your web page and it determines what the CSS style-sheet 'sees'. To control and organize the text we're going to use the <p> tags:
- Put the open <p> at the beginning of the text and put a close <\p> tag at the end of the second sentence. Then put a open and close <p> tag around the rest of the notepad text in the same manner to create three paragraphs.
- The <p> tags start to bring some rudimentary organization to the text. They define the beginning and end of a paragraph and also give you a potential means to control the text using CSS. Browsers automatically insert a blank line after all <p> tags.
To start a new line without a blank line in-between you can use the <br /> tag instead (fig.4). <br /> tags don’t have a start tag. But instead uses a slash with a small space in-between to signify its uniqueness. It’s one of the few tags that acts singly.
Using Lists within your Site
Lists are a brilliant way to organize and present content on a web page. They break up content so it is easier for a visitor to digest and they are a good way to tag content for CSS.
To get a better sense of lists copy the next section of text for into lower part of the body section of the index.html document:
Endocrine disruptors come in various shapes and sizes and have different functional roles within the manufacturing and agricultural industries but they all have one thing in common; the ability to intergrate themselves into living systems and mimic the roles of natural chemical messangers:
Endocrine disruptors like DDT and PCBs are Persistent, Bioaccumulative and Toxic (PBTs) chemicals.
They can block important receptors or imitate the effects of essential hormones like oestrogen.
During crucial stages of development this interference can result in subtle, yet serious damage to various parts of the reproductive systems of higher animals... including humans.
Endocrine disruptors are everywhere. There is no escaping them, they are in me, they are in you and they are in everyone around you.
What can we do to avert the danger of these silent chemical killers?
Again if you open the document in the browser you will see that the text is not organized at all. To control the text we need to add some code. Lists are nested, meaning that they are tags within tags. Nesting enables you to create heirachies of lists, enabling you to create complex structures especially within navigation elements. Now we're going to add some code into text we just copied:
- Put the first paragraph of the recently copied text into open and close <p> tags
- After the closing </p> put a bullet list tag <ul> just below it (This starts an unordered list)
- Now start enlosing the next four sentences in open and close <li> tags
- After the fourth sentence close the list with by adding a closing </ul> tag
- Finish off the text by putting the last line within a open and close <p> tag
The lower part of your document should look like the image below:
View the page in a browser. You can immediately see the effect a list has on a webpage. It gives it structure and makes it look organized.
Instead of using <ul> you could just as easily use <ol> (ordered lists) to organize the page.
Dressing up our titles with Header tags
Let’s give our endocrine website a title, what about ‘Endocrine Disrupters.net’? Not original I know but we’ve got to keep an eye on search engine optimization. Type (or copy and paste) this title into the notepad document just below the first open <body> tag.
We can highlight the title using a range of predefined HTML style tags. These so-called header styles use tags in the range of <h1> to <h7>. Wrap the title we just created in the <h1> and </h1> tags to see what it does.
You will see that it changes the size of the text contained within it and creates a blank line underneath it. After you've finished experimenting with the <h> tags wrap the title within a <h3> tag it should look like the code below:
<h3>Endocrine Disruptors.net</h3>