Reprise du message précédent :

 
Désolé pour la balise Font ...   Ce qui me fait ..... c'est d'acheter un bouquin qui te parle de HTML5, et qui te colle des balises d'avant-guerre      
Je vais devoir lister tout ce qui n'est plus valide ....    
Dommage, j'ai écrit des annotations sur ce bouquin, sans quoi je l'aurais renvoyé    
 
Question : comment vais-je me former au CSS, si il y a autant de c........ dedans, que pour le HTML 1905      
Réponse : je n'en sais rien ... sur certains sites, c'est idem, ils ne sont pas à jour, d'après les corrections que vous me faites.
Je ferais mieux d'abandonner l'autodidaxie   à 102 ans, je n'aurai pas terminé le HTML 2040    
Désolé je me lâche    
Merci pour tes indications toujours les bienvenues.

Sur ce site, tu as pas mal d'infos à jour, notamment les balises qui ne sont pas HTML5 : https://www.w3schools.com/tags/default.asp
 
Un bouquin a toujour des coquilles, et étant écrit à une certaine date, pour l'informatique, devient vite obsolète. Par ailleurs, sa qualité dépend grandement de son auteur, les relecteurs étant plus là pour corriger les fautes d'orthographe/grammaire et la forme, mais pas le fond quand c'est du technique comme ça.
Toutefois, si tu maîtrises le contenu des 2 bouquins que tu as acheté, je t'assure que tu auras un bon niveau à la fin. Pour les avoir lus, je trouve qu'ils sont de bonne qualité mais connaissant déjà bien le HTML et CSS, y'a pas mal de fautes que je n'ai pas vues car mon cerveau à fait la correction tout seul...

   
Ta remarque est juste, concernant ce bouquin, il faut déjà avoir les connaissances en HTML, pour trier le bon grain de l'ivraie ... ça n'est pas encore dans mes possibilités. Ça viendra avec la pratique.  
Mélanger les anciennes versions(dont finalement je n'ai rien à faire ...)avec les nouvelles, est perturbant, pour un débutant.
Tu crois bien faire, en réalité tu utilises des balises qui n'ont plus cours, pour une syntaxe actuelle correcte.
Son édition est de 2019, mais sa version a peut être été crée avant ...
Quant à l'auteur, il affiche des références professionnelles que je ne peux pas mettre en doute, n'étant pas assez qualifié.
Piocher sur le site n'est pas évident, je ne le connais pas encore suffisamment, pour trouver ce qui m'est utile; il y a tellement de sujets. C'est ce qui fait sa richesse.

Mise en application du CSS dans ma page.
Pour l'instant je me limite à la couleur des titres et du contenu des paragraphes.
Également du contenu des listes à puces. Sans toutefois parvenir à incorporer la taille de la police.
Je voudrais obtenir en CSS la police de <p> en 4pt dans tous les paragraphes.
Apparemment <blockquote> qui crée une marge à gauche du texte, pose problème ...
Il faut que je le replace par une autre par une autre balise qui donne le même résultat(margin ? padding ? ....) je cherche  ...
 
<h3 id="important">
 <blockquote>
  tyle="color:yellow">IMPORTANT
 </blockquote>
</h3>
<h3 FONT size="4pt"><!--Augmente la taille de la police-->
 <blockquote>
  <p>Lors d'un montage, ou après un démontage, remonter les vis métalliques au frein filet moyen, pour éviter le desserrage de celles-ci.<br>
  Beaucoup de modèles se crashent à cause de vis qui se desserrent en vol, ce qui est bien regrettable, alors que l'on peut éviter ce désagrément.<br>  
  Le prix d'une vis qui se desserre est-il équivalent au montant des réparations qu'elle va occasionner ? Certes, non.
  Après démontage des vis,<br> il reste des traces de frein filet; personnellement, je conseille de retirer ces traces, pour un serrage optimal lors du remontage.<br>
  Ce nettoyage est long et fastidieux sur des vis de petit diamètre. Pour ceux qui veulent ignorer cette opération, remplacer les vis par des neuves.<br>
  Nettoyer aussi les taraudages correspondant aux vis démontées, avec les tarauds adaptés. C'est la meilleure façon de procéder proprement.<br>
  Retirer les résidus à l'aide d'une soufflette.
  </p>
 </blockquote>
</h3>
Petit à petit, ça évolue.
 

J'avais de la vie tu mets un <blockquote> dans un <h3> Sémantiquement, ça n'a aucun sens. Pas plus qu'on met un <p> dans un <h3>.
Et je t'ai déjà dit que <h3 FONT size="4pt"> n'était pas valide. Il faut mettre <h3 style="font-size: 4pt;">Important</h3>
 
Ce qui me fait dire que tu utilises les balises pour leur représentation visuelle et non leur valeur sémantique. C'est pour ça qu'en premier lieu, je t'avais vivement conseiller le site d'Alsacreation et le livre de son auteur : https://www.amazon.fr/CSS-Pratique- [...] 00IVPAY66/
 
Si ton contenu est "important", c'est pas <h3> qu'il faut utiliser mais <strong>. Les balises <h1> à <h6> sont là pour faire des titres dans les pages (comme dans Word, les titres de niveaux 1., 1.1., 1.1.1.).
 
Il faut savoir aussi que chaque balise à des valeurs de css par défaut qui dépendent de chaque navigateur. <blockquote> servant à faire des citations, c'est pour ça que tu as une marge par défaut à droite (ou un padding).
 
A défaut d'acheter un nouveau livre, va sur W3School et lit la signification de chaque balise : https://www.w3schools.com/tags/tag_comment.asp
Au moins, tu sauras si une balise existe spécifiquement pour ce que tu cherches à faire.
 
Pourquoi j'insiste autant sur la notion de sémantique des balises ? Indépendamment que c'est bien d'avoir une page HTML bien formée, c'est surtout parce qu'elles sont très importantes pour le bon référencement ds pages web par les moteurs de recherche (mais ça, pour toi, ce n'est pas primordial) et la lecture de celles-ci par les outils de personnes handicapées (accessibilité du web) comme les lecteurs d'écran type NVDA

