Présentation Programmation WEB L1 PDF

PROGRAMATION WEB LICENCE 3 1

A- Définition
HTML « HyperText Markup Language » soit en
français « langage hypertexte de balisage ».
C’est un langage créé en 1991 et a pour fonction
de structurer et de donner du sens à un contenu.

♣ NotePad++, si vous êtes sous Windows;
♣ Komodo, pour Mac ou Linux
♣ TextWrangler, pour Linux
♣ Etc.

Un élément est constitué d’une paire de balises :
une balise ouvrante et une balise fermante.
Exemple: élément p, éléments h1, h2, h3, h4, h5
et h6, élément a.

Les balises sont des éléments entourés de chevrons
(<…>). La balise fermante possède en plus un slash
qui précède le nom de l’élément (</… >). Certaines
balises ne sont constituées que d’un seul élément
qu’on appelle balise orpheline. C’est par exemple
le cas de la balise </br>.

Les attributs complètent les éléments en leur
donnant des indications ou des instructions
supplémentaires. Les attributs se placent toujours à
l’intérieur de la balise ouvrante d’un élément (ou de
la balise orpheline le cas échéant).

Toute page HTML5 doit commencer par la
déclaration de ce qu’on appelle un « doctype ».
Le doctype, comme son nom l’indique, sert à
indiquer le type du document. Dans notre cas, le
type de document est HTML.

Notez bien le point d’exclamation, obligatoire, au
début de cet élément un peu particulier.

L’élément html va contenir toute la page.
L’élément head le titre de la page, l’encodage
utilisé et des meta-data.
L’élément body contiendra tout le contenu de notre
page(paragraphes, images, tableaux, etc.).

Les commentaires sont des lignes de codes qui ne
sont pas visibles par les visiteurs.

DEMARCHE

♥ Les balises de structuration
♦ <! DOCTYPE> L’inclusion du DOCTYPE
dans un document HTML assure que le
navigateur interprétera le HTML selon les
spécifications dont le doctype se rapporte. En
HTML5 le doctype à déclarer est :
<! DOCTYPE html>.
♦ <html> Déclaration du
document HTML. On lui rajoutera
l’attribut lang pour déclarer la langue
utilisée.

♦ <head> Pour les informations
d’en tête du document HTML.
♦ <body> est la partie principale du document
HTML.

♥ Les balises de mise en forme
♦  Pour un commentaire.
♦ <a> Utilisée pour les hyperliens.
Attention : l’attribut name n’existe
plus pour les liens.

♦ <abbr> Pour une abréviation. Son
attribut «title» ne doit être utilisé
que pour l’extensionde l’abréviation et
rien d’autre.

♦ <address> Généralement utilisée dans le
conteneur <footer>, cette balise est
utilisée à la place de la balise
<p>, les informations nécessaires pour
contacter la ou les personnes auteurs du
document cité.
♦ <area> Définie une zone ou plusieurs
zones pour une car teimage. Cette balise
s’utilise toujours avec la balise
<map>.

♦ <article> Utilisée pour le contenu ayant
son propre sens indépendamment du reste
des autres éléments de la page.
Exemple : forum, un article de
journal, un commentaire.

♦ <aside> elle permet de regrouper des
informations non essentielles et qui
échappent au flux naturel du document.
♦ <audio> Pour un fichier audio.

♦ <b> Utilisée dans un paragraphe pour une
partie de texte en gras.
♦ <base> elle permet de définir l’URL par
défaut pour toutes les URL. A déclarer
qu’une fois par page HTML.

♦ <blockquote> Pour une longue citation.
♦ <br> Utilisée dans un paragraphe, cette balise
permet de créer un saut de ligne.
♦ <button> Pour un bouton. Ilpeut être utilisé
comme commande.

♦ <canvas> Pour définir un graphique.
♦ <caption> Pour le titre d’un tableau.
♦ <cite> Utilisée pour le titre d’une œuvre, d’un
document ou d’un évènement. Elle peut-être
peut-être utilisée conjointement avec la
balise <q> pour citer l’auteur de la citation.
♦ <code> Pour déclarer du code informatique,
on peut l’utiliser à l’intérieur de la balise <pre>
pour du texte pré formaté. On recommande
d’utiliser une class avec le nom du langage
informatique cité dans cette balise.

