html 5

HTML 5
Le langage HTML
1. définition :
Le HTML, qui est l’acronyme de HyperText Markup Language, est le langage de balisage
standard utilisé pour la création de pages web. Il permet de structurer le contenu sur les
sites web, y compris le texte, les images et autres éléments multimédias. Un navigateur web,
comme Chrome, Firefox ou Safari, lit le code HTML pour afficher les pages web aux
utilisateurs. HTML est principalement composé de balises, utilisées pour définir les éléments de
la page. Chaque balise a une fonction spécifique et une manière spécifique d’afficher le
contenu.
2. Histoire :
La genèse du HTML remonte à 1990, lorsque Tim Berners-Lee, un physicien britannique
travaillant au sein du CERN – l’Organisation européenne pour la recherche nucléaire – a conçu
ce langage de balisage.
En 1995, cinq ans après sa création initiale, le HTML 2.0 a été présentée au monde et cette
première version officielle a posé les jalons pour le développement futur du langage et a
commencé à définir le format de ce qui allait devenir la pierre angulaire du Web tel que nous le
connaissons aujourd’hui.
Deux ans plus tard, en 1997, la version HTML 3.2 a fait son apparition en introduisant des
éléments de style plus avancés, offrant aux développeurs une plus grande flexibilité dans la
conception des sites web.
La même année, une autre version significative du HTML a été publiée, le HTML 4.0. Cette
version marquante a ouvert la voie à une plus grande intégration avec les feuilles de style en
cascade (CSS), facilitant la création de designs plus élaborés, et a renforcé le support pour le
contenu multimédia, transformant ainsi le Web en une plateforme plus interactive et
dynamique.
En 2000, une version révisée du HTML 4.0, connue sous le nom de HTML 4.01, a été
introduite. Cette version mineure avait pour but de corriger divers bugs et problèmes
découverts dans la version précédente.
C’est en 2008 que le développement de ce qui allait devenir le HTML5 a commencé. Sous
l’égide du consortium World Wide Web (W3C) et du Web Hypertext Application Technology
Working Group (WHATWG), le HTML5 a cherché à répondre aux besoins des applications web
modernes. Après six ans de développement, le HTML5 a été officiellement lancé en octobre
2014, introduisant une multitude de nouvelles fonctionnalités, y compris le support intégré
pour le contenu vidéo et audio, éliminant ainsi la nécessité de plugins tiers.
3. Les langages les plus utilisés avec le HTML5 :
1. CSS (Cascading Style Sheets) :

 Utilisation : CSS est utilisé pour styliser les pages web, y compris la mise en page, les
couleurs, les polices, et les transitions ;
 Version actuelle : CSS3, qui fonctionne particulièrement bien avec HTML5 et offre
des fonctionnalités telles que les animations, les transitions, et la conception réactive ;
2. JavaScript :
Cripesfax proposé par : Mr Mohamed Yassine Nouri Page 1

HTML 5
 Utilisation du JS : JavaScript permet d’ajouter de l’interactivité et de la dynamique

aux pages web. Cela inclut des choses comme des animations, des validations de
formulaires, et la communication avec les serveurs et c’est de nos jours extrêmement
présent sur le Web ;
 Frameworks et bibliothèques populaires : jQuery, Angular, React, et Vue.js sont
quelques-uns des nombreux outils qui facilitent le développement avec JavaScript ;
3. SVG (Scalable Vector Graphics) :
 Utilisation de SVG : C’est un langage XML pour décrire des graphiques en deux
dimensions, à la fois statiques et dynamiques. Il est souvent utilisé avec HTML5 pour
créer des graphiques et des animations vectorielles ;
4. WebGL :
 Utilisation : WebGL est une API JavaScript pour le rendu de graphiques 3D et 2D
sans l’utilisation de plug-ins. Il permet de créer des expériences visuelles complexes et
interactives directement dans un navigateur ;
5. JSON (JavaScript Object Notation) :
 Utilisation du JSON : Il est souvent utilisé avec HTML5 et JavaScript pour
