PTT Intro Liens Html2

Petite Introduction aux Liens
HTML/XHTML
Ce qui a fait la particularité des pages Web ou

pages Internet dès leur invention c’est les liens
hypertextes (« Hyperlinks » ou « Hyperliens »).
C’est ça qui a fait valoir au langage qui les gère
l’appellation de langage HTML (Hyper-Text
Markup Language).
Hyper-Texte signifie un texte qui activé,

déclenche une action et dans le cas de l’Internet
cette action peut être l’accès à une autre page
Web ou le déclenchement d’une autre action
(lancement d’une vidéo, d’une musique…).
Types de lien :
Un lien hypertexte lie deux documents ou deux

points d’un même document, il définit la
relation entre les deux.
Petite Introduction aux Liens Hypertextes
Il existe trois balises pour définir les liens en

HTML : <a></a>, <link></link>, <area></area>.
Dans ce document nous survolerons l’essentiel

de la balise <a></a> « anchor » (d’ancrage).
L’élément <a></a> (« anchor » ou ancre)

renvoie à (affiche) :
un autre document : <a href="URL |

URI">texte du lien</a>
ou
un autre endroit du même document :<a

href="#cible">texte du lien</a>
ou
un endroit précis d’un autre document : <a

href="URL#cible">texte du
lien</a>,
un email…
Diasoluka Nz. Luyalu - 2/45- mardi 22 janvier 2019 - 9:08:54 AM

L’endroit cible du lien dans le document cible #

est appelé Bookmark, défini par un id ou un
name.
URL (Uniform Resource Locator)
ou
URI (Uniform Resource Identifier) peut être

l’adresse d’une page Web sur Internet, ou d’un
fichier-disque. L’URL/URI peut être absolue
(adresse Web complète) ou relative (locale au
même site web).
URIs = URLs + URNs.

URI =Uniform Resource Identifier.
URL =Uniform Resource Locator.
URN =Uniform Resource Name.
href= « hypertext reference »
Pour agir, le lien doit consister en :
1. Le lien proprement dit :

<a href="cible">Support du
lien</a>
« Support du lien » (seule partie visible du lien

dans la page HTML) peut être :
1. Texte
2. Image
3. Élément HTML
4. …
et
2. La destination du lien (« target » ou

cible) :
<a name="cible"> ou <a id="cible">.

La définition de la cible n’a pas besoin de la
balise de fermeture</a>.
Un id (identifier ou identificateur) est unique

dans un fichier HTML, il est donc spécifique ;
alors que plusieurs éléments peuvent avoir le
même name (nom), par exemple les éléments
INPUT de type radiocheck.

Exemples de définition basique/minimale de lien

« anchor » :
<a
href="http://www.amessi.org/diaso
luka">Lien vers diasoluka</a>
Et de façon générique :
<a
href="http://www.domain.com/"></a
>
<a
href="ftp://username:password@ftp
.domain.com/"></a>
<a
href="file://username:password@ft
p.domain.com/"></a>
<a
href="mailto:email@address.com"><
/a>
<a href="news:alt.groupname"></a>
Ce lien apparait comme ceci dans le navigateur

(cliquez-le [avec le bouton gauche de la souris]) :
Lien vers diasoluka

Exemple de définition de cible de lien

« anchor » :
<a name="cible" />
L’Attribut target de la balise <a></a> :
Nous avons vu les attributs href, id, name

(n’utilisez plus name comme target de lien).
Voyons l’Attribut target.
Comme dans la balise <base> (qui définit l’URL

de base dans les références relatives de liens, et
n’a pas de balise de fermeture</base>),et qui
définit aussi le mode d’ouverture par défaut de
tous les liens dans la page, l’Attribut target
des balises <a></a>et <base>ouvre le lien
comme suit selon sa valeur
(target="valeur") :
_blank : Dans une nouvelle fenêtre ou tab

