{"id":6713,"date":"2024-12-04T10:29:21","date_gmt":"2024-12-04T09:29:21","guid":{"rendered":"https:\/\/cdscweb.fr\/chat-robaze\/?p=6713"},"modified":"2024-12-04T10:34:41","modified_gmt":"2024-12-04T09:34:41","slug":"html-inserer-des-lignes-horizontales","status":"publish","type":"post","link":"https:\/\/cdscweb.fr\/chat-robaze\/html-inserer-des-lignes-horizontales\/","title":{"rendered":"HTML : ins\u00e9rer des lignes horizontales"},"content":{"rendered":"\n
\n

Il est possible d’ins\u00e9rer des lignes horizontales afin de diff\u00e9rencier certaines sections d’une page \u00e0 l’aide de la balise <hr>.
Cette balise ne poss\u00e8de pas de balise de fin, il s’agit donc d’une balise orpheline.
Par d\u00e9faut, une ligne horizontale grise de 100 % est affich\u00e9e.<\/p>\n<\/blockquote>\n\n\n\n

\n
\n
Formater des lignes de diff\u00e9rentes longueurs<\/h5>\n\n\n\n

On peut contr\u00f4ler la longueur d’une ligne \u00e0 l’aide de l’attribut width<\/strong>, et indiquer indiff\u00e9remment une longueur en pixels <\/strong>ou en pourcentage <\/strong>(pr\u00e9f\u00e9rable car la ligne s’adaptera automatiquement \u00e0 l’\u00e9cran de l’internaute)<\/mark><\/em>.
<hr width=\u00a0\u00bb500″><\/strong> Longueur en pixels
<hr width=\u00a0\u00bb95%\u00a0\u00bb><\/strong> Longueur en pourcentage<\/p>\n\n\n\n

\n\n\n\n
Aligner une ligne horizontale<\/h5>\n\n\n\n

L’attribut align <\/strong>de la balise <hr><\/strong> poss\u00e8de trois valeurs : left<\/strong>, center <\/strong>et right <\/strong>afin d’aligner la ligne horizontale par rapport \u00e0 la page.
<hr align=\u00a0\u00bbleft\u00a0\u00bb width=\u00a0\u00bb50%\u00a0\u00bb>
<hr align=\u00a0\u00bbcenter\u00a0\u00bb width=\u00a0\u00bb50%\u00a0\u00bb>
<hr align=\u00a0\u00bbright\u00a0\u00bb width=\u00a0\u00bb50%\u00a0\u00bb><\/strong><\/p>\n<\/div>\n\n\n\n

\n
Formater des lignes de diff\u00e9rentes \u00e9paisseurs<\/h5>\n\n\n\n

L’attribut size <\/strong>de la balise <hr><\/strong> permet de contr\u00f4ler l’\u00e9paisseur de la ligne :
<hr size=\u00a0\u00bb1″>
<hr size=\u00a0\u00bb3″>
<hr size=\u00a0\u00bb5″>
<hr size=\u00a0\u00bb10″>
<hr size=\u00a0\u00bb25″><\/strong><\/p>\n\n\n\n

\n\n\n\n
Attribuer une couleur \u00e0 une ligne<\/h5>\n\n\n\n

L’attribut color <\/strong>de la balise <hr><\/strong> permet de donner une couleur \u00e0 la ligne.
Cet attribut peut prendre pour valeur un nom de couleur ou le code hexad\u00e9cimal<\/a><\/em><\/strong>* de la couleur (plus pr\u00e9cis)<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n

Combiner plusieurs attributs entre eux<\/h5>\n\n\n\n

Permet de cr\u00e9er des lignes horizontales de tailles, \u00e9paisseurs, couleurs et alignements diff\u00e9rents.<\/p>\n\n\n\n

Exercice 5 : cr\u00e9er des lignes horizontales de tailles, \u00e9paisseurs, couleurs et alignements diff\u00e9rents<\/strong><\/h4>\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n
\n
\n
    \n
  1. Ouvrir le Bloc-Notes<\/em><\/strong> <\/li>\n\n\n\n
  2. Le texte ci-contre est un exemple, chacun choisira les lignes qu’il veut dessiner…<\/li>\n<\/ol>\n\n\n\n

    Saisir tout le texte <\/em>
    soi-m\u00eame <\/em>
    pour bien s’entra\u00eener, <\/em>
    on n’apprend rien avec
    un copier-coller !<\/em><\/p>\n<\/div>\n\n\n\n

    \n
    <html>
    <head> 
    <title>Page 5<\/title>
    <meta name=\"description\" content=\"creer des lignes horizontales\">
    <meta name=\"keywords\" content=\"internet, html, lignes\">
    <\/head>
    <body>
    <h1>Voici des lignes<\/h1>
    <hr size=\"1\" color=\"black\">
    <hr align=\"left\" width=\"50%\" size=\"2\" color=\"red\">
    <hr align=\"center\" width=\"50%\" size=\"3\" color=\"purple\">
    <hr align=\"right\" width=\"50%\" size=\"4\" color=\"green\">
    <hr align=\"left\" width=\"75%\" size=\"5\" color=\"blue\">
    <hr align=\"center\" width=\"75%\" size=\"10\" color=\"grey\">
    <hr align=\"right\" width=\"75%\" size=\"25\" color=\"brown\">
    <\/body>
    <\/html><\/pre>\n\n\n\n
    Enregistrer au format exercice-5.html<\/em> <\/strong>
    puis ouvrir dans le navigateur.<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n
    * Dans le prochain article, il sera question des valeurs hexad\u00e9cimales.<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
     Lire<\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":6595,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[119],"tags":[],"class_list":["post-6713","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet"],"_links":{"self":[{"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts\/6713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/comments?post=6713"}],"version-history":[{"count":18,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts\/6713\/revisions"}],"predecessor-version":[{"id":6734,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/posts\/6713\/revisions\/6734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/media\/6595"}],"wp:attachment":[{"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/media?parent=6713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/categories?post=6713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cdscweb.fr\/chat-robaze\/wp-json\/wp\/v2\/tags?post=6713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}