Scribd
Importer
2 vues27 pages

Initiation au HTML et CSS pour débutants

Moi

Transféré par

celestinbabwa
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
2 vues27 pages

Initiation au HTML et CSS pour débutants

Moi

Transféré par

celestinbabwa
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

INITIATION AUX TECHNOLOGIES

DE L’INFORMATION & DE LA
COMMUNICATION

LES BASES DU HTML & CSS

Ir, BIEN-NE KUSA


L2 CSI/ISPT-KIN
ADM, DATABASE : ECOMIL PRO
CONSULTAN CETRAL TECH UNIT
VILLE DE KINSHASA
TéL : + 243 816 591 709
EMAIL : bienenekusa@gmail,com

bienekusa@[Link]
CONCEPTS FONDAMENTAUX
 HTML est le langage du web. 2 concepts se cachent derrière HTML :
 Hypertexte : façon d’inter-relier des documents multimédias
 Balises : façon d’indiquer le formatage des éléments
 Mise en forme décrite par des fichiers de style CCS
 Tout est exprimé en ASCII 7 bits (et souvent 8 ou 32 bits) pour la portabilité
 Les navigateurs sont très tolérants, ils affichent des choses même quand ils ne comprennent pas
(c’est à dire quand l’utilisateur a fait des erreurs)

LE LANGAGE HTML
 HTML : HyperText Markup Language
 Langage de description de pages web
 Un document HTML est
 Un fichier texte, construit suivant une syntaxe précise
 Structuré par des balises
 Interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet Explorer, Safari, etc.)
 Créé dans un éditeur de pages web (NVU, Dreamweaver) ou tout éditeur de texte (bloc-notes,
Wordpad, Vs Studio Code)

LES NAVIGATEURS
 Logiciel destiné à consulter des pages du web : Firefox, Safari, Internet Explorer, ,,,,,,
 Ils savent lire les documents html ou htm, et éventuellement adapter l’affichage aux différents
media :
 Moniteurs (écran), Imprimante, Carte son, etc.
 Code source HTML (idéal pour apprendre les techniques des autres)
 Ils savent aussi transformer exporter/importer une page web dans/depuis un autre format
(traitement de texte …)
 Que fait un navigateur qui rencontre un document d’un type inconnu ?
 Il recherche un plugin <=> une extension lui apprenant à ouvrir ce type de fichier
 Ou il exécute l’application qui correspond
 Pour faire votre site web :
 Il faut un hébergeur pour avoir un serveur web
 Un logiciel d’édition de texte
 Un logiciel FTP (File Transfer Protocol) client (ou SSH comme PSCP ou putty) pour
communiquer avec le serveur (avec ssh de manière sécurisée)

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


CODE HTML & VISUALISATION

LES LIENS
 Un lien est constitué par un mot, une suite de mots, ou une image repérée par une balise
HTML spéciale
 Cliquer sur un lien permet de naviguer vers :
 Un nouveau document HTML du même serveur ou d’un autre endroit du web (par URL)
 Un autre endroit du même document
 Un document quelconque
 En général, les liens sont indiqués sur une page web par du texte souligné ou par un
changement d’apparence du pointeur de la souris.
 Dans un navigateur, le passage du pointeur sur un lien fait afficher la cible en bas de la fenêtre

EXEMPLE D’UNE PAGE WEB

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


LES BALISES (OU TAGS)
 Une balise est un mot clé encadré par 2 chevrons < et > et Correspondent à des informations sur
la page web ou sur une zone de la page
 La plupart des balises vont par paire:
 La balise initiale
 La balise terminale (la même que celle du début, mais le chevron < est remplacé par </ )
 Exemple: <HEAD></HEAD>
 Certaines balises initiales renferment des valeurs particulières, appelées attributs, qui précisent
des paramètres
 Exemples:
 <a href="[Link]
 <img src="[Link]">
 Zone d'action de la balise : entre la balise ouvrante et la balise fermante

Comment faire ?
 Un simple éditeur de texte permet de créer une page
 On sauvegarde la page avec l’extension .html ou .htm
 Ensuite on l’ouvre, « à côté » avec un navigateur
 Puis on commence le cycle édition/correction :
 Modifier/éditer la page
 L’afficher,
 Recommencer jusqu’à satisfaction
 Remarque : certain éditeur de textes peuvent fournir un mode spécial d’édition pour les pages
HTML et il existe de nombreux éditeurs spécialisés pour HTML (difficilement comparables)
 Remarque : ne pas utiliser Microsoft Word pour générer de pages HTLM ; le code généré est
immonde

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


REFERENCE HTML
-
LISTE DES ELEMENTS HTML

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


A propos de cette liste
Dans ce nouveau livret, je vous propose la liste complète des éléments HTML de la
spécification la plus récente (HTML 5.3).

Cette liste est ordonnée conformément à la référence officielle disponible à