échanger des données entre le serveur et le client. Il est léger et facile à utiliser, ce qui
le rend idéal pour les applications web modernes ;
6. AJAX (Asynchronous JavaScript and XML) :
 Utilisation : AJAX permet de charger dynamiquement du contenu sans recharger
toute la page. Il est souvent utilisé en combinaison avec HTML5 pour créer des
expériences web plus fluides et réactives.
4. Les éditeurs HTML :

Il est également important de savoir qu'il existe deux types d'éditeurs de texte.
1. Éditeur HTML textuel

Comme on peut s'y attendre de son nom, un éditeur HTML textuel est basé sur du texte, il est
donc essentiel que nous ayons une connaissance du HTML pour pouvoir l'utiliser. Avec ce type
d'éditeurs, nous obtiendrons une plus grande liberté d'utilisation, ainsi que des options
personnalisées.
2. Éditeur WYSIWYG
WYSIWYG est l'acronyme de «Ce que vous voyez est ce que vous obtenez»,cela signifie que
nous sommes confrontés à des éditeurs qui incluent leur propre interface visuelle d'une manière
très similaire à ce que serait un traitement de texte, où nous pouvons ajouter des images et du
texte et les personnaliser avec différents formats, styles, polices, entre autres configurations.

HTML 5



TP1/TP2: Premiers pas
TP3: Les textes, les titres et les paragraphes
TP4: Les listes
TP5: Les images

4)HTML.5
TP6: Les liens hypertextes
TP7 : Son et vidéo.
TP8: Les tableaux
TP9: Les formulaires

HTML 5
Activité1
1) Lancer l’éditeur bloc-notes et taper la phrase suivante: ce texte est écrit en utilisant bloc-notes.
2)Enregistrer votre travail dans un fichier ayant pour nom tp1.html et pour emplacement votre
dossier de travail.
3)Fermer l’éditeur bloc-notes.
4)Ouvrir le fichier tp1.html en utilisant le navigateur disponible et décrire le résultat obtenu.
 Le fichier texte s’est transformé en page Web ce qui signifie qu'une page Web n’est
rien d’autre qu’un fichier texte enregistré avec l’extension html.
 En double cliquant sur ce fichier le navigateur se lance avec comme contenu le fichier
tp1.html,ce qui signifie que le langage HTML utilisé pour la création des pages Web,
est un langage interprété, dont l’interpréteur est le navigateur installé sur la machine
de test, telque: Firefox, InternetExplorer, googlechrome,…
5) Activer la commande outils de développement du menu paramètres, que remarquez-vous?

HTML 5
Le document HTML peut contenir un ensemble de balises tels que, <html>, <body>,
<head>, etc
 Les balises du langage HTML sont inclues entre les signes inférieur(<) et supérieur(>).
6) Remplacer dans la partie développement le texte écrit précédemment par "Voici ma

première ligne en HTML" et observer le résultat obtenu.
La balise body contient le contenu de la page web.
7) En déduire le rôle de chaque balise.

Balise Rôle
html Elle en globe tout le contenu de la page.
head Elle sert à définir quelques informations générales sur la page.
body Elle est utilisée pour définir le contenu de la page Web.

HTML 5
Activité 2
1) Lancer l'éditeur Visual studio code.
2) Cliquer sur le menu Fichier et activer la commande Nouveau fichier.
3) Enregistrer votre travail dans un fichier ayant pour nom tp2.html et pour emplacement votre
dossier de travail avec type de fichier html .
4) Saisir le code HTML donné ci-dessous :
<!DOCTYPE hml>
<html>
<head>
<meta charset="UTF-8">
<title>
Première page HTML

</title>
</head>
<body>
Voici ma seconde ligne en HTML
</body>
</html>
6) Cliquer sur la commande Run – start debugging

HTML 5
7) En déduire le rôle de la balise title.

Balise Rôle
title La balise title sert à définir le titre de la page web qui sera affiché
dans la barre du titre du navigateur.
8) Visualiser votre travail, que remarquez-vous?
Les commentaires sont des notes, des informations et des détails qui accompagnent le
code source et qui ne s’afficheront pas sur la page web.
Cela permet une meilleure relecture du code.

