Définition de HTML : Hypertext markup Language que l’on peut traduire par : « Langage de balisages pour l’hypertexte ».
- « Hypertext » signifie que les documents sur le web ne sont pas destinés à être utilisés de façon linéaire, mais plutôt à être reliés à d’autres documents. Le développeur doit donc également comprendre l’architecture de l’information et les relations entre les différentes pages du site
- « Markup » signifie balise. Elle définit le rôle que chaque élément de contenu aura et génère également le Document Object Model ou DOM qui décrit la structure de la page 1
<!DOCTYPE html> est requit en haut de tous documents et indique le type de document.
Les balises fonctionnent par paires, une ouvrante et une fermante : <html> … </html>.
- La balise <header> </header> : spécifie l’en-tête d’un document, d’une section ou d’un article. L’élément <header> devrait être utilisé comme un bloc contenant du contenu d’introduction ou un ensemble de liens de navigation ainsi qu’un logo.
- Les balises titres <h1></h1> : (h1, h2, h3) sont des tags HTML qui signalent les titres (h1) et les sous-titres. Les h1 sont des titres de premier niveau, les h2 sont des titres de second niveau, les h3 sont des titres de troisième niveau et ainsi de suite jusqu’à la balise titre h6.
- La balise <img src= » »> est une balise orpheline, son attribut src (source) est le chemin de l’image à inclure (sous la forme d’une adresse réticulaire, URL).
- La balise <main></main> précise le contenu principal d’un document. Il ne doit pas avoir plus d’un élément <main> dans un document.
- La balise <ul></ul> représente une liste non ordonnée, c’est-à-dire une liste composée d’éléments sans hiérarchie ni ordre logique apparent ou qu’on souhaite faire ressortir
- La balise <ol></ol> définit une liste ordonnée. Une liste ordonnée peut être numérique ou alphabétique
La balise <li></li> définit un élément de liste. La balise <li> est utilisé dans des listes ordonnées ol et dans les listes à puces ul. (élément parent).
Exemple de début de construction :
<!DOCTYPE html>
<html>
<head>
<title>L’image du web | Acceuil</title>
</head>
<body>
<header>
<h1>L’image et le web</h1>
<h2>Minisite d’initiation à la création de pages web</h2>
</header>
<main>
<h1>Acceuil</h1>
<p> Ce site contient des galeries d’images issues principalement du site <a href= »https://unsplash.com/ »>unsplash.com </a>.</p>
<p>A travers la réalisation de ce site, nous pouvons avoir un premier aperçu de certaines des technologies essentielles du web ; les languages HTML, CSS, Javascript, etc.</p>
<ul>
<li>
<a href= »paysages.html »>
<img src= »images/paysage-200×200.jpg »> </a>
<a href= »paysages.html »>Paysages</a>
</li>
<li>
<a href= »Trains.html »>
<img src= »images/train-200×200.jpg »> </a>
<a href= »Trains.html »>Trains</a>
</li>
</ul>
</main>
<footer>
<p>Exercice de la formation Desgner web du COS-CRPF | conception : Didier Lesourd – juin 2021</p>
</footer>
</body>
</html>
Les marges :
