Upload
others
View
24
Download
0
Embed Size (px)
Citation preview
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.