Hébergement, logiciels

Pour avoir un site web, il faut 2 choses : un serveur et une adresse web (ex : https://jannaud.fr ici) que l'on redirige vers le serveur. Le tout est souvent vendu sous forme de pack comme ici à 1&1.net, le fournisseur que j'utilise et qui est le meilleur du marché.
Un serveur est un peu comme un disque dur accessible par tous sur le net. J'ai écrit ces pages sur mon ordinateur personnel et après je les envoie sur le serveur pour que tout le monde puisse les lire depuis le monde entier. Ainsi, quand quelqu'un tape https://jannaud.fr, il est redirigé vers les fichiers du "disque dur" / serveur.

Un serveur est même un peu plus intelligent que ça, il peut avoir une base de données et stocker des informations. Par exemple Amazon a une grosse base de données avec le prix, l'auteur, une image... de millions de livres. Cela veut dire que quand vous demandez une page sur Amazon, le serveur effectue des tas de calculs très rapidement avant de vous envoyer la page, et en fonction du stock, du pays, ... le prix et d'autres informations sur la page peuvent changer. C'est ce qu'on appelle des pages dynamiques, a contario des pages statiques qui ne changent pas au cours du temps.

Je vous conseille de faire un site qui fonctionne bien sur votre ordinateur, et quand ce sera fait, achetez vous de l'hébergement et publiez-le, ne faites pas l'inverse !

Si vous avez Windows, téléchargez Wamp ou Mamp si vous avez un Mac. Ce logiciel transformera votre ordinateur en serveur local. Quand vous développerez votre site, vous utiliserez votre navigateur internet (Google Chrome, Firefox, Internet Explorer, ...), irez sur quelque chose comme http://localhost:8888/monsite/mapageweb.php et vous verrez tout exactement de la même manière que si vous aviez payé pour un hébergement et un super nom de domaine. Personne d'autre ne peut y accéder, vous pouvez donc bidouiller tout ce que vous voulez.

Il ne suffit pas d'installer Mamp ou Wamp. Il faut qu'ils soient en train de tourner si vous voulez que ça fonctionne. Si vous éteignez votre ordinateur et le rallumez, il faudra relancer Wamp/Mamp avant de pouvoir travailler sur le site.

Sur un Mac, vous devez avoir votre site dans le dossier Sites. Allez donc dans ce dossier Sites (au même endroit où vous avez les dossiers Musique, Films et Images) et créez un dossier avec le nom du site que vous voulez, sans espace si possible. Le nom n'a pas d'importance. Si le nom est "monsite" et votre fichier toto.html alors il sera lisible à http://localhost:8888/monsite/toto.html. Rappelez-vous que Mamp/Wamp doit être en train de tourner.

Il vous faudra ensuite télécharger Filezilla pour envoyer vers le serveur tous les fichiers qui composent votre site. C'est un logiciel très simple à utiliser. Vous vous connectez avec mot de passe / login que votre hébergeur vous communique, vous avez vos fichiers de votre ordinateur sur la gauche, ceux sur le disque sur la droite, et vous faites des glisser-déplacer pour envoyer vos dossiers vers le serveur.

Récapitulatif

Il vous faut :

• Filezilla pour transférer vos fichiers de l'ordinateur vers le serveur.
• Wamp (Windows) ou Mamp (Mac).

Structure

Téléchargez ici un petit site tout fait qui va nous servir d'exemple. Le plus simple pour apprendre n'est pas de partir de rien mais plutôt de voir des choses qui existent déjà et de les modifier pour arriver à ce que vous voulez.

Dans ce dossier :

Comme sur l'exemple, je vous conseille d'avoir toutes vos pages web à la racine du site, et de mettre vos images, vos scripts, ... dans des petits dossiers séparés. On expliquera plus loin à quoi servent les choses.

Le mieux pour comprendre comment le site fonctionne est de MODIFIER les choses !

• Ouvrez index.html avec votre navigateur web et baladez vous sur ce (très petit) site. Il n'y a que 3 pages différentes normalement.
• Ouvrez aussi tous les fichiers avec un éditeur de texte (NotePad ou TextEdit par exemple) pour voir le code source
• N'ayez pas peur de toucher, de faire des erreurs et d'essayer. Au pire vous supprimez tout et vous téléchargez le fichier zip d'exemple une nouvelle fois. Vous ne risquez rien !
• Modifiez ci et là le texte pour voir comment ça joue dans le site.
• Essayez d'ajouter une de vos images à vous sur une des pages du site. Regardez comment j'ai fait pour l'image de la montagne et IMITEZ !
• Faites un tour dans le dossier Styles et intervertissez les noms de style.css et style2.css. Vous verrez que le site va changer du tout au tout ! Amusez vous à changer quelques propriéts, la couleur, ... pour voir comment le navigateur va opérer les changements.

Si vous voulez avoir un site, je vous conseille de partir d'une structure toute faite, comme celle-là. Changez juste le texte, les images, les liens, ... Et voilà. Pour avoir un style, rien ne vous empêche de piquer tout simplement le style d'un ou de plusieurs sites qui vous plaisent. De toute manière on peut voir le code source d'une page donc ce n'est pas dur, il suffit d'aller sur un site et de faire Fichier->Enregistrer pour voir tous les fichiers et le code d'un site.

FrontPage / DreamWeaver : Que choisir ?

Je l'ai dit dans la partie programmation et je le répète, le mieux est de ne pas choisir ces éditeurs de site web. Difficile à croire, je veux bien, cela semble plus rassurant de les utiliser. Mais alors pourquoi ?

1. J'ai déjà utilisé ces logiciels, et pour bien les utiliser il faut d'abord s'acheter un bouquin / consulter des tutoriels pour pouvoir bien appréhender ces logiciels. Donc perte de temps, car vous voulez apprendre à vous faire un site web ou apprendre à utiliser un logiciel puis après apprendre à faire un site web ?
2. Vous allez vous donner un mal de chien à faire des choses simples à faire, comme mon menu sur la gauche qui ne bouge pas quand vous faites défiler le reste de la page.
3. Vous voulez un site dégueulasse comme ça ? Alors ne suivez pas mes conseils et utilisez FrontPage ou DreamWeaver.
4. Maintenant internet est accessible depuis un iPhone ou autre (écran disons de 5 cm * 10 cm), à un Vaio (11 pouces), à un ordi normal, jusqu'aux iMac 28 pouces (écran 50 cm * 50 cm). C'est pour cela qu'il faut faire un site web qui ne dépende pas de l'ordinateur visé. Et DreamWeaver et FrontPage ne sont pas faits pour ça.
5. Dernier argument, un jour vous voudrez aller plus loin dans votre site : faire des petits scripts, ajouter du PHP (pour stocker des données, pour connaître l'IP des gens qui viennent sur votre site, ...) et vous ne pourrez pas en faire avec DreamWeaver/FrontPage. D'autre part, comme ces logiciels écrivent le code HTML à votre place, 1) le code généré n'est pas très beau donc pas facilement modifiable et 2) vous n'avez pas l'expérience d'écrire du code HTML et ça vous gênera pour écrire du JavaScript ou du PHP.

Bref, faites moi confiance et n'utilisez pas ces bêtises. D'ailleurs les professionnels ne les utilisent pas !

HTML, PHP, JavaScript, ... : Que choisir ?

Vous avez certainement entendu parler de ces langages, mais comment choisir celui avec lequel on fait un site ? Et bien en fait un peu tous, tout dépend de vos besoins. Explication :

HTML

C'est sans doute le seul à connaître vraiment bien, si on veut se faire un site simple, avec des pages, mais pas de forum, ni rien d'autre. Mais pas de panique ! Ce n'est pas un langage de programmation. C'est juste un moyen commode pour indiquer à votre navigateur web ce qu'il doit afficher : le texte que vous souhaitez, la couleur de celui-ci, les images autour... Enregistrez une page web quelconque, et ouvrez le .html avec le bloc notes. Vous verrez que ça ne ressemble pas tant à du chinois que ça ! Ça s'apprend en 10 minutes.

Vous êtes par contre OBLIGES de l'apprendre, car toute page Web, faite en PHP ou quoi que ce soit d'autre, est amenée à générer au final du HTML.

Le défaut du HTML, c'est qu'il ne permet pas d'intéractivité : ça affiche quelque chose, c'est tout. Il n'y a pas de forum de discussions, ni rien de ce type possible avec. C'est pourquoi on a créé les autres langages.

CSS

Ce n'est pas vraiment un langage. C'est le pendant du HTML qui dit comment mettre en forme une page HTML. Vous écrivez juste des choses du genre "mettre tous les titres en blanc sur fond bleu", "encadrer les images d'une bordure", ...

JavaScript

Il n'est pas nécessaire pour faire des pages Web, mais c'est celui qu'il faudra apprendre pour avoir de l'intéractivité, c'est à dire des animations, des petits jeux, mais aussi de faire des requêtes au serveur dans le background, pour charger des choses sans avoir à changer de page.

PHP

A la différence de Javascript qui s'exécute sur votre ordinateur, PHP s'exécute sur le serveur avant de vous envoyer la page Web. C'est donc lui qui va créer un contenu dynamique, au sens où tout le monde ne va pas voir la même page. Quand vous allez sur un forum, le contenu change en fonction du temps. Quand vous allez sur gmail pour voir vos emails, vous voyez VOS emails, pas ceux de quelqu'un d'autre. Le contenu change en fonction de l'utilisateur.

Le PHP est en fait créé spécialement pour gérer des bases de données et faire intéragir le visiteur du site avec. Et ceci très simplement, par le biais de requêtes MySQL.

Les grandes étapes

Par où commencer ?

Déjà, il vous faut savoir quoi mettre dans votre site, ce qui est la partie la plus difficile !
Ensuite, téléchargez ici un petit site tout fait qui nous a servi d'exemple dans les onglets précédents et modifiez les pages et le contenu, tout simplement.

Si vous avez suivi mes conseils, vous ne tenterez pas d'utiliser FrontPage ou DreamWeaver ou n'importe quel autre logiciel compliqué. Tapez vos pages Web dans un éditeur de texte tout bête (bloc note, NotePad++, ...) et regardez ce que ça donne avec votre navigateur.

Il ne faut pas se soucier du style pour l'instant. Ça viendra après. Ce qu'il faut comprendre c'est que dans vos fichiers html vous taperez le contenu / la structure du site, et dans le fichier des styles, vous associerez une mise en forme à la structure. Dans l'exemple à télécharger, il y a 2 fichiers de style, très vite fait, pour un seul contenu. Comme ça vous pouvez tout contrôler depuis un seul fichier, pour avoir un design global cohérent, simple et rapide.

Cliquez ici si vous ne me croyez pas : ce site s'appelle le "Jardin Zen CSS" parce que justement, il y a un seul contenu qui a été écrit, et après des graphistes se sont amusés à mettre du style. Ce site illustre bien le fait qu'on doit séparer le contenu du style : le design change simplement du tout au tout sans que le contenu ne change, juste en associant une feuille de mise en forme différente.

Bref, fermez les yeux et laissez vous guider...

Le HTML et ses balises

Téléchargez ici un petit site tout fait qui nous a servi d'exemple dans les onglets précédents, et ouvrez un éditeur de texte un des fichiers HTML pour voir son contenu.

En HTML tout est entre des balises. Elles servent à structurer votre document. Si vous voyez cette page, il y a un titre en haut, puis un petit paragraphe, puis une bande verte avec un titre dedans, puis des petits paragraphes, puis une bande marron avec un autre titre (le sous-titre), et encore d'autres paragraphes, ... et ainsi de suite.

Pour ce faire : ouvrez une 'balise', écrivez ce que vous voulez, puis fermez la balise.

Pour un nouveau paragraphe

<p> (votre texte de paragraphe) </p>

Pour un titre

<h1> (votre titre) </h1>. Pour un sous-titre : h2 et /h2, pour un sous-sous-titre : h3 et /h3, ... (jusqu'à h6 et /h6 en fait, mais très peu utilisés en pratique)

Pour faire une liste

<ul>
	<li> (votre premier "item") </li>
	<li> (votre second "item") </li>
	<li> (votre troisième "item") </li>
	...
</ul>

. Remplacer ul et/ul par ol et /ol pour créer une liste numérotée (ul : unordered list, et ol : ordered list).

Pour insérer un lien

(Dans un paragraphe seulement) : <a href="http://www. ...."> (nom du lien) </a>. L'adresse de votre lien peut être absolue (http:// ...) ou relative (mesphotos.html) : le lien pointera alors vers votre page mesphotos.html, à condition que ce fichier soit dans le même dossier que le fichier que vous êtes en train d'écrire.

Pour un lien vers un endroit précis de votre page

Dans votre page, écrivez <a name="unnom"></a>. Alors un lien <a href="#unnom"> pointera vers cet endroit de la page. Faites <a href="uneautrepage.html#unautrenom">un lien</a> pour atterrir en plein "milieu" d'une autre page. Faites <a href="#">Haut de la page</a> pour faire revenir au sommet de votre page web.

Pour insérer une image

Dans un paragraphe, à la place du texte d'un lien, ou n'importe ou : <img src="maphoto.jpg" alt="ceci est ma photo" />. src est l'abbréviation de "source". Elle peut être encore une fois absolue ou relative. src="MonDossier/static/images/MonSousDossier/maphoto.jpg" pour inclure des images dans un dossier. "alt" est l'abréviation de "texte alternatif". Les ordinateurs des mal-voyants lisent ce texte alternatif, pour que les mal-voyants aient une idée de l'image qu'ils pourraient voir s'ils avaient des bons yeux.

Pour mettre en exergue du texte

Vous avez le choix : <b> et </b> pour mettre en gras, <it> et </it> pour mettre en italique, ... Mais souvenez vous qu'il faut dissocier le contenu de la forme. Je mets personnellement <em> et </em> (em pour "emphase") pour mettre du texte en valeur. C'est seulement après que je pourrais définir de quelle manière (souligner le texte, le mettre d'une autre couleur, l'encadrer, ... les possibilités sont multiples.) L'intéret encore une fois de séparer contenu et forme permet ici, en mettant 'em' au lieu de 'b' ou 'it' est que si je change d'avis, je peux changer toutes mes mises en valeurs d'un seul clic, alors que si vous avez mis 'b', ... vous n'avez plus le choix : ce sera gras et rien d'autre.

Pour créer une liste de définitions

C'est un peu comme les listes, mais il y a 2 "item" à chaque fois. Par exemple vous être en ce moment même en train de lire une liste de définitions !

<dl>
	<dt> (mot à définir) </dt>
		<dd> (la définition du mot) </dd>
	<dt> (2eme mot à définir) </dt>
		<dd> (la définition du mot) </dd>
	<dt> (3eme mot à définir) </dt>
		<dd> (la définition du mot) </dd>
	...
</dl>

"dl" est pour definition list, "dt" pour definition title, et "dd" pour definition description.

Pour crée un tableau

<table>
<thead>
    <tr>
      <th>titre colonne 1</th>
      <th>titre colonne 2</th>
		...
    </tr>
</thead>
<tbody>
    <tr>
      <td>ligne1 colonne1</td>
      <td>ligne1 colonne2</td>
      <td>ligne1 colonne3</td>
      <td>...</td>
    </tr>
    <tr>
      <td>ligne2 colonne1</td>
      <td>ligne2 colonne2</td>
      <td>ligne2 colonne3</td>
      <td>...</td>
    </tr>
...
</tbody>

Vous l'avez compris, head pour les en-têtes des colonnes, puis viennent les tr (tables rows) : les lignes.

Une petite bizarrerie

Les navigateurs web ne tiennent comptent ni des retours à la ligne, ni des longs espaces.

Les remèdes :

Pour aller à la ligne dans le paragraphe

<br/>. C'est une des rares balises qui s'ouvre et se ferme en même temps. (En même temps, c'est normal, ça demande juste de passer à la ligne, il n'y a pas besoin de mettre du texte !). Elle est cependant peu utilisée, on préfère souvent fermer le paragraphe et en créer un nouveau.

La balise <pre> ..... </pre>

Là par contre tout ce que vous mettrez entre sera pris en compte : si vous mettez 10 espaces, le navigateur mettra 10 espaces. Idem si vous faites des sauts de ligne. Attention cependant à ne pas abuser de cette balise. Je vous vois venir avec vos gros sabots ! Vous n'avez pas envie de faire des <ul> ... alors vous allez mettre un <pre> tout en haut de votre document et écrire normalement. Mais ça c'est mal. Parce que si vous faites ça, le navigateur ira à la ligne que quand vous mettrez un retour à la ligne. Autrement dit si vous faites une grande phrase ça ne marchera pas.

Pour vous donner un exemple, je mets <pre> quand j'ai affiché le code pour mettre la table ou la liste, sinon il m'aurait fallu écrire quantités de <br/>. Réduisez votre fenêtre, et vous verrez que mes paragraphes normaux se réduisent aussi pour s'adapter, alors que mes paragraphes sur fond blanc, non !

Imbrication des balises

D'une part vous avez le droit d'imbriquer toutes ces balises : mettre des images, des liens, ... dans un paragraphe, mais aussi des listes dans les cellules d'un tableau, faire des sous-listes, ... Il n'y a rien à changer en fait, juste au lieu de mettre "carottes", "petits pois" et "choux" dans les <li> vous mettez ul, li /li li /li /ul. Exemple :

• viande
• légumes :
  • tomates
  • carottes
  • ...

Et le code correspondant :

<ul>
<li>viande</li>
<li>légumes : <ul>
		<li>tomates</li>
		<li>carottes</li>
		<li>...</li>
	</ul>
</li>
</ul>

Code complet d'une page

Pour ceux qui se demandent comment je fais pour afficher un signe < par le navigateur sans que celui-ci croit que c'est un bout de balise : j'écris &lt; ("lower than") et il y a beaucoup d'autres symboles pour ça. Pour écrire & j'écris &amp; par exemple. Comme d'habitude, n'oubliez pas que vous pouvez VOIR le code source de n'importe quelle page internet, pour savoir comment leur code HTML est fait ! Faites simplement Fichier ou Edition ou clic droit ou ... -> voir le code source de la page

Et enfin : je l'ai gardé dans un coin pour ne pas vous décourager tout de suite à faire du html, mais voici ce qu'il faut mettre en tête de votre fichier : c'est pour indiquer au navigateur que vous faites du html et pas autre chose.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Page perso de Thomas Jannaud : Langages Web</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" type="image/png" href="/static/images/monicone.png" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>


<!-- METTEZ VOTRE CODE ICI
body est le "corps" de la page, le reste ne servant
pas à grand chose, sauf 'title' qu'il faut changer
ainsi que l'icône, optionnel -->



</body>
</html>

Vous méritez une petite explication

Les 2 premières lignes

Elles servent à dire à votre navigateur : "ceci est du XHTML. Affiche cette page en tant que tel". (Parce que les navigateurs ouvrent aussi les images, ...) Inutile d'apprendre ce code par coeur ! Faites du copier-coller, comme tout le monde.

link

Le premier 'link' sert à relier votre page à 'style.css' : c'est ce fichier qui déterminera tout le design de votre site. Le second sert à spécifier un icône pour votre page (= une image png ou jpg, de taille 16x16 ou 32x32). Ces 2 links ne sont pas obligatoires.

meta

Normalement il y a beaucoup plus de balises meta. Elles servent aux moteurs de recherche. Vous mettrez dedans vos propres mots-clés définissant votre page.

<!-- Le commentaire -->

Les balises <!-- --> permettent d'insérer un commentaire dans votre site. Le navigateur n'en tient pas compte, mais il sert à celui qui écrit le site, par exemple pour se dire "demain penser à rajouter ça ici".

A la différence des logiciels exécutables, les pages internet ont un code "clair", c'est à dire que tout le monde peut voir ce code, il n'y a pas de compilation créant des fichiers objets ou autres. Par exemple dans FireFox, Menu "Affichage" puis "Code de la page". Comme ça si vous aimez bien le design d'un site, vous pouvez tout simplement faire un copier-coller du code, et changer juste le texte. Un peu bizarre qu'il n'y ait pas de sécurité de ce côté...

Et le meilleur pour la fin...

Il existe des balises un peu spéciales pour insérer des objets "inhabituels" : Flash, applets java, vidéos youtube, ...

Vidéo Youtube

<object width="400" height="300" type="application/x-shockwave-flash" data="http://www.youtube.com/v/votrelien"> <param name="movie" value="http://www.youtube.com/v/votrelien"/></object>

Applet Java

<!--[if !IE]>-->
	<object classid="java:maclasse.class" type="application/x-java-applet" archive="monjar.jar" height="300" width="200" >
	  <param name="codebase" value="Applets" /> <param name="param1" value="valeur1" />
	<!--<![endif]-->
	  <object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" height="300" width="200" > 
		 <param name="codebase" value="Applets" /> <param name="code" value="maclasse" /> <param name="param1" value="valeur1" />
	  </object> 
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->

Ce code complexe n'est pas à comprendre. Il est cependant valide XHTML et fonctionne sur tous les navigateurs. Et c'est tout ce qui compte. Sa lourdeur est dûe au distingo fait entre IE et les autres navigateurs... :)
Le paramètre "archive" est optionnel (c'est si vous avez plusieurs classes java). Le paramètre "codebase" est optionnel aussi : c'est le nom du dossier dans lequel est mis votre applet (ne rien mettre si votre applet est dans le même dossier que votre page html).
Sinon "param1", "valeur1" ce sont les arguments transmis à votre applet. Optionnels aussi, donc, et en nombre illimité (avec le nom qu'on veut). Ils se récupèrent en Java par String s = getParameter("param1"); (et s vaudra "valeur1"). Cf ma page de Rubik's Cube si vous voulez voir le code Java et le code Html associé pour appeler l'applet.

HTML 5

La "nouveauté" c'est le HTML 5. Je serais vous j'attendrais 2012 pour faire votre site en html 5, le temps que plus de gens aient des terminaux équipés. Peu de changement au niveau de la syntaxe, si ce n'est que l'entête devient

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Style/style.css" />
<title>La page d'accueil de mon site</title>
</head>

La vraie grande différence du HTML 5 réside dans les possibilités accrues de javascript : avec les balises canvas vous pouvez dessiner et afficher de la 3D. Si vous n'utilisez pas ça, autant faire un site avec une en-tête plus "vieille" que html 5 que tous les terminaux sauront afficher.

Déboguer

Parfois il y a un soucis dans le code : si une balise n'est pas fermée, tout ce qui suit va être contenu dans la boîte de cette balise. Il peut aussi y avoir d'autres soucis. Vous pouvez vérifier votre code à cette adresse. C'est pratique, et ça vous apprend même ce que vous avez le droit de faire ou pas.

Mais le top c'est quand même une extension de FireFox qui vous dit si votre page est valide W3C ou pas, et où sont les erreurs (sans avoir à copier-coller continuellement votre code dans le W3C).

le Design

"Oui, mais avec FrontPage on peut mettre des choses en couleur, ... mais là, on fait comment ?" demandez-vous tout benoitement.

Téléchargez ici un petit site tout fait qui nous a servi d'exemple dans les onglets précédents. Nous allons nous enfin nous intéresser au fichier style.css, dans le dossier "Styles"

Le style d'un élément html s'indique en CSS de cette manière :

body {color:blue; background-color:grey;}
h1 {color:red; font-size:large; border-style:solid;
	 border-width:1px; border-color:black;}
...

Vous voyez, c'est facile. Il y a des dizaines de propriétés possibles, alors je ne vais pas tout vous dire. Les plus importantes sont : height, width (hauteur, largeur, optionnelles comme tout le reste), font-family (la police, entre guillemets ("Times New Roman"), font-size, color, background-color, border (la bordure entourant votre objet), margin (les marges entre votre boite et les boites au dessus, en dessous, à gauche et à droite, padding (si vous voulez une marge intérieure cette fois entre les éléments DANS votre boite et la bordure de la boite), ...

Enfin les propriétés de positionnement sont d'une importance capitale. Il s'agit de position:absolute (ou relative ou fixed), left, right, top et bottom.

Vous pouvez indiquer les couleurs en hexadécimal (#FAEBD7 par exemple) où dire un nom comme white, green ou blue. Vous trouverez beaucoup de noms de couleurs ici.

Les "boites"

Je les mentionne depuis le début, et je n'ai encore pas dit ce que c'est. Body c'est une "boite" qui contient toutes les autres. Un paragraphe est une boite, et elle est elle-même placée dans body. Dans les paragraphes il y a des liens (placés dans des b

Autres articles

	Automator et Applescript Impimer plusieurs liens URL / pages internet en PDF Print many URL / webpages in PDF
	Fils RSS qu'est ce qu'un fil RSS et comment en créer ?
	Mes codes open source Des dizaines de sources et snippets, pour apprendre ou se perfectionner
Url propres avec .htaccess / Minimal urls using .htaccess Un peu d'aide sur .htaccess ça ne se refuse pas ! Who doesn't need a little help with .htaccess :)
PHP/MySQL conseils/tips In French and English
Troubleshooting with iOS. UI tips Cocoa tips
	Big brother is watching you Les gens c'est de l'argent
	l'iPhone vous traque ! Vos téléphones Androïd et iPhone savent tout de vous !
Crise financière : vers une baisse des salaires ? la fin de l'Eldorado ? Les primes et salaires fous des traders vont toucher à une fin.
	Les bains de Tokyo Toujours revenir à la source
	La guerre contre le coronavirus Journal d'un rescapé ou d'un condamné ?
	Tutoriel Cocoa / Objective-C Bases pour créer une appli en Cocoa/Obj-C avec interface + astuces et code sources
	iPhone 6 moins Précommandez le vite !!
	Baba cool Voyager autrement
	La rando de la méduse les alpes et les 7 lacs
	Peut-on reprendre les études après 30 ans ? Guide de survie pour les jeunes vieux
Loi Hadopi De nouveaux points de vue à considérer
	Vous ne vous en sortirez pas indemne Un jour en entreprise
	Tentative de faire du stop Pour ne pas s'arrêter en si bon chemin
	Ueno et Akihabara (suite) suite de l'article sur Ueno et Akihabara
	Loi El Khomri - Pourquoi tant de haine ? On se bat pour des khomri
	Repas au quotidien S'alimenter autrement