l’adresse [Link]

Vous pouvez trouver plus de ressources sur mon site : [Link]

Vous pouvez utiliser cette liste sur vos sites et pour vos différents supports. Merci
cependant de faire un lien vers l’article original : [Link]
elements-html5-liste/.

Éléments, balises et attributs HTML – Syntaxe et rôle


Les éléments sont à la base du fonctionnement du HTML. Ils permettent d’exprimer du
sens en marquant les différents contenus de notre page. Cela signifie que leur rôle
principal est un rôle de sémantique et il est donc important de toujours choisir l’élément le
plus approprié pour transmettre le sens voulu.

Les éléments HTML peuvent avoir différentes formes et être plus ou moins complexes
dans leur implémentation. Certains sont composés d’une paire de balises ouvrante et
fermante et d’un contenu entre ces balises tandis que d’autres ne sont composés que
d’une balise qu’on appelle alors balise orpheline. De même, certains éléments HTML vont
avoir besoin d’attributs pour fonctionner correctement.

Les attributs HTML vont nous permettre d’apporter du contexte aux éléments, c’est-à-dire
de préciser le sens de ceux-ci. Certains attributs vont être obligatoires au bon
fonctionnement de certains éléments HTML tandis que d’autres vont être facultatifs.

L’élément de document html

html
L’élément html représente la racine d’un document HTML.

Les éléments de métadonnées


head
L’élément head représente une une collection de métadonnées pour le
document.
title
L’élément title représente le titre du document (le titre de la page).
base
L’élément base permet de spécifier l’URL de base du document eet le nom du
contexte de navigation par défaut pour suivre les hyperliens.

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


link
L’élément link permet de créer des liens entre le document HTML et d’autres
ressources, comme une feuille de styles CSS par exemple.
meta
L’élément meta représente différents types de métadonnées qui ne peuvent
pas être transmises via d’autres éléments comme le jeu de caractères (charset)
utilisé ou la définition du viewport.
style
L’élément style permet de définir des styles CSS pour le document.

Les éléments de segmentation


body
L’élément body représente le contenu du document.
article
L’élément article représente une composition complète ou autonome dans un
document, une page, une application ou un site.
section
L’élément section représente une section générique d’un document ou d’une
application. Dans ce contexte, on appelle section un groupement thématique
de contenu.
nav
L’élément nav représente une section de page contenant des liens et dont le
but principal est de servir de navigation.
aside
L’élément aside représente une sous-section de page dont le contenu est relatif
à la section parente mais qui peut être considérée comme distincte de ce
contenu (qui peut exister en soi).
header
L’élément header représente un contenu d’introduction pour son élément
principal ancêtre, son contenu de section ou son élément racine de
sectionnement le plus proche. Cet élément contient généralement la navigation.
footer
L’élément footer représente un pied de page pour l’élément principal de
l’ancêtre le plus proche, le contenu de la section ou l’élément racine de la
section.
h1, h2, h3, h4, h5, h6
Les éléments h1, h2, h3, h4, h5, h6 représentent des titres d’importance
différentes pour leur section de page

Les éléments de groupement de contenu


main
L’élément main représente le contenu principal (dominant) du document
div

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


L’élément div ne possède aucune signification particulière et représente ses
enfants. On peut l’utiliser pour appliquer une sémantique commune à plusieurs
éléments avec des attributs lang ou title par exemple
p
L’élément p représente un bloc de contenu, un « paragraphe ». C’est l’élément
par défaut pour tout texte. Il ne doit pas être utilisé lorsqu’un élément plus
spécifique, tel qu’une liste, est plus approprié.
ol
L’élément ol représente une liste d’éléments ordonnés de manière
intentionnelle de telle façon que la modification de l’ordre modifierait la
signification du document.
ul
L’élément ul représente une liste d’éléments sans ordre particulier c’est-à-dire
une liste d’éléments dont l’ordre est interchangeable.
li
L’élément li représente un élément de liste. L’élément li peut appartenir à une
liste ordonnée, à une liste non ordonnée, ou être seul.
dl
L’élément dl représente une liste de description composée de groupes termes
à définir + définition (description) du terme.
dt
L’élément dt représente un terme à définir au sein d’une liste de description.
dd
L’élément dd représente la description ou définition d’un terme au sein d’une
liste de description.
figure
L’élément figure représente un contenu de flux, avec éventuellement une
légende, qui est autonome (comme une image, une illustration, un schéma,
etc.) et est généralement référencé comme une seule unité à partir du flux
principal du document.
figcaption
L’élément figcaption représente une légende pour le contenu de
l’élément figure parent.
address
L’élément address représente les informations de contact d’une personne,
d’une personne ou d’une organisation. Il devrait inclure des informations de
localisation / contact physiques et / ou numériques, ainsi qu’un moyen
d’identifier une personne ou une organisation à laquelle les informations se
rapportent.
pre
L’élément pre représente un bloc de texte préformaté, dans lequel la structure
est représentée par des conventions typographiques plutôt que par des
éléments.
hr
L’élément hr représente une rupture thématique au niveau du paragraphe,
comme une transition vers un autre sujet dans une section d’un article par
exemple.
blockquote
L’élément blockquote représente le contenu cité d’une autre source,
éventuellement avec une citation qui doit figurer dans un élément footer ou cite,
et éventuellement avec des modifications en ligne telles que des annotations et
des abréviations.

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


