html Flashcards
Balises de titres
<h1>titre</h1>
…
<h6>titre</h6>
Balises qui enclosent du contenu visible
<body>
...
</body>
texte, blocs de texte
<div>
<p>blabla blabla blabla <span>blabla</span> blabla blabla</p>
</div>
! Que des inline tags dans < p>
met en italique
<em>blabla</em>
met en gras
<strong>blabla</strong>
retour à la ligne
<br></br>
liste à puce
<ul>
<li> item 1 </li>
<li> item 2 </li>
</ul>
liste numérotée
<ol>
<li> item 1 </li>
<li> item 2 </li>
</ol>
insérer une image
< img src=”url.jpg” alt=”texte alternatif” style=”width:128px;height:128px;” >
insérer une vidéo
< video src=”url.mp4” width=”320” height=”240” controls >
Video not supported
< /video >
prévenir le navigateur qu’on lui envoie du html
< !DOCTYPE html >
< html >
…
< /html >
mettre un en-tête
! c’est ici qu’on met le titre et la balise meta
< head>
< meta charset=”UTF-8” >
< title>TITRE</title >
< /head>
mettre un lien
< a href=”https://www.blabla.com” > C’est un lien vers blabla < /a>
mettre un lien qui s’ouvre dans une nouvelle fenêtre
target=”_blank”
< a href=”“https://www.blabla.com”” target=”_blank” > C’est un lien vers blabla < /a >
lien vers une autre page, interne au site, via relative path
< a href=”./contact.html” > Contact < /a >
mettre un lien - image
mettre une balise d’image dans l’anchor
< a href=”https://en.wikipedia.org/wiki/Opuntia” target=”_blank” > < img src=”https://www.Prickly_Pear_Closeup.jpg” alt=”A red prickly pear fruit”/ > < /a >
faire des liens qui renvoient à une partie précise de la même page
avec l’id : imaginons un § nommé ‘top’:
< p id=”top” >This is the top of the page!< /p >
on y réfère avec # :
< a href=”#top” >Top< /a>
ajouter un commentaire
<!-- -->
<!-- This is a comment that the browser will not display. -->
Créer une table
< table >
< /table >
Mettre des lignes dans une table
table row = tr
< table >
< tr >
< /tr >
< /table >
Mettre des cellules dans une table
table data = td
< table >
< tr >
< td > cell 1 < /td >
< td > cell 2 < /td >
< td > cell 3 < /td >
< /tr >
< /table >
Mettre des titres de colonnes dans une table
table heading = th
Mettre des titres dans les colonnes et les lignes d’une table
<table>
<tr>
<th></th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<th>Temperature</th>
<td>73</td>
<td>81</td>
</tr>
</table>
Mettre des données dans une cellule qui s’étalent sur plusieurs colonnes ou lignes
colspan=”integer”
rowspan=”2”
< td colspan=”2” > Out of Town </td>
Créer des titres, des corps et des pieds de table
thead, tbody, tfoot
<table>
<thead>
<tr>
<th>titre 1</th>
<th>titre 2</th>
<th>titre 3</th>
</tr>
</thead>
</table>
créer un formulaire
< form action=”/example.html” method=”POST” >
créer un formulaire avec champ d’input prérempli
< form action=”/example.html” method=”POST” >
< input type=”text” name=”first-text-field” value=”suggestion” >
</form>
Donner un label à un formulaire
< label for=”hop”>hop</label>
< form action=”/example.html” method=”POST” >
< label for=”meal” > What do you want to eat? < /label >
< br >
< input type=”text” name=”food” id=”meal” >
< /form >
Créer un formulaire qui anonymise un password
type=”password”
< form >
< label for=”user-password” > Password: < /label >
< input type=”password” id=”user-password” name=”user-password” >
< /form >
Demander un input où on n’accepte que les nombres
type=”number”
< input id=”years” name=”years” type=”number” step=”1” >
Demander de cocher des cases (choix multiples)
type=”checkbox”
< label for=”cheese”>Extra cheese< /label >
< input id=”cheese” name=”topping” type=”checkbox” value=”cheese” >
Demander de cocher une case (sélection unique)
type=”radio”
< input type=”radio” id=”two” name=”answer” value=”2” >
Demander de sélectionner une option dans un menu déroulant
pas “input”, mais “select”
< select id=”lunch” name=”lunch”>
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
< /select>
Demander de sélectionner parmi un menu déroulant avec la possibilité de filtrer les réponses en commençant à taper
datalist
< label for=”city” > Quelle ville < /label>
<input type=”text” list=”cities” id=city” name=”city”>
<datalist id="cities">
<option value="Tokyo"></option>
<option value="Barcelona"></option>
<option value="Mexico City"></option>
tag for thematic break / horizontal line
< hr >
(horizontal rule)
tag for preformatted text:
- s’affiche en courrier
- garde le formattage (espace, br, …)
< pre >
met
ici
le
texte
< /pre >
change l’apparence d’un élément texte
attribut “style”:
< tagname style=”property:value;”>
< p style=”color:blue;”> I am blue < /p>
< p style=”font-size:50px;”> I am big < /p>
change background color
attribut = style ; property = background-color
< body style=”background-color:powderblue;” >
change the font
attribut = style ; property = font-family
< h1 style=”font-family:verdana;” > This is a heading < /h1>
change text size
style=”font-size:300%;”
< h1 style=”font-size:300%;” >This is a heading</h1>
changer l’alignement du texte
style=”text-align:center;”
< p style=”text-align:center;” > Centered paragraph. < /p >
mettre du texte en gras
< b > en gras < /b >
mettre en italique
< i > italique < /i >
styler un texte pour qu’il soit en bas et petit
(genre les formules chimiques)
< sub > en bas < /sub >
styler un texte pour qu’il soit en haut et petit
(genre les exposants et les footnotes)
< sup > en haut < /sup >
surligner du texte
< mark > surligné < /mark >
barrer du texte
< del > texte barré < /del >
souligner du texte
< ins > texte souligné < /ins >
mettre une grosse citation
< blockquote cite=”url.html” > < /blockquote>
mettre une petite citation
< q> lala < /q>
mettre un acronyme, et ça donne le nom complet quand le curseur est dessus
< abbr title=”World Health Organization”>WHO < /abbr>
mettre une adresse –> § en italique avec une ligne avant et après
< address>adresse< /address>
afficher du texte quand on met le curseur sur un élément
< p title=”texte qui va s’afficher> ici le paragraphe normal < /p>
mettre un cadre autour d’un élément
< h1 style=”border:2px solid Tomato;” > Hello World < /h1>
choisir une couleur avec le système rgb
< h1 style=”background-color:rgb(174,22,101);” > Tiiiitre < /h1>
balise de formulaire permettant de prendre plusieurs lignes de texte comme input
< textarea id=”blog” name=”blog” rows=”5” cols=”30” > texte par défaut < /textarea>
mettre un bouton pour envoyer les réponses
< input type=”submit” value=”Envoyer” >
rendre un champ obligatoire
ajouter “required” dans les paramètres
< input type=”text” required >
mettre un minimum et un maximum dans un input de type number
< input id=”…” name=”…” type=”number” min=”1” max=”4” >
mettre une limite (min et max) dans le nombre de caractères d’un input de type text
minlength, maxlength
< input id=”…” name=”…” type=”text” minlength=”5” maxlength=”250” >
tag pour indiquer un bloc de liens
< nav> mettre ici les liens en liste < /nav>
tag indiquant le principal élément de la page
< main> bloc de la page < /main>
ajouter un audio
< audio controls>
< source src=”url.mp3” type=”audio/mp3”>
texte pour si ça marche pas
< /audio>
Comment s’assurer que les accents français seront bien rendus même si le client est réglé dans une autre langue ?
dans le head du doc, UTF-8
< meta charset=”UTF-8” >
Que signifie < meta name=”viewport” content=”width=device-width, initial-scale=1.0” >
balise meta –> fournit des métadonnées
name=”viewport” –> sur la fenêtre d’affichage
“width=device-width” –> largeur de l’appareil
“initial-scale=1.0” –> niveau de zoom normal
Mettre l’image à droite du texte
float:right
< img src=”smiley.gif” alt=”…” style=”float:right;width:42px;height:42px;”>
transformer une image en image map
(certaines parties de l’image fonctionnent comme des liens)
attribut usemap=”#qqch”
< img src=”…” usemap=”#plop”>
< map name=”plop”>
< area shape=”rect” coords=”1, 2, 3, 4” href=”lien.html”>
< /map>
Comment gérer l’espace entre la bordure et le bord de l’écran ?
style=”margin:30px;”
Comment gérer l’espace entre le bord de l’élément et le début de son contenu ?
style=”padding:30px;”
Editer le style de toute la page
< head>
< style>
body {color: blue; border: 1px solid yellow;}
< /style>
< /head>
Mettre une image comme fond
< p style=”background-image: url(‘img_girl.jpg’);”>
Empêcher l’image de fond de se répéter à l’infini
background-repeat: no-repeat
< style>
body {
background-image: url(‘example_img_girl.jpg’);
background-repeat: no-repeat;
}
< /style>
Faire que l’image de fond couvre tout l’élément dont elle est le fond
background-size: cover;
< style>
body {
background-image: url(‘img_girl.jpg’);
background-repeat: no-repeat;
background-size: cover;
}
</style>
Empêcher l’image de fond de voir ses proportions se tordre pour s’adapter à l’élément qu’elle doit couvrir
background-attachment: fixed;
< style>
body {
background-image: url(‘img_girl.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Permettre à l’image de fond de s’étirer pour toujours couvrir l’élément
background-size: 100% 100%;
< style>
body {
background-image: url(‘img_girl.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Balise permettant au client de choisir entre plusieurs images à afficher en fonction de la taille de l’écran
(permet de choisir parmi plusieurs tailles, plusieurs formats au cas où l’un ne serait pas lu
< picture></picture>
< picture>
< source media=”(min-width: 650px)” srcset=”img_food.jpg”>
< source media=”(min-width: 465px)” srcset=”img_car.jpg”>
< img src=”img_girl.jpg” style=”width:auto;”>
</picture>
Mettre une double bordure sur la table (avec CSS)
table, th, td {
border: 1px solid black;
}
Mettre une bordure simple sur la table (avec CSS)
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Mettre une bordure blanche et des cellules de couleur sur la table (avec CSS)
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