_self : Dans le même frame (valeur par
défaut)
_parent : Dans le frame parent

_top : Dans l’entièreté du corps de la

fenêtre/tab
framename [nom d’un frame] : Dans le frame
cité
Quand on définit les feuilles de style des liens,

on doit les enchaîner dans l’ordre suivant :
a:link, a:visited, a:hover,

a:active (non visité, visité, surplombé, actif).
Dans un CSS interne :
<style TYPE="text/css">
a:link{…}
a:visited{…}
a:hover{…}
a:active{…}
</style>
Depuis un CSS externe (dans un fichier CSS dans

lequel on n’utilise jamais les balises de définition
de style), utilisez l’un des liens suivants dans le
fichier appelant, dans le <head></head> :

<link rel="stylesheet"
href="URL.css" type="text/css" />
ou
Les feuilles de styles externes s’importent avec

les commandes suivantes :
<link rel="stylesheet" href="URL.css

media=media-query-list"
type="text/css" />
ou
@import "URL.css";
ou
@import url(URL.css);
On peut aussi spécifier les types de médias

concernés :
@import url(URL.css) print ;

@import url(URL.css) projection, tv ;
@import url(URL.css) handheld and (max-width:650px);

La syntaxe générique @import est donc :
@import [ <url> | <string> ] <media-query-list>? ;
Les valeurs possibles pour l'attribut media

(media-query-list) sont :
Screen (Écrans),
handheld (Périphériques mobiles ou de petite
taille),
print (Impression),
aural {CSS 2.0} / speech {CSS 2.1} (Synthèses
vocales),
braille (Plages braille),
embossed (Imprimantes braille),
projection (Projecteurs ou présentations avec
slides),
tty (Terminal/police à pas fixe),
tv (Téléviseur),
all (Tous les précédents).
Les règles @import doivent précéder toute

autre @rule (at-rules ou règles à arobase) sauf
le @charset qui doit être éventuellement la
première chose dans une feuille de style.

Les différents niveaux lexicaux (différentes

versions) de CSS sont compatibles = ont la
même syntaxe fondamentale (grammaire). Le
niveau actuel au samedi 2 décembre 2017 est le
CSS3.
On parlera des styles dans une autre section.

Mais d’ores et déjà voyons ce que ça peut faire :
Voici un code HTML sans aucun style :

Et voici comment il affiche :
En ajoutant le style suivant dans le <head>

comme ceci :


On obtient l’affichage :
Baisser l’ascenseur pour voir la suite :

Vous voyez que la Note de Bas de Page est

restée immobile alors que le reste de la page a
monté.
Voici le code complet du HTML pour le menu

vertical ci-haut, en format texte pour faciliter le
copier-coller :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML

4.01//EN">
<html>
<head>
<title>Menu Vertic - Horiz</title>
<style>
body {
max-width:500px;
font: 17px Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif;
color: hsl(345 , 68% , 12%);

margin-left: 13em; margin-top: 1.7em;

margin-bottom: 2.5cm;
background-color: rgb(255,260,168);
// padding: 5em 0em;
// margin-left: 3ex }
// li {
// display: inline;
// line-height: 2.2em }
ul.navbar {
list-style-type: none; padding: 0;
margin: 0;
position: absolute; top: 1.2em; left:
1em; width: 11em;
// width: 29em;
}
ul.navbar li {
background: white; margin: 0.5em 0;
padding: 0.3em;
border-style: dotted solid dashed;
border-width: 2px 1ex 0.1em; border-
color: #E2192A }
ul.navbar li:hover {
background:rgb(250,244,117); }
ul.navbar a { text-decoration: none }
a:link { color: blue }
a:visited { color: purple }
a:hover { color: green }
a:active { color: red }
footer {
position: fixed; bottom: 0; left: 1em;

margin: 1em; width: 85%;

background:rgba(178,179,169,0.66);
border-top: 2pt dotted red;
color:#587C1D; padding:20px; text-
align:center }
div {font: 35px Georgia, "Times New

Roman", Times, serif; }
.p3{font-style:italic}
p[title]{background:hsl(317 , 29% , 88%)}
p[title="p4"]{border:solid 2pt;padding:7px
7pt;border-radius:3em}
</style>
</head>
<body>
<footer>Développé au CERINFOMYO /
CESTYREMYOCO.</footer>


<ul class="navbar">
<li><a href="pgarde.html">Page de Garde</a>
<li><a href="anthropobio.html">Anthropo Bio-
Métrie</a>
<li><a href="imp.html">Impédancemétrie</a>
<li><a href="ta.html">Tension Artérielle</a>
<li><a href="labo.html">Laboratoire</a>
<li><a href="status.html">Situation
Globale</a>
</ul>

<div>Global Health Assessment</div>
<p>Le GHA (Logiciel de Gestion, Automatique de

la Santé, assistée par l'ordinateur) est,

comme son nom l'indique, un Logiciel de

gestion automatique de la Santé, assistée par
l'ordinateur.</p>
<p id="p2">Ce logiciel, qui est un véritable

robot logiciel, fait l'anthropologie, Évalue
l'anthropométrie et l'Impédancemétrie, Analyse
les résultats de Labo, Aide au suivi de la TA
et à l'obstétrique...</p>
<p class="p3" title="p3">Ce logiciel fait

beaucoup beaucoup d'autres choses qu'on ne
saurait énumérer ici, il faut l'utiliser pour
découvrir toutes ces admirables
fonctionnalités.</p>
<p title="p4">En plus et par-dessus tout, Ce

logiciel est entièrement gratuit obtensible
sur simple demande.</p>
</body>
</html>
Pour transformer ce menu vertical en menu

horizontal, décommentez les propriétés de style
bloquées en commentaires, come ceci
éventuellement en supprimant les doublons :

Ce qui affiche :

Et la suite en baissant l’ascenseur :

Et un menu horizontal déroulant très simple, à

deux entrées :


Et le texte de son code source :
<head>
<base target="_blank">
<style>
#nav {
float:left; padding:0.6em; border-
radius:0.2em;
background:#f58fa2; width:95%; font-
family:tahoma }
#nav1,#nav2 {float:left; width:6em}
#nav1:hover,#nav2:hover{
background:hsl(230 , 95% , 96%); border-
radius:0.2em }
#links1, #links2 {
display:none;position: absolute;
top:2.2em;
background-color: #f9f9f9; min-width:
150px;
box-shadow: 0px 8px 16px 0px
rgba(0,0,200,0.8);
z-index: 1 }
#nav1:hover #links1,#nav2:hover #links2 {
border:solid 1; border-radius:0.3em;
padding:0.3em }
#nav1:hover #links1,#nav1:hover #links1 a,
#nav2:hover #links2,#nav2:hover #links2 a
{
text-decoration:none; display:block }
#nav1:hover #links1 a:hover,#nav2:hover
#links2 a:hover {
background:#C4F251 }
</style>
</head>
<body>
<div id="nav">

<div id="nav1">MENU1
<div id="links1">
<a href="dias.html">Lien 1</a>
<a href="#">Lien 2</a>
</div>
</div>
<div id="nav2">MENU2
<div id="links2">
<a href="luy.html">Lien 3</a>
</div>
</div>
</div>
</body>
</html>
Exécution 1 :
Exécution 2 :

Bien que ce sujet ne soit pas consacré aux styles,

nous avons néanmoins parcouru les possibilités
qu’offre le langage CSS. Pour notre cas-ci nous
avons pu :
1. Créer une page avec trois sections :

a. Le menu de gauche et de haut
b. Menu horizontal déroulant à deux
entrées
c. Le corps de la page à droite
d. Une note de bas de page, fixe. La
Note de Haut de Page (Entête)
fonctionne de la même façon.
Notez dans le code source que la
Note de Bas de Page est le premier
élément à être défini, mails elle
apparaît figée en bas de page dans

le rendu (affichage) dans le

navigateur.
2. Manipuler quelques sélecteurs de
propriétés CSS
3. Utiliser la transparence (opacité) d’un
élément.
Un lien étant un élément comme tout autre

dans une page HTML, on peut aussi le faire
réagir quand il prend le focus (ce n’est pas la
même chose que « actif »).
Figure 1: Sans focus.

Figure 2: Sous focus.
Nous reviendrons en long et en large sur le CSS

dans une autre section consacrée à la chose.
Mais vous pouvez déjà avoir quelques liens avec
le sujet.
HTML définit la structure du document

(disposition des différentes parties du
document : titre, auteur, résumé, corps du
document éventuellement subdivisé en sections
et chaque section peut avoir un titre et d’autres
sous-sections pouvant comporter des
paragraphes, listes, images et autres éléments.
CSS définit la présentation (look, apparence) du

document (polices et tailles de caractère,
couleur des caractères et du fond, hauteur des
lignes, espacements, indentation, dégradés et
autres effets spéciaux…).
Bien entendu, HTML comporte aussi quelques

attributs permettant d’affiner rudimentairement

la présentation (rôle de chaque élément dans la

page : titre, paragraphe, section, NBP, NFD, …)
du document : fonts, couleurs, positionnement,
espacement, flux du texte, etc., par exemple la
balise <b>, les attributs align, width, border,
cellspacing…. CSS permet d’avoir un meilleur
contrôle sur la structure du document.
CSS signifie « Cascading Style Sheet » = « Feuille

de Style en Cascades » (plusieurs feuilles de
style définissent la présentation d’un document
(HTML ou XML), en gérant les conflits éventuels,
ce qui signifie ceci : Toute définition d’une
propriété de style écrase ou enrichit toute
définition antérieure de la même propriété soit :
1. Dans la balise-même (style inline)
2. Dans un niveau supérieur

a. Dans la même feuille de styles
interne (dans l’élément
<style></style> du fichier HTML en
cours d’édition)
b. Dans une feuille de styles
externe (définie dans un fichier
externe).

Trois différentes sources de feuilles de styles :
Celles de l’utilisateur, celles de l’auteur de la

page (inline, élément style et importé), et celles
du user agent.
L’ordre de préséance des styles :
On lit ceci sur https://www.w3.org/TR/css3-

cascade :
The cascade sorts declarations according to the following

criteria, in descending order of priority:
Origin and Importance

The origin of a declaration is based on where it comes from
and its importance is whether or not it is declared
!important. The precedence of the various origins is, in
descending order:
1. Transition declarations
2. Important user agent declarations
3. Important user declarations
4. Important override declarations
5. Important author declarations
6. Animation declarations
7. Normal override declarations
8. Normal author declarations
9. Normal user declarations

10. Normal user agent declarations.
Declarations from origins earlier in this list win over

declarations from later origins.
Pour un même niveau, la dernière redéfinition a

préséance sur les définitions précédentes.
Une déclaration !important a priorité sur une

déclaration normale (non !important).
Une déclaration !important de l’utilisateur

(user) a priorité sur celles de l’auteur.
Les déclarations !important de toute origine ont

priorité sur les animations (normalement les
valeurs animées priment sur toutes les autres
règles).
Les déclarations !important des User Agent

priment sur celles de l’auteur et de l’utilisateur.
Tous les styles définis dans l’attribut style d’une

balise et dans l’élément style et éventuellement
dans un fichier externe constituent les Author
style sheets.

Toute propriété de style non explicitement

redéfinie conserve intact celle de l’élément
parent (héritage = « inhéritance ») ou celle
prédéfinie par défaut dans le User Agent
(« initial value »).
Un « AUTEUR » (author) écrit les documents et

leur associe des feuilles de style, alors qu’un
AUTHORING TOOL (outil de création) génère
automatiquement des documents et leur
associe des feuilles de style.
Un « UTILISATEUR » (User) interagit avec un

user agent (navigateur =browser =fureteur) pour
voir, entendre ou utiliser un document final
formaté avec les feuilles de style associés, mais
peut aussi leur associer des feuilles de style
personnelles conformes à ses préférences
personnelles.
Un « NAVIGATEUR » (User agent =UA) c’est

toute application/logiciel capable d’interpréter
un document écrit dans le langage du document
et applique les feuilles de style associées
conformément aux termes de cette

spécification. Il est capable d’afficher un

document, de le lire à haute voix, l’imprimer, le
convertir dans un autre format, etc.
I. propriété Définie une seule fois :
C’est le cas normal, ne servant à rien de

redéfinir une propriété dans une même balise.
II. Redéfinition de propriété dans une

même balise (juste pour illustrer) :

III. Redéfinition dans une balise d’une

propriété prédéfinie dans l’élément
<style></style> :
Propriété définie dans <style> et non redéfinie

dans la balise :
Hors Focus :
Avec Focus :

IV. Même propriété redéfinie dans une

balise :
Même le a:focus a été écrasé (n’agit plus).
V. Même propriété redéfinie explicitement

dans la même feuille de style :

VI. Même propriété redéfinie dans une

deuxième feuille dans le même élément
<style> :
Hors Focus :

En Focus :
Les choses se passent de la même façon quand

on redéfinit une propriété prédéfinie dans une
feuille de style externe.
Nous venons de voir l’écrasement de propriété

par une redéfinition. Voyons comment une
propriété prédéfinie reste intacte quand elle
n’est pas redéfinie, et comment une nouvelle
définition de propriété s’ajoute aux autres
propriétés existantes :

Hors Focus :
En Focus :
D'autres technologies peuvent donc aussi être

utilisées avec le HTML (langage de description
de la structure de la page) pour 1. Affiner la
présentation de la page (styles : CSS) et/ou lui
conférer une interactivité (pages Web

dynamiques : JavaScript).
Le CSS avait été inventé par Håkon Wium

Lie le 10 October 1994.
Et, puisque nous avons déjà parlé du CSS,

plaçons une petite illustration concrète et utile :
Présentation listing (teinte alternante) des rangs
du tableau.
Incorporons donc une feuille de style dans notre

HTML du tableau de la page
http://diassites.0pi.com/initrapidint/ptt%20intr
o%20html1.html#tableau :
Voici l’entièreté du code source HTML en format

éditable (.txt) :
<style>
table tr:nth-child(2n) td{
background: hsla(48 , 16% , 84% , 0.52);
}
</style>

<table border='1' cellspacing='0'

width="300em"
cellpadding="10ex" bgcolor="hsl(161 ,
74% , 88%)">
<tfoot> <tr> <th colspan=4> Pied du tableau
</th> </tr> </tfoot>
<tbody>
<colgroup span=2
bgcolor=rgb(255,106,199)></colgroup>
<col><col bgcolor=#E296C6)>
<tr HIDDEN><th>TH1L1</th> <th>TH2L1</th>
<th> TH2L1’ </th> <th>TH3L1</th> </tr>
<tr><td>L1C1</td><td>L1C2</td><td rowspan=3>
L1-3C2’ </td> <td>L1C3 </td> </tr>
<tr><td>L2C1</td><td>L2C2</td>
<td>L2C3 </td> </tr>
<tr><td>L3C1</td><td>L3C2</td>
<td>L3C3 </td> </tr>
<caption> Caption : Démonstration de Tableau
</caption>
<thead> <th colspan=4> Entête du tableau
</th> </thead>
</tbody>
<legend>Légende du tableau</legend>
<summary>Summary du tableau</summary>
</table>
Et voici ce que devient ce tableau dans la

visionneuse d’EditPlus :

Figure 3: Dans la visionneuse d'EditPlus.
Et dans le navigateur Maxthon :

Figure 4: Dans le navigateur Maxthon v5.0.4.3000 et Opera 48.
On reviendra en long et en large sur le CSS, mais

aussi sur le HTML, le DOM et le JavaScript.

Kinshasa, le mardi 22 janvier 2019 - 9:08:54 AM
Mots-clés :
HTML, XHTML, DOM, JAVASCRIPT,

ECMASCRIPT, Programmation Internet, liens, liens
hypertextes, Hyperliens, Hyperlinks, link, Bookmark,
ancre, langage HTML, Hyper-Text Markup
Language, anchor, href, URL, Uniform Resource
Locator, URI, Uniform Resource Identifier, URN,
Uniform Resource Name.

DIASOLUKA Nz. Luyalu

Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Études humanités : Scientifique - Mathématiques & Physique.
Informaticien-amateur, Programmeur et WebMaster.
Chercheur indépendant, autonome et autofinancé,

bénévole, sans aucun conflit d’intérêt ou liens
d'intérêts ou contrainte promotionnelle avec qui
qu’il soit ou quelqu’organisme ou institution /
organisation que ce soit, étatique, paraétatique ou
privé, industriel ou commercial en relation avec le
sujet présenté.
+243 - 851278216 - 899508675 - 991239212 - 902263541 -

813572818
diasfb@mail2world.com
Autre Lecture :
https://www.scribd.com/document/374738470/Le
-Plus-Grand-Secret-de-La-Creation

D’autres publications pouvant aussi intéresser :
• https://www.scribd.com/document/377036251/Le-
Dosage-Des-Medicaments-en-Cac-Cas
Hasard-Des-Thermometres-Non-contact-a-
Infrarouge
•
https://www.scribd.com/document/376222482/Petite
-Introduction-Aux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-
Foi-en-Jesus-Christ-Pour-Quoi-Faire
•
https://www.scribd.com/document/375689778/Lacui
te-visuelle-angulaire
• https://www.scribd.com/document/375349851/La-
variable-This
•
https://www.scribd.com/document/375024162/Fonct
ions-Imbriquees-en-JS
•
https://www.scribd.com/document/374789297/Form
at-Interne-Des-Objets-JavaScript
•
https://www.scribd.com/document/374788758/Iterati
ons-en-JavaScript
Plus-Grand-Secret-de-La-Creation
•
https://www.scribd.com/document/374597969/Nouv

elle-Formule-d-IMC-indice-de-doduite-Selon-Dr-
Diasoluka
•
https://www.scribd.com/document/373847209/Prop
erty-Descriptors
• https://www.scribd.com/document/373833282/l-
Objet-Global-Window
•
https://www.scribd.com/document/372665249/Javas
cript-Tome-II
•
https://www.scribd.com/document/355291488/motilit
e-oculaire-2
•
https://www.scribd.com/document/355291239/motilit
e-oculaire-I
•
https://www.scribd.com/document/355290248/Script
-d-Analyses-Des-Reflexes-Pupillomoteurs
•
https://www.scribd.com/document/321168468/Rens
eignements-Id-et-Anthropometriques
•
https://www.scribd.com/document/320856721/Emis
sion-31-Jul-2016
•
https://www.scribd.com/document/318182982/Com
plication-Visuelle-du-Traitement-de-La-Malaria
•
https://www.scribd.com/document/318180637/Rapp

ort-Entre-Oxymetrie-Et-Type-Respiration
•
https://www.scribd.com/document/315746265/Class
ification-Des-Medicaments
•
https://www.scribd.com/document/315745909/Incon
gruences-Heresies-et-Heterodoxies-de-la-Notion-
de-Laboratoire
•
https://www.scribd.com/document/315745725/Rapp
ort-Entre-Oxymetrie-Et-Type-Respiration

PTT Intro Liens Html2

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

PTT Intro Liens Html2

Transféré par

Droits d'auteur :

Petite Introduction aux Liens

Ce qui a fait la particularité des pages Web ou

Hyper-Texte signifie un texte qui activé,

Un lien hypertexte lie deux documents ou deux

Il existe trois balises pour définir les liens en

Dans ce document nous survolerons l’essentiel

L’élément <a></a> (« anchor » ou ancre)

un autre document : <a href="URL |

un autre endroit du même document :<a

un endroit précis d’un autre document : <a

Diasoluka Nz. Luyalu - 2/45- mardi 22 janvier 2019 - 9:08:54 AM

L’endroit cible du lien dans le document cible #

URL (Uniform Resource Locator)

URI (Uniform Resource Identifier) peut être

URIs = URLs + URNs.

href= « hypertext reference »

Pour agir, le lien doit consister en :

1. Le lien proprement dit :

Diasoluka Nz. Luyalu - 3/45- mardi 22 janvier 2019 - 9:08:54 AM

« Support du lien » (seule partie visible du lien

2. La destination du lien (« target » ou

<a name="cible"> ou <a id="cible">.

Un id (identifier ou identificateur) est unique

Diasoluka Nz. Luyalu - 4/45- mardi 22 janvier 2019 - 9:08:54 AM

Exemples de définition basique/minimale de lien

Ce lien apparait comme ceci dans le navigateur

Diasoluka Nz. Luyalu - 5/45- mardi 22 janvier 2019 - 9:08:54 AM

Exemple de définition de cible de lien

<a name="cible" />

L’Attribut target de la balise <a></a> :

Nous avons vu les attributs href, id, name

Voyons l’Attribut target.

Comme dans la balise <base> (qui définit l’URL

_blank : Dans une nouvelle fenêtre ou tab

Diasoluka Nz. Luyalu - 6/45- mardi 22 janvier 2019 - 9:08:54 AM

_top : Dans l’entièreté du corps de la

Quand on définit les feuilles de style des liens,

a:link, a:visited, a:hover,

Dans un CSS interne :

Depuis un CSS externe (dans un fichier CSS dans

Diasoluka Nz. Luyalu - 7/45- mardi 22 janvier 2019 - 9:08:54 AM

Les feuilles de styles externes s’importent avec

<link rel="stylesheet" href="URL.css

On peut aussi spécifier les types de médias

@import url(URL.css) print ;

Diasoluka Nz. Luyalu - 8/45- mardi 22 janvier 2019 - 9:08:54 AM

La syntaxe générique @import est donc :

@import [ <url> | <string> ] <media-query-list>? ;

Les valeurs possibles pour l'attribut media

Les règles @import doivent précéder toute

Diasoluka Nz. Luyalu - 9/45- mardi 22 janvier 2019 - 9:08:54 AM

Les différents niveaux lexicaux (différentes

On parlera des styles dans une autre section.

Voici un code HTML sans aucun style :

Diasoluka Nz. Luyalu - 10/45- mardi 22 janvier 2019 - 9:08:54 AM

Et voici comment il affiche :

En ajoutant le style suivant dans le <head>

Diasoluka Nz. Luyalu - 11/45- mardi 22 janvier 2019 - 9:08:54 AM

Diasoluka Nz. Luyalu - 12/45- mardi 22 janvier 2019 - 9:08:54 AM

Baisser l’ascenseur pour voir la suite :

Diasoluka Nz. Luyalu - 13/45- mardi 22 janvier 2019 - 9:08:54 AM

Vous voyez que la Note de Bas de Page est

Voici le code complet du HTML pour le menu

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML

Diasoluka Nz. Luyalu - 14/45- mardi 22 janvier 2019 - 9:08:54 AM

margin-left: 13em; margin-top: 1.7em;