Partage

Mini site one page présentation

Je rencontre certains problémes

16 avril 2018 à 20:49:21

Bonjour/ Bonsoir, j'ai décidé il y a peu de me lancer dans un site de présentation à propos de moi (loisirs, compétences, etc)

Petit probléme j'ai l'impression d'essayer de multiples proprietés en css mais ça ne fonctionne pas. Par là je veux dire que ça ne place pas le texte où ça devrait le place.

Alors je me suis décidé à vous montrer mon code html pour savoir si tout d'abord il y a des erreurs et vous poser quelques questions à propos du positionnement de certaines balises en css.

Tout d'abord voici mon code html (j'ai fait un effort pour l'indentation mais ce n'est pas parfait et je m'en excuse d'emblée)

<!DOCTYPE html>

    <htmL>

        <head>

            <title>NicoGrassetto.com</title>
            <link rel="stylesheet" href="cv.css">
            <meta charset="utf-8">

        </head>

        <body>
            <img class="profil" src="../cv/profil.png" width="10%" height="10%">
            <div id="header"><h1>NICO GRASSETTO</h1>
                <p>nicograssetto@gmail.com</p>
            </div>
                   
                        <div id="house"><img src="../cv/house.png" width="2%" height="2%"></div>
                        <p>Liége, Belgium</p>
                            <img src="../cv/school.png" width="2%" height="2%">
                            <p>Maastricht University</p>
                                    <img src="../cv/birthday.png" width="2%" height="2%">
                                    <p>1999-11-08</p>
                                        <img src="../cv/phone.png" width="2%" height="2%">
                                        <p>0495848890</p>

            <img src="../cv/arrow.png" width="1%" height="1%"><h2>PROFILE</h2>

                <i>"Web users ultimately want to get at data quickly and easily. They don't care as much about attractive sites and pretty design."</i></br>
                <p>Tim Berners-Lee</p>

            <img src="../cv/arrow.png" width="1%" height="1%"><h2>RESIDENCES</h2>

                <p>Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius quam ipsi fruantur.</p>


            <img src="../cv/arrow.png" width="1%" height="1%"><h2>PROJECTS</h2>

                <p>Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius quam ipsi fruantur.</p>

            <img src="../cv/arrow.png" width="1%" height="1%"><h2>SKILLS</h2>

                <ol>
                   
                    <ul><img src="../cv/tick.png" width="1%" height="1%">Ut enim benefici liberalesque sumus, non ut</ul>
                    <ul><img src="../cv/tick.png" width="1%" height="1%">Quanta autem vis amicitiae sit, ex hoc intellegi</ul>
                    <ul><img src="../cv/tick.png" width="1%" height="1%">Circa hos dies Lollianus primae lanuginis</ul>

                </ol>


            <img src="../cv/arrow.png" width="1%" height="1%"><h2>PERSONALITY</h2>

                <ol>
                   
                    <ul><img src="../cv/tick.png" width="1%" height="1%"><p>Ut enim benefici liberalesque sumus, non ut</p></ul>
                    <ul><img src="../cv/tick.png" width="1%" height="1%"><p>Quanta autem vis amicitiae sit, ex hoc intellegi</p></ul>
                    <ul><img src="../cv/tick.png" width="1%" height="1%"><p>Circa hos dies Lollianus primae lanuginis</p></ul>

                </ol>

            <img src="../cv/arrow.png" width="1%" height="1%"><h2>PROGRAMING LANGUAGES</h2>
               
                <ol>
               
                    <ul>
                        <p>HTML5 AND CSS3</p><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
                    </ul>
           
                    <ul>
                        <p>PHP and MYSQL</p><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
                    </ul>

                    <ul>
                        <p>C</p><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
                    </ul>

                    <ul>
                       
                        <p>Python</p><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
                    </ul>

            <img src="../cv/arrow.png" width="1%" height="1%"><h2>LANGUAGES</h2>

                <ol>
                   
                    <ul>
                        <p>English</p><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
                    </ul>

                    <ul>
                        <p>French</p><img src="../cv/fullsquare.png" width="1.5%" height="1.5%">’<img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
                    </ul>
                       
                    <ul>
                        <p>Italian</p><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/fullsquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%"><img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
                    </ul>

                </ol>


               
            <a href="../cv/books.html"><img src="../cv/arrow.png" width="1%" height="1%"><h2>BOOKS</h2></a>
           
            <img src="../cv/arrow.png" width="1%" height="1%"><h2>LEISURES</h2>

                <ol>
                   
                    <ul><img src="../cv/reading.png" width="3%" height="3%"><p>Reading</p></ul>
                    <ul><img src="../cv/coding.png" width="3%" height="3%"><p>Programming</p></ul>
                    <ul><img src="../cv/learning.png" width="3%" height="3%"><p>Learning</p></ul>
                    <ul><img src="../cv/running.png" width="3%" height="3%"><p>Running</p></ul>
                    <ul><img src="../cv/AI.png" width="3%" height="3%"><p>AI</p></ul>

                </ol>
        </body>
       

