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

Ceci est une ancienne révision du document !

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

<!DOCTYPE html>
<html>
    <head>
        <!-- En-tête de la page -->
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>
    <body>
        <!-- Corps de la page -->
    </body>
</html>

Listes

<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
<dd>				délimiter un terme
<dt>				délimiter la définition de ce terme

Liens

<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

<img src="lien" alt="texte alternatif" />	insertion d'une image
image en miniature cliquable, imbriquer les balises:
<a href="imageHauteResolution"><img src="aperçu" alt="description" /></a>

Figure (citations...)

<figure>...</figure>		élement qui enrichit le texte (citation, image ...)
<figcaption>..</figcaption>	légende

Structure de la page

<header>...</header>		définit une zone entête de la page
<footer>...</footer>		définit une zone de pied de page
<nav>						regroupe les liens de navigations (à gauche ? exemple Amazon)
	<ul>
		<li><a href="">..</a></li>
		..
	</ul>
</nav>
<section>					regroupe le contenu par thématique (au centre des pages d'accueil free...)
	<h1>...</h1>
	..
</section>
<aside>...</aside>			contient des informations complémentaires (ex wikipédia)
<article>..</article>		contient une portion autonome, par ex un article de blog

Tableaux

<table>						contruction d'un tableau, se contruit ligne par ligne
	<caption>..</caption>	indique le titre du tableau
	<tr>					début nouvelle ligne
		<th>...</th>		entête des colonnes		
		<th>...</th>
	</tr>
	<tr>					début nouvelle ligne
		<td>...</td>		contient une cellule
		<td>...</td>
	</tr>					fin ligne
	<tr>
		..
	</tr>
</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

<form>						délimite le contenu d'un formulaire
	<p>						il doit obligatoirement contenir une balise <p> si on veut écrire du texte
		...
	</p>
</form>
<form method="">			inique 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
<form action="">			indique l'adresse de la page qui se chargera de traiter les informations

Zone de texte à 1 ligne

<input type="text" />		zone de texte à une ligne
<input type="text" name=".." />	donne un nom à cette zone de texte, pour etre exploitée par php
<form ..>					<label> permet d'accoler une étiquette à notre champ de saisie
	<p>
		<label>Votre pseudo</label> : <input />
	</p>
</form>
<label for="x">..</label><input name="bla" id="x" />	for pointant sur id permet de lier l'étiquette et la zone de saisie
attribut de la balise <input /> :
size="10"									taille de l'écriture dans le champ
maxlength=""								limite la taille maxi du champ
value="pré-remplissage"
placeholder="préremplissage qui disparait"

Zone de texte multilignes

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

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
type="date/time/week/month/datetime"
type="search"

Eléments d'option - choix

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

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

<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

Validation

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

Auto-validation

<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>
html.1455636657.txt.gz · 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