<head>
<!-- HTML 5 -->
<meta charset="UTF-8" />
<!-- HTML 4.01 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
UTF-8 : Unicode
ISO-8859-1 : Latin alphabet
Personnaliser l'icône du site
<head>
<link rel="icon" type="image/jpeg" href="mon_icone.jpg" />
<!-- Pour une icone qui ne respecte pas les standards -->
<link rel="shortcut icon" type="image/x-icon" href="mon_icone.ico" />
englobe les principaux liens de navigation du site
aside
conteneur pour des informations complémentaires
a
<!-- open in a new tab -->
<a href="http://www.domain.net" target="_blank">Go to ...</a>
<!-- Ouvrir le client mail -->
<a href="mailto:moi@free.fr">Envoyer un email</a>
Il est interdit d'imbriquer plusieurs balises <a> entre elles.
Permet d'ajoutez des champs à remplir, une liste déroulante et un bouton de validation.
<form action="page.html" method="post">
Texte: <input type="text"
name="identifiant du champs texte"
pattern="[A-Za-z]{4,10}"
placeholder="texte semi-transparent"
autofocus />
<label>Mot de passe: </label>
<input type="password"
name="identifiant du champs password"
required />
<label>Comment: </label>
<textarea row="4" name="txtareaid"></textarea> <!-- champs texte multi-lignes -->
<input type="submit" name="identifiant du bouton" value="texte affiché dans le bouton">
</form>
autofocus
donne le focus. Attention: scroll la page sur la balise.
required
champs obligatoire.
pattern
définit un modèle à respecter.
POST vs GET
À la différence de POST, GET fait apparaitre les variables dans l'url. url?search=qqchose&submit=Envoyer
Si l'on essaye de recharger une page chargée avec POST, le navigateur affiche un avertissement. La solution est de faire une redirection après le POST, la nouvelle page sera ainsi chargée avec GET.
Permet d'inclure une page dans une autre.
Le style de la page principale n'est pas hérité par la page contenu par l'iframe.
<!-- Attention à bien fermer l'iframe avec une balise fermante </iframe> et non /> -->
<iframe
frameborder="no"
width="600px"
height="200px"
src="http://">
</iframe>
Évènement onclick
<!-- Ouverture de MaPage.html dans la page/onglet courant -->
<div onclick="window.location.href='MaPage.html'"></div>
<div onclick="js_function()"></div>
<script>
$(function() {
var theContent = $('#contentList');
// sauvegarde de la liste dans localStorage
$('#save').on('click', function() {
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
// chargement de localStorage
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}
});
</script>
<ul id=contentList contenteditable=true>
<li>Tache 1</li>
<li>Tache 2</li>
<li>Tache 3</li>
</ul>
<button id=save>Save</button>
image map
Permet de définir des zones cliquables dans une image.
<img src="image.jpg" usemap="#map" />
<map name="map">
<!-- Affichage de la main et du texte title lors du survol de la sourie -->
<area shape="rect" coords="592,147,608,163" alt="zone1" title="zone1" nohref="nohref" />
<!-- En plus lien vers http://www.monsite.f -->
<area shape="rect" coords="517,71,533,87" alt="zone2" title="zone2" href="http://www.monsite.fr" />
</map>
Possibilité d'utiliser Gimp pour obtenir les coordonnées : Filtres → Web → Image cliquable web...