Création des pages web
CM 1 : Bases de HTML
WEB (structure physique)
› Serveurs HTTP (intégrés au réseau Internet) qui hébergent
des sites WEB (Internet).
› Clients utilisant un navigateur (internet) comme Internet
Explorer, Mozilla Firefox ou Opera...
Site WEB
Site WEB
Serveur HTTP WWW=World Wide Web
Site Internet
› Est hébergé sur un serveur HTTP chez un fournisseur de
services Internet.
› A une adresse (URL) de la forme:
http://nom.de.serveur/adresse/du/site/
› Contient des pages statiques (en HTML et CSS).
› Contient des pages dynamiques (en PHP ou autre
langage).
HTTP
› Est un protocole pour la transmission des informations
depuis et vers les sites internet.
› HTTPS – version sécurisée de HTTP. Elle ne permet pas
l’interception des données.
› HTTP2 – nouvelle version du standard HTTP(S). Permet
un chargement plus rapide des pages.
URL
› Adresse (http://www.u-pec.fr/).
› Universal Ressource Locator:
– Login.
– Mot de passe.
– Adresse du serveur.
– Port.
– Chemin de la page.
– Paramètres de requête.
› http://nom:
[email protected]:port/adresse/du/site/page.php?id=3
› http://www.yahoo.com/
Techniques Web (statique)
› HTML Données
› CSS Représentation
› JavaScript Interaction
Outils
› Editeur de texte :
– notepad++,
– Visual Studio Code (vscode)
–…
› Navigateur récent
– Firefox
– Chrome
– Edge
– …
Visual Studio Code (vscode)
› Rajouter les extensions
– HTML Preview
– Live Server
Test rapide
› Pour tester rapidement et pour partager vos bouts de
code :
– jsfiddle.net
– w3schools.com
– codepen.io
› On utilisera w3schools.com comme référence HTML et
CSS.
HTML
› HyperText Markup Language
› Il décrit le contenu des pages web.
› On étudiera la version 5.
Fichiers HTML
› Une page HTML doit être stockée dans un fichier avec
l'extension .html ou .htm
› Si la page a le nom index.html (ou index.htm), alors elle
est lu lorsqu'on accède au répertoire:
http://www.google.fr/ est équivalent au
http://www.google.fr/index.html
› Pour voir le résultat – ouvrir le fichier avec le navigateur.
Serveur pédagogique
› Le département informatique propose un serveur
pédagogique: https://pw.lacl.fr/
› Vous pouvez charger vos pages sur le serveur en utilisant
le protocole WebDAV (intégré en
Windows/Linux/MacOS).
› Elles seront alors disponibles pour tout le monde.
› Pour plus de détails – voir sur Eprel v2.
Balises
début : <element>
fin : </element>
› Commentaires:
<!-- un commentaire -->
Structure d’une page
<!DOCTYPE html>
<html>
<head>
l’entête de la page
</head>
<body>
le corps de la page
</body>
</html>
Entête
› Titre
<title>Titre de la page</title>
› Définition des styles CSS
› Définition des fonctions JavaScript
› Metas:
<meta name="description" content="Description">
<meta name="keywords" content="mots clés">
<meta charset="utf-8" />
Corps: structures basiques
› Paragraphes
<p> Un paragraphe </p>
› Sauts à la ligne
<br />
Liens
› Pour faire un lien:
<a href="fichier.html">un lien</a>
<a href="http://www.yahoo.com/">Yahoo!!</a>
› Lien vers une ancre:
<h2 id="mon_ancre">Titre</h2>
<a href="#mon_ancre">Aller vers l'ancre</a>
Listes non-ordonnées
<ul>
<li>premier élément</li>
<li>deuxième élément</li>
</ul>
Listes ordonnées
<ol>
<li>premier élément</li>
<li>deuxième élément</li>
</ol>
Images
<img src="image.jpg" alt="description" />
<img src="image.jpg" alt="description" title="jardin" />
Vidéo
<video controls>
<source src="…URL…" type="video/mp4">
</video>
Tableaux
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
Chaque cellule est entourée par td
1 2
et chaque ligne par tr 3 4
Tableaux (version complète)
<table>
<caption>Titre</caption>
<thead>
<tr><th>No</th><th>Nom</th></tr>
</thead>
<tfoot>
<tr><th>No</th><th>Nom</th></tr>
</tfoot>
<tbody>
<tr><td>1</td><td>Ain</td></tr>
</tbody>
</table>
Bordure pour les tableaux
› Il faut rajouter un style CSS dans l’entête:
<head>
…
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
…
</head>
Tableaux: fusion
<tr><td colspan="2"> Ligne 1 </td></tr>
<tr><td>1</td><td>2</td></tr>
Ligne1
1 2
<tr><td rowspan="2"> Colonne1 </td>
<td>1</td></tr>
<tr><td>2</td></tr>
Colonne 1 1
2
Web sémantique (HTML5)
› Plusieurs balises pour donner le sens au texte.
› Utilisé par les navigateurs et par des applications
spécialisées pour extraire des informations pertinentes.
Extrait des balises de texte
abbr Abréviation
acronym Acronyme
address Adresse
<blockquote> Citation
<cite> Référence
<code> Lignes de code
<dfn> Définition
<em> Souligner un passage
<pre> Texte préformaté
<q> Citation courte
<sub> Indice
<sup> Exposant
Extrait des balises de structure
p Paragraphe
a Lien
h1…h5 Entête
header Entête de page
footer Pied de page
nav Menu de navigation
section Section
article Article
aside Flottant
div Division générique paragraphe
span Division générique inline
Divisions structurelles
Extrait des balises de contenu
area + map Zones d’image cliquables
audio Son audio
video Vidéo
canvas Zone de dessin
img Image
frameset + Inclusion des pages WEB (en
frame train de devenir obsolète).
ou iframe
Dernières remarques
› Attention au copié-collé des exemples – il y a parfois des
caractères invisibles qui sont mal interprété par les
navigateurs.
