Home Affiliate Marketing Lessons Site Building Intermediate Anatomy of a Web Page #2

Anatomy of a Web Page #2


Affilorama members only

 

Watch a preview Join for free

Anatomy of a Web Page #2

In this lesson we're going to look at a few more elements that make up your average web page, as well as a brief introduction to CSS!

In this lesson we're going to take a second look at the Anatomy of a Web Page. We'll show you a few more elements that make up your average web page, give you a brief introduction to CSS (and the relationship between CSS and HTML), a look at the very useful "div" and "span" tags, some points on using tables and finish off with the often misunderstood doctype.

CSS (Cascading Style Sheets)

We've mentioned CSS several times throughout our lessons, so it's time to actually discuss what CSS really is.

CSS stands for "cascading style sheet". It's the bits of your website where you can say "I want all my headings to be 16 pixels, bold, red, and use Arial font" or "I want all my menu boxes to be 200 pixels wide, have a blue border, and hang out on the right-hand side of the page".

Your CSS contains all the information about the presentation parts of your page - it's what makes your page look pretty. Most of the time it's kept apart from your normal HTML, and very frequently it's kept in an entirely separate file.

This might seem strange and unnecessary, but it allows you to do one very cool thing: you can create one CSS document and use it to style your entire website. This means that if you ever want to change what color your headings are, you don't need to go through and edit every single page of your website - you just change one little line of code in one file and every page will change, a fabulous time-saver.

CSS is somewhat different to HTML, but don't let this intimidate you - CSS isn't overly fussy about the way you write it, as long as you follow a few basic rules which are fairly easy to learn. To begin with, your CSS can live in three different places on your website:

Most useful: external style sheet

As mentioned, your CSS can live in an external file. In this case it lives outside of your page and can be used to control all the pages on your website. This is a file with the extension .css, and information inside it will look like this:

h1 {color: blue; font-weight: bold;}
h1 span {color: red;}

If you wanted to, you could copy that text above, paste it into Notepad, save it as something.css, and you would have created a CSS file – it's as easy as that!

Moderately useful: Embedded

This is where you create your CSS at the top of your web page, in the <head> section. This is useful when you're first creating a page and you don't want to be hopping between pages while you're still working on it. You can then pull it out and put it in an external stylesheet later. You can also use it if there's a style on the page that you're never ever likely to use on another page, and you don't see the point in making every page load that one style all the time. An embedded style will also override a style in the external style sheet, so you can use it for exceptions.

Embedded styles look like this:

<style type="text/css">

h1 {color: blue; font-weight: bold;}
h1 span {color: red;}

</style>

Least useful: Inline styles

This is where you specify the style for every single thing on your page. To do our heading, you might go like this:

<h1 style="color: blue; font-weight: bold;">Who Else Wants To
Learn How To Make Mouth-Watering Apple Pies,
<span style="color: red;">Right Now?</span></h1>

This is a bad habit to get into, since if you ever want to change your page you'll have to go through and change every single one of these tags. It's also going to bloat your code horribly. The only time when you might want to use this is for super duper exceptions, since an inline style will override both an external and an embedded stylesheet style.

The bad news is that many WYSIWYG editors will fill you code with inline styles like this unless you learn how to create stylesheets properly with your particular software. Look for tutorials to show you how.

The beautiful thing about CSS is that you can use it to style pretty much anything. Every single part of your page can be used as a "hook" to peg a style on. You can say that you want all of your H1 headings to be blue, italic, 18 pixels tall and indented 30 pixels from the right margin. You can make it so all your links have a fancy floral background that turns into a striped background when someone holds their mouse over the link. If you don't want ALL of your links to have that background, you can just add a "class" to all the links you want floralized. Only links with the class of "floral" will have the background.

CSS can be pretty good fun.

To help you shape and design your page with CSS, there are a couple of "wildcard" tags you can use on your site: The span tag and the div tag.

The "Span" tag <span>...</span>

