Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

Cours > html > Flashcards

html Flashcards

1
Q

Balises de titres

A

<h1>titre</h1>

…

<h6>titre</h6>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Balises qui enclosent du contenu visible

A

<body>
...
</body>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

texte, blocs de texte

A

<div>
<p>blabla blabla blabla <span>blabla</span> blabla blabla</p>
</div>

! Que des inline tags dans < p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

met en italique

A

<em>blabla</em>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

met en gras

A

<strong>blabla</strong>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

retour à la ligne

A

<br></br>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

liste à puce

A

<ul>
<li> item 1 </li>
<li> item 2 </li>
</ul>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

liste numérotée

A

<ol>
<li> item 1 </li>
<li> item 2 </li>
</ol>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

insérer une image

A

< img src=”url.jpg” alt=”texte alternatif” style=”width:128px;height:128px;” >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

insérer une vidéo

A

< video src=”url.mp4” width=”320” height=”240” controls >
Video not supported
< /video >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

prévenir le navigateur qu’on lui envoie du html

A

< !DOCTYPE html >
< html >
…
< /html >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

mettre un en-tête

! c’est ici qu’on met le titre et la balise meta

A

< head>
< meta charset=”UTF-8” >
< title>TITRE</title >
< /head>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

mettre un lien

A

< a href=”https://www.blabla.com” > C’est un lien vers blabla < /a>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

mettre un lien qui s’ouvre dans une nouvelle fenêtre

A

target=”_blank”

< a href=”“https://www.blabla.com”” target=”_blank” > C’est un lien vers blabla < /a >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

lien vers une autre page, interne au site, via relative path

A

< a href=”./contact.html” > Contact < /a >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

mettre un lien - image

A

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 >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

faire des liens qui renvoient à une partie précise de la même page

A

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>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

ajouter un commentaire

A

<!-- -->

<!-- This is a comment that the browser will not display. -->

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Créer une table

A

< table >
< /table >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Mettre des lignes dans une table

A

table row = tr

< table >
< tr >
< /tr >
< /table >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Mettre des cellules dans une table

A

table data = td

< table >
< tr >
< td > cell 1 < /td >
< td > cell 2 < /td >
< td > cell 3 < /td >
< /tr >
< /table >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Mettre des titres de colonnes dans une table

A

table heading = th

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Mettre des titres dans les colonnes et les lignes d’une table

A

<table>
<tr>
<th></th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<th>Temperature</th>
<td>73</td>
<td>81</td>
</tr>
</table>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Mettre des données dans une cellule qui s’étalent sur plusieurs colonnes ou lignes

A

colspan=”integer”
rowspan=”2”

< td colspan=”2” > Out of Town </td>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Créer des titres, des corps et des pieds de table
thead, tbody, tfoot
titre 1 titre 2 titre 3
26
créer un formulaire
< form action="/example.html" method="POST" >
27
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" >
28
Donner un label à un formulaire
< label for="hop">hop < 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 >
29
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 >
30
Demander un input où on n'accepte que les nombres
type="number" < input id="years" name="years" type="number" step="1" >
31
Demander de cocher des cases (choix multiples)
type="checkbox" < label for="cheese">Extra cheese< /label > < input id="cheese" name="topping" type="checkbox" value="cheese" >
32
Demander de cocher une case (sélection unique)
type="radio" < input type="radio" id="two" name="answer" value="2" >
33
Demander de sélectionner une option dans un menu déroulant
pas "input", mais "select" < select id="lunch" name="lunch"> < /select>
34
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>
35
tag for thematic break / horizontal line
< hr > (horizontal rule)
36
tag for preformatted text: - s'affiche en courrier - garde le formattage (espace, br, ...)
< pre > met ici le texte < /pre >
37
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>
38
change background color
attribut = style ; property = background-color < body style="background-color:powderblue;" >
39
change the font
attribut = style ; property = font-family < h1 style="font-family:verdana;" > This is a heading < /h1>
40
change text size
style="font-size:300%;" < h1 style="font-size:300%;" >This is a heading
41
changer l'alignement du texte
style="text-align:center;" < p style="text-align:center;" > Centered paragraph. < /p >
42
mettre du texte en gras
< b > en gras < /b >
43
mettre en italique
< i > italique < /i >
44
styler un texte pour qu'il soit en bas et petit (genre les formules chimiques)
< sub > en bas < /sub >
45
styler un texte pour qu'il soit en haut et petit (genre les exposants et les footnotes)
< sup > en haut < /sup >
46
surligner du texte
< mark > surligné < /mark >
47
barrer du texte
< del > texte barré < /del >
48
souligner du texte
< ins > texte souligné < /ins >
49
mettre une grosse citation
< blockquote cite="url.html" > < /blockquote>
50
mettre une petite citation
< q> lala < /q>
51
mettre un acronyme, et ça donne le nom complet quand le curseur est dessus
< abbr title="World Health Organization">WHO < /abbr>
52
mettre une adresse --> § en italique avec une ligne avant et après
< address>adresse< /address>
53
afficher du texte quand on met le curseur sur un élément
< p title="texte qui va s'afficher> ici le paragraphe normal < /p>
54
mettre un cadre autour d'un élément
< h1 style="border:2px solid Tomato;" > Hello World < /h1>
55
choisir une couleur avec le système rgb
< h1 style="background-color:rgb(174,22,101);" > Tiiiitre < /h1>
56
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>
57
mettre un bouton pour envoyer les réponses
< input type="submit" value="Envoyer" >
58
rendre un champ obligatoire
ajouter "required" dans les paramètres < input type="text" required >
59
mettre un minimum et un maximum dans un input de type number
< input id="..." name="..." type="number" min="1" max="4" >
60
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" >
61
tag pour indiquer un bloc de liens
< nav> mettre ici les liens en liste < /nav>
62
tag indiquant le principal élément de la page
< main> bloc de la page < /main>
63
ajouter un audio
< audio controls> < source src="url.mp3" type="audio/mp3"> texte pour si ça marche pas < /audio>
64
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" >
65
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
66
Mettre l'image à droite du texte
float:right < img src="smiley.gif" alt="..." style="float:right;width:42px;height:42px;">
67
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>
68
Comment gérer l'espace entre la bordure et le bord de l'écran ?
style="margin:30px;"
69
Comment gérer l'espace entre le bord de l'élément et le début de son contenu ?
style="padding:30px;"
70
Editer le style de toute la page
< head> < style> body {color: blue; border: 1px solid yellow;} < /style> < /head>
71
Mettre une image comme fond
< p style="background-image: url('img_girl.jpg');">
72
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>
73
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; }
74
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; }
75
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%; }
76
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> < 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;">
77
Mettre une double bordure sur la table (avec CSS)
table, th, td { border: 1px solid black; }
78
Mettre une bordure simple sur la table (avec CSS)
table, th, td { border: 1px solid black; border-collapse: collapse; }
79
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; }

Cours (11 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions