To answer the question above, you first have to understand what the internet is. Unlike our Universe, there are answers. Optimizing techniques and practices may be all in theory, but if your website is in the top three natural search listings, then you’re doing something right. If it’s not, you need to consider a full redesign and reimplementation of your html structure.

Now for some metaphor to put search engines (i.e. Google) into perspective;

Think of a mass of some sort with thousands of millions of tentacles. These tentacles go to the edges of time always stretching and dipping into crevices and spaces hunting for data. It is this data that is content or information. Your website is one of these areas that the tentacles want to explore and feel around picking up the information you are providing assuming it has some value to the growth of the mass that the tentacles are going after. However, your channels must be clutter free and open.

A poorly optimized website is similar to a stuffy nose. Difficult to breath, but the mouth cannot smell. Therefore, you miss the fragrance of the rose garden as you walk through. A properly designed and constructed website has these channels free for the tentacles (or bots) to reach your content.

The most useful tool is Firebug which is an extension for Mozilla Firefox. This tool allows one to inspect a web page to see all the selectors and their values. So if you are curious about how a site is designed, Firebug is the key to this rather than looking at source code. In conjunction with that, I also have Web Developer Tools available for some other web developer inspection tools.

These tools are paramount in finding style and foundation information for websites that are created with DHTML. It is also a great way to test things, allowing you to change attributes and see what happens, live without refreshing or wasting any time. I highly recommend using Firefox just for these reasons, what more do you need?!

The second part of this post is in consideration to what I am using at this very moment. WordPress.com and WordPress.org is an amazing application that allows one to create a site from a pre-made template which is fully customizable. It is a great way to learn how to stylize things and how PHP works. I recommend starting your own blog to see how it works, and if you know what you’re doing, attach this onto a personal site. The power of WordPress is definitely impressive.

Raw shot before editing.

My process goes as follows;

1. Crop
2. Transform > Warp
3. Levels
4. Color Balance
5. Rubber Stamp (wicked highlights!)
6. Hue / Saturation
7. Dodge

Edited image ready for web.

It’s a sure sale! Check out the other amazing ceiling panels we have available … you’ll be sure to fall in love with this stuff. 

*Please understand that these lessons are not coming from a guru by any means. I am simply sharing with you my knowledge. I am not saying I know everything, but I do know what it takes to create successful websites.

When browsing the internet, you may come upon websites that are of interest to you. I define the creation of websites into two things. One is a flash site which is completely different then what we are doing, the second is DHTML based websites which we are doing.  When you are viewing the website of interest, take a look at how it is created by viewing its source code. All browsers have this option in the toolbar. If you use anything you find, be appropriate and include a comment in your header.

So lets get busy: First we must discuss Rules.

When starting off, you must understand the idea of selectors. A selector is the thing (element) that is associated (linked) to a particular style. For example, if I wanted all my headers to be Red, I would do this;

h1 {
  color: Red;
}

There are different types of selectors. The first is a Class selector, the second is an ID selector. A selector can have different classes which allows for the same element to contain different styles. For example, if you have two paragraphs on a page and you want them to have different colors you can do something like this;

.one {
   color: Red;
}
.two {
   color: Blue;
}

The above signifies the first paragraph having red text where the second paragraph would have blue text. So to understand classes, we are affecting the <p></p> tag in both instances, but applying specific styles to two different selectors allows us to specifically change things without effecting the actual HTML within the page by just adding a class name to the paragraph or whatever element we are working with. The HTML would look like this;

<p><span class="one">This is my example</span></p>
<p><span class="two">This is my example in my other paragraph</span></p>

Another way to do this could be;

<p>I want to effect multiple sentences within the same paragraphy
changing <span class="one">the color to red here</span>, and then
changing <span class="two">the color to blue</span> here.</p>

Both those examples are acceptable and work properly.

