Différences

Ci-dessous, les différences entre deux révisions de la page.

--- html [2016/02/24 09:29]
luc
+++ html [2018/10/13 20:32]
@@ Ligne 1: / Ligne 1: @@
-====== 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">''
-<code html5>
-<!-- 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
-</code>
-===== 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.
-<code html5>
-<!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>
-</code>
-===== Listes =====
-Une liste sert à présenter une information de manière structurée... sous forme de liste !
-<code html5>
-<ul>				Liste non ordonnée
-	<li>...</li>
-	<li>...</li>
-</ul>
-<ol>				Liste ordonnée (numérotée..)
-	<li>...</li>
-	<li>...</li>
-</ol>
-</code>
-==== Liste de définition ====
-<code html5>
-<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>
-</code>
-(ç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
-<code html5>
-<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
-</code>
-===== Image =====
-Pour afficher une image au sein de la page web
-<code html5>
-<!-- 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>
-</code>
-===== 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é...)
-<code html5>
-<figure>
-   <img ... />                  image affichée
-   <figcaption>..</figcaption>	légende de l'image affichée
-</figure>
-</code>
-===== 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.
-<code html5>
-<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>
-</code>
-===== Tableaux =====
-Un tableau est contruit/décrit ligne par ligne
-<code html5>
-<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
-</code>
-===== 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 :
-<code html5>
-<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>
-</code>
-==== Zone de texte à 1 ligne ====
-La balise ''input'' permet à l'utilisateur de renseigner une information, par exemple de type texte :
-<code html5>
-<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"
-/>
-</code>
-==== Zone de texte multilignes ====
-<code>
-<textarea></textarea>			on peut mettre en les balises du texte par défaut (pas besoin de value)
-</code>
-==== Types de texte particuliers ====
-<code>
-<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
-type="date/time/week/month/datetime"
-type="search"
-</code>
-==== Eléments d'option - choix ====
-<code>
-<input type="checkbox" />	case à cocher
-checked						attribut qui signifie que la case est par défaut cochée <input type="checkbox" name="" checked/>
-<input type="radio"/>		choix unique parmi plusieurs cases à cocher,
-il est nécessaire que tous les choix aient le même nom (name="") pour que le navigateur sache parmi quels champs de saisie le choix unique doit être fait
-Il faut aussi mettre un champ value différent pour que php sache quelle valeur a été choisie
-<select name="" id="">						crée une liste déroulante permettant de selectionner un valeur parmi une liste définie par les balises <option>
-	<option value="">..</option>
-	<option value="" selected>..</option>	selected permet de choisir la valeur par défaut
-</select>
-<select>
-	<optgroup label="Europe">				permet de grouper des options (alinéa pour les options contenues
-		<option>..</option>
-		<option>..</option>
-	</optgroup>
-	<optgroup>								les groupes ne peuvent pas être sélectionnés
-		...
-	</optgroup>
-</select>
-</code>
-==== Envoi de fichiers ====
-il suffit de rajouter l'attribut enctype="multipart/form-data" à la balise <form>, puis
-<input type="file" />
-==== Mise en page de formulaires ====
-<code>
-<fieldset>							permet de regrouper les différentes zones de saisie
-	<legend>..</legend>				avec un titre
-	...
-</fieldset>
-<input autofocus/>					sélectionne automatiquement un champ
-<input requiered/>					rend un champ obligatoire
-</code>
-==== Validation ====
-<code html5>
-<input type="submit"/>				bouton de validation et d'envoi du formulaire
-<input type="reset"/>				réinitialise le formulaire
-<input type="image" src=""/>		equivalent à submit, mais avec une image dont l'url est indiquée par src
-<input type="button" />				bouton générique, nécessite javascript pour effectuer une action sur la page
-value=""							permet de modifier le texte à l'intérieur du bouton
-</code>
-==== Auto-validation ====
-<code>
-<form>
-<select name='myfield' onchange='this.form.submit()'>			onchange est un event de html5, il execute le script contenu entre guillemet
-  <option selected>Milk</option>
-  <option>Coffee</option>
-  <option>Tea</option>
-</select>
-<noscript><input type="submit" value="Submit"></noscript>		la balise <noscript>..</noscript> cache ce qui est contenu si les scripts sont activés, sinon les affiche
-</form>
-</code>

L'Aide Mémoire Informatisé du petit Luc

Outils pour utilisateurs

Outils du site

Différences

Outils de la page