How to Build a WebSite. A to Z: February 2011

Saturday, February 19, 2011

Building a website

Posted by Emilian at 12:25 AM

Free tutorial for beginners on how to choose a domain name and hosting for your website.

First of all: if you want to have your own website you have to know that you have to buy a domain name and hosting.

You can buy a domain name and hosting for example: from www.GoDaddy.com or from any hosting company in your area.

Second, you can develop your website locally on your computer, so you can build your website and then buy a domain name and hosting.

Note: I don't recommend using free hosting for your official website. If you want, you can use free hosting just for testing propose.

Before we start making the website lets talk about choosing a name (domain name) for your website.

Choosing a domain name for your own website before you start is better if you already have a logo. You can make or choose a template for your website based on the color of your logo.

When choosing a domain name for your website is better to choose one that is relevant to your activity and not your company's name.

For example your company name is ABCD and you make, for example, candles. Is better for you to have a domain name called www.candles.com then www.abcd.com.

Why not to choose for domain name your company's name when creating your own website?

Let's say you are a customer, wouldn't you search for candles, in our case, or for abcd, the company's name?

Don't get me wrong, if you are a company like Microsoft, Coca-Cola or some other giant in your domain, your website domain name could be the company's name and people will still find you.

Okay if your website domain name is more than one word I recommend you use dashes, because is better for website optimization and can be remembered easier. Here is an example: www.wedding-candles.com.

Now that we determined how you can choose a name for your website, let's view some techniques for creating a website.

   First, you can create a website like I describe in the articles: creating a html website or creating a css website.

   Second, you can download a free template or buy one and build your website based on that template.

Here I will show you how to create a website based on a free template.

Here is a list of website where you can download templates for your website:

   http://www.freecsstemplates.org/ - Free CSS Templates

   http://www.free-css-templates.com/ - Free CSS Templates

   http://www.free-css.com - CSS Resources

   http://www.freewebsitetemplates.com/ Website Templates.

   http://www.freewebtemplates.com/

Before we download a template and start building the website, we are going to talk about choosing the right image types for your website.

Wednesday, February 16, 2011

Building My First WebSite - CSS Tutorial

Posted by Emilian at 12:51 AM

Before Creating a WebSite with CSS you should have some knowledge of HMTL.

So if you haven't read my tutorial about HTML, you can click on Building a WebSite with HTML now.

1. What does CSS mean?

CSS stands for Cascading Style Sheets.

2. What does CSS do?

CSS defines how to display HTML elements, adds style to this elements.

3. How do we write CSS code?

To write a line of CSS code you need three things: a HTML element, a property and a value for that property.

Here is an example: h1 { color:red; }. => Some H1 text.

4. How to include CSS in our WebSite?

There are two ways to include styles in your WebSite. The first method is to save your styles in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a WebSite, just by editing one single file! Or you can write your CSS code directly into the HTML page.

Here are some example of Ways To Include CSS in a HTML page.

This code must be placed between the <head></head> tag.

Link to external file.

There are two ways to add style to HTML elements if we use external css file. You can use the attribute class or id.

1. ID atribute is used to specify a style for a single, unique element. We define it with a "#".

2. CLASS atribute allows you to set a particular style for any HTML elements with the same class. We define it with a ".".

Write code direct in page.

Inline style. Add style directly to specific HTML element.

As you can see, on the first line is the attribute "style" which value is the CSS code, the CSS property (font-size) and its value (16pt), the HTML element here being the <span></span> tag.

Now we know what CSS means, how to write a CSS code line and how to add CSS to your website, so click on Building a WebSite with CSS to move forward.

Sunday, February 13, 2011

HTML Tutorial

Posted by Emilian at 10:16 PM

Before we dive in and start learning HTML let's answer these questions.

1. What is HTML and what does it do?

HTML (Hyper Text Markup Language) it is a markup language for describing web pages.

2. How does HTML markup language works?

HTML uses markup tags to describe the web pages. This tags are usually called HTML tags or HTML elements.

3. How does HTML Tags works?

