Vous êtes sur la page 1sur 22

Initiation au

langage HTML5
Edité en décembre 2018
Cours donné par Technofutur TIC en formation à distance
Table des matières

Introduction...................................................................................................................... p. 1
Module 1 - Première Page............................................................................................. p. 3
Module 2 - Structurer l'information................................................................................. p. 5
Module 3 - Structurer une page..................................................................................... p. 7
Module 4 - Les images................................................................................................... p. 9
Module 5 - Les liens..................................................................................................... p. 11
Module 6 - Les Tableaux de données.......................................................................... p. 12
Module 7 - Les Formulaires.......................................................................................... p. 14
Module 8 - Contenus Multimédias................................................................................ p. 15
Module 9 - Un site........................................................................................................ p. 17
Module 10 - Les CSS................................................................................................... p. 18
Conclusion..................................................................................................................... p. 20

© Technofutur TIC...................................................................... Initiation au langage HTML5......................................................................


Introduction
Mémo
Ce qu'il faut avoir comme matériel pour créer des pages HTML :
• un éditeur texte
• un navigateur
Ce qu'il faut savoir faire :
• utiliser un navigateur
• utiliser un éditeur texte
• savoir créer des dossiers
Les exercices du cours seront enregistrés dans le dossier " monsite " qui se trouve
sur votre bureau.
Vous êtes prêts ?
Vous avez tout le matériel nécessaire ?
Vous avez consulté les compléments et/ou savez comment gérer les dossiers de votre
ordinateur ?
Alors démarrons tout de suite avec le Module 1 - Ma première page !Lancer le Module 1

© Technofutur TIC................................................................Initiation au langage HTML5................................................................ Page 1


Introduction
Ressources
https://notepad-plus-plus.org/download/v7.5.6.html

http://macromates.com/download

© Technofutur TIC................................................................Initiation au langage HTML5................................................................ Page 2


Module 1 - Première Page
Mémo
HTML est l'abréviation de : Hyper-Text Markup Language.
• HTML est un langage de description de document Web;
• Une page HTML est un fichier de type texte portant l'extension .html ou .htm;
• Il est possible de réaliser un document HTML avec un simple éditeur de texte ;
• Le langage HTML est composé d'une série de balises (appelées également marqueurs
ou tags);
• Les balises HTML sont délimitées par les caractères "<" et ">";
• Les balises fonctionnent généralement par paire, une balise d'ouverture <nom du tag>
et une balise de fermeture </nom du tag>.