Je crois que je ne suis plus assez doué pour assimiler le HTML associé au CSS ...
Ça me prend vraiment la tête de passer ma journée à piocher dans le livre, les sites même les meilleurs,  pour des résultats trop aléatoires ...
Je comprends bien la notion de sémantique, mais je n'arrive pas toujours à l'appliquer; tu ouvres une page vierge, tu copies un exemple, ça fonctionne ou pas.
Tu transcris l'exemple sur ta page, et c'est bourré de changements, dans le texte, dans les images ....
J'ai utilisé blockquote, en copiant un exemple, et ça a fonctionné; alors oui, sémantiquement c'est mauvais ... dés le début de la page, c'était ainsi, comme je n'ai pas eu de remarque, j'ai pensé que c'était bon.
Pour rectifier, je vais encore passer des heures à trouver la bonne solution .... si je la trouve.
Vous m'avez aidé, et je vous en remercie; cela me donne une idée de ce qu'est ce langage, mais je ne vais pas continuer à vous solliciter tout le temps, alors que je ne suis pas capable de tout assimiler.
Pour l'instant, je fais un break, je repars en photo (les animaux arrivent)   si l'envie me reprend, je reprendrai, sinon ...... je passerai à autre chose, bien que je n'aime pas abandonner.
Ce qui me fait dire qu'intellectuellement, j'ai baissé avec l'âge.

Je pense pas que ça soit la bonne façon de faire, copier/coller un exemple dans un éditeur de texte, qu'il vienne du bouquin (là, tu recopies et tu risque de faire des erreurs de recopie) ou d'un site web (tu n'as aucune garantie que l'exemple fonctionne et qu'il est techniquement correct).
 
Perso, je regarde des exemples à divers endroits et j'essaye de les comprendre puis j'essaye de refaire un truc du même genre mais en partant de la page blanche, en appliquant ce que j'ai compris et en m'aidant des exemples quand je bute.
Ainsi, tu construis petit bout par petit bout ton code source. Au moins, tu sais ce que fait chaque portion et pas ce que le code, dans son ensemble, est censé faire puisque ce que tu as écrit, tu sais ce qu'il fait.
 
Dans le cas du html et css, le livre de Raphaël Gotter préconise de d'abord faire le HTML en utilisant le minimum de balises (donc pas en fonction du rendu visuel qu'on veut à la fin) et les utiliser uniquement par rapport à leur sémantique pour retranscrire correctement les infos de la page html. Sans mise en forme, on doit déjà pouvoir identifier les titres, les paragraphes, ce qui est important... Une fois que c'est fait, ensuite on fait le CSS pour habiller le HTML et, si vraiment on peut pas faire autrement, ajouter du html pour permettre le rendu visuel via CSS qu'on veut. A la fin, on ajoute le javascript pour améliorer l'ergonomie.
 
J'ai conscience qu'à ton âge, ce mettre dans toutes ces technos, c'est pas évident Vu comment tu galères avec HTML qui est réputé assez simple, le CSS va être compliqué à assimiler. Du coup, Javascript, tu peux oublier

Si ton contenu est "important", c'est pas <h3> qu'il faut utiliser mais <strong>. Les balises <h1> à <h6> sont là pour faire des titres dans les pages (comme dans Word, les titres de niveaux 1., 1.1., 1.1.1.).
 
Cette définition de contenu "important" prête à confusion ... elle ne remplace <h3> ou <h2> .... que si l'on veut que le titre soit en "gras"; si l'on veut un titre "normal" on utilise <h3>, ou <h2> ..., selon la taille du titre souhaitée.
Est-ce que mon raisonnement est bon ? Sinon    
 
Autre problème, maintenant que j'ai remplacé les <h3> par des <strong>, comment remplacer les <blockquote> que j'ai utilisés, pour définir une marge, à gauche de mes paragraphes ?
J'ai essayé avec strong{border: 10px solid red;} je m'y attendais, ça ne fonctionne pas ... je l'ai retiré du head, pour ne pas perturber ma page encore plus ...
 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>Vol en hélico en html</title>
 <style>
  .image{
  float:left;
  margin: 0 15px 15px 0;
  }
 </style>
 
 <style>  
  h1 {color:yellow; text-align: center;}
  li {color:black;}
  p {style="color:black;"}
 </style>  
 
 