HTML tags normally come in pairs, the opening tag and the closing tag.

Here is an example and , this is the link tag.

4. What is a web page?

A web page is a document that contains HTML Tags and plain text. Web pages are read by web browser like Firefox. The browser does not display the tags, but uses the tags to interpret the content of the page.

Here is an example of a web page:

You can write the code in a plain text editor like notepad and save it as first_webpage.html (or file_name.html)

Ok, we have our first web page, now let's analyze the tags in the example.

   - the tag on line 1, tells the browser where to start and end the web page;

   - on line 2 is the head tag which defines information about the html document;

   - on the third line is the title tag which defines the title of your web page;

   - the tag, line 5, is where all the web page content goes;

   - on line 6 is the paragraph tag.

A short list of the most used HTML tags:

   <a></a> tag- with this tag you can create a link.

As you can see I added title in the tag, which is responsible for the text that appears when you put your mouse over the link.

   <b></b> tag - makes the text bold.

   Ex: <b> Hello World </b> => Hello World

   <body></body> tag - defines the document's body.

   Ex: <body bgcolor="blue"> </body> - makes the page background color blue.

   <br/> tag - defines a single line break.(yes this does not came in pair)

   <div></div> tag- defines a section in a document.

   <font></font> tag - defines the font face, size and color for text.

   Ex: <font color="red" size="12" face="times">Hello World</font> => Hello World

   <form></form> tag - defines an HTML form for user input.

This is the result :

   <img /> tag - let's you add an image to your web page.

   Ex: <img src="/image.jpg" alt="Text to display if can't show image" />.

   <li></li> tag - defines a list items.

   <ul></ul> tag - defines an unordered list.

   <ol></ol> tag - defines an ordered list.

   Example:

This is an ordered list:

<span></span> tag - defines a section in a document.

<table></table> tag - defines a table in a web page.

<td></td> tag - defines a table cell.

<tr></tr> tag - defines a row in a table.

Example:

The result is a table with one row and two cells.

Now that you found out what HTML means let's click on the following link to start building a website.

Wednesday, February 9, 2011

CMS Based Website

Posted by Emilian at 12:22 PM

What's CMS (Content Management System)?

A content management system (CMS) is a collection of procedures used to manage work flow in a collaborative environment.

Here we are going to talk about WEB CSM. This is a software that keeps track of every piece of content on your Web site.
WEB CMS are Joomla!, Drupal, PHP-Fusion and a lot more.

Why use a CMS System to build your website?

You can build a website much faster with a CMS System and the best part of a CMS website is that maintenance it is very easy since it does not requires almost no technical skill.
On this website I'll talk especially about Joomla!, why? Because as you can see at the bottom of the page this website was made with Joomla!.

What is Joomla?

Joomla is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available. Best of all, Joomla is an open source solution that is freely available to everyone. (taken from joomla.org)

Here is a list of other WEB CMS:

Drupal is a free software package that allows an individual or a community of users to easily publish, manage and organize a wide variety of content on a website.

PHP-Fusion is a light-weight open-source content management system (CMS) written in PHP4. It uses a mySQL database to store your site content and includes a simple yet comprehensive administration system.

MODx Revolution is a powerful PHP Content Management Framework that plays nicely with custom code and helps you build sites faster and maintain them with ease.

WebsiteBaker helps you to create the website you want: A free, easy and secure, flexible and extensible open source content management system (CMS).

CMS Made Simple provides a fast and easy way to create a web site and manage its contents. Use it to make a home page for your family -- or your multinational corporation!

If you want even more, you can take a look at opensourcecms.com or you can search on the web for open source cms.

Tuesday, February 8, 2011

Web Building Tools

Posted by Emilian at 10:41 PM

Here is a webmaster list of tools, links and other things that can help you build, optimize and promote your website.

Software

Firefox - the browser ;

Firebug - this is an add-on for Firefox ;

Page Speed - this is an add-on for Firefox/Firebug, this mean that you have to first install Firefox and Firebug. (Google page speed test)

YSlow - another add-on for Firefox (Yahoo page speed test)

