{"id":875,"date":"2016-08-17T08:01:04","date_gmt":"2016-08-17T08:01:04","guid":{"rendered":"http:\/\/wp.pixerecourt.fr\/cours-info\/?page_id=875"},"modified":"2018-11-14T14:39:03","modified_gmt":"2018-11-14T14:39:03","slug":"pour-aller-plus-loin","status":"publish","type":"page","link":"https:\/\/wp.pixerecourt.fr\/cours-info\/pour-aller-plus-loin\/","title":{"rendered":"Pour aller plus loin: Manipuler du code (HTML, CSS)"},"content":{"rendered":"<\/a>

Cr\u00e9er des blocs pour placer des \u00e9l\u00e9ments<\/h1>\n

La balise<\/p>\n

permet de d\u00e9clarer un bloc de texte. A l'int\u00e9rieur du bloc on pourra placer n'importe quel contenu. La syntaxe est simple:
\nD\u00e9but du bloc: <<\/code>div><\/code>
\nFin du bloc: <<\/code>\/div><\/code>
\nAttention! l'utilisation des DIV peut parfois \u00eatre complexe et pr\u00e9senter des difficult\u00e9s pour les d\u00e9butants. Ce qui suit ne vise pas \u00e0 vous faire conna\u00eetre tout sur le sujet, mais \u00e0 vous pr\u00e9senter quelques exemples simples qui pourront vous servir de mod\u00e8le.<\/div>\n

Des options de style peuvent \u00eatre affect\u00e9es au bloc en utilisant l'attribut style<\/code>. Celles-ci sont pr\u00e9cis\u00e9es dans un langage nomm\u00e9 CSS<\/strong>.<\/p>\n

La syntaxe est \u00e0 pr\u00e9ciser dans la d\u00e9claration du bloc:
\n<<\/code>div style=\"Options s\u00e9par\u00e9es par des points virgules\">Contenu<div<\/code>><\/code><\/p>\n

Exemple1<\/h3>\n

Dans cet exemple on utilise la balise pour cr\u00e9er un bloc sur fond vert, d'une Largeur de 100 pixels, dans lequel on \u00e9crit avec un taille de 15, en Jaune<\/p>\n

Contenu du bloc vert<\/div>\n

voici la syntaxe:
\n<<\/code>div style=\"background:Green;width:100px;font-size:15px;color:yellow;\">Contenu du bloc vert<<\/code>\/div><\/code><\/p>\n

Exemple2<\/h3>\n

On peut inclure une image dans un bloc DIV. Dans cet exemple, on voudrait centrer une image sur la page, pour la placer sur un fond vert de largeur 100.<\/p>\n

 <\/p>\n

\"\"<\/div>\n

L'option \"margin<\/em>\" permettra de centrer le cadre sur la page, mais il faut aussi pr\u00e9ciser qu'on veut centrer l'image dans le bloc DIV avec l'option \"text-align<\/em>\"<\/p>\n

voici la syntaxe:
\n<<\/code>div style=\"background: Green; width: 100px; text-align: center; margin: auto;\"><\/code>
\n<<\/code>img src=\"http:\/\/wp.pixerecourt.fr\/cours-info\/wp-content\/uploads\/sites\/39\/2015\/09\/demenage.gif\"><\/code>
\n<<\/code>\/div><\/code><\/p>\n

Exemple3<\/h3>\n

On peut inclure \u00e9galement un bloc dans un autre bloc. Ici on configure les hauteurs, largeur et couleur de chaque bloc<\/p>\n

\n
bloc1<\/div>\n<\/div>\n

Syntaxe:
\n<<\/code>div style=\"background: Red; width: 80px; height: 80px;\">
\n<\/code><<\/code>div style=\"background: Blue; width: 40px; height: 40px;\">bloc1<\/code><<\/code>\/div>
\n<\/code><<\/code>\/div><\/code><\/p>\n

Exemple4<\/h3>\n

On peut inclure \u00e9galement plusieurs blocs dans un autre bloc. Dans ce cas, on place dans un bloc rouge, \u00e0 l'int\u00e9rieur duquel on place un bloc bleu, et ensuite un bloc jaune<\/p>\n

\n
bloc1<\/div>\n
bloc2<\/div>\n<\/div>\n

Syntaxe:
\n<<\/code>div style=\"background: Red; width: 80px; height: 80px;\">
\n<\/code><<\/code>div style=\"background: Blue; width: 40px; height: 40px;\">bloc1<\/code><<\/code>\/div>
\n<\/code><<\/code>div style=\"background: Yellow; width: 40px; height: 20px;\">bloc2<\/code><<\/code>\/div>
\n<\/code><<\/code>\/div><\/code><\/p>\n

On peut constater que par d\u00e9faut, les blocs se superposent.<\/p>\n

Exemple5<\/h3>\n

On peut modifier le comportement de l'exemple pr\u00e9c\u00e9dent, afin de placer un bloc \u00e0 gauche et un autre \u00e0 droite, en utilisant l'option \"float<\/em>\".
\nAttention, dans l'exemple qui suit, le total des largeurs des bloc1 et bloc2 ne devront pas d\u00e9passer la largeur du bloc rouge. Dans le cas contraire, le bloc2 se placera en dessous du bloc1<\/p>\n

\n
bloc1<\/div>\n
bloc2<\/div>\n<\/div>\n

Syntaxe:
\n<<\/code>div style=\"background:Red;Width:80px;Height:80px;\">
\n<\/code><<\/code>div style=\"background:Blue;Width:40px;Height:40px;Float:Left;\">bloc1<\/code><<\/code>\/div>
\n<\/code><<\/code>div style=\"background:Yellow;Width:40px;Height:40px;Float:Right;\">bloc2<\/code><<\/code>\/div>
\n<\/code><<\/code>\/div><\/code><\/p>\n

Exemple5<\/h3>\n

On peut concevoir un \"tableau\" \u00e0 2 lignes, 2 colonnes. L'option \"clear\" permet de demander un retour \u00e0 la ligne \u00e0 l'int\u00e9rieur du bloc Rouge:<\/p>\n

\n
Bloc1<\/div>\n
Bloc2<\/div>\n
Bloc3<\/div>\n
Bloc4<\/div>\n<\/div>\n

Syntaxe:
\n<<\/code>div style=\"background:Red;Width:90px;Height:80px;\">
\n<\/code><<\/code>div style=\"background:Blue;Width:40px;Height:40px;Float:left;\">bloc1<\/code><<\/code>\/div>
\n<\/code><<\/code>div style=\"background:Yellow;Width:40px;Height:40px;Float:right;\">bloc2<\/code><<\/code>\/div>
\n<\/code><<\/code>div style=\"background:Pink;Width:40px;Height:40px;Float:Left;Clear:Both;\"><\/code><<\/code>\/div><\/code>
\n<<\/code>div style=\"background:Green;Width:40px;Height:40px;Float:Right;\">bloc4<\/code><<\/code>\/div><\/code>
\n<<\/code>\/div><\/code><\/p>\n

Ici, les largeurs et hauteur sont telles que le bloc rouge est compl\u00e8tement cach\u00e9 par les autres blocs.
\nEncore une fois, n\u2019h\u00e9sitez pas \u00e0 reprendre les syntaxes pour les modifier et les tester.
\nVous pouvez aussi tester d'autres options de style CSS<\/a>. La documentation sur le sujet est cons\u00e9quente, mais voici une s\u00e9lection de quelques sites:
\nhttp:\/\/www.css-faciles.com\/proprietes-css-liste-alphabetique.php<\/a>
\nhttp:\/\/www.startyourdev.com\/html\/html-article-styles-css<\/a>
\nhttp:\/\/www.hobbesworld.com\/css\/options.php<\/a><\/p>\n<\/a>

Utilisation du langage CSS<\/h1>\n
Attention: cette partie n\u00e9cessite les droits administrateur!<\/div>\n

les th\u00e8mes WordPress:<\/h2>\n

Comme on l'a vu, les options de configuration d'un th\u00e8me sont limit\u00e9s, tout du moins sur l'interface de personnalisation. Dans l'absolu, les langages du web offre des possibilit\u00e9s illimit\u00e9es mais les interfaces de modification qu'offre les th\u00e8mes sont souvent trop rudimentaire.<\/p>\n

Pour davantage de personnalisation, il faut manipuler, en compl\u00e9ment du code HTML, un langage nomm\u00e9 CSS. Ce langage permet de d\u00e9finir des styles \u00e0 appliquer sur les \u00e9l\u00e9ments de la page (paragraphe, images, bloc DIV...). En g\u00e9n\u00e9rale, il est \u00e9crit dans des fichiers de texte brut, mais ici vous pourrez l'appliquer directement sur WordPress.<\/p>\n

Comme pour l'utilisation des Blocs (voir cette page<\/a>), l'utilisation du CSS peut \u00eatre complexe. Cette page n'a pas la pr\u00e9tention de tout vous apprendre sur ce langage, mais de vous montrer quelques applications faciles \u00e0 tester. Peut-\u00eatre vous permettront-elles d'effectuer vos propres personnalisations!<\/p>\n

Nom de la classe des \u00e9l\u00e9ments \u00e0 modifier:<\/h3>\n

Pour appliquer des modifications \u00e0 un ou plusieurs \u00e9l\u00e9ments d'une page, vous devez savoir d\u00e9signer cet \u00e9l\u00e9ment dans le code qu'on utilisera plus bas. Pour d\u00e9signer un \u00e9l\u00e9ment, on pourra utiliser<\/p>\n