HTML 5

Le web a bien évolué depuis c'est début :

• Première page web en 1993 :

• Aujourd'hui :

Source : http://bradfrost.com/blog/post/this-is-the-web/

• et demain :

Source : http://bradfrost.com/blog/post/this-is-the-web/

Mais ce qui n'a pas changé, c'est la manière de visualiser les pages internet. En effet, les navigateurs utilisent toujours le même langage de description l'HTML.

En savoir plus sur l'histoire d'internet :

https://fr.wikipedia.org/wiki/Histoire_d%27Internet#Chronologie_s.C3.A9lective

L'html est un langage de description qui utilise des balises avec des attributs(options) pour afficher une page html. 

Pour afficher un titre, un paragraphe et une image, nous utiliserons le code suivant :

<h1 style=\"color: red ; text-align: center\">HTML</h1>
<p style=\"color:blue\">L'Html est un langage de description.</p>
<img src=\"/logo.jpg\" width=\"100px\" title=\"logo sti2d\" />

et nous aurons comme résultat sur un navigateur web (cliquer sur Run) :

Exécuter le code ci-dessous. 

HTML

L'Html est un langage de description.

\n\n \n

Vidéo sur les balises :

Vidéo sur les attributs :

La

La liste et la description des balises utilisée par HTML version 5 :

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-balises-html

C'est quoi un fichier HTML?

• Un fichier HTML n'est pas compilé (ce n'est pas un programme)
• Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant un ensemble de convention d'écriture.
• Un fichier HTML peut être écrit à l'aide de n'importe quel éditeur de texte simple (des éditeurs plus évolués existent également)
• Lorsque vous consultez un site web, les fichiers HTML (extension .htm ou .html) sont envoyés à votre navigateur et le code html est interprété sur VOTRE machine par VOTRE navigateur.
• Il n'est pas indispensable de posséder un serveur HTTP pour écrire des pages. Vous pouvez utiliser la fonction « Ouvrir » de votre navigateur pour consulter une page HTML enregistrée sur votre ordinateur (ou une page que vous avez vous-même créée).
• Il est possible de visualiser le code d'une page web. Par exemple dans le navigateur Chrome, allez dans le menu « outils » puis « développement web » puis « Code source de la page » (ou CTRL U).

HTML

L'Html est un langage de description.

\n \n

Maintenant,  vous connaissez les balises, vous allez  pouvoir créer une page internet. Mais pour cela, il nous faut un I.D.E  ( Integrated development environment ou  Environnement de développement intégré) pour écrire le code.

Il en existe beaucoup de gratuit:

• Aptana Studio
• Aloha Edito
• Blue Griffon
• Mercury Editor;
• Rendra; Online HTML5 Editor;
• Maqetta;
• NetBeans;
• JetBrains WebStorm;
• Visual Studio Code;
• Komodo Edit;
• Eclipse;
• FlashDevelop;
• Notepad++;
• ....

Vous verrez dans la partie suivante, pourquoi vous utiliserez Netbeans comme IDE pour l'html5.

Nous allons procéder par étapes progressives. A chaque fois, des nouvelles connaissances sont apportées, ensuite on les met en pratique. 

1. Ecrire le texte ci-dessous dans html:

        Bonjour le monde.
      Bienvenue sur mon premier site web.

2. Exécuter le code (Run)

3. Normalement, la page doit s'afficher dans le moniteur.

Les balises :

Le texte que vous vous avez écrit dans ce fichier est le code html qui est interprété par un navigateur pour visualiser le résultat. Ce code est constitué de texte et d’indications de mise en page. Ces indications sont appelées balises.

Une balise html (ou tag en anglais) respecte la syntaxe suivante : <balise>

Les pages HTML sont remplies de ces balises. Celles-ci sont invisibles à l'écran pour les visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de \"chevrons\", c'est-à-dire des symboles < et >, comme ceci : <balise>

À quoi est-ce qu'elles servent ?

Elles indiquent la nature du texte autour d'elles. Par exemple : \"Le titre de la page\", \"Une image\", \"Un paragraphe \", etc. …

On distingue deux types de balises : les balises en paires et les balises orphelines.

Les balises en paires : elles s'ouvrent (<balise>), contiennent du texte, et se ferment plus loin (</balise>).

Les balises orphelines : ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image).  Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur  d'insérer une image à un endroit

Balise en paires

Les attributs :

