LPOW Synthèse

Chouaa Salsabil 1BC1 EPHEC
LPOW – Synthèse
Toujours commencer les pages avec la balise suivante :
<! DOCTYPE html> (ne pas mettre dans le fichier CSS !!)
HTML (Structure du document)

BALISE DESCRIPTION
<html> </html> Dans chaque document .html ou .php
(pas dans les documents .css !)
<head> </head> L’en-tête (contient le titre de la page, les
éventuels jeux de caractère, le LINK qui
liera les pages avec le css, etc.)
Dans le head on peut retrouver :
<meta/> Métadonnées de la page web (charset,
mots-clés, etc.) [Balise auto fermante]
<link/> Liaison avec une feuille de style (CSS)
<script> </script> Code / Lien avec JavaScript
<style> </style> Code CSS (inséré en mode Embedded)
<title> </title> Titre de la page
Le corps du texte (le body)

<body> </body> Le corps de la page: tout le contenu qu’on
Toutes les balises en dessous veut voir sur notre page doit se retrouver
doivent se trouver dans le body ! dans le « body » !
👇👇👇👇👇👇👇👇👇👇👇
<header> </header> Tête de page : c’est ce qui va se trouver
tout au-dessus (c’est l’équivalent de l’en-
tête sur Word)
<nav> </nav> Regroupe les liens principaux de
navigation
<section> </section> Permet de créer des sections sur la page
<div> </div> Définit un bloc, une division permettant
entre autres de positionner le contenu
<span> </span> Découpe un texte en plusieurs parties
permettant d’avoir chacune leur style
<aside> </aside> Informations complémentaires sur une
page
<footer> </footer> Pied de page : comme sur Word
<h1> </h1> Les titres de niveau (de 1 à 6)

(existe de h1 à h6) à en gros ce sont les sous-titres, sous-
sous-titres, etc.
<p> </p> Ouvrir un paragraphe
<br/> Retour à la ligne (balise auto fermante)
Les liens (important) :
<a> </a> Insérer un lien hypertexte ⚠
Attribut obligatoire : href !! Exemple d’insertion d’un lien :
<a href =“ https://www.youtube.com“>
L’attribut doit se trouver dans la Cliquez ici pour ouvrir YouTube </a>
balise ouvrante « <a> » !!!
Il existe d’autres attributs non-

obligatoires pour la balise <a> :
En appuyant sur le lien, cela va s’ouvrir
target = “_blank”à dans une nouvelle fenêtre.
En appuyant sur le lien, cela va s’ouvrir

target = “_self ”à sur la page actuelle. (valeur par défaut)
⚠ Faire la différence entre une URL relative et une URL absolue :

