Posts Tagged ‘html’

Five simple things I did to increase traffic to my website.

When I started thisismyurl.com I didn’t have a loyal base of visitors, in fact I barely had a trickle of traffic. For the first month, I only received a couple visitors each day but now, five months after launching my website I receive a few hundred unique visitors everyday. Still not huge numbers but it’s a start right?

I follow five simple rules that I believe helped me build a successful website, five rules that everybody can follow.

  1. I posted simple, honest content. Most the content on my website is designed for people with little technical expertise who need to solve a problem. This is an easy way to generate traffic, find a problem and help people solve it.
  2. I posted content often. While I was building my website traffic I often posted content twice a day to help establish new visitors, then once I knew people had taken the time to read my posts I began posting less frequently but with more focus on content.
  3. I posted what people wanted. I spend a lot of time looking at the stats for my website and I know what articles people read and which are worthless. The articles people read inspire me to write more (better) content on similar subjects while the less popular posts are reviewed and improved.
  4. I posted different kinds of content. When I started out I made a lot of mistakes (and still do) but by testing different content styles, I’ve learnt the proper length for many posts and how to make them more readable for the audience.
  5. I posted what I knew about. Instead of trying to chase trends or break news stories, I posted content designed to help business owners make better websites, a lot of it is still pretty technical but it’s getting more ‘people’ friendly everyday.

What I’ve learnt over the past five months is that people love free stuff. My post popular page by far is Fundraising Thermometer Plugin for Wordpress a free plugin for WordPress designed to help charities display their current fundraising level. My second most popular post is another WordPress plugin called WordPress Plugin to automatically update the copyright notice., a simple post to allow the display of copyright details on a post. Other popular posts on my blog have been:

  1. How to center content with CSS and HTML
  2. No More Frames Plugin for WordPress
  3. Code Free Pong
  4. How to make awesome 3d icons in Adobe Fireworks
  5. How to create a reflective website image in Photoshop

As a website owner, the best way for you to increase your website traffic is to understand what people want and give it to them. This might sound like common sense logic but often times we as business owners (because my website really is a business) forget that serving content is about the reader, not the writer.

Happy five months of reading my website, I look forward to another great month writing.

Why are websites so hard to make?

Wow, I’ll tell you honestly that one of the questions I tend to get asked a lot (and drives people to my website) is Why is a website so hard to make? Actually, that question (or a version of it) accounts for a few unique visits every day so to help answer the question, I’ve explain a few of the reasons that websites are so hard (or expensive) to build.

First, the Web is inconsistent.

This is possibly the worse news for people just starting out, but it’s the horrible and sad truth. Web sites are nothing more than code, it’s not terribly complicated once you understand the basics of it but it’s still just a bunch of gobbly gook until it’s read by something else … and there’s the problem. Each ’something else’ is different. Web code is read by popular web browsers such as Internet Explorer, Safari, Chrome and FireFox but that’s only the tip of the iceberg because Internet Explorer has several versions in common operation today (versions 5,6,7 and now 8) which all display the web dramatically differently. 

Once you get past the basic issue of browsers, you need to think about operating systems. How many computer operating systems can you name? Obviously there’s Windows and Mac right? Great … except … you also have Windows Vista, Windows XP, Windows ME, Windows 2000, Windows NT, Windows 7 and Windows Lite to content with, Macintosh OS X Leopard and Macintosh OS X Pather. That’s got to be it right? Not so fast, what about Linux and Unix? There are hundreds of variations of computer based operating systems, each running one of a dozen web browsers for countless combinations but at least that’s all there is to worry about … except for handhelds (iPhones, BlackBerries, Windows Mobile Devices) and gaming consoles (Nintendo Wii, Microsoft XBox, XBox 360, Sony PSP, Sony Play Station 3) and TV based internet consoles … I hope that I’ve made my point, one of the reasons the Internet is complex to publish for is because there are too many “things” to publish for, instead we’re forced to practice failing gracefully.

The Web lacks a standard language.

Problem number two for somebody just starting out in the great big world of the web is that there is no standard programming language for the Internet. At it’s core, the World Wide Web is programmed in a language called HTML right? Everybody knows this, except it’s wrong.

The web is published in a language called xHTML which is based on HTML, but some people in the community didn’t agree with xHTML so they created other strains of HTML. As a result, we have HTML 1.x, HTML 2.x, HTML 3.x, HTML 4.x, DHTML, xHTML, xHTML 1.1 and xHTML 1.1 SE. Soon we’ll also have xHTML 2.0 as well as xHTML 5.0 … don’t ask.