♦ <col> Utilisée pour créer des colonnes dans un
tableau.
♦ <colgroup> Utilisée pour créer des groupes de
colonnes dans un tableau.
♦ <command> elle est utilisée comme un
bouton, un radiobutton, ou un checkbox.
♦ <datalist> Pour une liste déroulante.
♦ <dd> Pour la description d’une définition,
s’utilise avec la balise <dl>.
♦ <del> Utilisée pour indiquer qu’une partie de
texte est supprimée, mais conservée pour en
garder la trace.
♦ <details> Pour apporter des détails sur Widget.
Elle peut être utilisée pour cacher/afficher des
informations complémentaires.
♦ <dfn> Représente le terme d’une définition, on
l’utilise dans un paragraphe ou une liste de
définitions.
♦ <div> elle sert surtout de conteneur pour une
mise en forme en CSS.
♦ <dl> Pour une liste de définitions.
♦ <dt> Pour déclarer une définition, elle s’utilise
avec la balise <dl>.

♦ <em> Utilisée dans un paragraphe pour
mettre une partie de texte en emphase.
♦ <embed> Utilisée pour du contenu externe et
interactif ou pour un plug-in.
♦ <fieldset> Pour regrouper des éléments d’un
formulaire.
♦ <figcaption> Utilisée dans le conteneur
<figure>, avant ou après le contenu. Elle permet
d’écrire une légende ou une description.

♦ <figure> Utilisée pour regrouper un ou
plusieurs médias (illustrations, diagrammes,
exemples de code, photos...) attachés au
document sans pour autant en suivre le flux.
L’élément figcaption est utilisée pour décrire les
médias utilisés.
♦ <footer> Regroupe des informations de bas de
page dans une section ou un article. Elle
permet d’ajouter des liens de navigation sans
utilisation de la balise <nav>.
♦ <form> Pour un formulaire.

♦ <h1> à <h6> Utilisées pour la hiérarchisation
des titres.
♦ <header> Pour l’entête d’une section ou d’une
page.
♦ <hgroup> Regroupe des titres de niveau hn
dans la balise <head>.
♦ <hr> Permet de créer une ligne de séparation.
♦ <i> Utilisée dans un paragraphe pour indiquer
qu’une partie du texte est différent du reste. Il
ne faut pas utiliser cette balise lorsque <b>,
<cite>, <dfn>, <em>, <q>, <small> ou
<strong> peuvent être utilisées.
Confusion possible, en HTML5. Elle ne sert
pas uniquement à mettre un texte en italique.
♦ <iframe> Pour créer une sous-fenêtre.
♦ <img> Pour déclarer une image.
♦ <input> Pour un champ de texte.

♦ <ins> Pour insérer un nouveau texte
dans un document révisé.
♦ <keygen> représente un contrôle de générateur
de clé stockée dans «keystore local ».
♦ <kbd> Lorsque le texte est utilisé pour définir
des actions au clavier.
♦ <label> Étiquette utilisée comme titre d’une
commande.
♦ <legend> Titre du fieldset auquel il se
rapporte.
♦ <li> Item d’une liste ordonnée ou à puce.

♦ <link> Permet de lier une ressource externe à la
page HTML.
♦ <map> Utilisée pour créer une carte d’image
avec des zones réactives. L’attribut « name »
est obligatoirement requis.

♦ <mark> Pour marquer du texte, par exemple
surligner un résultat de recherche.
♦ <menu> Pour une liste de commande.
♦ <meta> Permet d’ajouter des métas à la page
HTML.

♦ <meter> Pour des mesures de longueurs.
♦ <nav> Pour regrouper des liens qu’ils soient
internes à la page en cours ou pour d’autres
pages liées.
♦ <noscript> Utilisée pour indiquer un message
dans le cas où JavaScript serait désactivé.
♦ <object> Pour déclarer un objet.
♦ <ol> Utilisé pour les listes ordonnées.
♦ <optgroup> Pour grouper des informations
dans une liste déroulante.