</head>
 
<body
  style="background-color:#b2a8f6;"><!--Couleur de fond de la page en bleu-->
  <h1>VOL EN HELICOPTERE RADIOCOMMANDE></h1><!--Texte de niveau 1-->  
     
  <div style="text-align: center;"><!--Centre l'image horizontalement-->
   <img src="file://C:\Users\Perso\Pictures\helico_ba.jpg"alt"Photo hélicoptère"/><!--Affiche l'image-->
  </div>
 <p>
  <blockquote
   style="color:yellow">ALLER DIRECTEMENT A LA PARTIE TRAITANT DE :
  <br>
   <ul>
    <a href="#important">IMPORTANT</a><br>
    <a href="#conseils lors de l'achat d'un modele">CONSEILS LORS DE L'ACHAT D'UN MODELE</a><br>
    <a href="#concernant l'apprentissage du pilotage">CONCERNANT L'APPRENTISSAGE DU PILOTAGE</a><br>
    <a href="#le plateau cyclique">LE PLATEAU CYCLIQUE</a><br>
    <a href="#le rotor principal">LE ROTOR PRINCIPAL</a><br>
    <a href="#le rotor anticouple">LE ROTOR ANTICOUPLE</a><br>
    <a href="#la radiocommande">LA RADIOCOMMANDE</a><br>
    <a href="#la propulsion">LA PROPULSION</a><br>
    <a href="#les servos">LES SERVOS</a><br>
    <a href="#le gyroscope">LE GYROSCOPE</a><br>
    <a href="#quelques photos de montage">QUELQUES PHOTOS DE MONTAGE</a>
   </ul>
  </blockquote>
 </p>
   
<hr>    
  <!--<h3 FONT size="4pt"<!--LA BALISE ENTRANTE <BLOCKQUOTE NE DOIT PAS ETRE FERMEE/FERMER LA BALISE SORTANTE-->
    <blockquote style="color:yellow">RECOMMANDATIONS AUX DEBUTANTS :</blockquote><!--Couleur jaune-->
     <ul><!--Liste à puces-->
     <strong>
      <li>Faire évoluer un modèle radiocommandé n'est pas sans danger. L'hélicoptère peut provoquer des blessures, voir des amputations graves, selon la taille des rotors.</li>
      <li>Respecter les distances de sécurité, concernant le public, ou des visiteurs éventuels.</li>
      <li>Maintenir le modèle en bon état, mécanique et électronique.</li>
      <li>Choisir un terrain bien dégagé, avec une aire de décollage/atterrissage adéquate.</li>
      <li>Avant le vol, toujours vérifier l'état du modèle, de la charge des accus, y compris ceux de la radio.</li>
      <li>Avant de décoller, tester toutes les commandes de vol; au besoin, effectuer un test de portée de la radio.</li>
      <li>Après vol vérifier l'état du modèle, surtout après un incident, une touchette.</li>
      <li>Rester concentré, ne pas se laisser distraire, ne pas s'approcher d'autres modèles en vol; plutôt s'en éloigner.</li>
      <li>Ne quittez pas votre modèle des yeux, quelques secondes suffisent pour se retrouver en situation incontrôlable.</li>
     </strong>
     <!--</FONT>-->
     </ul>
  <!--</h3>-->
 
Si tu peux m'expliquer comment remplacer ces <blockquote> qui ne sont normalement pas prévus pour insérer une marge, par une autre instruction, je te ferai la bise à Noël    
Sinon, pour ne plus ramer, je m'équipe d'un moteur hors bord; ramer, à mon âge, c'est fatiguant    

C'est bien ce que je te dis depuis le début, tu ne comprends pas la sémantique des balises, tu ne regardes que leur rendu visuel.
Un titre d'un chapitre ou paragraphe, ça reste un titre : ça fait partie en quelque sorte d'un sommaire, peut importe comment tu affiches ce titre ensuite.
Si je te mets :

J'ai pas mis de gras ou autre, tu comprends la différence entre les contenus que j'ai mis, ce qui est du titre et ce qui est du contenu (paragraphes).
En HTML, ça va se traduire par :

<h1>1. Intro</h1>
<p>Ici, je mets le contenu de mon intro...</p>

<h1>2. Mon premier chapitre</h1>
<p>Ici, je mets du contenu</p>

<h2>2.1. Une sous-partie</h2>
<p>Ici, je mets un autre contenu avec un truc qui sera <strong>important</strong>...</p>

 
La notion de "important" est dans du texte (donc pas dans des titres), une portion que tu veux mettre en avant au sein d'un paragraphe. Il faut donc vraiment que du prenne connaissance de ce à quoi sert chaque balise (au moins les principales) afin de bien structurer une page web par rapport à la sémantique des balises et du contenu et non par rapport au rendu visuel. Le rendu visuel, c'est fait par le CSS.

