ISN - HTML : Apprendre HTML5

(1)

ISN - HTML : Apprendre

HTML5 M. Lagrave

HTML5

Code source Site classique CSS Bluefish

ISN - HTML : Apprendre HTML5

M. Lagrave

Lycée Beaussier

2012–2013

(2)

HTML5 M. Lagrave

HTML5

Sommaire

HTML5

Code source Site classique CSS

Bluefish

(3)

HTML5 M. Lagrave

HTML5

Le HTML« HyperText Markup Language » est un langage de balisage pour la création de site internet, il sert à structurer votre document.

D’autres langages peuvent s’ajouter lors de la conception, mais tous les sites web contiennent du HTML.

HTML5 désignant la version du langage HTML.

(4)

HTML5 M. Lagrave

HTML5

Pour tous les créateurs en herbe, c’est l’étape obligatoire dans votre apprentissage. On ne peut pas connaître tous les langages et encore moins les maîtriser tous, certains seront appris par choix mais le HTML5 le sera par devoir.

Que vous codiez vos pages web

I par logiciel (Dreamweaver . . . ) ;

I par CMS (Spip, Joomla, Wordpress . . . )

« système de gestion de contenu »

I ou par Bloc-note, Notepad++, Bluefish . . . il vous sera toujours utile de le connaitre pour certaines retouches ou optimisation du code source.

(5)

HTML5 M. Lagrave

HTML5

(6)

HTML5 M. Lagrave

HTML5

(7)

HTML5 M. Lagrave

HTML5

(8)

HTML5 M. Lagrave

HTML5

Il est généralement appris en parallèle du CSS.

Le HTML5 vous permettra de coder votre contenu (titre, paragraphe, menu . . . ) pendant que le CSS le mettra en forme (couleur, choix des polices de caractère, disposition des éléments . . . ).

(9)

HTML5 M. Lagrave

HTML5

À quoi ressemble le HTML5 ?

C’est un langage reposant sur le principe de balises imbriqués.

Il existe deux types de balises, celles qu’on ouvre et qu’on referme et celles qui se referment seules. Chaque balise peut avoir aucun, un ou plusieurs attributs relatifs à celle-ci.

Exemple

un paragraphe est contenu entre les balises <p>et</p>

l’une pour indiquer son début et l’autre sa fin.

(10)

HTML5 M. Lagrave

HTML5

À quoi ressemble le HTML5 ?

< !D O C T Y P E h t m l>

< !- - on i n d i q u e l ’ e n c o d a g e de la p a g e p o u r le n a v i g a t e u r - ->

< /h e a d>

<b o d y> < !- - C o r p s de la p a g e web - ->

< /b o d y>

< /h t m l>

structure

(11)

HTML5 M. Lagrave

HTML5

À quoi ressemble le HTML5 ?

Pour modifier la couleur de ce paragraphe, on ajoutera un attribut de style à la balise Paragraphe pour lui indiquer dans quelle couleur l’afficher.

Dans cette deuxième ligne de code, nous avons ajouter un attribut de style à la balise <p>. Cet attribut est

symbolisé par style= " " . Dans cet exemple, nous avons indiqué au navigateur d’afficher le texte en rouge, mais nous aurions pu lui demander une autre police de

caractère ou même plusieurs informations en même temps.

(12)

HTML5 M. Lagrave

HTML5

Structure d’une page web en HTML5

La structure la plus simple d’une page web en HTML5 sera composé d’au minimum 4 Balises :

• La balise indiquant ledoctype; code source

• Les balises<html>et </html>en tout début et en tout fin de document ;

• Les balises<head>et </head>renfermant des informations utiles au navigateur mais non affichées ;

• Les balises<body>et </body>qui comme leur nom l’indique comportent le corps de votre page.

Lorsque vous codez un page, il est important d’utiliser des commentaires. Ces commentaires ne seront ni visibles sur le navigateur ni interprétés par celui-ci. Il vous serviront uniquement à vous repérer sur votre code.

Les commentaires se situent entre les signes < !- - et - ->

(13)

HTML5 M. Lagrave

HTML5

Structure d’une page web en HTML5

• Les balises<html>et</html> en tout début et en tout fin de document ;

• Les balises<head>et </head>renfermant des informations utiles au navigateur mais non affichées ;

(14)

HTML5 M. Lagrave

HTML5

Structure d’une page web en HTML5

• Les balises<head>et</head> renfermant des informations utiles au navigateur mais non affichées ;

(15)

HTML5 M. Lagrave

HTML5

Structure d’une page web en HTML5

• Les balises<body>et</body> qui comme leur nom l’indique comportent le corps de votre page.

(16)

HTML5 M. Lagrave

HTML5

Structure d’une page web en HTML5

(17)

HTML5 M. Lagrave

HTML5

Structure d’une page web en HTML5

(18)

HTML5 M. Lagrave

HTML5

Structure d’une page web en HTML5

Ses limites sont très vite atteintes. Une page HTML est dite statique ?

Aucune interaction possible avec votre visiteur. Prenons l’exemple d’un formulaire, pour l’afficher il vous faudra l’écrire en HTML et le mettre en forme en CSS pour qu’il s’affiche correctement et joliment dans le navigateur. Par contre, si vous cliquez sur le bouton Envoyer, rien ne se passe. Aucune donnée de formulaire ne sera traitée ou enregistrée en HTML5.

(19)

HTML5 M. Lagrave

HTML5

