<head><!-- HTML 5 --><metacharset="UTF-8" /><!-- HTML 4.01 --><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
UTF-8 : Unicode
ISO-8859-1 : Latin alphabet
Personnaliser l'icône du site
<head><linkrel="icon"type="image/jpeg"href="mon_icone.jpg" /><!-- Pour une icone qui ne respecte pas les standards --><linkrel="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 --><ahref="http://www.domain.net"target="_blank">Go to ...</a><!-- Ouvrir le client mail --><ahref="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.
<formaction="page.html"method="post">
Texte: <inputtype="text"name="identifiant du champs texte"pattern="[A-Za-z]{4,10}"placeholder="texte semi-transparent"autofocus /><label>Mot de passe: </label><inputtype="password"name="identifiant du champs password"required /><label>Comment: </label><textarearow="4"name="txtareaid"></textarea><!-- champs texte multi-lignes --><inputtype="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.
<videosrc="film.webm"type="video/webm"controls>
Your browser doesn't support HTML5 video :(
</video><videocontrolswidth="320"height="240"poster="image.jpg"><sourcesrc="film.webm"type="video/webm"><sourcesrc="film.mp4"type="video/mp4"><sourcesrc="film.ogv"type="video/ogg"><tracksrc="subtitles.srt"kind="subtitle"srclang="en-US"label="English" />
Your browser doesn't support HTML5 video :(
</video><audiocontrolslooppreload><sourcesrc="zic.ogg"><sourcesrc="zic.mp4"></audio>
controls
Displays the standard HTML5 controls on the web page.
autoplay
Makes play automatically.
loop
Makes repeat automatically.
poster
Specifies an image to use while the video is unavailable. An error message is displayed on the image.
preload
Commence à charger la vidéo.
Spécifier le type évite de le récupérer auprès du serveur.
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 /> --><iframeframeborder="no"width="600px"height="200px"src="http://"></iframe>
Évènement onclick
<!-- Ouverture de MaPage.html dans la page/onglet courant --><divonclick="window.location.href='MaPage.html'"></div><divonclick="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><ulid=contentListcontenteditable=true><li>Tache 1</li><li>Tache 2</li><li>Tache 3</li></ul><buttonid=save>Save</button>
image map
Permet de définir des zones cliquables dans une image.
<imgsrc="image.jpg"usemap="#map" /><mapname="map"><!-- Affichage de la main et du texte title lors du survol de la sourie --><areashape="rect"coords="592,147,608,163"alt="zone1"title="zone1"nohref="nohref" /><!-- En plus lien vers http://www.monsite.f --><areashape="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...