Euro PC Solutions Blog

HTML – Getting Started…

Hello & welcome everyone !

Well, this is the first chapter of the HTML – CSS lesson series as well as the first tutorial of this blog ! These lessons are for beginners and will teach you to create your own web site !

Before I start I would like to thank our friends from Le Site du Zero for giving us permission to adapt their lessons to get us started. These tutorials will teach you how to make a website from A to Z.
During this series of tutorials you will learn two programming languages : XHTML & CSS. They will allow you to build your website.

XHTML ? CSS ? What Are They ?

To create a web site, you need to give information to your computer. You don’t simply write the content for the site; you also need to arrange the text, insert images, links etc…
To explain what you want to the computer you need to use a language that it understands.

Several programming languages exist, such as C++ & Java. However these languages are quite complicated and are created for people who already have experience in programming.
HTML & CSS however have been designed specifically for creating web sites, and have been designed to be easy to use. And I will be teaching you how to use them.

Why do you need two languages to create a website ? Isn’t one enough ?

It’s true that when I say that I will teach you two languages at the same time it can be worrying.
Don’t worry, you will realise as we go along that everything has been well thought about. Each of these two languages has its own purpose, and each one complements the other to create a website.

• XHTML : Abbreviation of eXtensible HyperText Markup Language. Between us, if you can’t remember what it means, it won’t stop you from sleeping It is with XHTML that you will create the content of your site. It contains the logical information of your web site : for example it is with this language that you will say This is my title, this is the main content of the page, now I need a picture etc….

  You might also heard of HTML. In fact HTML & XHTML resemble each other a lot & can both be used to create web pages. They are practically identical. However XHTML follows stricter rules than HTML. Because of this we will study XHTML during these lessons.

• CSS : Abbreviation of Cascading Style Sheets. This language lets us organize and design our web page. It is with CSS that we can tell the computer I want the title to be in red & underlined, the font of the text is ‘Arial’, my sites name is aligned in the centre, my menu will have a white background etc….

As a summary, we use :

• XHTML to write the content of the pages
• CSS to style the content

These two languages are therefore complimentary, one goes with the other. If you remember that XHTML is used to write the content and CSS to style the content, then believe me, you’ve already understood 95% of the idea !

However, in the first part of this lesson we’re not going to talk about CSS. We’re only going to do XHTML, because that’s where we need to start a web site.

The Editor

The question that you have probably already asked yourself is “What program am I supposed to use to create a web site ?”

In fact there are loads of programs that allow you to design sites.
But why go looking for expensive, complicated ones, when you already have one…Notepad

If you have a Mac or are using Linux you should have similar software : a simple text editor.

Right, so in theory, Notepad is more than enough. However I have never done it with Notepad.
With a bit of research I found a great text editor that helps a lot by colouring your HTML & CSS code

This program is simple, free and very useful. It’s called Notepad ++ and I invite you to download it :

Download Notepad++
Download Notepad++

It is not necessary to take Notepad ++, however, with it being free and useful, it would be a shame to let it slip by.

If you’re running under Mac OS, there are several similar editors made for Mac. I recommend Smultron.
Under Linux there is an abundance of editors. You probably already have ‘Vim’ or ‘Emacs’ installed.

Once you have installed Notepad ++, I suggest that you do the following: go in the menu “Language” then “H” then “HTML”. This will let the program know that we are coding in XHTML.

When you are coding, Notepad will colour your code like this :

For the moment, don’t worry about what all the code means. The screenshot was just to show you how the program colours the code.

Right, now that our editor is sorted out, we will talk about the last, indispensable element : the browser.

The Browsers

Do you know what a browser is ?
It may be clear for some of you, but as I said before we will study everything from A to Z, so I will explain quickly what it is for those who don’t know…

The browser is the program that allows you to view web pages & surf the internet. Therefore, if you are reading these lines, your browser is already open & is right under your nose

The job of the browser is to read the XHTML / CSS codes that you have written, and to decode it to show a web page. If your CSS says The titles are red, then the navigator should show red titles.

Several browsers exist :

• Internet Explorer
• Firefox
• Opera
• Google Chrome
• Konqueror (For Linux)
• Lynx (For Linux)
• Safari

The list is long but I have put the main ones above.
I will present two of them from the list :

• Internet Explorer
• Firefox

You will see that there is a reason for me presenting two of the browsers…

Internet Explorer

The best known & most used browser of them all is Internet Explorer. And there is probably a good chance that it is the browser that you are currently using…
There is a reason for this : it is the default browser included with Windows. And as Windows is the most used operating system… well, you don’t need to be a genius to understand why Internet Explorer is the most widely used browser.

However, even though it is the most widely used browser, Internet Explorer is technically behind the other browsers.
With XHTML, ok, everything’s alright. But as soon as you start with CSS, you will see that it doesn’t know everything, & sometimes it shows things differently to the other browsers… which can be annoying.

Only well, we can’t just wave a wand so that all Internet Explorer users start using another browser ( even though we would like to )
The problem is that Internet Explorer is the only browser that is really behind & all the other browsers more or less work the same & follow the same rules.

To be able to properly do XHTML / CSS you will need another browser as well as Internet Explorer.
I am going to show you the browser which, in my eyes, is the best : Mozilla Firefox.

Mozilla Firefox

Mozilla Firefox is a free program. It will be good as well, because like the other browsers, apart from Internet Explorer, it is up to date & lets us use the latest updates in CSS.
In fact, when we create a web site now, we generally use two browsers simultaneously : Firefox, because it shows how all the other browsers will display the pages, and Internet Explorer, to see if there are any changes that need making for IE.

Download Mozilla Firefox
Download Firefox Here

As well as displaying web sites correctly (which should be enough already to make you want to change browser), Firefox has other interesting functions :

• The google search bar is already installed by default
• It stops popups
• It has a good download manager included
• You can change the appearance of the browser easily (it has a skins system)
• The tabs are easy to use
• You can install plugins to add extra usages to the browser :
  I strongly recommend the Web Developer & Firebug plugins

Anyway, as far as I’m concerned I’ve gone on to Firefox, & I do my best to let others know about it (as you may have noticed).
No I don’t have anything against Internet Explorer, but as you will notice during these lessons, IE is behind and you will need a more up to date browser to see the latest CSS updates.

And that’s the end of the first chapter

All that we have done is prepare ourselves, see what we’re going to talk about, and download the programs that will be useful to us.
In the next chapter we will see how to create our first page in XHTML !