L'Aide Mémoire Informatisé du petit Luc

Outils pour utilisateurs

Outils du site

Piste: • html

Panneau latéral

Parcourir la mémoire du petit Luc

Linux World

Web World

Dev World

Another World

Le bout du monde

1) , 2)
parce que je suis trop féniant pour taper une url
html

Table des matières

HTML

Le HTML à partir de zéro. Du moins une bonne cheatsheet pour les distraits.

C'est le langage à la base des pages web, il est descriptif : c'est à dire qu'il décrit le contenu dans la page et comment le mettre en forme à l'aide de balises.

De nos jours, le HTML est manipulé/complété par des technologies complémentaires :

  • pour l'enrichir, par exemple le css pour la mise en page
  • ou le modifier, pour avoir des pages dynamiques javascript
  • ou encore le générer automatiquement pour personnaliser les pages, par exemple via un script php

Côté génération, souvent on crée des modèles écrits dans un metalangage comme le twig qui sera compilé par un programme php en HMTL qui sera envoyé au navigateur web client.

Il existe une multitude de langage de programmation pour gérer/créer des sites web, et souvent on utilise des Framework pour faciliter / structurer / accélerer le développement du sites web. Mais au final, on a toujours une page en HTML, d'où l'importance d'en avoir des notions.

Balises de base

Le HTML est composé de balises <ouvrante> et </fermante>, ce qui est contenu entre une balise ouvrante et fermante est en général du texte qui sera affiché.

Des attributs peuvent apporter des précisions sur la balise, ils se trouvent entre les chevrons : <balise attribut=“paramètre”> 

<!-- Commentaires -->				
 
