xHTML? CSS? What's that? || Editors || Browsers

[mg13gr]

xHTML? CSS? What's that?

 

To create a website, we need to give information to the computer.

Just typing the text you plan to have on your website will not make it. You also have to know how to arrange this text, insert pictures, create links, etc.

To explain to your computer what you want to do, you will have to use a language it can understand.

 

Some languages are meant to build programs, like C++ or Java. However, those are quite complex and intended for people with IT skills.

xHTML and CSS are languages especially used in web design, and they have been developed to be easy to handle. My aim is to teach you how to use them.

 

Q: OK, but why do we have to learn two languages to create a website? Isn't one enough?

 

A: It is true that knowing you have to learn two languages at the same time, you might be pondering whether it is not too much for you.

No worries: as we go, you will realize that everything has been very well designed. Each language is used to perform specific tasks, and those two can be combined naturally so it eventually results in a website:

 

[*] xHTML: is the acronym for eXtensible HyperText Markup Language. Take it easy, if you do not memorize this, you will still sleep at night. ;)

This language will be used to manage your website's content. It handles logical information, for instance: "This is my title, this is my menu, here is the main text on the page, here is a picture, etc."

 

Info: xHTML replaces the former HTML language (I am sure you have heard about this one). They are quite alike, but xHTML has been better thought out.

In other words, xHTML is the most recent language, that is why we will learn it.

 

[*] CSS: is the acronym for Cascading Style Sheets. This language will take care of the webpage's style. For instance, we will say in CSS: "My titles are red and underlined, my text is written in Arial, my name is centered, my menu has a white background, etc."

Thanks to this language, you will be able to quickly and easily create your website's layout. We will benefit from a nifty style without being an expert at graphics (and it is better this way, for when it comes to graphics, I'm a real dummy.  ;D)

 

In short, we will use :

 

    [*] xHTML to write the website's content.

    [*] CSS to display this content with style.

 

These languages are complementary, each one needs the other. If you remember xHTML handles content, and CSS deals with style, believe me: 95% of the job is done!

 

However, in the first part of this course, we are not going to talk about CSS. We will focus on xHTML, just because we must begin with it.

Without CSS, you will manage to create your first webpages. They will be a little bit ugly, but do not worry... When you reach the second part of this tutorial, we will introduce CSS, and your webpages will suddenly become much more attractive without any kind of effort (well... almost). :)

 

 

Editors

 

No doubt you are wondering what software you would need to make your website.

 

Actually, there is a bunch of it.

But why would you be looking for some expensive and complicated software, when you already have everything at home?

That's right, I'm talking about Notepad!

 

 

Believe me or not, Notepad is good enough to make a website!

If you own a Mac, you certainly have some similar software: a regular text editor.

 

OK, in theory, Notepad/Wordpad would do the job. I used it to make my first website (actually, this one: "Newbies Paradise", I have only made one so far :D ).

However, I managed to find some very useful software, which will help you by automatically colouring xHTML / CSS code.

 

This software is easy to use, and free. Its name is Notepad++, and you can download it here:

 

Download page for Notepad++

Take the .exe version, not the .zip one

 

Using Notepad++ is not mandatory, you would still make it if you stick to Notepad. But hey, Notepad++ being free and of a great help, it would be a pity not to use it.

 

Info: If you run Mac OS, you will find a great deal of similar editors. I would recommend Smultron.

With Linux, there are also a lot of editors lying around. Besides, you probably already have vim or emacs installed.

 

When you are done installing Notepad++, I would advise you select "HTML" from the "Language" menu to tell the software you are writing xHTML.

 

When you use Notepad++, it will colour your code like this:

 

 

 

At this point, do not worry too much about all the stuff you see here. This is just to give you and idea of what this software can do.

 

Alright, now we are all set and have our web pages editor, let's talk about the last mandatory item (which you also have): the web browser.

 

 

 

Browsers

 

 

o you know what a web browser is?

 

This would be obvious for some of you, but since I promised we would start from scratch (that is what this website is made for) I will explain quickly for those who may not be comfortable with that.

 

The web browser is the software you use to view websites. If you are reading these lines, it means you are using a web browser right now. ^^

 

What the browser does is it reads the xHTML / CSS code you wrote to display what it means on your monitor. For instance, if your CSS code says "The titles are in red", your web browser will display the titles in red.

 

The most famous web browsers are:

• 
  Internet Explorer
  Mozilla Firefox
  Opera
  Netscape
  Konqueror (for Linux)
  Lynx (for Linux)
  Apple Safari (for Mac)
  
