Open Code - Innovation Manager

Revenir à la Home
Fr | Eng


Jour 1 - Les bases

Et si on codait?
Pour aujourd'hui on va commencer cool: je vais vous expliquer comment j'ai construit la page que vous visitez actuellement. Et vous allez la coder en même temps que moi!

Pas à pas, on va voir:
1. Nom de domaine et Hébergement
2. Votre première page: index.html
3. Les balises de base
3Bis. Un Id pour les balises
4. A vous de modifier la page et créer ce qu'il vous plait!

Premier constat: Aspect de cette page
On commence simple: prenez le temps de regarder la page que vous êtes en train de visiter! En fait c'est tout simplement le web normal, sans artifices, au naturel, avec un minimum de transformations, et encore... Je n'ai pas pu m'empécher de faire deux ou trois mises en forme pour la lisibilité!
Il reste cependant un truc super sympa à comprendre, c'est que l'aspect visuel de cette page va changer au fur et à mesure des "Jours". Pour le moment je veux que vous compreniez bien qu'il y aura du boulot: d'un coté la création du fond, et de l'autre la mise en forme! Un peu comme sur un document word! ;)

page de base

On enchaine!
Pour créer votre site internet vous allez avoir besoin d'un ordi, et de quelques petits logiciels de rien du tout. Le premier obstacle viens de votre ordi lui-même et du navigateur web que vous allez utiliser pour coder votre site!
Pour l'Ordi:
- Si vous avez un PC, il vous faudra utiliser un petit éditeur de code: en gros, c'est un traitement de texte pour créer son site internet! Un truc qui s'appelle: Notepad++ et qui se télécharge ici: www.notepad-plus-plus.org/fr/ C'est tout léger, et très facile à utiliser!
- Si vous avez un MAC, il vous faudra utiliser un logiciel appellé SMULTRON, je crois qu'il est dans votre Mac par défaut, sinon... Vous le téléchargez! Comme Notepad++, il est gratuit: www.peterborgapps.com/smultron/ Ces deux logiciels ne sont pas identiques en tous points, mais ont strictement la même utilité! Pour avoir utilisé les deux, c'est quasiment pareil: pas de préférence.

logiciels

Une fois ce logiciel téléchargé et installé, on va pouvoir commencer!
Mais juste avant:
Pour le navigateur que vous utilisez:
Vous devez savoir que selon le navigateur que vous utilisez, votre site ne fonctionnera pas pareil! Vous avez peut-être déja constaté qu'en lançant Firefox, au lieu de chrome il pouvait y avoir des différences d'affichage de sites internet? Et bien c'est pareil! On y reviendra! ;)

navigateurs

1. Nom de domaine et Hébergement
Par définition un site internet se consulte... Sur internet! Mais pas que!
En fait vous pouvez aussi consulter votre site internet "en local", sur votre ordinateur, "En mode hors connexion". Ceci, tout simplement car vous allez construire un site en HTML (C'est le langage de programmation qui s'appelle comme ca! Un peu comme la langue que vous parlez: Le Français), et que le HTML est consultable sur votre ordinateur. On y reviendra quand on codera votre première page.
Pensons maintenant à la consultation "On-line": "Vous êtes en train de consulter ma page qui est hébergée, et accessible sur le nom de domaine www.open-code.innovation-manager.fr" Si vous avez compris cette phrase, vous avez tout compris!
En fait, le "nom de domaine" d'un site internet, c'est tout simplement son www.monsiteinternet.fr, c'est un peu comme votre 06... à vous! Et son "hébergement" c'est ce qu'on pourrait assimiler à votre opérateur de téléphone: le mec qui vous fournit le crédit de votre téléphone. L'hébergement c'est votre forfait, et l'hébergeur c'est votre opérateur. Un Hébergement vous donne droit à une certaine capacité de stockage de données chez un hébergeur: c'est comme tout, ca s'achète!
Pour vous donner une idée, pour ce site internet, pour un an, je paye: 1,19€ pour mon nom de domaine; et 7,80€ pour l'hébergement... 8€99... C'est pas la ruine! Si vous voulez savoir où et comment: envoyez moi un petit mail
Donc pour récapituler:
Un nom de domaine vous permet d'avoir une adresse à laquelle consulter un site internet, et un hébergement c'est juste la taille de stockage dont vous disposez chez un hébergeur pour poster votre site internet! Et si je ne suis pas suffisament clair: dites le moi par mail ;)