Ben forcément, <strong> est une balise inline (comme </a>, <span>, <em> ). Or, les propriétés de type border sont pour des balises block (comme <p>, <div>, <table>, <tr>, <td>...).
Ca aussi, je t'ai indiqué plusieurs fois l'importance de comprendre ces 2 notion de balise inline et block car en termes de positionnement (ie. comportement d'affichage) et les règles css que tu peux appliquer, ça change beaucoup de choses. A noter qu'avec la propriété css display, tu peux transformer une balise inline en block et inversement. C'est pour ça que je te disais que si tu galères déjà avec le HTML (qui est assez simple), tu va en chier avec le CSS (car plus complexe).

Tu n'as pas compris le fonctionnement de <ul> : https://www.w3schools.com/tags/tag_ul.asp
Du coup, tu n'auras pas besoin de mettre des <br /> à la fin de chaque <a>.

Si on réécrit ton code HTML en supprimant les commentaires qui servent à rien et en virant le css qui viendra plus tard (je t'ai juste enlevé le <strong> que tu avais utilisé comme une balise block dans le <ul> des recommandations aux débutants et mis la règle CSS qui va bien pour faire le même rendu visuel), ça donne un truc du genre :

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>Vol en hélico en html</title>
 <style>  
 #illustration {
   float: left;
 }

 #recommandations {
   font-weight: bold;
 }
 </style>  
</head>
  
<body>
  <h1>Vol en hélicoptère radiocommandé></h1>  
  <img id="illustration" src="file://C:\Users\Perso\Pictures\helico_ba.jpg" alt="Photo d'un hélicoptère." />
  <ul id="liens">
    <li><a href="#important"><strong>Important</strong></a></li>
    <li><a href="#conseils-achat-modele">Conseils lors d'un achat d'un modèle</a></li>
    <li><a href="#apprentissage-pilotage">Concernant l'apprentissage du pilotage</a></li>
    <li><a href="#plateau-cyclique">Le plateau cyclique</a></li>
    <li><a href="#rotor-principal">Le rotor principal</a></li>
    <li><a href="#rotor-anticouple">Le rotor anticouple</a></li>
    <li><a href="#radiocommande">La radiocommande</a></li>
    <li><a href="#propulsion">La propulsion</a></li>
    <li><a href="#servos">Les servos</a></li>
    <li><a href="#gyroscope">Le gyroscope</a></li>>
    <li><a href="#photos-montage">Quelques photos de montages</a></li>
   </ul>
    
<hr />    
  <h2>Recommandations aux débutants</h2>
  <p>Ici, tu peux mettre un petit paragraphe d'introduction aux recommandations...</p>
  <ul id="recommandations">
      <li>Faire évoluer un modèle radiocommandé n'est pas sans danger. L'hélicoptère peut provoquer des blessures, voir des amputations graves, selon la taille des rotors.</li>
      <li>Respecter les distances de sécurité, concernant le public, ou des visiteurs éventuels.</li>
      <li>Maintenir le modèle en bon état, mécanique et électronique.</li>
      <li>Choisir un terrain bien dégagé, avec une aire de décollage/atterrissage adéquate.</li>
      <li>Avant le vol, toujours vérifier l'état du modèle, de la charge des accus, y compris ceux de la radio.</li>
      <li>Avant de décoller, tester toutes les commandes de vol; au besoin, effectuer un test de portée de la radio.</li>
      <li>Après vol vérifier l'état du modèle, surtout après un incident, une touchette.</li>
      <li>Rester concentré, ne pas se laisser distraire, ne pas s'approcher d'autres modèles en vol; plutôt s'en éloigner.</li>
      <li>Ne quittez pas votre modèle des yeux, quelques secondes suffisent pour se retrouver en situation incontrôlable.</li>
    </ul>
</body>
</html>

Tu vois, c'est plus propre et plus clair.
Et arrête de mettre des commentaires qui ne servent qu'à paraphraser le code source. C'est parfaitement inutile. On met un commentaire pour expliquer des choses que justement le code source ne permet pas de comprendre.
Mettre que <ul>, c'est pour faire une liste à puce, ben oui, c'est ce que fait <ul> (qui veut dire unordered list, d'où "ul" ).

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>Vol en hélico en html</title>
 <style>  
 #illustration {
   float: left;
 }

 #recommandations {
   font-weight: bold;
 }
 </style>  
</head>
  
<body>
  <h1>Vol en hélicoptère radiocommandé></h1>  
  <img id="illustration" src="file://C:\Users\Perso\Pictures\helico_ba.jpg" alt="Photo d'un hélicoptère." />
  <ul id="liens">
    <li><a href="#important"><strong>Important</strong></a></li>
    <li><a href="#conseils-achat-modele">Conseils lors d'un achat d'un modèle</a></li>
    <li><a href="#apprentissage-pilotage">Concernant l'apprentissage du pilotage</a></li>
    <li><a href="#plateau-cyclique">Le plateau cyclique</a></li>
    <li><a href="#rotor-principal">Le rotor principal</a></li>
    <li><a href="#rotor-anticouple">Le rotor anticouple</a></li>
    <li><a href="#radiocommande">La radiocommande</a></li>
    <li><a href="#propulsion">La propulsion</a></li>
    <li><a href="#servos">Les servos</a></li>
    <li><a href="#gyroscope">Le gyroscope</a></li>>
    <li><a href="#photos-montage">Quelques photos de montages</a></li>
   </ul>
    
