ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

ISN - HTML : Apprendre HTML5

M. Lagrave

Lycée Beaussier

2012–2013

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Sommaire

HTML5Code sourceSite classiqueCSSBluefish

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

HTML5

Le HTML « HyperText Markup Language » est unlangage 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.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

HTML5

Pour tous les créateurs en herbe, c’est l’étape obligatoiredans votre apprentissage. On ne peut pas connaître tousles langages et encore moins les maîtriser tous, certainsseront 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 certainesretouches ou optimisation du code source.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

HTML5

Pour tous les créateurs en herbe, c’est l’étape obligatoiredans votre apprentissage. On ne peut pas connaître tousles langages et encore moins les maîtriser tous, certainsseront 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 voussera toujours utile de le connaitre pour certainesretouches ou optimisation du code source.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

HTML5

Pour tous les créateurs en herbe, c’est l’étape obligatoiredans votre apprentissage. On ne peut pas connaître tousles langages et encore moins les maîtriser tous, certainsseront 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 voussera toujours utile de le connaitre pour certainesretouches ou optimisation du code source.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

HTML5

Pour tous les créateurs en herbe, c’est l’étape obligatoiredans votre apprentissage. On ne peut pas connaître tousles langages et encore moins les maîtriser tous, certainsseront 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 certainesretouches ou optimisation du code source.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

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 enforme (couleur, choix des polices de caractère, dispositiondes éléments . . . ).

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

À quoi ressemble le HTML5 ?

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

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

Exempleun paragraphe est contenu entre les balises <p> et </p>l’une pour indiquer son début et l’autre sa fin.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

À quoi ressemble le HTML5 ?

<! DOCTYPE html ><html lang="fr">

<head ><meta charset ="UTF -8" /><!-- on indique l’ encodage de

la page pour le navigateur-->

</head ><body ><!-- Corps de la page web -->

<p>Structure d’une page web enHTML5 </p>

</body ></html >

structure

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

À quoi ressemble le HTML5 ?

Pour modifier la couleur de ce paragraphe, on ajoutera unattribut de style à la balise Paragraphe pour lui indiquerdans quelle couleur l’afficher.

<p style="color:red;">Structure d’unepage web en HTML5 </p>

Dans cette deuxième ligne de code, nous avons ajouter unattribut de style à la balise <p>. Cet attribut estsymbolisé par style= " " . Dans cet exemple, nous avonsindiqué au navigateur d’afficher le texte en rouge, maisnous aurions pu lui demander une autre police decaractère ou même plusieurs informations en même temps.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Structure d’une page web en HTML5

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

• La balise indiquant le doctype ; code source

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

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

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

Lorsque vous codez un page, il est important d’utiliser descommentaires. Ces commentaires ne seront ni visibles surle navigateur ni interprétés par celui-ci. Il vous servirontuniquement à vous repérer sur votre code.Les commentaires se situent entre les signes < !- - et - ->

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Structure d’une page web en HTML5

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

• La balise indiquant le doctype ; code source

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

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

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

Lorsque vous codez un page, il est important d’utiliser descommentaires. Ces commentaires ne seront ni visibles surle navigateur ni interprétés par celui-ci. Il vous servirontuniquement à vous repérer sur votre code.Les commentaires se situent entre les signes < !- - et - ->

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Structure d’une page web en HTML5

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

• La balise indiquant le doctype ; code source

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

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

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

Lorsque vous codez un page, il est important d’utiliser descommentaires. Ces commentaires ne seront ni visibles surle navigateur ni interprétés par celui-ci. Il vous servirontuniquement à vous repérer sur votre code.Les commentaires se situent entre les signes < !- - et - ->

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Structure d’une page web en HTML5

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

• La balise indiquant le doctype ; code source

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

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

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

Lorsque vous codez un page, il est important d’utiliser descommentaires. Ces commentaires ne seront ni visibles surle navigateur ni interprétés par celui-ci. Il vous servirontuniquement à vous repérer sur votre code.Les commentaires se situent entre les signes < !- - et - ->

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Structure d’une page web en HTML5

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

• La balise indiquant le doctype ; code source

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

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

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

Lorsque vous codez un page, il est important d’utiliser descommentaires. Ces commentaires ne seront ni visibles surle navigateur ni interprétés par celui-ci. Il vous servirontuniquement à vous repérer sur votre code.Les commentaires se situent entre les signes < !- - et - ->

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Structure d’une page web en HTML5

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

• La balise indiquant le doctype ; code source

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

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

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

Lorsque vous codez un page, il est important d’utiliser descommentaires. Ces commentaires ne seront ni visibles surle navigateur ni interprétés par celui-ci. Il vous servirontuniquement à vous repérer sur votre code.Les commentaires se situent entre les signes < !- - et - ->

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Structure d’une page web en HTML5

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

Aucune interaction possible avecvotre visiteur. Prenons l’exemple d’un formulaire, pourl’afficher il vous faudra l’écrire en HTML et le mettre enforme en CSS pour qu’il s’affiche correctement et jolimentdans le navigateur. Par contre, si vous cliquez sur lebouton Envoyer, rien ne se passe. Aucune donnée deformulaire ne sera traitée ou enregistrée en HTML5.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Structure d’une page web en HTML5

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

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

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Structure d’une page web en HTML5

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

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

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 unformulaire, d’utiliser des variables (tous les utilisateursn’ont pas le même pseudo par exemple), d’utiliser descookies (enregistrer des habitudes de vos visiteurs pourleur éviter de re-taper leur pseudo dans un formulaire parexemple). Le but n’étant pas ici d’apprendre le PHP maisde vous montrer les limites du HTML5.