♦ <option> Pour déclarer un item dans une liste
déroulante. Peut-être utilisé comme l’attribut
«commands».
♦ <output> Représente le résultat d’un calcul.
♦ <p> Définis un paragraphe contenant une ou
plusieurs phrases.
♦ <param> Pour paramétrer un objet.
♦ <pre> Ecrire un texte préformaté. L’utilisation
de la balise <p> n’est pas obligatoire.
♦ <progress> Pour une barre de progression.

♦ <q> Utilisée pour une citation courte
provenant d’une ressource externe. Si l’on
connait l’URL de la source de la citation, on
pourra l’indiquer grâce à l’attribut cite.
♦ <s> Utilisée pour identifier une partie de texte
qui n’est pas correct ou non pertinent.
♦ <samp> Utilisée dans un paragraphe pour
écrire un échantillon de code.
♦ <script> Pour ajouter un script internet ou
externe.
♦ <section> Utilisée pour regrouper des éléments
différents.
♦ <select> Pour une liste déroulante.
♦ <small> Pour mettre une partie de texte en
minimisation.
♦ <source> Utilisée dans les balises <video> et
<audio> pour indiquer l’URL et le type des
médias.
♦ <span> Utilisée pour mettre en style une
portion de texte qui se différencie des autres.
Cette balise ne doit pas être utilisée si une autre
balise de formatage de texte convient mieux.

♦ <strong> Utilisée dans un paragraphe pour
mettre un texte en gras.
♦ <style> Permets de définir un style dans le
document HTML. Attention, l’éléments title à
une valeur sémantique différente pour cette
balise.
♦ <sub> Déclarer un indice : Petit caractère placé
en bas et à droite d’un autre caractère.
♦ <summary> Généralement utilisée à l’intérieur
du conteneur <detail>, il permet de décrire le
sommaire, la légende ou le titre d’un élément.

♦ <sup> Déclarer un exposant : petit caractère
placé en haut et à droite d’un autre caractère.
♦ <table> Pour un tableau.
♦ <tbody> Utilisé pour le corps d’un tableau.
♦ <td> Pour déclarer une cellule dans un tableau.

♦ <textarea> Pour le champs de saisi.
♦ <tfoot> Utilisé pour le pied de page d’un
tableau.
♦ <th> Pour déclarer une cellule dans l’entête
d’un tableau.
♦ <thead> Utilisé pour l’entête d’un tableau.
♦ <time> Pour déclarer une date ou une heure.
♦ <title> Pour le titre de la page HTML en cours
de lecture.
♦ <tr> Pour déclarer un champ dans un tableau.
♦ <track> Barre pour indiquer une portion de
temps.
♦ <ul> Pour les listes à puces.
♦ <var> Pour déclarer une variable.
♦ <video> Pour insérer une video.
♦ <wbr> Balise non fermante à utiliser à
l’intérieur d’un mot long pour forcer un
retour à la ligne.
NOTE IMPORTANTE : En HTML5, l’attribut

summary utilisé en accessibilité n’est plus valide et
ne doit pas être utilisé : la balise <caption> devient
indispensable.

Balises de tableaux :
♣ la balise principale table
♣ l’attribut align pour placer horizontalement le
tableau : valeur left center right
♣ l’attribut border pour faire un cadre (autour du
tableau) d'épaisseur exprimée en pixels,
♣ l’attribut bordercolor pour en choisir la couleur,

♣ les attributs width ou height pour donner une
largeur ou une hauteur du tableau (par exemple
width="60%" où la largeur est exprimée en
pourcentage de la largeur de la fenêtre du
navigateur ; on peut aussi exprimer ces
dimensions en pixels sous la forme width="300"),
♣ les balises de lignes tr
♣ les balises de cellules ordinaires td
♣ les balises de cellules de titre th (texte centré et
en gras par défaut),

♣ l’attribut align pour la position horizontale du
texte dans les cellules,
♣ l’attribut colspand=3 pour écrire sur plusieurs
colonnes,