Now, as we discussed above, there are at least a few dozen major operating systems and each of those has at least a handful of web browsers, plus a ton of mobile devices all designed to interpret some or more of the languages that the web is built on but it’s important to note that not all web browsers agreed on which standards are acceptable or for that matter which codes, structure, text or tags from any standard would be accepted. As a result, a web page developed to be viewed in Microsoft Internet Explorer 5 may (or may not) be visible in other web browsers including other versions of IE.

Scripting on the Web

Now, once you get past the basic problem of coding for some browsers while ignoring others and you pick one of the standards to adhere to, you’ve got to take the time to start writing more than simple content and for that you need what’s called a scripting language of which … there are many.

Most scripting languages such as PHP, Python, ASP, ASP.net etc. execute on the web server (where the website is hosted) but some such as JavaScript execute on the web browser after being downloaded (not to be confused with Java which is not a scripting language but a programming language and completely different). These scripts are what power everything from a simple email form to complex social media giants such as FaceBook.

After you’ve picked the scripting language you wish to use and ensured that it’s compatible with your hosting account (where you store your website for others to access it) you’re all set and ready to start building your first website.

How to handle it all

I’m lucky, I’ve been building websites since 1996 which means that in my very (very) long career I’ve seen countless technologies come, go and die. So my advice to people getting started in the industry is a lot like Benjamin’s in Animal Farm, Web Masters much like Donkeys know that times change but stay the same, simply pick your standards and be the best developer in that selected field. You will be mocked, scorned, insulted and ignored by others in the industry for your choices but in just a few years … everything you know will be outdated and you’ll have to relearn new tools anyways so don’t worry so much.

“Only old Benjamin professed to remember every detail of his long life and to know that things never had been, nor ever could be much better or much worse – hunger, hardship and disappointment being, so he said, the unalterable law of life.”

- George Orwell, Animal Farm,

What image format should you use on your website?

There is nothing more complex about publishing on the web than the concept of images, they’re quite possibly the hardest part of HTML for the general public to get their minds around so let’s take a quic look at what makes an image complicated and how we as web designers and publishers can approach them in a simpler way.

Image Format

The first step to web graphics is to appreciate that images come in dozens (or hundreds) of file formats from BMP’s to TIFF’s and everything in between but when it comes to the web, there are really only three formats for you to think about:
  • The CompuServe Graphics Interchange Format (GIF) format (pronounced giff)
  • The Joint Photographic Experts Group format, JPG (pronounced jaypeg)
  • the Portable Network Graphic file format, PNG (pronounced ping)
Close up of the GIF file format

Close up of the GIF file format

These three file formats encompass the entire spectrum of Internet based graphics. The first format, GIF was introduced way back in the very first days of computer graphics (1987) and allowed people to exchange graphic files via an online community similar to America Online (AOL). The GIF format was limited to 8 bits of color (255) with some reserved for core data. It was a loss-less graphic format ideal for the graphics of 1987 but could hardly produce quality photos.
The GIF format stores each pixel of an image as one of 255 possible colors resulting in a crisp image. The GIF format however also had a number of unique benefits such as the ability to have invisible (alpha) transparent  pixels which when place overtop of other colors would allow the backgrounds to remain visible and the capacity to store multiple GIF images in a single file as pages. When displayed in a web browser or other image viewing tool these pages would appear as animations similar to old ‘flip book’ style animations.
In 1992 the  Joint Photographic Experts Group created and issued the JPEG standard to the world. These days we tend to call the file format JPG since old Microsoft based computers could only hand three characters as a file extension but the format is also known as .jpg, .jpeg, .jpe, .jif, .jfif  and .jfi. The .jpg format was an instant success, it quickly addressed the primary failings of the GIF format by allowing 24 bit graphics (16.7 million colors) and smooth transitions between the these colors using a lossy compression method … which is a fancy way of saying the graphics blended together.
Lossy file saved as both 20% and 80%

Lossy file saved as both 20% and 80%

In effect, how the JPG standard worked was to rapidly reduce file sizes by averaging the color values of a pixel with those around it. This caused massive reductions in file sizes allowing photographers to post 500kb images in extremely small (20-100kb) files while controlling the loss of quality. To the right you’ll see an image saved at 20% quality to the left and 80% to the right, both the difference in quality and the method JPG uses to reach the results should be evident.