Les attributs sont un peu les options des balises. Ils viennent compléter les balises pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur.
<balise attribut=\"valeur\">
Prenons la balise <image />,  seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher.
<image nom=\"photo.jpg\" />

Dans le cas d'une balise fonctionnant \"par paire\", on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 Juillet 1969

     <citation auteur=\"Neil Armstrong\" date=\"21/07/1969\">

     C'est un petit pas pour l'homme un bond de géant pour l´humanité.

     </citation>

Tester le code et modifier la valeur de l'attribut border.

Toutes les pages html sont écrites avec la structure ci-dessous :

<!DOCTYPE html>
<html lang=\"fr\">
    <head>
        <meta charset=\"utf-8\" />
        <title>Titre</title>
    </head>
     <body>
        Boujour tout le monde!
     </body>
</html>

Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise <html> est la première que l'on ouvre, et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). Les balises doivent être fermées dans le sens inverse de leur ouverture.

Exemple :

<html><body></body></html> : correct.

Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur.

<html><body></html></body> : incorrect. les balises s'entremêlent.

Copier et tester le code.

<!DOCTYPE html>
<html lang=\"fr\">
    <head>
        <meta charset=\"utf-8\" />
        <title>Titre</title>
    </head>
     <body>
        Boujour tout le monde!
     </body>
</html>

Le doctype

La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.

Ce n'est pas vraiment une balise comme les autres (elle commence par un point d'exclamation), vous pouvez considérer que c'est un peu l'exception qui confirme la règle.

La balise <html>

C'est la balise principale du code. Elle englobe tout le contenu de la page. La balise fermante </html> se trouve tout à la fin du code.

L'en-tête <head> et le corps <body>

Une page web est constituée de 2 parties :

L'en-tête <head> : cette section donne quelques informations générales sur la page, comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que l'en-tête contient ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes !

Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code.

L'encodage (charset)

Cette balise indique l'encodage utilisé dans votre fichier .html.
Sans rentrer dans les détails, car cela pourrait vite devenir compliqué, l'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, symboles arabes, etc.).
Il y a plusieurs techniques d'encodage aux noms bizarres utilisées en fonction des langues : ISO-8859-1, OEM 775, Windows-1253... Un seul cependant devrait être utilisé aujourd'hui autant que possible : UTF-8. Cette méthode d'encodage permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues de notre planète.
Il faut aussi que votre fichier soit bien enregistré en UTF-8. C'est le cas le plus souvent sous Linux par défaut, mais sous Windows il faut généralement le dire au logiciel.

Copier et tester le code.

1. Recopier toute la structure de base d'une page web (vu précédemment).

2. Mettre en titre :  <h1>Mon premier site Web</h1>

3. Exécuter le code.

4. Décrire ce que fait votre page et notamment où s'affiche votre titre.

Créer des paragraphes
La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes. Le langage HTML propose justement la balise <p> pour délimiter les paragraphes.
Exemple
: <p>Bienvenue sur mon site web</p>
<p> signifie \"Début du paragraphe\"
</p> signifie \"Fin du paragraphe\"
Bien sûr il faut écrire le contenu de notre site entre les balises <body></body>.

Insérer un commentaire
Un commentaire est une balise HTML avec une forme bien spéciale :
Exemple :
<!-- voici un commentaire -->

______________________________________________________________________________________

Réalisation :

1. Dans html : écrire le texte suivant dans un seul paragraphe (avec la balise <p>) :
   <p> Bonjour et bienvenue sur mon premier site web !
    Je vous demande d'être indulgent car je viens tout juste de commencer.
    Je sais que mon site n'est pas encore très fourni.
    Mais d'ici la fin de i'activité, je devrais faire bien mieux.</p>

2. Tester le fonctionnement et noter vos observations :

Amélioration :

___________________________  Données ______________________________________

Il existe une balise \"Aller à la ligne\" !
C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne : <br />.
Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe, à l'endroit ou vous souhaitez retourner à la ligne.


Modifier le fichier test2.html afin de revenir à la ligne après chaque phrase.

Faire valider par le professeur.