HTML 5
Activité3
1)Lancer l'éditeur Visual studio code.
2)Créer un nouveau fichier HTML et l’enregistrer dans votre dossier de travail sous le nom
tp3.
3)Saisir et tester le code HTML donné ci-dessous.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
<title>tp3</title>
</head>
<body>

Le HTML5, pour HyperTextMarkupLanguage5, est une version du célèbre format
HTML utilisé pour concevoir les sites internet.

Celui-ci se résume à un langage de balisage qui sert à l'écriture de l'hypertexte
indispensable à la mise en forme d'une page Web.
</body>
</html>
L’affichage du texte est sous la forme:phrase1phrase2.
5) Effectuer les modifications présentées dans le tableau ci-dessous sur votre code HTML.

HTML 5
N° Modification Résultats
1 phrase1<br> phrase1(un retour à ligne)

phrase2
2 <p>phrase1</p> phrase1(un retour à ligne)

<p>phrase2</p> une ligne vide
phrase2
3 <p>phrase1</p><br> phrase1(un retour à ligne)

<p>phrase2</p> une ligne vide(un autre retour à ligne)
phrase2
4 <p align= ‘’right>phrase phrase1 (aligné à droite)

1</p> +un retour à laligne
<p> phrase 2</p> Une ligne vide
phrase2
6)En déduire le rôle de chaque balise.
Balise Rôle
p La balise p permet d'introduire un nouveau paragraphe + un retour à la

ligne + une ligne vide.
Les attributs de la balise p:
align: permet d'aligner un paragraphe à gauche, aucentre et à droite.
<palign="left|center|right">….</p>
br La balise br permet un retour à la ligne.
7) En déduire le rôle de la balise hn.
 La balise qui permet de définir un titre est hn ; avec n varie de 1 à 6.

 Pour chaque titre, il y a une taille qui décroit du niveau 1 au niveau 6.
 Les balises hn incluent des retours automatiques à la ligne.
 Cela signifie qu'il n'est pas nécessaire d'ajouter p pour commencer un nouveau paragraphe
à la suite d'une balise de ce type.

HTML 5
8) Ajouter les lignes présentées dans le tableau ci-dessous à la fin du fichier tp3 et décrire les
résultats obtenus.
N° Les lignes à ajouter

1 <blockquote>
La balise blockquote permet de mettre un paragraphe en valeur
</blockquote>
Résultat La balise blockquote permet de mettre un paragraphe en valeur

2 <mark>
Ce texte est important
</mark>
Résultat Ce texte est important
9)En déduire le rôle de chaque balise.

Balise Rôle
blockquote La balise blockquote permet de mettre en valeur un paragraphe

(une citation par exemple).
mark La balise mark permet d’appliquer un style surligné jaune sur le

texte qu'elle décrit.

HTML 5
Activité4
1) Lancer l'éditeur Visual studio code.
2) Cliquer sur le menu Fichier et activer la commande Nouveau fichier.
3) Enregistrer votre travail dans un fichier ayant pour nom tp4.html et pour emplacement votre
dossier de travail.
4) Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous.
Solution:

HTML 5
5) Ajouter les lignes suivantes à la fin du fichier tp4 et visualiser votre travail.
<h3>Évolution du langage: </h3>

<ul>
<li>1989-1992: Origine </li>
</ul>
</body>
 La balise ul permet de créer une liste énumérative (à puces) ou non

ordonnée.
 La balise li encapsule des éléments présents dans des listes.
7) Compléter le reste de la liste sachant qu’elle contient aussi:

o1993: HTML1.0
o1995-1996: HTML2.0
o1997: HTML3.2.et4.0
o2000: XHTML
oDe 2007 à nos jours: HTML5 et abandon du XHTML2

HTML 5
1 <ul type="square"> Puces carrées:

 Elément1
 Elément2......
2 <ul type="circle"> Puces circulaires:

o Elément1
o Elément2......

HTML 5
L’attribut type de la balise ul peut avoir les valeurs suivantes:

 square: puces carrées.
 circle: puces circulaires.
 disc: puces circulaires pleines(valeur par défaut)
