Developpement Web.pptx

Apprenez à créer votre site web avec
HTML et CSS

Objectifs pédagogiques
A la fin de cette formation, vous serez capable de:
• Utiliser du code HTML
• Structurer une page web en HTML
• Utiliser du code CSS
• Mettre en forme une page web en CSS
• Organiser les éléments d’une page grâce au CSS
• Modifier l’agencement d’une page HTML avec CSS
• Intégrer des formulaires dans une page
Durée de la formation: 30 heures

Table des matières
Introduction
I. Découvrez les bases de HTML
II. Mettez en forme vos pages avec CSS
III.Mettez en page votre site
IV. Découvrez des fonctionnalités évoluées
Conclusion

Introduction
1. Comment fonctionnent les sites web ?
Pour consultez des sites web, on lance un programme appelé le
navigateur web. Les langages HTML et CSS sont à la base du
fonctionnement de tous les sites web. Quand vous consultez un site
avec votre navigateur, il faut savoir que, en coulisses, des rouages
s’activent pour permettre au site web de s’afficher. L’ordinateur se
base sur ce qu’on lui a expliqué en HTML et CSS pour savoir ce qu’il
doit afficher, comme le montre la figure suivante.

Introduction
2. Deux langages pour créer un site web ?
– HTML (HyperText Markup Language): Son rôle est de gérer le
contenu. C’est donc en HTML que vous écrivez que vous écrirez ce
qui doit être affiché sur la page: du texte, des liens, des images.
Apparu dès 1991.
– CSS (Cascading Style Sheets, feuille de style en français): Le
rôle de CSS est de gérer l’apparence de la page web (décoration,
couleurs, taille de texte…). Ce langage est venu compléter le
HTML en 1996.

Introduction
3. L’éditeur de texte: Il existe de nombreux logiciels dédiés à la
création de sites web. On peut classer ces logiciels en deux catégories:
• Les WYSIWYG: Ils permettent de créer des sites web sans
apprendre de langage particulier. Ex: Mozilia Composer, Microsoft
Expression Web, etc… .Défaut: Qualité mauvaise du code.
• Les éditeurs de texte: Ce sont des programmes dédiés à l’écriture
du code. On supporte plusieurs langages autres que le HTML et CSS.
Exemples d’éditeurs: VsCode, Sublime Text, etc…

Introduction
4. Les navigateurs: Il est conseillé d’installer plusieurs navigateurs
sur son ordinateur pour s’assurer que son site fonctionne
correctement sur chacun d’eux.
Chrome Safari Edge FireFox

I. Découvrez les bases du HTML

A. Créez votre première page web en HTML
 Ouvrez votre éditeur de texte
 Ecriez une, deux phrases
 Enregistrez avec le fichier avec l’extension .html
 Ouvrez le fichier… votre navigateur s’ouvre et
affiche le texte que vous avez écrit.
NB: il est recommandé de créer un nouveau dossier sur
votre bureau, qui contiendra les fichiers de votre site.

1) Les balises et leurs attributs
a. Les balises: Les balises permettent à l’ordinateur de
comprendre ce qu’il doit afficher. Ecriture: <balise>.
On distingue deux types de balises:
• Les balises en paires: <titre>Ceci est un titre</titre>
• Les balises orphelines: <image />.

1) Les balises et leurs attributs
b. Les attributs: Ils viennent compléter les balises pour
donner des informations supplémentaires. Il se place
après le nom de la balise ouvrante et à le plus souvent une
valeur.
<balise attribut= ‘’valeur’’>

2) Structure de base d’une page HTML:

 Le doctype: Il indique qu’il s’agit bien d’une page web HTML
 La balise <html></html>: C’est la balise principale du code.
Elle englobe tout le contenu de la page.
 L’entête <head>: Cette section donne des informations
générales sur la page(titre,encodage). Ces informations ne
sont pas affichées sur la page, elles sont à destinations de
l’ordinateur.

 le corps <body>: C’est là que se trouve la partie principale de
la page. Tout ce nous écrirons ici sera affiché sur l’écran.
3) Les commentaires: Un commentaire est un texte qui sert à
simplement de mémo. Il n’est pas affiché, il n’est pas lu par
l’ordinateur.

B. Organisez votre texte
1. Les paragraphes: <p>Voici un paragraphe</p>
• Sauter une ligne: <br />
2. Les titres: <h1></h1> jusqu’à <h6></h6>
3. La mise en valeur: <em> </em> <strong> </strong> <mark> </mark>
4. Les listes:
– Non ordonnée:
<ul>
<li>Element1</li>
<li>Element2</li>
</ul>