Click here for Teaching HTML and CSS [#8].

Inside your <head></head> area;

<style type="text/css">

  body {
    color: purple;
    background-color: #cc0000; 
    }
</style>

The above copy shows that I want the text to be purple and the background of the body of the page to be hexadecimal value red. It is important to separate css from html. Many programs (Dreamweaver, GoLive, etc.) put ‘inline style’ in the html which makes it a tedious task editing later. Once you set up your styles either in your header section or in a linked style sheet, you can edit it once and your styles for everything that is defined will be updated. 

The above example shows your style in your header, although you can create all your styles in a separate css page. This is called an external style sheet. First a page needs to be created with an extension of .css (name.css), and put into the appropriate section of your server. Inside the header section (same place as if you put your <style type=”text/css”></style> section);

<link href="name.css" rel="stylesheet" type="text/css">

Placing that code above in each of your pages will control the styles across the entire site once more material is added and you use the same tags throughout. This makes editing super easy and keeps things very organized.

Click here for Teaching HTML and CSS [#7].

Without jumping into the use of stylization and CSS (Cascading Style Sheets), I would like to introduce tables. This simple structure allows content to be placed in cells (tag: td) which are part of rows (tag: tr) and columns (col). Below is a simple table, below is the code.

<table border=”2″ cellspacing=”10″ cellpadding=”10″>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody></table>

I would urge you to play with this in your page and see what works and what doesn’t work. You must have the same amount of cells in each row in order for the page to not break. If you want a row that has a different cell count, you would simply add a colspan as shown below.

There are other attributes that you can set within the cells themselves, not just the table as a whole. If I want a cell to have its text centered for example, I would write;

<td text-align=”center”>All my text would align center</td>

Granted, there are many other things that you can do with tables, the above gives you the basic idea. I may come back here and add things, but I feel we need to move on. You should play with a table or two and see how it works. Putting a table inside a table cell is called nesting, and sometimes is necessary, but please do not be dependent on tables for your layout. There is something much more interesting and exciting in the next post!

When I started developing websites (or attempting to at least!), I was taught by someone I rather not expose here to use tables for my main layout. Well, times are chaning, quickly, and I can tell you that tables are best used for straight data … not layout and design.

Click here for Teaching HTML and CSS [#6]

To be good, you should write in Notepad or a simple writing application. To be efficient, you should use something a little more intuitive.

Listed are programs I recommend downloading:

1. Aptana Studio [http://www.aptana.com/]
   A bit bulky, this free editor (Mac & PC) allows you a multitude of ways to keep your file structure compatible with your server area. Easy to synchronize both file structures within your computer and server. There are a lot of options and I think it might be best for separate posts just for using this thing (but there’s also the help section within the program itself).
2. TopStyle Pro [site]
   This PC program is not free, but it is a favorite of mine. It is not huge and has all the features one needs to edit and implement. I do not synchronize TopStyle with FTP, rather I upload using an FTP program.
3. TextMate [site]
   This is a Mac program and is not free. It is a favorite amongst my Mac friends.

If you are working with a program that does not have ftp built into it, you will need to use a separate program for this task.

What is FTP?

FTP stands for ‘File Transfer Protocol’. It is the way in which one goes about sending information to and from ones computer to the server, vice verse. There are a few other protocols, one being sFTP, which is a “secure file transfer protocol” and is good practice to use.

FTP Program listings (shortened);

1. Filezilla [site]
   This free FTP program for PC is best in my opinion. I was using SmartFTP which is great but is no longer free. I do give money to Filezilla as they ask for donations.
2. CyberDuck [site]
   One of the only free Mac FTP programs that I know of and am familiar with. It gets the job done although not as intuitively as the ones available for PC users.

If the editor you use does not have an FTP setup, all one has to do is drag and drop files from your computer into your FTP program. It’s as simple as that.

To read part 5, click here: Teaching HTML and CSS [#5]

Most used syntax in html:

• When creating a paragraph or sentence or even a word, you must use the <p></p> tag. For example, when I am constructing this very line, the html is putting <p>these funny p’s in open and closed brackets</p>.
• When creating a link, specifically to another webpage, I have to write this:
  <a href=”http://thewebsite.com”>Go to my website</a>.
• When creating a header that is in bold, something to show some hierarchy, I would put it in a header tag (there are multiple header tags that run something like this:

  • <h1>header 1</h1>

  • <h2>header 2</h2>

  • <h3>header 3</h3>

There are many other tags that you will need to know and implement when constructing your page. These things will become memorized the more you use them. Some simple text formatting is listed below;

The html page layout goes as follows;

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<HTML>

<HEAD>

<TITLE>the title of the page</TITLE>
<META (we’ll discuss this meta stuff later)>

(scripts go here, but that’s for later.)

</HEAD>

<BODY>

<p>Your content goes in the body.</p>

</BODY>

</HTML>

To read part 4, click here: Teaching HTML and CSS [4]

Its called the Document Object Model, or DOM, and is what one needs to be aware of when creating content in any type page. It is the official “standard for representing structured documents in a platform and language neutral manner,” w3c.org .

Eh, yeah, so now that you know exactly what it “is”, lets discuss what it … is.

The space in which you organize your information in order for things to receive information, and do whatever you tell it to do. I view it as one piece of blackness in the vastness of the internet universe.  Being that there are multiple types of html pages (versions and compatibilities), the doctype defines the page in a “machine-readable language specifying the information of a type of HTML”. You must set the doctype in order for your page to be viewed and function properly.

These are the ones we need to know;

HTML 4.01 Strict, Transitional, Frameset

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

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

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

[source]

The one that we will be using is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

It will comply with all major web browsers and allow us to write what we need. This snippet will go at the extreme top of the page, first thing with nothing else.

To read part 3, click here: Teaching HTML and CSS [3]

One motto I keep saying is, “The more I know, the less I know,” which stands true for most things in life. When setting up my circulum, there are obvious constants that I know I will be implimenting into my teaching.

1. Basic structrure of the page.
2. What a meta tag is and how it works.
3. Using titles and attributes.
4. Tags, naming conventions and appropriate uses.
5. Hierarchy in the page layout.
6. How to implement content correctly.
7. Using images and the different image types.
8. The wrong way to write code.
9. The right way to write code.
10. Using an FTP program.
11. Publishing the finished page online.
12. Checking for browser compatibility issues.
13. Linking and the good / bad aspects of such.
14. Proper design and navigation.
15. Explaining how content is king (over design).
16. How proper design works on the internet.

There are many more to add to this list, although this is a good start. As I progress I will create more posts on this subject, journaling my progress as well as my “students”. I always learn when teaching others, so this will be a great experience. Wish me luck!

Necessary ‘cheat sheets’;

• HTML Cheat Sheet
• CSS Cheat Sheet

The best resource for learning html, css and any other web syntax and knowledge.

• World Wide Web Consortium (w3c.org)

To read part 2, click here: Teaching HTML and CSS [2]