<hr />    
  <h2>Recommandations aux débutants</h2>
  <p>Ici, tu peux mettre un petit paragraphe d'introduction aux recommandations...</p>
  <ul id="recommandations">
      <li>Faire évoluer un modèle radiocommandé n'est pas sans danger. L'hélicoptère peut provoquer des blessures, voir des amputations graves, selon la taille des rotors.</li>
      <li>Respecter les distances de sécurité, concernant le public, ou des visiteurs éventuels.</li>
      <li>Maintenir le modèle en bon état, mécanique et électronique.</li>
      <li>Choisir un terrain bien dégagé, avec une aire de décollage/atterrissage adéquate.</li>
      <li>Avant le vol, toujours vérifier l'état du modèle, de la charge des accus, y compris ceux de la radio.</li>
      <li>Avant de décoller, tester toutes les commandes de vol; au besoin, effectuer un test de portée de la radio.</li>
      <li>Après vol vérifier l'état du modèle, surtout après un incident, une touchette.</li>
      <li>Rester concentré, ne pas se laisser distraire, ne pas s'approcher d'autres modèles en vol; plutôt s'en éloigner.</li>
      <li>Ne quittez pas votre modèle des yeux, quelques secondes suffisent pour se retrouver en situation incontrôlable.</li>
    </ul>
</body>
</html>

 
Tu raisonnes comme quelqu'un qui a oublié ses débuts   je ne t'en veux pas. Si je mets des commentaires nombreux, c'est d'une part que je ne maîtrise pas l'anglais ...désolé.
Ces commentaires me serviront plus tard; imagine, je ne pratique plus pendant quelque temps, et je reviens ... je ne me souviendrai plus à quoi servent ces balises. Je devrai quasiment repartir à zéro. C'est ça la vieillesse, on prend des repères.
Je suis d'accord que cela surcharge la lecture du code, mais ça me sera utile.
Si je décide de publier cette page, ce qui n'est pas certain, je peux toujours retirer ces commentaires; j'ai fait une copie.
N'oublie pas, mon anglais se limite à my name is, my flower is beautiful, des conneries du genre. Je n'ai fait que Mat Sup (maternelle supérieure). Tout le reste, je l'ai acquis en heures sup   Nous étions au travail à 16 ans ... alors on s'est démerdé comme on a pu. Il fallait en vouloir !
Lorsque je lis unordered list, je sors le traducteur, ça ne me parle pas du tout ... je cherche le nord (u...NORD...ered) pour moi, le nord est en rouge    
 
Et pour les retours à la ligne <br>, dans la liste <ul>, j'ai suivi le code donné ... ça m'a surpris, mais je n'ai pas essayé de les supprimer pour voir l'effet; je le ferai.
Ça ne me dit toujours pas comment remplacer les <blocquote>; je vais chercher, je finirai bien par trouver.
Y'a encore du pain sur la planche ...    
 

Non, je n'oublie pas les début, je forme régulièrement des stagiaires débutant en dév (bac+1, bac+2...). Si tu ne te souviens pas d'une balise (à quoi elle sert), tu vas sur un site type w3school qui répondra en 2s à ta question. Je fais la même chose avec des fonctions du langage PHP : quand je ne me me souviens plus de ce que fait une fonction ou de l'ordre des paramètres, je vais sur php.net. Je ne surcharge pas mon code source avec des commentaires qui sont une redite de la doc officielle parce que ça ne sert à rien
 
Pour ton niveau d'anglais, c'est sûr que ça va être un handicap car tous les langages de dév sont en anglais (sauf WinDev   ). Toutefois, y'a beaucoup de doc en français, donc ça devrait aller
 
Garde juste 2 règles à respecter impérativement durant ton apprentissage :
1) dans le HTML, on ne met que du fond (ie. du contenu), pas de mise ne forme. On choisit donc les balises uniquement pour leur sémantique, pas leur rendu visuel, afin de structurer les informations dans la page.
2) le css doit  être dans un ou plusieurs fichiers à part, inclus ensuite dans les pages html par une balise <link>. Ainsi, on sépare totalement le fond de la forme. Une petite démo de cette séparation : http://www.csszengarden.com/tr/francais/
 
Bon courage à toi

Est-ce que cette fois, la sémantique est respectée ? .......... ne me dis pas non .... je mords   ou je ...

<h3>ALLER DIRECTEMENT A LA PARTIE TRAITANT DE :</h3>
 <ul><a href="#important">Important</a></ul>
 <ul><a href="#conseils lors de l'achat d'un modele">Conseils lors de l'achat d'un modèle</a></ul>
 <ul><a href="#concernant l'apprentissage du pilotage">Concernant l'apprentissage du pilotage</a></ul>
 <ul><a href="#le plateau cyclique">Le plateau cyclique</a></ul>
 <ul><a href="#le rotor principal">Le rotor principal</a></ul>
 <ul><a href="#le rotor anticouple">Le rotor anticouple</a></ul>
 <ul><a href="#la radiocommande">La radiocommande</a></ul>
 <ul><a href="#la propulsion">La propulsion</a></ul>
 <ul><a href="#les servos">Les servos</a></ul>
 <ul><a href="#le gyroscope">Le gyroscope</a></ul>
 <ul><a href="#quelques photos de montage">Quelques photos de montage</a></ul>