4. Les listes:
– Ordonnée:
<ol>
<li>Element1</li>
<li>Element2</li>
</ol>

4. Les listes:
Il existe un troisième type de liste: la liste de définitions.
<dl>
<dt>Terme1</dt><dd>DefinitionTerme1</dd>
<dt>Terme2</dt><DefinitionTerme2</dd>
</dl>

C. Pratiquez !!!!
1. Ajoutez un titre de niveau 1
2. Ajoutez un paragraphe indiquant ‘’Voici mes prénoms
préférés.
3. Ajoutez une liste ordonnée d’au moins trois de vos
prénoms préférés.
4. Mettez en valeur(emphase forte) le premier animal de
la liste.

D. Créer des liens
1. Un lien vers un autre site:
<a href= ‘’adresseDuSite’’>NomDuSite</a>
2. Un lien vers une autre page de son site:

D. Créer des liens
3. Un lien vers un ancre: Une ancre est une sorte de point de
répère que vous pouvez mettre dans vos pages HTML lorsqu’elles
sont très longues.
Procédure:
1. <h2 id= ‘’mon_ancre’’>Titre</h2>
2. <a href=‘’#mon_ancre’’>Aller à l’ancre</a>

D. Créer des liens
4. Un lien pour envoyer un e-mail
<a href=‘’mailto:adresseMail’’>Envoyez un mail</a>
5. Un lien pour télécharger un fichier
<a href=‘’monFichier.zip’’>Télécharger le fichier</a>

E. Insérez des images:
1. Insérer une image:
<img scr=‘’SourceImage’’ alt=‘’descriptionImage’’ />
– Miniature Cliquable:
<a href=‘’Image’’><img scr=‘’ImageMiniature’’ /></a>
2. Les figures:
<figure>
<img src=‘’ SourceImage’’ alt=‘’Nom’’ />
<figcaption>Le logiciel bloc-notes </figcaption>
</figure>

D. Exercez vous !!!
• Créez un page HTML
• Ajoutez votre nom et votre prénom en titre principal
• Ajoutez une photo
• Ajoutez 3 sections avec un titre secondaire(mon expérience, mes
compétences, ma formation) en h2. Chaque section contient un
paragraphe ou liste à puce

II. Mettez en forme vos pages
avec CSS

A. Mettez en place le CSS
1. Ou écrit-on le CSS ?
– Dans un fichier .css(recommandé):
• On ajoute dans l’entête du fichier HTML la ligne suivante:
<link rel="stylesheet" type="text/css" href="style.css"/>
• On crée un fichier vide avec l’extension .css
– Dans l’entête <head> du fichier HTML;
– Directement dans les balises(non recommandé)

1. Ou écrit-on le CSS ?

2. Appliquez un style: Sélectionner une balise
p {
color: blue;
}
• Noms de balises: On écrit le nom de la balise dont on veut
modifier l’apparence
• Des propriétés CSS: color, font-size, etc…
• Les valeurs: Pour chaque propriété on indique une valeur

3. Appliquez un style: class et id:
• Les balises universelles:
<span></span>(balise de type inline);
<div></div>(balise de type block)
4. Appliquez un style: les selecteurs avancés

B. Formatez du texte
1. La taille: Pour modifier la taille du texte, on utilise la
propriété CSS font-size. On distingue deux techniques:
a. Une taille absolue(pixels, cm, mm): font-size: valeurpx;
b. Une valeur relative(xx-small;x-small;medium;xx-large);
c. Taille en ‘’em’’: 1em(normale)
2. La police: La propriété CSS qui permet d’indiquer la police à
utliser est font-family: font-family: police;

utiliser est font-family: font-family: police;
Liste de quelques polices courantes:
• Arial;
• Arial black;
• Times New Roman;
• Verdana;
• Georgia;

utiliser est font-family: font-family: police;
Utilisez une police personnalisée avec @font-face:
Télécharger une police sur fontsquirrel.com ou dafont.com
@font-face {
font-family: ‘MaSuperPolice’;
Scr:url(‘MaSuperPolice.eot’);
}

3. Italique, gras, souligné
• Mettre en italique: font-style: italic(oblique, normal).
• Mettre en gras: font-weight: bold(normal)
• Soulignement et autres: text-decoration:underline(none);
4. L’alignement: text-align: left(center,right,justify).
5. Les flottants: float: left(right)
NB: Pour annuler le flottant, on utilise float: both;