9) Remplacer la balise ul par la balise ol et observer les résultats obtenus.
10) En déduire le rôle de chaque balise ol.

La balise ol permet de créer une liste numérotée (ordonnée).
<ol type="A"> Lettres majuscules:

1 A. Elément1
B. Elément2
Lettres minuscules:
a.Elément1
2 <ol type="a">
b.Elément2......
Chiffres romain majuscules:

I.Elément1
3 <ol type="I"> II.Elément2......
Chiffres romains minuscules:

i.Elément1
4 <ol type="i">
ii.Elément2......

HTML 5
L’attribut type de la balise ol peut avoir les valeurs suivantes:
A: lettres majuscules.
a: lettres minuscules.
I:chiffres romains majuscules.
i:chiffres romains minuscules.
Il est possible d'imbriquer des listes même si elles ne sont pas de même nature.
La balise li admet un attribut type, qui est prioritaire sur l'attribut type de ol ou ul
12) Ajouter les lignes suivantes à la fin du fichier tp4 et visualiser votre travail.
<dl>
<dt>HTML</dt>
<dd>Hyper TextMarkup Language </dd>
</dl>
<dl>
<dt>XHTML</dt>
<dd>Extensible Hyper TextMarkup Language </dd>
</dl>
</body>
Résultat:

HTML 5
13)En déduire le role de chaque balise:
La balise dt permet de créer une liste de définitions.

Les autres elements employés pour ce meme objectif sont la balise dd et la balise dl:
 dl(Definition list): element structurel annonçant et encadrant une liste de
définitions.
 dt(Definition term):element contenant le terme à définir.
 dd(Definition description): élément contenant la description du terme précédemment
écrit.

HTML 5
Activité5
1)Créer un nouveau fichier HTML et l’enregistrer dans votre dossier de travail sous le nom tp5.
2)Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous.
3)Créer un nouveau dossier nommé images dans votre dossier de travail.

HTML 5
4)Copier deux images d'extension jpg dans le dossier images, et renommer-les image1.jpg et
image2.jpg.
5)Ajouter les lignes suivantes à la fin du fichier tp5 et visualiser votre travail. :
<img src="images\image1.jpg"width="200"height="150">
<imgsrc="images\image2.jpg"width="200"height="150"align="right"border="2"alt
="image insérée">
</body>
6)En déduire le rôle de la balise img.
Dans les pages Web, l'insertion d'une image se fait avec la balise suivante:
<imgsrc="adresse"width="largeur"height="hauteur"border="taille"alt="texte"
align="alignement">

HTML 5
 src="adresse": définit l'adresse absolue (http://...) ou relative de l'image à afficher.

 width="largeur" et height="hauteur": définissent la largeur et la hauteur de l'image en
pixels.
 alt="texte":permet de définir le texte de l'infobulle de l'image.
 border="taille": définit la largeur de la bordure autour de l'image.
 align="alignement" :permet de définir l'alignement de l'image("left","center","right").
7) Effectuer la modification ci-dessous sur la balise body et décrire le résultat obtenu.
<body background="images\image2.jpg">
 L’attribut background de labalise body permet de mettre une image comme arrière-
plan d'une page.
 L'image d'arrière-plan d'une page est utilisée avec l'effet demosaïque (l'image est
dupliquée autant de fois que nécessaire afin de couvrir la totalité de la fenêtre du
navigation).

HTML 5
Activité6
2)Saisir et tester le code HTML donné ci-dessous.
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title> tp6</title>
</head>
<body>
<h1>Les liens en HTML </h1>
<p>Rechercher avec Google:
<a href="https://www.google.com/">www.google.com</a>
</p>
</body>
</html>

HTML 5
5)En déduire le rôle de la balise a.
 La balise a permet de créer un lien hypertexte pointant vers un document en spécifiant l'url
de celui-ci au niveau de l'attribut href.
<a href="adressecible">texte</a>
 Pour chaque adresse cible correspond un protocole, comme le montre le tableau ci-
