Formation web

849 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
849
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
12
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 .

×