docptt intro liens html2
download 
Plainte Transcription
ptt intro liens html2
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:[email protected]/"></a> <a href="file://username:[email protected]/"></a> <a href="mailto:[email protected]"></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 4 avril 2019 (10:40: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 [email protected] 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