Les éléments de sémantique au niveau des textes
a
L’élément a représente un lien si il est accompagné d’un attribut href ou un
espace réservé où un lien aurait été placé si cela avait été pertinent.
strong
L’élément strong représente une notion de forte importance pour un contenu.
On peut l’utiliser dans un titre, une légende ou un paragraphe afin de distinguer
une partie qui importe vraiment.
em
L’élément em sert à mettre l’accent sur un contenu particulier. L’accent mis
modifie le sens de la phrase et l’élément fait donc partie intégrante du contenu.
mark
L’élément mark représente un élément de texte important ou pertinent dans le
contexte de l’utilisateur actuel. Il sert à souligner un contenu qui n’est pas
important en soi mais qui l’est dans le contexte actuel (lorsqu’un utilisateur fait
une recherche sur un terme par exemple).
span
L’élément span ne possède pas de signification en soi mais peut être utile
lorsqu’il est utilisé avec les attributs globaux comme par
exemple class, lan ou dir. Il représente ses enfants.
br
L’élément br représente un retour à la ligne.
code
L’élément code représente un fragment de code informatique. Il peut s’agir d’un
nom d’élément HTML, d’un nom de fichier, d’un programme informatique ou de
toute autre chaîne qu’un ordinateur reconnaîtrait.
data
L’élément data représente son contenu accompagné d’une forme lisible par
une machine de ce contenu qui doit être placé dans l’attribut obligatoire value.
time
L’élément time représente un contenu de type date/heure ainsi qu’une forme
lisible par une machine de ce contenu qui doit être placée dans
l’attribut datetime (optionnellement).
cite
L’élément cite représente une référence à un travail créatif. Il doit inclure le titre
de l’œuvre ou le nom de l’auteur, une référence d’URL ou une référence sous
une forme abrégée conformément aux conventions utilisées pour l’ajout de
métadonnées de citation.
abbr
L’élément abbr représente une abréviation ou un acronyme.
q
L’élément q représente un contenu textuel cité à partir d’une source externe.
i
L’élément i représente une partie de texte avec une voix ou une humeur
différente ou écrite de manière décalée par rapport au reste du texte (une
pensée, un terme technique, un idiome…).
b

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


L’élément b représente une partie du texte sur laquelle l’attention est attirée à
des fins utilitaires sans donner aucune importance supplémentaire et sans
implication d’une autre voix ou humeur, telles que des mots clés dans un
résumé de document, des noms de produit dans une révision.
u
L’élément u représente une étendue de texte avec une annotation non
textuelle, telle que l’étiquetage d’un nom propre en texte chinois, d’un nom de
famille ou du texte comme étant mal orthographié.
small
L’élément small représente des commentaires d’importance secondaire.
s
L’élément s représente un contenu qui n’est plus exact ou n’est plus pertinent.
dfn
L’élément dfn représente le terme qui est en train d’être défini. La définition du
terme doit être fournie par un élément p, section ou un élément de liste parent
var
L’élément var représente une variable. Cela peut être une variable réelle dans
une expression mathématique ou un contexte de programmation, un identifiant
représentant une constante, un symbole identifiant une quantité physique, un
paramètre de fonction, etc.
samp
L’élément samp représente un résultat produit par un autre programme ou
système informatique.
kbd
L’élément kbd représente une entrée utilisateur (généralement une entrée au
clavier, bien qu’il puisse également être utilisé pour représenter une autre
entrée, telle que des commandes vocales).
sub
L’élément sub est utilisé pour afficher du texte en indice (bas). Cet élément
devrait uniquement être utilisé à des fins typographiques (afin de modifier la
position du texte en raison des conventions typographiques) et non pour obtenir
des effets de mise en forme.
sup
L’élément sup est utilisé pour afficher du texte en exposant (haut). Cet élément
devrait uniquement être utilisé à des fins typographiques (afin de modifier la
position du texte en raison des conventions typographiques) et non pour obtenir
des effets de mise en forme.
bdi
L’élément bdi représente une portion de texte qui peut être formatée dans une
direction différente du texte principal (de l’arabe au milieu d’un texte français
par exemple).
bdo
L’élément bdo permet d’imposer une direction donnée à un texte.
wbr
L’élément wbr représente un emplacement où un saut de ligne pourrait être
implémenté.
ruby
L’élément ruby permet de marquer des parties de texte avec des annotations
ruby qui sont des petites portions de texte présentées à côté du texte de base
et principalement utilisées dans la typographie est-asiatique.
rb
L’élément rb représente le contenu textuel de base d’une annotation ruby.

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