Structure d’une page web en HTML5

Ses limites sont très vite atteintes. Une page HTML est dite statique ? Aucune interaction possible avec votre visiteur. Prenons l’exemple d’un formulaire, pour l’afficher il vous faudra l’écrire en HTML et le mettre en forme en CSS pour qu’il s’affiche correctement et joliment dans le navigateur. Par contre, si vous cliquez sur le bouton Envoyer, rien ne se passe.

Aucune donnée de formulaire ne sera traitée ou enregistrée en HTML5.

(20)

HTML5 M. Lagrave

HTML5

Structure d’une page web en HTML5

Ses limites sont très vite atteintes. Une page HTML est dite statique ? Aucune interaction possible avec votre visiteur. Prenons l’exemple d’un formulaire, pour l’afficher il vous faudra l’écrire en HTML et le mettre en forme en CSS pour qu’il s’affiche correctement et joliment dans le navigateur. Par contre, si vous cliquez sur le bouton Envoyer, rien ne se passe. Aucune donnée de formulaire ne sera traitée ou enregistrée en HTML5.

(21)

HTML5 M. Lagrave

HTML5

Structure d’une page web en HTML5

Pour cela, nous aurons besoin d’utiliser un autre langage : le PHP. Il est capable d’envoyer et de traiter un

formulaire, d’utiliser des variables (tous les utilisateurs n’ont pas le même pseudo par exemple), d’utiliser des cookies (enregistrer des habitudes de vos visiteurs pour leur éviter de re-taper leur pseudo dans un formulaire par exemple). Le but n’étant pas ici d’apprendre le PHP mais de vous montrer les limites du HTML5.

Le HTML5, langage de base, vous servira donc à la mise en place de votre page web. Vous

indiquerez au navigateur toutes les informations nécessaire à un affichage correct.

(22)

HTML5 M. Lagrave

HTML5

Structure d’une page web en HTML5

Pour cela, nous aurons besoin d’utiliser un autre langage : le PHP. Il est capable d’envoyer et de traiter un

formulaire, d’utiliser des variables (tous les utilisateurs n’ont pas le même pseudo par exemple), d’utiliser des cookies (enregistrer des habitudes de vos visiteurs pour leur éviter de re-taper leur pseudo dans un formulaire par exemple). Le but n’étant pas ici d’apprendre le PHP mais de vous montrer les limites du HTML5.

Le HTML5, langage de base, vous servira donc à la mise en place de votre page web. Vous

indiquerez au navigateur toutes les informations nécessaire à un affichage correct.

(23)

HTML5 M. Lagrave

HTML5

Structure complexe et utilisation des balises HTML5

La nouvelle version du HTML entraîne comme à son habitude quelques modifications. De nouvelles balises et attributs viennent s’ajouter et on en déconseille d’autres.

Une compréhension parfaite entraîne une bonne utilisation des balises et donc un respect de la sémantique. Point fort d’un référencement naturel.

voir Pour tout retenir, consulter le mémo HTML5en .pdf

< !D O C T Y P E h t m l>

< /h e a d>

< /h e a d e r>

<nav>

<ul>

< /ul>

< /nav>

<s e c t i o n> < !- - ou a l o r s <div id="

c o n t e n t "> - ->

< /h e a d e r>

<f o o t e r> P i e d de l ’ a r t i c l e

< /f o o t e r>

< /a r t i c l e>

< /a s i d e>

< /s e c t i o n> < !- - ou a l o r s < /div> - ->

< /b o d y>

< /h t m l>

(24)

HTML5 M. Lagrave

HTML5

Mise en forme avec un fichier de style CSS

voir la maquette découpée en différentes sections

Pour la mise en page vous devez relier une feuille de style - CSS pourCascading Style Sheet - il faut déclarer le fichier style.css dans l’en-tête de la page web : placer la balise <link> entre les balises <head> et </head> en donnant à cette balise les attributs correspondants et leurs informations relatives.

...

< /h e a d>

(25)

HTML5 M. Lagrave

HTML5

Bluefish

Bluefish offre un environnement de développement Web complet.

Il comporte un éditeur WYSIWYG avec coloration syntaxique du code, il prend en charge de nombreux langages comme HTML, PHP, CSS, Java, JavaScript, SQL, XML, XHTML, Python, C, C++, . . .

L’insertion de tableaux, formulaires, images cliquables . . . se fait très simplement à l’aide de boîtes de dialogues.

Pour éviter les oublis, toute balise saisie par l’utilisateur est automatiquement fermée par le logiciel. Le correcteur orthographique installé par défaut concerne l’anglais mais on peut cependant ajouter un dictionnaire français.

(26)

HTML5 M. Lagrave

HTML5

Bluefish

(27)

HTML5 M. Lagrave

HTML5

Bluefish

(28)

HTML5 M. Lagrave

HTML5

Bluefish

(29)

HTML5 M. Lagrave

HTML5

Bluefish

Bluefish est totalement gratuit (GNU/GPL) et multilingue.

Cerise sur le gateau, Bluefish est désormais

multiplateformes et existe donc pour Windows, Linux et Mac OS X. Sans doute aujourd’hui le plus complet des éditeurs de texte permettant d’éditer du code HTML ou autre : une référence . . .

Téléchargement :télécharger Bluefish sur le site officiel.

(30)

HTML5 M. Lagrave

HTML5

Bluefish

(31)

HTML5 M. Lagrave

HTML5