html et css

0.0(0)
studied byStudied by 0 people
0.0(0)
full-widthCall Kai
learnLearn
examPractice Test
spaced repetitionSpaced Repetition
heart puzzleMatch
flashcardsFlashcards
GameKnowt Play
Card Sorting

1/59

encourage image

There's no tags or description

Looks like no tags are added yet.

Study Analytics
Name
Mastery
Learn
Test
Matching
Spaced

No study sessions yet.

60 Terms

1
New cards

html (rôle)

donne du sens au contenu brut en le balisant, s’occupe de la structure de la page

2
New cards

css (rôle)

permet de formater le contenu baliser, s’occupe du look d’une page

3
New cards

html (définition)

HyperText Markup Language, système qui formalise l’écriture d’un document avec des balises de formatage, définit la racine d’un document html

4
New cards

les balises

les balisent créent la mise en page/structure de la page web et la manière dont est présentée le document, sont définies par < et >, la plupart fonctionnent par paires → une balise de début associée à une balise de fin p.ex <p> et </p>

5
New cards

le doctype, <!DOCTYPE html>

un document html doit toujours comporter en première ligne une balise de type “doctype”, permet au navigateur de savoir dans quelle language lire une page, <!DOCTYPE html> pour html 5

6
New cards

la balise head, <head>

définit la zone d’en-tête du document et contient les informations sur la page web, on y retrouve souvent les balise <title> et <meta>, tout ce qui est contenu dans cette balise ne s’affiche pas à l’écran sauf le titre, contient les métadonnées du document (titre, scripts, styles)

7
New cards

la balise body, <body>

définit le début et la fin du corps du document → ce qui s’affiche à l’écran, est après la balise head, contient le contenu du document (texte, images, liens, …)

8
New cards

la balise title, <title>

le titre du document, affiché dans la barre de titre du navigateur ou dans l’onglet, placé dans la balise head

9
New cards

<h1>. <h2>, <h3>, <h4>, <h5>, <h6>

définissent des titres de différents niveaux, du + important (h1) au - important (h6)

10
New cards

<p>

définit un paragraphe de texte

11
New cards

<a>

crée des hyperliens vers d’autres pages web ou ressources, le lien utilise une url (adresse internet) qui point sur une image, archive, un autre fichier html est, le lien peut avoir plusieurs attribues mais au minimum href=””

12
New cards

<img>

intègre une image dans le document, doit contenir des attributs pour donner une indications → src=”” pour la source de l’image, alt=”” pour expliquer ce que l’images représente

13
New cards

<ul>, <ol>

créent des listes non ordonnées (ul) et ordonnées (ol), les éléments dedans sont des <li>

14
New cards

<br>

insère un saut de ligne

15
New cards

<hr>

insère une règle/ligne horizontale

16
New cards

<button>

crée un bouton cliquable

17
New cards

<div>

définit une division ou section dans un document html, souvent utilisé à des fins de mise en âge

18
New cards

<span>

définit une plage de texte, souvent utilisé à des fins de style

19
New cards

les deux types d’adresse url

url absolue ( href=””) et url relative (src=””)

20
New cards

les commentaires

code qui ne sera pas lu par le navigateur, peur servir à donner des indications, corriger des problèmes, retrouver vers du code → <!— votre contenu —>

21
New cards

css (définition)

Cascading Style Sheet, language qui permet de mettre du style dans l’html (placer des éléments ou on veut, rajouter couleurs, bordures, images, …)

22
New cards

écrire le code css

sélecteur { propriété : valeurs ; }

23
New cards

les 3 manières de placer du css

inline, interne, externe

24
New cards

manière inline de placer du css

les propriétés sont insérées dans les balises html

25
New cards

manière interne de placer du css

dans une balise <style> à l’intérieur de la balise <head>

26
New cards

manière externe de placer du css

dans un fichier .css qu’on lie au html avec la balise <link rel=”stylesheet” href=”style.css”> dans la balise head

27
New cards

les sélecteurs css

ils appliquent du style à des éléments html depuis un fichier .css ou une balise <style>

28
New cards

les types de sélecteurs css

sélecteur d’éléments (types de balise), sélecteur ID, sélecteur de classe, sélecteur par groupe ou contexte (relation ou emplacement)

29
New cards

sélecteurs d’éléments

permet de sélectionner des éléments dans le html (p, h1, body, ul, …), p{}

30
New cards

sélecteurs id

id spécifie un identifiant unique pour un élément html, il sélectionne un élément spécifique et aura une propriété plus élevée que les sélecteurs par classe, peut être utilisé qu’une fois dans une page, html : <div id=”john”> css : #john

31
New cards

sélecteurs par classe

j’ajoute une classe à ma balise pour la distinguer des autres, le style sera alors appliqué qu’aux balises de cette classe, peut être utilisé plusieurs fois, .texte-rouge {}

32
New cards

sélecteurs par groupe ou contexte

un style peut changer selon le contexte dans lequel il se trouve, p.ex .banner p {}, ce sélecteur change le style à tous les paragraphes dans les class banner et pas ailleurs

33
New cards

autres sélecteurs css