rt
L’élément rt représente le contenu textuel ruby d’une annotation ruby.
rtc
L’élément rtc représente un conteneur ruby pour des composants de texte
d’une annotation ruby.
rp
L’élément rp utilisé pour fournir un texte de secours à afficher par les agents
utilisateurs qui ne prennent pas en charge les annotations ruby.

Les éléments d’édition


ins
L’élément ins représente un fragment de texte inséré a posteriori dans un
document.
del
L’élément del représente un fragment de texte supprimé a posteriori dans un
document.

Les éléments d’intégration de contenu


img
L’élément img représente une image et son contenu alternatif dans le cas où
elle ne pourrait pas être affichée.
picture
L’élément picture est un conteneur utilisé afin de définir zéro ou plusieurs
éléments source destinés à un élément img.
source
L’élément source permet d’indiquer plusieurs sources alternatives pour des
éléments de type media (images, audio ou video).
audio
L’élément audio permet d’intégrer une piste audio dans une page.
video
L’élément video permet d’intégrer une vidéo dans une page.
track
L’élément track représente une piste texte pour un média de type audio ou
vidéo.
iframe
L’élément iframe représente un contexte de navigation imbriqué qui permet
d’intégrer une page HTML dans la page courante.
object
L’élément object représente une ressource externe qui, selon le type de la
ressource, sera traitée soit comme une image, soit comme un contexte de
navigation imbriqué, soit comme une ressource externe à traiter par un plugin.
param
L’élément param définit les paramètres qui peuvent être employés dans un
élément object.
embed

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


L’élément embed représente un point d’intégration pour une application externe
ou pour du contenu interactif
map
L’élément map définit une carte-image.
area
L’élément area représente soit un hyperlien avec du texte et une zone
correspondante sur une carte-image, soit une zone morte sur une carte
graphique.
svg
L’élément svg peut être utilisé pour intégrer des fragments de code SVG à
l’intérieur d’un document.
math
L’élément math est l’élément racine de MathML.

Les éléments de tableau


table
L’élément table représente un tableau.
thead
L’élément thead est un conteneur qui représente la ou les lignes d’en-tête d’un
tableau.
tbody
L’élément tbody est un conteneur qui représente la ou les lignes constituant le
corps du tableau.
tfoot
L’élément tfoot est un conteneur qui représente la ou les lignes constituant le
pied du tableau.
tr
L’élément tr représente une ligne de tableau.
th
L’élément th représente une cellule d’une ligne d’en-tête.
td
L’élément td représente une cellule de tableau.
colgroup
L’élément colgroup représente un groupe composé d’une ou de plusieurs
colonnes de tableau.
col
L’élément col représente une ou plusieurs colonnes dans un groupe de colonne
représenté par un élément colgroup.
caption
L’élément caption représente le titre de son élément tableau parent.

Les éléments de formulaire


form
L’élément form représente un formulaire.
input

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


L’élément input représente un champ de données typé, généralement avec un
contrôle de formulaire pour permettre à l’utilisateur de modifier les données.
L’attribut type> contrôle le type de données de l’élément.
label
L’élément label est utilisé pour ajouter un label ou « légende » à un contrôle de
formulaire spécifique.
textarea
L’élément textarea représente un contrôle ou champ de texte long.
select
L’élément select représente une liste d’options.
option
L’élément option représente l’une des options (choix) d’une liste select.
optgroup
L’élément optgroup représente un groupe d’options groupées sous un label
commun.
button
L’élément button représente un bouton, c’est-à-dire un contrôle permettant à
un utilisateur de déclencher des actions lorsqu’il est activé.
fieldset
L’élément fieldset représente une zone de formulaire, c’est-à-dire un
groupement de plusieurs contrôles de formulaire sous un même label.
legend
L’élément legend représente une légende pour un élément fieldset.
datalist
L’élément datalist représente un ensemble d’éléments option qui représentent
les valeurs possibles pour d’autres contrôles.
progress
L’élément progress représente la progression d’une tâche, sous forme de
fraction du total achevé ou simplement de progression.
output
L’élément output représente le résultat d’un calcul effectué par l’application ou
le résultat d’une action de l’utilisateur.
meter
L’élément meter représente une mesure scalaire dans une plage connue, ou
une valeur fractionnelle (pourcentage de votants d’un sondage, etc.).

Les éléments interactifs


