Formation web

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

Voici un exemple

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é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.

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.

HTML
Structure 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.
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 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…

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.

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…).

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" />
<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 .

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.

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 !

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 .

Formation web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (15)

Similaire à Formation web

Similaire à Formation web (20)

Formation web