FORMATION WEB 
COMMENT FAIT – 
ON POUR CRÉER 
DES SITES WEB ? 
Par Stéphane BIOKOU
BUT : Faire comprendre aux « non 
initiés » comment fonctionnent les 
sites web . 
Notions : 
HTML 
CSS
FONCTIONNEMENT DES SITES WEB 
Pour visiter un site web, on a besoin d’un 
navigateur . 
Navigateurs les plus utilisés
FONCTIONNEMENT DES SITES WEB 
Voici un exemple
FONCTIONNEMENT DES SITES WEB 
Requête 
Réponse 
SERVEUR 
WEB
HTML 
Définition 
Le HTML (HyperText Markup Language),apparition 
dès 1991 lors du lancement du Web, est un 
format de pré...
HTML 
Qu'est-ce qu'une balise HTML ? 
Une balise HTML est un élément que l'on va ajouter 
au texte de départ pour dire au ...
HTML 
Structure minimale d’une page HTML 5 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Titre</title...
HTML 
<!DOCTYPE html> 
La toute première ligne s'appelle le doctype. Elle est 
indispensable car c'est elle qui indique qu...
HTML 
<head> 
Elle donne quelques informations générales sur la page comme 
son titre, l'encodage (pour la gestion des car...
HTML 
<title> 
C'est le titre de votre page. Toute page doit avoir un titre qui 
décrit ce qu'elle contient. 
Le titre ne ...
HTML 
<body> 
La partie principale de la page. Tout ce que nous écrirons ici sera 
affiché à l'écran. C'est à l'intérieur ...
HTML 
Autres balises 
Il existe des d’autres balises qu’on insère à 
l’intérieur de la balise <body> pour construire 
la p...
HTML 
Le langage HTML permet de présenter le fond 
de la page. Son rôle est de gérer et organiser 
le contenu. C'est donc ...
CSS 
Définition 
Ce langage est venu compléter le HTML en 1996. 
(Cascading Style Sheets, aussi appelées Feuilles 
de styl...
CSS 
HTML (sans CSS) HTML + CSS
CSS 
CSS ? C'est lui qui vous permet de : 
 choisir la couleur de votre texte 
 sélectionner la police utilisée sur votr...
CSS 
<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="style.css" /> 
<meta charset="utf-8" /> 
<title>Titre</...
J’ai besoin de quoi pour créer mon site 
Editeur de texte : pour enregistrer mes codes HTML et 
CSS . 
Navigateur web : po...
J’ai besoin de quoi pour créer mon site 
Editeur de texte 
Il existe effectivement de nombreux logiciels dédiés à la créat...
J’ai besoin de quoi pour créer mon site 
Navigateur web 
Le navigateur est le programme qui nous permet de voir les sites ...
Références 
Apprenez à créer votre site web avec html5 et css3 
Par Mathieu Nebra http://www.openclassroom.fr 
http://www....
Conclusion 
Voilà notre formation se termine ici, 
en espérant qu’elle vous a aidé à 
comprendre comment fonctionnent 
les...
Prochain SlideShare
Chargement dans…5
×

Formation web

368 vues

Publié le

COMMENT FAIT–ON POUR CRÉER DES SITES WEB ?

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
368
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Formation web

  1. 1. FORMATION WEB COMMENT FAIT – ON POUR CRÉER DES SITES WEB ? Par Stéphane BIOKOU
  2. 2. BUT : Faire comprendre aux « non initiés » comment fonctionnent les sites web . Notions : HTML CSS
  3. 3. FONCTIONNEMENT DES SITES WEB Pour visiter un site web, on a besoin d’un navigateur . Navigateurs les plus utilisés
  4. 4. FONCTIONNEMENT DES SITES WEB Voici un exemple
  5. 5. FONCTIONNEMENT DES SITES WEB Requête Réponse SERVEUR WEB
  6. 6. HTML Définition Le HTML (HyperText Markup Language),apparition dès 1991 lors du lancement du Web, est un format de présentation de données permettant de créer des pages web pouvant être lues dans des navigateurs. Il est figé c'est-à-dire qu'une fois le document chargé dans le navigateur. Ce langage est pourvu d'un système de balisage qui va permettre de structurer notre document.
  7. 7. HTML Qu'est-ce qu'une balise HTML ? Une balise HTML est un élément que l'on va ajouter au texte de départ pour dire au navigateur de quelle manière l'afficher. Elle n'est pas affichée telle quelle dans le navigateur, elle est interprétée par celui-ci. Elle est toujours délimitée par les signes <et>. <balise attribut="valeur"> Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires.
  8. 8. HTML Structure minimale d’une page HTML 5 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> <body> </body> </html>
  9. 9. HTML <!DOCTYPE html> La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML. <html> C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante </html> se trouve tout à la fin du code !
  10. 10. HTML <head> Elle donne quelques informations générales sur la page comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. <meta charset="utf-8" /> Elle indique la façon dont le fichier est enregistré. C'est elle qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).
  11. 11. HTML <title> C'est le titre de votre page. Toute page doit avoir un titre qui décrit ce qu'elle contient. Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur).
  12. 12. HTML <body> La partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code.
  13. 13. HTML Autres balises Il existe des d’autres balises qu’on insère à l’intérieur de la balise <body> pour construire la page web. <p> pour les paragraphes <img> pour afficher une image <b> pour afficher des textes en gras Etc…
  14. 14. HTML Le langage HTML permet de présenter le fond de la page. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Cependant un autre langage permet de présenter la forme de la page.
  15. 15. CSS Définition Ce langage est venu compléter le HTML en 1996. (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…).
  16. 16. CSS HTML (sans CSS) HTML + CSS
  17. 17. CSS CSS ? C'est lui qui vous permet de :  choisir la couleur de votre texte  sélectionner la police utilisée sur votre site  définir la taille du texte, les bordures, le fond  faire la mise en page de votre site. Vous pourrez dire : je veux que mon menu soit à gauche et occupe telle largeur, que l'en-tête de mon site soit calé en haut et qu'il soit toujours visible, etc.
  18. 18. CSS <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> <meta charset="utf-8" /> <title>Titre</title> </head> <body> </body> </html> La ligne en rouge : relier le code CSS au code HTML
  19. 19. J’ai besoin de quoi pour créer mon site Editeur de texte : pour enregistrer mes codes HTML et CSS . Navigateur web : pour afficher et effectuer des tests pour aboutir à une bonne présentation de ma page .
  20. 20. J’ai besoin de quoi pour créer mon site Editeur de texte Il existe effectivement de nombreux logiciels dédiés à la création de sites web. Sous Linux Les éditeurs de texte sont légion sous Linux. Certains d'entre eux sont installés par défaut, d'autres peuvent être téléchargés facilement via le centre de téléchargement (sous Ubuntu notamment) ou au moyen de commandes comme apt-get et aptitude. Voici quelques logiciels que vous pouvez tester :  gEdit ;  Kate ;  vim ;  Emacs ;  jEdit.
  21. 21. J’ai besoin de quoi pour créer mon site Navigateur web Le navigateur est le programme qui nous permet de voir les sites web. Comme je vous l'ai expliqué plus tôt, le travail du navigateur est de lire le code HTML et CSS pour afficher un résultat visuel à l'écran. Si votre code CSS dit « Les titres sont en rouge », alors le navigateur affichera les titres en rouge. Le rôle du navigateur est donc essentiel !
  22. 22. Références Apprenez à créer votre site web avec html5 et css3 Par Mathieu Nebra http://www.openclassroom.fr http://www.w3.org/Style/Examples/011/firstcss.fr.html http://fr.wikipedia.org/wiki/Hypertext_Markup_Language http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade
  23. 23. Conclusion Voilà notre formation se termine ici, en espérant qu’elle vous a aidé à comprendre comment fonctionnent les sites web et aussi les notions HTML et CSS .

×