The span tag is an "inline" wildcard. Imagine you had a big heading in red text. You just want two words of the heading to be in a different color... what do you do?

You can simply wrap those two words in span tags, like this.

<h1>Who Else Wants To Learn How To Make Mouth-Watering Apple Pies,
<span>Right Now?</span></h1>

Now you can create a rule in your CSS to say "all spans inside a H1 tag should be red!".

h1 span {color: red;}

Or you could create a separate "class" inside your CSS, saying that anything with the class of "highlight" should be colored red. Then wrap your two words in a span with the class of "highlight".

.highlight {color: red;}

<h1>Who Else Wants To Learn How To Make
Mouth-Watering Apple Pies, <span class="highlight">Right Now?</span></h1>

The Div tag <div>...</div>

A "div" is short for "division". It's like the "span" in that it doesn't actually mean anything itself... it's like a wildcard, or an invisible box that you can give a background color, a border, move it to the left or right of your page, give it a background image... whatever.

Divs are one of the most useful tags you will use on your page. You can use them to say "this section is the menu" or "this section is the article" and then you can style and move those sections however you like. You can distinguish your menu div from your article div by giving the div a class, just like we did before in the heading.

<div class="menu">
(put your menu content here)
</div>

<div class="article">
(put your article content here)
</div>

Your CSS allows you to do all sorts of things with those two boxes.

div.menu {
float: left;
width: 200px;
border-width: 2px;
border-style: dotted;
border-color: red;
}

div.article {
float: right;
width: 500px;
text-align: justify;
}

You could make my menu sit on the left of the page, while my article sits on the right. You could make my menu 200 pixels wide and my article section 500 pixels wide. You could give my menu a very tasty border that is two pixels wide, dotted and red, and you could make my article text easy to read by justifying it.

Tables

Now that you've met the div and span, we're going to step back into the last century and talk about that other infamous structure on your average webpage: the table. CSS used to be very problematic (with support ranging from broken to non-existent), so tables were the structural tool of choice for web designers, despite it only being intended for displaying tabular data.

These days its much better to use divs and CSS for this purpose, but a lot of people have trouble getting their websites to display the same way in different browsers using divs and CSS (see the our discussion on Doctypes further down the page) so they fall back to the ever-reliable table.

In reality, although web designers will bleat on about the evil of tables, a table or two isn't going to kill your website, or completely destroy your chances of succeeding as an affiliate. When you become more experienced with your website building, it is worth devoting a little time to learning how to become table-less, but in the meantime, this is the worst you're likely to suffer by using tables:

  1. It will bloat your code a bit and make your page slower to load. This can affect your "bounce rate" (which is the number of people who just hit the back button after clicking through to your page from a search engine listing) and may thereby affect your search engine ranking. However, unless your code is really, really bloated, this effect is likely to be pretty insignificant - the average table doesn't add much more than a couple of kilobytes to your file size.
  2. It will be difficult to change your layout later, particularly since you will need to go through every page on your site to edit the tables. This ranks pretty high on the "pain in the butt" scale, particularly if you have many, many pages.
  3. It may put less important parts of your page at the top of your code, which could affect a search engine spider's understanding of your page. For instance, if you have a left-side menu on your page, and you're using a table layout, your menu will appear first when the search engine reads your page. Too bad if you wanted your article and keyword-loaded heading to be the first thing it read...
  4. Lastly, you'll lose serious coolness points amongst other web designers, but this is probably of little concern to you as an affiliate!

Let's see what a table actually looks like:

<table cellspacing="0">
  <tr>
    <td>Content</td>
    <td>More content</td>
  </tr>

</table>
  • table: Opens the table. You can specify things like widths and cellpadding in here, but that's better left for the CSS to do. You do need to specify cellspacing, since there's nothing that correlates to this in CSS. Different browsers have different ideas on how much cellspacing should be the default amount, so it can really throw your designs out if you don't zero this in every table.
  • tr: Is a table row. It runs horizontally across the page. When you want a new row you need to close your first <tr> with a </tr> and then open a new one.
  • td: Is a table cell. TD is actually short for "table data", since it's the only part of the table that can actually contain data. You can't put any information in the <table> or the <tr> tags, unless it's in a <td>...</td>.