details
L’élément details est un élément interactif à partir duquel l’utilisateur peut
obtenir des informations ou des contrôles supplémentaires.
summary
L’élément summary représente une boîte permettant de révéler le contenu d’un
résumé ou d’une légende pour le contenu d’un élément details
dialog
L’élément dialog représente une partie d’une application avec laquelle un
utilisateur interagit pour effectuer une tâche, par exemple une boîte de dialogue,
un inspecteur ou une fenêtre.

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


Les éléments de script
script
L’élément script permet aux auteurs d’inclure un script dynamique et des blocs
de données dans leurs documents. L’élément ne représente pas de contenu
pour l’utilisateur.
noscript
L’élément noscript ne représente rien si le scripting est activé et représente ses
enfants si le scripting est désactivé. Il est utilisé pour présenter différents
annotations aux agents utilisateurs prenant en charge les scripts et à ceux qui
ne les prennent pas en charge.
canvas
L’élément canvas fournit aux scripts un canevas bitmap dépendant de la
résolution, qui peut être utilisé à la volée pour rendre des graphiques, des
graphiques de jeu, des illustrations ou d’autres images.
template
L’élément template est utilisé pour déclarer des fragments de HTML pouvant
être clonés et insérés dans le document par un script.

© Bien-ne KUSA – bienekusa@[Link] +243 816591709


REFERENCE CSS
-
LISTE DES ELEMENTS CSS

bienekusa@[Link] +243 816 591 709


LISTE DES PROPRIETES CSS
Cette page est une liste non exhaustive des propriétés CSS qui existent, le but étant de réunir sur une même page un maximum de propriétés CSS.
Cette liste se concentre sur les principales propriétés, le but n'est pas de toutes les archiver …

Propriétés de formatage de texte

Police, taille et décorations


Type Nom Valeurs possibles
Indiquer les noms de polices possibles par ordre de préférence : font-family:police1, police2, police3;
Nom de Utilisez des guillemets si le nom de la police comporte des espaces. Essayez de toujours mettre comme dernière police possible
font-family
police "serif" ou "sans-serif".
Exemple : font-family: "Arial Black", Arial, Verdana, serif;
Plusieurs unités sont possibles :
 px (pixels)
 % (pourcentage, 100% = normal)
 em (taille relative, 1.0 = normal)
 ex (taille relative à la hauteur de la lettre "x". 1.0 = normal)
 nom de taille :
Taille du
font-size o xx-small : très très petit
texte
o x-small : très petit
o small : petit
o medium : moyen
o large : grand
o x-large : très grand
o xx-large : très très grand
bold : gras
bolder : plus gras
Gras font-weight
lighter : plus fin
normal : pas gras (par défaut)
italic : italique
Italique font-style oblique : autre façon de mettre en italique
normal : normal (par défaut)
underline : souligné
overline : ligne au-dessus
Décoration text-decoration line-through : barré
blink : clignotant
none : normal (par défaut)
Type Nom Valeurs possibles
bienekusa@[Link] +243 816 591 709
Petites small-caps : petites capitales
capitales font-variant normal : normal (par défaut)
uppercase : tout mettre en majuscules
lowercase : tout mettre en minuscules
Capitales text-transform
capitalize : début des mots en majuscules
none : normal (par défaut)
letter-spacing : permet d'ajuster l'espace entre chaque lettres. Valeurs possibles : "normal", ou une unité de longueur.
text-shadow : permet de créer une ombre au texte. Valeurs possibles : "none", une couleur et / ou une longueur.
Autres …
word-spacing : permet d'ajuster l'espace entre chaque mot. Valeurs possibles : "normal", ou une longueur.
direction : permet de choisir le sens du texte. Valeurs possibles : "ltr" de gauche à droite, "rtl" de droite à gauche.
Indiquez dans n'importe quel ordre des valeurs possibles pour font-weight, font-style, font-size, font-variant, font-family. Attention
Raccourcis exception : le nom de la police (font-family) doit être placé en dernier dans la liste dans tous les cas.
Exemple : font: bold, 16px, Arial; /*Cela mettra votre texte en gras, 16 pixels, Arial.*/

Alignement
Type Propriété Valeurs possibles
left : à gauche (par défaut)
center : centré
Alignement horizontal text-align
right : à droite
justify : texte justifié (prend toute la largeur de la page)
A utiliser dans des cellules de tableau.
top : en haut
Alignement vertical vertical-align
middle : au milieu
bottom : en bas
Hauteur de ligne line-height Indiquer une valeur en pixels (px) ou en pourcentage (%)
Indiquez une valeur en pixels (px) pour définir l'alinéa de vos paragraphes.
Alinéa text-indent Vos paragraphes commenceront avec le retrait que vous avez indiqué.
normal : le passage à la ligne est automatique (par défaut)
Césure white-space nowrap : pas de passage à la ligne automatique, à moins qu'une balise xHTML comme <br /> ne soit présente.
pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source.

Propriétés de couleur et de fond