<html> </html>
Début et fin du fichier HTML.
<head> </head>
Zone d'en-tête du fichier HTML (c'est la zone de description du document Web).
<title> </title>
Titre générique du document Web (il est affiché dans la barre de titre de la fenêtre du
navigateur Web et est utilisé par les outils de recherche comme Google, Bing, Yahoo…), il
est aussi utilisé par les programmes tels que Dreamweaver, KompoZer, Golive pour créer
des liens (voir plus loin).
<body> </body>
Corps du document (correspond à la zone d'affichage du navigateur).
<b> </b>
Se trouve dans le corps du document à chaque fois qu'on veut mettre un mot, une phrase,
un paragraphe en gras (B pour Bold en anglais).
<i> </i>
Se trouve dans le corps du document à chaque fois qu'on veut mettre un mot, une phrase,
un paragraphe en italique (I pour Italic en anglais).
Quand on fait des modifications sur un document, il n'est pas nécessaire de l'ouvrir à
nouveau dans le navigateur, on peut simplement le réactualiser.

© Technofutur TIC................................................................Initiation au langage HTML5................................................................ Page 3


Module 1 - Première Page
Ressources
https://notepad-plus-plus.org/download/v7.5.6.html

http://macromates.com/download

Historique du langage HTML


http://fr.wikipedia.org/wiki/Hypertext_Markup_Language

Un historique du langage HTML sur Wikipedia de 1989 à nos jours.

Article sur la version 5 du langage HTML


http://fr.wikipedia.org/wiki/HTML5

Article complet qui détaille les nouveautés apportées par la mise en place de la version 5
du langage HTML.

Histoire des navigateurs web


http://fr.wikipedia.org/wiki/Navigateur_web

Article complet qui traite des navigateurs web et de la chronologie de leur apparition.

Les moteurs de rendu


http://fr.wikipedia.org/wiki/Moteur_de_rendu_HTML

Article qui détaille les moteurs de rendu utilisés par les navigateurs web. Utile pour
comprendre les différences possibles d'affichage d'un site selon le navigateur employé.

© Technofutur TIC................................................................Initiation au langage HTML5................................................................ Page 4


Module 2 - Structurer l'information
Mémo
<p></p>
C'est la balise de paragraphe. Il peut y en avoir autant que nécessaire dans la page.
<br>
C'est la balise pour mettre à la ligne, pour insérer un retour chariot.
<h1></h1>, <h2></h2>, etc
Ce sont les balises qui permettent d'identifier les titres.
<ul>...</ul>
C'est la balise HTML qui définit une liste à puces.
<ol>...</ol>
C'est la balise HTML qui définit une liste ordonnée.
<li>...</li>
C'est la balise HTML qui définit un élément de liste, ordonnée ou à puces.
<hr>
Employée pour insérer une ligne horizontale lors d'un changement de sujet dans le texte.
Elle est dite "orpheline" ou "auto-fermante" car elle ne possède pas de balise de fermeture.
<!-- commentaire -->
Code permettant d'insérer un commentaire, uniquement visible dans le code source.

© Technofutur TIC................................................................Initiation au langage HTML5................................................................ Page 5


Module 2 - Structurer l'information
Ressources
Plus d'information au sujet du DOCTYPE
http://www.pompage.net/traduction/le-doctype-qu-il-vous-faut

Article très complet au sujet du DOCTYPE.

Liste des entités HTML


http://alexandre.alapetite.fr/doc-alex/alx_special.html

Liste complète des caractères spéciaux et des entités HTML correspondantes.

Information complétaire à propos de l'UTF-8


http://fr.wikipedia.org/wiki/UTF-8

Information complétaire à propos de l'ISO-8859-1


http://fr.wikipedia.org/wiki/ISO_8859-1

Comment diagnostiquer un problème d'encodage des caractères ?


http://www.alsacreations.com/astuce/lire/85-comment-diagnostiquer-un-problme-
dencodage-iso-ou-utf-8nbsp.html

Ressource qui vous permettra de résoudre vos soucis d'encodage des caractères.

© Technofutur TIC................................................................Initiation au langage HTML5................................................................ Page 6


Module 3 - Structurer une page
Mémo
Structurer un document HTML, c'est s'assurer :
• de sa visibilité : que le document soit correctement référencé par les moteurs de
recherche,
• de sa compatibilité : que le document soit correctement affiché dans les navigateurs,
• de son accessibilité : que le document soit consultable par le plus grand nombre.
Balises de section
Ce sont les balises qui permettent de diviser le document en différentes parties spécifiques.
<header>
Cette balise reprend l'en-tête de la page (de "head" : "tête" en anglais).
L'en-tête comporte généralement le titre du site (à l'aide d'un titre h1), peut éventuellement
contenir un logo et des boutons de navigation.
<section>
Définit la zone dans laquelle sera traité un même sujet ou une même fonctionnalité. Par
exemple, une suite d'articles ou un contenu unique (contenu principal).
<footer>
Cette balise définit le pied de page (de "foot" : "pied" en anglais).
Dans le pied de page pourront être présentés les informations légales du site, les sources,
une navigation, des liens vers les sites de réseaux sociaux, la date de publication, des
informations à propos de l'auteur, des notes de pied de page, etc.

© Technofutur TIC................................................................Initiation au langage HTML5................................................................ Page 7


Module 3 - Structurer une page
Ressources
Les balises de section sur alsacréations.fr
http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-
aside.html

Ressource qui détaille l'usage des balises de section (section, article, header, footer,
aside, nav).

Les balises de section sur openclassroom.com


http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/
structurer-sa-page

