Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Le front-end et back-end
Front-end Back-end
C’est la partie visible de notre C’est la partie invisible a
site web. l’utilisateur. Mais donne vie au
Dans le jargon de la site web
programmation on parle
aussi de U.I
HTML Serveur
CSS Application
JavaScript Base de données
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Langage de base
framework et CMS
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Fonctionnement d’un site
web
Cascading Style Sheets
HyperText Markup
ou feuilles de style en
Language
cascade
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Création de notre
première page
Création de notre première page web
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
La notion de balises et
leurs attributs
HTML est un langage de Les balises paires
balisage
<balise> <title>Titre </title>
Les balises orphelines Les attributs d’une balise
<img />
<img src=" ../Images/[Link]" />
Les commentaires: <!-- commentaire --!>
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Le code minimal d’une
page HTML
Voyons cela avec notre éditeur
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Organiser du texte
La balise <p> La balise <h1> <h2> <h2>
Balise pour créer un <h3> <h4> <h5> <h6>
paragraphe Balise utilisée pour afficher le
titre de la page
La balise <em> ou <i> La balise <strong> ou <b>
Balise pour mettre un texte Balise pour mettre un texte
en italique en gras
La balise <mark>
Balise pour mettre un texte
surligné
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Organiser du texte
Les listes
La liste non ordonnée La liste ordonnée
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Les liens
Les liens ont façonné le web
La balise <a href "[Link]">la page2 </a>
La balise <a href "[Link]" title=infobulle>la page2 </a>
La balise <a href "[Link]" target="_blank">la page2 </a>
La balise <a href "[Link] d’un mail </a>
La balise <a href "fichier_a_telecharger.zip">telecharger moi </a>
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Les liens sur la même
page
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Les images
Création d’image
Les formats
d’images:
jpg ou jpeg
png gif
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Ou placer le CSS
On a trois techniques différentes pour utiliser le css
Utiliser une balise link et faire un lien avec le fichier CSS externe
Mettre le css dans le head dans une balise style
Mettre le css dans une balise
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
CSS externe
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
CSS externe
Les commentaires:
/*commentaire*/
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Class et Id
Comment appliquer un style a un seul paragraphe
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Span et div
Span et div sont des balises spéciales
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Formatage du texte
La taille de la police du texte front-size en px, en em ou small medium etc
La police du texte front-family en Impact, Arial, verdana, sans-serif etc
Mettre le texte en italique avec font-style: italic
Mettre le texte en gras avec font-weight: bold
Mettre le texte souligné au dessus en dessous ou barré avec text-
decoration: underligne, overligne et ligne-through
Aligner le texte avec text-align: left, center, right et justify
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Les flottants
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
La couleur et le font
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Les bordure et les
ombres
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Apparence dynamique
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Structuration de la page
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Model des blocks
width: Manipuler la largeur
min-width: pour la largeur minimale
max-width: pour la largeur maximale
height: Manipuler la hauteur
min-height : pour la hauteur minimale
max-height : pour la hauteur maximale
On deux types de marge: intérieure et extérieure
Intérieure : padding / extérieure: margin
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Model des blocks
Overflow: visible/hidden/scroll/auto
Word-wrap: break-word: Si un url est
trop long permet de forcer le
navigateur d’aller a la ligne
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Flexbox
Alignement sur le horizontale:
display: fex;
flex-direction: column; (column-reverse ou row-reverse
Flex-wrap: wrap
justify-content: flex-end (centre, space-between, space-arround)
Alignement sur le horizontale:
align-items: strech, flex-start, flex-end, flex-center, baseline;
Centrer l’element au sein de son conteneur: margin:auto
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Flexbox
Sur plusieurs lignes:
align-content: strecht, flex-start, flex-end, flex-center, space-between,
space-around;
L’ordre des elements: order: la position
La taille de l’element: flex: valeur
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Les tableaux
Pour un tableau complet on aura des balises telles que:
- thead
- tbody
- tfooter
Fusion de deux colonnes: colspan= ’’le nombre de colonne’’
Fusion de deux lignes: rowspan= ’’le nombre ligne’’
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Formulaire
On utilise la balise form avec obligatoirement deux attributs
- method (GET/POST)
- action : redirection vers une page
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Formulaire
Les valeurs des attributs de la balise d’input
- password, date, email, url, number, radio, checkbox
Liste d’ élément d’une liste déroulante a sélectionner:
<select> </select>
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Formulaire
D’autres attributs:
autocomplete = on/off
autofocus=autofocus
min et max
Placeholder=‘mohamed’
Checked=‘checked’/ selected=‘selected’
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Audios et Vidéos
On utilise la balise audio avec la source de l’audio
L’attribut controls obligatoire sans valeur
Les attributs facultatifs:
- autoplay: lecture automatique
- Loop: repetition en boucle
- Widthla larfgeur de la bande passante
- Preload:sauvegarde la bande passante
- Prend les valeurs metadata,auto et none
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Audios et Vidéos
On utilise la balise vidéo avec la source de l’audio
L’attribut controls obligatoire sans valeur et poster qui prend une image
qui s’affiche avant la lecture de la vidéos
Les attributs facultatifs:
- autoplay: lecture automatique
- Loop: repetition en boucle
- Widthla larfgeur de la bande passante
- Preload:sauvegarde la bande passante
- Prend les valeurs metadata,auto et none
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Exercices
EXERCICE1 : Donner la signification des balises suivantes
1-<h2> 2-<html> 3-<body>
4--<pre> 5 -<ul> 6- <ol>
7--<li> 8-<p> 9- <hr>
10-<br> 11-<center> 12- <table>
13--<span>14-<div> 15- <th>
16--<td> 17 -<tr> 18- <form>
19--<title> 20 -<fieldset> 21-<legend>
22 -<style> 23-<img> 24-<link> 25-<meta>
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Exercices
Exercice2 : Questions de cours
1-Définir les termes suivants
Serveur -Client -Site web, Site statique- Site dynamique-navigateur-
editeur,front-end, back-end, html-css,cms,framework
2-Quelle est la différence entre web et internet ?
3- HTML et CSS ont deux rôles différents. Lesquels ?
4- Dans une page HTML, l’élément html contient généralement
deux éléments fils. Quels-sont-ils, et à quoi servent-ils ?
5-donnez l'architecture générale d'un fichier html
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Exercices
Exercice3 : Réaliser le tableau ci-dessous
Liste des étudiants en développement web
PRENOM NOM ADRESSE • TELEPHONE AGE
MAREME NDIAYE PIKINE 774714581 25
ASSANE DIATTA POINT E 765211844 35
MOUSSA DIOP DIEUPPEUL 785790926 40
SALIMATA FAYE SAINT LOUIS 774271948 54
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Exercices
Exercice4 : formulaire -tableau
Créer un formulaire HTML5 avec les éléments suivants :
-Un fieldset avec legend "coordonnées"
-Champ de texte avec l’attribut placeholder
-Champ pour renseigner une URL
-Zone de texte pour renseigner une adresse “textarea”
-Champ pour renseigner une adresse email
-Champ réclamant un format numérique
-Champ de date avec ouverture d’un calendrier
-Champ de couleur en code hexadécimal
-Champ de téléchargement d’un fichier
-Un bouton qui sert à envoyer votre formulaire
Devant chaque champs mettez un texte de renseignement (“label”)
Pour aligner tous les éléments du formulaire. Utilisez un tableau HTML.
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Exercices
Exercice5 : formulaire
Écrire une page HTML5 avec titre Création des formulaires
Cette page contient un formulaire avec les contraintes suivantes :
Utilisation de la méthode Get
Le nom de la page cible est défini grâce à l’attribut action.
présente une zone de saisie pour un identifiant (input de type text qui aura automatiquement
le focus dès l’ouverture de la page),
présente une zone de saisie pour un mot de passe.
présente un champ caché nommé operations .
présente un champ numéro de téléphone qui commence obligatoirement avec le chiffre 9 et
n’accepte les chiffre de zéro à 9 pour le faire consulter Saisie de numéro de téléphone en
HTML.
présente un bouton pour télécharger les fichiers,
présente un bouton d’envoi.
.
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Exercices
Exercice6 : Á laide des balises html
suivants:fieldset,date,select,radio,select,textarea,url,legend,label,mail,text,submit,optgroup
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
Exercices
Exercice7 :projets
1-Réaliser un site web pour un institut académique afin d'assurer une
meilleure visibilité de ce dernier.
2-Realiser une plateforme e-learning pour la promotion de
l'apprentissage à distance des professionnels
3-Realiser un site e-commerce exposant les produits d'un commerçant
sans magasin
HTML CSS
Concept général du Les bases de La mise en forme Mis en page d’un Fonctionnalités
web HTML avec CSS site web avancées
fin
Merci de votre attention
@+
HTML CSS