DIW

Le site web Mozilla présente les bases de l’HTML. Avant de commencer lire rapidement le contenu de ce lien.

Une page HTML se compose d’une structure de base :

<!DOCTYPE html>
<html lang="fr">
<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éez un répertoire dans votre répertoire personnel S1/web/tp1, créez vos fichiers HTML sur ce répertoire.
Créez un fichier test1.html
Éditez ce fichier avec VSCode

mkdir -p S1/web/tp1
cd S1/web
touch tp1/test.html
code .

éditeur html en ligne

L’objectif est d’utiliser les balises les plus connues :

Une balise

Éléments bloc vs(ou) en ligne

<em>premier</em><em>deuxième</em><em>troisième</em>

<p>quatrième</p><p>cinquième</p><p>sixième</p>

Éléments vides

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />

Attributs

Exemple de balises que l’on utilisera beaucoup :

<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>

Attention aux attributs obligatoires
Recopiez le code dans votre page test1.html
Complètez les attributs du lien et du formulaire (attributs href et action)

Validation d’une page

Sur le site W3C ou W3C Nu
Modifiez votre page pour qu’elle passe le test du validateur W3C avec succès

💡 Exemple de modifications pour les erreurs détectées par le validateur W3C

Warning 1 : dans la balise <html> il est souhaitable d’ajouter l’attribut lang="fr"
Error 1 : dans la balise <img src=" il est obligatoire d’ajouter l’attribut alt="description de l'image" (pour les non voyants)
Warning 2 : dans la balise <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)
Error 2 : dans la balise <form action="" method=""> l’attribut action="" est obligatoire et ne doit pas être vide

Exemple sur codepen

Exercice 1 : Page 1

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.

Page 2

Le CSS : présentation, utilisation, les classes

documentation mozilla documentation

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 :

dans un fichier CSS (la norme et le plus utilisé)
dans la page HTML, dans la balise <head> suivie de la valise <style> (rare, utilisation essentiellement pédagogique car dans le même fichier que l’HTML)
de façon exceptionnelle dans une balise pour forcer le style grâce à l’attribut style

Cette structure s’appelle un ensemble de règles (ou seulement “une règle”)

Exemple de fichier CSS

.titre1
{

}

h1 {

}

Utilisation du CSS

Le poids d’un sélecteur CSS

Propriété CSS

Exemple d’utilisation de classes

Éléments HTML -

Éléments CSS

Navigateur : mode développement CTRL MAJ i

🤖 Exemple sur le poids des sélecteurs

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> "texte dans p" "texte dans p em" "texte dans p.maclasse1" "texte dans p.maclasse1 em" "texte dans p#monid1.maclasse1" "texte dans p#monid1.maclasse1 em" "texte dans dans p#monid1.maclasse1" </body> </html>

Testez le code ci-dessus

enlevez la classe “maclasse1” dans la balise “em”

ajoutez !important dans le premier style de la balise “p”

Attention à l’ordre des balises : <link href="xxxxxx.css" rel="stylesheet" type="text/css">