♣ l’attribut rowspand=2 pour écrire sur plusieurs
lignes,
♣ l’attribut valign="top" middle ... pour la
position verticale du texte dans les cellules,
♣ l’attribut bgcolor pour colorer le fond du tableau,
des lignes ou des cellules.
Remarquez qu’un attribut affecté d'une valeur dans
la balise de ligne est actif dans toutes les cellules de
la ligne ; cependant, on peut faire une autre
affectation dans une balise de cellule de cette ligne.

Balises div et span
div est une balise qui crée un élément du document
du type bloc ; cette balise prend un attribut nommé
style qui définit le formatage de l'élément du type
bloc ainsi créé ;

Balises div et span
span est une balise semblable à la précédente
excepté qu'elle crée un élément enligne au lieu d'un
élément bloc.

Balises pre pour texte préformté
La balise pre à la propriété d'afficher les caractères
positionnés exactement comme dans a saisie, avec
une fonte à espacement constant ; les espaces et les
aller-à-la-ligne sont respectés. Cela peut être utile
dans certains cas ; par exemple, la reproduction de
code informatique.

Balises pre pour texte préformté
Cette balise réserve une surprise qui n'est visible
que sur l'aperçu avant impression : si on saisit des
lignes trop longues, le navigateur réduit la taille de
toutes les fontes automatiquement.

A- Définition
Le CSS est un langage de règle qui permet de
modifier l’apparence des pages web en
appliquant des styles au contenu en HTML.

Le CSS permet de séparer le contenu de la
présentation. Le code HTML définit le contenu
(texte, image, vidéo, etc.) et CSS définit les styles
de présentation ou de mises en forme (taille, police,
l’arrière plan, interligne, couleur, etc.).

Chaque élément d’un document HTML appartient à
un arbre. L’élément hérite des styles de ses parents
mais c’est possible que les parents redéfinissent les
styles appliqués à un élément fils : c’est la
surcharge.

La règle d’héritage s’applique aussi sur le mode de définition. L’ordre
d’application des styles du moins prioritaire au plus prioritaire est :
 les styles par défaut du navigateur ;
 les styles définis à l’extérieur du document ;
 les styles définis dans l’entête du document ;
 les styles définis à l’intérieur d’une balise HTML via l’attribut
style.

Le style se décompose :
▲ d’un sélecteur qui désigne sur quel élément ou sur quel
type d’éléments le style s’appliquera ;
▲ d’un bloc de déclaration de style, lui-même composé
d’un ensemble de couple de :
 une propriété ;
 une valeur.

Exemple de style :

Un sélecteur permet de désigner un élément du
document ou un ensemble d’éléments :
 tous les éléments d’une balise spécifique ;
 tous les éléments d’une classe données ;
 l’élément avec identifiant spécifique

Une classe peut être rattachée à tout élément
HTML. Elle peut être utilisées plusieurs fois au
sein d’une même page.

Un identifiant peut être possédé par tout
élément HTML. L’identifiant doit être unique
dans une page.

Un style pour plusieurs sélecteurs : un même
style peut être appliqué à plusieurs sélecteurs par
la définition d’un groupe de sélecteurs.

Sélection des sous éléments : tous les éléments
fils d’un élément ou d’un type d’éléments sont
sélectionnés.
Attention : ce sont les fils directs qui sont
sélectionnés

Sélection des sous éléments : exemple 1
Dans cet exemple, le style est appliqué à tous les

éléments dont la balise parent est <div>.

Sélection des sous éléments : tous les éléments
fils d’un certain type de balise (ou d’une certaine
classe etc.) d’un élément (ou d’un type
d’éléments) sont sélectionnés.
Attention : ce sont les fils directs qui sont
sélectionnés

Sélection des éléments : exemple 2
Dans cet exemple, le style est appliqué

seulement à toutes les balises <p> dont la balise
parent est <div>.

Sélection des éléments ‘’frères’’ : tous les
éléments situés juste après un élément (ou un
type d’éléments) sont sélectionnés. Les éléments
sont au même niveau dans l’arbre et possèdent
un parent commun.

Sélection des éléments ‘’frères’’ : Exemple
Dans cet exemple, le style est appliqué à toutes

les balises <p> dont la balise précédente est
<div>.