Notepad++ - a free, open source, plain editor ;

GIMP (GNU Image Manipulation Program) - free image editing software ;

JCE Editor for Joomla!. This is a Content Editor for Joomla! that I recommand.

RIOT - Radical Image Optimization Tool "is a free image optimizer that will let you to visually adjust compression parameters while keeping minimum filesize." - download here.

Links

W3C HTML Validation Service (this examines your HTML code to meet the W3C standards)

The W3C CSS Validation Service (this examines your CSS code to meet the W3C standards)

Bing Webmaster (Bing Webmaster Tools - add your website to Bing)

Google Webmasters (Add your website to Google)

Yahoo! Site Explorer (Add your website to Yahoo! - this is Yahoo! Webmaster Central)

How to install Xampp - for Joomla

Posted by Emilian at 10:40 PM

XAMPP stands for X (for the four operating system supported) A (Apache) M (MySQL) P (PHP) P (Perl).

"XAMPP is a, easy to install, Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use - just download, extract and start."

Ok, so what does all of that mean? It means that xampp is a package that installs a web server in our computer with all the things we need to create a database, administrate it, run php scripts and much more.

So for us to install it we have to download it. GO to http://www.apachefriends.org/en/xampp.html

Click on XAMPP for Windows and scroll down a little.

Now download the xampp setup by clicking on the exe link, save it somewhere in your computer and run it (double click on it).

First thing before we click on the install button we should set the the path (Destination folder) where is going to be installed. I usually do not install xampp on the same partition where windows is installed.

After installation is over a command prompt window starts for configuration. If you want shortcuts on start-menu and desktop type Y.

To this option I recommend you to type Y.

Type N. We do not need a portable version of Xampp. The propose of this tutorial is not how to install xampp in different ways.

This is just info, so type enter(return key).

The setup is over so type X to close the window.

Click on the following link to configure xampp server for Joomla! installation.

Sunday, February 6, 2011

Search Engine Optimization (SEO)

Posted by Emilian at 11:11 PM

Search Engine Optimization (SEO) can be defined as the activity of making small modifications to parts of your Web Pages or whole Web Sites in order to make it more search engine-friendly, thus getting higher positions in organic search results.

This article is only about WebSite SEO, so here is a list of things you should know before creating a website.

The title tag:

- a title tag tells users and search engines the topic of a particular page.

- the <title> tag should be unique to every page and should communicate the topic of the page's content.

Meta description tag:

- this tag tells search engines a summary of what the page is about. This tag should not be more that a paragraph.

Creating a good navigation system made mostly of text link will help search engines to crawl and understand your website easier, and this is good for your users too.

The structure of your URLs:

- it is very good to create a directory structure for your website, which describe your categories and filenames.

This will not only help you keep your website better organized, but it could also lead to better crawling of your website by search engines.

- the name of your files and directories should be related to your content, that way you can make your urls more friendly.

Here's an example of a friendly URL:

http://www.your-website.com/exotic-cars/ferrari-enzo.html

and here a non friendly URL:

http://www.your-website.com/dir1/page1.html

- write explicit anchor text (<a href=" ">anchor text here</a>) or clickable text in a link, so that your users and search engines will know something about the page you're linking to.

Create a sitemap for your website.

A sitemap is a simple page on your site that displays the structure of your website, and usually consists of a hierarchical listing of the pages on your website.

You should have two sitemaps, one for your visitors and one xml sitemap to be sent to diferent search engines, so that your website gets indexed faster.

Here is a link that will help you generate a xml sitemap.

Use <h1></h1> tag for your article title.

- you should use the heading tags for your articles. These are from <h1></h1>, the most important, to <h6></h6> the last important.

Optimize your images

- don't give your images file generic names like "image1.jpg", give them names that describe what they show to your users, but not too long names;

- add the <<alt>> attribute to your website images and write a descriptive text to it;

- try to keep all your website images into one directory.

These were some of the basic SEO rules for creating a website that's search engine friendly.

Following these rules will help you in the process of search engine optimization for your website and this may lead one day to a top 10 website in its domain.