Contenu identique que le lien précédent.

Banque mondiale
http://donnees.banquemondiale.org/

La Banque mondiale lutte contre la pauvreté en apportant des aides, des financements et
des conseils aux États en difficulté.

Anysurfer
http://www.anysurfer.be/fr/laccessibilite/quoi

AnySurfer est un label de qualité belge qui atteste de l'accessibilité des sites internet.

© Technofutur TIC................................................................Initiation au langage HTML5................................................................ Page 8


Module 4 - Les images
Mémo
Format de fichier
Les formats les plus utilisés actuellement sont les suivants :
• GIF
• JPG (ou JPEG)
• PNG
<img src= "url" alt="équivalent_text">
Insertion d'une image
width=""
Attribut de la balise <img … >
Il permet d'indiquer la largeur de l'image, mesurée en pixel (px) ou en pourcentage (%)
height=""
Attribut de la balise <img … >
Il permet d'indiquer la hauteur de l'image, mesurée en pixel (px) ou en pourcentage (%)
alt=""
Attribut obligatoire de la balise <img >.
Il permet :
1 de spécifier un texte à afficher à la place de l’image si cette dernière est indisponible
(lien brisé, fichier manquant, etc.),
2 d'aider les visiteurs visuellement moins valides à connaître l'information présentée par
l'image,
3 d'aider au référencement de la page.
Exemple d'image
<img src="fleurs.gif" alt="Fleurs des champs" width="100" height="56">

<figure>
Cette balise rassemble les images et les légendes qui y sont associées.

<figcaption>
Balise au sein de laquelle sera placée la légende. A placer avant, ou après l'image.

Image légendée
<figure>
<img src= "banane.jpg" alt= "Une peau de banane" >
<figcaption>Qui se douterait du potentiel humoristique d'une banane ? </figcaption>
</figure>

© Technofutur TIC................................................................Initiation au langage HTML5................................................................ Page 9


Module 4 - Les images
Ressources
Adobe Stock (payantes)
https://stock.adobe.com

Creative Commons - Banque d'images (gratuites)


http://search.creativecommons.org/?lang=fr

Droit d'auteur sur Internet


https://economie.fgov.be/fr/themes/propriete-intellectuelle/droit-dauteur/le-droit-dauteur-
sur-internet

Photopea
https://www.photopea.com/

Aviary
https://www.aviary.com/

© Technofutur TIC...............................................................Initiation au langage HTML5............................................................... Page 10


Module 5 - Les liens
Mémo
Lien hypertexte
Un lien hypertexte peut aussi bien être placé sur du texte que sur une image ou les deux
à la fois.
• <a href="url">mot clé</a>
• <a href="url"><img src="image.jpg" alt="belle image"></a>
• <a href="url">mot-clé <img src="image.jpg" alt="superbe image"></a>
Lien vers un site externe
Via la méthode d'adressage absolu, il suffit d'écrire l'url complète du fichier appelé.
<a href="http://www.monsite.be/page.html">mot clé</a>
URL entre fichiers d'un même site
C'est le chemin à parcourir entre le fichier appelant (là où on introduit le lien) et le fichier
appelé (celui qui s'ouvre). C'est la méthode dite d'adressage relatif.
target="_blank"
Cet attribut permet d'ouvrir le lien dans une nouvelle fenêtre.
Différences entre l'adressage absolu et l'adressage relatif

Adressage absolu
Adressage relatif
Chemin
Etabli depuis la racine du site.
Ex : http://www…, https://www…
Etabli en fonction de la position du fichier appelant par rapport au fichier ciblé.
Ex : contact.html, ../dossier/page.html,…
Fichiers
Externes au site courant (autres sites)
Fichiers internes au site
Portabilité des fichiers
Fichiers non portables si le nom du domaine change.
Fichiers portables si le nom du domaine change.

© Technofutur TIC...............................................................Initiation au langage HTML5............................................................... Page 11


Module 6 - Les Tableaux de données
Mémo
<table border=""></table>
Balises de tableau. L'attribut border définit si oui ou non le tableau doit comprendre une
bordure.
Si oui alors border="1", si non border="0". Dans le deuxième cas, il est aussi possible de
simplement supprimer l'attribut.
<tr></tr>
Balises de ligne de tableau. Un tableau peut comporter autant de lignes que nécessaire.
<td></td>
Balises de cellules. Ces cellules sont comprises dans les balises de ligne <tr></tr>.
<caption></caption>
Balise qui permet de légender le tableau. Doit être placée tout de suite après l'ouverture du
tableau <table>.
<thead></thead>
Définit l'en-tête du tableau qui comprendra les intitulés de colonnes.
<th></th>
Balises définissant l'en-tête. Fonctionnent comme <td>.
<tbody></tbody>
Balise de corps de tableau qui reprendra toutes les lignes qui comprennent les données.

© Technofutur TIC...............................................................Initiation au langage HTML5............................................................... Page 12


Module 6 - Les Tableaux de données
Ressources
Créer un mail HTML de type "Newsletter"
http://www.alsacreations.com/tuto/lire/1533-un-e-mail-en-html-responsive-multi-
clients.html

Tutoriel complet qui montrera les subtilités et les pratiques efficaces pour construire une
mail de type "Newsletter" en HTML.

Au tableau !
http://www.pompage.net/traduction/autableau

Vous souhaitez aller encore plus loin dans les tableaux ? Ce site est un excellent point de
départ pour approfondir vos connaissances à propos des tableaux

© Technofutur TIC...............................................................Initiation au langage HTML5............................................................... Page 13


Module 7 - Les Formulaires
Mémo
Ce mémo regroupe toutes les nouvelles balises (et leurs attributs) relatives aux formulaires
vues dans ce module.
<form></form>
Balises délimitant la zone d'édition du formulaire.
method=" "
L'attribut de <form> qui permet de signaler au serveur de quelle manière sont passées les
informations.
Deux valeurs possibles : GET ou POST.
action=" "
Le paramètre de <form> qui permet de signaler au serveur l'adresse du script qui va traiter
les informations encodées. Le script est un CGI ou un fichier PHP,….
<input …
Balise qui permet d'insérer un champ dans un formulaire. Le type de champ (radio, text,
checkbox, ..) est précisé dans l’attribut type.
type=" "
Un attribut de <input …> qui permet de préciser quel genre de champ sera présenté dans
le navigateur.
Voici les valeurs possibles : text, radio, checkbox, password, submit, reset, email, file, tel,
date, range, button, color, url.
value=""
C'est l'attribut qui définit la valeur du champ.
<textarea></textarea>
Il permet de disposer d'une zone de texte plus ou moins grande où l’utilisateur peut écrire
un texte plutôt qu’une phrase.
<select></select>
Balise qui permet d'insérer une liste déroulante dans un formulaire.
<option>
Balise permettant d'ajouter une option dans une liste déroulante. Cette balise se trouve
obligatoirement entre les balises <select></select>.
name=" "
Attribut qui s'applique à tous les champs et qui précise le nom d’un champ. Ce nom est utilisé
par les scripts lors de la récupération des données.

© Technofutur TIC...............................................................Initiation au langage HTML5............................................................... Page 14


Module 8 - Contenus Multimédias
Mémo
Ce mémo récapitule les notions et balises que nous avons pu aborder dans ce module.
<audio></audio>
Elément audio
<video></video>
Elément vidéo
controls
Attribut des balises <audio> et <video> assurant la présence des contrôles de lecture
<iframe>
Balise qui permet d'intégrer du contenu externe dans vos pages.
src="url"
Attribut qui permet de définir l'emplacement de la ressource de l'iframe. C'est également
l'attribut qui précise la source pour l'audio, la vidéo et les images.
height="450"
Cet attribut vous permet de définir une valeur en pixels définissant la hauteur de l'iframe.
width="650"
Cet attribut vous permet de définir une valeur en pixels définissant la largeur de l'iframe.
frameborder="0" *
Précise si l'iframe doit afficher une bordure autour de celle-ci. Si la valeur vaut zéro, l'iframe
n'affichera pas de bordure. Si la valeur vaut 1, l'iframe affichera une bordure.