Sélection des voisins : tous les éléments situés
après un élément (ou un type d’éléments) sont
sélectionnés. Les éléments sont au même niveau
dans l’arbre et possèdent un parent commun.

Sélection des voisins : Exemple
Dans cet exemple, le style est appliqué à toutes

les balises <ul> dont une balise <p> les précéde.

Sélection sur les valeurs des attributs : tous les
éléments dont la valeur d’un attribut respecte une
condition. Plusieurs types de conditions sont
possibles :
 [attribut = "valeur_attribut"] : désigne un
attribut dont la valeur est sous chaîne
valeur_attribut ;
Sélection sur les valeurs des attributs :
 [attribut ~ = "valeur_attribut" (en CSS2) ou
attribut * = "valeur_attribut" (en CSS3)] :
désigne un attribut dont la valeur contient au
moins une fois la sous chaîne valeur_attribut ;

 [attribut | = "valeur_attribut" (en CSS2) ou
attribut ^ = "valeur_attribut" (en CSS3)] :
caractérise un attribut dont la valeur commence
exactement par la chaîne valeur_attribut ;

 [attribut $= "valeur_attribut"] : représente un
attribut dont la valeur finit exactement par
suffixe valeur_attribut.

Sélection sur les valeurs des attributs : Exemple
Dans cet exemple, le style est appliqué à toutes les

balises <a> dont l’attribut href commence par https.

Pseudo sélecteurs :
 : first-child : premier fils d’une balise ;
 : last-child : dernier fils d’une balise ;
 :: first-line : première ligne du bloc,
paragraphe, tableau, etc.
 :: first-letter : première lettre du bloc,
paragraphe, tableau, etc.

Pseudo sélecteurs : Exemple
Dans cet exemple, le style est appliqué

seulement au premier élément de la liste.

Pseudo éléments : application du style par
insertion d’éléments :
 ::before : ajout d’un élément avant l’élément ;
 ::after : ajout d’un élément après l’élément.

Pseudo éléments : Exemple
Dans cet exemple, le contenu "ADJABA

CORNEILLE" est à ajouter à la fin du contenu
des paragraphe.
Pseudo-classes d’état :
 :hover : si la souris passe au dessous de
l’élément ;
 :focus : si l’élément possède le focus ;
 :active : l’utilisateur clique sur l’élément ;
 :visited : l’utilisateur clique sur l’élément ;

 :checked : l’élément est coché (boîte à cocher
par exemple.) ;
 :empty : élément vide de tout contenu ;
 :target : la couleur de l’arrière plan de l’élément
(lien) change après un clic ;

 :valid : valide l’élément (validation des champs input de
formulaire par une couleur)
 :invalid : invalide l’ élément (invalidation des champs
input de formulaire par une couleur)
 etc.

Pseudo-classes d’état : Exemple 1
Dans cet exemple, le style est appliqué lorsque la

souris survol le contenu de la balise <h1>.

Dans cet exemple, avant le clic, le lien a une

couleur rouge, après le clic, il passe à la couleur
verte.
Les cellules vides du tableau sont mises en

couleur "gray".

Partie HTML
Partie CSS


Quelques sélecteurs et leurs applications :
Styles Applications
* Appliquer le style à tous les éléments (sélecteur universel)
A, B Appliquer le style aux deux éléments A et B
AB Appliquer le style à un élément B contenu dans un élément A
A+B Appliquer le style au premier élément B suivant un élément A
Appliquer le style à tous les éléments A possédant un attribut
A[nom de l’attribut]
particulier.
A[nom de l’attribut* Appliquer le style à tous les éléments A possédant un attribut
= valeur] particulier avec une valeur.
A[nom de l’attribut Appliquer le style à tous les éléments A possédant un attribut
= valeur] particulier avec une valeur précise.

Il y a trois possibilités d’intégration :
† un ou plusieurs fichiers externes

† dans l’entête du document

† directement dans la balise à l’aide de l’attribut style.

♥ Couleurs :
color : blue ;

Notez que nn désigne un nombre.
♥ Propriétés des fontes :
font-family : Arial Times Helvetica ... choix de
la fonte
font-size : nn taille en pt, cm, px ou % ; 200% :
taille de base doublée.

