ISN - HTML : Apprendre HTML5lycee.lagrave.free.fr/IMG/pdf/apprendre_html5_beamer.pdf · ISN - HTML...

Click here to load reader

  • date post

    14-Jul-2020
  • Category

    Documents

  • view

    3
  • download

    0

Embed Size (px)

Transcript of ISN - HTML : Apprendre HTML5lycee.lagrave.free.fr/IMG/pdf/apprendre_html5_beamer.pdf · ISN - HTML...

  • 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

    et

    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 ?

    Structure d’une page web enHTML5

    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.

    Structure d’unepage web en HTML5

    Dans cette deuxième ligne de code, nous avons ajouter unattribut de style à la balise

    . 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 et en tout début et entout fin de document ;

    • Les balises et renfermant desinformations utiles au navigateur mais non affichées ;

    • Les balises et 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 - ->

    http://41mag.fr/un-doctype-simplifie-en-html-5.html

  • 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 et en tout début et en

    tout fin de document ;

    • Les balises et renfermant desinformations utiles au navigateur mais non affichées ;

    • Les balises et 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 - ->

    http://41mag.fr/un-doctype-simplifie-en-html-5.html

  • 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 et en tout début et en

    tout fin de document ;• Les balises et renfermant des

    informations utiles au navigateur mais non affichées ;

    • Les balises et 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 - ->

    http://41mag.fr/un-doctype-simplifie-en-html-5.html

  • 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 et en tout début et en

    tout fin de document ;• Les balises et renfermant des

    informations utiles au navigateur mais non affichées ;• Les balises et qui comme leur nom

    l’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 - ->

    http://41mag.fr/un-doctype-simplifie-en-html-5.html

  • 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 et en tout début et en

    tout fin de document ;• Les balises et renfermant des

    informations utiles au navigateur mais non affichées ;• Les balises et qui comme leur nom

    l’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 - ->

    http://41mag.fr/un-doctype-simplifie-en-html-5.html

  • 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 et en tout début et en

    tout fin de document ;• Les balises et renfermant des

    informations utiles au navigateur mais non affichées ;• Les balises et qui comme leur nom

    l’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 - ->

    http://41mag.fr/un-doctype-simplifie-en-html-5.html

  • 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

    Titre de votre page

    Nom de la page

    Menu 1Menu 2Menu 3Menu 4

    Titre de l’ article

    Description de l’ article

    Contenu de l’ article

    Pied de l’ article

    Nom de la colonne latéral

    Contenu la colonne

    Bas de page

    http://lycee.lagrave.free.fr/isn/html/test.htmlhttp://lycee.lagrave.free.fr/isn/html/41mag-memo-html5.pdf

  • 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 entre les balises et endonnant à cette balise les attributs correspondants etleurs informations relatives.

    ...

    http://lycee.lagrave.free.fr/isn/html/maquette.png

  • 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.

    http://bluefish.openoffice.nl/download.html

  • 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.

    http://bluefish.openoffice.nl/download.html

  • 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.

    http://bluefish.openoffice.nl/download.html

    HTML5Code sourceSite classiqueCSSBluefish