Before I go on, I want to pause and take note of a statement I made in the above description because I’m sure most people missed it or brushed past without much thought … the JPG file format was introduced to the world in 1992. This phrase is critical because it reinforces how much the world has changed in just 17 years. For those of you who are under 20 years old, you’ll most likely have never known a world without Facebook or YouTube but for the rest of us, we sometimes forget the Internet is for all purposes a fairly recent addition to the world. I’m 35 years old and I remember the first JPG photo that I saw, the introduction of this format changed the way we shared images over computers.  Notice that I said it changed the way we shared images over computers? There was no Internet, or at least not what you see today.

In 1996, Unisys became uppity and started threatening to sue over the LZW compression found in the GIF format so the world invented the Portable Network Graphic format (PNG), along the way the format improved upon most of the qualities of the GIF and lost the capacity for animation. The PNG format has 8 bit graphics similar to the GIF but also has 24 bit like the JPG and introduced a new level with 32 bit graphics. While it lacks support for animation, it includes transparant pixels like a GIF. Unlike a GIF, where those pixels can be on or off the PNG allows for alpha transparency making the format extremely flexible and also capable of compressing images. The problem with the PNG format, is that it produces large files.

export dialog What image format should you use on your website? image

So which is best? Actually that depends entirely on what you want to accomplish with the graphics. As you’ll see from the image above the file size of the graphic can range from ~25k to ~430k depending on the quality you’d like to achieve.  Photographers for example should use the JPG compression most often to ensure their images are strong, crisp and colorful while illustrators and others who work with line art will benefit from the GIF format. In the end, practicing and experimenting are the best ways to determine what you should be using.

A quick thank you to the Old Shoe Woman for posting the a wonderful photo Sunlight Under a Live Oak Tree on Flickr for me to use as part of this tutorial. 

Hyper linking in Dreamweaver

HTML is all about something called Hyper Linking. Actually, that’s what the first two letters of HTML pretty much stand for … Hyper Text Markup Language but what does it actually mean? Well, oddly enough us geeks are not all that tricky to understand, give us a beer mug shaped like Yoda’s head and let us string together a few acronyms and we’re happy.

Hypertext is text on a page that contains a Hyper Link

A Hyper Link is a piece of text or graphic which links to another document. When a user clicks the Hypertext, they follow the Hyper Link to the new document. Not brain surgery but I completely understand how most people would never need to know that.

Using Hyper Links in Adobe Dreamweaver is, for the most part dead simple. To insert a hyperlink into your Dreamweaver document, simply ensure you are in Design mode and select the text you want to make a hyperlink. Next, using the Property toolbar, type the website address you’d like to link to.

How to make a hypertext link in Dreamweaver

How to make a hypertext link in Dreamweaver

There are actually several things you can do with a hyperlink, called protocols. Most people only ever know about the http:// protocol (the Hyper Text Transfer Protocol) but there’s also a ton of other protocols people could use including the https://, ftp://, mailto://, gopher:// and of course the nntp:// protocol. If you have no idea what these are, congratulations … you’ll almost never need to care in your life unless you’re a hard code web developer.

Once you’ve added an http:// link using Dreamweaver you can also force the clicked link to open in a new web browser simply by adding the phrase _blank to the Target field of your property bar. There are a couple of other neat tricks with anchor tags people should be aware of, but to accomplish them we’re going to have to switch to Code view in order to see the following code:

[source lang="html"]<a href="http://www.thisismyurl.com">This is my Hypertext.</a>[/source]
In addition to the href value (where the click will go), you can also add:

  • accesskey to make the link a keyboard shortcut
  • class to assign a CSS class
  • dir (rtl or ltr) to make the text run right to left or left to right
  • id to make the anchor text have a proper name
  • lang to assign a language value
  • style to format the tag
  • tabindex to index the tab order for the link
  • title to assign a title tag
  • rel for the link relationship.

Of these I would recommend most links on a website have an href value to show where people should go, an ID if it’s a critical link, a rel for defining relationship values and the title for SEO value. Typically then, a link should look like:

[source lang="html"]<a rel="nofollow" title="My Great Website" id="mainlink" href="http://www.thisismyurl.com">This is my Hypertext.</a>[/source]

Absolute Paths vs. Relative Paths