2. Votre première page: index.html
Une première petite manip que vous pouvez faire sur internet.
Pour vous rendre compte rapidemment de ce qu'est le code, je vous recommande un petit "clic droit" sur n'importe quel site internet que vous visitez: essayez de trouver "Afficher le code source de la page", une petite boite de dialogue s'affiche, et vous ne devriez pas etre déçu!
Voici un aperçu de ce qu'est le code internet: une succession de signes qui veulent dire quelque chose, et qui commandent à votre navigateur d'afficher un site internet bien formaté!

afficher le code source

Bref, retournez à votre ordinateur, et ouvrez Notepad++ ou Smultron que nous avons téléchargé tout à l'heure. En créant un nouveau document, vous risquez d'avoir peur: il n'y a rien du tout dessus...
Un petit coup de main, le document de base d'une page de code comprend ces données là:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Open Code - Innovation Manager</title>
</head>
<body>

C'est ici que l'on rédige le corps de son site!

</body>
</html>

Une structure pas trop rassurante, mais qui en fait est très simple:
- Les deux premières lignes sont des standards de reconnaissance, c'est toujours les mêmes, ces deux lignes servent à faire comprendre au navigateur qu'il s'agit de code html.
- La troisème ligne contient la balise <head> la "tête" du document, pas trop compliqué! Dedans on trouve le titre de votre page, et différents éléments: favicon, description, mots clés, feuille de style... On verra plus tard!
- Ligne 4 et 5, on trouve justement le contenu de la balise <head> dont je vous parlais juste au dessus.
- Ligne 6, c'est la fin de la balise </head>: vous remarquerez le petit slash qui se glisse dans la balise, c'est pour signifier la fermeture! Ce sera comme ca pour beaucoup de balises!
- On trouve ensuite la balise d'ouverture de <body> qui comme vous l'aurez compris servira à stocker le corps de votre page html!
- La balise de fermeture </body>
- Et la balise de fermeture </html>

Et voila! Notre première page est créée!

J'ai quand même certaines recommandations pour vous avant d'aller plus loin!
N'oubliez JAMAIS de fermer une balise que vous avez ouverte! Sinon votre code ne fonctionnera tout simplement pas!
Tout ceci doit quand même vous paraitre un peu frustrant car vous n'avez rien de fini et visible pour le moment! Ne vous en faites pas, vous avez fait le plus difficile!
Il faut maintenant Sauvegarder votre travail! Enregistrer sous... nommer le document index.html et le tour est joué! N'oubliez pas le .html c'est la base, c'est comme avoir un document Word sans .doc Ca marche beaucoup moins bien!

3. Les balises de base
Dans cette première page que vous venez de créer, vous avez découvert l'existence de ce que l'on appelle les "Balises". Ce sont ces termes délimités par les signes strictement inférieur et strictement supérieur: < et >
Ces termes permettront d'indiquer au navigateur web qui déchiffrera votre code la nature de l'élément que vous lui présenter. Par exemple la balise <title> sert à signaler le Titre de votre page.
Parmi les balises que j'ai utilisée pour monter cette page, on retrouve:
<br /> Qui est la balise Break: pour revenir à la ligne ou sauter une ligne tout simplement! (Pas besoin de l'ouvrir et la fermer, vous écrivez simplement <br /> et le retour à la ligne s'effectue).
<p> Qui est la balise d'ouverture du Paragraphe! Les paragraphes composent généralement votre page, et on peut leur appliquer un style propre: une couleur, une taille... La balise fermante du paragraphe, indique la fin du paragraphe: </p>
<i> Pour mettre du texte en Italique! Balise fermante: </i>
<h1> C'est le titre de premier niveau. Qui correspond au titre tout en haut de ma page: "Open Code - Innovation Manager" qui est écrit en très gros et gras. Le fait de définir <h1> me donne le titre le plus grand, avec le plus d'importance de toute la page. Balise fermante: </h1>
Dans la même logique on trouve <h2> <h3> <h4> Qui ont des valeurs inférieures à h1 par défaut, mais que vous pouvez changer en leur applicant un style particulier, que nous verrons plus tard!

Maintenant trois balises importantes!
Les liens
Vous aurez remarqué au début de cette page différents liens qui redirigent vers d'autres sites. La balise dont nous allons nous servir pour créer un lien est la suivante:

<a href="http://www.facebook.com">FACEBOOK</a>

