There’s a secret that many web designers don’t want you to know, it’s that there’s no cost to building a website. In fact, you don’t even need special software to do it, everything you need is already installed on the most basic computer available today. In order to build a website, here’s all that you need:
- On a Windows computer – NotePad
- On an Apple Macintosh – TextEdit
Now that you have all the tools that you’ll need to build a web page, you need to understand a few things about building web pages.
How to Format a Web Page
Web pages are divided into two specific areas, the <head> and the <body>, each of these two areas does something specific and before you can build a web page, you need to understand the basic purpose of each section.
Setting up Your First Web Page
For a web page to be recognized by a web browser (the software application used to view a web page) we first need to tell the browser that our document is an HTML document. To accomplish this, all we need to do is place the code <html> on the first line of our document followed by </html> on the very last line of our document.
Once those tags are in place, most web browsers will understand that the content being displayed is an HTML document. I say most because technically, there is a bit more that you should put in there if you want to ensure the site is 100% compatible with all modern web browsers, but explaining the fine details of DOCTYPE structure is a little beyond the scope of today’s tutorial. Needless to say, placing the tags <html> and </html> will tell web browsers what your document is but if you’d like to technically perfect, place the following code instead:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
</html>
Once that’s done, remember that all other code must be placed between the two <html> tags to be recognized as valid HTML.
The <head> Section
The <head> tag of a web page is the reserved for things which other computers and software applications require to understand your web page properly. For example, when a web browser loads your web page there are specific things that it looks for in order to understand what language your site is in, what your web page is about and the name of your page. Within the head section, we want to include details such as:
- Links to alternative content such as RSS feeds, XML site maps and mobile interface files
- Javascript links and or content to help the functionality of our page
- META data for robots to read including a page description, keywords and generator
- Cascading Style Sheet (CSS) details or links
- The document content type
- Codes and robot commands for foreign applications
- Pingback processing directives
- The web page icon file location
- Canonical labels for search engine optimization
- Base directory directives
- The title of your document
Sounds like a lot right? Well it is, and it’s all very important stuff. Essentially, the <head> section of your web page stores all the mechanical and client side information required to properly index, label, categorize and distribute your web page as well as the information needed to successfully display your web page in a users browser. I could write a whole post on each of the items above but for now, it’s simply important for you to know that the <head> is used to store those pieces of information and you can add them at a later date.
Adding data to the <head> of the document is done the same way as all elements of an HTML document, by opening and closing an HTML tag. In this case, the <head> tag must be opened and later closed </head> in order to store the appropriate content. Between those tags, you may store a series of HTML or xHTML (we’ll talk another day about the differences) data devices for use in rendering your pages. For example, here is a basic <head> element for a common web page:
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
</head>
You will notice that in this basic example we only store the basic information required to make a web page work, the
http-equiv which tells web browsers that the document being served is in
text/html format (as opposed to
text/rtf which is a Rich Text document or
text/javascript which would be a JavaScript file) so that the web browser looking at this document understands it is an HTML page.
Additionally, the <head> contains the <title> tag which closes (</title>) after labeling the document
Untitled Document.
If you loaded the source code into a web browser, you would now see a blank document with no content displayed to the user but a new title at the top of your browser, labeled Untitled Document. This document title is the label being fed to the web browser from the <title> tag contained within the <head> of this document.
The <body> Section
If the <head> of a web page is the content being presented to other computers, then the <body> is the content being displayed to human eyes (or text readers) visiting your web page. Creating content on a web page is wonderfully simple. If you’d like to have a web page say hello, simply add the code:
<body>
hello
</body>
Presto! You now have a fully functional web page, albeit a little dull. The <body> section works by displaying exactly what you type as content, so anything (and everything) you add between the two <body> tags will appear on your web page but you have to be careful, HTML needs the content marked up (labeled) to be properly viewed in a web browser. Just in case you didn’t know, HTML stands for HyperText Markup Language, a Markup Language is simply text that’s been formated to be read by computers. For example I can create my own Markup Language right now called Chris Ross’s Markup Language (CRML) that looks like this:
[-open-]Hello World![-close-]
Now I have my own Markup Language but since nobody uses it, it’s pretty much useless. On the other hand, everybody with a web browser uses the HyperText Markup Language (HTML) so let’s look at it. HTML has a handful of common codes used to display content effectively, they are:
- <p>, always followed by </p> which displays text in paragraph format
- <br>, which never has a </br> but instead is written <br/> in xHTML and represents a line break (where a paragraph is often displayed as two line breaks to separate content)
- <ol>, which always needs a </ol> for ordered lists (numbered lists) and <ul> with a </ul> for unordered list (bullets), both also require <li></li> tags for each list item in the list to work
- <b></b> or <strong></strong> tags mark text as important. The <b> tag was replaced with the <strong> tag a few years back since not all languages bold words to make them more important
- <i></i> makes a word italics but like the <b> tag, was also replaced. These days, you can use <em></em> to place emphases on a word or phrase
- <h#> tags are special and always need an corresponding </h#> tag where the # symbol can be replaced with the numbers 1 through 6 (<h1>,<h2>,<h3>,<h4>,<h5>,<h6>) which represents the level of a header in your document
- <img /> will allow you to place images in your document but requires special parameters we’ll talk about another time
- <a> followed by a </a> tag will hyperlink the text between the tags to another document but also requires special parameters.
- <table> tags can be used to display tabular data (like charts) on a web page. It needs to end in a </table> tag and can include headers (<th></th>), rows (<tr></tr>) and columns (<td></td>). Why columns are <td> is beyond me, but that’s what they are.
- <div> tags use a closing tag of </div> to divide content into various areas of a page, much like the <span> tag, the <div> tag has no visual effect on content but is used by programmers and designers to affect content.
Essentially, the ten tag structures above represent the HTML code found in every single web page on the planet. There are other tags, but have either been replaced or are simply bad tags. For example the <u></u> tag will underline content and the <blink></blink> tag is simply wrong … even the creator of the tag, Lou Montulli (it’s odd to think somebody actually invented a tag eh?) appears to wish it would simply die.
When put together, the <html> document label tells a web browser the information is a web page, the <head> indicates content reserved for other computer systems to read, while the <body> shows content to the end user.
In total, the 26 tags here represent the whole of the content required to build your own web site for free. If you’ve found this post at all useful, please feel free to leave me a comment below, thanks for reading.
![Whitby Harbour HDR [1]](http://farm1.static.flickr.com/53/111677749_cd2525273b.jpg "20 Awesome Photos of Canada photo")
![Burleigh Falls - December 2005 [3]](http://farm1.static.flickr.com/42/79961708_03766dd0ff.jpg "20 Awesome Photos of Canada photo")
Mar
2009
25 Things to Do to Increase Your Website Traffic Right Now
Everybody wants to be successful on the Internet right? Of course we do, nobody want’s to be sitting at home on prom night especially when there’s money involved so how do we do it? Well, here’s a list of 25 things you can do right now to increase your website traffic …
Make Your Content Accessible
Use the SEO Checker I built to see what Google can see. This tool will also help you understand what visually impaired people in your community can see … they make up almost 10% of the population, so can you really afford to only appeal to 90% of the market?
Use Valid xHTML Markup
xHTML is the language web pages should be built in. If you write your page in sloppy code, it’ll be harder for web browsers to display it properly so just like a Word document, you have to save it in the right format for your audience to read it.
Translate Your Content
thisismyurl.com is available in 20 languages, 40% of my traffic comes from outside the US and Canada and is viewed in a language other than English using a free online translation service, I know it’s flawed but it’s the best I can offer and people learn from my postings.
Understand Keywords
Keywords are the heart and soul of the Internet, they’re like fresh pasta in Italian cooking or eye shadow to drag queens … if you don’t understand the value and application of keywords, get off the Internet.
Build Relationships with Other Websites
Almost half my traffic comes from Google, the other half? Came from other websites and referrals from great people that I taught something to and in turn taught me a lot.
Add a Google Sitemap
Google want’s nothing more than to know about you, it’s the companies only goal in the universe, so help them to help you.
Help People
Speaking of helping, help people. When you see a website with an error or run into a problem on a site, let them know. If you can fix a glitch, tell them how … I’ve picked up countless readers and sources of inspiration by simply being supportive.
Use Analytics
Back to Google for a second, they have a tool called Google Analytics. It’s free, it’s powerful and it’ll help you understand your audience.
Join Social Networking Sites
Websites like LinkedIn and Facebook are powerful tools to help people. Helping people leads to trust, trust leads to prospects and prospects lead to clients.
Add Fresh Content
Ask yourself, why do people come back to your boring old stale content? They don’t. If you ran a restaurant you’d have daily specials right? Well I think running a restaurant is easier than running a website, so make sure you have fresh content served daily.
Know Who’s Better Than You
There are a lot of web sites out there that are better than me:
Know who’s better than you and read them every day. The best way to learn is to know you need to learn. (btw, if you didn’t make the list don’t be sad I have hundreds of sites I read every week, these are just the first ones I though of)
Respond to Criticism
There’s a lot of things that I write on my blog that are not as well researched as they could be, and when I’m corrected I love it. You’ll notice if you pan through my comments that I don’t remove the negative … in fact I relish them. If people take the time to point out your flaws, thank them and you’ll grow.
Write Good Content
The best way to build traffic to your website? Make people want to come back. It’s harder to get new visitors than to keep your old ones.
Be Timely
Write about things that you know will be timely but don’t chase trends, it’s not relevant what others are writing about … only what your readers are reading about.
Get to Know Yourself
The past five months of blogging have taught me a lot about myself, I look back at some of the early pieces I wrote and know that I’ve changed. That’s part of what blogging is, it’s about growing not only as a business but also as a person and learning new things.
Make your Title Tag Valuable
Your title tag is a critical piece of the organic marketing puzzle, if you don’t understand how or why to use it properly … excuse my french but vous êtes vissé.
Add an RSS Feed
I don’t care what type of business you are … if you can add an RSS feed to your web site do it! Let people know what you’re up to if they want to know. Same goes for Twitter, use it to exploit your interests.
Give Stuff Away For Free
I love giving things away for free. I have website templates, plugins and artwork people can download for free as well as over 600 pages of advice here on my website. Guess what? It cost me nothing and it put me on Alexa’s radar without having to do anything complicated.
Respect Your Audience
There’s only one thing more important then you on your website, your audience. Take time to get to know them and help them.
Know Your Goals
Why do you own a website? You’d be surprised how many people have no idea why they want to run a website … it’s a little sad really.
Use a Content Manager
Websites that are build on a content management system (I use WordPress) make it easier for people to update their websites. Websites that are updated more often get more traffic.
Read Matt’s Articles
Matt Cutts is Google. Actually he’s not but he’s the face of Google, the man who talks to all of us and tells us what Google is thinking, explains what they’re up to and helps lowly web masters to interact better. His job … to help the public make the most of Google, so why don’t you read his blog?
Join Forums
Forums are a great place to generate free traffic to your blog. They help you build relationships with other bloggers, build respect in the community and get into endless conversations about topics that interest you.
Comment on Other Websites
One of the most overlooked methods for building traffic to your website is to simply comment on other peoples websites. Remember my point about helping others? Point out flaws or add to the conversation and you’ll be generating great traffic back to your website.
Analyze and Adapt
Finally … the most important point … look at your analytics often and improve your website to help your audience make the most of your content.
Tags: advice, analytics, blog, building, comment, content management system, content manager, Facebook, forums, google analytics, html, Learning, lorelle, matt cutts, organic marketing, Plugins, search, templates, translate, web browsers, web master, web masters, WordPress
Posted in Marketing Advice