Couleur
Type Propriété Valeurs possibles
Couleur de texte color Indiquer une couleur avec l'une des méthodes suivantes :

bienekusa@[Link] +243 816 591 709


Type Propriété Valeurs possibles
 En tapant le nom de la couleur en anglais (black, blue, green, white, red...).
 En indiquant la couleur en hexadécimal (#CC48A1)
 En indiquant la couleur en RGB : rgb (128, 255, 0)
Couleur de fond background-color Même fonctionnement que color. Cela définit cette fois la couleur de fond du texte

Image de fond
Type Propriété Valeurs possibles
Indiquer l'url de l'image (notation absolue ou relative)
Image de fond background-image
background-image:url("images/[Link]");
fixed : le fond reste fixe quand on descend plus bas sur la page
Fond fixé background-attachment
scroll : le fond défile avec le texte (par défaut)
repeat : le fond se répète (par défaut)
repeat-x : le fond ne se répète que sur une ligne, horizontalement
Répétition du fond background-repeat
repeat-y : le fond ne se répète que sur une colonne, verticalement
no-repeat : le fond ne se répète pas, il n'est affiché qu'une fois
2 façons de faire :
 En notant une distance en px ou %, par rapport au coin en haut à gauche.
background-position:50px 200px; /* 50 px à droite, 200px en bas */
 En utilisant des valeurs prédéfinies, une pour la verticale et une pour l'horizontale :
top : en haut, verticalement
center : au milieu, verticalement
Position du fond background-position bottom : en bas, verticalement

left : à gauche, horizontalement


center : au centre, horizontalement
right : à droite, horizontalement
Exemple : background-position : bottom right; /* en bas à droite */
Indiquer une ou plusieurs valeurs issues des propriétés background-image, background-repeat, background-
attachment, background-position.
L'ordre des valeurs n'a pas d'importance et vous n'êtes pas obligés de mettre toutes les valeurs de ces propriétés
Raccourci background
(au moins une suffit)
Exemple : background:url("images/[Link]") no-repeat fixed top right;
/* Le fond [Link] reste affiché en haut à droite de l'écran et n'est pas répété. */

bienekusa@[Link] +243 816 591 709


Propriétés des boîtes Dimensions

Type Propriété Valeurs possibles


Largeur width Valeur en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur)
Hauteur height Idem
Largeur minimale min-width Indiquer une valeur, en pixels par exemple.
Largeur maximale max-width Idem
Hauteur minimale min-height Idem
Hauteur maximale max-height Idem
Marges extérieures
Type Propriété Valeurs possibles
Marge en haut margin-top Indiquer une valeur comme 20px, 1.5em...
Marge à
margin-left Idem
gauche
Marge à droite margin-right Idem
Marge en bas margin-bottom Idem
Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :
 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite
 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite
Raccourci margin  3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la
marge du bas
 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.
Exemple : margin:20px 5px; /* 20px de marge en haut et en bas, 5px à gauche et à droite */
Marges intérieures
Type Propriété Valeurs possibles
Marge intérieure en haut padding-top Indiquer une valeur comme 20px, 1.5em...
Marge intérieure à gauche padding-left Idem
Marge intérieure à droite padding-right Idem
Marge intérieure en bas padding-bottom Idem
Raccourci padding Idem margin

bienekusa@[Link] +243 816 591 709


Bordures
Type Propriété Valeurs possibles
Epaisseur de la bordure border-width Indiquer une valeur en px.
Couleur de la bordure border-color Indiquer une valeur de couleur.
none : pas de bordure (par défaut)
hidden : bordure cachée
solid : ligne pleine
double : ligne double (nécessite une taille de bordure de 3px minimum)
Type de bordure border-style dashed : en tirets
dotted : en pointillés
inset : effet 3D "enfoncé"
outset : effet 3D "surélevé"
ridge : autre effet 3D
Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
Bordure à gauche border-left L'ordre n'a pas d'importance.
Exemple : border-left: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */
Bordure en haut border-top Idem
Bordure à droite border-right Idem
Bordure en bas border-bottom Idem
Raccourci border Indiquera l'apparence des bordures en haut, à droite, en bas et à gauche.

Propriétés de positionnement et d'affichage Affichage

Type Propriété Valeurs possibles


none : l'élément ne sera pas affiché
block : l'élément devient de type "block" (bloc, comme <p>)
Type d'élément display
inline : l'élément devient de type "inline" (en ligne, comme <strong>)
list-item : l'élément devient de type "élément de liste à puce" (comme <li>)
hidden : masqué
visible : visible (par défaut)
Affichage visibility
display:none; fait complètement disparaître l'élément, tandis que visibility:hidden; masque l'élément, qui continue quand même à
prendre de la place sur l'écran.
visible : tout l'élément sera affiché (par défaut).
Limiter les hidden : l'élément sera coupé s'il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte coupée.
overflow
dimensions scroll : tout comme hidden, l'élément sera coupé s'il dépasse les limites. Toutefois, cette fois le navigateur ajoutera des barres de
défilement pour qu'on puisse voir la suite du texte.