You can see how creating tables can seriously bloat your code. Simply to create a single-celled box, you need to write all this:

<table cellspacing="0">
  <tr>
   <td>
     Here is what I wanted to put in a box!
   </td>
  </tr>
</table>

Whereas using a div you can simply go:

<div>
Here is what I wanted to put in a box!
</div>

Multiply this by however many "boxes" you think you need in a website, and things can get pretty nasty.

Doctype:

The last element of the page we're going to discuss now might seem a little confusing, abstract, and downright geeky, but it can have a real impact on the way your page displays. It's also the reason behind many "Oh, I can't get my page to look right!" complaints, so it's a good thing to be aware of.

The doctype is the very first line in your page and, traditionally, has looked like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

This is a doctype. "Doctype" is short for "document type declaration" and it basically tells the browser which type of HTML or XHTML you've written your page in, and which rules you have obeyed or ignored. Have you closed all your lower-case tags? Are all your values enclosed within quote marks? Are they correctly nested as well?

By setting your doctype you give the browser a benchmark against which to understand your page. It tells the browser to render your pages in standards-compliant mode, which makes them less susceptible to the various whimsical differences between browsers. This means you can be more confident with your design, and spend less time working on hacks to get things to display the same way in Firefox and Internet Explorer. (And Safari, and Opera, and so on.)

Without a valid doctype, your page will be rendered in "quirks" mode. The browser assumes you don't know what you're doing, and tries to render your page in the most backwards-compatible way, which can wreak havoc with your carefully crafted design. This is why so many aspiring affiliates have difficulty getting their designs to look the same in different browsers - each different browser is bringing its own set of rules to the table and is trying to understand your page in the way it knows how; and, of course, they all understand it differently.

There are quite a few different doctypes. If you're brand new to web design, the one you should probably be using is the HTML 4.01 transitional doctype.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

If you've been doing a bit of web design and you know how to check whether your HTML is valid or not, try moving to the strict doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Also, if you're interested in keeping up with the times, keeping things simple and are otherwise not too concerned about older browsers understanding your document, you can now use this simple doctype:

<!doctype html>

When you're specifying your doctype, be careful that you're actually specifying it correctly. Many HTML editors do half the job of specifying a doctype, but don't actually include the full address where the specifications of the doctype are kept.

Lesson Summary

Hopefully by now you've got a reasonable idea about what HTML looks like, and you can peek into the source code of a website without being completely confused! In this lesson we took a look at:

  • CSS (Cascading Style Sheets)
  • The span tag
  • The div tag
  • Tables
  • The doctype

 

Learn something new? Share it with your friends!

 


Questions & Comments + Add a comment

Reply Fiona Wilson420 days ago
One question i do have is what happens if i don't put in a doctype thing into my website what happens to it?
Intermediate

Don't forget to follow us!

More topics

Essential Resources Every New Affilia... New to affiliate marketing? Not sure what it's all about? Then let us get you started!
Affiliate Outsourcing No one person can do everything on their own. Learn how to reduce (or even eliminate!) your workload with outsourcing.
Site Building As an affiliate, chances are you'll end up building a website or two. Here's your basic quickstart!
Marketing Ideas Needing inspiration? Wanting to go outside the box? Take a look in here for your next few marketing ideas!
Market Research for Affiliate Marketers To be a successful affiliate you must learn how to research their market before dedicating your precious time.
Pay Per Click Pay-per-click is one major method affiliates use to get traffic. Learn what it is and how you can use it effectively!
Search Engine Optimization Search engine optimization (SEO) is a major way of getting traffic to your site at minimal cost! Learn how to put it ...
Content Creation This section is all about content: How to write it, how to get it written for you, and other useful goodies!