Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx

Formateur
COULIBALY Kadodjomon
Emmanuel
• Graphiste designer junior
• Developpeur web junior
Superviseur
COULIBALY Sie Allassane

Page 2
SOMMAIRE
I.Quelques Définitions
1.Qu’est-ce que le web
2.Le navigateur
3.Internet
II.Le HTML
1.Définition
2.La structure de base du
HTML
3.Comment créer des
éléments HTML
4.Quelques balises html
5.Comment utiliser les
attributs
6.Les liens
7.Les images
8.Les formulaires
III.LE CSS
1. Définition
2. Comment appliquer des
règles CSS
3. Comment utiliser les
sélecteurs
4. Quelques propriété css
CONCLUSION
Introductio
n

INTRODUCTION
Dans un monde de plus en plus
connecté, le développement web
joue un rôle crucial en
permettant la création de sites
internet et d’applications en
ligne qui façonnent notre
expérience en ligne. Au cours de
ce programme, nous allons
explorer les fondamentaux du
développement web, des langages
de programmation essentiels comme
HTML et CSS. Que vous soyez
novice en programmation ou que
vous ayez déjà une expérience, ce
cours vous fournira les
connaissances et les compétences
nécessaires pour prendre en main
le monde du developpement web.
Préparez-vous à plonger dans le
monde passionnant du
développement web et à acquérir
les compétences qui façonneront
le paysage numérique de demain.
Page 4 Page 5

Page 7
I.Quelques
Définitions
2.Le
navigateur
Le web, abréviation de “World Wide
Web”, est un système d’information en
ligne qui permet aux utilisateurs
d’accéder à des documents et des
ressources liées par des hyperliens.
Cela inclut des pages web, des
images, des vidéos et d’autres types
de contenus multimédias. Le web
fonctionne grâce à Internet, un
réseau mondial de serveurs qui
hébergent ces informations et les
rendent accessibles aux utilisateurs
à travers des navigateurs web tels
que Chrome, Firefox, Safari, etc.
En somme, le web est un moyen de
partager et d’accéder à des
informations, de communiquer, de
collaborer et d’interagir avec du
contenu en ligne à l’échelle
1. Qu’est-ce que le
web
Un navigateur web, également appelé
simplement “navigateur”, est un
logiciel qui permet aux utilisateurs
d’accéder et d’interagir avec les
ressources disponibles sur Internet.
Les navigateurs sont les outils que
vous utilisez pour afficher des pages
web, regarder des vidéos en ligne,
accéder à des sites, remplir des
formulaires, et bien plus encore.
Ils interprètent le code HTML, CSS,
JavaScript et d’autres langages de
programmation utilisés pour créer les
sites web, ce qui permet aux
utilisateurs de visualiser le contenu
sous forme de pages web avec du
texte, des images, des vidéos et des
éléments interactifs. Les navigateurs
les plus couramment utilisés incluent
Google Chrome, Mozilla Firefox,
Microsoft Edge, Safari, et Opera.

Page 9
I.Quelques
Définitions
Internet est un réseau mondial de
communications qui relie des millions
d’ordinateurs, de serveurs et
d’autres dispositifs à travers le
monde. C’est un vaste réseau
interconnecté qui permet le partage
d’informations, la communication et
l’accès à divers services en ligne.
Concrètement, Internet fonctionne en
transférant des données sous forme de
paquets d’informations entre les
différents dispositifs connectés. Ces
données peuvent prendre la forme de
textes, d’images, de vidéos, de
fichiers, etc. Internet permet
également l’accès à des sites web,
des applications en ligne, des
services de messagerie électronique,
de streaming vidéo, de réseaux
3. Internet
En somme, Internet est un réseau
qui révolutionne la façon dont nous
accédons à l’information,
communiquons et interagissons avec
le monde numérique.

Page
11
II.LE HTML 2.LA STRUCTURE DE BASE DU HTML
Le HTML est un language
informatique, il signifie Hypertext
Mackup Language. C’est un language qui
permet de definir la structure d’une
page web.
Si vous voulez construire un site web,
le html vous êtes indispensable.
Malgré l’évolution de la technoligie
avec notamment l’avènement de l’IA le
HTML est toujours utile.
Il vous permet de construire un site à
votre convenance avec une large marge
de manœuvre.
Pour coder en HTML, on utilise ce
qu’on appel balise ou tag(
<html></html>…). Il faut également un
editeur de texte(bloc note, notpad++,
vs code , sublime text, atome…) pour
ecrire le code et un
1.DÉFINITION Dans la vie il faut avoir des
principes à ne pas empieté. Et bien
c’est pareil en developpement web .
Avant de coder avec le HTML, il faut
d’abord connaitre sa structure de
base qui est la suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
NB : ceci est une structure
minimalisé.

