Titre

====== 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** '''' et '''', 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 qui ne sert à rien, à recevoir des attributs
...	        Titre de niveau 1 (possible jusqu'à 6)
...	        paragraphe

			retour à la ligne

...		mettre un peu en valeur
...	mettre en valeur = important
...	marquer une portion de texte
...	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.

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


				Liste non ordonnée
	...
	...


				Liste ordonnée (numérotée..)
	...
	...

==== Liste de définition ====


				délimiter la liste
   terme		délimiter un terme
   définition du terme	délimiter la définition de ce terme

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


...		lien vers une autre page
...		lien vers ancre
...    lien vers une ancre dans une autre page
..	attribut pour forcer l'ouverture d'une nouvelle page
..	lance le téléchargement du fichier si non html
..	permet d'afficher une infobulle au survol du lien

..		attribut id pour définir une ancre

===== Image ===== Pour afficher une image au sein de la page web

===== 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é...)


	
                     image affichée
   ..	légende de l'image affichée

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

===== Tableaux ===== Un tableau est contruit/décrit ligne par ligne




    TITRE DU TABLEAU
    
        
        Entête colonne 1		
	Entête colonne 1
    
   
    
    
	contenu première cellule
	etc..
    

    



...	définit une entête de tableau
...	définit le corps du tableau
...	définit le pied du tableau
	permet la fusion de deux cellules horizontalement (cellules de 2 cases de largeur)
	permet la fusion de plusieurs cellules verticalement

TITRE DU TABLEAU
Entête colonne 1	Entête colonne 1
contenu première cellule	etc..

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



		indique l'adresse de la page qui se chargera de traiter les informations

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





    		zone de texte à une ligne
    	donne un nom à cette zone de texte, pour être exploitée par php

    Etiquette collée à notre champ de saisielabel>
    
    for pointe sur id pour relier étiquette et champ de saisie
    ...

==== Zone de texte multilignes ====



on peut mettre du texte par défaut (pas besoin de value)

==== Types de texte particuliers ====

==== Eléments d'option - choix ====

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

==== Mise en page de formulaires ====



    
    	
        Un titre pour mon fieldset

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



    
    
    
    
    
    
    
    
    
    
    
    
    		
        value="message personnalisé"

==== Auto-validation ====