J'ai remplacé <br> qui provoquait le retour à la ligne, pas adaptée, par </ul> qui parait plus logique.

Tous les <blockquote> ont été remplacés par h3{margin: 0;}
J'ai supprimé les marges de titres, texte, parce que c'est trop chiant à gérer. Ça colle un peu trop le texte au bord de l'écran, à mon goût, mais c'est plus facile à mettre en place.
Virés aussi les commentaires ... enfin presque tous; il en reste vraiment très peu. Si je ne m'y retrouve plus (...)  
Et enfin j'ai repris la page de code pour qu'elle soit plus lisible; merci professeur  

Désolé, encore perdu.
<ul> est une balise block qui contient des <li> qui elles, sont des balises inline. Regarde mon post où j'avais réécrit ton code HTML. Tu devrais vite trouver comment corriger ton code
 
Edit : au passage, tu as 2 types d'erreurs dans ton code : le mauvais emploi de <ul> et le nommage de tes ancres. Une ancre est un ID (valeur qu'on va mettre dans un attribut "id" d'une balise). Cet ID doit respecter certaines règles car on ne peut pas mettre n'importe quelle valeur. Là encore, regarde comment j'avais corrigé ton code HTML au niveau des ancres et tu vas voir les ID que j'ai mis.
Je te mets sur la voie mais faut vraiment que tu lises la doc : https://www.w3schools.com/html/html_id.asp  
Au passage, avant que tu me dises que tu galères avec l'anglais, tu peux l'avoir en français en cliquant sur l'icône "Terre" en haut à droite dans le bandeau noir.

 
         
Quel ... comme je travaille sur deux pages différentes, dont une qui sert de "page martyre", j'ai reposté celle qui n'est pas corrigée.  
OK la terre, message reçu, ça va m'aider.
Purée, c'est vrai, on n'a plus 20 ans   je serais en cours, le prof me ferait sortir ...
Malgré cela, les neurones commencent à se dérouiller, c'est peut être bon signe ...

C'est bien, garde le moral
La programmation pour la partie codage (pas algorithmique), c'est beaucoup de rigueur. Le langage a une syntaxe en général assez peu souple (qui ne tolère pas d'écart par rapport à la règle d'écriture). C'est donc bête et discipliné mais une fois que la syntaxe est comprise, ça va tout seul, mais faut être attentif.
D'où pourquoi je t'incite fortement à parcourir W3School pour que tu vois la syntaxe des balises et de leurs attributs.

   
W3School en français, ça va beaucoup mieux. Merci pour ta patience.
J'ai même commencé le quiz ... 10 bonnes réponses sur 40    mais normal, il y en a 30 que je n'ai pas étudiées.
Et de plus l'éditeur incorporé sera très utile pour tester.
 
Pour afficher la photo de début de page, je la veux centrée; apparemment float: center n'existe pas ... en tout cas, ça ne fonctionne pas.
<style>
 #illustration {
   float: left;
 }
</style>
 
<body>
     <img id="illustration" src="file://C:\Users\Perso\Pictures\helico_ba.jpg" alt="Photo d'un hélicoptère." />
</body>
 
Je suis revenu à :
<body>
  <div style="text-align: center;">
     <img src="file://C:\Users\Perso\Pictures\helico_ba.jpg"alt"Photo hélicoptère"/>
  </div>
</body>

Sémantiquement, <div> ne me paraît pas adapté dans ce contexte. Il vaut mieux mettre <p>. Et évite de mettre du CSS dans le code HTML. Toujours séparer le fond de la forme. Du coup, ça serait bien de commencer à mettre ton CSS dans un fichier .css et de faire le lien entre ta page .html et ton .css via une balise <link />.
 
Edit : ton <img /> n'est pas correct syntaxiquement :
<img src="file://C:\Users\Perso\Pictures\helico_ba.jpg" alt="Photo hélicoptère"/>

 
Dans <img src="file://C:\Users\Perso\Pictures\helico_ba.jpg" alt="Photo hélicoptère"/> j'ai viré "file://  je pense qu'il faut conserver C: ............... puisque c'est une adresse absolue.
 
Voici le contenu de mon fichier vol_helico.css
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <title>vol_ hélico en CSS</title>
 <link rel="stylesheet" href="vol_helico.css">  
