petite introduction liens - html2

publicité
Toute Petite Introduction aux
Liens (links) HTML/XHTML
Programmation Internet - P o u r D é b u t a n t
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 995624714 - 902263541 813572818
La dernière révision de ce texte est disponible sur CD.
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 lange 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.
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…
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 fichierdisque. L’URL/URI peut être absolue (adresse Web complète) ou relative
(locale au même site web).
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 (identificator) 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/diasoluka">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@ftp.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 le lien suivant dans le fichier appelant :
<head>
<link rel="stylesheet" href="URL.css"
type="text/css" />
</head>
On parlera des styles dans une autre section. Mais 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>
<!-- Menu de gauche -->
<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>
<!-- Texte Principal -->
<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>
<a href="#">Lien 4</a>
<a href="#">Lien 5</a>
<a href="#">Lien 6</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 du document (polices et tailles de caractère, couleur
des caractères et du fond, hauteur des lignes, espacements, indentation, effets
spéciaux…).
Bien entendu, HTML comporte aussi quelques attributs permettant d’affiner
rudimentairement la présentation du document : par exemple la balise <b>, les
attributs align, width, border, cellspacing….
CSS signifie « Cascading Style Sheet » = « Feuille de Style en Cascades », 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 même balise (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).
L’ordre de préséance des styles :
1.
Les propriétés définies ou redéfinies avec l’attribut style dans une balise
ont préséance sur toutes les autres définitions.
2.
Les propriétés définies ou redéfinies dans les User style sheets ont
préséance sur celles définies dans toutes les feuilles de styles (les
Author’s dans l’élément style, les importés ou externes et les UserAgents style sheets).
3.
Les propriétés définies ou redéfinies dans l’élément style ont préséance
sur celles définies dans les feuilles de styles externes et les User Agents
Styles.
Feuilles de styles importées : avec
<link rel="stylesheet" href="URL.css" type="text/css" />
ou
@import url(morestyles.css)
4.
Toute définition ou redéfinition de style a préséance sur les user agent
styles.
Pour un même niveau, la dernière redéfinition a préséance sur les définitions
précédentes.
Tous les styles définis dans l’attribut style d’une balise et dans l’élément style
constituent les Author style sheets.
Toute propriété de style non explicitement redéfinie reste intacte.
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%20intro%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 31 mai 2019 (11:47:47 PM).
Mots-clés :
Internet, Hyper-Text Markup Language, Hyper-Texte, lien hypertexte, hyperlien,
BALISE, Tag, élément, inline
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
https://www.scribd.com/document/377035454/Le-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/Lacuite-visuelle-angulaire
https://www.scribd.com/document/375349851/La-variable-This
https://www.scribd.com/document/375024162/Fonctions-Imbriquees-en-JS
https://www.scribd.com/document/374789297/Format-Interne-Des-Objets-JavaScript
https://www.scribd.com/document/374788758/Iterations-en-JavaScript
https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-La-Creation
https://www.scribd.com/document/374597969/Nouvelle-Formule-d-IMC-indice-de-doduite-Selon-Dr-Diasoluka
https://www.scribd.com/document/373847209/Property-Descriptors
https://www.scribd.com/document/373833282/l-Objet-Global-Window
https://www.scribd.com/document/372665249/Javascript-Tome-II
https://www.scribd.com/document/355291488/motilite-oculaire-2
https://www.scribd.com/document/355291239/motilite-oculaire-I
https://www.scribd.com/document/355290248/Script-d-Analyses-Des-Reflexes-Pupillomoteurs
https://www.scribd.com/document/321168468/Renseignements-Id-et-Anthropometriques
https://www.scribd.com/document/320856721/Emission-31-Jul-2016
https://www.scribd.com/document/318182982/Complication-Visuelle-du-Traitement-de-La-Malaria
https://www.scribd.com/document/318180637/Rapport-Entre-Oxymetrie-Et-Type-Respiration
https://www.scribd.com/document/315746265/Classification-Des-Medicaments
https://www.scribd.com/document/315745909/Incongruences-Heresies-et-Heterodoxies-de-la-Notion-de-Laboratoire
https://www.scribd.com/document/315745725/Rapport-Entre-Oxymetrie-Et-Type-Respiration
Téléchargement
Random flashcards
Ce que beaucoup devaient savoir

0 Cartes Jule EDOH

Le lapin

5 Cartes Christine Tourangeau

aaaaaaaaaaaaaaaa

4 Cartes Beniani Ilyes

TEST

2 Cartes Enrico Valle

Créer des cartes mémoire