</htmL>

Ensuite, je n'arrive pas à positionner des images (logo d'une maison, gâteau d'anif etc) en haut en une ligne.

Un truc trés bizzare arrive parfois, l'image est redimensionnée et les proprietés ne fonctionnent juste pas comme elles le devraient :x

Si possible pourriez vous m'envoyer un morceau de css qui devait fonctionner pour les balises du haut

Merci d'avance pour votre aide et bonne journée / soirée!

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
16 avril 2018 à 21:56:21

Bonjour,

pour appliquer du CSS à une balise, il faut préciser qu'on va écrire du CSS

Et ce, grâce à "style"

exemple :

 <div style="height: 1%; width:1%;"></div>

Pour information, il existe aussi "script" qui permet d'appliquer du js

-
Edité par onemail04 16 avril 2018 à 21:57:17

16 avril 2018 à 22:58:30

Le mieux est de mettre le style css dans une feuille à part. Par contre faut revoir la syntaxe html parce que là il y a beaucoup d'erreur.
Le savoir n’est pas difficile, seule sa mise en pratique l’est.
18 avril 2018 à 17:52:33

 Zoki_Marciano a écrit:

Le mieux est de mettre le style css dans une feuille à part. Par contre faut revoir la syntaxe html parce que là il y a beaucoup d'erreur.


Merci beaucoup de ta réponse, pour le css je l'ai déjà mis dans une feuille à part. Est ce que je pourrais juste savoir quoi comme erreurs stp :) ?

Merci d'avance ;)

18 avril 2018 à 18:20:30

Ben il est clair que la présentation du code est un peu fouilli et pas très optimisés notamment au niveau des images.
18 avril 2018 à 19:08:54

Bonsoir, 

Ton code est bourré d'erreurs parce que <ol> et <ul> ne peuvent avoir pour enfant direct que <li> et tu as utilisé des <ul> à la place des <li>.

Tu as aussi oublié de refermer une <ol>.

Pour embellir ton code, il y a des "beautifiers" qui font le travail d'un clic comme celui-ci:

https://ctrlq.org/beautifier/

qui a en outre l'avantage d'indiquer les erreurs en mettant des balises en rouge.

Enfin sur ce forum, utilise la 2ème balise en partant de la droite pour insérer ton code.

Le voici corrigé et ainsi mis en forme:

