formation web
TRANSCRIPT
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 :
HTMLCSS
FONCTIONNEMENT DES SITES WEB
Pour visiter un site web, on a besoin d’un navigateur .
Navigateurs les plus utilisés
FONCTIONNEMENT DES SITES WEBVoici un exemple
FONCTIONNEMENT DES SITES WEB
Requête
Réponse
SERVEUR WEB
HTML
DéfinitionLe 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.
HTMLQu'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.
HTMLStructure minimale d’une page HTML 5
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> <body> </body> </html>
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 !
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.).
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).
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.
HTML
Autres balisesIl 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 grasEtc…
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.
CSSDéfinitionCe 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…).
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 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.
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
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 .
J’ai besoin de quoi pour créer mon site
Editeur de texteIl existe effectivement de nombreux logiciels dédiés à la création de sites web.Sous LinuxLes é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.
J’ai besoin de quoi pour créer mon site
Navigateur webLe 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 !
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
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 .