HTML
Les Cheat-Sheets à la Guytou
Synthaxe d'un fichier html:
-
-
<!Doctype html>informe le serveur du type de fichier, ici html. -
<html></html>balise indiquant que le contenu html est entre ces deux balises. -
<head></head>balise contenant les informations techniques pour le navigateur ( titre, feuille de style, ...). -
<title>#montitre</title>le navigateur va afficher #montitre sur l'onglet ou la page et dans la recherche google. -
<body></body>englobe tout le contenu de ma page (texte, img, paragraphes, titres, ...) -
!-- #commentaire --!synthaxe d'un #commentaire, non affiché sur la page. - Dans BODY:
-
<header></header>indique qu'il s'agit de l'entête -
<nav></nav>indique que c'est destiné à la navigation -
<article></article>indique qu'il s'agit d'un article-
<section></section>indique qu'il s'agit d'une section de l'article -
<aside></aside>indique que c'est un à coté.
-
-
<footer></footer>c'est le pied de page
-
Balises de texte
-
<p></p>paragraphe. -
<br /> dans <p></p>renvoie à la ligne. -
<h1></h1>definit mon titre et mes sous-titres jusqu'à h6. -
<ol></ol>liste numérotée (!voir balise li!) -
<ul></ul>liste à puces (!voir balise li! ) -
<li></li>contenu de la puce ou du numéro de la ul ou ol , chaque li ajoute un numero ou une puce à la liste. -
<a>texte</a>crée un lien sur texte. - attributs de <a>:
-
href="lienurl"crée un lien hypertexte sur "texte" ouvrant la page "lienurl". -
href="fichierdirect"renvoie vers "fichierdirect" present sur mon stockage. -
href="#marquage"renvoie vers l'ancre(id) "marquage" dans votre page (# est ici important). -
href="mailto:mon@mail"renvoie ecrire un mail à mon@mail -
href="adressefichier"va télécharger le fichier adressefichier quand on clique le lien. -
title="titre"crée une infobulle quand on passe la souris sur le lien avec titre dedans.
-
-
<balise id="marquage"></balise>permet de marquer une importance sur la balise (permettant d'y revenir avec un lien par ex). on appele ce marquage un ancre
Faire un tableau
-
<table></table>crée un tableau. -
<caption></caption>titre du tableau. -
<thead></thead>indique au nav qu'il s'agit de l'entête du tableau. -
<tbody></tbody>indique au nav qu'il s'agit du corp du tableau -
<tfoot></tfoot>indique au nav qu'il s'agit du pied du tableau -
<tr></tr>cree une ligne de tableau.-
<th></th>titre de colonne (dans un tr). -
<td></td>colonne (dans un tr).<td colcode="2">case de 2 colonnes sur la ligne.-
<td rowcode="2">case de 2 lignes sur la colonne.
-
Multimédia
-
<img ... />on insère une image, on DOIT ajouter les attributs comme ceci:-
<img src="adresseimage" alt="donnéesprmoteurderech"/>insère une image.
-
-
<figure><img ... /><figcaption>légende</figcaption> </figure>indique au navigateur qu'img est une figure avec une légende. -
<audio controls>affiche un lecteur audio basique (controls affiche une barre avec les contrôles).-
<source src="fichieraudio.mp3"></source>essaie d'abord le.mp3 sinon -
<source src="fichieraudio.flac"></source>puis essaie le .flac
-
-
... </audio>ferme la balise audio -
<video controls poster="captureecran.png">affiche un lecteur video basique avec captureecran.png en fond.-
<source src="fichiervideo.ogg"></source>essaie d'abord le.ogg sinon -
<source src="fichiervideo.mp4"></source>essaie le .mp4
-
-
... </video>ferme la balise video
Formulaires
-
<form method="post" action="fichieroùvalesinfos"> ....crée un formulaire qui va renvoyer les réponses dans le fichier donné dans action. -
<fieldset> ..... </fieldset>déclare une partie du formulaire par fieldset. -
<legend>ma légende</legend> </fieldset>ajoute une légende à la partie de formulaire. -
<p><label for="pseudo">Pseudo</label><input type="text" name="pseudo" id="pseudo"/></p>crée un paragraphe avec "Pseudo" et une barre de saisie de texte(type=text) sera enregistré dans le fichier comme "pseudo". id="" renvoie au nom du label crée avant. - Input peut aussi contenir:
-
size="6"longueur de la barre de saisie. -
max-lenght="6"limite le nombre de caractères dans la barre de saisie. -
placeholder="EX toto"ecrira "EX toto" en exemple à l'affichage, s'effacera auto lors de la saisie. -
<p><label for="passe">Mot de passe</label><input type="password" name="passe" id="passe"/></p>crée une zone de saisie de mot de passe qui sera enregistré comme passe dans le fichier action.
-
- Différents types de input:
-
<input type="email" ....zone de saisie reconnue pour email -
<input type="url" ....zone de saisie reconnue pour adresse net -
<input type="tel" ....zone de saisie reconnue pour numero de téléphone -
<input type="number" ....zone de saisie optimisée pour la selection de nombre, max min step en attribut par ex <input type="range" ....affiche une barre pour choisir une proportion.<input type="date" ....zone de saisie optimisée pour saisir une date.<input type="color" ....zone de selection d'une couleur.<input type="search" ....zone de saisie optimùisée pour la recherche.<input type="checkbox"puis<label>crée une case cochable, plusieurs input à la suite sont selectionables(ajoutez checked dans l'input pour le selectioner dès le départ).<input type="radio".... bouton rond selectionnable un seul par "name" dans le input.<p><label for="biographie">Biographie</label><textarea name="biographie" id="pseudo"></textarea></p>crée une zonne de texte pour rediger du texte.<input type="submit" value="Envoyer"/>crée un bouton "envoyer" qui valisde le formulaire.
-
<p><label for="idname">selectioner parmi</label><select name="nomretourné" id="idname">crée une liste déroulante selectionnable.<optgroup label="groupe1">crée un groupe non selectionnable contenant:<option value="valeur1">Valeur1</option>crée une valeur selectionnable.<option value="valeur2">Valeur2</option>une seconde... </optgroup>à repeter comme voulu.
-
... </select></p>
-
</form>ferme la balise formulaire.