bienekusa@[Link] +243 816 591 709


Type Propriété Valeurs possibles
auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas. Bien souvent, utiliser cette
valeur revient à utiliser la valeur "scroll".
Positionnement
Type Propriété Valeurs possibles
left : flottant à gauche
Flottant float right : flottant à droite
none : pas de flottant (par défaut)
left : supprime l'effet d'un flottant à gauche précédent
right : supprime l'effet d'un flottant à droite précédent
Stopper un flottant clear
both : supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite
none : pas de suppression de l'effet du flottant (par défaut)
absolute : position absolue par rapport au coin en haut à gauche
fixed : position fixe (fonctionne comme la position absolue). L'élément reste à sa position même quand on descend plus bas
Type de
position dans la page.
positionnement
relative : position relative, par rapport à la position "normale" de l'élément
static : positionnement normal (par défaut)
Position par rapport
top Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif.
au haut
Position par rapport
bottom Idem
au bas
Position par rapport à
left Idem
gauche
Position par rapport à
droite right Idem
Par exemple en cas de positionnement absolu, si 2 éléments se chevauchent, z-index permet d'indiquer quel élément doit être
affiché au-dessus de l'autre. Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en avant.
Ordre d'affichage z-index
Exemple, si vous avez 2 éléments positionnés en absolus avec un z-index : 10 pour l'un et z-index : 20 pour l'autre, c'est celui
qui a un z-index de 20 qui sera affiché par-dessus.
PROPRIETES DES LISTES
Type Propriété Valeurs possibles
 Pour les listes non ordonnées (<ul>) :
o disc : un disque noir (par défaut).
Type de liste list-style-type
o circle : un cercle.
o square : un carré.
Type Propriété Valeurs possibles

bienekusa@[Link] +243 816 591 709


o none : aucune puce ne sera utilisée.
 Pour les listes ordonnées (<ol>) :
o decimal : des nombres 1, 2, 3, 4, 5... (par défaut)
o decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...). Ne fonctionne pas sur
Internet Explorer
o upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...)
o lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...)
o upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...)
o lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
o lower-greek : numérotation grecque. Ne fonctionne pas sur Internet Explorer
list-style- inside : sans retrait
Position en retrait
position outside : avec retrait (par défaut)
Puce list-style- Indiquer l'url de l'image qui servira de puce.
personnalisée image Exemple : list-style-image: url("images/[Link]");
Vous pouvez réunir les valeurs de list-style-type, list-style-position et list-style-image. Vous n'êtes pas obligés de mettre toutes
Raccourci list-style les valeurs, et l'ordre n'a pas d'importance.
Exemple : list-style: inside square;
AUTRES PROPRIETES
Type Propriété Valeurs possibles
a:link : lien non-visité
Les pseudo- a:visited : lien visité
a
classes d'ancre a:hover : lien survolé
a:active : lien activé
scrollbar-3dlight-color : permet de modifier la couleur pour les effets de relief. Valeur possible : une couleur.
scrollbar-arrow-color : permet de modifier la couleur pour les pointeurs de défilement. Valeur possible : une couleur.
scrollbar-base-color : permet de modifier la couleur de la surface de la barre de défilement. Valeur possible : une
couleur.
scrollbar-darkshadow-color : permet de modifier la couleur pour les ombres. Valeur possible : une couleur.
Les barres de scrollbar-face-color : permet de modifier la couleur de la surface de la barre de défilement. Valeur possible : une
défilement : scrollbar couleur.
scrollbar-highlight-color : permet de modifier la couleur pour le bord haut et le bord gauche. Valeur possible : une
couleur.
scrollbar-shadow-color : permet de modifier la couleur pour le bord droit et le bord du bas. Valeur possible : une
couleur.
scrollbar-track-color : permet de modifier la couleur pour la barre de défilement non cachée par le pointeur de
défilement. Valeur possible : une couleur.

bienekusa@[Link] +243 816 591 709


Le langage de requête,
SQL(Structured Query Language)
 Introduit par IBM, évolution du langage SEQUEL,commercialisé tout
d'abord par ORACLE
 SQL est devenu le langage standard pour décrire etmanipuler les BDR
 Les commandes SQL :
- De définition des données :
CREATE
DROP
ALTER
- De manipulation des données :
SELECT
INSERT
UPDATE
DELETE
- De contrôle des données :
 Contrôle des accès concurrents
COMMIT
ROLLBACK

 Contrôle des droits d’accès


GRANT
REVOKE

bienekusa@[Link] +243 816 591 709


 SQL peut être utilisé de 2 manières :
- en mode interactif
 pour apprendre le langage
SQL est un langage pour les développeurs
n'est pas destiné à un utilisateur final
Les requêtes sont envoyées à partir d'un terminal interactifauquel les résultats
sont retournés
Ex. :
SELECT [Link] FROM client C WHERE
[Link] = 'c1'
- en mode intégré dans un L3G hôte(COBOL, ADA, C, FORTRAN …)
 pour développer des applications
Les constantes dans les requêtes SQL peuvent être remplacées par des
variables du programme hôte ; lesrésultats doivent être transmis dans des
variables
Ex. : SQL danc C
EXEC SQL SELECT [Link] INTO :laVille
FROM client C
WHERE [Link] = :unIdCli ;
les variables du programme sont précédées par (:)
 La notion de curseur permet d'exploiter les résultatsd'une requête ligne à
ligne
 Un programme intégrant SQL doit être précompilé parun précompilateur
SQL

bienekusa@[Link] +243 816 591 709


 CRÉATION DE TABLES
 La commande CREATE TABLE crée la définition d'unetable
 Syntaxe :
 CREATE TABLE table
définition des colonnes
 Colonne type [ NOT NULL [UNIQUE] ]
 [ DEFAULT valeur ][ PRIMARY KEY ]
 [ REFERENCES table ]
[ CHECK condition ] ,
,
 -- contraintes de table
 [ PRIMARY KEY (liste de colonnes) ],
 [ UNIQUE (liste de colonnes) ]

 Exemple
CREATE TABLE client
(
IdCli CHAR(4) PRIMARY KEY ,
nom CHAR(20) ,
ville CHAR(30)
CHECK (ville IN ('Nice', 'Paris', 'Rome') ,
)
CREATE TABLE produit
(
IdPro CHAR(6) PRIMARY KEY NOT NULL ,
nom CHAR(30) ,
marque CHAR(30) ,
prix DEC(6,2) ,
qstock SMALLINT
CHECK (qstock BETWEEN 0 AND 100) ,
-- contrainte de table
CHECK (marque <> 'IBM' OR qstock < 10)
)

bienekusa@[Link] +243 816 591 709


SUPPRESSION OU LA MODIFICATION D'UNE TABLE A L'AIDE DESCOMMANDES :
DROP TABLE
ALTER TABLE

Ex.:

ALTER TABLE client


ADD COLUMN teleph CHAR(16)
SELECT, INSERT, UPDATE et DELETE sont les 4
commandes de manipulation des données en SQLEx. :

Recherche SELECT

SELECT [Link]
FROM produit P
WHERE [Link] = 'p1'

Ajout INSERT

INSERT
INTO client (IdCli, nom, ville) VALUES ('c100', 'Duduche', 'Nice')

Mise à jour UPDATE

UPDATE produit P
SET [Link] = [Link] * 1.20
WHERE [Link] = 'p2'

Suppression DELETE

DELETE
FROM produit P WHERE [Link] = 'p4'

bienekusa@[Link] +243 816 591 709


CONNEXION A LA BASE DE DONNEES
Voici comment créer un système de connexion simple en utilisant PHP et MySQL :

1. Créer la base de données et la table :


o Tout d’abord, créez une base de données appelée “registration”.
o Dans cette base de données, ajoutez une table nommée “users” avec les champs suivants : id, username, email, et password. Vous pouvez
utiliser PHPMyAdmin ou la commande SQL suivante :
o CREATE TABLE `users` (
o `id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
o `username` varchar(100) NOT NULL,
o `email` varchar(100) NOT NULL,
o `password` varchar(100) NOT NULL
o ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
2. Créer un formulaire d’inscription :
o Créez un dossier appelé “registration” dans un répertoire accessible par votre serveur (par exemple, dans le dossier “htdocs” si vous utilisez
XAMPP ou www si vous utilisez wampp).
o Créez un fichier “[Link]” pour vous connecter à la base de données :
o <?php
o define('DB_SERVER', 'localhost');
o define('DB_USERNAME', 'root');
o define('DB_PASSWORD', '');
o define('DB_NAME', 'registration');
o $conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
o if ($conn === false) {
o die("ERREUR : Impossible de se connecter. " . mysqli_connect_error());
o }
o ?>
o Créez un fichier “[Link]” avec le formulaire d’inscription :
o <!DOCTYPE html>
o <html>
o <head>
o <link rel="stylesheet" href="[Link]" />
o </head>
o <body>
o <?php
o require('[Link]');
o if (isset($_REQUEST['username'], $_REQUEST['email'], $_REQUEST['password'])) {
o $username = stripslashes($_REQUEST['username']);
o // ... (traitement du formulaire)
o }
o ?>
o <!-- Votre formulaire HTML ici -->
o </body>
o </html> bienekusa@[Link] +243 816 591 709

Vous aimerez peut-être aussi