• 
  

 

I am going to introduce you to two of them:

 

• Internet Explorer
  Mozilla Firefox
  
• 
  

 

Of course, there is a reason why I chose to spend some time on these ones...

 

 

 

The most famous web browser -and the most used one indeed- is Internet Explorer and I think I'm right saying you are probably using it right now...

 

There is a reason to it: it is shipped with Windows. Windows being the most popular Operating System... no need to be a genius to understand why Internet Explorer is the most commonly used broswer.

 

 

The thing is, Internet Explorer has ONE major issue: it has not been updated since 1999, meaning it has not changed at all since then...

 

It's OK for xHTML rendering, but when it comes to CSS, you will see it cannot handle everything fine, and will sometimes display CSS differently to other browsers... which is a problem.

 

The above version is the most recent -and decent- one (Internet Explorer 7). But the previous version (Internet Explorer 6) is still widely used by many surfers who didn't bother updating.

 

 

The most used Internet Explorer (abbreviated "IE") versions are :

 

• IE 6: shipped with Windows XP
  IE 7: shipped with Windows Vista
  
• 
  

 

The two of them have the same kind of problems, but IE 6 is obviously the worst since it is the oldest one.

 

Even though that would be pleasant, we cannot push everyone to change their web browser in a snap (how great would that be :p ).

 

Actually, IE is the only outdated browser, all the others are fine.

 

If you want to practice xHTML / CSS correctly, you must have another web browser AND also IE.

 

I will introduce you to the one I prefer : Mozilla Firefox.

 

Mozilla Firefox

 

 

 

Mozilla Firefox is freeware, available in many languages, and (like all other browsers except IE) up to date, so we can fully enjoy the latest CSS features.

 

Nowadays, when building websites, you usually have two browsers running: Firefox, which displays the webpage like all others browsers would... and Internet Explorer, which is a peculiar case: you may have to do some adjustments in your code so your page would be displayed properly with this browser.

 

This is what Firefox looks like :

 

 

 

I really recommend Mozilla Firefox to you. If you don't download it, you will realize soon enough you need it anyway, so just do it now! ;)

 

Click the following link to download Firefox with the Google Toolbar for search purposes:

 

Download

 

As you can see, it is easy: you just have to click "Download Firefox" and it is done!

 

Of course, the software is available in English, but you can choose another language if you want to. ;)

 

 

 

Not only Firefox can display web pages correctly (this reason being good enough to use this navigator instead of IE), but it also features some interesting things:

 

[*]A Google Search Bar (shipped in the default package).

[*]It blocks popups.

[*]It has a very handy download manager.

[*]Its appearance can be easily changed (it features a "skins" system).

[*]Firefox uses tabbed-browsing: instead of having fifty IE windows opened, you only have one Firefox window where you can easily switch from a webpage to another.

[*]You have to press Ctrl + T to open a new blank tab and you just have to click a link while keeping the Ctrl key pressed to open it inside a new tab. That is really useful!

[*]We can also add plugins to Firefox.

 

I advise you "Web Developer", a toolbar you will surely use when developping your website. It looks like this:

 

 

Well, as for me, I have adopted Firefox, and I try to spread the word about it (as I am doing right now).

 

Not that I have a problem with Internet Explorer, not at all, but running through the tutorial, you will realize how outdated it can be, and how useful it is to have a browser like mozilla handy.

 

Info: You can install Firefox without uninstalling Internet Explorer. These two browsers work perfectly together.

 

Do not hesitate to talk about Firefox to your friends, family, etc. Every single Webmaster (even me!) will be grateful to you! ;)

 

 

Credits to: M@teo21

[MasterDisaster]

Good job panos...Keep sharing!!And btw,gratz for teh rank!!

[Bleik]

:O Amazing work my friend ;)

And gratz for your promotion.

[ExTrEmEDwarf]

the last notepad++ version is 5.4.5? inform me with the latest version, and gr8 job :P

[MadDealer]

nice one bro and gratz for ur new position

[αмοяαl]

amazing one thnx magaki <3 also gratz for the proest rank m8 :)

[mg13gr]

the last notepad++ version is 5.4.5? inform me with the latest version, and gr8 job :P

Yes, if I am not wrong..

 

 

Ty everyone for your good comments. :)

[Commodus]

Good guide,magaki.

 

I didn't know that notepad ++ exist.

 

I will download it now and test it.

[Stealth]

They could also use Adobe Dreamweaver which is better when you have to make css too.