Ma première page web

De Wikicyb
Aller à : navigation, rechercher

C'est quoi le code HTML ?

On l'écrit dans un éditeur texte et on l'enregistre en .html

Lorsqu'on double clique dessus, le fichier HTML s'ouvre dans le navigateur.

Les limites du langage

Le HTML sert à dire au navigateur ce qu'il doit afficher: du texte, des images, des tableaux, de façon simplement statique.

Il ne réfléchit pas, il ne calcule pas, il n’interprète pas.

Toutes les fonctionnalités interactives (on dit "dynamiques") vont faire appel à d'autres langages qui vont venir s'imbriquer dans notre page web, à côté du HTML:

  • PHP, par exemple pour permettre au visiteur de laisser un commentaire: PHP permettra d'enregistrer le commentaire dans un tableau (base de données) ou dans un nouveau fichier texte. HTML ne sait pas enregistrer et créer des nouveaux documents de lui même.Il sait juste afficher ce qu'on a codé au départ.
  • javascript: La plupart des scripts écrits en javascript associent des actions à exécuter en fonction d'événements déclenchés par le surfeur (clic de souris, saisie clavier, ... ). On trouve de nombreuses librairies javascript sur le web, par exemple pour afficher des diaporamas («slideshow», «carroussels» ... genre prezi http://bartaz.github.io/impress.js/#/bored ) ou carrément des jeux (ce qu'on veut faire!) comme la librairie quintus

Créer ma page web HTML5

De quoi j'ai besoin?

  • Un éditeur de texte: le bloc-notes windows, ou un éditeur genre notepad++
  • D'un navigateur web

La structure de base d'une page web

<!doctype html>
 
 
 
 Titre de la page
 
 
 
 
 
 
 

J'enregistre mon document avec l'extension .html

Les balises basiques en HTML

<a href="url">Clique sur moi!</a>
<h2>Voici un sous-titre.</h2>
 <p>Voici un beau paragraphe.</p>
<img src="chemin du fichier">

Habiller avec un poil de CSS

Il est conseillé de définir tous les styles de mise en forme ensemble. Par exemple, au lieu d'écrire à chaque fois:

<p color="red">Mon texte</p>

dix fois dans ma page parce que j'ai 10 paragraphes, je vais plutôt créer un fichier style.css et écrire dedans une seule fois:

p {color:red}

Ainsi, à chaque fois que je fais un paragraphe, il sera rouge.

Dynamiser avec JS

Exemple bête de départ: afficher une fenêtre Windows à partir d'une page web.