HTML
Tout ce qui concerne l’html.
Tout ce qui concerne l’html.
Lors du développement d’un formulaire de contact, nous nous sommes aperçus que les caractères accentués étaient non affichés dans les emails reçus.
Ce problème est du à l’encodage utilisé entre vos page Web et le client de messagerie. Dans notre cas, nous testions la réception sur RounduCube.
Afin de contrôler la rapidité de chargement d’un site les développeurs utilisent des outils en ligne tel que YSlow ou encore PageSpeed.
Lors de l’optimisation de notre Player Radio, nous avons utilisé l’outil https://gtmetrix.com.Celui nous à retourné l’erreur suivante :
« Avoid a character set in the meta tag »
Si la page est généré en php il faut ajouter tout en haut de votre page, le code suivant :
123 <?phpheader("Content-Type: text/html; charset=utf-8");?>
Une idée originale regroupant des playlists spécialement conçu pour les développeurs sur MusicForProgramming.
S’il vous arrive d’avoir des caractères accentués remplacé par un point d’interrogation dans vos pages web, c’est que vous avec un petit problème d’encodage.
Pour résoudre ce problème, il vous suffit d’ajouter une ligne dans votre head> de votre fichier HTML.
Dans notre exemple, nous souhaitons que la vidéo d’introduction de notre Home Page WordPress utilisant le thème Onetone se mette en pause lorsque que l’on clique sur l’un des éléments de menu inclut avec le thème.
Il vous suffit pour cela de modifier votre fichier header.php contenu dans votre répertoire du thème à la ligne 54.
Remplacer :
123 $onepage_menu .='<li class="onetone-menuitem"><a id="onetone-'.$sanitize_title.'" href="#'.$sanitize_title.'" ><span>'.$section_menu.'</span></a></li>';Par :
123 $onepage_menu .='<li class="onetone-menuitem"><a id="onetone-'.$sanitize_title.'" class="tubular-pause" href="#'.$sanitize_title.'" ><span>'.$section_menu.'</span></a></li>';
Notre exemple à pour but de centrer un texte de façon vertical sans connaitre le nombre de caractère.
HTML :
123 <div class="parent"><p class="enfant"></p></div>CSS :
123456789 .parent {transform-style: preserve-3d;}.enfant {position: relative;top: 50%;transform: translateY(-50%);}
Dans votre fichier votre_thème/layout/theme.php
Afficher une div sur une page unique
1 2 3 |
<?php if( is_page('1026') ):?> <div class="ma-classe"></div> <?php endif; ?> |
Afficher un bloc de contenu sur une page unique
1 |
<?php echo do_shortcode('[content_block id=1940]') ?> |
Afficher un bloc de contenu et une div sur une page unique
1 2 3 4 5 |
<?php if( is_page('1026') ):?> <div class="teste"> <?php echo do_shortcode('[content_block id=1940]') ?> </div> <?php endif; ?> |
Nous vous invitons à découvrir plus en détails cette solution novatrice sur le site officiel de CSS Sans.
La création d’un site internet passe par la création, l’édition et la correction de nombreux fichiers. Il est souhaitable de toujours mettre en place un système de versioning (version de fichier). Cette bonne pratique de développement nous permet de revenir sur d’anciennes version de fichier et de les comparer avec ceux en ligne.
Une feuille HTML5 type :
123456789101112131415161718192021 <!doctype html><html lang="fr"><head><meta charset="utf-8"><title>Page HTML5</title><link rel="stylesheet" href="css/style.css"><script src="js/script.js"></script></head><body><header></header><nav></nav><section><article></article><aside></aside></section><footer></footer></body></html>Une feuille CSS3 type avec @media query :
12345678910111213141516171819202122232425262728293031 /* MOBILE PORTRAIT */@media only screen and (min-width: 320px) {}/* MOBILE LANDSCAPE */@media only screen and (min-width: 480px) {}/* SMALL TABLET */@media only screen and (min-width: 600px) {}/* TABLET/NETBOOK */@media only screen and (min-width: 768px) {}/* LANDSCAPE TABLET/NETBOOK/LAPTOP */@media only screen and (min-width: 1024px) {}/* LAPTOP Medium resolution*/@media only screen and (min-width: 1280px) {}/* LAPTOP Hight resolution */@media only screen and (min-width: 1400px) {}/* PRINT */@media print {}