C. Ajoutez de la couleur et du fond
1. Couleur e fond:
• Indiquer le nom de la couleur: color: NomDeLaCouleur;
• La notation hexadecimale: color: #RRVVBB;
• La méthode RGB: color: rgb(NbR, NbV, NbB);
2. Couleur de fond: background-color: Couleur;
Le CSS et l’héritage: Les balises qui se trouvent à l’interieur d’une
autre balise ’’héritent’’ de ses propriétés.

C. Ajoutez de la couleur et du fond
3. Images de fond
• Appliquer une image de fond:
background-image:url(‘’nomDeLimage’’);
Quelques options: background-
attachement(fixed,scroll);background-repeat(no-repeat,repeat-
x(y),repeat, background-position(top,bottom,left,center,right).
4. La transparence: opacity: Valeur(entre 0 et 1)

D. Créez des bordures et des ombres
1. Bordures standards: border: largeurEnPx, couleur, type;

D. Créez des bordures et des ombres
2. Bordures Arrondies: border-radius: valeur_en_px;
3. Les ombres:
• Ombres de boîtes: box-shadow: valeur_en_px;
• L’ombre du texte: text-shadow: valeur_en_px;
Val1: décalage horizontal;
Val2: décalage vertical;
Val3: adoucissement;
Val4: couleur de l’ombre.

E. Créez des apparences dynamiques
1. Au survol:
a:hover {
Propriétés;
}
2. Au clic et lors de la sélection:
• Au moment du clic/lorsque l’élément est sélectionné:
a:active/focus {
Propriétés;
}

E. Créez des apparences dynamiques
3. Lorsque le lien a déjà été consulté
a:visited {
Propriétés;
}

Pratiquez !

Mettez en forme la page précédente en :
• Affichez le titre h1 en rouge
• Agrandissez le titre h1 pour lui donner une taille de 3em
• Centrer la figure et sa description
• Ajoutez une bordure continue de la taille et de la couleur de
votre choix autour de la liste à puces
• Affichez les liens en gras lorsqu’on les survole.

III. Mettez en page votre site

A. Les balises structurantes de HTML
• L’entête: <header></header>
• Le pied de page: <footer></footer>
• Principaux liens de navigation: <nav></nav>
• Une section: <section></section>
• Informations complémentaires: <aside></aside>
• Un article indépendant: <article></article>

A. Les balises structurantes de HTML

B. Les modèles de boîtes
1. Les balises de type block et inline
• Block: Une balise de ce type crée un retour à la ligne avant
et après. Ex: <h1></h1> <p></p>
• Inline: Elle se trouve forcement à l’interieur d’une balise
de type block. Elle ne crée pas de retour à la ligne. Ex: <a>
Les balises universelles:
<span></span>: inline
<div></div>: block

2. Les dimensions
• Widht: C’est la largeur du bloc. A exprimer en pixels (px)
ou en pourcentage (%)
• Height: C’est la hauteur du block. Dans les mêmes unités
que widht.
Minimum et maximum
• Min-width/height: largeur/hauteur minimale
• Max-width/height: largeur/hauteur maximale

3. Les marges
• Padding: indique la taille de la
marge intérieure. En pixels
• Margin: indique la taille de la
marge extérieur. En pixels le plus souvent
NB: On peut ajouter des marges aux quatres
Côtés du bloc(top, bottom, left, right)

3. Les marges
• Centrer des blocs
 Donner une largeur au bloc(avec widht);
 Donner des marges extérieures automatiques(margin:auto)
• Quand ça dépasse
 Couper un bloc: overflow (visible, hidden, scroll, auto)
 Couper les textes trop larges: word-wrap(break-word)

C. Mise en page avec flexbox
1. Notion de conteneur
Le conteneur est une balise HTML, et les éléments sont d’autres balises
HTML à l’interieur:
• flex: display: flex;
• La direction: flex-direction:(row,
colum, row-reverse,column-reverse)
• Le retour à la ligne:
flex-wrap(nowrap, wrap, wrap-reverse)

Pratique !!!

D. Autres techniques
• Le positionnement flottant
• Avec display
• Le positionnement inline-block
• Le positionnement absolu,fixe et relatif

1. Notion de conteneur
Le conteneur est une balise HTML, et les éléments sont d’autres balises
HTML à l’interieur:
• Alignement:
– Sur l’axe principal: justify-content:(flex-start,flex-
end,center,space-between,space-around).
– Sur l’axe secondaire: align-items: (stretch, flex-start, flex-end,
center, baseline

Titre
Produit A
• Article 1
• Article 2
• Article 3
• Article 1
• Article 2
• Article 3
Produit B

Developpement Web.pptx

Contenu connexe

Tendances (20)

Similaire à Developpement Web.pptx (20)

Plus de IbrahimaBarry49 (6)

Dernier (20)

Developpement Web.pptx