I’ve been using XAMPP for quite some time now since I’ve done a couple of web development projects already. If you don’t have some sort of web server on your computer, you won’t be able to test and run your web development projects offline if you are using MySQL or PHP for instance.

Installing XAMPP

Installing XAMPP is pretty straightforward. The website details you how to install XAMPP in a variety of ways for the different platforms. Then, once its installed, you simply place your web content in the \xampp\htdocs\ location on your computer and access it via a browser using http://localhost/

Hello World using XAMPP

For example, lets create “Hello World” using XAMPP and some PHP.

1. Once you installed and are running XAMPP, create a file called test.php and place it inside \xampp\htdocs.

2. Then, simply copy and paste the following php code.

1

<?php echo "Hello World"; ?>

. Do you notice the difference? Depending on the platform and browser, it might not behave correctly.

Overview of XAMPP

If you have wanted to get into web development, you should try XAMPP. It’s fairly easy to install and use. I’ve been using it for quite some time and haven’t found a better replacement.

Want more tutorials on using XAMPP? Let me know. I plan on demonstrating how to create and manage a MySQL database and even setting up a WordPress blog using XAMPP.

XAMPP

]]>

Table of contents for Learn how to create a website series

1. Learn how to create a website using a Template
2. Understanding the Basic Structure of a Website
3. Choosing a template for your website
4. Editing the CSS Template to Make a Website

Getting ready to edit your template to make a website

In this part of our series you will start editing your template to make your website. Don’t worry, I’ll guide you every step of the way so you don’t get lost.

What do you need?

1. The BigSpaceLove template found on Free-CSS-Templates
2. A browser to open your website. (e.g. Internet Explorer, Firefox…)
3. A text editor to edit your website. Preferably one that supports syntax highlighting. Programmer’s Notepad is free and is what I’ll be using.

Start editing the template

Open up index.html using your text editor. If you remember the basic structure of a website we taught you can notice that it is the same way the html file is structured.

• The header contains “Website Title” and “Subheader, website description H2″ in this case
• The body is separated into a left section containing the content the and a right section containing the menu.
• The footer contains information about the person who created the template.

You will notice these sections are denoted with the following tag in the HTML document:

The <div> </div> tag

You can think of the div tag as a section within your HTML document. They will usually be named after the sections described above.

Making and viewing changes to your website

To make a change, simply save the index.html file at any time. Then open it using any browser. Once the page is open, you can refresh it thereafter whenever you make a change to the html file.

Changing the title of your website

Let’s change the title of our website. Currently it says Big Space. Look for the following code in the html file.

<title>Big Space</title>

It should be enclosed within the section. This section is used for placing information about the website such as meta tags, links to the css stylesheet, and the title of the site.

Let’s change the title to whatever you want. I’ll name it the following:

<title>Let's talk Binary!</title>

Now view the changes you have made using the steps I provided earlier. See what happened? The title of our website changed, this isn’t visible on the page itself but in your browser.

Editing the Header Section

Now let’s go ahead and change the “Website Title”. Look for the following.

<h1><a href="#">Website Title</a></h1>
<h2>Subheader, website description H2</h2>

I’ll be changing it to the following.

<h1><a href="index.html">Let's Talk Binary!</a></h1>
<h2>Eliminating the barrier between code and people</h2>

If you noticed, I change “#” to “index.html” above. “Let’s Talk Binary!” is encapsulated with the <a> </a> tag making it a link. Whenever you click on it, it will take you to the index.html page which is the current page your on.
It is also encapsulated with the <h1> </h1> tags, making it a header.

The <a> <h1> tag

The <a> seen is used to create a link to another document with the source being “index.html” in our case.

The <h1> tag defines headings. The values range from 1 to 6. 1 being the largest.

Now save and view changes. Isn’t this easier than you thought?

Go to the next page to learn how to edit the menu

Now, go on to the next page to learn how to edit the menu.

Table of contents for Learn how to create a website series

1. Learn how to create a website using a Template
2. Understanding the Basic Structure of a Website
3. Choosing a template for your website
4. Editing the CSS Template to Make a Website

Finding the right template

Finding the correct template for your needs can be quite tricky. For example, I needed something clean and fresh while maintaining a level of professionalism so I decided to go with the layout found on my personal website. If you noticed, you can get a nice looking website once you find the right template.

But how did I find it first of all? I simply dug around the internet. Google for me was a great place to start but for those that need help, I’ll show you a couple of sites that will give you a head start.

Note for tutorial

For purposes of the tutorial I encourage everyone to use BigSpaceLove found on the front page of Free-CSS-Templates so you can follow me step by step. This template is fairly easy to edit.

Where to find free CSS templates

• Smashing Magazine – 100 Free High Quality XHTML/CSS Templates – Great list showing off a large variety of templates
• 1st Web Designer- 101 High Quality CSS and XHTML Free Templates and Layouts – Another great list you shouldn’t miss out on
• Itensivstation – Basic CSS Templates – For those who want to start from scratch check out these templates
• Mitch Bryson – Free CSS Templates – More basic CSS templates
• FreeCSSTemplates.org
• Free-CSS-Templates

So once I have a template what now?

You are almost there. Once you have a template all we have to do is set up our environment, and start editing! (Remember, to use BigSpaceLove found on the front page of Free-CSS-Templates so you can follow my tutorial step by step.)

Table of contents for Learn how to create a website series

1. Learn how to create a website using a Template
2. Understanding the Basic Structure of a Website
3. Choosing a template for your website
4. Editing the CSS Template to Make a Website

What is a website made out of anyways?

If you take a good look at a couple of websites, you might notice their structures share a couple of things in common. (If you are wondering why you need to know this, you’ll learn why really soon.) Each website usually contains the following basic elements:

• A header usually contains the logo of a website along with a brief description. Sometimes you may find a menu there as well.
• The main body or content which may take up most of the website which contains the content of the website.
• A sidebar which usually contains the navigation of your website.
• A footer which usually contains copyright and licensing information.

Not all websites follow this traditional structure. It all depends on what type of website you need to suit your needs.

So what is under the hood?

So, what makes a website a website? Under the hood websites are made up of different coding languages that serve different purposes. I’ll only describe the basic ones you need to be aware of and will be working with.

Don’t worry, you don’t need to know anything. I’ll help you every step of the way.

HTML

HTML stands for Hyper Text Markup Language. It consists of HTML tags that are used to mark up content and usually have a starting and ending tag. If you have worked with website development in the past, edited a profile on a social site such as MySpace you probably already are familiar with the basics of HTML. An example of HTML is below.

<html>
<head>
<title>This is the title of a website</title>
</head>
<body>
<h1>This is a header</h1>
<p>This is a paragraph</p>
 
 
</body>
</html>

Note: If you really wanted to, you could create an html document say, index.html, copy the above code into that document, save it, run it on firefox, and view your website!

Cascading Style Sheets

CSS are Cascading Style Sheets. They can be embedded withing your website or be found in an external file (.css) that is linked to your website. You can think of them as style sheets. If you want to define or alter an attribute of an element of your website such as a font, image, link color, or any other element, you define it in the CSS document, and it would apply to all such elements on your site. I’ll show you an example later.

XHTML

XHTML stands for Extensible HyperText Markup Language. It is more of a standard for writing in HTML. So if you see a website or layout saying its XHTML Compliant, well now you know why.

Ok, now what?

Scared yet? Don’t worry. It will all make sense later. So what’s next? In the next tutorial I’ll help you find a template to start our website, then we’ll start editing it. Stay tuned for the next tutorial. If you have any comments or suggestions feel free to post them below.

Table of contents for Learn how to create a website series

1. Learn how to create a website using a Template
2. Understanding the Basic Structure of a Website
3. Choosing a template for your website
4. Editing the CSS Template to Make a Website

Getting started on your first website

Ever wanted to create a website but had no idea where to get started? No worries, I’ll guide you through the simple process and it will require no prior experience. Is it really that easy? After you complete my series of tutorials, it sure will be. We’ll be using the template BigSpaceLove found on Free-CSS-Templates to create a simple personal website similar to my personal website.

You don’t need to know anything. I’ll even make sure you understand the fundamentals so you can continue learning more on your own afterwards. So no, you don’t need to know how to design a web page, or even how to code one.

This series will teach you how to make a similar website pictured above

Why would I need a website anyways?

First of all, a website might serve a great variety of purposes such as the following:

• You may post your resume, CV, or portfolio online to attract potential employers
• Might want to share a hobby
• Promote a product you are selling or endorsing
• Start a community
• Simply to learn!

In reality, the possibilities are endless. It’s actually quite a good skill to have and it can pay off. While I was in highschool I managed to create websites and get paid pretty darn well for it since people think its more complicated than it looks.

If you are looking to simply learn, this is a great place to start. This will be a great hands on experience as you will be seeing progress rather quickly. It will also enable you to understand the fundamentals of the creation of a website.

Next tutorial shortly coming up

Stay tuned and before you know it, you’ll have your very own personal website. If you have any questions or concerns, feel free to post them below. I’ll try to tailor this tutorial for beginners so if there is anything you want me to cover please leave a comment or suggestion.

Browsershots

Browsershots allows you to type in your website and choose from a variety of operating systems and browsers.

Once you submit your request, you’ll be shown a page where you will have to wait for your request to complete. Meanwhile, you may refresh the page and see the progress. You’ll be seeing the browser shots as they finish. A problem I see though, is that sometimes the browser takes a snapshot before a page might finish loading. That might tell you, your site isn’t loading fast enough!

So what do you do if your site doesn’t look as it was supposed to? Work on it some more until it is compatible with the most browsers possible. That way you don’t lose any visitors in the future!

Several Talk Binary Browser shots

Below are several Talk Binary browser shots. As you can see, it appears the page hadn’t completely loaded before the shot was taken. Either way, its what I expected!

Stats concerning OS and Browsers of Talk Binary visitors

I recently started using Google Analytics so these stats have accumulated about a month’s worth of visitors. I was surprised to see what Operating Systems and Browsers people used to browse my page.

As you can see, Andy probably looks at Talk Binary on his iPhone using Safari, and you probably see my one time I used my Playstation 3 to view my site as well. Either way, it says it was viewed with a PS3 multiple times. Now that wasn’t me! This is why you must make sure your website is viewable on all browsers because your audience probably uses more than one option!

What is HTML?

HTML stands for Hyper Text Markup Language. It is the language that structures the format of a document with the following elements: links, images, text, and other objects.

HTML files usually have an htm or html extension and can be created with any text editor, including Notepad.

Programmer’s Notepad is an excellent free program which provides you with a nice programming environment with syntax highlighting, opening multiple tabs under its window, templates and more. I use it when I edit simple HTML files. So check it out.

Where do I start coding HTML?

With Notepad, simply open a new file. Then go to File -> Save As. Choose All Files under Save as type.

Then give your file the name homepage.html. Any name with the .html extension should work fine.

Any other text editor can create HTML files the same way or provides you with HTML templates that will automatically give your file an .htm or .html extension.

Coding your first homepage

<html>
<head>
 
<title> Title of your first homepage</title>
 
</head>
<body>
 
Hello World! I finally found a way to talk to the internets...
 
</body>
</html>

Save it and you are done! Now simply, open up your html file using your favorite browser. Congratulations! You just created your first website!