* Notez que cet attribut est à éviter. Préférez les CSS pour ajuster cette propriété via les
propriétés CSS spécifiques. Vous aurez un aperçu des CSS dans le module 10 de ce cours.
Il vous est aussi possible d'en apprendre davantage à propos des CSS via la formation en
ligne Initiation aux feuilles de styles en cascade (CSS, lien dans les compléments) proposée
par Technofutur TIC.

© Technofutur TIC...............................................................Initiation au langage HTML5............................................................... Page 15


Module 8 - Contenus Multimédias
Ressources
Cours CSS organisé par Technofutur TIC
http://www.technofuturtic.be/Formation/Initiation-aux-feuilles-de-style-en-cascade--CSS-?
ftt=3&a=1&ihh=1&cp=0

Video HTML5 sur Wikipédia


http://fr.wikipedia.org/wiki/Vid%C3%A9o_HTML5

© Technofutur TIC...............................................................Initiation au langage HTML5............................................................... Page 16


Module 9 - Un site
Mémo
index.html
C'est le nom que doit porter le fichier de votre page d'accueil. Cette page sera
automatiquement affichée aux visiteurs lorsqu'ils arriveront sur votre site par son adresse,
http://www.monsite.be, par exemple.
Navigation primaire
La navigation primaire est la navigation principale du site, celle qui permet de passer d'une
section, d'une rubrique ou d'une page du site à une autre.
Ce type de navigation est présente sur TOUS les sites... sans cela, ce n'est pas un site. ;)
Navigation secondaire
Une navigation secondaire est une navigation interne à une section, à une rubrique ou à
une page. Plus à ce sujet dans les compléments.
<nav></nav>
C'est la balise de section qui contiendra la navigation, qu'elle soit primaire ou secondaire.

© Technofutur TIC...............................................................Initiation au langage HTML5............................................................... Page 17


Module 10 - Les CSS
Mémo
Ce mémo reprend les notions abordées dans ce module, qui traite des CSS.
CSS
Cascading Style Sheet = feuille de style en cascade
<link rel="stylesheet" type="text/css" href="mafeuilledestyle.css" />
Permet de lier une feuille de styles à un document HTML. Doit être inséré dans la
partie <head> du document HTML.
sélecteur { propriété: valeur; }
Syntaxe type des règles de CSS.
Par exemple : p {font-size: 11px;}
background-color: white;
Propriété qui permet de définir la couleur de fond de l'élément ciblé par le sélecteur.
font-family: Arial ;
Propriété qui permet de définir la police de caractères de l'élément ciblé par le sélecteur.
color : White;
Propriété qui permet de définir la couleur de texte de l'élément ciblé par le sélecteur.

© Technofutur TIC...............................................................Initiation au langage HTML5............................................................... Page 18


Module 10 - Les CSS
Ressources
Les différences de sélecteurs des versions 2 et 3 de CSS
https://www.xul.fr/css/selecteur.php

Ce lien vous donnera plus d'informations au sujet des différences de sélecteurs en


fonction des versions du langage CSS.

© Technofutur TIC...............................................................Initiation au langage HTML5............................................................... Page 19


Conclusion

Merci d'avoir suivi notre cours !

Sachez que d'autres formations en ligne sont accessibles via notre centre de formation :

• Trouver l'information sur Internet


• Initiation au langage HTML5
• Initiation à la programmation à l'aide de JavaScript
• Promotion et référencement de sites web
• Initiation aux feuilles de styles en cascade (CSS)
• Chercher un emploi à l'aide d'Internet
• Se lancer dans la création d'un site web
• Initiation au langage PHP
• Se lancer dans un commerce en ligne

Et il existe également d'autres formations en salle et séminaires. Plus d'informations


sur notre site http://www.technofuturtic.be.

Ã# bientôt ;-)

© Technofutur TIC...............................................................Initiation au langage HTML5............................................................... Page 20

Vous aimerez peut-être aussi