♥ Propriétés des fontes :
font-style : normal italic oblique inherite
font-variant : normal small-caps
font-weight : lighter normal bold bolder
Il y a une abréviation pour les suites de choix : font-aa :
rr; font-bb : ss ; ...
peut s'écrit font : rr ss ... ; exemple : font : italic bold
12pt Arial

♥ Propriétés des textes :
text-align : left right center justify disposition
des lignes
text-indent : nn (en cm ou %) retrait au début de
première ligne d'un bloc
text-decoration : none / underline / overline /
line-through / blink pour souligner.
text-decoration : none / underline / overline / line-
through / blink
none : aucun décor de texte n’est utilisée ;
underline : texte souligné ;
overline : texte surligné avec une ligne au dessus ;
line-through : texte barré ;
blink : texte clignotant.

text-transform : lowercase / uppercase / capitalize
lowercase : transforme le texte en minuscule ;
uppercase : transforme le texte en majuscule ;
capitalize : la première lettre de chaque mot est mis
en majuscule.

line-height : nn (en pt, cm, px ou % ; 200% :
interligne doublée)
letter-spacing (ou word-spacing) : nn (en pt,
cm, px ou %) pour espacer les lettres (ou les
mots) à l’intérieur d’un mot (ou d’une phrase) , à
n’utiliser que très exceptionnellement.

color : #nnnnnn couleur en hexadécimal ou
couleur prédéfinie
width : nn / height : nn (en pt, cm, px ou %) ;
pour fixer les dimensions d'un élément créé par
les balises p h1 ... h6 div span ...

text-indent : #nn px décalage du texte sur la
droite pour une valeur positive et sur la gauche
pour une valeur négative.
text-shadow : pour ajouter les effets d’ombre à
un texte. Cette propriété nécessite au minimum
deux valeurs pour fonctionner. Elle a quatre
valeurs au total PROGRAMATION WEB LICENCE 3 119
Elle a quatre valeurs dont l’ordre est :
→ 1ère valeur : déplacement horizontal de l’ombre ;
→ 2ème valeur : déplacement vertical de l’ombre ;
→ 3ème valeur : rayon de propagation (flou gaussien) de
l’ombre ;
→ 4ème valeur : couleur de l’ombre ;

Les trois premières valeurs correspondent à des
longueurs et la dernière est la couleur de l’ombre.

opacity : définir la transparence du texte avec une
valeur comprise entre 0 et 1.

♥ Propriétés des arrières plans :
background-color : #nnnnnnnn (en hexadécimal
ou couleur prédéfinie)
background-image : url(nom-fichier-
image.extention) fond avec une image

multiple arrière plans
background-image : url(nom-fichier-
image.extention) fond avec une image

Multiple arrière plans
Ou

background-size : nn mm px ou % pour définir
les dimension de l’arrière plan. Elle prend deux
valeurs : Longueur et Largeur.

background-repeat : repeat / repeat-x / repeat-y
/ no-repeat
repeat : l’arrière se répète horizontalement et
verticalement, c’est la valeur par défaut ;
repeat-x : l’arrière se répète horizontalement ;

repeat-y : l’arrière se répète verticalement ;
no-repeat : l’arrière ne se répète pas.
background-attachment : scroll fixed l’image
suit le déroulement de la page ou reste fixe.

♥ Propriétés des bordures : ‘’Box’’
Tout élément HTML peut être vu comme une boîte. Cette
boîte possède un ensemble de propriétés :
Un contenu
Un padding : l’espace entre le contenu et la bordure
Une bordure
Une marge : l’espace entre la bordure et les éléments
environnants.


 La largeur de la div est fixée à 300 pixels ;
 L’espace entre le contenu et la bordure est de 20 pixels ;
 La bordure est pleine, d’épaisseur 20 pixels et de couleur
navy ;
 L’espace entre la bordure et les autres éléments
environnants est de 20 pixels.


Les propriétés peuvent être globales ou relatives
à l’un des quatre côtés. Par exemple border-top-
xxx fixe un élément de style à la bordure
supérieure. Le style, la couleur et la taille de la
bordure peut être spécifique.