Absolue : commence toujours par https://.... (en gros un lien internet)
Relative : Utilisé pour indiquer le chemin dans le serveur (quelque chose qui
se trouve sur notre serveur et pas sur internet !)
Exemple url relative : href=“../images/photo.png”
à On va aller chercher dans mon serveur, dans le dossier « images » la photo
nommée « photo.png ».
Les listes :
<ul> </ul> Liste à puces
<ol> </ol> Liste ordonnée (numérotée)
à dans le <ul> et le <ol> on Voici ce que ça donne concrètement :
retrouve les éléments « <li> ». <ul> Titre de la liste
C’est dans le <li> qu’on va écrire <li> mon premier tiret </li>
les éléments de notre liste (en gros <li> mon deuxième tiret </li>
ce qu’il y a dans les tirets) </ul>
Il existe également d’autres listes : Liste de définitions (permet de créer une
<dl> </dl> liste avec les termes à définir et leurs
définitions
Dans le <dl> on retrouve :
<dt> </dt> à à terme à définir
<dd> </dd>à à Définition du terme
Les tableaux :
<table> </table> Ouvrir un tableau
Dans la balise « table » on

retrouve :
<caption> </caption> à Titre du tableau
<tr> </tr> à Ligne de tableau
<th></th> à Cellule d’en-tête (mettre en évidence)
<td></td> àCellule (colonne)
Il existe d’autres balises pour les
tableaux :
<thead></thead> à l’en-tête du tableau
<tbody></tbody> à le corps du tableau
<tfoot></tfoot> à le bas du tableau
Attributs rowspan & colspan Ces attributs permettent de fusionner des

cellules.
Colspan à Indique que la cellule s’étend sur
plusieurs colonnes
Rowspan à Indique que la cellule s’étend sur
plusieurs lignes
L’attribut doit se trouver dans la
balise ouvrante !!
Concrètement, ça donne : (voir exemple plus bas)
<tr>
<td colspan = “2”> blabla </td>
</tr>
Les images :
<img/> à balise auto fermante Insérer une image
!! La balise image s’accompagne de deux
attributs obligatoires !!
Attributs :
Srcà Src (endroit où aller chercher le fichier)
Altà Alt (texte alternatif en cas de pb avec
l’image)
<figure> </figure> Permet de créer un environnement pour les
images (ou autres).
Voici un lien qui reprend encore + de balises HTML:
https://www.w3schools.com/tags/default.asp
Quelques exemples HTML

Head
Listes (dans le <body> !!!)
Tableaux
Ce qui donne :
Accueil Les nouveautés NIKE Qui sommes-nous ?

Images (+ figures)
On va chercher l’image « nike4.jpg » dans le dossier « images » de notre serveur.

CSS (mise en forme)

Trois manières d’insérer du CSS dans nos pages :
- Inline (en utilisant l’attibut style dans les balises) ;
- Embedded (en définissant une balise <style></style> dans le head ;
- Link (en créant un lien avec un fichier .css où se trouveront tous les codes
pour le style)
à Le meilleur : LINK
BALISE DESCRIPTION
SÉLECTEURS
Type (h1, h2, p, …) Permet de sélectionner tous les types
(exemple : tous les h1, tous les
paragraphes, etc ;)
Id (#) Identifiant unique : on ne peut l’utiliser
(Dans le fichier .css, les Id sont que pour un seul élément.
déterminés à l’aide de l’hashtag !!) On va l’utiliser qu’une seule fois dans une
balise en lui donnant un nom précis.
Exemple :
<h1 id=“monpremierId”> </h1>
Dans le fichier CSS on va noter :
#monpremierId
{
….. (le code css)
}
Classe( .) Identifiant de classe : on peut l’utiliser sur
(Dans le fichier .css, les Class sont plusieurs éléments, dans plusieurs balises.
déterminées l’aide d’un POINT !!) Cette fois-ci, il faut mettre dans la base :
<h1 class =“mapremiereclass”> </h1>
Et dans le fichier CSS on met :
.mapremiereclass
{
….. (le code css)
}
Autre sélecteurs :
Sélecteur universel (permet de définir un
* style à l’ensemble des éléments)
[ ] (entre crochets) Sélecteur d’attributs (permet définir un

style à l’ensemble des éléments ayant
comme attribut ce qu’il y a entre crochets)
PSEUDO CLASSES
:link Permet de sélectionner les liens qui n’ont
pas encore été visités
:visited Permet de sélectionner les liens ayant déjà
été visités
:active Sélectionner un lien lorsqu’on clique
dessus
:hover Sélectionner un élément lorsque la souris
passe au-dessus
:focus Sélectionner un élément lorsqu’il acquiert
le focus (exemple : champ de formulaire)
FONT
font-family Permet de choisir la police de caractères
Les attributs existants sont :

Sans-serif
Serif
Monospace
Cursive
Fantasy
(et plein d’autres)
font-size : Permet de définir la taille des caractères
Nous pouvons définir cela :

En px (exemple : font-size : 24px)
En cm, mm, …
Nous pouvons également utiliser

les mots :
Small, larger, etc.
font-style : Permet de définir le style

d’écriture (normal, en italique, oblique,..)
font-style : normal, à Par défaut

font-style : italic, à Pour mettre en italique
font-style : obliqueà Pour mettre en oblique (et précisant
(ou oblique <angle> l’angle d’inclinaison si on veut)
font-weight :(normal/bold, Permet de mettre les caractères en gras.
lighter/bolder, 100-900)
text-transform : Permet de transformer les caractères

Noneà Pas de transformation
Uppercaseà Tout sera en majuscule
Lowercaseà Tout sera en minuscule
Capitalizeà La 1ère lettre de chaque mot en majuscule
Full-widthà Utiliser le même espace pour les caractères
text-decoration : Permet de souligner, surligner
none à Rien du tout
underlineà Souligne le texte
overlineà Trace une ligne au-dessus du texte
line-throughà Barre le texte
text-align : Permet l’alignement du texte
centerà Centrer
leftà Aligner à gauche
rightà Aligner à droite
justifyà Justifier le texte
color : Permet de définir la couleur du texte
Plusieurs manières :
- En utilisant les noms des
couleurs en anglais
- En utilisant la couleur
exprimée en hexadéciamal
sous la forme « #134A86)
- En utilisant le RGB sous à Cette façon utilise les nuances de
forme : rgb(120,35,260) Rouge Vert et Bleu pour créer une couleur.
Les nombres entre parenthèses sont
trouvés grâce aux palettes RGB que l’on
peut retrouver sur internet.
ARRIÈRE PLAN
background Permet de définir un arrière-plan
background-color : Permet de définir la couleur de fond d’un
élément.
(peut également être défini de 3
manières comme pour color)
background-image : Permet de mettre une image de fond d’un
élément.
exemple :
background-image :url(./ephec.jpg) ;
background-repeat : Accompagne le background-image.
repeat Permet de gérer la manière dont les images
repeat-x ou repeat-y seront affichées si elles sont trop petites
no-repeat par rapport à la zone.
background-size : Accompagne le background-image.

Permet de gérer la manière dont les images
seront affichées si elles sont trop grandes
par rapport à la zone.
cover : L’image sera assez grande pour remplir
totalement la zone
contain : Le navigateur va agrandir l’image pour
remplir la zone (risque de zones blanches)
LISTES
liste-style-type : (none, circle, Permet de définir le type de puces dans les
square, upper-roman,) listes (rien, rond, carré, chiffres romains)
list-style-image : url (‘…’) ; Permet de définir une image à la place des
puces. (utiliser une url)
list-style-position : (outside, Permet de définir la position des puces
inside) (outside ou inside)
BORDURES (PPTX.6)
border-width : px L’épaisseur des bordures
border-style : dotted, solid, Le style des bordures
dashed, double, … dottet à pointié
solid à normal
dashed àpetits tirets
double à double bordure
+ plein d’autres
border-color : Permet de définir la couleur des bordures
à border : width style color ; Nous pouvons réunir ces 3 propriétés en
une seule ligne en écrivant
border : width style color ; (dans l’ordre !)
Exemple : border : 3px solid blue ;
(pas de virgule entre les propriétés)
border-radius : Arrondir les bordures

exemple à border-radius : 9px ;
border-top/bottom/left/right Ces propriétés nous permettent de cibler
chaque partie des bordures (haut, droite,
bas, gauche) si nous voulons leur
appliquer des styles différents.
border-collapse : Permet de définir le comportement des
bords des cellules d’un tableau
separate à Les cellules sont indépendantes (les bords
ne se confondent pas)
collapse à Les cellules sont séparées par des bords
communs
linear-gradient(color, color) Permet de créer un dégradé de couleur en

arrière-plan.
TRANSITIONS (Les animations)
transition-property : Indique les noms des propriétés CSS dur
lesquelles la transition doit être affectuée
transition-duration : Renseigne le temps que doit durer la
transition
transition-timing-function : Indique les étapes de la transition
transition-delay : Indique le temps à attendre avant que la
transition ne commence
BOX MODEL (PPTX.7)
margin : ..px ..px ..px ..px ; Permet de définir les dimensions des
différentes marges (dans l’ordre : top,
right, bottom et left)
à donc dans l’ordre : haut, droite, bas et
gauche
padding : ..px ..px ..px ..px ; Permet de définir la taille des espaces
laissés entre le bord de l’élément et son
contenu (aussi dans l’ordre : top, right,
bottom et left)
DISPLAY
Cette propriété est la plus importante en terme de mise en page en CSS. Elle
permet de définir le comportement de chaque élément par rapport aux autres.
Elle peut prendre une quinzaine de valeur mais les principales sont :
display : none L’élément ne sera pas visible
display : block On peut définir sa taille, les marges et
paddings
Retour à la ligne avant et après les
éléments
On peut définir sa hauteur, sinon il prendra
Exemples d’éléments qui la hauteur cumulée de ses “enfants”
répondent à ces caractéristiques : On peut définir sa largeur sinon il prendra
<h1> (à<h6>, <p>,<div>,<ul>,… toute la largeur de son élément “parent”
display : inline On ne peut pas définir sa taille, ni marge
inf. ou sup.
On peut gérer les marges latérales &
paddings
L’élément n’occupe que la largeur
Exemples d’éléments qui nécessaire
répondent à ces caractéristiques : Pas de retour à la ligne
<a>, <span>, <img>, …
display : inline-block La même chose que l’inline mais :
On peut définir sa taille et les marges.
POSITION (pas très claire) à lire PPTX.7

5 valeurs possibles : Permet de définir le type de
positionnement de notre élément.
position : static à Valeur par défaut (élément placé un après

l’autre
position : relative à L'élément est positionné dans le flux
normal du document puis décalé, par
rapport à lui-même, selon les valeurs
fournies par top, right, bottom et left.
position : fixedà La position de l’élément restera la même

peu importe si on scroll ou pas. (fixe)
position : absolute à ??
position : sticky à ??
Formulaires
BALISE DESCRIPTION
Coder les formulaires dans HTML
<form> </form> Attributs obligatoires :
method = “get” OU “post”
action = adresse de la ressource (page
où les informations vont être
envoyées.)
DIFFÉRENCE ENTRE GET & POST :Comment les données vont être envoyées
(Voir PowerPoint n°8 , Dia 6 & 8)
<input/> à balise auto-fermante Attributs : (* à obligatoire)
(à l’intérieur de la balise <form> Type = “texte” (par défaut)
(<input type= “texte”/>)
Dans l’input, nous pouvons retrouver Autres type :
les attributs suivants : type = “passeword” à pour les ****
type = email
Type type = url
Name type = tel
Value type = checkbox (cocher plusieurs)
Placeholder type = radio (cocher qu’un seul)
Id type = hidden ( ???)
Size type = number ou range
Maxlenght à min= … max = … step=…
+ plein d’autres
*Name = nom de votre zone de donnée
tel qu’il sera transmis lors de l’envoi
du formulaire.
Value = contient la valeur de votre
zone
Placeholder = indique à l’utilisateur
une information sur le type de données
à renseigner lorsque le champs n’a pas
encore de valeur.
Id = unique sur la page !! permet
d’identifier la balise + lier le label
Size = taille de la zone
maxlenght = nb de caractères
<label> </label> Permet de définir un libellé propre à

(à l’intérieur de la balise <form> notre zone (c’est comme l’étiquette, le
nom de la zone de saisie)
Exemple :
<input id=“MonMatricule »/> Le label est lié à l’input via l’id présent
<label for =MonMatricule> Votre dans input et le for présent dans label.
matricule : </label> DONC : id & le for doivent être les
mêmes !!
Ce qui va donner :
Le label c’est ce qui va permettre
d’écrire « Votre Matricule »
Les différents « type »
Type = “checkbox” Permet de créer une liste à cocher, et
de cocher par défaut certaines cases.
(pour cocher par défaut, ajouter à la

balise input le mot « checked »)
Exemple :
<input type=“checkbox” name=“bus”
id=“id_bus” checked>
Type = “radio” Permet de créer une liste et de choisir
Les possibilités sont regroupées et une seule possibilité parmi plusieurs.
possèdent donc le même « NAME »
mais leurs « VALUE » sont
différentes. (pour cocher par défaut, ajouter à la
balise input le mot « checked »)
Type=“number” et type=“range”
Permet d’encoder des nombres sous la
Pour ces deux types, on a 3 attributs forme d’une suite de chiffres (number)
disponibles : ou sous la forme d’un curseur à bouger
Min (nombre minimum) (range)
Max (nombre maximum)
Step (les « pas » utilisés)
Autres balises pour saisir des données
<select> </select> Permet de sélectionner UNE
possibilité parmi une liste déroulante.
Attributs de la balise select :
Name & Id
Dans la balise select, on retrouve des Les choix se font avec les balises
balises : <option></option> <option> </option>
Attribut de la balise option :

Value
<optgroup> </optgroup> Permet de regrouper plusieurs choix

définis dans les balises <option>
<textarea> </textarea> Permet de créer un champs avec une
Attributs de la balise textaera : valeur par défaut déjà écrite
Name & Id
D’autres attributs sont possibles : Permet de contrôler la taille de la zone

Rows et cols en définissant le nombre de lignes
(rows) et de colonnes (cols).
Regroupement de données dans un formulaire
<fieldset></fieldset> Regrouper plusieurs éléments d’input
dans un même cadre
<legend></legend> Permet de définir un texte expliquant

le contenu du fieldset (en gros : le titre
du fieldset)
Envoyer les formulaires
<input type=“submit” /> Pour envoyer un formulaire, nous
allons utiliser la balise <input/> avec
comme type “submit”
<input type=“reset“/> Permet de créer un bouton qui va

réinitialiser les valeurs du formulaire
(supprimer ce qu’on a fait)
à nous pouvons changer le nom de ce
« reset » via l’attribut « value »
Recevoir le formulaire du côté PHP (voir PPTX.8)
2 méthodes :
Si la method=“get“, la variable utilisée
$_GET ou $_POST dans le code PHP sera $_GET
Si la method=“post“, la variable
utilisée dans le code PHP sera $_POST

LPOW Synthèse

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

LPOW Synthèse

Transféré par

Droits d'auteur :

Formats disponibles

Chouaa Salsabil 1BC1 EPHEC

HTML (Structure du document)

Le corps du texte (le body)

<h1> </h1> Les titres de niveau (de 1 à 6)

Il existe d’autres attributs non-

En appuyant sur le lien, cela va s’ouvrir

⚠ Faire la différence entre une URL relative et une URL absolue :

Dans la balise « table » on

Attributs rowspan & colspan Ces attributs permettent de fusionner des

Quelques exemples HTML

Listes (dans le <body> !!!)

Accueil Les nouveautés NIKE Qui sommes-nous ?

On va chercher l’image « nike4.jpg » dans le dossier « images » de notre serveur.

CSS (mise en forme)

[ ] (entre crochets) Sélecteur d’attributs (permet définir un

Les attributs existants sont :

Nous pouvons définir cela :

Nous pouvons également utiliser

font-style : Permet de définir le style

font-style : normal, à Par défaut

text-transform : Permet de transformer les caractères

background-size : Accompagne le background-image.

border-radius : Arrondir les bordures

linear-gradient(color, color) Permet de créer un dégradé de couleur en

POSITION (pas très claire) à lire PPTX.7

position : static à Valeur par défaut (élément placé un après

position : fixedà La position de l’élément restera la même

<label> </label> Permet de définir un libellé propre à

(pour cocher par défaut, ajouter à la

Attribut de la balise option :

<optgroup> </optgroup> Permet de regrouper plusieurs choix

D’autres attributs sont possibles : Permet de contrôler la taille de la zone

<legend></legend> Permet de définir un texte expliquant

<input type=“reset“/> Permet de créer un bouton qui va

Vous aimerez peut-être aussi