« HTML » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
Ligne 107 : Ligne 107 :
== a ==
== a ==
<kode lang=html>
<kode lang=html>
<!-- open in a new tab -->
<a href="http://www.domain.net" target="_blank">Go to ...</a>
<!-- Ouvrir le client mail -->
<!-- Ouvrir le client mail -->
<a href="mailto:moi@free.fr">Envoyer un email</a>
<a href="mailto:moi@free.fr">Envoyer un email</a>

Version du 7 février 2021 à 18:27

Liens

HTML 5

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

    </body>
</html>

Head

Encodage de la page

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

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

Pour que le code ait accès à tous les éléments de la page, ajouter le javascript à la fin, juste avant la balise fermante de body.

Inclure un fichier Javascript

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

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

CSS

Inclure un fichier CSS

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

Inclure du code CSS dans la page

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

Définir du CSS dans une balise

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

Balises

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

Layout

Section tags.png
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

Html.svg 
<!-- 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.

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

Mon texte en couleur

img

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

hr - ligne horizontale

Html.svg 
<hr>

Table

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

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

Html.svg 
<!-- 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.

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

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

select

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

video et audio

Html.svg 
<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.
Spécifier le type évite de le récupérer auprès du serveur.
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

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

Html.svg 
<!-- 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

Html.svg 
<!-- Ouverture de MaPage.html dans la page/onglet courant -->
<div onclick="window.location.href='MaPage.html'"></div>

<div onclick="js_function()"></div>

Attribut contenteditable

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

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

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

Html.svg 
<ul id="menu">
    <li><a href="page1.html">Page1</a></li>
    <li><a href="page2.html">Page2</a></li>
</ul>
Css.svg 
#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;
        }
    }
}
Récupérée de « http://wiki.bananeatomic.fr/index.php?title=HTML&oldid=25118 »