box-shadow : pour ajouter les effets d’ombre à
une boîte. Cette propriété nécessite au minimum
deux valeurs pour fonctionner. Elle a quatre
valeurs au total :

Elle a quatre valeurs dont l’ordre est :
→ 1ère valeur : déplacement horizontal de l’ombre ;
→ 2ème valeur : déplacement vertical de l’ombre ;
→ 3ème valeur : rayon de propagation (flou gaussien) de
l’ombre ;
→ 4ème valeur : couleur de l’ombre ;

♥ Propriétés : z-index
z-index permet de définir le premier plan et le
dernier plan entre deux plans qui se superposent.
Il ne fonctionnera donc pas sur des éléments
positionnés en statique (qui est la valeur par
défaut).

♥ Propriétés : z-index
Un élément avec un z-index possédant une
valeur plus élevée qu’un autre sera au dessus de
cet autre élément.

♥ Propriétés : position
Elle permet de définir l’emplacement des
éléments dans un document HTML. Elle peut
prendre l’une des quatre valeurs suivantes :
o static : valeur par défaut, ne change pas la
position de base d’un élément ;

o absolute : permet de positionner un élément
n’importe où dans la page, par rapport à son
élément parent direct ;

o fixed : permet de positionner un élément
n’importe où dans la page. De plus, l’élément
reste visible si vous descendez ou remontez le
long d’une page ;

o relative : permet de replacer un élément
relativement par rapport à son positionnement
par défaut ;
o inherit : l’élément hérite des propriétés de son
parent.

♥ Propriétés : display
Cette propriété permet d’afficher l’élément en ligne
ou en colonne. Elle peut prendre l’une des quatre
valeurs suivantes :
 block : dispose les éléments en colonne
notamment dans la première colonne de la zone
parent. Elle permet d’amener un élément à la ligne.

 inline : dispose l’élément horizontalement par
rapport à l’élément précédent. Il permet de
changer de colonne et de ligne ;

 inline-block dispose l’élément sur la même
ligne que l’élément précédent mais dans la
prochaine colonne. Elle permet de changer de
colonne seulement;
 none : pas de disposition particulière.

BLOCK INLINE
Commence une nouvelle line S’insert dans une ligne
Occupe toute la largeur
Occupe la largeur nécessaire
disponible
Peut être imbriqué les uns
Peut être imbriqué les uns
dans les autres mais ne peut
dans les autres et contenir des
pas contenir des éléments de
éléments de type inline.
type block.

ELEMENTS DE TYPE ELEMENTS DE TYPE

BLOCK INLINE
p em
h1, h2, h3, h4, h5, h6. strong
ol, ul, dl. mark
li a
table img

♥ Propriétés : float
Cette propriété permet d’indiquer la position d’une boîte
ou d’une image par rapport à un texte. Elle peut prendre
l’une des trois valeurs suivantes :
 left : dispose l’élément à gauche ;
 right : dispose l’élément à droite ;
 both : dispose l’élément en haut.

♥ Propriétés des marges, bordures, enrobage et
positionnement :
margin-top : nn (en pt, cm, px ou %) pour l'épaisseur
des marges et idem avec bottom left right
border-top-width : nn et idem avec bottom left right
(en pt, cm, px ou %) marges d’éléments créés par des
balises

♥ Propriétés des marges, bordures, enrobage
et positionnement :
border-width : nn (en pt, cm, px ou %) idem
pour les quatre côtés
border-color : #nnnnnnnn (en hexadécimal ou
couleur prédéfinie)

♥ Propriétés des marges, bordures, enrobage et
positionnement :
border-style : none / solid / double / groove / ... (groove
: strié)
padding-top : nn (en pt, cm, px ou %) et idem avec
bottom left right (en pt, cm, px ou %) pour faire des
espacements entre texte et bordure de tableau ou avant
et après les titres

♥ Propriétés des marges, bordures, enrobage
et positionnement :
padding-top : nn (en pt, cm, px ou %) idem pour
les quatre côtés avec la balise div