One of the great debates in web publishing is the choice between using absolute paths vs. relative paths. An absolute path is one which is mapped completely to the final destination (http://www.thisismyurl.com/tutorials/placing-page-content-in-adobe-dreamweaver/) vs. one that is linked relative to the document you’re currently reading (../placing-page-content-in-adobe-dreamweaver/) the main advantage of an absolutely path is that it’s locked, while the main advantage of a relative path? That’s it’s relative … in the end, it doesn’t matter so long as the link works.

This tutorial is part six in a ten part series.
  1. Preparing a website in Adobe Dreamweaver
  2. Building your first Dreamweaver Template file
  3. Structuring your website with Adobe Dreamweaver
  4. Improving the common elements in Dreamweaver
  5. Placing page content in Adobe Dreamweaver
  6. Hyper linking in Dreamweaver
  7. Working with Images in Adobe Dreamweaver
  8. Adding Cascading Style Sheets with Dreamweaver
  9. Putting your website on a remote web server with Adobe Dreamweaver
  10. Adding Google Analytics to your Dreamweaver Template

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.

How to Secure Your WordPress Website

Running a WordPress website is one of the easiest ways to run a high quality, free web site content management engine but since there are millions of other websites running the same software, there are lots of bad guys out there who would like nothing more than to break into your website. So how do you stop them? In this article I’ll examine some processes your blog should implement to ensure it’s more secure than the ‘out of the box’ version of WordPress.

Basic Security

Plugin Directory

Step One of any WordPress security installation is to hide the contents of the plugin directory. By default, WordPress ships with the directory exposed (it can be found by typing http://[yourwebsite]/wp-content/plugins/) but this allows the bad guys to see what plugins you’re running and possibly take advantage of them. To solve this, simply upload an empty file named index.html or index.php into the base plugin directory.  Another very easy way to do this for your entire WordPress site is to simply add Options -indexes to your .htaccess file. This tells your web server to never list directory contents.

Quick Note: .htaccess files are funny things, they don’t have a filename in the traditional sense so when you download them, all you download is the extension (filename.extension). This can make working with them tough. What I like to do is rename the file -.htaccess or something similar before downloading it, which allows Windows computers to properly interact with the file.

Limit Access to the Admin

Step Two of the basic plan of attack is to limit access to your administration tool. An .htaccess file is a server level control file, meaning that it interacts with the web server before it interacts with a web browser, what we want to do is limit the IP addresses of computers to your wp-admin directory. Need a more basic explanation? Each computer on the internet has a unique Internet Protocol (IP) address made up of four numbers ranging from 0 to 256 for example, 123.456.123.456 this number reflects your unique signature on the Internet. What we want to do is control which computers can access your account.

To do this, first we need to know what your IP address is. Luckily there’s a website for that at http://whatismyipaddress.com/ which will tell you what your current IP address is. After you have that, create a new file called .htaccess on your desktop and add the following code to it:

AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName “Access Control”
AuthType Basic
order deny,allow
deny from all
allow from [paste your IP address here]

Once you upload that code to your wp-admin directory only computers from the IP address you specified will be able to access your WordPress admin directory. You can add multiple allow from lines to ensure you can access your site from work or home. If you ever need to access your admin panel from outside the IP range, simply comment (place a # symbol) before the deny from all line and you’ll be able to access it normally.

One final note here, since many people have dynamic IP addresses (they change whenever you reboot your internet connection) you might want to check with your Internet Service Provider to determine their IP range. For example, once you know that your IP address is always 142.167.66.[0- 255] you can use the allow from address of 142.167.66.* so anybody in your local subnet group (the last octal) can access your admin directory. A little less secure but still better than allowing the whole world to access it.

An Extra Level of Password Control

password protect directory 300x199 How to Secure Your WordPress Website imageJust like the .htaccess file can be used to limit access from specific IP addresses it can also be used to force a server level username and password check before prompting you to input your WordPress username and password. You can do this fairly easily if you’re hosting with BlueHost or if you’re using another hosting company you can create a secure login using an .htaccess file and .htpasswd files or the AskApache Password Protect plugin. This process is a little more complex but a great extra layer of security.

Change Your Admin Account

By default the most powerful account on your WordPress website is called admin, since everybody in the world knows this they only need to guess your password but if you change the admin account name, you make guessing both your username and password infinitely harder. One other point here, since your password is case sensitive (A and a are different letters) you should always use long, complex passwords that mix uppercase and lowercase letters, at least one number and if possible a symbol such as an ampersand (&) or dollar sign. The more complex you make your password, the less chance somebody will guess it.

WordPress Version

Some WordPress themes include a line such as <meta name=”generator” content=”WordPress <?php bloginfo(’version’); ?>” />  in the header.php file. While this is great for WordPress it’s a security blunder since you’re announcing to the world which version of WordPress your using and if it’s not the most recent … which security holes your website is vulnerable to. Simply remove this line from your header and you’ll be more secure.

 

WordPress displaying security issues

WordPress displaying security issues

The next step when it comes to security with regards to versions is to always upgrade to the most recent version promptly. I recommend upgrading your website (and your plugins) as quickly as possible after a new release has been updated.  You’ll see from the graphic to the right that my hotel web design company Getaway Graphics hasn’t had some of it’s plugins or base code upgraded in weeks, this is a major security flaw which could lead to hackers gaining access to my files. Luckily, I did this to demonstrate the potential flaws and the site is actually perfectly safe.

Always upgrade your website and your plugins to the most recent version after you have done a backup of your site files and data. As a bit of shameless self promotion, let me pipe in here that for a fairly reasonable fee, I can do this for you on a monthly schedule or train you how to maintain and monitor your website.

Secure Your .htaccess file

I think we’re now all aware how powerful the .htaccess file is correct? Great, so let’s secure it simply by adding the following code to the very bottom of the file:

<Files wp-config.php>
Order Deny,Allow
Deny from All
</Files>

This simple piece of code makes it impossible for people to see all the security customizations you’ve done to your blog.

Report Issues

WordPress is, at it’s heart a community project. If there’s something wrong and you discover it, send a bug report immediately so the team can fix security holes. This will make the software more secure both for you and the rest of the WordPress users.

Security Plugins for WordPress

Beyond the common sense security steps outlined above, there are several plugins related to security which every WordPress website should be running:

 

  • Login Lockdown – records failed attempts to access your WordPress admin panel. Frankly, if you don’t know people are knocking on your door … how do you know to protect it?
  • WP Security Scan – tests your website for common security holes.
  • WP Database Backup – backs up the content of your database regularly. Not really a security tool but it will allow you to restore to a previous version if you ever need to.
  • AskApache Password Protect – add a password to your wp-admin directory.

 

Other Great Sources

While I was putting together this article, I had help from some other sources on the net including:

One Final Note …

wordpress How to Secure Your WordPress Website imageThe steps I’ve outlined in the above article are all fairly straight forward and necessary to ensure a strong, safe WordPress blog but I appreciate some people simply lack the technical confidence to perform the steps effectively. I’m available as a WordPress consultant and can generally perform all the necessary upgrades to your WordPress website quickly, effectively and easily so why not give me a call?

How to build a free website

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

textedit 300x281 How to build a free website imageNow 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

basic html How to build a free website imageFor 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.

html with head How to build a free website imageAdding 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. untitled document How to build a free website imageAdditionally, 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>
html with body How to build a free website imagePresto! 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.

Using CSS to highlight a link

Now you know how to add a really cool hidden link in CSS but what about if you want to make certain links stand out? Just as easy

First, when you add a link to your website we want to assign a class to it like so:

<a href=’http://www.thisismyurl.com’ class=’standout’>

In my case, I’ve labeled this link with the special tag standout which will let me affect the appearance. Next in the CSS, let’s add a special rule for it:

a.standout {
/* this is what we want the normal link to appear as */
text-decoration: none;
font-color: #990000; /* (assuming you want your link blood red */
font-weight: bolder;
}

a.standout:hover {
/* when people mouse over the link */
font-color: #000000; /* (assuming your default text is black) */
cursor: default;
text-decoration: underline;
}

In this example, I’ve made the link red but still taken the underline away. I’ve put the underline back when you mouse over the link which calls extra attention to it and shows the user there’s something interactive with the link.

How’s it work? Pretty simple really, any time your HTML calls an <a> tag with the class standout, the CSS will be loaded and in turn change the appearance of your site to accommodate the new new.

Using CSS to disguise a link.

Sometimes on a website we want to link to another section for Google or other robots but we don’t want to distract our users with too many links, how do we do it? Cascading Style Sheets and a little HTML knowledge.

First, when you add a link to your website we want to assign a class to it like so:

<a href=’http://www.thisismyurl.com’ class=’noshow’>

In my case, I’ve labeled this link with the special tag noshow which will let me affect the appearance. Next in the CSS, let’s add a special rule for it:

a.noshow {
     /* this is what we want the normal link to appear as */
     text-decoration: none;
     font-color: #000000; /* (assuming your default text is black) */
}

a.noshow:hover {
     /* when people mouse over the link */
     font-color: #000000; /* (assuming your default text is black) */
     cursor: default;
}

As you’ll see since rules cascade from in a logical order, the text-decoration rule automatically applies to the hover state since it applies to the normal state but since hover states have their own color, we have to redefine it.

There you go … now you can put links on your website that nobody knows are there.

How to make a website look good in multiple browsers.

As some of you may have noticed over the past day or so I’ve updated the theme for thisismyurl.com, this has changed the overall look for the site but it’s also lead to a couple of interesting questions from some of you. As an example, one of my testers came back to me with a couple of screen shots and asked why the Shameless Self Promotion box to the right looked different in Safari vs. FireFox.

shameless both How to make a website look good in multiple browsers. image

The answer of course is that each web browser, while programmed to display the same content chooses how to display that content differently. When a web developer designs a website, the first thing that they must do is decide upon a starting point and work outward from there, correcting issues as they appear. In my case, the first thing that I do is program a website for Safari on the Macintosh and then after I have everything appearing exactly as I want it in the first browser, I test it in the next.

In my case, this is the order I build for:

  1. Safari for Macintosh
  2. Safari for Windows
  3. FireFox for Mactinosh
  4. FireFox for Windows
  5. Internet Explorer 6 for Windows
  6. Internet Explorer 7 for Windows
Now … some of you will point out that it’s a strange oder, considering first that Windows makes up more that 80% of the market and that Internet Explorer accounts for 50% of the traffic but to that I would respond you’re correct. However, I would also make a point of saying Safari is the most W3C compliant and, it happens to be what I use on my MacBook.  Building for one platform first means exactly that, I build for one set of rules first and then ensure the design is migrated to each of the other platforms only after I am happy with the changes to the first.
When you’re doing this, always remember to check that the edits you’ve done for later browsers does not have a negative effect on your earlier browsers. In my example above, for Apple Safari I used the following code to create my Shameless Self Promotion effect:
<div id=’shamelessselfpromotion’>
        <p><strong>Shameless Self Promotion</strong></p>
        <p>I’m a <a href=”http://www.thisismyurl.com/services/”>freelance web designer, web master and developer</a>. I build business solutions for the internet, consult on WordPress projects and help build better websites. If you’re looking for a helping hand, <a href=”http://www.thisismyurl.com/about/contact/”>send me a message.</a></p>
</div>
#sidebar #shamelessselfpromotion {
background-image: url(images/chrisross.jpg);
background-repeat: no-repeat;
background-position: 55px right;
padding: 0px 150px 0px 0px;
}
After viewing it in FireFox however, I had to edit the HTML and CSS to look like this:
<div id=’shamelessselfpromotion’>
        <p><strong>Shameless Self Promotion</strong></p>
        <p><img class=’alignleft’ src=’

http://www.thisismyurl.com/wp-content/themes/thisismyurl/images/chrisross.jpg

‘ alt=’Christopher Ross’ title=’Christopher Ross’/>I’m a <a href=”http://www.thisismyurl.com/services/”>freelance web designer, web master and developer</a>. I build business solutions for the internet, consult on WordPress projects and help build better websites. If you’re looking for a helping hand, <a href=”http://www.thisismyurl.com/about/contact/”>send me a message.</a></p>
</div>
#sidebar #shamelessselfpromotion {
width: 300px;
}
As you can see, the code edit was rather minor but needed to ensure the page was compatible in both FireFox and Safari, as a side benefit it also ensured the page was compatible with Internet Explorer and the Wii.

Placing page content in Adobe Dreamweaver

So far in the tutorial series of building a website in Dreamweaver, I’ve focused a lot on the Template including the header and footer elements but now I want to take a bit of time and look at the content area of a website. 

In order to understand how to build a website properly, you first have to understand some basics of Search Engine Optimization, or maybe you have to understand some basics of website publishing to be good at SEO work but either way, publishing web content and optimizing your web pages is interconnected.

A web page needs a specific structure, just like a book needs chapters and paragraphs so does a web page. Some people forget the first real use of the web was for academic papers, today the structure of a web document is still very connected to it’s origins and there are some pretty basic tags used to format pages. Let’s take a look at the basic building blocks of a web page and how to use them properly before we begin placing text in our documents.

Headings

xHTML allows for up to six headings on a page, each should be used in a hierarchal structure starting with the most important and proceeding to the lowest value.

 

  • <h1> – There should only every be one <h1> tag on a web page, the level one heading is most often also the title of the document and is extremely important both in standardization practices and search engine optimization
  • <h2> … <h6> – Used as hierarchal structure tags, the lower headings are used to identify the importance of each level of the document. <h2> contains content more important than <h3> for example
Lists
Web pages can also contain lists, as we saw in our earlier lesson about menus. Lists come in two flavors, each must contain list items (<li>) to be used correcty.
  • <ul> – An unordered list, most commonly presented with a bullet character (•)
  • <ol> – An ordered list, most commonly presented with a numbered value (1,2,3,…)
Paragraphs
The basic building block of a web page, the paragraph (<p>) tag defines a paragraph.
Example of a Page Structure
Because web page content is structured in a standard manner, we can demonstrate that structure in a simple document tree such as:
  • <h1>
  •   <p>
  •     <h2>
  •           <p>
  •           <h3>
  •                <p>
  •      <h2>
  •           <p>
  •           <ul>
  •           <p>
  •           <p>
This document structure demonstrates an easy to understand, mechanical overview of the document but also acts to help new web publishers understand that web page publishing and web page design are two different things, we’ll get to design later.
Working in Dreamweaver
Now that we have a basic understanding of how to create web page content, we need to write something for our pages. To save time, I’ll let you into another publisher trick. Using Lorem Ipsum to generate gibberish text for websites allows us to save time by filling in our content. Later, when we know what we want to place on each page we can go back and fill in the real text.
For now, pop over to the Lorem Ipsum generator and create five random paragraphs of text. Windows users will want to take an extra step here … when you copy text of the Internet, Windows tries to also copy the xHTML tags. Let’s get rid of the excess content:
  1. Copy the text from the Lorem Ipsum Generator
  2. Create a new Dreamweaver document (Control – N)
  3. Switch to Code View
  4. Select All (Control-A) and Cut (Control-X) it
  5. Paste the text from the Lorem Ipsum Generator
  6. Select All (Control-A) and Copy (Control-C) it
  7. Close the new document
What this did was created all the special codes, and leaves you with just the plain text.
Next, open the about.html file in your Dreamweaver File document and ensure you’re in Design View. Remember when we created the template we created an Editable Region named Content? In that area, Dreamweaver placed the word Content, now I want you to select the word and Paste (Control-V) the Lorem Ipsum text into place. This will replace the existing text on this page with the content from the generator.
format Placing page content in Adobe Dreamweaver imageTake a bit of time and format the text using only the text format tool on your Properties toolbar. This will allow you to apply <p> and <h1> … <h6> tags to your Lorem Ipsum text.
listitems Placing page content in Adobe Dreamweaver imageOnce you’ve got the hang of adding some <p> and <h1>, <h2> tags to your document, try adding an unordered list (<ul>) and some list items (<li>) to your page. Notice that Dreamweaver automatically creates the list items for you in an ordered or unordered list.
picture 6 300x154 Placing page content in Adobe Dreamweaver imageNow that you have an understanding of how to create paragraphs, headings and lists for your web page content take a bit of time and add real text to your website pages for all for of the pages. Before you add anything however, as yourself where the content belongs and try to understand that every element needs to belong to a document hierarchy.
One of the best documents to see a document hierarchy demonstrated in is a traditional resume, take a few minutes to study this example of a document structure:
  • <h1> – Christopher Ross
  • <h2> – Career Objectives
  • <p> – A paragraph about my objectives
  • <h2> – Previous Employment
  • <ol><li> – My employers
  • <h2> – Education
  • <ol><li> – Schools
Once you appreciate the structure of a document, creating HTML pages is easy.
This tutorial is part four in a ten part series.
  1. Preparing a website in Adobe Dreamweaver
  2. Building your first Dreamweaver Template file
  3. Structuring your website with Adobe Dreamweaver
  4. Improving the common elements in Dreamweaver
  5. Placing page content in Adobe Dreamweaver
  6. Hyper linking in Dreamweaver
  7. Working with Images in Adobe Dreamweaver
  8. Adding Cascading Style Sheets with Dreamweaver
  9. Putting your website on a remote web server with Adobe Dreamweaver
  10. Adding Google Analytics to your Dreamweaver Template

Turning your menu list into menu buttons

menu1 Turning your menu list into menu buttons imageOver a couple of tutorials I showed you how to turn a simple list like the one here into a horizontal menu and how to add rollover effects to that menu so that your list items made it clear to users that they could click them.

Now, let’s take a look at using some simple CSS tricks to turn your list items into menu buttons.

The HTML

menu2 300x97 Turning your menu list into menu buttons imageWe’re going to use some pretty basic HTML to accomplish this task:

<div class=’menu’>
<ul>
<li><a href=’index.php’ title=’Home’>Home</a></li>
<li><a href=’about.php’ title=’About Me’>About Me</a></li>
<li><a href=’contact.php’ title=’Contact Me’>Contact Me</a></li>
</ul> 
</div> 

The CSS

The CSS to create the buttons is found entirely in the <li> functions of the CSS, with only minor modifications to the CSS used in our last tutorial for the a:hover and a:action state.

.menu ul {
list-style: none; /* removes the • from the list items*/
text-align: center; /* centers the list items */
}

.menu li {
font-family: “Lucida Sans”, Arial, Helvetica, Geneva, sans-serif;  /* sets the font of the menu */
font-size: 12px;  /* sets the size of the font */
display: inline;  /* makes the menu items float beside each other */
margin: 0px 10px 0px 10px;  /* leaves 10px of space between the items */
font-weight: bolder;  /* makes the font bold */
background-color: #999999;  /* sets the background to dark grey */
padding: 5px;   /* adds some space around the words */
border: 1px solid #000000;   /* makes the border black */
}

.menu a:link {
color: #000000;  /* hyperlink color is now black */
text-decoration: none;   /* remove the underline */
}

.menu a:hover {
color: #cccccc; /* change the color to light grey */
}

.menu a:active {
color: #ffffff;  /* change the color to white */
}

There you have it, a horizontal menu with rollovers using just HTML and CSS.

Adding Rollovers to your HTML without JavaScript

In my last tutorial I showed you how to build a simple horizontal menu in HTML with only a few lines of CSS. Let’s take that same HTML code and use it to increase usability and improve the overall look of your site.

The HTML

This is the same HTML used in our last article:

<div class=’menu’>
<ul>
<li><a href=’index.php’ title=’Home’>Home</a></li>
<li><a href=’about.php’ title=’About Me’>About Me</a></li>
<li><a href=’contact.php’ title=’Contact Me’>Contact Me</a></li>
</ul> 
</div> 

The CSS

In CSS there are a few different states an anchor tag (<a>) can be. You can be:

 

  • a:link – the default state
  • a:visited – after you’ve been to the page
  • a:active – after you’ve clicked it but before you’ve left the page
  • a:hover – when your mouse is over the link

 

To make a page truly optimized for usability we can change the state these menu items appear in.

.menu a:link {
text-decoration: none;
color: #FF0000;
border-bottom: dotted 1px #FF0000;

newmenu 300x72 Adding Rollovers to your HTML without JavaScript imageThis CSS changes the color of the links to Red (#FF0000) and removes the underline from the links. Personally, I don’t like the default underlines so I like to replace them with a dotted line instead.

Next we want to assign a special event when the user has placed their mouse over one of your text items. To do this, we affect the a:hover CSS. Also, while I’m in there I am going to add a special event to the a:active CSS which will change the color when the user clicks the link but before they leave the page. This ensures they know they’ve clicked the link.

.menu a:hover {
color: #0000FF;
border-bottom: dotted 1px #0000FF;

.menu a:active {
color: #00FF00;
border-bottom: dotted 1px #00FF00;

Using the two states above, the user is now aware that they’ve entered a clickable zone because the link changes color and when they click the option, it changes color again to let them know they’ve clicked. There you go, three simple CSS commands to make your page more usable.

Using CSS to build a horizontal menu

picture 11 300x192 Using CSS to build a horizontal menu imageOne of the most common questions I get asked is how to build a simple menu like the one at the top of my website, using pure HTML and CSS. Actually it’s wonderfully easy and I’m happy to share the process with you.

The HTML

First, you’ll need to write the proper source HTML for the menu to work. I use unordered lists <ul> with list item <li> tags to build the menu items, this is in keeping with web standards and ensures compatibility across multiple devices.

The code a typical menu should look something like this:

<div class=’menu’>
<ul>
<li><a href=’index.php’ title=’Home’>Home</a></li>
<li><a href=’about.php’ title=’About Me’>About Me</a></li>
<li><a href=’contact.php’ title=’Contact Me’>Contact Me</a></li>
</ul> 
</div> 

The CSS

Now, with the basic HTML out of the way we have to take a look at the CSS codes we need to make the menu work, and how each of the does it.

We want to define the menu as a class, not an ID since we might want to reuse the code in both the header and the footer. An ID can only be used once on a page, were a class can be used multiple times. There is no actual code for the menu tag, it’s just a holder for us.

The <ul> tag on the other hand needs to be altered. To do this, we add the following code:

.menu ul {
list-style: none;
text-align:center;
}

Simply put, let’s get rid of the bullet (•) and center the content. Next we need to tell the <li> tags to sit side by side instead of appearing as a list, and we need to make sure they don’t bump into each other.

.menu li {
display: inline;
margin: 0px 10px 0px 10px;
}

There we have it, a table-less menu which appears in the center of your site in just a few lines of CSS.