<!DOCTYPE html>
<htmL>
  <head>
    <title>NicoGrassetto.com
    </title>
    <link rel="stylesheet" href="cv.css">
    <meta charset="utf-8">
  </head>
  <body>
    <img class="profil" src="../cv/profil.png" width="10%" height="10%">
    <div id="header">
      <h1>NICO GRASSETTO
      </h1>
      <p>nicograssetto@gmail.com
      </p>
    </div>
    <div id="house">
      <img src="../cv/house.png" width="2%" height="2%">
    </div>
    <p>Liége, Belgium
    </p>
    <img src="../cv/school.png" width="2%" height="2%">
    <p>Maastricht University
    </p>
    <img src="../cv/birthday.png" width="2%" height="2%">
    <p>1999-11-08
    </p>
    <img src="../cv/phone.png" width="2%" height="2%">
    <p>0495848890
    </p>
    <img src="../cv/arrow.png" width="1%" height="1%">
    <h2>PROFILE
    </h2>
    <i>"Web users ultimately want to get at data quickly and easily. They don't care as much about attractive sites and pretty design."
    </i>
    <br>
    <p>Tim Berners-Lee
    </p>
    <img src="../cv/arrow.png" width="1%" height="1%">
    <h2>RESIDENCES
    </h2>
    <p>Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare,
      tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius
      quam ipsi fruantur.
    </p>
    <img src="../cv/arrow.png" width="1%" height="1%">
    <h2>PROJECTS
    </h2>
    <p>Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare,
      tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius
      quam ipsi fruantur.
    </p>
    <img src="../cv/arrow.png" width="1%" height="1%">
    <h2>SKILLS
    </h2>
    <ol>
      <li>
        <img src="../cv/tick.png" width="1%" height="1%">Ut enim benefici liberalesque sumus, non ut
      </li>
      <li>
        <img src="../cv/tick.png" width="1%" height="1%">Quanta autem vis amicitiae sit, ex hoc intellegi
      </li>
      <li>
        <img src="../cv/tick.png" width="1%" height="1%">Circa hos dies Lollianus primae lanuginis
      </li>
    </ol>
    <img src="../cv/arrow.png" width="1%" height="1%">
    <h2>PERSONALITY
    </h2>
    <ol>
      <li>
        <img src="../cv/tick.png" width="1%" height="1%">
        <p>Ut enim benefici liberalesque sumus, non ut
        </p>
      </li>
      <li>
        <img src="../cv/tick.png" width="1%" height="1%">
        <p>Quanta autem vis amicitiae sit, ex hoc intellegi
        </p>
      </li>
      <li>
        <img src="../cv/tick.png" width="1%" height="1%">
        <p>Circa hos dies Lollianus primae lanuginis
        </p>
      </li>
    </ol>
    <img src="../cv/arrow.png" width="1%" height="1%">
    <h2>PROGRAMING LANGUAGES
    </h2>
    <ol>
      <li>
        <p>HTML5 AND CSS3
        </p>
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%"
             height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
      </li>
      <li>
        <p>PHP and MYSQL
        </p>
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%"
             height="1.5%">
        <img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
        <img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
      </li>
      <li>
        <p>C
        </p>
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
        <img
             src="../cv/emptysquare.png" width="1.5%" height="1.5%">
        <img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
      </li>
      <li>
        <p>Python
        </p>
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
        <img
             src="../cv/emptysquare.png" width="1.5%" height="1.5%">
        <img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
      </li>
    </ol>
    <img src="../cv/arrow.png" width="1%" height="1%">
    <h2>LANGUAGES
    </h2>
    <ol>
      <li>
        <p>English
        </p>
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img
             src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
      </li>
      <li>
        <p>French
        </p>
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">’
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img
             src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
      </li>
      <li>
        <p>Italian
        </p>
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/fullsquare.png" width="1.5%" height="1.5%">
        <img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
        <img src="../cv/emptysquare.png" width="1.5%"
             height="1.5%">
        <img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
        <img src="../cv/emptysquare.png" width="1.5%" height="1.5%">
      </li>
    </ol>
    <a href="../cv/books.html">
      <img src="../cv/arrow.png" width="1%" height="1%">
      <h2>BOOKS
      </h2>
    </a>
    <img src="../cv/arrow.png" width="1%" height="1%">
    <h2>LEISURES
    </h2>
    <ol>
      <li>
        <img src="../cv/reading.png" width="3%" height="3%">
        <p>Reading
        </p>
      </li>
      <li>
        <img src="../cv/coding.png" width="3%" height="3%">
        <p>Programming
        </p>
      </li>
      <li>
        <img src="../cv/learning.png" width="3%" height="3%">
        <p>Learning
        </p>
      </li>
      <li>
        <img src="../cv/running.png" width="3%" height="3%">
        <p>Running
        </p>
      </li>
      <li>
        <img src="../cv/AI.png" width="3%" height="3%">
        <p>AI
        </p>
      </li>
    </ol>
  </body>
</htmL>



-
Edité par philiga 19 avril 2018 à 12:12:35

"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
18 avril 2018 à 22:08:40

Plutôt que de mettre des height et des width à tout va quelque class suffisent et le code devient plus lisible et plus léger.
Le savoir n’est pas difficile, seule sa mise en pratique l’est.
19 avril 2018 à 9:02:32

Effectivement !
nicograssetto, tu auras avantage à alléger ton html en y supprimant tous ces width et height pour piloter cela depuis le CSS.
En précisant qu'il n'y a pas nécessité de remettre autant de classes dans chaque img, mais qu'une classe par ol devrait suffire, puis tu cible dans le css avec
ol.maclasse1 li img{
height:Xpx;
width:Xpx;
}
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
Staff 19 avril 2018 à 9:19:48

Bonjour,

alors techniquement c'est une bonne chose que de remplir les attributs height et width des images, parce que ça indique au navigateur quelle place il doit réserver pour lesdites images pendant le chargement. Sauf que ça doit être les valeurs réelles de l'image, et en pixels - et sans unité.

Ensuite, en CSS on peut surcharger - mais mieux vaut mettre une image déjà à la bonne taille, hein :)

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
19 avril 2018 à 12:22:49

Merci Lamecarlate pour ce genre de rappel.

Toutefois, en l'occurrence, pour optimiser ici, vu que les images sont affichées entre 1 & 3%, je pense qu'il faudrait surtout en créer à ces dimensions microscopiques réelles pour ne pas charger 100x le poids nécessaire et avoir à les redimensionner aussi drastiquement !

