Vous êtes sur la page 1sur 10

HTML (partie 1) : la création de sites web

> Internet (international network) est un réseau d’ordinateurs


capables de s’échanger des informations. Un ordinateur spécialisé
dans la fourniture d’informations est appelé serveur ; l’ordinateur
qui a demandé ces informations est appelé client.

Clients

Serveurs
> Un site web n’est rien d’autre qu’un serveur qui propose aux
clients qui le demandent des informations (textes, images...)
dans un langage dit HTML (hypertext markup language)
> Chaque serveur est identifié grâce à une adresse URL (uniform
resource locator), qui indique en plus quel type d’information est
demandé. Exemple pour une page web :

“oui, la voici :”

“http://www.google.fr/” ?
“toi, as-tu une page web
à me proposer ?”
Introduction au format HTML
> Comment les informations qui forment un site web sont-elles
stockées sur l’ordinateur serveur ? En utilisant le format HTML
> Le langage HTML permet de fournir à la fois des informations
(textes, images, vidéos...) et la façon de les afficher à l’écran
> On sépare le fond (contenu) de la forme (représentation)
> Principe de base : utilisation des balises

Bonjour à tous Bonjour à tous

Bonjour à <b>tous</b> Bonjour à tous

Serveur Client
Utilisation des balises : règles

> Une balise ouvrante (”<b>”) est toujours suivie d’une balise
fermante (”</b>”), sauf rares exceptions

> Les balises peuvent être inclues les unes dans les autres :
<balise1><balise2>...</balise2></balise1>

> Les balises ne peuvent pas se chevaucher :


<balise1><balise2>...</balise1></balise2> est interdit

> Certaines balises ont des paramètres, appelés attributs :


<balise parametre=”...”>...</balise>
Structuration du texte
> Séparation d’un document par des titres et sous-titres :
<h1>Titre principal</h1>
<h2>Sous-titre 1</h2>
bla bla ...

<h2>Sous-titre 2</h2>
bla bla ...

Six niveaux successifs, de h1 à h6

> Séparation du texte en paragraphes :


<p>Texte d’un premier
paragraphe ...</p>
<p>Texte d’un second
paragraphe ...</p>

> Forçage d’un fin de ligne : <br>


Style
> Certaines balises précisent le style du texte à afficher :

mon site web


<b>mon site web</b>
<i>mon site web</i>
<u>mon site web</u>

> La balise font permet de modifier sa taille et sa couleur :

<font size=”-1”>mon texte</font>


<font size=”+1”>mon texte</font>
<font color=”red”>mon texte</font>
Listes
> Des balises permettent d’indiquer que plusieurs blocs de
texte sont les éléments d’une liste :

unordered list

<ul>
<li>Premier element</li>
<li>Deuxieme</li>
<li>Troisieme</li>
</ul>

list item
Tableaux
> Des tableaux peuvent être construits en indiquant ligne par
ligne, puis colonne par colonne, le contenu des cases :

table row (ligne)


<table>
<tr>
<td>Case 1</td>
<td>Case 2</td>
</tr>
<tr>
<td>Case 3</td>
<td>Case 4</td>
</tr>
</table>
table data cell (case)
Les liens hypertextes
> Un site web peut contenir plusieurs pages. Chacune peut
contenir un lien commandant l’affichage d’une autre page :

<a href=”page2.html”>Lien vers la page 2</a>

balise (“a”) texte du lien (un clic provoque


adresse de la page à afficher l’affichage de “page2.html”)

page1.html

index.html

divers.html

page2.html
Tout ensemble : page web
> Chaque page web contient certaines balises obligatoires
qui précisent son contenu : titre, texte ...

en-tête titre
<html>

<head>
<title>Bienvenue !</title>
</head>

<body>
<p>Ceci est un paragraphe.</p>
<p><i>Au revoir !</i></p>
</body>

</html>
contenu de la page