Beruflich Dokumente
Kultur Dokumente
1. Introduction au cours
HTML et CSS
Dé nition d’un lien HTML
2. Dé nition et usage
du HTML et du CSS
Les liens en HTML vont nous servir à créer des ponts entre différentes
pages d’un même site ou de sites différents. Le principe d’un lien est le
3. Evolution de
suivant : en cliquant sur une ancre (qui est la partie visible par
l’informatique et des
l’utilisateur d’un lien et qui peut être un texte comme une image), nos
langages Web
utilisateurs vont être redirigés vers une page cible.
4. Travail en local et en
Il existe deux types principaux de liens hypertextes en HTML :
production
5. Choix et installation Les liens internes qui vont servir à naviguer d’une page à l’autre
d’un éditeur de texte dans un même site ;
Les liens externes qui vont envoyer les utilisateurs vers une
LES BASES DU page d’un autre site.
HTML
Ces deux types de liens vont être l’objet d’enjeux et d’implications
6. Eléments, balises et
différents en termes d’optimisation du référencement (SEO) et vont
attributs HTML
pouvoir être créés de façons différentes en HTML.
17. Sélecteurs et
L’attribut href va nous servir à indiquer la cible du lien, c’est-à-dire
propriétés CSS
l’endroit où l’utilisateur doit être envoyé après avoir cliqué sur le lien.
Nous allons indiquer cette cible en valeur de l’attribut href.
18. Où écrire le code
CSS ?
D’un point de vue du code, la seule chose qui va changer pour créer un
lien ancre plutôt qu’interne ou interne plutôt qu’externe va être la façon
19. Commentaires et
dont on va construire la valeur qu’on va passer à l’attribut href.
indentation en CSS
Privacy & Cookies Policy
20. Sélecteurs CSS Créer des liens externes en HTML
simples et
combinateurs Un lien externe est un lien qui part d’une page d’un site et ramène les
utilisateurs vers une autre page d’un autre site.
21. Les attributs HTML
class et id et les Pour créer un lien vers une page d’un autre site en HTML (ou lien
sélecteurs CSS externe), il va falloir indiquer l’adresse complète de la page (c’est-à-
associés dire son URL) en valeur de l’attribut href de notre lien.
22. Ordre d’application Imaginons par exemple que nous voulions créer un lien vers la page
(cascade) et héritage
d’accueil de Wikipédia. L’URL de cette page est la suivante :
des règles en CSS
https://www.wikipedia.org/.
25. Notations
complètes “long hand”
et raccourcies “short
hand’ CSS
MISE EN FORME DE
TEXTES EN CSS EDIT ON
HTML Result
26. La propriété CSS
font-family et les <p>Pour créer des liens en HTML, on utilise l'élément a
Google Fonts et son attribut href.</p>
<p>Ex : lien vers <a
27. Les autres href="https://www.wikipedia.org/">la home de
Wikipedia</a></p>
propriétés CSS liées à
Resources
la police
28. Les propriétés CSS Comme vous le voyez, on utilise bien un élément a pour créer un lien
liées au texte externe en HTML. On place notre attribut href au sein de la balise
ouvrante de cet élément. Ici, on précise en valeur l’adresse (URL) de la
29. Gérer la taille des page d’accueil de Wikipédia.
interlignes et des
espaces dans les textes Entre les deux balises, nous plaçons la partie visible et cliquable
en CSS (l’ancre) de notre lien. Ici, cela correspond au texte « la home de
Wikipédia ». Les utilisateurs vont pouvoir cliquer sur ce texte pour être
30. Gérer la couleur et
renvoyés vers la page d’accueil de Wikipedia.
l’opacité des textes
Privacy & Cookies Policy
Note : Ici, nous avons choisi de placer un texte comme ancre de notre
LE MODELE DES
BOITES lien, mais rien ne nous empêche de placer une image à la place a n de
créer une image cliquable.
31. Le modèle des
boites Vous pouvez remarquer que le navigateur applique automatiquement
des styles à la partie cliquable de nos liens :
32. Largeur (width) et
hauteur (height) de la le texte (notre ancre) est de couleur différente (bleu avant de
boite de contenu des cliquer puis volet une fois le lien visité) ;
éléments HTML le texte est souligné ;
le curseur de notre souris change de forme lorsqu’on passe sur
33. Gestion des
le lien.
marges internes ou
padding en CSS
Nous allons bien évidemment pouvoir changer ces comportements en
appliquant nos propres styles CSS à nos éléments a. Nous verrons
34. Gestion des
comment faire cela plus tard dans ce cours.
bordures en CSS
35. Gestion des Bon à savoir : Lorsque l’attribut href prend une URL complète en
marges externes valeur, on parle de valeur absolue (car celle-ci est xe et ne dépend de
(margin) en CSS rien). Les liens externes utilisent toujours des valeurs absolues. On
parle de valeur absolue en opposition aux valeurs dites relatives, qui
36. La propriété CSS sont dans ce contexte des valeurs qui vont indiquer l’emplacement de
box-sizing la page cible relativement à la page source du lien.
INSERTION DE Comment savoir quelle valeur relative utiliser ? Pour bien comprendre
MEDIAS EN HTML comment fonctionnent les valeurs relatives, vous devez avant tout
savoir ce qu’est un site web.
45. Insérer des images
dans des pages HTML
Un site web n’est qu’un ensemble de chiers et de ressources (pages
de code de différents types et chiers médias comme des images, etc.)
46. Insérer de la
liés entre eux.
musique avec l’élément
HTML audio
Toutes ces ressources vont être hébergées (stockées) sur un
ordinateur très puissant et constamment connecté à Internet qu’on
47. Insérer des vidéos
appelle serveur, dans un dossier principal qu’on va appeler la racine
avec l’élément HTML
video
d’un site.
48. L’élément HTML Pour pouvoir stocker nos différentes ressources sur un serveur et faire
iframe en sorte que notre site soit tout le temps accessible via Internet, nous
passons généralement par un hébergeur qui va nous louer un serveur
FOND, DEGRADES ou une partie d’un de ses serveurs.
ET OMBRES CSS
Dans ce dossier racine, il va très souvent y avoir d’autres dossiers (des
49. Gérer la couleur de
sous-dossiers donc), des chiers, des images, etc.
fond des éléments
HTML
Par exemple, voici une première image de la racine de l’ancienne
version de mon site (à laquelle j’accède depuis l’interface
50. Ajouter des images
en fond des éléments d’administration de mon hébergeur) :
HTML
51. Création de
dégradés linéaires en
CSS
52. Création de
dégradés radiaux en
CSS
SELECTEURS CSS
COMPLEXES
57. EXERCICE –
Création d’un menu
horizontal sticky en
HTML et CSS
58. EXERCICE –
Création d’un menu
déroulant en HTML et Puis en explorant le contenu du dossier « cours-complet » :
CSS
FORMULAIRES
HTML
TRANSITIONS, Pour lier ces différents chiers et ressources entre eux (et donc offrir
ANIMATIONS ET entre autres à nos utilisateurs la possibilité de naviguer de l’un à
TRANSFORMATIONS
l’autre), nous allons utiliser des valeurs relatives, c’est-à-dire que nous
CSS
allons préciser l’emplacement de la ressource que l’on souhaite utiliser
62. Créer des
(ou vers laquelle on souhaite renvoyer) relativement à l’emplacement
transitions en CSS de la page / ressource qui souhaite l’utiliser (la page de départ).
63. Créer des C’est comme cela que nous allons procéder dans le cas précis de la
animations en CSS création de liens internes : nous allons préciser en valeur de l’attribut
href l’emplacement de la page cible (page de destination) par rapport à
64. Créer des l’emplacement sur le serveur de la page source.
transformations en
CSS Trois cas vont alors se présenter à nous :
65. EXERCICE – Créer 1. Le cas où les deux pages (source et destination) se trouvent
un diaporama en HTML dans un même dossier ;
et CSS
Privacy & Cookies Policy
2. Le cas où la page de destination se trouve dans un sous dossier
MODELE DES
BOITES FLEXIBLES – par rapport à la page source ;
FLEXBOX CSS 3. Le cas où la page de destination se trouve dans un dossier
parent par rapport à la page source.
66. Introduction au
modèle des boites Pour chacun de ces cas, nous allons construire la valeur de notre
exibles ou exbox attribut href de manière différente :
73. La balise meta Dans ce sous dossier cours, je vous propose de créer deux pages
viewport presentation.html et livres.html par exemple ainsi qu’un troisième
dossier qu’on pourra appeler code.
74. Créer un design
responsive avec les Dans ce dernier dossier code, nous créerons nalement une dernière
media queries page qu’on appellera liens.html.
79. Introduction au
modèle des grilles CSS
82. Aligner et espacer Ici, on voit bien que pour créer un lien vers une page située dans un
des éléments dans une sous dossier, il faut indiquer le nom du sous dossier suivi d’un slash
grille
suivi du nom de la page en valeur de l’attribut href.
83. EXERCICE –
Vous pouvez également remarquer que si la page cible du lien se situe
Création d’une page à
dans un sous-sous dossier, alors il faudra préciser le nom du sous
3 colonnes contenant
dossier suivi d’un slash suivi du nom du sous dossier puis à nouveau
des éléments exibles
d’un slash et nalement le nom de la page de destination en valeur de
CONCLUSION DU l’attribut href.
COURS
Bon à savoir : Il faudra indiquer le nom de tous les sous dossiers
84. Conclusion du traversés pour atteindre la page de destination à partir de la page de
cours HTML et CSS départ en valeur de l’attribut href.
On va donc utiliser ici la notation ../ pour signi er que les pages de
destination se trouvent dans des dossiers parents par rapport à notre
page de départ. Notez qu’on précise deux fois ../ pour créer un lien
vers notre page « home.html » tout simplement car cette page est
Privacy & Cookies Policy
située dans un dossier deux niveaux au-dessus de la page
« liens.html ».
EDIT ON
HTML Result
Valeur
de Comportement
target
Nom du
Ouverture de la page cible dans le cadre portant le nom
cadre
cité (en valeur de l’attribut name)
(frame)
Ensuite, nous allons créer nos liens de renvoi en soi. Pour cela, nous
allons passer à nos différents attributs href les valeurs
correspondantes aux noms de mes id précédés d’un dièse (symbole #).
EDIT ON
HTML Result
Accès direct à :
<ul>
<li><a href="#liens">Création de liens en HTML</a> ;
</li>
<li><a href="#ext">Liens externes</a> ;</li>
<li><a href="#int">Liens internes</a> ;</li>
<li><a href="#tget">Attrbiut target</a> ;</li>
<li><a href="#ancre">Liens "ancre"</a>.</li>
</ul>
Resources
Dans l’exemple ci-dessus, j’ai créé une liste de type sommaire au début
de ma page car celle-ci est très longue et j’ai accolé un id à chacun de
mes titres h2.
Cependant, sachez qu’il va être tout à fait possible d’utiliser une image
à la place d’un texte comme ancre ou contenu cliquable pour un lien.
Nous verrons comment faire cela dans le chapitre réservé à l’insertion
d’images en HTML.
Précédent Suivant
Privacy & Cookies Policy
Laisser un commentaire
Structure minimale
d'une page HTML
valide
Présentation des
formulaires HTML
Indentation et
commentaires en
HTML
© Pierre Giraud - Toute reproduction interdite Mentions légales Politique de con dentialité CGV
Sitemap