html
Realiser par: ILYASS ELMOGHFIRIE
Définitio
n
HTML, ou HyperText Markup Language :
est un langage de balisage utilisé pour
structurer le contenu sur le web. Il permet
d'organiser le texte, les images et les liens
pour former des pages web interactives.
1 3
Structure :
HTML utilise des balises (ou "tags") pour décrire la
structure du contenu d'une page. <tag>….</tag> Par exemple:
<h1>…. </h1> pour les titres,
<p> ……….</p> pour les paragraphes,
<button> click ici </button>….
1 3
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>TITRE</h1>
<p>paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
< Meta charset="UTF-8"> (iso-8859-1)
<title>HELLO</title>
</head>
<body>
<h1>Welcome</h1>
<h1><مرحبا بكم/h1>
<p>paragraph.</p>
</body>
</html>
0
Exercice
1 la somme de 2
nombre
T 1
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Calcul de la somme</title>
<script>
function calculerSomme() {
var nbr1 = parsefloat([Link]("nbr1").value);
var nbr2 = parsefloat([Link]("nbr2").value);
var somme = nbr1 + nbr2;
[Link]("resultat").value = somme;
}
</script>
</head>
T 1
<body>
<h1>Calcul de la somme de deux nombres</h1>
<label for="nbr1">Nombre 1:</label>
<input type="number" id="nbr1" name="nbr1"><br><br>
<label for="nbr2">Nombre 2:</label>
<input type="number" id="nbr2" name="nbr2"><br><br>
<button onclick="calculerSomme()">Calculer la
somme</button><br><br>
<label for="resultat">Résultat:</label>
<input type="text" id="resultat" name="resultat"
readonly><br><br>
<a href="[Link] target="_blank">Visit
EST Agadir!</a>
</body>
</html>
T 1
02Exercice
calculer ttc avec
remise
T 1
<!DOCTYPE html>
<html>
<head>
<title>Calculateur de Montant TTC</title>
<script>
function calculerTTC() {
var montantHT =
parseFloat([Link]('montantHT').value);
var tauxTVA =
parseFloat([Link]('tauxTVA').value);
var remise = parseFloat([Link]('remise').value);
var montantTTC = montantHT * (1 + tauxTVA / 100) - remise;
[Link]('montantTTC').value =
[Link](2);
}
</script>
</head>
T 1
<body>
<h1>Calculateur de Montant TTC</h1>
<label for="montantHT">Montant HT:</label>
<input type="text" id="montantHT" required><br><br>
<label for="tauxTVA">Taux de TVA (%):</label>
<input type="text" id="tauxTVA" required><br><br>
<label for="remise">Remise:</label>
<input type="text" id="remise" required><br><br>
<input type="button" value="Calculer"
onclick="calculerTTC()"><br><br>
<label for="montantTTC">Montant TTC:</label>
<input type="text" id="montantTTC" readonly>
</body>
</html>
T 1
03La mention des
notes
T 1
<!DOCTYPE html>
<html>
<head>
<title>Validation de Module</title>
<script>
function Mention() {
var note = parseFloat([Link]('note').value);
if (note >= 18 && note <=20) {
resultat = "Excellent";
} else if (note >= 16 && note <18) {
resultat = "Très Bien";
} else if (note >= 14 && note <16) {
resultat = "Bien";
} else if (note >= 12 && note <14) {
resultat = "Passable";
} else if (note <12 && note >=0){
resultat = "Non Validé";}
[Link]('resultat').value = resultat;}
</script>
</head>
T 1
<body>
<h1>la mention des notes</h1>
<label for="note">Entrez la note:</label>
<input type="text" id="note" name="note"><br><br>
<button onclick="Mention()">la mention</button><br><br>
<label for="resultat">Résultat:</label>
<input type="text" id="resultat" name="resultat"
readonly><br><br>
</body>
</html>
conclutio
n
En conclusion, maîtriser les fondamentaux
du HTML est indispensable pour tout
développeur web. Une bonne
compréhension de ce langage vous
permettra de créer des sites web plus
robustes, accessibles, et faciles à
maintenir.
1 3
Merci de
votre
attention
●Realiser par: ILYASS
ELMOGHFIRINE
T 4