dessous:
Syntaxe Description
<ahref="http://adresseWeb"> Protocole http
<ahref="ftp://adresseftp"> Protocole FTP pour le transfert de fichiers
<ahref="mailto:adresseemail"> Protocole SMTP pour le courrier électronique
<ahref="file://adressefichier"> Adressage locale sur un poste non distant
6) Effectuer les modifications suivantes sur la balise a.
<a href=https://www.google.com/
title="Lien vers le moteur de recherche google"
target="_blank">www.google.com
</a>
 L’attribut target permet de spécifier la fenêtre d'affichage du lien.

 Cette propriété peut avoir les valeurs suivantes: "_blank","_parent","_self","_top".
_self : Chargez l’URL dans le même contexte de navigation que le contexte actuel.

HTML 5
Il s’agit du comportement par défaut.

_blank : Chargez l’URL dans un nouveau contexte de navigation. Il s’agit
généralement d’un onglet, mais les utilisateurs peuvent configurer les navigateurs
pour qu’ils utilisent de nouvelles fenêtres à la place.
_parent : Chargez l’URL dans le contexte de navigation parent de l’URL actuelle.
S’il n’y a pas de parent, celui-ci se comporte de la même manière que _self.
_top : Chargez l’URL dans le contexte de navigation de niveau supérieur (c’est-à-
dire le contexte de navigation « le plus élevé » qui est un ancêtre du contexte actuel
et qui n’a pas de parent). S’il n’y a pas de parent, celui-ci se comporte de la même
manière que _self.
 L’attribut title permet d’afficher un texte au sur vol du lien.
7)Compléter le code HTML écrit précédemment à fin de réaliser la page web représentée ci-
dessous.

HTML 5
8)Modifier les dimensions de l’image wikipedia en 600*600 et observer le résultat obtenu.
 On visualise une page web très longue.
9)Ajouter les lignes présentées dans le tableau ci-dessous au début et à la fin du fichier tp6.
Leslignesàajouter Emplacement
<a name="Haut"> </a> Au début du fichier tp6: juste après le titre

<a href="#Bas">bas de page</a> "Les liens en HTML".
<a name="Bas"></a>
<a href="#Haut">Remonter</a> À la fin du fichier tp6.
</body>

HTML 5
10)Visualiser votre travail, que remarquez-vous?
 La navigation dans cette même page est facile avec l'existence de deux liens internes
(bas de page) et (Remonter).
 La création d'un lien interne se fait en deux étapes:
La création d'un signet: l'endroit où le lien interne doit pointer, à travers la balise a:
<a name="nomdusignet">texte</a>
La création du lien interne: <a href="#nomdusignet">texte</a>

HTML 5
Activité7

HTML 5
4)Ajouter les lignes suivantes à la fin du fichier tp10 et en déduire le rôle de chaque attribut:
a)<audiocontrols="controls"loop="loop"autoplay="autoplay"preload="auto">
<source src="StarWars.mp3">
</audio>
La balise audio permet de lire des fichiers sons ou des flux audio directement dans la page
en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause et
contrôle du volume.

HTML 5
b)<videocontrols="controls"height=300width=300poster="image_poster.jp
g"><sourcesrc="STARWARS9OfficialTrailer(2019).mp4">
</video>
La balise video permet de lire des fichiers ou des flux vidéo directement dans la page en
proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause,
positionnement dans la vidéo et contrôle du volume.

HTML 5
Activité8
Solution:

HTML 5
3)Ajouter les lignes suivantes à la fin du fichier tp8 et visualiser votre travail.
<table border="1">
<tr>
<th>Lesbalises en paires</th>
<th>Lesbalises orphelines</th>
</tr>
<tr>
<td>body</td>
<td>hr</td>
</tr>
</table>
</body>
 La définition d'un tableau:<table>…</table>

 La définition d'une ligne:<tr>…</tr>
 La définition d'une cellule contenant l'en-tête du tableau:<th>…</th>
 La définition d'une cellule:<td>…</td>
5)Ajouter les éléments de la liste suivante dans l’objet crée précédemment

img, p, ul, br

HTML 5
6)Effectuer les modifications suivantes et en déduire le rôle de chaque attribut:
8)Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous.

HTML 5

HTML 5
Activité9