<!DOCTYPE html>: Le doctype nous
indique le type d’html utiliser, par
defaut on utilise HTML5. Vu que c’est
la dernière version d’html depuis
2017 (HTML 5.2)
<html> : cette balise englobe toutes
les autres balises et tous les autres
element intervenant dans le codage de
notre site web.
<head> :dans ce elemnent on met
toutes les informations relatives au
referencement d’un notre site ou
page. Ces informations ne
s’afficheront dans notre site mais
elle permettront de referencer notre
site.
<title> et <meta> : sont deux balises
qui donne d’ample informations
<body> : Lui contient tout les
element qui doivent s’afficher sur
notre page web( les articles , le
3. COMMENT CRÉER DES ÉLÉMENTS HTML
Pour créer des élements HTML, il est
interêssant de toujours structurer sa
page. C’est-à-dire qu’on diviser
celle si en plusieurs partie(bloc et
sous-blocs) afin d’etre mieux situé
et de déjà avoir une idée des balises
devant intervenir.
 Diviser la page en block, sur papier
ou logiciel
Page
13

Page
15
 Le code HTML sans la mise en
forme
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<header> Notre entête</header>
<nav>Notre barre de naviguation
avec menu
</nav>
<section>
<article>Article1</article>
<aside>
Information suppléante
</aside>
</section>
<section>
<article>Article1</article>
<aside>
Information suppléante
</aside>
</section>
<footer>
Pied de page
</footer>
</body>
</html>

Page
17
Affichage :
Ici nous avons conçu cette page avec
ce qu’on appel les balise sémantiques
,
elles permettent de structurer le
texte :
nav,
header,
footer,
section,
article, …
structures complexes : table ou
form , ils permettent de
rationaliser le développement du site
(structure, organiser….)
il faut gérer leurs apparences avec
un css

Page 2
II.Le HTML
4.Quelques balises
html
En HTML il existe plusieurs balises
de différents type, notamment les
balises pair(comme <nav></nav>) et
les balises orphelines(comme
<br>,<hr/>…).
Voici pour vous quelques balises
classifiées
 Les balise de structure :
ce sont les balises qui definissent
la structure globale d’une page
web (<html>,<body>,<title>)
 Les balises de section :elles
divisent la page en se »ctions
logiques(<H1>,<p>,<div>,<section>)
 Les balises de texte : ce sont des
balises qui modifie l’apparence du
texte( <strong>,<i>,<a>,<span>)
 Les balises de medias : ces
dernières permettent d’inserer des
elemnts multimedias(video, son,
image…) dans notre page web
(<img><audio><video><Canvas>)
 Les balises de formulaires :elles
permettent de créer des
formulaires interactifs dans la
page
(<form><input><button><select>…)
 Balise de texte
 <I> </I> : peremet de mettre le
texte en italique
 <b> </b> : permet de mettre le
texte en gras
 <u> </u> : permet de souligner le
texte
 <sub> </sub> : permet de mettre le
texte entre les balises en indice
 <sup> </sup> : permet de mettre le

Page 2
II.Le HTML
4.Quelques balises
html
 <mark> </mark> : permet de
surligner le texte
 <s> </s> : permet de barrer le
texte

Page 2
 Balise de section
Les balises de titre
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<H5> </H5>
<h6> </h6>
5. COMMENT UTILISER LES ATTRIBUTS
<h1>Niveau 1</h1>
<h2>Niveau
2</h2>
<h3>Niveau
3</h3>
<h4>Niveau
4</h4>
<H5>Niveau
5</H5>
<h6>Niveau
6</h6>
 <div> </div>
 <p> </p> : pour faire un
paragraphe
Les attributs HTML sont utilisés
pour données plus d’informations à
l’élement html :
L’attribut est dans la balise
htmll
Il est toujours dans la blise
d’ouverture (jamais dans celle de
fermerture)
Un element html peut avoir
plusieurs attributs
L’attribut est composé de son nom
et de la valeur voulu
Exemple:
<p align="left"> L'intelligence
est relative. pensez être
intelligent est de l'orgueil. Un
homme sans orgueil est un animal,
un agneau. </p>

Page 2
NB : il existe plusieurs type
d’attribut, et chaque balise à ses
atttribut à elle.
6. Les liens
Les liens sont hyper importants en
HTML, même qu’ils sont qasi
indispensable dan une page web. Ils
permettent à l’internaut d’acceder à
une page web du site ou une partie de
la page web de manière aisé.
 Pour les liens on utilise la
balise <a ></a>
 Comme attribut on a le
href="Accueil.html"
Le lien conduit à la page d’accueil, mais
cela peut egalemnet être une image, une
video…
 On a les liens interne :
href="Accueil.html"
 et les liens externes :
href="https://www.ArtLearn.com"

Page 2
7. Les images
Pour inserer une image dans une page
web on utilise l’attribut :
 <img src="" alt="" width="20px"
height="10px">
 src="": on met le chemin de l’image
entre les apostrophes
exemple :
src="imges/salam/logo.png"
 alt="" : on met un texte facultatif
entre les apostrophes, il
s’affichera au cas ou on n’arrive
pas à voir notre image.
On peut ajouter :
 width="20px" pour la largeur de
notre image.
 height="10px" pour la hauteur de
notre image
Exemple :
<img src="/images/cuisine.jpg"
alt="" width="1000px" height="auto">

Page 2
8. Les
formulaires
Les formulaires html sont utiles pour :
Collecter des données de l’utilisateur
(nom, prenom, contact…)
Permettre a l’utilisateur de se
connecter.
Pour créer un formulaire en html, on
utilise la balise :
<form > </form>
A l’interieur de celle-ci on retrouve
plusieurs autres balises
<fieldset> </fieldset> : Pour faire
un champ d’element
<input type="text" name="" id=""> :
permet de créer des zonesd’entrée
pour recuperer les données selon la
valeur de l’attribut « type »
Les valeurs de l’attribut type :
 Text ———>pour les zones de
saisie de texte
 Button———>pour les zones de
boutton
 Email———>pour les zones de
saisie de mail
 File———>pour les zones de
selection de fichier(
images,video…)
 Submit———>pour les zones de
validation ou d’envoi de
formulaire
 Date———>pour les zones de date
 Number———>pour les zones de
saisie de nombre
 Month———>pour les zones de
saisie ou de selection de mois
 ….

Page 2
III.LE CSS
1. Définition
3. OU placer le css
2. Comment appliquer des règles
CSS
CSS signifie Cascading Stylesheet.
CSS est un language de feuille de
style, il permet de mettre en forme
le code html. Il permet de designer
votre page web.
Pour appliquer du css, on
utilise des selecteur avec à
l’interieur des propriete et
chaque proprite à une ou
plusieurs valeur(s).
Selecteur
propriete
valeur
Dans un projet de developpement
web , on à la police de faire du
css :
 Directement la balise
d’ouverture avec l’attribut
« style »
<p style="color: blue; font-size:
100px;">
Vivons heureux tant qu'on vit
il y ade l'espoir, l'espoir fait
vivre, mais la mort elle ne perd
jamais espoir.
</p>

Page 2
•Dans l’entête de notre code html, dans la balise « head »
• On peut également mettre notre code css
dans l’entête de notre code html.
 Ou on peut faire un fichier css exte
Il est egalement possible faire le
css dans un autre fichier. Puis
lier le fichier css et html . Cette
pratique est très utiser et elle
est l celle là même qui est
conseilller. Car cela rend votre
code plus fluide,et vous permet
surtout d’utiliser un même fichier
css pour plusieurs page html.
Pour cela :

Page 2
•On créer un fichier externe :
style.css, dans lequel on va
mettre notre code css.
<head>
<link rel="stylesheet"
href="style.css">
</head>
A ce niveau on va utiliser deux
attributs très important ici qui
sont : « id » et « class ». Ce
sont deux attributs qui vont nous
permettent de nommé nos
différentes balises en html afin
d’utilser ses noms en css pour une
meilleur spécificité.
Nb : l’ « id » est beaucoup plus
spécifique, il est unique. Tant dis
que la « class » peut être utilisé
plusieurs fois.
• Pour lier le css et le html on
utilse la balise orpheline « link »
avec ses attributs dont le plus
important « href ».

Page 2
4. Quelques propriété css

CONCLUSION
Retenons que le html est un langage informatique de balisage très important pour un
développeur web( pour le codage d’un site web). Il permet de mettre en place le
squelette de notre site, puis le css nous permet d’embellir ( designer) celui-ci grâce
à ses propriété.
Ici donc prend fin notre cours sur « le developpement web :connaissance ». Il faut
savoir que le contenu de se cours est minimal. Assez de chose vous reste encore à
apprendre pour une maitrîse du développement web. Quoique après ce cours vous devez
être à même de connaître les notions de base du html et du css.
Ceux qui cherchent la perfection sont toujours excellent.

« Apprenez au quotidien ,nul n’est
mort parce qu'il avait trop de
connaissance. » Coulibaly Kadodjomon Emmanuel

Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx

Recommandé

Recommandé

Contenu connexe

Similaire à Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx

Similaire à Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx (20)

Plus de tanokouakouludovic

Plus de tanokouakouludovic (7)

Dernier

Dernier (15)

Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx