HTML Tutorial

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:

     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.

     tag - makes the text bold.

          Ex: Hello World  => Hello World

     tag - defines the document's body.

          Ex: - makes the page background color blue.

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

    

 tag- defines a section in a document.

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

          Ex: Hello World   =>  Hello World

    

 tag - defines an HTML form for user input.

     This is the result :

     tag - let's you add an image to your web page.

          Ex: .

    

tag - defines a list items.

    

tag - defines an unordered list.

    

tag - defines an ordered list.

          Example:

     This is an ordered list:

     tag - defines a section in a document.

     tag - defines a table in a web page.

     tag - defines a table cell.

     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.

[Read More...]

CMS Based Website

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.

[Read More...]

Web Building Tools

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)

[Read More...]

How to install Xampp - for Joomla

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.

[Read More...]

Search Engine Optimization (SEO)

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