sabato 20 agosto 2011

HTML / CSS – What Do We Do Now (Conclusion)

html conclusion HTML / CSS What Do We Do Now (Conclusion)

It’s always the same. You see the summary of the tutorial for the first time, look at the list of chapters, and say to yourself : What ?! You need to learn ALL that to make a web site ??
And nonetheless you read the chapters one by one and… you eventually reach a page called Conclusion.

You ask yourself the question Have I learnt everything ? or What shall I do now ?.

I think the first thing we need to do is a summary. That’s to say, a conclusion of everything we’ve seen now that everything’s finished.

At the same time, this will be the occasion to find some things that we haven’t seen.
Why ?
What’s the point ?
How to find out more ?

So many questions that I’ll try to find answers for icon wink HTML / CSS What Do We Do Now (Conclusion)

You must remember that the lessons were separated into 3 parts :

Part I : XHTML tags : After a brief introduction about the tools that are used (Notepad, Notepad++) and the browsers (Internet Explorer, Firefox, Opera…), we started making our first pages entirely in XHTML.
We learnt the basic structure of an XHTML page, how to write text, how to make links, and finally how to insert images.

In this part I voluntarily avoided talking about CSS. Okay, the pages we made were extremely ugly, but that allowed us to learn one language at a time to start off.

Part II : It looks nicer with CSS ! : After a certain amount of time, I had to start talking about CSS. As soon as I thought you had enough knowledge of XHTML, we started on CSS. The chapters were quite long, I admit, and it was quite challenging. In effect, once the basics of CSS were learnt, we simply had to… learn the loads and loads of CSS properties.

I did my best to stop the chapters from being too repetitive, but CSS is made like that, I didn’t invent anything.

Part III : XHTML & CSS – Always Stronger ! : After that we went to the next level. In this part, XHTML & CSS worked side by side, and the least we can say is that you had to pay close attention. Right, the first chapter on lists was an easy introduction so that you could see how the two languages worked together. But then came the chapters on blocks, positioning in CSS… the hardest part of the lessons. It was delicate but indispensable to be able to create a proper design.

design HTML / CSS What Do We Do Now (Conclusion)

After having seen how tables are made, we finally stopped with forms. A chapter which, as you’ll have guessed, wasn’t placed at the end for nothing. In effect, it was a frustrating chapter because we could only create forms without being able to process the data.

And I promised to say a bit more about PHP, this famous language that’ll allow us to retrieve the information from forms. We’ll talk about that a bit further on.

Are there any XHTML tags and CSS properties that we haven’t seen ?

The answer is of course… yes.
Let’s see them now.

First of all, let me clarify things : if there are elements that I haven’t talked about, it’s mainly because they didn’t enter into any of the themes of the chapters. And as I prefered not to make a scrappy chapter name Other Tags, I avoided the subject.
However, because of my honesty, I’ll still tell you about the things we haven’t seen icon smile HTML / CSS What Do We Do Now (Conclusion)

So there are tags you don’t know. Will that penalise you ?
Not really. For example we didn’t talk about the

tag. It’s a tag that creates separation lines on a page. You can explain it in one sentence, so it’s difficult to create a chapter about it icon wink HTML / CSS What Do We Do Now (Conclusion)

So, how can I get the list of XHTML tags that exist to complete my knowledge ?

Simply go to the chapter List Of XHTML Tags in this tutorial.
There really aren’t a lot of tags that we haven’t seen. Because of this, I suggest that you make sure that you understand everything we HAVE SEEN before rushing off to see the other tags.

With CSS, things are a bit different. There are a lot of properties, and I made the effort, as I promised, to make sure you saw the majority of them.
However there are some I didn’t talk about. Mainly, it’s because they’re used in specific cases : there are some for example that are used to show the pronunciation, others to give instructions to printers etc…
And I simply left some to one side to keep things simple enough to understand.

But once again, if you want to know everything, I invite you to read the chapter List Of CSS Properties.

Also in CSS, you must know that there are a lot of tricks that are used for precise effects. These tricks weren’t seen in the lessons either because they’re used in specific cases.
Some allow you to create nice menus, others correct bugs in Internet Explorer etc…

I said I would talk about PHP, the moment has finally arrived.
More generally, we’re going to see if there are any other languages that you can learn in relation to XHTML and CSS.

These languages can be split into 2 categories :

client based languages : languages that are launched on the visitor’s computer. In which case it’s the computer that does the necessary things to obtain the desired effects. Among the client based languages, the best known one is JavaScript, which you have probably heard about as it is very popular.

server based languages : this is more serious. These languages are launched on machines called servers. They’re a sort of huge computer that you’ll never have seen and whose sole job… is to distribute your web site to visitors.

Server based languages are more complicated, but also a lot more powerful than client based languages.
There are several server based languages :

PHP : very popular, you may have heard about it… Oh yes, I’ve been going on about it without telling you what it is icon biggrin HTML / CSS What Do We Do Now (Conclusion)
All you need to remember for the moment is that PHP is very popular with webmasters who have a bit of experience because it’s free and very powerful.

ASP : this language is less well known. ASP was developed by a business you know well: Microsoft. And as Microsoft rarely does things for free… icon biggrin HTML / CSS What Do We Do Now (Conclusion)
ASP has therefore been less successful than PHP because it’s expensive, and I’m sure you wouldn’t want to pay to be able to develop your own site (it’s a human feeling, don’t be ashamed icon wink HTML / CSS What Do We Do Now (Conclusion) ). It’s mainly businesses that use ASP. And yet… a lot of them are converting to PHP, which is just as powerful as ASP and has the advantage of being free.
There are other server based languages as well such as Perl but seeing as PHP has dominated them, I won’t bother going into detail about them.

Now we’ll talk in more detail about a client based language (JavaScript) and a server based language (PHP).

Javascript goes back quite a long time. It is, as I said earlier, a language that is launch on the client’s machine, meaning the visitor’s computer. It allows us to edit the XHTML code without having to reload the page all the time.

Contrarily to XHTML, Javascript is a programming language.
To give you an idea of what it’s like, here’s a bit of Javascript :

Code : JavaScript

function switch_spoiler(div2){ if (div2.getElementsByTagName('div').length > 0) var divs = div2.getElementsByTagName('div'); else var divs = div2.parentNode.nextSibling.getElementsByTagName('div'); var div3 = divs[0]; if ( == 'visible') = 'hidden'; else = 'visible'; return false;}

This code changes the style of a tag when we click on it : it changes visibility to hidden if it was visible, and to visible if it was hidden. It lets us hide or show text on the screen when the visitor clicks on it.

We can write Javascript directly in a .html file, or better : in a .js file. (just like putting CSS in a .css file).

Javascript is difficult to resume in a couple of lines because it can produce a very large variety of effects :

We’ll use it often to change CSS properties without reloading the page.
For example, you roll over an image and the site’s background changes colour (we can’t do it with :hover because it concerns two different tags, that’s the limit of CSS).

We can use it to change the XHTML source code without reloading the page

It can be used to show dialog boxes on the screen

Or to change the size of a window…

Javascript is used in a very popular programming method at the moment, that you may have heard of : AJAX (Asynchronous JavaScript And XML). It’s a language that combines JavaScript and XML to communicates with servers and dynamically reload certain parts of the page. Services such as GMail and Netvibes use it a lot, and they’re not alone.

Server based languages and client based languages can’t be compared because they do different things. Therefore don’t try to compare JavaScript and PHP, these languages aren’t related.

I’ve told you about Javascript and explained that the need of this language is minimal. It is used to create certain effects (a lot of them…), but globally we can manage without it.
However, it’s practically impossible to manage without PHP. Yes, we can make a web site without PHP (the proof : you can do it), but in the end you’ll need PHP.

For example, it’s PHP that allows you to process the information that visitor’s put in forms, it’ll send the information to you by email for example. Here’s a few examples from many, many applications of PHP :

Guest BookForumsNewsletterChatVisitor CountersAutomatic News SystemsMember SystemsPHP Games for Websites (strategy games, role play games…)We’ll stop there shall we icon wink HTML / CSS What Do We Do Now (Conclusion)

PHP also has a very large community of programmers that’ll be able to help you out.
And it also has a mascot : the elePHPant :

php HTML / CSS What Do We Do Now (Conclusion)

PHP is quite different to XHTML and CSS because it’s a real programming language. It is a lot like C++ (the difference is that C++ is for programs, PHP is for websites).

There is one thing that PHP requires : that you already know XHTML and CSS. That’s alright for you, you’ve just learnt both of them icon biggrin HTML / CSS What Do We Do Now (Conclusion)

PHP will, to put things clearly, make your life easier (after having complicated things of course icon biggrin HTML / CSS What Do We Do Now (Conclusion) ).
It allows you to make your site, in some ways, completely automatic. A PHP site, is a site that updates itself without needing you to be sat in front of your screen.

So, to keep things simple, there are 2 types of site :

Sites in XHTML and CSS (that you can now do) : these sites work very well, but to update them you systematically need to change the XHTML / CSS. Generally these sites are quite simple, and often are small sites.
A site made in XHTML and CSS are called static, because they can’t be modified without your intervention.

Sites in XHTML + CSS + PHP : with the addition, the site is, in many ways, automated. Once the XHTML, CSS and PHP code has been set up, you won’t (hardly ever) need to touch the source code. For example, to add news you simply need to fill in a form and click on submit !
A site made in XHTML, CSS and PHP is called dynamic because it is a site that doesn’t really need your intervention to develop. A dynamic site is a lot more attractive and easier to update, which explains why most of the big sites use PHP.

Do you want a glimpse of PHP to see what it looks like ?

Code : PHP

ip is the address of the visitor $returnip = mysql_query('SELECT COUNT(*) AS number_entries FROM connected WHERE ip='' . $_SERVER[REMOTE_ADDR'] . '''); $datas = mysql_fetch_array($returnip); if ($datas['number_entries'] == 0) // The ip isn't in the table, we'll add it { mysql_query('INSERT INTO connected VALUES('' . $_SERVER['REMOTE_ADDR'] . '', ' . time() . ')' ); } else // The ip already exists, update the timestamp { mysql_query('UPDATE connected SET timestamp=' . time() . ' WHERE ip='' . $_SERVER['REMOTE_ADDR'] . '' ' ); }?>

It’s a bit of PHP code that allows you to show the number of visitors connected to your site icon smile HTML / CSS What Do We Do Now (Conclusion)

If I were you, I’d carry on practising XHTML and CSS, to be sure that you know them well, then read chapter 1 of the PHP tutorials.

Reading the 1st chapter doesn’t cost you anything, and it’ll give you a more clear idea of what PHP is like.
It would be a real shame if you didn’t learn this language.

This time my friends, it really is the end icon sad HTML / CSS What Do We Do Now (Conclusion)

What can I add before finishing ?

Well, first of all it’s been a pleasure sharing my knowledge and experience with you.
If you haven’t looked yet, there are cheat sheets after the chapters of the lesson. You’ll almost certainly find some extra and useful information in there. There are also some extra chapters such as How to put your site on the web, or How to earn money through advertising etc. etc…

As you can see, the world of computing holds lots of surprises, which, if we take the time to find and learn about, finish by astonishing us. It’s this curiosity that you need to keep, in computing, but also elsewhere.


Nessun commento:

Posta un commento