<div>...</div>          balise qui ne sert à rien, à recevoir des attributs
<h1>...</h1>	        Titre de niveau 1 (possible jusqu'à 6)
<p>...</p>	        paragraphe
</br>			retour à la ligne
 
<em>...</em>		mettre un peu en valeur
<strong>...</strong>	mettre en valeur = important
<mark>...</mark>	marquer une portion de texte
<span>...</span>	balise qui ne sert à rien, à recevoir des attributs

Structure de base d'une page HTML

C'est le minimum syndical pour que les navigateurs comprennent qu'il s'agit d'une page en HTML. 

<!DOCTYPE html>
<html>
    <head>
        <!-- En-tête de la page, contient des méta-données non affichées -->
        <meta charset="utf-8" />
        <title>Titre</title>
 
    </head>
    <body>
        <!-- Corps de la page, ce contenu sera affiché -->
 
    </body>
</html>

Listes

Une liste sert à présenter une information de manière structurée… sous forme de liste ! 

<ul>				Liste non ordonnée
	<li>...</li>
	<li>...</li>
</ul>
 
<ol>				Liste ordonnée (numérotée..)
	<li>...</li>
	<li>...</li>
</ol>

Liste de définition

<dl>				délimiter la liste
   <dt>terme</dt>		délimiter un terme
   <dd>définition du terme</dd>	délimiter la définition de ce terme
</dl>

(ça ressemble à une liste sans puce, ça existe mais j'ai jamais vu en vrai)

Liens

Un lien sert à naviguer d'une page à l'autre 

<a href="lien">...</a>		lien vers une autre page
<a href="#lien">...</a>		lien vers ancre
<a href="page#ancre">...</a>    lien vers une ancre dans une autre page
<a .. target="_blank">..</a>	attribut pour forcer l'ouverture d'une nouvelle page
<a href="fichier.zip">..</a>	lance le téléchargement du fichier si non html
<a .. title="titre">..</a>	permet d'afficher une infobulle au survol du lien
 
<h1 id="ancre">..</h1>		attribut id pour définir une ancre

Image

Pour afficher une image au sein de la page web 

<!-- insertion d'une image -->
<img src="lien" alt="texte alternatif si pb affichage" />	
 
<!-- pour une image cliquable, imbriquer les balises : -->
<a href="imageHauteResolution"><img src="aperçu" alt="description" /></a>

Figure (citations, légende...)

Permet d'associer une légende à une image (web sémantique, on dit que ce qui suit est la légende de l'image, il ne s'agit pas juste de le mettre en forme, bien aligné…) 

<figure>	
   <img ... />                  image affichée
   <figcaption>..</figcaption>	légende de l'image affichée
</figure>

Structure de la page

Ces balises servent à structurer la page d'un point de vue sémantique. D'un point de vue mise en page, ce sont des blocs. 

<header>
    <!-- définit une zone entête de la page -->
</header>
 
<footer>
    <!-- définit une zone de pied de page -->
</footer>
 
<nav>
    <!-- regroupe les liens de navigations -->
    <!-- par exemple via une liste : -->
    <ul>
        <li><a href="">..</a></li>
	..
    </ul>
</nav>
 
<section>
    <!-- regroupe le contenu par thématique -->
    <h1>...</h1>
    <p>..</p>
</section>
 
<aside>
    <!-- permet de mettre en évidence des informations complémentaires
         comme ça se fait dans bcp d'articles / magazines -->
</aside>
 
<article>
    <!-- contient une portion autonome, par ex un article de blog -->
</article>

Tableaux

Un tableau est contruit/décrit ligne par ligne 

<table>
 
    <caption>TITRE DU TABLEAU</caption>
 
    <tr>    <!-- début nouvelle ligne -->
        <th>Entête colonne 1</th>		
	<th>Entête colonne 1</th>
    </tr>   <!-- fin ligne -->
 
    <tr>
	<td>contenu première cellule</td>
	<td>etc..</td>
    </tr>
 
    <!-- etc... -->
 
</table>
 
<thead>...</thead>	définit une entête de tableau
<tbody>...</tbody>	définit le corps du tableau
<tfoot>...</tfoot>	définit le pied du tableau
<td colspan="2">	permet la fusion de deux cellules horizontalement (cellules de 2 cases de largeur)
<td rowspan="3">	permet la fusion de plusieurs cellules verticalement

Les formulaires

Le concept de formulaire répond au besoin de l'utilisateur (client) d'envoyer des données au serveur, par exemple dans le cas d'un sondage.

La balise form

Elle délimite le formulaire : 

<form 
   method=""		indique comment les données vont être envoyées
   method="get"		255 carac max, par l'adresse http
   method="post"	ne transite pas par la barre d'adresse
 
   action="">		indique l'adresse de la page qui se chargera de traiter les informations
   <!-- contenu du formulaire -->
</form>

Zone de texte à 1 ligne

La balise input permet à l'utilisateur de renseigner une information, par exemple de type texte : 

<form>
 
    <input type="text" />		zone de texte à une ligne
    <input type="text" name=".." />	donne un nom à cette zone de texte, pour être exploitée par php
 
    <label>Etiquette collée à notre champ de saisielabel><input type="text" />
 
    <label for="x">for pointe sur id pour relier étiquette et champ de saisie</label>
    ...
    <input name="bla" id="x" />
 
</form>
 
<input 
    size="10"				taille de l'écriture dans le champ
    maxlength=""			limite la taille maxi du champ en nbre de caractères
    value="pré-remplissage"
    placeholder="préremplissage qui disparait"
/>

Zone de texte multilignes

<textarea>
on peut mettre du texte par défaut (pas besoin de value)
</textarea>

Types de texte particuliers

<input 
    type="password"		les caractères saisis ne sont pas visibles
    type="email"		indique au navigateur qu'une adresse mail doit être renseignée (forme, clavier spécifique sur mobile..)
    type="url"
    type="tel"
    type="number"		affichera des petites flèches sur le coté de la case
        min=""			valable si type="number"
        max=""			valable si type="number"
    type="range"		renvoi un type numérique sélectionnable à l'aide d'un curseur
    type="color"		permet de saisir une couleur dans une belle palette
    type="date/time/week/month/datetime"
    type="search"
/>

Eléments d'option - choix

<!-- case à cocher : -->
<input 
    type="checkbox" 
    name="case1"
    checked			attribut qui signifie que la case est par défaut cochée
/>
 
<!-- choix unique parmi plusieurs cases à cocher -->
<input
    type="radio"
    name="nomIdentique"         il est nécessaire que tous les choix aient le même nom
    value="unique"              Il faut un champ value différent pour que php sache quelle valeur a été choisie
/>
 
<!-- liste déroulante pour sélectionner une valeur parmi une liste définie -->
<select name="" id="">
    <option value="">OPTION 1</option>
    <option value="" selected>OPTION 2</option>	    selected permet de choisir la valeur par défaut
</select>
<select>
	<optgroup label="Europe">
            <!-- permet de grouper des options -->
		<option>..</option>
		<option>..</option>
	</optgroup>
	<!-- les groupes ne peuvent pas être sélectionnés -->
</select>

Envoi de fichiers

C'est une méthode simple à l'ergonomie simple. On peut faire plus de nos jours en définissant des zones “draggable” (= où on peut glisser-déposer), il y a plein de snippets sur github. 

<form enctype="multipart/form-data">
    <input type="file" />
</form>

Mise en page de formulaires

<form>
    <fieldset>
    	<!-- permet de regrouper les différentes zones de saisie (sémantiquement, mais aussi avec un joli cadre) -->
        <legend>Un titre pour mon fieldset</legend>
 
        <!-- sélectionne automatiquement un champ -->
        <input autofocus/>
 
        <!-- rend le champ obligatoire, on ne pourra pas submit s'il n'est pas rempli -->
        <input requiered/>
 
    </fieldset>
</form>

Validation

La validation d'un formulaire déclenche l'envoi des informations vers le serveur pour traitement. 

<form>
    <!-- bouton de validation standard -->
    <input type="submit"/>
 
    <!-- réinitialise le formulaire -->
    <input type="reset"/>
 
    <!-- equivalent à submit, mais avec une image dont l'url est indiquée par src -->
    <input type="image" src=""/>
 
    <!-- bouton générique, nécessite javascript pour effectuer une action sur la page -->
    <input type="button" />
 
    <!-- attribut qui permet de modifier le texte à l'intérieur du bouton de type button ou submit ou .. -->		
        value="message personnalisé"
 
</form>

Auto-validation

<form>
 
    <!-- onchange est un event de html5, il execute le script contenu entre guillemet -->
    <select name='myfield' onchange='this.form.submit()'>
        <option selected>Milk</option>
        <option>Coffee</option>
        <option>Tea</option>
    </select>
 
    <!-- la balise <noscript>..</noscript> cache ce qui est contenu si les scripts sont activés, sinon les affiche -->
    <noscript><input type="submit" value="Submit"></noscript>	
 
</form>
html.txt · Dernière modification: 2018/10/13 20:32 (modification externe)

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki