James Hoffman

Techniques de l'Informatique - Cégep de Shawinigan

Menu

Web: Client 2

1.3- Exercices

2- Récapitulatif HTML/CSS

3.1- Manipulation du DOM

HTML

Définit la structure de la page web via des balises
html
copier
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>

<body>
<!-- Contenu -->
<h1>Titre</h1>
<p>Paragraphe</p>
</body>
</html>
Des attributs viennent préciser le comportement
html
copier
<tag something="value" other="value"> contenu </tag>

CSS

CSS ajuste la présentation et mets en forme le contenu en modifiant les propriétés des balises
css
copier
selector {
color: red;
background-color: #00FF00;
text-align: center;
width: 50%;
height: 100px;
margin: 10px 5px 10px 5px;
padding: 16px;
font-family: sans-serif;
font-size: 16px
}
Les sélecteurs définissent les éléments à mettre en forme
css
copier
p #my-id .my-class
p img h1, h2, h3 a:hover
👀 CSS Selectors

Attributs id vs class

id, identifiant unique d'une balise HTML pour y faire référence(avec #) par la suite(par exemple via un lien, en CSS ou JS)

html
copier
<tag id="my-id-name"> … </tag>

class, groupe auquel peuvent appartenir plusieurs éléments qui partagent des caractéristiques communes(avec . ). Un élément peut également avoir plusieurs classes

html
copier
<tag class="my-class-name another-class"> … </tag>
<tag class="another-class"> … </tag>

Modèle en boîte

Représente le concept de "boîte" qui enveloppe tous les éléments HTML.

  • Margin
  • Border
  • Padding

Éléments bloc vs inline

  • Bloc
    • Occupe une nouvelle ligne
    • Largeur de 100%
    • Ex: titres ou paragraphes

  • Inline
    • Intégré au contenu
    • Prend la largeur de son contenu
    • Ex: liens ou images

Les éléments block et inline

Flex et Grid

Formulaires

  • Les formulaires permettent de saisir des données.
  • Les données peuvent être manipulées en JavaScript ou transférées à la composante serveur du site web
  • On peut offrir une meilleure expérience utilisateur en offrant certaines validations directement dans le formulaire(attention!)
Ouvrir
js
ATTENTION Validations Clients != Sécurité
copier
await fetch('/web-2/2-recap-html-css/form.sinatra/form', {
'headers': {
'Content-Type': 'application/x-www-form-urlencoded',
'Cache-Control': 'no-cache'
},
'body': 'email=pas un courriel&name=abc&type=coucou',
'method': 'POST',
});