This is a draft cheat sheet. It is a work in progress and is not finished yet.
html file structure
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> Zeus18 </title>
<link rel="icon" type="image/png" href="img/favicon.png" />
<link rel="stylesheet" type="text/css" href="./normalize.css">
<style type="text/css">
... css code ...
</style>
</head>
<body>
<div id="login-window">
... html code ...
</div>
<script src="./zepto.min.js"> </script>
<script language="JavaScript">
... javascript code ...
</script>
</body>
</html>
|
Afin d'accélérer l'affichage de la page, il est préférable de télécharger les séquences javascript en fin de body.
Balises sémantiques
html5 conseille de remplacer des balises <div> par des balises ayant une signification sémantique |
<h1> <h2>... |
balises de titres (connues depuis longtems!) |
<section> |
<article> |
au sens article principal de la page, ou liste d'articles. |
<header>
<footer> |
de l'article, ou de la page du site |
<nav> |
bloc de liens de navigation |
<aside> |
pub, les suggestions d'autres articles, les photos et encadrés de l'article |
<figure>
<figcaption> |
associer une légende à une illustration ou un autre élément média |
Exemple de balise sémantique <article> (copy)
<article>
...
<footer>
<p>Posté par Simon, le
<time datetime="2012-02-02">2 février 2012</time>
</p>
</footer>
</article>
|
images
<img src="img/pic.jpg" width="80%" height="60%" alt="trombinoscope" />
<!-- c'est mieux de préciser la taille de l'image -->
<!-- le % fait référence au bloc en cours, non à la taille initiale de l'image -->
|
|
|
links
<a href="fichier" target="valeur">le lien</a>
|
target peut prendre les valeurs suivantes : |
_parent |
L'URL cible va s'afficher dans la structure externe de la frame en cours |
_self |
L'URL cible va s'afficher dans la même frame que le lien (fenêtre si vous n'avez pas de frame car une fenêtre est une frame unique |
_blank or _new |
L'URL cible va s'afficher dans une nouvelle fenêtre ouverte automatiquement par le navigateur |
_top |
'URL cible va s'afficher dans l'intégralité de la fenêtre du navigateur en cours et les frames (s'il y en a) disparaissent |
"toto" |
L'URL cible va s'afficher dans la frame portant l'attribut name="toto" |
href peut prendre les valeurs suivantes : |
"mailto:hello@example.com"
ouverture du client mail local, en espérant qu'il existe. |
"page.php"
ou "page.pl"
, etc. url locale au serveur |
"http://domaine.tld/path/"
url externe au site |
Exemple de formulaire
<form action="mapage.php" method="post"
enctype="text/plain"
name="formulaireTest" id="formulaireTest"
onsubmit="return validateFormOnSubmit(this)">
<fieldset>
<legend>Veuillez décrire votre identité</legend>
<li>
<label for="nom">Nom</label>
<input id="nom" name="nom" type="text" placeholder="Nom">
</li>
<li>
<label for="prenom">Prénom</label>
<input id="prenom" name="prenom" type="text" required>
</li>
<li>
<label for="email">Email</label>
<input id="email" name="email" type="email"
placeholder="exemple@domaine.com">
</li>
</fieldset>
</form>
|
input
Les balises input sont de 3 types |
text |
radio |
choix 1 parmi n (tous de même name=
) |
password |
affichage caché |
checkbox |
plusieurs parmis n |
select |
submit |
button |
button permet de définir l'url d'envoi au niveau button, au lieu de <form> et donc d'avoir plussieurs boutons avec des url différentes si nécessaire. |
reset |
output |
peut être utilisé pour afficher un résultat |
Les balises text peuvent être spécialisées
Cela permet au browser mobile de proposer un clavier plus adapté |
tel |
pour un numéro de téléphone |
url, mail |
pour une url, un mail |
date, time et datetime |
number, range |
color |
search |
entrer un mot clef de recherche |
<datalist> |
liste de complétion suggérée, pas imposé ) |
liens utiles
|
Déterminer la généralisation de balises dans le parc des browsers.
|
|