Le HTML5, langage de base, vous servira donc àla mise en place de votre page web. Vousindiquerez au navigateur toutes les informationsnécessaire à un affichage correct.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

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 unformulaire, d’utiliser des variables (tous les utilisateursn’ont pas le même pseudo par exemple), d’utiliser descookies (enregistrer des habitudes de vos visiteurs pourleur éviter de re-taper leur pseudo dans un formulaire parexemple). Le but n’étant pas ici d’apprendre le PHP maisde vous montrer les limites du HTML5.

Le HTML5, langage de base, vous servira donc àla mise en place de votre page web. Vousindiquerez au navigateur toutes les informationsnécessaire à un affichage correct.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Structure complexe et utilisation des balisesHTML5La nouvelle version du HTML entraîne comme à sonhabitude quelques modifications. De nouvelles balises etattributs viennent s’ajouter et on en déconseille d’autres.Une compréhension parfaite entraîne une bonneutilisation des balises et donc un respect de lasémantique. Point fort d’un référencement naturel.voir Pour tout retenir, consulter le mémo HTML5 en .pdf<! DOCTYPE html ><html lang="fr">

<head ><meta charset ="UTF -8">

<title >Titre de votre page </title ></head ><body >

<header ><h1>Nom de la page </h1>

</ header ><nav ><ul><li>Menu 1</li><li>Menu 2</li><li>Menu 3</li><li>Menu 4</li>

</ul></nav >

<section > <!-- ou alors <div id="content "> -->

<article ><header >

<h1>Titre de l’ article </h1><p>Description de l’ article </p>

</ header ><p>Contenu de l’ article </p>

<footer >Pied de l’ article</ footer >

</ article ><aside >

<h1>Nom de la colonne latéral </h1>

<p>Contenu la colonne </p></aside >

</ section > <!-- ou alors </div > --><footer >Bas de page </ footer >

</body ></html >

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

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 pour Cascading Style Sheet - il faut déclarer lefichier style.css dans l’en-tête de la page web : placer labalise <link> entre les balises <head> et </head> endonnant à cette balise les attributs correspondants etleurs informations relatives.

<head >...

<link rel=" stylesheet " href="css/style.css">

</head >

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Bluefish

Bluefish offre un environnement de développement Webcomplet.

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

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

Pour éviter les oublis, toute balise saisie par l’utilisateur estautomatiquement fermée par le logiciel. Le correcteurorthographique installé par défaut concerne l’anglais mais onpeut cependant ajouter un dictionnaire français.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Bluefish

Bluefish offre un environnement de développement Webcomplet.Il comporte un éditeur WYSIWYG avec coloration syntaxiquedu code, il prend en charge de nombreux langages commeHTML, PHP, CSS, Java, JavaScript, SQL, XML, XHTML,Python, C, C++, . . .

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

Pour éviter les oublis, toute balise saisie par l’utilisateur estautomatiquement fermée par le logiciel. Le correcteurorthographique installé par défaut concerne l’anglais mais onpeut cependant ajouter un dictionnaire français.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Bluefish

Bluefish offre un environnement de développement Webcomplet.Il comporte un éditeur WYSIWYG avec coloration syntaxiquedu code, il prend en charge de nombreux langages commeHTML, PHP, CSS, Java, JavaScript, SQL, XML, XHTML,Python, C, C++, . . .

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

Pour éviter les oublis, toute balise saisie par l’utilisateur estautomatiquement fermée par le logiciel. Le correcteurorthographique installé par défaut concerne l’anglais mais onpeut cependant ajouter un dictionnaire français.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Bluefish

Bluefish offre un environnement de développement Webcomplet.Il comporte un éditeur WYSIWYG avec coloration syntaxiquedu code, il prend en charge de nombreux langages commeHTML, PHP, CSS, Java, JavaScript, SQL, XML, XHTML,Python, C, C++, . . .

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

Pour éviter les oublis, toute balise saisie par l’utilisateur estautomatiquement fermée par le logiciel. Le correcteurorthographique installé par défaut concerne l’anglais mais onpeut cependant ajouter un dictionnaire français.

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Bluefish

Bluefish est totalement gratuit (GNU/GPL) etmultilingue.

Cerise sur le gateau, Bluefish est désormaismultiplateformes et existe donc pour Windows, Linux etMac OS X. Sans doute aujourd’hui le plus complet deséditeurs de texte permettant d’éditer du code HTML ouautre : une référence . . .

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

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Bluefish

Bluefish est totalement gratuit (GNU/GPL) etmultilingue.

Cerise sur le gateau, Bluefish est désormaismultiplateformes et existe donc pour Windows, Linux etMac OS X. Sans doute aujourd’hui le plus complet deséditeurs de texte permettant d’éditer du code HTML ouautre : une référence . . .

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

ISN - HTML :Apprendre

HTML5

M. Lagrave

HTML5Code source

Site classique

CSS

Bluefish

Bluefish

Bluefish est totalement gratuit (GNU/GPL) etmultilingue.

Cerise sur le gateau, Bluefish est désormaismultiplateformes et existe donc pour Windows, Linux etMac OS X. Sans doute aujourd’hui le plus complet deséditeurs de texte permettant d’éditer du code HTML ouautre : une référence . . .

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