Attention : Ne pas confondre avec la balise <title> ! La balise <title> qui permet d'afficher le titre de la page dans la barre de titre du navigateur.
Les titres <h1> , <h2>, etc, eux, servent à créer des titres qui seront affichés dans la page web.
Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, cela va devenir difficile pour vos visiteurs de se repérer. C'est là que les titres deviennent utiles.
En HTML on a le droit d'utiliser 6 niveaux de titres différents. Ce qui veux dire par là qu'on peut dire \"Ceci est un titre très important\", \"Ceci est un titre un peu moins important\", \"Ceci est un titre encore moins important\", etc. On a donc 6 balises de titre différentes :
<h1> </h1> : signifie \"titre très important\". En général, on s'en sert pour afficher le titre de la page au début de celle-ci.
<h2> </h2> : signifie \"titre important\".
<h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un \"sous-titre\" si vous voulez).
<h4> </h4> : titre encore moins important.
<h5> </h5> : titre pas important.
<h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.
______________________________________________________________________________


Réalisation :

1. Ecrire le texte suivant en utilisant les paragraphes (on n'utilisera pas les balises <br/> car elles sont ici inutiles)

Bonjour et bienvenue	titre style h1
Voici mon premier site web !	titre style h2
Je vous demande d'être indulgent	titre style h3
Je viens de commencer le langage html.	titre style h4
Je sais que mon site n'est pas encore très fourni.	titre style h5
Mais d'ici la fin de ce TP je devrais faire bien mieux …	titre style h6

2. Exécuter le code.
3. Visionnez votre travail dans le moniteur.

Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et vous aimeriez les faire ressortir. HTML vous propose différents moyens de mettre en valeur le texte de votre page.

• Mettre un peu en valeur ( cela ressemble à l'italique  dans les traitements de texte). Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>. Son utilisation est très simple : entourez les mots à mettre en valeur par ces balises.
• Mettre bien en valeur (cela ressemble au « gras » dans les traitements de texte). Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie \"fort\", ou \"important\". Elle s'utilise exactement de la même manière que <em>.

Marquer le texte ( correspond au surlignage)

• La balise <mark> permet de faire ressortir visuellement une portion de texte. Le texte n'est pas forcément considéré comme important mais on veut qu'il se distingue bien du reste du texte. Cela peut être utile pour faire ressortir un texte pertinent après une recherche sur votre site par exemple.

______________________________________________________________________________________


Réalisation :

1. Dans html vous allez modifier la dernière phrase : « Mais d'ici la fin de l'activité, je devrais faire bien mieux … :

• enlever la balise de titre H6
• Mettre en valeur \"Mais\"
• Mettre bien en valeur \"fin de ce TP\"
• Marquer le texte \"mieux\"

2 Exécuter le code et visionner le dans le moniteur.

Les listes à puces

Les listes à puces nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations.
Il existe deux types de listes à puces :

Les listes non ordonnées :

C'est un système qui nous permet de faire une liste d'éléments, sans notion d'ordre (il n'y a pas de \"premier\" ni de \"dernier\"). Pour créer une liste à puces non ordonnée, il suffit d'utiliser la balise <ul> que l'on referme un peu plus loin avec un </ul>.
Ensuite, il faut écrire chacun des éléments de la liste entre 2 balises <li> </li>.
Toutes ces balises doivent se trouver entre <ul> et </ul>.

Les listes ordonnées :

Une liste ordonnée fonctionne de la même façon, seule une balise change. Il faut remplacer <ul> </ul> par <ol> </ol>. À l'intérieur de la liste, on utilise toujours des balises <li> </li> pour délimiter les éléments.
L'ordre dans lequel vous mettez les éléments de la liste est important.
Le premier <li></li> sera l'élément n°1, le second sera le n°2 etc. ...
______________________________________________________________________________________



Réalisation :

1. Dans html : rajouter la Phrase  « Cette année je suis en Seconde Générale» (en titre important)
2. Modifier le titre de la page web pour qu'il devienne : « test des listes à puces »
3. Rajouter la phrase « Voici les disciplines enseignées en Seconde générale:» (en sous titre)
4. Faire une liste avec des puces non ordonnées puis ordonnée des matières enseignées en seconde générale.

5  Exécuter et visionner le dans le moniteur.

Les images

Insérer une image dans une page web ? Vous allez voir, c'est d'une facilité déconcertante.
Nous avons vu différents formats d'image que l'on peut utiliser sur des sites web :  png, jpeg et gif

Ces formats ne doivent pas être choisis aux hasards. En effet, les images sont parfois volumineuses à télécharger, ce qui ralentit le temps de chargement de la page.

Quand vous avez une image \"entre les mains\", vous avez la possibilité de l'enregistrer dans plusieurs \"formats\" différents. Le poids (en Ko, voire en Mo) de l'image sera plus ou moins élevé selon le format choisi, et la qualité de l'image va changer.
Toutes les images diffusées sur Internet ont un point commun : elles sont compressées. Cela veut dire que l'ordinateur fait des calculs pour qu'elles soient moins lourdes et donc plus rapides à charger.

Les formats images :

Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. Ce format est conçu pour réduire la taille des photos, qui peuvent comporter plus de 16 millions de couleurs différentes. Les images JPEG sont enregistrées avec l'extension jpg ou jpeg.
Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est adapté à la plupart des graphiques (je serais tenté de dire \"à tout ce qui n'est pas une photo\"). Le PNG a deux gros avantages : il peut être rendu transparent et il n'altère pas la qualité de l'image.
Le format GIF est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par habitude). Aujourd'hui, le PNG est globalement bien meilleur que le GIF : les images sont le plus souvent plus légères et la transparence est de meilleure qualité. Je vous recommande donc d'utiliser le PNG autant que possible. Il est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions de couleurs).

Insertion d'une image

La balise qui va nous permettre d'insérer une image est  <img />
C'est une balise de type orpheline (comme <br/>). Cela veut dire qu'on n'a pas besoin de l'écrire en deux exemplaires comme la plupart des autres balises que nous avons vues jusqu'ici.

La balise doit être accompagnée de 2 attributs obligatoires :

• src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre :
  - un chemin en absolu (ex. : http://www.site.com/microprocesseur.png),
  - un chemin en relatif (ce qu'on fait le plus souvent). Ainsi, si votre image est dans un sous-dossier images vous devrez taper :  src=\"./assets/flowers.jpg\"
• alt : cela signifie \"texte alternatif\". On doit toujours indiquer un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (ça arrive), ou sur les navigateurs de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas \"voir\" l'image. Cela aide aussi les robots des moteurs de recherche pour les recherches d'images.

       Exemple : <img src=\"/vacances.jpg\" alt=\"Photo de vacances\" />

La balise image admet entre autre les propriétés suivantes :

• ALIGN= Top , Bottom, Middle, Left ou Right   

Exemple : <img src=\"./assets/flowers.jpg\" alt=\"Photo de vacances\" align=\"right\"/>

• BORDER= PIXELS WIDTH= Pixels ou pourcentages      (largeur)

                                  HEIGHT= Pixels ou pourcentages     (hauteur)

Exemples: 

 <img src=\"./assets/flowers.jpg\" alt=\"Photo de vacances\" align=\"right\"  border =2 width=100 height=200\"/>

<img src=\"http://sciencesappliquees.com/snt/version8/assets/paris.jpg\" alt=\"Photo de vacances\" align=\"left\"  border = 5 width=\"50%\" />

Tester les exemples.

Vous allez maintenant créer 1 page web avec le contenu suivant :

• titre de la page web:  Page d'accueil de mon site
• En haut du site : Bienvenue sur la présentation de mon site (format : en titre important)
• puis 3 sauts de lignes
• Ajouter l'image du logo du lycée  http://lycee-serusier.fr/templates/lyceev2/images/logo.png  avec une bordure d'épaisseur 3 pixels, une largeur de 300 pixels et une hauteur de 200 pixels
• Ajouter 1 saut de ligne
• Ajouter l'image http://lycee-serusier.fr/images/galerie/entree.jpg avec une bordure d'épaisseur 4 pixels, une largeur de 480 pixels et une hauteur de 320 pixels
• Ajouter 1 saut de ligne
• Ajouter un lien vers le site http://www.lycee-serusier.fr lorsque l'on clique sur \"Visiter le site de mon Lycée ?\" (format : en titre important)
• Ajouter 1 saut de ligne
• Ajouter l'image du html5 dont le lien est le suivant :
  http://sciencesappliquees.com/images/nsi/html5
  avec une bordure d'épaisseur 3 pixels, une largeur de 670 pixels et une hauteur de 335 pixels
• Ajouter 1 saut de ligne
• Ajouter un lien vers  les métiers de l' informatique : 
  https://www.usine-digitale.fr/article/salaires-dans-l-informatique-decouvrez-qui-gagne-plus-de-90-000-euros-par-an.N471218
  lorsque l'on clique sur \"Les métiers de l'informatique ?\" (en titre important)

Créer cette page dans html .

Faire valider par le professeur.