3)Ouvrir le fichier tp9.html qui est situé sous le bureau.
Ce fichier contient le code HTML suivant:

<!DOCTYPEhtml><html>
<head>
<metacharset="UTF-8">
<title>
tp9
</title>
</head>
<body>
<h1>Inscription</h1>
<form action="sauvegarder.html"name="mon_premier_formulaire"method="GET">
1
<p>Votre photo jpg,png,bmp...:<br>
<input name="fichier"type="file"size="35">
</p>
<p>Loisirs:</p>
2
<p>
<input type="checkbox"name="option1"value="Sport">Musique<br>
<input type="checkbox"name="option2"value="Musique">Théatre<br>
<input type="checkbox"name="option3"value="Dessin">Dessin<br>
</p>
<p>Prénom: 3
<input type="text"name="prenom"maxlength="30">
</p> 4
<p><input type="reset"value="Annuler"></p>
<p>Adresse:<br></p>

HTML 5
5
<textarea name="Adresse"cols="25"rows="3">
3
</textarea>
<p>Section:<br></p>
<select name="liste"size="1">
6
<option Selected>Sciencesdel'informatique</option> 3
<option>Economieetservices</option>
<option>Sciences</option>
<option>Lettres</option>
</select>
<p>Date de naissance:
7
<input type="date"name="date"> 3
</p>
<p>Nom:
8
5
<input type="text"name="nom"maxlength="30"> 3
</p>
9
<p><input type="submit"value="Envoyer"> 3
</p>
<p>Adresse Email: 10
3
<input type="email"name="email">
</p>
<p>Sexe:</p>
<p>
11
<input type="radio"name="sexe"value="Masculin">Masculin<br> 3
<input type="radio"name="sexe"value="Féminin">Féminin<br>
</p>
</form>
</body>
</html>

HTML 5
4)Visualiser la page web tp9,que remarquez-vous?
Le code HTML du fichier tp8 permet de créer un formulaire.

Les formulaires HTML sont un des éléments principaux d'interaction entre un utilisateur et un
site web. Ils permettent à l'utilisateur d'envoyer des données au site web.
La plupart du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les
intercepter et les utiliser elle-même.

HTML 5
5)En se référant à la page web et à son code HTML, remplir le tableau ci-dessous, en
mettant le numéro de chaque élément dans la colonne qui représente le type convenable.
Champ de saisie Zone de texte Liste de choix Bouton
3,7,8,10 5 2,6,11 1,4,9
La balise form:
La balise form declare une zone de formulaire dans la quelle il sera possible pour les utilisateurs
de saisir des informations qui pourront par la suite être récupérées côté serveur.
Il est possible d'utiliser plusieurs formulaires dans une meme page à condition de ne pas le
imbriquer.
Enfin il est important de donner une valeur à l'attribut name du formulaire pour y faire
référence. Les structures utilisées à l'intérieur d'un formulaire sont les éléments:
 Input.
 textarea(zone de texte).
 select(liste de choix).
 button(bouton).
Ses attributs spécifiques sont:
 action: Attribut spécifiant la page à ouvrir lors de la validation du formulaire.

 method: Indique la méthode (getoupost) à utiliser pour récupérer les valeurs comprises
dans le formulaire.
 target: Détermine dans quelle fenêtre (_self,_parent,_top,_blank) s'ouvre l'adresse
spécifiée dans l'attribut action.
Exemple:
<form name="Nomduformulaire"action="/page_traitement"method="post">
<!—Contenu du formulaire-->
</form>

HTML 5
La balise input:
La balise input fait partie des éléments composant un formulaire (avec les tags button, select et
textarea) et permettant donc d'interagir avec l'utilisateur.
Les saisies possibles et le comportement de la balise input dépend fortement de la valeur
indiquée dans son attribut type.

HTML 5

HTML 5

HTML 5
La balise textarea:
La balise textarea fait partie des éléments utilisés au sein des formulaires form afin de récupérer
des informations clients.
Exemple:
<p>Adresse:<br></p>
<textarea name="Adresse"cols="25"rows="3">
</textarea>

HTML 5
La balise select:
La balise select permet de créer une liste déroulante ou à choix multiples.

