ESILV 2020-01
3 langages : HTML, CSS, JavaScript
De multiples environnements d'exécution
(Firefox, Chrome, Edge, Safari, Opera, Android view, Safari mobile, Node.js...)
Accessibilité
Mal voyant, non-voyant (lecteur d'écran), déficient moteur (pas de souris...)
MDN : Mozilla Developer Network
CSS tricks
Stackoverflow
YDKJS
Eloquent JavaScript
Quirksmode
csswizardry
2ality
Doctype
<html>
<head>
<body>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Titre apparaissant dans l'onglet</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
<!DOCTYPE html>
<!-- Balise html : Noeud racine du document HTML -->
<html lang="fr">
<!-- Balise head :
pour le titre du document,
les meta-données,
et les fichiers annexes (surtout CSS) -->
<head>
<!-- Jeu de caractère utilisé dans
l'éditeur de texte ayant édité ce fichier -->
<meta charset="utf-8" />
<!-- Compatibilité pour les navigateur IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Titre du document -->
<title>Titre apparaissant dans l'onglet</title>
<!-- Gestion du zoom du document -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Association d'une feuille de style -->
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<!-- Association d'un fichier JavaScript
/!\ selon la spec HTML il doit être ici... -->
<script src="main.js"></script>
</head>
<body>
<!-- Association d'un fichier JavaScript
/!\ selon la spec HTML il NE doit PAS être ici, mais en pratique, si... -->
<script src="main.js"></script>
</body>
</html>
<nav> (seulement la nav de haut niveau)
<main> (1 seul)
<header>
<footer>
<section>
<article>
<aside>
<video>, <audio>, <figure>...
<h1>, <h2>...<h6>
<p>
<a>
<ul>, <ol> et <li>
<em> et <strong>
<table>, <tr>, <th> et <td>
<img />
<button>
<form>
<input type="text|checkbox|radio|number|date|color...">
<select> et <option>
<textarea>
<span>
<div>
<dl> <dt> <dd>
<fieldset> <legend>
<caption>
<html lang="fr">
<input type="text">
<input type="password">
<input type="checkbox">
<input type="email">
<input type="number">
<a href="https://www.duckduckgo.com">
<a id="un-nom-d-ancre">
id
class
<meta>
<script></script>
<style></style>
<link />
/* Règle */
.classe { /* Sélecteur */
background-color: #555; /* Déclaration */
/* propriété: valeur(s); */
background: #555 url(/chemin/de/croix.png) no-repeat center center;
}/* Sélecteur universel */
*
/* Sélecteurs de type */
div
/* Sélecteurs descendants */
div span
/* Sélecteurs d'enfant */
ul > li
/* Les sélecteurs adjacents */
h2 + p
/* La pseudo-classe */
li:first-child
/* Les pseudo-classes de lien */
a:link
a:visited
/* Les pseudo-classes dynamiques */
a:active
a:hover
a:focus
/* La pseudo-classe :lang() */
h1:lang(fr)/* Sélecteurs d'attribut */
abbr[title]
/* Sélecteurs d'attribut */
fieldset[foo="warning"]
label[foo~="warning"]
aside[lang|="en"]
/*************************
* Seulement en HTML *
*************************/
/* Sélecteurs de classe */
/* Identique à DIV[class~="warning"] */
.warning
/* Sélecteurs d'ID */
#myid
/* Les pseudo-éléments */
:first-line
:first-letter
:before
:after Contenu
Padding
Border
Margin
Requête (Request)
Réponse (Response)
Client
Serveur
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties