UPB Technologies Web : Intro/Rappel
Technologies Web 2
Introduction/Rappel
M. GODE Emmanuel 2022-2023
UPB Technologies Web : Intro/Rappel
Plan
1- Introduction Générale
2- Quelles Technologies Web
3- Rappel HTML
4- Rappel CSS
5- Framework et Librairie / Bibliothèque et Framework
2/21
UPB Technologies Web : Intro/Rappel
Introduction
Généralités
Le World Wide Web ; littéralement la « toile (d’araignée) mondiale », abrégé www ou le Web), la toile
mondiale ou la toile1, est un système hypertexte public fonctionnant sur Internet. Le Web permet de
consulter, avec un navigateur, des pages accessibles sur des sites.
3/21
Technologies Web : Intro/Rappel
UPB
Introduction
Technologies Web ?
Les technologies web sont un ensemble de protocoles et spécifications qui
composent et sont utilisés par le World Wide Web (généralement abrégé Web
ou www) et ses normes. Le web a été créé en 1989 comme application de
partage d'informations puis est devenu une plate-forme à part entière sur
laquelle sont développées régulièrement des nouvelles technologies1
Le Web:
Destiné à lier un document à un autre via une balise de texte renvoyant vers une autre page, selon le principe de
l'hypertexte, le web est devenu l'un des protocoles d'échange les plus utilisés.
Le World wide web est, avec le courrier électronique, l'usage le plus courant d'Internet2, et a été étendu bien au-delà
de son usage initial. Ses URLs et URIs, destinées à identifier et localiser un document de manière unique et stable dans
le temps, identifient aujourd'hui des applications avec des documents dynamiquement générés dans des langages de
programmation dédiés, des applications informatiques complètes ou des concepts abstraits avec le web sémantique.
4/21
UPB Technologies Web : Intro/Rappel
Introduction
Technologies Web
Technologies Web ?
5/21
UPB Technologies Web : Intro/Rappel
Rappel HTML
HTML 5
Code minimal d'une page HTML :
6/21
UPB Technologies Web : Intro/Rappel
Rappel HTML
HTML 5
Balises d'en-tête :
7/21
UPB Technologies Web : Intro/Rappel
Rappel HTML
HTML 5
Balises de structuration du texte :
8/21
UPB Technologies Web : Intro/Rappel
Rappel HTML
HTML 5
Balises de listes : Balises de tableau : Balises de formulaire :
9/21
UPB Technologies Web : Intro/Rappel
Rappel HTML
HTML 5
Balises sectionnantes : Balises de tableau : Balises génériques :
Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id, style 10/21
UPB Technologies Web : Intro/Rappel
Rappel CSS
CSS 3
Propriétés de mise en forme du texte
11/21
UPB Technologies Web : Intro/Rappel
Rappel CSS
CSS 3
Propriétés de couleur et de fond
12/21
UPB Technologies Web : Intro/Rappel
Rappel CSS
CSS 3
Propriétés des boîtes
13/21
UPB Technologies Web : Intro/Rappel
Rappel CSS
CSS 3
Propriétés des boîtes
14/21
UPB Technologies Web : Intro/Rappel
Rappel CSS
CSS 3
Propriétés de positionnement et d'affichage
15/21
UPB Technologies Web : Intro/Rappel
Rappel CSS
CSS 3
Propriétés des listes : Propriétés des tableaux
Autres propriétés
16/21
UPB Technologies Web : Intro/Rappel
Rappel CSS
CSS 3: Responsive Web Design - Media Queries
Qu'est-ce qu'une requête média ?
La requête média (Media query) est une technique CSS introduite dans CSS3.
Il utilise la règle @media pour inclure un bloc de propriétés CSS uniquement si une certaine condition
est vraie.
Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une
application en fonction du type d'appareil (impression ou écran par exemple) et de ses
caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple)
Exemple : min-width ou max-width :
@media only screen and (max-width: 600px) { @media only screen and (min-width: 600px) {
body { body {
background-color: lightblue; background-color: lightblue;
} }
} } 17/21
UPB Technologies Web : Intro/Rappel
Rappel CSS
CSS 3: Responsive Web Design - Media Queries
Type de media : Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les
opérateurs logiques not ou only
all : Valeur par défaut. Nos règles vont s’appliquer à tous les appareils
printer : Nos règles ne s’appliqueront que pour les imprimantes
screen : Nos règles ne vont s’appliquer qu’aux appareils dotés d’un écran ;
speech : Nos règles ne s’appliqueront qu’aux liseurs d’écran qui sont capable de rendre le contenu
d’une page de manière sonore.
Exemple:
18/21
UPB Technologies Web : Intro/Rappel
Framework et Bibliothèque
comparaison
“Le développeur utilise une bibliothèque en appelant le code de cette dernière,
tandis que le rôle du framework est d’exécuter le code du développeur”
En français, on traduit le mot framework par “cadre applicatif”, car c'est son but, il donne
un cadre, une organisation, un squelette, une méthode de travail.
Tandis que la librairie, elle, n'offre que des fonctionnalités souvent décorrélées les unes
des autres.
19/21
UPB Technologies Web : Intro/Rappel
Conclusion
Minimum
Minimum à maitriser :
• HTML
• CSS
• JavaScript
• Php
• MySQL
• JQuery
• Bootstrap
• Framework PHP: Laravel/Symfony/CodeIgniter/Zend
Framework/CakePHP
• etc
20/21
UPB Technologies Web : Intro/Rappel
Conclusion • JavaScript :
Support cours • https://openclassrooms.com/fr/courses/6175841-apprenez-a-
programmer-avec-javascript
• https://www.pierre-giraud.com/javascript-apprendre-coder-
cours/introduction/
• PHP/MySQL:
• https://openclassrooms.com/fr/courses/918836-concevez-votre-site-
web-avec-php-et-mysql
• https://www.pierre-giraud.com/php-mysql-apprendre-coder-
cours/introduction/
• Bootstrap :
• https://openclassrooms.com/fr/courses/7542506-creez-des-sites-web-
responsives-avec-bootstrap-5
• https://www.pierre-giraud.com/bootstrap-apprendre-cours/introduction/
• Framework PHP: Laravel
• https://laravel.sillo.org/laravel-8/
• https://laravel.com/docs/8.x 21/21
