Liens

Couleurs

HTML 5

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Title</title>
    </head>
    <body>

    </body>
</html>

Head

Encodage de la page

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

Javascript

Inclure un fichier Javascript

<head>
    <!-- pour html5, le type par défaut de script est "application/javascript" -->
    <script src="mon_fichier_javascript.js"></script>

Inclure du code Javascript dans la page

<head>
    <!-- pour html5, le type par défaut de script est "application/javascript" -->
    <script>
        // code

CSS

Inclure un fichier CSS

<head>
    <link rel="stylesheet" href="ma_feuille_de_styles.css" />

Inclure du code CSS dans la page

<head>
    <!-- pour html5, le type par défaut de style est "text/css" -->
    <style>
        balise { attribut:valeur; }

Définir du CSS dans une balise

<p style="text-align: center;">Texte</p>

Balises

mark	surligné en jaune par l'explorateur web
del	texte barré

Layout

header / footer	conteneur pour des éléments d'en-tête ou de pied de page
article	conteneur pour des éléments indépendants du reste du document
section	définit une section telle qu'un chapters, headers ou footers. Chaque section peut avoir son h1 et son header.
nav	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.

CSS

span

Permet de grouper des éléments en ligne.

<p>Mon texte <span style="color:green">en couleur</span></p>

Mon texte en couleur

img

<img src="image.jpg" alt="alternative text" title="tooltip" />

hr - ligne horizontale

<hr>

Table

<table border="1">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <!-- ligne 1 -->
        <tr>
            <!-- colonne 1 -->
            <td> cellule 1.1 </td>
            <!-- colonne 2 -->
            <td> cellule 1.2 </td>
        </tr>
        <!-- ligne 2 -->
        <tr>
            <td colspan=2> cellule 2.1 et 2.2 </td>
        </tr>
    </tbody>
</table>

Les attributs cellpadding, cellspacing, frame, rules ne sont plus supportés par HTML 5.

cellpadding représente l'espace entre le bord de la cellule et le contenu. Une seule peut-être saisie pour les quatres côtés.
cellspacing représente l'espace entre les cellules. Une seule peut-être saisie pour les quatres côtés.

frame

box, border	The outside borders are shown on all four sides
void	The outside borders are not shown

La couleur de la bordure est la même que celle du texte.

rules

all	Lines between rows and columns
rows	Lines between rows
cols	Lines between columns
none	No lines

La couleur de la bordure est la même que celle du texte.

Aligner le contenu d'une cellule

<td align="left|center|right"
    valign="top|middle|bottom">

Aligner horizontalement le contenu de la cellule : align
Aligner verticalement le contenu de la cellule : valign

Puces

<!-- Liste non-ordonnée -->
<ul>
    <li>article 1</li>
    <li>article 2
    <ul>
        <li>article 11</li>
        <li>article 12</li>
    </ul>
    </li>
</ul>

form

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.

input

<input type="text">
<input type="date">
<input type="number" step="any">  <!-- step any pour gérer les chiffres non-entier -->
<input type="checkbox">

select

<select>
  <option value="linux">Linux</option>
  <option value="microsoft">Microsoft</option>
</select>

video et audio

<video src="film.webm" type="video/webm" controls>
    Your browser doesn't support HTML5 video :(
</video>

<video controls width="320" height="240" poster="image.jpg">
    <source src="film.webm" type="video/webm">
    <source src="film.mp4" type="video/mp4">
    <source src="film.ogv" type="video/ogg">
    <track src="subtitles.srt" kind="subtitle" srclang="en-US" label="English" />
    Your browser doesn't support HTML5 video :(
</video>

<audio controls loop preload>
    <source src="zic.ogg">
    <source src="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.

Compatibilité des explorateurs web
Codec vidéo + codec audio + conteneur	Firefox	Chrome	IE
Theora + Vorbis + ogv	😊	😊	😞
H.264 + AAC + mp4	😞	😊	😊
VPX + Vorbis + webm	😊	😊	😊 codec VP8 à installer

Compatibilité des explorateurs web
Codec audio + conteneur	Firefox	Chrome	IE
Vorbis + ogg	😊	😊	😞
MP3 + mp3	😊 avec Windows et Android	😊	😊
WAV + wav	😊	😊	😞

GroupBox / fieldset

<fieldset>
    <legend>Texte</legend>
    <!-- Contenu -->
</fieldset>

iframe

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>

Attribut contenteditable

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

Code Hexadécimal

<span style="font-family: Webdings">&#xF0FC;</span>

URL et code ASCII héxadécimal

Code Hx	Caractère
%20	espace
%27	'
%28	(
%29	)
%2C	,
%2D	-
%2E	.
%2F	/
%7C	\|
%3D	=
%3C	<
%3E	>

Menu de navigation

<ul id="menu">
    <li><a href="page1.html">Page1</a></li>
    <li><a href="page2.html">Page2</a></li>
</ul>

#menu {
    line-height: 130%;
    list-style-type: none;
    overflow: hidden;    

    li {
        float: left;
        
        a:link, a:visited {
            display: block;
            width: 120px;
            font-weight: bold;
            color: #FFFFFF;
            background-color: #98bf21;
            text-align: center;
            padding: 4px;
            text-decoration: none;
            text-transform: uppercase;
        }

        a:hover, a:active {
            background-color: #7A991A;
        }
    }
}

HTML