Reprise du message précédent :

Non il ne faut pas les utiliser, tout simplement pas.
 
Quand tu réponds à un message, automatiquement le message auquel tu réponds est mis entre balise [quotemsg ], toi tout ce que tu as à faire c'est simplement écrire ton texte tout à la fin du texte déjà présent après les balises.

 
Bon, j'espère que cette fois-ci, c'est OK.
Merci pour l'explication.

là oui c'est nickel

Une petite animation en cours:
https://jsfiddle.net/gq3awjk7/

Que de chemin parcouru en 1 an, franchement je te félicites pour ta persévérance et tes progrès !

tu peux virer tout ce qui est -web-kit-...  
plus besoin de ça surtout pour les animations

 
Merci pour tes encouragements. Sans vos encouragements, j'aurais sans doute abandonné depuis un certain temps ...
Petit à petit, on se prend au "jeu" du codage.
Pour cette petite animation, je souhaite translater les deux points lumineux (qui sont noirs pour l'instant), après chaque balayage du faisceau radar, pour qu'ils montent, en donnant l"impression que ce sont  
deux avions qui avancent.
Sympa les animations, mais complexes.

 
Merci pour ta réponse; je suppose que webkit date un peu ... comme je débute l'animation, je n'en connais pas tous les éléments, il y en a tellement !

en fait en générale quand une propriété CSS sortait elle est d'abord en "expérimental sur les browsers" et ils avaient tous souvent des préfix sur des propriétés :  
 
exemple :  
-o-animation : XXX
-ms-animation: XXX
-moz-animation : XXX
-webkit-animation: XXX
 
C'est valable en fait avec toutes les propriétés CSS, à une époque certaines étaient souvent préfixée pour montrées qu'elle n'étaient pas 100% dispo ou viable.
exemple quand on préfixait certaines props, toutes lesn ouvelles étaient souvent préfixées :  
display: -webkit-inline-block,
-webkit-flex : 1;  
 
Mais avec le temps et l'avancée des navigateurs et leurs sorties très fréquentes on n'utilise plus de préfixe. En tout cas pour ma part, je n'en ai pas utilisé sur mes derniers projets.
 
en CSS il doit y avoir pas loin de 500 propriétés, et je ne les connais pas toutes malheureusement
 
 

https://jsfiddle.net/ndcgy9m2/
 
Tu doit pouvoir améliorer les avions en ajoutant une animation de spot radar en jouant su la taille et l'opacité...
J'ai aussi un peu fait le ménage dans ton jsfidlle en séparant le html du css ! ^^

 
Lorsqu'on débute en HTML et CSS aujourd'hui, sans passer par un stage, il y a tellement de choses à découvrir, qu'on a l'impression de ne pas avancer; on mémorise bien certains éléments, attributs, et pour d'autres, il faut toujours rechercher  
sur le net ou dans les bouquins. Il est vrai aussi qu'avec l'âge, on ne passe pas 8 h 00 devant l'écran. Conscient également que la création d'un site important peut être le résultat du travail d'une équipe.

 
J'ai vu que tu as ajouté le défilement des deux "zincs", sympa; normalement, les deux points doivent avancer après le passage du faisceau, mais c'est plus compliqué ...
Pour les exercices, je profite de la fonction <style> dans jsfiddle qui permet de ne pas afficher toutes les balises, et de ne pas créer un fichier CSS séparé (je n'oublie pas son existence).
Si je veux sauvegarder le fichier dans notepad++, il me faut rajouter les balises html, head, body ... pour que le code soit bien interprété.
 

Je me suis pris au jeu : https://jsfiddle.net/z76q3kr9/
 
Tu peux faire avec l'aller-retour mais c'est encore plus galère.

 
  Bien joué      
C'est vrai qu'il y a bien des possibilités, à condition de maîtriser ... On voit de superbes animations en tout genre.

Une animation de couleurs:
https://jsfiddle.net/o5rzu31y/

propriétés grid-area :
https://jsfiddle.net/m5rhq0j2/

Gérer les bordures, au mieux, en fonction du texte.
https://jsfiddle.net/2mgf3uL4/

Pour expliquer un élément, je voudrais écrire celui-ci, en respectant la syntaxe, sans pour autant activer cet élément.
Par exemple si je code :
header sans mettre les guillemets simples gauche et droite, l'élément ne sera pas actif, mais ça n'est pas la syntaxe.
Je voudrais <header></header> qui ne soit pas pris en compte par le navigateur.
Je ne sais pas si c'est possible ... Je n'ai rien trouvé sur le sujet.

https://www.w3.org/International/qu [...] r.html#use

 
   
Merci pour ta réponse.
Il suffit de placer l'élément entre pour ne pas "activer" cet élément :
&lt; pour <  
&gt; pour >
Je ne connaissais pas (il me reste encore bien des choses à découvrir ...).
 
(Autre problème, concernant la page sur laquelle je travaille actuellement, et qui n'est pas terminée.
Jsfiddle affiche bien tout le contenu de la page, mais lorsque je visualise la page sur un écran, il manque une partie de la page ...)
 
Erreur de ma part ? La page s'affiche correctement ....  
 
J'ai du changer de pc, l'actuel n'étant pas compatible avec W11 (je le conserve avec W10 pour certaines applications qui ne tournent pas avec W11, notamment des simulateurs anciens); je ne pense pas que cela ait un rapport avec ce changement.

https://jsfiddle.net/f7hup9bc/

Une autre page responsive :
 
https://jsfiddle.net/ubx9zg1y/
 
L'activation des liens affichera une erreur 404, normal.

Non ici ce n'est pas un design responsive c'est un design "fluide"
 
un design responsive transforme le design quand celui-ci atteint une taille trop petite pour rester dans ton aspect normal.  
Ex : en mobile, la nav, reste en haut, la barre sur le côté gauche devient soit un menu flottant soit passe en dessous, la colonne à droite passe en dessous.
et la colonne centrale prend toute la largeur.

 
   
Erreur de ma part ...  
N'en n'ayant pas vraiment l'utilité, je n'ai pas de mobile connecté, je ne vois pas le résultat sur ce type d'appareil.
Je vais me pencher sur la question.
Merci pour ta réponse.
 
Vu sur Internet :
 
Avec le responsive design, le contenu du site reste le même qu'importe le device et se réorganise dès qu'il atteint son seuil prédéfini (ou point de rupture). Quant au fluide, il permet de s'adapter dans la limite de résolution d'un seul device (exemple : d'un écran mobile de 640px à 720px).
 
Cela veut dire que je dois limiter la résolution à 640 / 720px pour les mobiles ?

Tu as un outils dans les navigateurs moderne pour "tester" la navigation mobile.
En général tu peux trouver cet outil en faisant un clic droit -> inspecter sur n'importe quel page ce qui vas t'ouvrir un volet (ou une nouvelle page) avec un bouton qui vas créer une fenêtre redimensionnable (genre comme une iframe) de ton contenu.
 
Exemple pour Firefox :
https://firefox--source--docs-mozil [...] r_pto=wapp

Tu peux tester via les developper tools de ton browser, ou aussi tout simplement en réduisant la largeur de ta fenêtre.
 
Il est très important de pouvoir tester son design sous toutes les largeurs en redimensionnant son navigateur.

Sinon perso j'utilise Responsively, un petit soft (gratuit et open source) pour visionner un site sur différentes tailles d'écrans.
Il y en a certainement d'autres.

 
Merci pour toutes ces indications.
Je ne sais pas pourquoi, j'avais marqué que la dernière page est responsive, d'autant que j'avais mis en commentaire "design flexible" ... un moment d'inattention sans doute    
Avec Jsfiddle, on peut aussi réduire la page en largeur, pour voir ce qui se passe.

 
Je l'ai téléchargé mais je n'arrive pas à ouvrir un fichier ... je suis à la recherche de tutos en français pour l'utiliser.
Avec W11 toutes mes pages sont décalées sur la gauche, alors qu'avec W10 il n'y avait pas ce problème.
Pour W11 avec Goole il suffit de passer en plein écran pour que la page soit affichée correctement; un bug de W11 ?
Il est installé depuis peu, je découvre.

J'avais envie de m'intéresser à Bootstrap ... vu la complexité des éléments, je crois que je vais rester cantonné à HTML et  à CSS.    
Le mémoire serait mise à rude épreuve.    
Dans l'exemple suivant, je n'arrive même pas à positionner un svg ...
 
https://jsfiddle.net/vj095gox/

c'est quoi que tu veux faire là dans ton example bootstrap n'a rien à voir avec SVG.

 
Je ne pouvais plus te répondre, je ne pouvais plus m'identifier sur le forum; j'ai du changer le mot de passe ....???
 
Apparemment SVG se retrouve aussi dans HTML.
Je voulais déplacer la première icône sur la droite, je la trouve trop collée à droite, la position définie étant (0 0 (début de l'écran en haut, à gauche)).
C'est cette position que je voulais changer.
Comme je le disais, je ne pense pas continuer avec Bootstrap, trop d'instructions, trop d'attributs à gérer; les tutos sont bien faits, mais par des personnes qui maîtrisent
et qui vont trop vite, pour moi.
Quand je regarde rien qu'un élément path, c'est fou les possibilités qu'il offre mais c'est complexe, et ça ne représente qu'une infime partie des  connaissances nécessaires.
Je ne pense pas y arriver, sans y passer un temps fou ou en ayant à fournir un effort trop important.
 
Déjà bien content d'être arrivé là en HTML .

Un petit essai avec un modèle simple.
 
https://jsfiddle.net/sw9n6vyd/

Je souhaite télécharger Bootstrap mais les pages de chargement du site ne le permettent pas ... il y a un message d'erreur page non valide. Si j'essaie de télécharger le fichier CSS mini de Bootstrap, c'est pareil. Pourtant, il semble nécessaire de l'installer... sans ce fichier les pages ne s'affichent pas correctement.
Quelqu'un a-t'il une idée ?

TU as un bouton "download bootstrap" sur le site :  
https://getbootstrap.com/2.0.2/
 
Et tu obtiens un zip qui est télécharger via ton navigateur.
 
C'est quoi ton soucis ?

 
Et ce zip, je le mets avec ma page ?
 
En fait, je me demande si je ne me complique pas la vie ...
Si j'inclus ces deux lignes dans la head, ça devrait fonctionner.

 
Il me semble tout de même plus pratique d'avoir ce fichier CSS en local ...

 
Cette version 2 est un peu ancienne ... je voulais la version 5 ...
 
En ajoutant dans mon code les deux lignes citées plus haut, mon affichage est correct, après avoir modifié mon propre code CSS.
Comme le fichier CSS Bootstrap n'était pas actif, il était normal que les lignes et les colonnes ne s'affichent pas correctement; il n'y avait pas de colonnes dans ma page, que des lignes.
Je commence à entrevoir la philosophie de Bootstrap.

tu le décompresses et tu prends le fichier bootstrap.min.css et tu le mets dans le dossier de ton projets et tu l'appel avec <link>

 
OK merci, c'est ce que j'ai fait intuitivement ...
 
Comment aligner une liste avec un titre (h1)?  
j'ai supprimé les puces (ce qui n'est pas prévu pour changer l'alignement, bien sûr).
J'ai essayé padding-left: 0;
text-align: left; ça ne fonctionne pas ...
Est-ce qu'une liste est considérée comme un bloc ?

Pour aligner la liste avec le titre :
padding-left: 0;
margin: 0;
Les marges, tout un poème ...

Un peu de lecture :
https://developer.mozilla.org/fr/do [...] _box_model
 
Le meilleur outils pour visualiser les "margin" et les "padding" c'est d'utiliser les outils de développement de ton navigateur.
Tu fait un clic droit dans ta page que tu veux analyser => inspecter et ça vas t'ouvrir une fenêtre pour debugger ton code, en survolant avec la souri les éléments de ta page, les marges apparaitront en jaune et les padding en violet (en tout cas sur Firefox ^^).

 
Je connais mais je ne sais pas l'utiliser dans toutes ses possibilités, il va falloir que je consulte quelques tutos concernant le sujet.
Concernant Bootstrap j'ai trouvé un site moins compliqué que celui de Bootstrap, plus à la portée des débutants.
Je voulais utiliser un bouton de mon cru, mais ça ne fonctionne pas, puisque Bootstrap a un bouton simplifié dans son fichier CSS.
En fait, malgré son fichier CSS, il faut créer aussi son propre fichier CSS, pour obtenir certains effets.
On avance ...