<style>
 image{
 float:left;
 margin: 0 15px 15px 0;
 }
 
 h1 {color:yellow; text-align: center;
 }
 li {font-size:120%;"
 }
 p {font-size:120%;"
 }
 h3 {color:yellow;
  }
 h3 {margin:0;
  {
 #recommandations{
  font-weight: bold;
 }
</style>  
 
</head>
 
En exécutant, il se produit des changements :
h1 n'est plus en jaune (en noir), et n'est plus centré.
p la police n'est plus à 120%, mais à 100%.
h3 n'est plus en jaune, mais en noir.
Pour les marges, pas de changement.
Les liens fonctionnent, en interne, ou en externe (vers d'autres sites).
 
J'ai un prof qui a décidé de me triturer les méninges   m'en moque, je re découvre ce plaisir    
Je vais essayer de trouver la cause de ces changements ... je ne suis pas sur que la sémantique de mon fichier CSS soit correcte ...

Tout ce que tu as mis dans la balise <style> faut le mettre dans ton fichier style.css qui doit se trouver dans le même répertoire que ton fichier html.
Par contre, à ce stade, pourquoi as-tu mis 2 fichiers css dans ton fichier html
 
Et dans <img />, si, il faut laisser le file:// devant le chemin d'accès pour indiquer le protocole de l'url.
 
Au passage, y'a aucun change que image{
 float:left;
 margin: 0 15px 15px 0;
 }  
fonctionne image n'est pas une balise : c'est img. Et là, ta règle va s'appliquer à toutes les balises img, ce qui n'est probablement pas ce que tu veux faire. Encore une fois, pourquoi tu n'appliques pas ce que j'ai mis dans le code que je t'ai corrigé ? Je t'avais tout fait propre. Au moins, essaye de comprendre le avant/après et si tu ne comprends pas ce que j'ai fait, pose des questions.
 
Quelques conseils en plus :
- utiliser les % pour les tailles de polices n'est pas indiqué sans que tu aies fixé une taille de base à laquelle ce % va s'appliquer (taille de base à mettre dans une règle css pour la balise body). Chaque navigateur n'a pas la même taille de police de base, ni les mêmes marges pour les balises...
- faut éviter d'utiliser les nom des couleurs, préférer le code rgb (ex : pour le rouge, c'est #ff0000. Pareil, les navigateurs n'attribuent pas le même code RGB à certaines couleurs écrites (c'est pas standardisé).

 
[quotemessage]
Le code couleur est changé.
Pour l'instant, je ne vais pas créer de fichier CSS sur cette page, ça la modifie trop sans que je comprenne pourquoi. Je vais créer une autre page avec moins d"éléments.
 
#illustration {
   float: left;
   }
<img id="illustration" src="file://C:\Users\Perso\Pictures\helico_ba.jpg" alt="Photo d'un hélicoptère." />
La photo est à gauche, alors que je la veux centrée. Si je mets right, elle ne change pas. Normal ?
 
En cherchant dans centrer une image dans un float en CSS, voilà ce que j'ai trouvé, sans rien modifier :
text-align: center;
display:inline-block;
Je suppose que l'on met cela entre des } {     sous la syntaxe indiquée ça ne me parle pas du tout.
 
Si dans le répertoire de ma page, il y a deux fichiers CSS différents, avec deux noms différents, est-il possible que la page "charge" les deux fichiers ? Normalement non ?
Avec ma page "Vol en hélicoptère radiocommandée", j'avais nommé le fichier CSS "vol_helico.css"; la page peut elle rechercher un fichier nommé "styles.css".
Ça ne devrait pas être possible puisqu'avec link (je crois) on appelle le fichier "vol_helico.css", et pas un autre. Correct  ?
 
Et là     je supprime tout ce qu'il y a dans le head, la page s'ouvre quand même ... il faut m'expliquer ....    
Je perds un temps fou avec ce genre de c...... et ça me fait douter ...
Sans le fichier CSS ma page est bien, et normalement, avec tes indications, la sémantique est correcte; pas mal d'erreurs ont été corrigées, ce qui a allégé le code.
 
Maintenant, je vais bosser le fichier CSS .... pour voir où ça cloche, chez moi.
Si je mets dans ce fichier tout le début de la page, jusqu'à la fin du head, c'est bon ? Ou uniquement ce qu'il y a dans style ?
Heureusement que tu es là   Quelle patience vous avez les formateurs; je n'aurais jamais pu faire ce métier; enfermé pendant 8 h 00 dans une salle, ou dans un bureau, je m’asphyxie    
[/quotemessage]
 
 

Le but d'un fichier css, c'est d'être appelé par plusieurs pages html (typiquement, il contient la charte graphique d'un site web qui a plusieurs pages, elles doivent donc avoir la même charte).
Ainsi, si tu changes la façon d'afficher tes <h1>, tu n'as qu'à changer à un endroit, dans le fichier css et ça va profiter à toutes tes pages html qui ont du <h1>. Alors que si tu mets le css dans une balise <style> de chaque page html, ben va falloir modifier partout
 
Pour le float, je pensais que tu voulais afficher l'image sur la droite. Si tu veut la centrer :
#illustration {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
 
Mais
#illustration {
text-align: center;
display:inline-block;  
}
marche aussi.

Pas tout suivi, je vais juste rappeler l'ordre des priorités des règles CSS.
Par exemple :

Et on retrouve dans le fichier "ma_feuille_css.css" (située dans le même répertoire que "ma_page_html.html" ) :

