HTML V : Résumé 01
Le rôle de HTML et CSS :
HTML (HyperText Markup Language) : gérer et organiser le contenu.
CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : gérer l’apparence de la page web (agencement, positionnement, décoration, couleur, taille du texte…).
Les balises et leurs attributs :
– Les balises
Les balises donnent des instructions à l’ordinateur sont entourées de « chevrons », c’est-à-dire des symboles < et >, comme ceci : <balise>
Les balises en paires s’ouvrent, contiennent du texte, et se ferment plus loin.
<titre>Ceci est un titre</titre>
On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui indique que le titre se termine. Les balises orphelines sont des balises qui servent le plus souvent à insérer un élément à un endroit précis
Une balise orpheline s’écrit comme ceci : <image />
Notez que le / de fin n’est pas obligatoire.
Les balises doivent être fermées dans le sens inverse de leur ouverture
Une balise qui est ouverte à l’intérieur d’une autre doit aussi être fermée à l’intérieur
exemples :
– <html> <body> </body> </html>
– Les attributs
Les attributs complètent les balises pour donner des informations supplémentaires.
L’attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :
<balise attribut=« valeur »>
Structure de base d’une page HTML5 :
<!DOCTYPE html>
<html lang=« fr » >
<head>
<meta charset=« utf-8 » />
<title>Titre</title>
</head>
<body>
…
</body>
</html>
– Le doctype <!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.
Ce n’est pas vraiment une balise comme les autres (elle commence par un point d’exclamation), vous pouvez considérer que c’est un peu l’exception qui confirme la règle.
– La balise <html>
C’est la balise principale du code. Elle englobe tout le contenu de votre page.
La balise fermante </html> se trouve tout à la fin du code.
Une page web est constituée de 2 parties :
L’en-tête <head> et le corps <body>
– L’en-tête <head> : on donne dans cette section quelques informations générales sur la page, comme son titre, l’encodage (pour la gestion des caractères spéciaux), etc.
– Le corps <body> : c’est là que se trouve 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.
+ L’encodage (charset) :
<meta charset=« utf-8 » />
Cette balise indique l’encodage utilisé dans votre fichier .html.
+ Le titre principal de la page :
<title>
Les commentaires :
<!– Ceci est un commentaire –>
Un commentaire en HTML sert simplement de mémo. Il n’est pas affiché, il n’est pas lu par l’ordinateur, ça ne change rien à l’affichage de la page.
NB : Tout le monde peut voir le code HTML de votre page une fois celle-ci mise en ligne sur le Web.
Il suffit de faire un clic droit sur la page et de sélectionner « Afficher le code source de la page. Le code HTML de tous les sites est donc public.
Par conséquent, ne mettez pas d’informations sensibles comme des mots de passe dans les commentaires.
Organiser son texte :
– Les paragraphes
<p> Bonjour et bienvenue sur mon site ! </p>
<p> signifie « Début du paragraphe »
</p> signifie « Fin du paragraphe ». ».
– Sauter une ligne
On utilise la balise orpheline, <br />, pour sauter une ligne. Elle s’utilise obligatoirement à l’intérieur d’un paragraphe.
– Les titres
En HTML on a le droit d’utiliser 6 niveaux de titres différents.
<h1>…</h1> : signifie « titre très important ».
En général, on s’en sert pour afficher le titre de la page au début de celle-ci.
<h2>…</h2> : signifie « titre important ».
<h3>…</h3> : pareil, c’est un titre un peu moins important
(on peut dire un « sous-titre » si vous voulez).
<h4>…</h4> : titre encore moins important.
<h5>…</h5> : titre pas important.
<h6>…</h6> : titre vraiment, mais alors là vraiment pas important du tout.
– La mise en valeur
HTML propose différents moyens pour mettre en valeur le texte d’une page Web.
– Mettre un peu en valeur <em> </em>.
– Mettre bien en valeur <strong> </strong>
Marquer le texte <mark> </mark>
– Les listes à puces <ul>…</ul>
– listes non ordonnées (<li>…</li>)
<ul>
<li>…</li>
…
<li>…</li>
</ul>
– listes ordonnées : : <ol>…</ol>
<ol>
<li>…</li>
…
<li>…</li>
<li>…</li>
</ol>
Il existe un troisième type de liste : la liste de définitions.
Elle fait intervenir les balises <dl> (pour délimiter la liste), <dd> (pour délimiter un terme) et <dt> (pour délimiter la définition de ce terme).
Créer des liens :
– Lien vers un autre site
La balise à utiliser est (<a>) avec comme attribut (href) et comme valeur l’adresse du site.
Par exemple, pour faire un lien qui amène vers le Site du Groupe IIFM, situé à l’adresse https://iifm.fr/, On va mettre
(<a href= »https://iifm.fr/ »>Site du Groupe IIFM</a>)
Par défaut, le lien s’affiche en bleu souligné. On peut changer cette apparence avec le CSS .
* Quand on fait des liens en indiquant l’adresse complète, on parle de liens absolus.
– Un lien vers une autre page de son site
Nous avons plusieurs cas :
– Deux pages situées dans un même dossier
Pour faire un lien de la page 1 vers la page 2 situés dans le même dossier, on fait un lien relatif comme ceci
<a href= »page2.html »>
– Deux pages situées dans des dossiers différents
+ Un lien vers une page se trouvant dans un sous-dossier
Imaginons que page2.html se trouve dans un sous-dossier appelé contenu
On mettra dans page1.html
<a href= »contenu/page2.html »>
+ S’il y avait plusieurs sous-dossiers
On mettra dans page1.html
<a href= »contenu/autredossier/page2.html »>
+ Si le fichier cible est placé dans un dossier parent, autrement dit si page2.html est placé dans un dossier qui se trouve « avant » dans l’arborescence : On mettra dans page1.html
<a href= »../page2.html »>
– Un lien vers une ancre située dans la même page
Pour créer une ancre, il suffit de rajouter l’attribut id à une balise qui va alors servir de repère.
Exemple : <h2 id= »mon_ancre »>Titre</h2>.
Ensuite, on va faire un lien comme d’habitude, mais cette fois l’attribut href contiendra un dièse(#) suivi du nom de l’ancre.
Exemple : <a href= »#mon_ancre »>Aller vers l’ancre</a>
L’attribut id sert à donner un nom « unique » à une balise, pour s’en servir de repère. Ici, on s’en sert pour faire un lien vers une ancre, mais en CSS cela nous sera très utile pour « repérer » une balise précise.
Evitez cependant de créer des id avec des espaces ou des caractères spéciaux, utilisez simplement des lettres et chiffres dans la mesure du possible pour que cela soit reconnu par tous les navigateurs.
– Un lien vers une ancre située dans une autre page
L’idée, c’est de faire un lien qui ouvre la page cible et qui amène directement à une ancre située plus bas sur cette page. Pour ce faire, il faut taper le nom de la page, suivi d’un dièse (#), suivi du nom de l’ancre.
Exemple : <a href= »ancre-01.php#rollers »> amènera sur ancre-01.php, au niveau de l’ancre appelée « rollers ».
On peut utiliser l’attribut title pour afficher une bulle d’aide lorsque le visiteur pointe sur le lien.
<a href= »http://affiliations.iifm.fr/ » title= »Réservé aux débutants »>
– Un lien qui ouvre une nouvelle fenêtre
On peut « forcer » l’ouverture d’un lien dans une nouvelle fenêtre.
Pour ce faire, on rajoutera target= »_blank » à la balise <a>.
<a href= »http://affiliations.iifm.fr/ » target= »_blank »>
lien vers une ancre située dans une autre page
</a>
Selon la configuration du navigateur, la page s’affichera dans une nouvelle fenêtre ou un nouvel onglet.
Il est déconseillé d’abuser de cette technique car elle perturbe la navigation.
– Un lien pour envoyer un e-mail
Pour demander aux visiteurs d’envoyer un mail, on peut utiliser des liens de type mailto. Il faut modifier la valeur de l’attribut href.
Voir ci-dessous :
<p>
<a href= »mailto:votrenom@bidule.com »>
Envoyez-moi un e-mail !
</a>
</p>
– Un lien pour télécharger un fichier
<p>
<a href= »monfichier.zip »>
Télécharger le fichier
</a>
</p>
Les images :
– Les différents formats d’images
Les formats à adopter en fonction de l’image que l’on a :
+ Pour une photo : on va utiliser un JPEG
+ Pour n’importe quel graphique avec peu de couleurs (moins de 256)
on va utiliser un PNG 8 bits, ou éventuellement un GIF
+ Pour n’importe quel graphique avec beaucoup de couleurs
on va utiliser un PNG 24 bits
+ Pour une image animée : on va utiliser un GIF animé
– Insertion d’une image
La balise qui va permettre d’insérer une image est <img />.
C’est une balise de type orpheline (comme <br /> ).
Cette balise doit être accompagnée de 2 attributs obligatoires :
+ L’attribut src permet d’indiquer où se trouve l’image
(1) Par un chemin absolu : http://www.site.com/fleur.png,
(2) ou par un chemin relatif : src= »images/fleur.png ».
Ici, fleur.png est dans le sous-dossier images.
Le chemin relatif est plus souvent utilisé.
+ L’attribut alt qui équivaut à texte alternatif, décrit l’image.
C’est un court texte qui sera affiché à la place de l’image
si celle-ci ne peut pas être téléchargée,
Les images doivent se trouver obligatoirement à l’intérieur
d’un paragraphe (<p>…</p>).
– Exemple
<p>
Voici une photo que j’ai prise lors de mes
dernières vacances à la montagne :
<br />
<img src= »images/montagne.jpg »
alt= »Photo de montagne » />
</p>
– Ajouter une infobulle
L’attribut pour afficher une bulle d’aide des images est le même que pour les liens. Il s’agit de title.
Cet attribut est facultatif (contrairement à alt).
Exemple :
<p>
Voici une photo que j’ai prise lors de mes
dernières vacances à la montagne :
<br />
<img src= »images/montagne.jpg »
alt= »Photo de montagne »
title= »C’est beau les Alpes quand même ! » />
</p>
– Miniature cliquable
Pour une image très grosse, on peut afficher la miniature sur notre site et ajouter un lien sur cette miniature afin que les visiteurs puissent afficher l’image en taille originale.
Par exemple, on place deux versions d’une image, la miniature montagne_mini.jpg et l’image d’origine montagne.jpg, dans un dossier appelé img.
On affiche la version montagne_mini.jpg sur sa page et on fait un lien vers montagne.jpg pour que l’image agrandie s’affiche lorsqu’on clique sur la miniature.
Voir ci-dessous :
<p>
Pour voir l’image dans sa taille d’origine ?
Cliquez dessus !
<br />
<a href= »img/montagne.jpg »>
<img src= »img/montagne_mini.jpg »
alt= »Photo de montagne »
title= »Cliquez pour agrandir » />
</a>
</p>
Certains navigateurs affichent un cadre bleu (ou violet) autour de l’image cliquable. On pourra retirer ce cadre grâce au CSS.
Les figures :
Les figures sont des éléments qui viennent enrichir le texte pour compléter les informations de la page. Ils peuvent être de différents types : Images, Codes source, Citations, etc. Bref, tout ce qui vient illustrer le texte est une figure.
Nous allons nous intéresser ici aux Images, mais contrairement à ce qu’on pourrait croire, les figures ne sont pas forcément des Images.
– Création d’une figure
<figure>
<img src= »images/blocnotes.png »
alt= »Bloc-Notes » />
</figure>
Une figure est le plus souvent accompagnée d’une légende.
Pour ajouter une légende,
on utilise la balise <figcaption>
à l’intérieur de la balise <figure>
Comme ci-dessous :
<figure>
<img src= »images/blocnotes.png »
alt= »Bloc-Notes » />
<figcaption>
Le logiciel Bloc-Notes
</figcaption>
</figure>
Bien comprendre le rôle des figures :
placées à l’intérieur d’une balise <p> </p>).
Mais si on fait de l’image une <figure>, l’image peut être située en-dehors d’un paragraphe.
Exemples :
<p>
Connaissez-vous le logiciel Bloc-Notes ?
On peut faire des sites web avec !
</p>
<figure>
<img src= »images/blocnotes.png »
alt= »Bloc-Notes » />
<figcaption>
Le logiciel Bloc-Notes
</figcaption>
</figure>
La balise <figure> a un rôle avant tout sémantique. Cela veut dire qu’elle indique à l’ordinateur que l’image a du sens et qu’elle est importante pour la bonne compréhension du texte.
Une <figure> peut très bien comporter plusieurs images
Exemples :
<figure>
<img src= »images/internetexplorer.png »
alt= »Logo Internet Explorer » />
<img src= »images/firefox.png »
alt= »Logo Mozilla Firefox » />
<img src= »images/chrome.png »
alt= »Logo Google Chrome » />
<figcaption>
Logos des différents navigateurs
</figcaption>
</figure>
À Suivre :