Téléchargé 44 fois
Téléchargé parStéphane BIOKOU
Formation web
Ce document présente une formation pour les non-initiés sur la création de sites web, couvrant les notions de base du HTML et du CSS. Il explique comment structurer une page web avec HTML et comment utiliser CSS pour gérer l'apparence de la page. En outre, il recommande des éditeurs de texte et souligne l'importance du navigateur pour visualiser le contenu des sites web.
Formation web
- 1. FORMATION WEB COMMENTFAIT – ON POUR CRÉER DES SITES WEB ? Par Stéphane BIOKOU
- 2. BUT : Fairecomprendre aux « non initiés » comment fonctionnent les sites web . Notions : HTML CSS
- 3. FONCTIONNEMENT DES SITESWEB Pour visiter un site web, on a besoin d’un navigateur . Navigateurs les plus utilisés
- 4. FONCTIONNEMENT DES SITESWEB Voici un exemple
- 5. FONCTIONNEMENT DES SITESWEB Requête Réponse SERVEUR WEB
- 6. HTML Définition LeHTML (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. HTML Qu'est-ce qu'unebalise 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. HTML Structure minimaled’une page HTML 5 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> <body> </body> </html>
- 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. HTML <head> Elledonne 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. HTML <title> C'estle 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. HTML <body> Lapartie 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. 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. HTML Le langageHTML 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. CSS Définition Celangage 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. CSS HTML (sansCSS) HTML + CSS
- 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. 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. J’ai besoin dequoi 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. J’ai besoin dequoi 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. J’ai besoin dequoi 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. 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. Conclusion Voilà notreformation se termine ici, en espérant qu’elle vous a aidé à comprendre comment fonctionnent les sites web et aussi les notions HTML et CSS .