* → tout ce qui est dans la page

body, p, h1 { → le body, le p, le h1

34
New cards

polices : font-family : georgia, “gill sans”, sans-serif

indique la police à utiliser, le browser va sélectionner le premier font, si il ne le trouve pas le deuxième etc, le font doit être présent sur l’ordinateur

35
New cards

police : si la police n’est pas sur mon ordinateur → @font-face {}

@font-face { font family : customfont src : url(my font.tff); dans ce cas le navigateur chargera la police, qui doit être dans mon dossier

36
New cards

police : utiliser une police google font

utile de télécharger une police google font car la police n’a pas besoin d’être disponible sur le serveur, dans head <link rel=”stylesheet” href=”lien”> puis body { font-family: nom; }

37
New cards

font-style: italic;

mettre en italique

38
New cards

font-weight: bold;

mettre en gras

39
New cards

text-decoration : ;

p.ex underline, souligner du texte

40
New cards

font size : px;

p.ex 12px, écrire en taille 12

41
New cards

text-align: ;

p.ex justify, aligne le texte en justifié

42
New cards

text-shadow : px px black;

p.ex 2px 2px black, ajoute une ombre

43
New cards

les couleurs : color: ;

p.ex blue, change la couleur du texte

44
New cards

les couleurs : background: ; 

p. ex black, change la couleur du fond (bloc, page, conteneur, …)

45
New cards

les couleurs : background-image

pour les images, background-image: url(“image.jpg”);

46
New cards

les couleurs en css

peuvent être :

  • un nom → color : blue;

  • en hexadécimal → #FF00FF

  • en rgb ou rgbba → rgb(000,000,000) ou rgba(000,00,00,0.0)

  • un dégradé → linear-gradient(#, #)

47
New cards

les bordures en css, border: ;

pour ajouter des bords a un élément html, peut avoir une épaisseur, un style, une couleur, un placement (haut, droite), peut être arrondie avec border-radius

48
New cards

taille : width et height

width : px ou % → fixe la largeur, height : px ou % → fixe la hauteur, les deux utilisent souvent la propriété auto

49
New cards

padding : px;

permet de créer de l’espace entre le contenu et le bord à l’intérieur d’un container

50
New cards

margin : px;

permet de créer de l’espace entre le contenu et le bord extérieur d’un container, on peut spécifier top, left, bottom, right

  • margin : 10px; → toutes les marges auront la même valeur

  • margin : 10px (haut) 25px( droite) 35px (bas) 80px (gauche)

  • margin: auto; → pour centrer le contenu d’un élément, le parent doit avoir une taille fixée

51
New cards

pseudo-classes : liens et hover

ils se mettent sur un sélecteur css (nom de balise, classe, id) et changent l’état de nos éléments quand on clique ou passe la souris, a:hover{}

  • :hover → quand on passe la souris sur un élément

  • :visited → quand on a déjà cliquer sur l’élément

  • :active → quand on clique sur l’élément

52
New cards

commentaires en css

ne sera pas lu par le navigateur et sert à donner des indications, corriger des problèmes, retrouver du code etc, /* commentaire */

53
New cards

html, les containers

un container fait référence à un élément html ( div, nav et main ) qui est utilisé pour regrouper d’autres éléments, on y place tout ce qu’on veut, il permet de structurer une page en créer des blocs qui sont indépendant et on pourra par la suite modifier la taille, les couleurs, afficher ou cacher les différents containers, faire attention à l’ordre des containers dans la page

54
New cards

propriété css : display

est utilisée pour définir comment un élément html doit être affiché dans la mise en page de la page web, détermine le comportement de l’élément par rapport aux autres éléments de la page (influence sa position, ses dimensions, le flux de texte, …)

55
New cards

propriété css, display: block;

pour block, l’élément est affiché comme un bloc de texte, il est déplacé sur une nouvelle ligne et occupe tout l’espace disponible horizontalement, on peut définir une largeur (width) et hauteur (height) spécifique

56
New cards

propriété css, display: inline;

pour inline, l’élément est affiché comme faisant partie du texte de la ligne en cours et ne rompt pas le flux de texte, a généralement une largeur et hauteur limitées à celle de son contenu, p.ex utilisé avec span, a, img

57
New cards

propriété css, display: inline-block;

pour inline-block, l’élément est affiché comme faisant partie du texte de la ligne en cours, mais peut avoir une largeur et hauteur spécifique comme un bloc

58
New cards

propriété css : display: none;

pour none, l’élément n’est pas affiché sur la page, c’est comme si il n’était pas présent dans la structure html

59
New cards

flexible boy layout

méthode de mise en page flexible qui permet de créer des conteneur flexible

60
New cards

flexbox

permet de créer des mises en pages réactives et adaptatives avec des éléments qui s’adaptent automatiquement à la taille de l’écran ou du dispositif (→ responsive), de positionner les éléments automatiquement (centrer, …). crée des containers dans un containers

Un module CSS qui facilite la disposition des éléments dans un

conteneur flexible, même lorsque leur taille est dynamique.

Il permet d’aligner, distribuer et ordonner les éléments

facilement sur un axe horizontal ou vertical.