Il y a la collusion de 3 règles identiques mais avec des valeurs différentes. Ce sera prioritairement la règle incluse directement dans la balise p via l'attribut style qui sera prise en compte (la couleur #FF0000 qui est le code hexadécimal pour le rouge), si cette dernière n'existait pas ce serait celle incluse dans la balise style sui serait prise en compte (la couleur #00FF00 qui est le code hexadécimal pour le vert), et enfin sinon ce serait celle incluse dans le fichier externe appelé via la balise link qui serait prise en compte (la couleur #00FF00 qui est le code hexadécimal pour le bleu).
L'utilisation d'une feuille externe permet de s'assurer qu'on applique les mêmes règles sur toutes les pages, et que si on veut modifier une règle on puisse le faire qu'une seule fois dans cette feuille plutôt que sur des dizaines ou centaines ou milliers de pages. Dans le même esprit, les règles inscrites dans la balise style (à l'intérieur des balises <head>...</head> ) permettent de s'assurer qu'elles seront bien appliquées à toutes les balises de la page.

 
Je suis désolé, mais, ça ne fonctionne pas, je ne sais pas pour quelle raison ...
En utilisant ces lignes d'instruction, la photo ne se centre pas; cela modifie aussi du texte à droite d'une photo, en le mettant en bas à gauche.
Je ne parviens plus, depuis l'essai avec ces deux instructions à remettre le texte à droite de la photo, comme si "quelque chose" me l'interdit.
Dans une page vierge, c'est pareil ... là, je coince ... mais je continue à chercher.
 
Il n'y a que ça qui fonctionne :
<h3>QUELQUES PHOTOS DE MONTAGE DE L'HELICO :</h3>
<p style="text-align: center;"><img src="C:\Users\Perso\Pictures\montage_1.jpg" class="image" alt"Quelques photos de montage de l'helico"/></p>
La photo est bien centrée.

 
 
La page fonctionne avec du code CSS; j'ai créé un fichier CSS helico.css. IL est bien dans le même répertoire que le fichier HTML.
Toutes les instructions CSS ont bien été placées dans le fichier.
Dans le fichier HTML, j'ai effacé le code CSS (le fichier CSS doit prendre le relais, normalement ?).
Une partie fonctionne correctement, mais il y a le titre de la page qui n'est plus centré, et la couleur n'est pas jaune, mais noire, alors que c'est géré par le HTML.
Dans les listes à puces (non ordonnée), la police est plus petite que dans les paragraphes; pourtant dans le code CSS, j'ai donné une taille de police égale.
 
Bon, ça progresse ........... lentement ......    

Je t'invite à traduire ce que veux dire CSS
Si tu as spécifié des tailles de polices en %, tu vas avoir des surprises dans le cas de balises qui sont contenues dans d'autres.
Ex :
<p>Mon paragraphe qui contient un truc <strong>important</strong>.</p>
 
Et mon CSS :
p { font-size: 120%; }
strong { font-size: 120%; }
 
Et bien le contenu de ton strong ne va pas faire 120% par rapport à la taille de police de base mais 144% (120% * 120%) à cause de l'héritage (règles en cascade).

Oui, on peut mettre un % < 100%. Mais comme dit précédemment, vu que les navigateurs n'ont pas tous la même taille de police de base, il convient de définir une police et sa taille de base pour le <body> dans le css.

 
Oui, j'ai testé et je m'en suis rendu compte.
Je reprends les balises, les attributs, et le CSS plus en détail.
 

 
 
Je suis dans les sélecteurs class et id, l'ancre pour revenir en haut de page, que je trouve très pratique.
 
<div id="top"></div>      A placer en haut de page
 
 
<a href="#top">Remonter en Haut de la page</a>
A placer où l'on veut dans la page, autant de fois que nécessaire.
 
Je vais regarder le texte en deux colonnes; les block .... la gestion de plusieurs pages ...
On n'en finit pas avec ce HTML  

pour la mise en page, regarde les flexbox et grid Ca sera plus facile que de faire du float.

 
Merci du conseil, je vais regarder ça ... je ne savais pas que je faisais du float; pour un marin il vaut mieux floater que couler    
 
Pas facile, pour un débutant de faire les bons choix ... il faut bien connaître le sujet.
   

 
 
Je voudrais afficher une image, et la refermer avec un bouton.
Est-ce qu'il faut considérer que c'est une fenêtre modale ?
Les effets obtenus ne me conviennent pas, je n'ai pas besoin de bordure; si j'en veux une, je le fais avec un logiciel de retouche, directement sur l'image.
Je trouve que c'est plus rapide, et dans ce cas, ça convient bien.
 
Je dis peut-être une bêtise, les fenêtres modales servent plutôt à afficher du texte, des tableaux ... avec des possibilités de changer les éléments de place, de les aligner en vertical,
ou en horizontal ... ?

Une modale c'est un encart dans ta page, ça a été inventé car avant (au début du web ^^) on ouvrait des nouvelles fenêtres appelé à l'époque "pop-up".
Les navigateurs ont commencé à les désactiver car il y'avait trop d'abus.
Pour remplacer on à essayé de simuler une nouvelle fenêtre dans la page.
 
Tu met ce que tu veux comme contenu, une iframe avec une vidéo Youtube, une image, ou du contenu textuel, mais un formulaire, etc...
 
Il existe des solutions 100% en css, par exemple : https://www.cssscript.com/demo/pret [...] -pure-css/

Ce sera plus compliqué que ce que tu as fait.
Tu peux afficher le code source de la page que je t'ai envoyé pour "comprendre" comment il procède, en gros tu doit préparer le contenu html de ta modal et la cacher (avec un display: none puis conditionner son affichage a un clic de bouton grâce au pseudo selecteur :target.
On est clairement dans du css "avancé", mais au moins tu n'a pas a abordé le javascript.  
 
Html:

Style :