Le Web a été inventé par Tim Berners-Lee au début des années
1990.
Pour créer des sites web, on utilise deux langages informatiques :
o HTML : permet d'écrire et organiser le contenu de la page
(paragraphes, titres…) ;
o CSS : permet de mettre en forme la page (couleur, taille…).
Il y a eu plusieurs versions des langages HTML et CSS. Les
dernières versions sont HTML5 et CSS3.
Le navigateur web est un programme qui permet d'afficher des sites
web. Il lit les langages HTML et CSS pour savoir ce qu'il doit
afficher.
Il existe de nombreux navigateurs web différents : Google Chrome,
Mozilla Firefox, Internet Explorer, Safari, Opera… Chacun affiche un
site web de manière légèrement différente des autres navigateurs.
Dans ce cours, nous allons apprendre à utiliser les langages HTML
et CSS. Nous travaillerons dans un programme appelé « éditeur de
texte » (Sublime Text, Notepad++, jEdit, vim…).
On utilise l'éditeur de texte (Sublime Text, Notepad++, jEdit, vim…)
pour créer un fichier ayant l'[Link](par exemple :[Link]).
Ce sera notre page web.
Ce fichier peut être ouvert dans le navigateur web simplement en
faisant un double-clic dessus.
À l'intérieur du fichier, nous écrirons le contenu de notre page,
accompagné de balises HTML.
Les balises peuvent avoir plusieurs formes :
o <balise> </balise>: elles s'ouvrent et se ferment pour
délimiter le contenu (début et fin d'un titre, par exemple).
o <balise />: balises orphelines (on ne les insère qu'en un seul
exemplaire), elles permettent d'insérer un élément à un
endroit précis (par exemple une image).
Les balises sont parfois accompagnées d'attributs pour donner des
indications supplémentaires (exemple :<image nom="[Link]" />).
Une page web est constituée de deux sections principales : un en-
tête (<head>) et un corps (<body>).
On peut afficher le code source de n'importe quelle page web en
faisant un clic droit puis en
sélectionnantAfficher le code source de la page.
Le HTML comporte de nombreuses balises qui nous permettent
d'organiser le texte de notre page. Ces balises donnent des
indications comme « Ceci est un paragraphe », « Ceci est un titre »,
etc.
Les paragraphes sont définis par la balise<p> </p>et les sauts de
ligne par la balise<br />.
Il existe six niveaux de titre, de<h1> </h1>à<h6> </h6>, à utiliser
selon l'importance du titre.
On peut mettre en valeur certains mots avec les
balises<strong>,<em>et<mark>.
Pour créer des listes, on doit utiliser la balise<ul>(liste à puces, non
ordonnée) ou<ol>(liste ordonnée). À l'intérieur, on insère les
éléments avec une balise<li>pour chaque item.