Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

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
Q

Créer des titres, des corps et des pieds de table

A

thead, tbody, tfoot

<table>
<thead>
<tr>
<th>titre 1</th>
<th>titre 2</th>
<th>titre 3</th>
</tr>
</thead>
</table>

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

créer un formulaire

A

< form action=”/example.html” method=”POST” >

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

créer un formulaire avec champ d’input prérempli

A

< form action=”/example.html” method=”POST” >
< input type=”text” name=”first-text-field” value=”suggestion” >
</form>

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

Donner un label à un formulaire

A

< 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 >

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

Créer un formulaire qui anonymise un password

A

type=”password”

< form >
< label for=”user-password” > Password: < /label >
< input type=”password” id=”user-password” name=”user-password” >
< /form >

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

Demander un input où on n’accepte que les nombres

A

type=”number”

< input id=”years” name=”years” type=”number” step=”1” >

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

Demander de cocher des cases (choix multiples)

A

type=”checkbox”

< label for=”cheese”>Extra cheese< /label >
< input id=”cheese” name=”topping” type=”checkbox” value=”cheese” >

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

Demander de cocher une case (sélection unique)

A

type=”radio”

< input type=”radio” id=”two” name=”answer” value=”2” >

33
Q

Demander de sélectionner une option dans un menu déroulant

A

pas “input”, mais “select”

< select id=”lunch” name=”lunch”>
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
< /select>

34
Q

Demander de sélectionner parmi un menu déroulant avec la possibilité de filtrer les réponses en commençant à taper

A

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>
35
Q

tag for thematic break / horizontal line

A

< hr >

(horizontal rule)

36
Q

tag for preformatted text:
- s’affiche en courrier
- garde le formattage (espace, br, …)

A

< pre >
met
ici
le
texte
< /pre >

37
Q

change l’apparence d’un élément texte

A

attribut “style”:

< tagname style=”property:value;”>
< p style=”color:blue;”> I am blue < /p>
< p style=”font-size:50px;”> I am big < /p>

38
Q

change background color

A

attribut = style ; property = background-color

< body style=”background-color:powderblue;” >

39
Q

change the font

A

attribut = style ; property = font-family

< h1 style=”font-family:verdana;” > This is a heading < /h1>

40
Q

change text size

A

style=”font-size:300%;”

< h1 style=”font-size:300%;” >This is a heading</h1>

41
Q

changer l’alignement du texte

A

style=”text-align:center;”

< p style=”text-align:center;” > Centered paragraph. < /p >

42
Q

mettre du texte en gras

A

< b > en gras < /b >

43
Q

mettre en italique

A

< i > italique < /i >

44
Q

styler un texte pour qu’il soit en bas et petit
(genre les formules chimiques)

A

< sub > en bas < /sub >

45
Q

styler un texte pour qu’il soit en haut et petit
(genre les exposants et les footnotes)

A

< sup > en haut < /sup >

46
Q

surligner du texte

A

< mark > surligné < /mark >

47
Q

barrer du texte

A

< del > texte barré < /del >

48
Q

souligner du texte

A

< ins > texte souligné < /ins >

49
Q

mettre une grosse citation

A

< blockquote cite=”url.html” > < /blockquote>

50
Q

mettre une petite citation

A

< q> lala < /q>

51
Q

mettre un acronyme, et ça donne le nom complet quand le curseur est dessus

A

< abbr title=”World Health Organization”>WHO < /abbr>

52
Q

mettre une adresse –> § en italique avec une ligne avant et après

A

< address>adresse< /address>

53
Q

afficher du texte quand on met le curseur sur un élément

A

< p title=”texte qui va s’afficher> ici le paragraphe normal < /p>

54
Q

mettre un cadre autour d’un élément

A

< h1 style=”border:2px solid Tomato;” > Hello World < /h1>

55
Q

choisir une couleur avec le système rgb

A

< h1 style=”background-color:rgb(174,22,101);” > Tiiiitre < /h1>

56
Q

balise de formulaire permettant de prendre plusieurs lignes de texte comme input

A

< textarea id=”blog” name=”blog” rows=”5” cols=”30” > texte par défaut < /textarea>

57
Q

mettre un bouton pour envoyer les réponses

A

< input type=”submit” value=”Envoyer” >

58
Q

rendre un champ obligatoire

A

ajouter “required” dans les paramètres

< input type=”text” required >

59
Q

mettre un minimum et un maximum dans un input de type number

A

< input id=”…” name=”…” type=”number” min=”1” max=”4” >

60
Q

mettre une limite (min et max) dans le nombre de caractères d’un input de type text

A

minlength, maxlength

< input id=”…” name=”…” type=”text” minlength=”5” maxlength=”250” >

61
Q

tag pour indiquer un bloc de liens

A

< nav> mettre ici les liens en liste < /nav>

62
Q

tag indiquant le principal élément de la page

A

< main> bloc de la page < /main>

63
Q

ajouter un audio

A

< audio controls>
< source src=”url.mp3” type=”audio/mp3”>
texte pour si ça marche pas
< /audio>

64
Q

Comment s’assurer que les accents français seront bien rendus même si le client est réglé dans une autre langue ?

A

dans le head du doc, UTF-8

< meta charset=”UTF-8” >

65
Q

Que signifie < meta name=”viewport” content=”width=device-width, initial-scale=1.0” >

A

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
Q

Mettre l’image à droite du texte

A

float:right

< img src=”smiley.gif” alt=”…” style=”float:right;width:42px;height:42px;”>

67
Q

transformer une image en image map
(certaines parties de l’image fonctionnent comme des liens)

A

attribut usemap=”#qqch”

< img src=”…” usemap=”#plop”>
< map name=”plop”>
< area shape=”rect” coords=”1, 2, 3, 4” href=”lien.html”>
< /map>

68
Q

Comment gérer l’espace entre la bordure et le bord de l’écran ?

A

style=”margin:30px;”

69
Q

Comment gérer l’espace entre le bord de l’élément et le début de son contenu ?

A

style=”padding:30px;”

70
Q

Editer le style de toute la page

A

< head>
< style>
body {color: blue; border: 1px solid yellow;}
< /style>
< /head>

71
Q

Mettre une image comme fond

A

< p style=”background-image: url(‘img_girl.jpg’);”>

72
Q

Empêcher l’image de fond de se répéter à l’infini

A

background-repeat: no-repeat

< style>
body {
background-image: url(‘example_img_girl.jpg’);
background-repeat: no-repeat;
}
< /style>

73
Q

Faire que l’image de fond couvre tout l’élément dont elle est le fond

A

background-size: cover;

< style>
body {
background-image: url(‘img_girl.jpg’);
background-repeat: no-repeat;
background-size: cover;
}
</style>

74
Q

Empêcher l’image de fond de voir ses proportions se tordre pour s’adapter à l’élément qu’elle doit couvrir

A

background-attachment: fixed;

< style>
body {
background-image: url(‘img_girl.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>

75
Q

Permettre à l’image de fond de s’étirer pour toujours couvrir l’élément

A

background-size: 100% 100%;

< style>
body {
background-image: url(‘img_girl.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>

76
Q

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

A

< 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>

77
Q

Mettre une double bordure sur la table (avec CSS)

A

table, th, td {
border: 1px solid black;
}

78
Q

Mettre une bordure simple sur la table (avec CSS)

A

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

79
Q

Mettre une bordure blanche et des cellules de couleur sur la table (avec CSS)

A

table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

Cours (9 decks)

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