Ce qui donnera simplement à l'écran un lien de ce type:
Facebook
Il vous suffit tout simplement de remplacer l'adresse de facebook par le lien de l'adresse vers laquelle vous voulez rediriger votre visiteur. Prenez soin de garder vos guillemets sinon la balise ne fonctionnera pas.
Vous pourrez rajouter un petit: style="target: _blank" pour que votre lien s'ouvre dans un nouvel onglet, dans le cas où celui-ci pointe vers un site extérieur par exemple.
Ce qui donne la ligne de code suivante:
<a href="http://www.facebook.com" style="target: _blank">Facebook</a>


Les images
Pour les images le fonctionnement est un peu pareil que pour les liens.
La balise dont on se sert est la suivante:
<img src="nom-de-mon-image.jpg">

Pour insérer une image il y a certains détails à observer:
- Il faut que votre image et la page index.html sur laquelle vous insérez votre image soient au même endroit: par exemple toutes les deux sur votre bureau, ou dans mes documents, ou n'importe où pourvu qu'elles soient toutes les deux au même endroit.
- Il faut aussi veiller à ce que le nom de votre image soit scrupuleusement le même quand vous l'insérez dans votre ligne de code, sinon là encore: raté, ça ne marche pas!
- Vous pouvez régler la taille de votre image en rajoutant les propriétés width (largeur) et height (hauteur) avec une hauteur en pixel, ce qui donne le code:

<img src="nom-de-mon-image.jpg"style="width: 300px; height: 200px;">

Pour un rendu à l'écran de ce style:
insérer une photo
- Vous pouvez faire une image cliquable! Un lien sur une image! Tout simplement comme ceci:

<a href="http://www.facebook.com" style="target: _blank"><img src="nom-de-mon-image.jpg" style="width: 300px; height: 200px;"></a>

Comme vous le voyez j'ai simplement inséré mon image au milieu d'une balise de lien! En me servant du lien vu précédement pour aller sur Facebook, vous avez maintenant une image au lieu du FACEBOOK.

La DIV
Là ca ne parle pas beaucoup! Une div c'est un conteneur! Visible ou invisible, une sorte de "boite" dans laquelle vous mettez du contenu. Pour faire simple c'est comme un paragraphe <p> mais en vachement mieux! Cette boite est vraiment importante, elle vous servira beaucoup, et est très souvent utilisée pour la mise en page, et l'organisation de la structure de votre site internet.
Balise ouvrante <div> et balise fermante: </div>

3Bis. Un Id pour les balises
Il me faut rajouter un petit paragraphe à ce Jour 1, pour plus de compréhension sur le Jour 2! Attention c'est important!
Je vous demande de rajouter un petit élément dans certaines de vos balises, notamment les balises:

<p>
<div>
<img>

Un id comment?
Tout simplement au lieu d'écrire votre paragraphe comme ceci:

<p>Voici mon super paragraphe</p>


Il faudra l'écrire comme cela:

<p id="nom-que-je-veux-pour-mon-id">Voici mon super paragraphe</p>


Un id pourquoi?
C'est en fait très simple: quand vous allez vouloir ajouter un effet de style à un paragraphe, une balise div, ou même une image, il faudra pouvoir l'appeller!
Un peu comme dans à l'école au moment du rendu des notes: une note correspond à un élève! Ben là c'est pareil: une mise en forme correspond à un id!
Tout ceci sera expliqué plus en détail dans le Jour 2, mais pour le moment contentez vous de le savoir! :)


4. A vous de jouer!
Voilà! Vous venez de créer votre première page web grâce au html. Vous pouvez maintenant voue mettre à créer ce que vous voulez! Soyez créatifs!
Vous pouvez donc reprendre la trame du document de base dont nous nous sommes servis plus haut, la coller dans un nouveau document index.html grâce à SMULTRON ou NOTEPAD, et commencer à ajouter les différentes balises que je vous ai présenté.
N'oubliez pas que votre code doit tenir entre les balises <body> et </body>
De plus, à chaque fois que vous faites une mofification de votre document index.html, n'oubliez pas d'enregistrer votre document avant de l'ouvrir avec votre navigateur! Sans ça vous ne verrez pas vos modifications! ;)
Bon courage pour créer vos premières pages!
J'attend votre retour sur ce premier partage de bons plans du code!
Vous verrez, ce n'est vraiment pas dur!! Courage!
Et si vous bloquez? Envoyez moi un mail!

Piem


Revenir à la Home ? ou Enchainer sur le Jour 2 ?