Attribut Valeur Rôle
multiple multiple Autorise la sélection multiple d'éléments de

la liste.
size nombre Définit le nombre de valeurs visibles.
disabled disabled Rend le contrôle passif, non modifiable.
name texte Spécifie un nom pour une liste
Exemple:
<p>Section:<br></p>
<select name="Liste"size="1">
<optionSelected>Sciencesdel'informatique</option>
<option>Economieetservices</option>
<option>Sciences</option>
<option>Lettres</option>
</select>

html 5

Transféré par

Droits d'auteur :

Formats disponibles

html 5

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

html 5

Transféré par

Droits d'auteur :

Formats disponibles

HTML 5

3. Les langages les plus utilisés avec le HTML5 :

1. CSS (Cascading Style Sheets) :

Cripesfax proposé par : Mr Mohamed Yassine Nouri Page 1

 Utilisation du JS : JavaScript permet d’ajouter de l’interactivité et de la dynamique

4. Les éditeurs HTML :

1. Éditeur HTML textuel

Cripesfax proposé par : Mr Mohamed Yassine Nouri Page 2

TP1/TP2: Premiers pas

TP3: Les textes, les titres et les paragraphes

TP4: Les listes

TP5: Les images

TP7 : Son et vidéo.

TP8: Les tableaux

TP9: Les formulaires

Cripesfax proposé par : Mr Mohamed Yassine Nouri Page 3

3)Fermer l’éditeur bloc-notes.

4)Ouvrir le fichier tp1.html en utilisant le navigateur disponible et décrire le résultat obtenu.

5) Activer la commande outils de développement du menu paramètres, que remarquez-vous?

Cripesfax proposé par : Mr Mohamed Yassine Nouri Page 4

6) Remplacer dans la partie développement le texte écrit précédemment par "Voici ma

La balise body contient le contenu de la page web.

7) En déduire le rôle de chaque balise.

head Elle sert à définir quelques informations générales sur la page.

body Elle est utilisée pour définir le contenu de la page Web.

Cripesfax proposé par : Mr Mohamed Yassine Nouri Page 5

1) Lancer l'éditeur Visual studio code.

2) Cliquer sur le menu Fichier et activer la commande Nouveau fichier.

4) Saisir le code HTML donné ci-dessous :

Première page HTML

6) Cliquer sur la commande Run – start debugging

Cripesfax proposé par : Mr Mohamed Yassine Nouri Page 6

7) En déduire le rôle de la balise title.

8) Visualiser votre travail, que remarquez-vous?

Cela permet une meilleure relecture du code.

Cripesfax proposé par : Mr Mohamed Yassine Nouri Page 7

1)Lancer l'éditeur Visual studio code.

3)Saisir et tester le code HTML donné ci-dessous.

4) Visualiser votre travail, que remarquez-vous?

L’affichage du texte est sous la forme:phrase1phrase2.

Cripesfax proposé par : Mr Mohamed Yassine Nouri Page 8

1 phrase1<br> phrase1(un retour à ligne)

2 <p>phrase1</p> phrase1(un retour à ligne)

3 <p>phrase1</p><br> phrase1(un retour à ligne)

4 <p align= ‘’right>phrase phrase1 (aligné à droite)

6)En déduire le rôle de chaque balise.

p La balise p permet d'introduire un nouveau paragraphe + un retour à la

br La balise br permet un retour à la ligne.

7) En déduire le rôle de la balise hn.

 La balise qui permet de définir un titre est hn ; avec n varie de 1 à 6.

Cripesfax proposé par : Mr Mohamed Yassine Nouri Page 9

N° Les lignes à ajouter

Résultat La balise blockquote permet de mettre un paragraphe en valeur

Résultat Ce texte est important

9)En déduire le rôle de chaque balise.

blockquote La balise blockquote permet de mettre en valeur un paragraphe

mark La balise mark permet d’appliquer un style surligné jaune sur le

Cripesfax proposé par : Mr Mohamed Yassine Nouri Page 10

1) Lancer l'éditeur Visual studio code.

2) Cliquer sur le menu Fichier et activer la commande Nouveau fichier.