TD : 1H * 8 semaines : (Benjamin Robert : ingénieur informatique)
TP : 1H30 * 8 semaines : (Millet alain)
Évaluation :
Le site web Mozilla présente les bases de l’HTML. Avant de commencer lire rapidement le contenu de ce lien.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titre du site</title>
<!-- commentaire : description de la page-->
<!--....à compléter (liens (fichiers CSS,javascript), balises META ...-->
</head>
<body>
<!-- commentaire : contenu de la page-->
............................à compléter.............</body>
</html>
Créer un répertoire dans votre répertoire personnel S1/web/tp1, créer vos fichiers HTML sur ce répertoire.
Créer un fichier test1.html
Éditez ce fichier avec VsCode
mkdir -p S1/web/tp1
cd S1/web
touch tp1/test.html code .
L’objectif est d’utiliser les balises les plus connues :
<em>premier</em><em>deuxième</em><em>troisième</em>
<p>quatrième</p><p>cinquième</p><p>sixième</p>
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />
<span>balise "inline" générique</span>
<div>balise "bloc" générique</div>
<br>
<hr>
<a href=""> lien </a>
<form action="" method="get">
formulaire : ATTENTION aux attributs "action", "method" dans la balise "form" et
"name", "value" dans les balises "input"<input type="text" id="input1">
<input type="text" name="input2">
<input type="submit" value="valider" >
</form>
<table>
<tr>
<td>C1</td><td>C2</td>
</tr>
</table>
href
et action
)sur le site W3C
modifier votre page pour qu’elle passe le test du validateur W3C avec succès
<html>
il est souhaitable d’ajouter l’attribut lang="fr"
<img src="
il est obligatoire d’ajouter l’attribut alt="description de l'image"
(pour les non voyants)<img src="
il n’est plus obligatoire voire souhaitable de ne plus terminer la balise par />
mais par >
, bien que ce soit un élément vide ( les éléments vides n’ont pas de tag de fermeture)<form action="" method="">
l’attribut action=""
est obligatoire et ne doit pas être vide
Utiliser Studio Code ou un autre éditeur pour créer une page page1.html (attention aux extensions, seules les extensions .html sont prises en compte par le serveur Web comme apache)
Utiliser les snippets de Studio Code pour créer la structure HTML de base. Taper html:5
puis [tabulation]. Remplacer le code par le code ci dessus (structure de base) dans le fichier page1.html
Rajouter si ce n’est pas fait l’encodage utf8 (ceci permet d’afficher correctement les caractères éèùà … du langage français): <meta charset="utf-8">
dans la balise <head>
Modifier le titre dans les attributs de la page : <title>TP1 programmation Web</title>
, donner le rôle de la balise <title>
<img src="linux.jpg" alt="mon image devrait apparaitre" title="sympa linux!" >
). Utiliser les attributs CSS width
et height
pour définir les dimensions de l’image : ajouter l’attribut style="width: 250px;height: 200px"
dans la balise image. Cette balise image est placée à l’intérieur d’une balise lien (<a href="nomFichier.html"> <img src="nomfichierImage.jpg" alt="texte alternatif" ></a>
)<hr>
)<a href="nomFichier.html"> texte du lien </a>
)<a href="http://cours-info.iut-bm.univ-fcomte.fr" title="liens sur les cours TDs Tps du département informatique"> Cours – TD – TP </a>
, l’attribut : title ajoute une information lorsque la souris est sur le lien.head
: ajouter l’intruction <link rel="icon" type="image/x-icon" href="iconeweb.ico">
. Pour plus d’information sur les favicon, voir cette documentation, voir de la documentation de W3C.Valider votre page sur le site http://validator.w3.org/
Remarque : [Outils/Développement Web/Code source de la page] ou [Ctrl u] affiche en Rouge les erreurs détectées par le “parseur” du navigateur
Remarque : Certaines erreurs peuvent être liées au fait que l’on ne peut pas mettre certaines balises dans d’autres balises. Vous pouvez vous aider des sites présentés lors de la configuration de votre bureau pour connaître les balises parents/enfants.
<hr>
)target="_blank"
). http://
devant une URL absolue. Valider votre page sur le site http://validator.w3.org/
Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web
Il est possible d’utiliser des styles en les définissant :
<head>
suivi de la valise <style>
(rare, utilisation essentiellement pédagogique car dans le même fichier que l’HTML)style
Exemple de fichier CSS
.titre1
{
}
h1 {
}
Utilisation du CSS
Propriété CSS
Exemple d’utilisation de classes
Créez un fichier exemple1.css
p {color: yellow;
}
p {color: blue;
}
p em {color: green;
}
.maclasse1 {
color: red;
}
#monid1 {
color: yellow;
}
Créez un fichier tp1_exemple1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="exemple1.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
"texte dans p"<em>"texte dans p em"</em>
</p>
<p class="maclasse1">
"texte dans p.maclasse1"<em class="maclasse1">"texte dans p.maclasse1 em"</em>
</p>
<p class="maclasse1" id="monid1">
"texte dans p#monid1.maclasse1"<em>"texte dans p#monid1.maclasse1 em"</em>
</p>
<p class="maclasse1" id="monid1" style="color: brown;">
"texte dans dans p#monid1.maclasse1"</p>
</body>
</html>
Testez le code ci-dessus
!important
dans le premier style de la balise “p”Attention à l’ordre des balises : <link href="xxxxxx.css" rel="stylesheet" type="text/css">
Créer une page de nom page3.html qui contient (de haut en bas) :
<abbr>
pour afficher «Institut Universitaire de Technologie» si la souris est dessus)<i><b><strong>
)Aidez vous de cet exemple :
REMARQUE : la lettre b de la balise <b>
signifie bold (gras) alors que <strong>
signifie important (de même <em>
signifie emphase : mise en valeur). Exemple de site web qui parle de l’intérêt sémantique de ces balises.
Compléter la page HTML avec :
Une ligne horizontale.
2 listes à puces imbriquées dans une autre liste numérotée. Laisser les formes des puces par défaut, en HTML les mises en forme se font avec du CSS) :
REMARQUE : En langage HTML pour imbriquer une liste dans une autre liste, celle ci doit être imbriquée dans une balise <li>
. La signification de ol ou ul ne définit pas forcément une liste à puces ou numérotée mais juste une liste d’éléments ordonnés ou non ordonnés (ul:unordered list, ol: ordered list).
Valider votre page sur le site http://validator.w3.org/
Valider votre page sur le site http://validator.w3.org/
Pour les plus rapides :
Rechercher sur internet à quoi sert une ancre dans un lien.
lire la documentation sur les catégories de balises
REMARQUE: Éviter de nommer votre page “index.html” , le serveur web (apache) ouvre cette page par défaut. Pas vraiment utile lors du développement.
ANNEXES : exemple de solutions