♥ Autres propriétés :
list-style-type : disc circle square puces des
listes à puces
list-style-image : url(image.gif) pour remplacer
les puces par une image
list-style-position : inside outside position des
puces par rapport au texte
page-break-after : always auto provoque une coupure
de page après le bloc, toujours ou automatiquement
(utile pour l'impression)
page-break-before comme ci-dessus mais avec la
coupure avant le bloc
position : relative absolute place un élément à un
endroit défini par left : xx

top : yy relativement à la position qu'il occuperait
normalement ou relativement par rapport une position
donnée indépendante de l'environnement (origine : coin
haut gauche de la page) ; il y a aussi z-index : nn qui
définit l'ordre des recouvrements des éléments les uns
par rapport aux autres (l'élément d'indice nn recouvre
l'élément d'indice avec nn-1).

16
16

Présentation Programmation WEB L1 PDF

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

Présentation Programmation WEB L1 PDF

Transféré par

Droits d'auteur :

Formats disponibles

PROGRAMATION WEB LICENCE 3 1

PROGRAMATION WEB LICENCE 3 2

PROGRAMATION WEB LICENCE 3 3

♣ Komodo, pour Mac ou Linux

♣ TextWrangler, pour Linux

PROGRAMATION WEB LICENCE 3 4

une balise ouvrante et une balise fermante.

Exemple: élément p, éléments h1, h2, h3, h4, h5

PROGRAMATION WEB LICENCE 3 5

PROGRAMATION WEB LICENCE 3 6

PROGRAMATION WEB LICENCE 3 8

PROGRAMATION WEB LICENCE 3 10

PROGRAMATION WEB LICENCE 3 11

PROGRAMATION WEB LICENCE 3 12

PROGRAMATION WEB LICENCE 3 15

PROGRAMATION WEB LICENCE 3 16

PROGRAMATION WEB LICENCE 3 18

PROGRAMATION WEB LICENCE 3 19

PROGRAMATION WEB LICENCE 3 20

PROGRAMATION WEB LICENCE 3 21

PROGRAMATION WEB LICENCE 3 23

PROGRAMATION WEB LICENCE 3 24

PROGRAMATION WEB LICENCE 3 25

PROGRAMATION WEB LICENCE 3 26

PROGRAMATION WEB LICENCE 3 27

PROGRAMATION WEB LICENCE 3 29

PROGRAMATION WEB LICENCE 3 33

PROGRAMATION WEB LICENCE 3 35

PROGRAMATION WEB LICENCE 3 37

PROGRAMATION WEB LICENCE 3 40

PROGRAMATION WEB LICENCE 3 42

PROGRAMATION WEB LICENCE 3 43

PROGRAMATION WEB LICENCE 3 44

PROGRAMATION WEB LICENCE 3 46

PROGRAMATION WEB LICENCE 3 48

PROGRAMATION WEB LICENCE 3 52

PROGRAMATION WEB LICENCE 3 54

PROGRAMATION WEB LICENCE 3 55

NOTE IMPORTANTE : En HTML5, l’attribut

PROGRAMATION WEB LICENCE 3 59

PROGRAMATION WEB LICENCE 3 60

PROGRAMATION WEB LICENCE 3 62

PROGRAMATION WEB LICENCE 3 63

PROGRAMATION WEB LICENCE 3 65

PROGRAMATION WEB LICENCE 3 66

PROGRAMATION WEB LICENCE 3 67

PROGRAMATION WEB LICENCE 3 68

PROGRAMATION WEB LICENCE 3 69

Le CSS est un langage de règle qui permet de

modifier l’apparence des pages web en

appliquant des styles au contenu en HTML.

PROGRAMATION WEB LICENCE 3 71

présentation. Le code HTML définit le contenu

(texte, image, vidéo, etc.) et CSS définit les styles

de présentation ou de mises en forme (taille, police,

l’arrière plan, interligne, couleur, etc.).

PROGRAMATION WEB LICENCE 3 72

un arbre. L’élément hérite des styles de ses parents

mais c’est possible que les parents redéfinissent les

styles appliqués à un élément fils : c’est la

PROGRAMATION WEB LICENCE 3 73

d’application des styles du moins prioritaire au plus prioritaire est :

 les styles par défaut du navigateur ;