HTML = hypertext markup language
XHTML =eXtensible HyperText Markup Language
Le sigle URL (de l'anglais Uniform Resource Locator, littéralement « Localisateur Uniforme
de Ressource »), auquel se substitue informellement le terme adresse web, désigne une
chaîne de caractères utilisée pour adresser les ressources du World Wide Web.
Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de
standardisation des technologies du World Wide Web.
• Les balises doivent être écrites en minuscules.
• La valeur des attributs doit toujours être écrite entre des guillemets, y compris pour
des valeurs numériques.
• Certaines balises ont des attributs obligatoires.
• A toute balise d’ouverture doit correspondre une balise de fermeture en xhtml.
• Les balises uniques doivent également être refermées.
• Les balises doivent être correctement imbriquées.
Le document doit être ouvert avec un DOCTYPE : DTD : Document type définition : listes des éléments utilisables et leur position les uns par rapport aux autres.
<!DOCTYPE html PUBLIC "// W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Titre du site html 1.1</title>
<meta httpequiv=" ContentType" content="text/html; charset=utf8"/>
</head>
<body>
<!commentaire: zone de travail >
</body>
</html>
- La partie head permet de définir les propriétés de la page web.
- La partie body contient le s balises pour présenter le contenu du document
(textes, images, liens tableaux …).
alt : cela signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image en xhtml.
<ol> <!Liste à puces numérotée.>
<li> ligne numérotée</li>
<li> ligne numérotée</li>
</ol>
<ul> <!Liste à puces non numérotée.>
<li> ligne à puce</li>
</ul>
<dl> <!Listede definition.>
<dt>XHTML</dt> <!thermeà definir.>
<dd>eXtensible HyperText Markup Language</dd><!definition>
<dt>CSS</dt>
<dd>Lieu où l'on représente des ouvrages dramatiques</dd>
</dl>
<table border="4" >
<tr>
<td rowspan="2"> case 1</td> <td> case 2 </td>
</tr>
<tr>
<td> case 3 </td>
</tr>
</table>
CSS : c'est l'abréviation de Cascading Style Sheets ("Feuille de style").
- conteneur.element
Désigne un élément ayant comme id "conteneur" et auquel la classe "element" soit
aussi appliquée.
p.info.error
Désigne tout élément P possédant à la fois la classe "info" et la classe "error".
● Un espace entre élément1 et élément2 signifie: peu importe où est placé élément2
dans la structure d'éléments de élément1.
● > signifie: seulement quand élément2 est situé un niveau sous élément1 dans la
structure d'éléments.
● + signifie: quand élément2 est situé au même niveau que élément1 et suit
immédiatement élément1 dans la structure d'éléments.
● ~ signifie: quand élément2 est situé au même niveau que élément1 et suit élément1
dans la structure d'éléments.
a[href=index.html] concerne par exemple les éléments avec <a href="index.html">
</a>.
img[alt~=Hambourg] concerne par exemple les éléments avec <img src="image.jpg"
alt="Regard de Michel sur Hambourg">.
p[lang|=en] concerne par exemple aussi les éléments avec <p lang="enUS">...</
p>
div[id] => Désigne n'importe quel élément DIV possédant un attribut ID.
div[id=conteneur] => Désigne tout élément DIV possédant un attribut ID de valeur
"conteneur".
input[type=text][value=Yes] => Désigne tout élément INPUT possédant un attribut
TYPE possédant la valeur "text" et un attribut VALUE égal à "yes".
div[id^=empt] => Désigne tout élément DIV dont la valeur de l'attribut ID commence
par "empt".
div[id$=parent] => Désigne tout élément DIV dont la valeur de l'attribut ID s'achève
par "parents".
div[id*=mpt] => Désigne tout élément DIV dont la valeur de l'attribut contient la
chaîne "mpt".
mode de déclarations : poids des sélections
A : style =
B : sélecteur d'identifiant (id)
C : sélecteur de classe (p.maclasse), d'attribut ou pseudo-class (:hover)
D : sélecteur d'élément
E : sélecteur nul * > ou +
FORMULAIRE ENCADRER
<form method="get" action="tp2_page2.html" >
<fieldset>
<legend> Informations personnelles </legend>
<label for="nom">votre no<span style="text-decoration:underline;">m</span> ?</label><br />
<input type="text" name="nom" id="nom" tabindex="10" accesskey="m" />
<br />
<label for="prenom">votre <span style="text-decoration:underline;">p</span>rénom ?</label><br />
<input type="text" name="prenom" id="prenom" tabindex="30" accesskey="p" />
<br />
<label for="email">votre <span style="text-decoration:underline;">e</span>-mail ?</label><br />
<input type="text" name="email" id="email" tabindex="20" accesskey="e" />
<br />
<br />
<label>Veuillez indiquer votre type de <span style="text-decoration:underline;">b</span>ac :</label><br />
<input type="radio" name="bac" value="S" tabindex="40" accesskey="b" /><label> bac S </label><br />
<input type="radio" name="bac" value="STI" tabindex="41" /><label> bac STI</label><br />
<input type="radio" name="bac" value="STT" tabindex="42" checked="checked"/> <label> bac STT</label><br />
<input type="radio" name="bac" value="autre" tabindex="43"/><label> autre</label><br />
</fieldset>
<p>
<input type="submit" name="BP_valider" value="valider"/>
</p>
</form>
FORMULAIRE AVEC LISTE DEROULANTE
<form method="get" action="tp2_page2.html" >
<fieldset>
<legend> Informations personnelles </legend>
<label for="nom">votre no<span style="text-decoration:underline;">m</span> ?</label><br />
<input type="text" name="nom" id="nom" tabindex="10" accesskey="m" />
<br />
<label for="prenom">votre <span style="text-decoration:underline;">p</span>rénom ?</label><br />
<input type="text" name="prenom" id="prenom" tabindex="30" accesskey="p" />
<br />
<label for="email">votre <span style="text-decoration:underline;">e</span>-mail ?</label><br />
<input type="text" name="email" id="email" tabindex="20" accesskey="e" />
<br />
<br />
<label>Veuillez indiquer votre type de <span style="text-decoration:underline;">b</span>ac :</label><br />
<input type="radio" name="bac" value="S" tabindex="40" accesskey="b" /><label> bac S </label><br />
<input type="radio" name="bac" value="STI" tabindex="41" /><label> bac STI</label><br />
<input type="radio" name="bac" value="STT" tabindex="42" checked="checked"/> <label> bac STT</label><br />
<input type="radio" name="bac" value="autre" tabindex="43"/><label> autre</label><br />
</fieldset>
<fieldset>
<legend> Informations sur ce semestre </legend>
<label for="groupe"> Dans quel groupe êtez vous ?</label><br />
<select name="groupe" id="groupe" tabindex="60">
<optgroup label="Semestre 1, 1° année">
<option value="1A1">1A1</option>
<option value="1A2">1A2</option>
<option value="1B1">1B1</option>
<option value="1B2">1B2</option>
</optgroup>
<optgroup label="Semestre 2, 1° année">
<option value="2A1">2A1</option>
<option value="2A2">2A2</option>
<option value="2B1">2B1</option>
<option value="2B2">2B2</option>
</optgroup>
<optgroup label="Semestre 3, 2°année">
<option value="3A1">3A1</option>
<option value="3A2">3A2</option>
<option value="3B1">3B1</option>
<option value="3B2">3B2</option>
</optgroup>
</select>
<br />
<label for="numero">votre <span style="text-decoration:underline;">n</span>uméro ?</label><br />
<input type="text" name="numero" id="numero" tabindex="70" accesskey="n" disabled="disabled" />
<br />
<label>votre choix d'<span style="text-decoration:underline;">o</span>ption :</label><br />
<input type="checkbox" name="allemand" tabindex="80" accesskey="o" /> <label>allemand</label><br />
<input type="checkbox" name="sport" tabindex="90" /> <label>sport</label><br />
</fieldset>
<p>
<!-- type de button : button | submit | reset # button : crée un bouton poussoir destiné à lancer un script, -->
<!-- submit : crée un bouton destiné à soumettre le formulaire qui l'englobe -->
<!-- reset : crée un bouton destiné à rafraîchir le contenu des champs du formulaire -->
<button type="submit">Valider <img src="valider.jpeg" alt="bouton valider" /></button>
<button type="reset">Effacer <img src="annuler.jpeg" alt="bouton annuler" /></button>
</p>
</form>
