1
Formation Certifiante Développement WEB
Yellow Belt Certification
International Consulting Canada
Formation Certifiante
Développement Web
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
2
Formation Certifiante Développement WEB
Contenu Séance 2
N° Séance Objectif Pédagogie
(Création des pages web avec HTML)
100% Pratique
• Les tableaux en HTML
HTML Exercice :
• Le HTML sémantique ▪ Création d’un
Séance 2
formulaire
• Les formulaires d’inscription
• Audio et vidéo
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
3
Formation Certifiante Développement WEB
La balise Table en HTML
Pour faire un tableau HTML, il faut utiliser les balises suivantes :
• La balise < table > : elle indique au navigateur qu'il faut afficher un tableau. Tout ce qui se
trouve entre les balises < table > < /table > est organisé en lignes et en colonnes.
• La balise < tr >, pour « table row » : elle désigne une ligne du tableau. Les éléments
renseignés à l'intérieur des balises < tr > < /tr > s'affichent sur une ligne.
• La balise < td >, pour « table data » : elle permet de remplir le contenu d'une cellule
Le tableau HTML se construit ligne par ligne. Après avoir inséré la balise < table >, il faut
coder chaque ligne du tableau l'une après l'autre. Le nombre de colonnes est déterminé par
le nombre de balises < td > de chaque ligne. Pour créer un tableau HTML à 2 lignes et 2
colonnes, par exemple, le code ressemble à cela :
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
4
Formation Certifiante Développement WEB
Pour ajouter un titre a un tableau en html avec la balise
<caption> Titre de tableau</caption>
Quelque Attributs de la balise table :
1. Border = pour afficher le cadre d’un tableau en HTML
2. Bgcolor = pour ajouter un fond a un tableau
3. Align = pour positionner un tableau (center , right, left )
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
5
Formation Certifiante Développement WEB
Exercice : Ecrire le code HTML qui donne un affichage d’un tableau comme ça :
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
6
Formation Certifiante Développement WEB
Correction :
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
7
Formation Certifiante Développement WEB
Le HTML sémantique
Le HTML sémantique permet, à travers l'utilisation de balises spécifique de préciser la
sémantisme (la signification, le sens) des informations contenues dans les pages web. Elle est
très importante vis à vis du référencement des pages car elle permet aux moteurs de
recherche de mieux comprendre l'organisation et le sens de la page Web.
Les balises sémantiques principales:
Elle permettent de structurer le document
Exemple des balises sémantique
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
8
Formation Certifiante Développement WEB
Balise Sens
Le body contient l'ensemble des informations de la page, il peut contenir directement un
body entête (header) et un pied de page (footer) ainsi que d'autres parties connexes (balise
aside)
Sur un site internet, on peut observer la partie haute, appelée ‘entête’ ou ‘header’ en
header anglais, que l’on retrouve sur l’ensemble des pages du site. Cette zone peut alors être
définie à l’aide de la balise <header>. De manière générale, on retrouvera dans cette zone
le logo, et au minimum, la navigation principale du site
Cette balise permet de déclarer le contenu principale de la page, en dehors de l'entête et
main du pied de page éventuels.
Le contenu éditorial de votre site peut être balisé à l’aide de la balise <article>. Cette balise
article va permettre de signaler aux robots d’indexation quel éléments sont en lien avec le sujet
de la page. Vous pouvez glisser dans la balise <article>, le titre, les informations sur l’auteur
ou la date de publication, la catégorie, le corps de l’article
Le contenu de notre site présent dans une des balises <main> ou <article> peut être plus
section ou moins complexe, c’est pour cela qu’il est important de correctement structurer le
contenu principal de la page en plusieurs zones. Pour cela, il existe la
balise <section> permettant un découpage plus thématique que les
balises <main> et <article> vues précédemment
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
9
Formation Certifiante Développement WEB
Balise Sens
Cette zone peut être définie à l’aide de la balise sémantique <nav>. Il faut tout de même
nav savoir que la balise <nav> n’est pas forcément placée dans le header d’un site, on peut la
retrouver n’importe où et à plusieurs endroits de la page comme par exemple dans le
footer ou dans une barre latérale de contenu (sidebar)
• La septième et dernière balise sémantique de structure de page est <footer>, cette
footer balise sert principalement à délimiter la pied de page
• Dans le footer on insère en général des liens de navigation, le logo du site et le lien vers
les mentions légales
Les formulaires
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
10
Formation Certifiante Développement WEB
Présentation :
Un formulaire HTML permet d'envoyer des données au serveur sous la forme de variables
(paire nom / valeur) appelés champs. Un formulaire est un ensemble de champs, il peut donc
y avoir plusieurs formulaires dans une même page Web.
Chaque formulaire est indépendant et possède l'url du fichier de destination des données
dans un attribut action.
Il existe plusieurs méthodes d'envoi des données (GET et POST).
● Les données envoyées par la méthode GET sont visibles dans l'url dans la barre d'adresse
du navigateur.
● Les données envoyées par la méthode POST, sont encapsulées dans l'entête HTTP de la
requête (mais restent accessible via l'inspecteur dans la partie réseau).
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
11
Formation Certifiante Développement WEB
1. la balise form
Elle doit contenir l'ensemble des champs du formulaire et à minima, l'url du fichier de
destination des données dans l'attribut action ainsi que la méthode utilisée
<form >
<!– les différents champs --->
</form>
1. Les champs :
1.1 la balise input : C'est une balise auto-fermante. Elle doit contenir, au minimum , le
type ainsi que le l'attribut name qui correspond au nom de la variable côté serveur
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
12
Formation Certifiante Développement WEB
Pour mettre une valeur initiale a un champ
Pour rendre le champ est obligatoire
Les autres attributs
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
13
Formation Certifiante Développement WEB
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
14
Formation Certifiante Développement WEB
Les différents types des champs
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
15
Formation Certifiante Développement WEB
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
16
Formation Certifiante Développement WEB
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
17
Formation Certifiante Développement WEB
Les boutons
Pour envoyer les données au serveur, il faut valider le formulaire via un bouton.
On peut utiliser la balise input avec le type "submit" mais il préférable d'utiliser la balise button.
Elle est composée d'une balise ouvrante et d'une balise fermante.
Le libellé se place entre les deux et peut contenir d'autre éléments comme une imag
Elle possède également un attribut type qui peut prendre 3 valeurs:
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
18
Formation Certifiante Développement WEB
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
19
Formation Certifiante Développement WEB
Exercice :
Créer un formulaire HTML5 avec les éléments suivants :
• Champ de texte avec l’attribut placeholder
• Champ pour renseigner une URL
• Zone de texte pour renseigner une adresse “textarea”
• Champ pour renseigner une adresse eMail
• Champ réclamant un format numérique
• Champ de date avec ouverture d’un calendrier
• Champ de téléchargement d’un fichier
• Un bouton qui sert à envoyer votre formulaire
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
20
Formation Certifiante Développement WEB
objectif atteint
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
21
Formation Certifiante Développement WEB
Correction
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
22
Formation Certifiante Développement WEB
La balise video
Pour afficher une vidéo avec le minimum de paramètres
La balise audio
Pour le son et la musique, il existe une balise audio qui fonctionne sur le même principe que
la balise video.
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
