LucileDT/web-varren-a-retenir.md

## web-varren-a-retenir.md

      
    Raw
  

              web-varren-a-retenir.md
            
          
    À retenir pour l'évaluation web

Conventions de nommage

Fichiers


tout en minuscules
notation snake case (un underscore entre les mots composant un nom)

Exemple : ceci_est_un_nom_de_fichier_correct.jpg

HTML

Principales balises


<html></html> : délimite le HTML de la page
<head></head> : contient les réglages de la page web
<title></title> : contient le titre de la page (affiché dans l'onglet du navigateur)
<meta charset="UTF-8"> : définit l'encodage des caractères de la page
<body></body> : contient le corps de la page (affiché dans le navigateur)
<div></div> : permet de délimiter les différentes parties de la page

par défaut de type block
prend toute la largeur de la balise parent (dû au type block)


<link ...> : lien vers un document externe dont la page a besoin pour fonctionner

type="text/css" : le document est formatté en CSS
href="..." : le chemin d'accès au fichier


<header></header> : section d'introduction d'un article, d'une autre section ou du document entier
<section></section> : section générique regroupant un même sujet, une même fonctionnalité
<main></main> : représente le contenu principal du BODY du document ou de l'application, doit être unique
<footer></footer> : section de conclusion d'une section ou d'un article, voire du document entier
<img> : insère une image

src="chemin/image.png" : chemin vers l'image
alt="texte" : texte qui remplacera l'image si elle ne parvient pas à charger et qui est lu par les lecteurs d'écrans des aveugles et mal voyants


<form></form> : délimite un formulaire, contenant des zones de saisie

<input> : zone de saisie

type="text" : la zone de saisie permet de contenir un peu de texte
type="password" : la zone de saisie permet de contenir un mot de passe
placeholder="texte" : texte d'aide à la saisie affiché dans la zone de saisie (il disparaît quand l'utilisateur commence à écrire)
name="texte" : nom sous lequel on pourra récupérer les données qui étaient écrites dans la zone de saisie


<button></button> : bouton

type="submit" : au clic, s'il est dans un formulaire, le bouton enverra le formulaire et tout ce qui est dedans


<span></span> : contient du texte

sert à délimiter une partie de texte particulière
n'est pas un BLOCK donc ne prend pas toute la largeur de la page
est de type INLINE, sa largeur et la hauteur dépendent de son contenu
balise ouvrante : <span>
balise fermante : </span>


Dimensions d'une boîte


CSS

Cascading


CSS permet de réécrire des règles déjà écrites pour une balise
mettre les fichiers CSS dans l'ordre de réécriture des règles CSS dans le HEAD (donc reset.css toujours en premier)

Sélecteurs


truc : sans caractère spécial, cible les balises <truc></truc>

<truc></truc>

#truc : avec le #, cible les balises portant l'ID truc

<div id="truc"></div>

.truc : avec le ., cible les balises portant la CLASS truc

<div class="truc"></div>

selecteur_1 selecteur_2 : cible tous les éléments selecteur_2 enfants (directs ou indirects) d'un élément selecteur_1

exemple : #element_1 #element_2


<div id="element_1" class="grand-parent">
    <div class="parent">
        <div id="element_2" class="enfant">élément ciblé</div>
        <div class="enfant">élément non ciblé</div>
    </div>
</div>

selecteur_1 > selecteur_2 : cible tous les éléments selecteur_2 directement enfants de selecteur_1

exemple : #element_1 > #element_2


<div id="element_1" class="parent">
    <div id="element_2" class="enfant">élément ciblé</div>
    <div class="enfant">élément non ciblé</div>
</div>

selecteur_1 + selecteur_2 : cible tous les éléments selecteur_2 suivant directement un élément selecteur_1

exemple : #element_1 + #element_2


<div class="parent">
    <div id="element_1" class="enfant">élément non ciblé</div>
    <div id="element_2" class="enfant">élément ciblé</div>
</div>
Propriétés


background-color : couleur d'arrière plan d'un élément
width : largeur d'un élément
margin : marges autour d'un élément
propriete-left : propriété gauche d'un élément (fonctionne aussi avec -top, -right et -bottom)
padding : marges à l'intérieur d'un élément
border : bord de l'élément
color : couleur du texte de l'élément
30% : largeur de l'élément définie dynamiquement en fonction de la largeur de l'élément parent
font-weight : épaisseur de la police de caractère
display : change la manière de gérer l'élément

inline-block :  les éléments INLINE-BLOCK s'alignent les un après les autres (alors que les BLOCK se placent toujours les uns en dessous des autres)

inline block considère les espaces comme devant être affichés, donc il faut elever ceux utilisés pour l'indentation


Navigateur

Raccourcis


F12 pour ouvrir et fermer la console de debug


Design de pages web


fluide : la largeur de la page s'adapte à la largeur de la fenêtre
centrée : la largeur de la page reste la même en toute circonstance
responsive : l'apparence de la page change en fonction d'intervalles de largeur de fenêtre