How to Build a WebSite. A to Z

Joomla! System info

2011-05-11T11:03:00.000-07:00

System info, like the name say here you can find information about your Joomla! website, and information about the web server, the server that hosts your website.

You can access System info by going to Help -> System info, in the Joomla! main menu.

Here, we have five tabs:

System Info,
PHP Settings,
Configuration File,
Directory Permissions,
PHP Information.

In the System Information tab we can find details about the operation system, database version, PHP version, web server (Apache in our case), Joomla! version and the user agent(your browser's type).

PHP Settings tab, show's information about php setting relevant to Joomla!

Configuration file tab, is a preview of configuration.php file, found in Joomla!'s folder.

Things you see here you can modify in Joomla! Global Configuration.

Directory Permission tab, show's a list of folder's in which Joomla! must have write access.

This feature you may use after you upload your website, to test if everything is okay.

PHP Information tab, is what the name say. It show information about your, php configuration.

Is like the "phpinfo()" function.

I hope you found this information useful. Thank you for reading.

Joomla! 1.5 Global Configuration

2011-05-07T04:46:00.000-07:00

The Global Configuration can be access through the top joomla menu, Site -> Global Configuration, or in the main Control Panel, click on Global Configuration.

The Global Configuration screen is divided into three areas: Site, System, and Server. allowing you to configure the Joomla! website with your personal settings.

Joomla! Global configuration SITE

Site Settings, Metadata Settings, SEO Settings.

In Joomla! Site Settings we can put the site in offline mode and set a message for our users with why the website is offline. The message will be displayed under the website's name.

Still here you can change the website's name, you can change the editor you use to write your articles (hint: I use JCE editor for Joomla!), here you can change the number of articles displayed in the Feed list (RSS) or you could change the default number of items displayed in a Joomal! list. (the list of articles, the list of plug-ins, menus, modules, etc..)

Here is PrintScreen of where this number is.

In Joomla! Metadata Settings you can change the Global Site Meta Description and Global Site Meta Keywords.

The meta information will be displayed on every page of your website that has no other meta data information assign to it.

You can find the meta description and meta keyword at the beginning of the code of every page.

Joomla! SEO Settings makes your Jooma! website's URL search engine friendly.

What does that mean? First if you check the radio button for "Search Engine Friendly URLs", Joomla! will make your URL from:

http://localhost/index.php?option=com_content&view=article&id=25&Itemid=28

into

http://localhost/index.php/about-joomla

Second if you check "Use Apache mod_rewrite", for this to work, you will have to rename the file htaccess.txt from your Joomla! install folder into .htaccess, yes there is a dot in front of htaccess.

This will transform your website's URL from:

http://localhost/index.php/about-joomla

into

http://localhost/about-joomla

Finally if you select all three options, meaning "Add suffix to URLs" also, your Joomla! website URL's will look like this:

http://localhost/about-joomla.html

Joomla! Global configuration System

System Settings, User Settings, Media Settings, Debug Settings, Cache Settings, Session Settings.

Joomla! System Settings is made of: a secret word, the path to the log folder, web services and the path to the help file.

The secret word is a unique alphanumeric code for every Joomla! installation an is used internally for security propose.

The path to the log folder is where Joomla! stores all the logs.

Web Services are used for compatibility with third-party extension , but are usually set to "no".

Help Server set the server from where you'll get your help. To access help go to the top menu Help - > Joomla! Help.

Joomla! User Settings, work's with an active "Login" module and it sets if you let your users to register on your website, if they register, here you can set what type of access would they have, if they have to confirm the registration and if they can set some parameters.

Here is a print screen of a "Login" module with User Registration set to Yes. If registration is set to NO, the highlighted link will not appear.

Joomla! Media Settings here you set where Joomla! will store your media files.

File type is what kind of file you can upload trough Media Manager and the maximum file size, the default is ~10MB.

The Path to Media Folder is where all your media is stored, Path to Image Folder is where you keep your images for writing articles.

You will see that if you want to add a image to an article by clicking the image button you'll only see the images in this folder.

Restrict uploads, set to YES, restricts only those type of users that have access less then manager. Minimum User Level for Media Manager.

Here you can select which type of users have access to the media manager, you have to select the lowest access group.

Check MIME Types, this is a verification for the files type, for more information you can read mime media types.

Legal Image Extensions, this allows you to limit the type of image users can upload.

Ignored Extensions, what types of files will be ignored. Legal MIME Types / Illegal MIME Types, better left as is, only for advanced users.

Enable Flash Uploader, the default is "No", if set to "Yes", may appear problems due to flash setting.

Debug Settings, here you have two options Debug System and Debug Language, by default both are set to off, if you activate Joomla! debug system you'll get something like the print screen below every page, showing you what Joomla! loads and what errors appear if there are any.

If you want Joomla! to use cache, here is the place you have to look.

In the Cache Settings you can enable/disable cache, set the maximum length of time the cache will be stored before it is refreshed, and the caching mechanism. I do recommend you not to use the cache system in the development period of your website.

In Session Settings you can configure the Session Lifetime, where you set how long a user can stay signed in, before the system disconnect it for inactivity, and the type of Session Handler.

I recommend setting a higher value for the session lifetime in the development stage of your website, so that you don't have to reconnect frequently, but don't forget to set it back to a lower value when you launch the site on the web.

Joomla! Global configuration Server

Server Settings, Locale Settings, FTP Settings, Database Settings, Mail Settings.

In Server Settings you can set, the Path to Temp-folder, where Joomla! keeps it's temp files, the website's "GZIP Page Compression" which could make it load faster (This option by default is turn off, if you want to turn it on, first check your server if it's supports GZIP Compression).

Also in Server Settings, you can set the appropriate level of error reporting, and configure your Joomla! system to use SSL for some areas of the website(I recommend using this option only if you know what your doing. Advanced user only).

Locale Settings, here you set the Time Zone of your website, which should be the same as the web server time zone.

FTP (File Transfer Protocol), if you don't have access to use the php upload function, Joomla! can use, this FTP build in function. To enable this function you'll need a your ftp host name, the port is usually 21 (the default), an username and a password for the Joomla! system to have access and finally the path to the folder where Joomla! will upload the files, this being the FTP Root in the configuration screen.

Database Settings, this settings were made during the Joomla! install process.

Here we can set the database type, in most cases is mysql, the hostname, the name of the server that hosts the database, the username, the password and the database's name.

Database prefix is a feature that allows you to have multiple Joomla! installations in the same database.

Warning! do not change anything here, unless, you know what you're doing.

Mail Settings. Three option here:

PHP Mail Function(mail function build in PHP) is the default,

Sendmail is typically used when you want to sent a HTML email.

SMTP Server uses the site's SMTP server and you have to fill all the fields that start's with SMTP.

Mail From and From Name are the the email and the name that will be used for sending email, by default Joomla! fills "From Name" with the site's name. The "Mail From" is the email you were asked for at the Joomla! installation.

This is it with the Joomla! Global Configuration, I hope you liked it and understood it, thank for reading.

Step by step picture tutorial on how to install Joomla! 1.5

2011-05-04T03:07:00.000-07:00

Here is a free tutorial on how to install Joomla! 1.5.

This tutorial presumes that you already have a web-server installed on your PC, and that you extracted the Joomla installation archive in the public folder of the web-server.(If not, click on installing xampp for Joomla)

This being said let's start.

Open your favorite browser and type in the address bar http://localhost.

This window should appear.

Chose your installation language and click next. (top right corner).

Here the Joomla! setup checks your system if it meets the minimum requirements for installation.

You can read this article Xampp installation for running joomla! to turn all checks green.

Joomla is free, open, and available to anyone under the GPL license. So if you accept the license click next.

Joomla! Database Configuration.

In this screen you are asked for five things, this Joomla! tutorial is for fresh install and we have nothing to do with the Advanced Settings.

First thing we are asked is the database type which I recommend leaving it to MySql, the default setting.

In the Host Name field we can type localhost considering the fact that we are installing joomla on our computer.

For this installation we can use the user root with no password, that is automatically created when xampp is installed, or if you created another user you can type it here.

In the Database Name field I usually type the website name. You can type almost any name you like, so if you filled everything click next.

This is to enable Joomla! FTP file system layer. For this instalation we do not need that so you can click next.

In this window we will fill the web site name, an email address for the super administrator and a password.

And to see how a Joomla! web site looks we are going to install the sample data, so click on the button.

After we will click next we are going to be directed to the final setup window where we asked to delete the installation folder.

Go to drive:\xampp\htdocs and delete the installation folder, then click on the site button in the top right corner.

This is the default Joomla! instalation website with data sample.

To acces the administration section type http://localhost/administrator in your address bar of your browser.

Type in the username field admin and in the password field the password you chose earlier in the setup.

This is the administration section of Jooma!, from here we will create menus, change the website language, add content and much more.

If you have any question please feel free to comment.

Joomla 1.5 Directory and its Files

2011-05-02T19:48:00.000-07:00

What are all the folders and files in the joomla directory?

In this article we are going to talk about the Joomla! Directory structure.

As you can see there are a lot of folders and files.

I'm not going to describe every file here, why?, because there are to many joomla files and it will take to much.

We are going to discus about the main folders and some of the root files you are seeing in the picture above.

Let's start with the folders.

administrator

This is the folder for Joomla back-end and it's like the Joomla root folder.

There is a component folder, a templates folder in witch are the back-end templates, khepri being the default template, a language folder in witch are stored the languages you installed for the back-end.

cache

Every rendered Joomla page is made by a php and mysql request.

To make the website load faster joomla uses this folder to temporary store (cache) popular pre-rendered pages, so when you request a popular page, Joomla will load the page from cache so that you will have to wait less for that page to load.

components

In this folder joomla store all its components. All installed components can be found here, as you can see the default ones are also here.

images

The images folder is where you find all your articles images, more exactly in the stories sub-folder, banners and smilies for articles.

You can change Joomla's default image folder in the global configuration manager, which I'll discuss in another article.

includes

The includes folder contains PHP files that helps joomla with the automate inclusion of content.

language

Here are stored all the language files for the front-end of your website. Every translation of the website is stored in a sub-folder named in this format: standardLanguageCode_standardCountryCode. As you can see the default language is (en_GB) English_GreatBritan.

libraries

This folder contains all the core libraries that Joomla uses.

logs

This folder should be automatically filled by the Joomla! installer. Here's where all the logs are stored.

media

Media may be stored in this folder for Joomla to access.

modules

All the modules you installed and the standard ones that comes with Joomla! are stored here.

Modules are for the front-end of your joomla website and they often provide the front-end display for a component.

plugins

Here are stored all joomla plug-ins which are framework extensions and they operate at a lower level than components.

A plug-in example is TinyMCE which is Joomla!'s default editor.

templates

In this folder you will find all the template installed for the Joomla! front-end website.

All the sub-folders found here match the name of a template.

The back-end template can be found in "\administrator\templates".

tmp

All the temporary files and cookies used by Joomla! are stored here.

xmlrpc (eXtensible Markup Language Remote Procedure Call (XML-RPC))

This feature of joomla allows a procedure call which can be sent into the Joomla server for on-server execution.

Files

configuration.php

As the name said this is the Joomla! configuration file.

Here you can find options like the state of the website, the editor you use to write your articles, data access to the database, tmp and log folders path, meta-data and keywords for the first page of your website and many more options.

index.php

This file launches Joomla! installer or it reads configuration.php an starts the website.

htacces.txt

We will rename this file from htaccess.txt into .htaccess(server configuration file) so we can use the SEF(search engine friendly) Section of Joomla!

robots.txt

This file allow or disallow robots, like googlebot and others, to crawl your website or a part of it and to index it. For more information visit robotstxt.org

Xampp configuration to install joomla!

2011-04-28T09:21:00.000-07:00

Here we're going to discussed about some configuration that we have to make for Joomla! to run smoothly.

Before you can install Joomla 1.5, you have to download Joomla's archive and extract that archive in the public folder of the web server.

In our case these folder is htdocs of our xampp installation.

After we extract Joomla's setup files will make some adjustments to the php's configuration in order to ensure full compatibility with Joomla!.

This settings are:

I already made the setting, that is why "Actual" are all green.

Usually you only have to change off "Display Errors", if you need to change something else, please comment and I'll gladly help you. So let's change off "Display Errors".

Go to xampp/php and open php.ini with a simple text editor like notepad (I use and recommend notepad++).

Now go to line 531 or search(Ctrl+F) for "display_errors" and replace display_errors = On with display_errors = Off and we are done.

For the settings to be available you have to restart the web server, so go to xampp folder and double click on xampp_restart.exe

Now we can install Joomla!.

Creating a Simple WebSite

2011-04-25T11:57:00.000-07:00

You need two things to build a website: a browser and a text editor (I recommend Firefox and Notepad++).

Here you can find more free resources that can help you create your website.

So, open up your text editor and let's start building the website.

For those how uses Notepad++, don't forget to change the language to HTML. (Menu->Language->H->HTML).

On the first line we have the <html> opening tag for the webpage.

On lines 2 and 4 we have the <head></head>> tag, the start tag and the end tag. This tag contains the meta information, which describe the web page. To find more about these, see meta tags in website optimization.

The <title></title> tag that is on the line 3 is the text you can see at the top left corner of your browser (the name of the page).

We created a table on line 6 for the alignment of the website in the browser. We are going to center the website like these:

The page starts with the table on the 7 line. In this table we are going to create the website's header, menu, content and footer. This table will be only 70% of the browser's width.

The green text on the 8 line is a comment. We use comments to make the code more readable. A comment as you can see start with .

This web page is built of a table that has 5 rows and 2 columns. So the first row, the <tr></tr> tag on the 9 line to 15, is the header of the page.

colspan="2" on line 10 tells the browser the number of columns that a cell should span. That number being 2 here.

On the 12 line we have an image which is the logo of websites, and because on most websites, you can click on the logo, and it will take you to the first page, we put this image inside a link tag <a></a>.

On lines 17 and 41 are the rows that separate content from header and footer.
These rows have blue background which is given by the attribute bgcolor.
This attribute has the value #0000FF, which is the hexadecimal color code.

As you can see from the code we have two columns( two <td></td>). A column for the menu and the other for content.

The menu starts on line 21 and end on line 29. We create the menu with an unordered list.

The content of our web page is located between lines 32 and 37.
For the content we used tags like <p></p> which is for paragraph, <br/> a line break and   (space) which is an entity that makes part of the ISO 8859-1 symbols and mean "non-breaking space".

And because you will need to know more about entities when you create your website, here is a link that you can save.

The footer is created of a row and two columns, it starts on line 43 and ends on line 49.

On lines 46 and 47 is a paragraph with the copyright text, which had been centered with the attribute "align".

On line 50 are the closing tags for the tables that started on line 6 and 7.

Here is the complete version of My First WebSite.rar

I hope you understand what are the basics in building a website.

If you want you can view a version in which we use css of this simple website.

Create a WebSite with CSS - Final part

2011-04-24T11:12:00.000-07:00

This is the final part of creating a website with css.

Here we are going to discuss about creating a footer for our website.

From line 48 to 52 is a round cornered line. We discussed about this earlier, here is the same thing.

The footer start on line 54 and ends on line 57, the first </div> ending tag. The second </div> ending tag is for the wrapper that centred the page.

Here is the footer's css code:

The End.

We finished building the website. Now you'll probably say that is more work then making a website without css. For a small website you are right, but for a bigger website I'm telling you that css is the key to your success.

Things you should know before starting to build your own website.

2011-04-19T23:17:00.000-07:00

First of all you should know that for having a website, up and running, you have to pay for at least two things. Yes, even if you build it yourself.

1. You have to pay for YourDomainName.com;

2. You have to pay for someone to host your website.

To start building your website you should know what kind of website you want.

Are you sure you want a website or just a blog?

If you want a blog you can build one for free with Blogger or WordPress.

If you want a website, what will it be? A personal website, an online shop, or other.

Before you start building a website you must establish what type of content you will write and how will you write it.

This will depend on the public you addressed to. For example, if you make a website that contains medical information, you will have to use common language so that people can understand you, not a specific language of medicine.

What about SEO? To have a successful website you have to optimize it (Search Engine Optimization).

Here's a short website optimization tutorial.

If you made a website to make money online, you should know that is not possible overnight. Making money online is not that hard, but making a lots of money is hard work.

Here's short list of things you should know before you start building your website.

- what kind of site you want to build.

- what is the content you want to promote through the site.

- what name will the website have. is it available?

- how does the website will look. (I find it more easy to write code if I have a sketch).

- don't forget that optimization of a website starts once with the creation of the website.

- what are your targets for the website.

- when will the website be online.

Choosing the right image types for your website

2011-04-18T04:00:00.000-07:00

In this article we are going to discuss about the types of images that are recommended to use on a website and how to use images when creating a website.

So, what type of images are good to create a website?

Note: If you don't know what type of images exists, you can read this article on wikipedia: http://en.wikipedia.org/wiki/Image_file_formats

To create a website it is recommended that you use three types: JPG, PNG, and GIF images if you must.

Why only three type of images? Of course that are a lot more types of images, but these three are the most used on the web.

Lets discuss about these types of images:

   JPG (JPEG Joint Photographic Experts Group - full name) this format is used by your camera to save the picture you take. This type of image I recommend that you use for the photos you use to create your website; and by photos I don't mean navigation buttons in your website, for that is another type of image that you can use.

   PNG (Portable Network Graphics) this type of image is best used for your web-site's graphics, and by graphics I mean: images for the web-site's navigation menu, logos, backgrounds, and others images used to create the template of your website.

   GIF (Graphics Interchange Format) a image type that was replaced by the PNG type, but still used for creating websites. GIF images supports only 256 colours and are very ineffective if you have detailed images. I recommend you use this type of image as rare as possible. If you use this type of images, use it for simple images like a line, a bullet or something like that.

How is it best to use images when you create a website.

   - First of all do NOT use big image files on your website. If an image is bigger than 200 Kb do not insert it directly in your web pages, first resize it and then use it. For example if you have photos from your camera that you want to appear on your website, first resize them and then upload the to your website.

   - Second do not resize your images with HTML code. It is recommended that you add the width and height of your image in the HTML code, but do NOT use this to resize your images. This is a very bad way to resize your images because this actually does not resize the images it just shows them at the dimension you specified but the images are still big and take a log time to load, slowing your website.

<img src="your_image.jpg" width="300" height="200" alt="Your Image" title="Your Images" /> - the width and height should be the same with the image's width and height, not smaller neither bigger.

- Use sprites whenever possible. Sprites are images that contain multiple images. For example if you have buttons on your website that have multiple states, this would be a good sprite:

Sprites are good to be used because they reduce the HTTP-Request of the website which leads to an increasing of the website's performances.

- Compress your images as much as possible. You can use RIOT (Radical Image Optimization Tool) software to compress with preview an image. Compressing your image files makes your website load faster.

RIOT is a free software for image compression. You can find a link to download RIOT in the web building tools section.

This is it with images. I hope this article help you better understand how to use and optimize images on your website or when you build a website.

Questions? Please feel free to comment...

Create a WebSite with CSS - Part II

2011-04-16T10:02:00.000-07:00

Here we are going to discuss about creating a css menu for your website and formatting the website's content.

For the menu we used an unordered list.

As you can see there's nothing new in the HTML code. So let take a look at the CSS code.

- line 44 - "#menu ul{.... " we add style to all <ul></ul> tags that are included in the HTML element that has the <<id="menu">>

- line 48 - display property - in our case "display:block" makes a HTML element to take up the full width available and has a line break before and after it. The opposite is "display:inline" which makes a HTML element to only take up as much width as necessary, and does not force line breaks.

This property can also hide HTML elements, "display:none".

- line 50 - the same thing as on line 44, but for the <a></a> tag.

- line 53 - text-decoration property - we used it with the value none to remove the underline from links. Other values for this property are: overline; line-through; underline; blink.

- line 55 - color property - tells the browser the text color of that element.

- line 57 - the same thing as on line 50. The style here, being applied to the "hover" state of the link. When you put your mouse over the link it will be underline.

Here we have the content, on line 34 is id="content_1" for the first page, on the second page id="content_2" and so on.

STOP! when we create a website to launch online we will use only id="content". I've made id="content_no." just for you so you can see that are different pages.

A real website, you would have a different content for every page so you don't have to use different ids.

on line 46 there are two end tags (</div></div>). One is for content and the other for the <div> with the middle ID.

As you can see we have style for every page. When creating a real website you don't need to use Ids for every page as the whole website should be formatted the same.

Create a WebSite with CSS - Part I

2011-04-14T10:51:00.000-07:00

We are now going to create our first website with css, so open up your code editor and let's write some code.

In this tutorial I presume that you have read the HTML Tutorial and I will not explain every tag.

If you don't understand something please email me at emil.hossu [at] gmail [dot] com

You can download a zip archive of the website that we will create here.

- as you can see on line 4 we have link to an external CSS file, href="css/style.css". The link is "css/style.css" because the file is in a subdirectory called css.

TIPS: I recommend that you create a directory structure for your website because this will be good for your website search engine optimization (SEO).

- on line 7 we have a <div></div> tag that is going to center our website.

- on line 8 we have a tag for the page width, that is 950px, as you can see below.

- from line 10 to 14 is the header.

- on line 14 is a comment. CSS comments start's with "/*" and end's with "*/".

- line 16 - position property - allow you to position an element. In our case it has the value relative, which position a HTML Element relative to its normal position. This property has three more values: static which is default, fixed and absolute. The fixed value makes the element positioned relative to the browser window, a good example is the fixed background you can see on some pages. Absolute value makes the HTML element positioned relative to the first parent element that has a position other than static.

- for the rest of the lines, I think, you understand what they do.

- on line 12 is the logo, which is set as a background image with css.

- line 26 and 27 - margin property - this property clears an area a round an element, outside the border. This property can be: margin-bottom, margin-left, margin-right, margin-top.

- line 30 - we set the logo image with the background property. For our background property, we have the following values: url("path to the image"); position which is upper left corner (0 0), in our case, and the "no-repeat" value.

- to create the line with round corners I used four <div></div> tags. One that includes all div tag, two div tags for corners and one for the middle.

- I've made this drawing so you can understand better.

All images were built with GIMP programme, for more information about GIMP visit Web Building Tools in the left menu.

- the blue background corresponds to class "line";

- the left green "CORNER" corresponds to class "left_line";

- the middle purple "MIDDLE" corresponds to class "middle_line";

- the right green "CORNER" corresponds to class "right_line";

- line 111 - padding property - does the same thing as the margin property but inside the border of the HTML element.

Building a website

2011-02-19T00:25:00.000-08:00

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.

Building My First WebSite - CSS Tutorial

2011-02-16T00:51:00.000-08:00

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.

HTML Tutorial

2011-02-13T22:16:00.000-08:00

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.

CMS Based Website

2011-02-09T12:22:00.000-08:00

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.

Web Building Tools

2011-02-08T22:41:00.000-08:00

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

2011-02-08T22:40:00.000-08:00

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.

Search Engine Optimization (SEO)

2011-02-06T23:11:00.000-08:00

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.

Free E-Commerce Solutions

2011-01-30T09:33:00.000-08:00

Want to create your online shop?

Here are some free solution so you can create your ecommerce website.

OpenCart is an open source PHP-based online shopping cart system.

PrestaShop is a professional e-Commerce shopping cart software that you can download and use for free.

osCommerce

Zen Cart

Ok this are free shopping cart scripts, but, to have your online shop you still have to customize these scripts, buy a domain name and hosting for your shop to be available online.

Customizing these scripts, sometime does not require advanced technical skills, just basic knowledge of using a PC and the internet.

For chosing a domain name and hosting you can read this article on how to create a website.