Pas besoin alors de préciser la taille dans l'html qui par défaut de précision sera celle de l'image réelle.

"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
Staff 19 avril 2018 à 12:29:02

J'ai dit :

> mieux vaut mettre une image déjà à la bonne taille, hein :)

Tu dis :

> Pas besoin alors de préciser la taille dans l'html qui par défaut de précision sera celle de l'image réelle.

Sauf que si : et c'est justement ce que j'explique plus haut. width et height ne sont pas faits pour redimensionner l'image dans le HTML, mais pour indiquer au navigateur la place à réserver.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
19 avril 2018 à 13:27:09

@Lamecarlate: Oui, mais :

  • si on ne l'indique pas,
  • et si comme je le suppose, il se base alors sur la taille réelle,
  • si, enfin, comme je le recommande, on a pris soin de créer des vignettes de la taille réelle à afficher,

le navigateur fera le bon travail sans besoin de charger puis lire toutes ces instructions, non? 

Avec des images qui font disons 32px sur 27px, tu penses qu'on gagne qqchose à répéter au navigateur toutes ces instructions ?

(qui font -elles- un poids certain dans les fichiers sources sur le serveur donc alourdissent au moment de l'envoi par ce serveur, mais aussi toutes les opérations de sauvegarde de l'utilisateur et de l'hébergeur...) ?

Je peux me tromper, mais j'ai l'impression que dans un cas comme celui-ci où peut alléger un fichier de 150 répétitions d'instructions au mieux non indispensables, on est gagnant sur le plan écologique.

Question subsidiaire:

Quand tu parles de place à réserver, tu parles de l'espace mémoire ou de l'espace géométrique à calculer pour la mise en page?

Parce qu'avec des petites images, l'espace mémoire brut est négligeable ;

s'il s'agit de la pré-mise en page, si on contredit après-coup en css, les instructions html auront doublement été inutiles non? 

"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
Staff 19 avril 2018 à 13:42:47

> le navigateur fera le bon travail sans besoin de charger puis lire toutes ces instructions, non?

Non. Les images étant des éléments vides dits "inlines remplacés", elles n'ont pas de taille avant d'être remplies (ce qui se fait après qu'elles soient ajoutées dans le DOM, en gros). Et je parle de l'espace géométrique à calculer, en effet. Préciser une largeur et une hauteur sur les <img> permet d'éviter des "sauts" de la page.

Exemple : j'ai un texte parsemé d'images (sans attribut height). Le texte se charge plus vite que les images. Les images n'ont pas d'espace réservé puisqu'on n'a pas défini de width ni de height, elles font donc 0 de hauteur. Je commence à lire. Paf, une image se charge, sa hauteur devient réelle, et elle décale donc le reste de la page. Incluant éventuellement ce que je suis en train de lire, qui descend brusquement. Pénible.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
19 avril 2018 à 13:56:29

Ok, c'est plus clair, merci.
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
19 avril 2018 à 17:12:00

Voici ce que dit Rodolphe Rimelé dans son livre HTML5 une référence pour le développeur web :

Si aucune dimension n'est attribué grace à width ou height, le navigateur alloue automatiquement l'espace requis d'après la résolution native du fichier image.
Du point de vue des performances d'affichage et de rendu graphique, il est souvent recommandé de préciser ces valeurs de largeur et hauteur afin d'indiquer dès le chargement du code HTML les dimensions de l'espace à réserver. Le navigateur n'aura pas besoin d'attendre le chargement ultérieur de la ressource image pour en déduire ses propriétés. 

-
Edité par Zoki_Marciano 19 avril 2018 à 17:12:37

Le savoir n’est pas difficile, seule sa mise en pratique l’est.
19 avril 2018 à 17:33:13

Merci Zoki_Marciano pour ce complément d'information ; je présumais donc juste.

Et du coup, je continue de penser que ce qui est valable pour des "vraies" images qui prennent du temps à charger et afficher de haut en bas ne l'est plus pour des icônes à condition qu'on ne fasse pas inutilement charger au navigateur des images 100 fois trop grosses.

Triple avantage donc de les réduire à la source quand elles doivent servir de petites icônes:

on gagne :

  • en poids de stockage / sauvegardes ; 
  • en temps/coût de transmission sur le net ;
  • on peut alléger son html et laisser le navigateur appliquer la taille réelle par défaut: autant de regagné sur les 2 points précédents.
Personnellement, tant que je peux alléger, ça me plait !
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)

Mini site one page présentation

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown