Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2909 connectés 

 


 Mot :   Pseudo :  
  Aller à la page :
 
 Page :   1  2  3  4  5  ..  16  17  18  19  20  21
Auteur Sujet :

Insertion image en html depuis mon ordi

n°2409603
rufo
Pas me confondre avec Lycos!
Posté le 13-02-2022 à 15:40:51  profilanswer
 

Reprise du message précédent :
C'est là que tu te trompes. On voit très facilement un autodidacte de qq'un qui a suivi une formation. Dès qu'on gratte un peu la surface, on voit rapidement qu'il y a peu de background théorique. Or, savoir sur quelle théorie repose tel ou tel concept est important, notamment pour savoir comment modéliser un problème puis trouver l'algorithme qui va permettre de le résoudre. Avoir ces bases permet de prendre suffisamment de recul pour voir des modélisations qu'on peut adapter à des pbs qui, de prime abord n'auraient pas forcément collé ;)
 
Edit : on s'éloigne un peu du sujet de base mais même pour les langages, comprendre ce que peut apporter un langage objet par rapport à du procédural dans tel ou tel cas est important.

Message cité 1 fois
Message édité par rufo le 13-02-2022 à 15:43:39

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
mood
Publicité
Posté le 13-02-2022 à 15:40:51  profilanswer
 

n°2409612
Harmo88
Il n\\
Posté le 13-02-2022 à 20:45:32  profilanswer
 

rufo a écrit :

C'est là que tu te trompes. On voit très facilement un autodidacte de qq'un qui a suivi une formation. Dès qu'on gratte un peu la surface, on voit rapidement qu'il y a peu de background théorique. Or, savoir sur quelle théorie repose tel ou tel concept est important, notamment pour savoir comment modéliser un problème puis trouver l'algorithme qui va permettre de le résoudre. Avoir ces bases permet de prendre suffisamment de recul pour voir des modélisations qu'on peut adapter à des pbs qui, de prime abord n'auraient pas forcément collé ;)
 
Edit : on s'éloigne un peu du sujet de base mais même pour les langages, comprendre ce que peut apporter un langage objet par rapport à du procédural dans tel ou tel cas est important.


 
J'aurais aimé répondre, mais il est vrai que c'est hors sujet, et ce serait trop long; donc je reviens à mes moutons.
Pour les balises, effectivement, il est préférable d'en connaître la syntaxe, au moins les plus employées, en ce qui concerne les réalisations de chacun.
Il est certain que je ne les apprendrai sûrement pas toutes; il y a aussi les attributs, ce qui n'est pas non plus une mince affaire ... mais comme je ne lâche pas facilement un sujet qui m'intéresse ...
 
En nouveau projet, création d'une page "de vrac"; au fur et à mesure que j'avance dans le livre, je crée un exemple, d'où l'appellation.

n°2409661
Harmo88
Il n\\
Posté le 14-02-2022 à 17:17:41  profilanswer
 

:hello:  
Que pensez-vous de ce script ? Sous cette forme, pour moi, il ne peut pas être reconnu, vu qu'il commence par la balise de commentaire ...
En supprimant cette balise, ça ne fonctionne toujours pas. Ne connaissant pas encore l'utilisation des crochets, je n'arrive pas à modifier correctement.
Si je comprends bien, ce script a pour fonction la reconnaissance des éléments par les anciens navigateurs (bien que cela ne soit pas utile, comme dit précédemment).
Ce qui m'ennuie, c'est de constater qu'un livre écrit par un professionnel, comporte déjà autant d'erreurs. J'espère qu'il n'en sera pas ainsi tout le long de ce livre ... je suis seulement à la page 32  :D  
 
<!--[if it  IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
 
Comme dirait mon professeur: vous avez une heure  :lol:  
 
 :hello:  
 

n°2409667
David Bori​ng
Posté le 14-02-2022 à 17:57:58  profilanswer
 

Non ce n'est pas correct, tu as sans fait une erreur en recopiant le code.
C'est facile de se tromper entre i et l
lt < (less than)
gt > (greater than)
eq == (equal to)
ne != (not equal to)
gte >= (greater than or equal to)
lte <= (less than or equal to)
 
Sinon le code est bon.
Il n'y a pas donc pas d'erreurs dans ton livre.

n°2409671
Harmo88
Il n\\
Posté le 14-02-2022 à 18:53:42  profilanswer
 

David Boring a écrit :

Non ce n'est pas correct, tu as sans fait une erreur en recopiant le code.
C'est facile de se tromper entre i et l
lt < (less than)
gt > (greater than)
eq == (equal to)
ne != (not equal to)
gte >= (greater than or equal to)
lte <= (less than or equal to)
 
Sinon le code est bon.
Il n'y a pas donc pas d'erreurs dans ton livre.


 
Merci pour la réponse; il y avait bien une erreur car il était marqué 1t, le chiffre un, et non pas lt, j'ai supposé à tort que c'était it .... ne connaissant pas ces abréviations ...
Lorsque j'ai un doute, je relis ce que j'ai tapé; il est vrai que les fautes de frappe arrivent ...
Je vais réessayer sans la balise de commentaire, qui ne devrait pas être là ... et je vais corriger sur le bouquin.
 :jap:  
 

n°2409684
Harmo88
Il n\\
Posté le 14-02-2022 à 21:32:25  profilanswer
 

Harmo88 a écrit :


 
Merci pour la réponse; il y avait bien une erreur car il était marqué 1t, le chiffre un, et non pas lt, j'ai supposé à tort que c'était it .... ne connaissant pas ces abréviations ...
Lorsque j'ai un doute, je relis ce que j'ai tapé; il est vrai que les fautes de frappe arrivent ...
Je vais réessayer sans la balise de commentaire, qui ne devrait pas être là ... et je vais corriger sur le bouquin.
 :jap:  
 


 
Ça ne fonctionne pas, je passe à autre chose.
 
<p>Votre note est de 16 : <meter value="16" min="0" low="4" max="20" hight="18" optimum="19"> sur 20.</p><!-- si note= 0  4... l'affichage ne change pas de la note 16, et (sur 20) ne s'affiche pas-->  
Dans ce cas, le texte sur 20 ne s'affiche pas ...
J'ai placé (sur 20,) à côté Votre note, et avant 16, ainsi il s'affiche.
Je n'en n'ai pas fini de :pt1cable:  
 
J'ai un problème avec l'identification sur le site; mon identification est reconnue, mais pas effective; je dois vider l'historique récent à chaque fois, pour être vraiment identifié, et pouvoir poster.
C'est curieux, je ne rencontre pas ce problème sur un site de photos, sur lequel je postais très souvent; ni aucun autre site ...

n°2409688
yann39
⛅⏰♫♪☹☕
Posté le 14-02-2022 à 22:30:26  profilanswer
 

Oui il faut bien fermer ta balise meter :
 

Code :
  1. <p>Votre note est de 16 : <meter value="16" min="0" low="4" max="20" hight="18" optimum="19"/> sur 20.</p>


 
Il y a seulement certaines balises qui n'ont pas besoin d'être fermées en HTML, par exemple <br>, <hr> ou <img>, on appel ça des "void elements", des éléments qui n'ont jamais de contenu.
Ce n'est pas le cas de <meter/> (équivaut à <meter></meter> ).
 
Avant, en XHTML, il fallait systématiquement fermer les balises (à la manière XML), du coup personnellement j'ai tellement fait de XHTML que je continue parfois, à tort, de fermer mes balises (<br/>, <hr/> ou <img src="" /> ), les navigateurs font ensuite le travail de conversion, mais ce n'est pas forcément une bonne pratique  [:darjeeling]

Message cité 1 fois
Message édité par yann39 le 14-02-2022 à 22:48:50

---------------
Topic achats/ventes | Feed-back | Worklog
n°2409691
Harmo88
Il n\\
Posté le 14-02-2022 à 22:59:12  profilanswer
 

yann39 a écrit :

Oui il faut bien fermer ta balise meter :
 

Code :
  1. <p>Votre note est de 16 : <meter value="16" min="0" low="4" max="20" hight="18" optimum="19"/> sur 20.</p>


 
Il y a seulement certaines balises qui n'ont pas besoin d'être fermées en HTML, par exemple <br>, <hr> ou <img>, on appel ça des "void elements", des éléments qui n'ont jamais de contenu.
Ce n'est pas le cas de <meter/> (équivaut à <meter></meter> ).
 
Avant, en XHTML, il fallait systématiquement fermer les balises (à la manière XML), du coup personnellement j'ai tellement fait de XHTML que je continue parfois, à tort, de fermer mes balises (<br/>, <hr/> ou <img src="" /> ), les navigateurs font ensuite le travail de conversion, mais ce n'est pas forcément une bonne pratique  [:darjeeling]


 
Merci.
J'ai fermé la balise, ça ne change rien au fonctionnement; quelque soit la note que j'applique, la barre de progression ne change pas.
Ce qui est pénible, quand on ne maîtrise pas à fond le sujet, et c'est mon cas, c'est qu'il faut vérifier le contenu du livre ... tu doutes de toi, mais en fait, il y a une erreur dans le livre, cette fois c'est sur.
En plus du livre, il te faut continuer à chercher sur le web l'élément concerné; double travail  :D  
Bon, comme dit l'adage : Paris ne s'est pas construit en un jour ... l'HTML non plus; donc, patience.
 :hello:  

n°2409700
rufo
Pas me confondre avec Lycos!
Posté le 15-02-2022 à 07:44:34  profilanswer
 

C'est pas hight mais high l'attribut : https://developer.mozilla.org/fr/do [...] ment/Meter


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2409702
Harmo88
Il n\\
Posté le 15-02-2022 à 08:47:26  profilanswer
 


 
 :hello:  
Encore une erreur dans le livre ...
Il était bien indiqué HIGHT(en minuscules) ... j'ai corrigé avec HIGH, cette fois, lorsque je change la note, la barre de progression change de couleur, selon que c'est une note haute ou basse.
 
Si je dois vérifier toutes les nouvelles balises que je dois utiliser, je ne suis pas au bout de mes peines, mais je le ferai.
Je commence à regretter l'achat de ces livres; si il y a autant d'erreurs avec le CSS .....
 
Merci pour vos réponses, ça m'aide vraiment.

mood
Publicité
Posté le 15-02-2022 à 08:47:26  profilanswer
 

n°2409704
Harmo88
Il n\\
Posté le 15-02-2022 à 10:07:56  profilanswer
 

Il y a tout de même du positif  :)  
Eléments <figure> <figcaption>
 
<p>Voici une photo d'un cygne.</p>
  <figure>
   <img src="file://C:\Users\Perso\Pictures\7500\HUB_0471_A.jpg"alt"Photo de cygne"/><!--On peut insérer plusieurs images avec<img> dans un seul élément <figure>. Voir aussi images adaptives, pour adapter la résolution-->
   <figcaption>HUB_0471_A.jpg</figcaption>
  </figure>
J'ai ajouté, pour centrer la photo : + les commentaires pour mémoire.
 
<p>Voici une photo d'un cygne.</p>
  <figure>
   <div style="text-align: center;"><!--Pour centrer la photo dans la page. Sans la photo est à gauche de la page. Photo réduite à1200*800 px-->
   <img src="file://C:\Users\Perso\Pictures\7500\HUB_0471_A.jpg"alt"Photo de cygne"/><!--On peut insérer plusieurs images avec<img> dans un seul élément <figure>. Voir aussi images adaptives-->
   <figcaption>HUB_0471_A.jpg</figcaption>
  </figure>

n°2409803
MaybeEijOr​Not
but someone at least
Posté le 15-02-2022 à 18:41:07  profilanswer
 

Si j'ai bien suivi, tu es retourné sur Notepad++ ?
Il y a la coloration syntaxique qui permet de mettre en avant les erreurs de syntaxe, Notepad++ doit connaitre la plupart des balises et des attributs, si ces derniers ne sont pas écrits de la bonne couleur, interroge-toi.
Mais sinon, une fois que tu affiches ta page sur un navigateur, tu dois pouvoir faire Ctrl+U pour afficher le code source de la page. Sur Firefox, les erreurs de syntaxe apparaissent alors en rouge vif.

 

De ce que j'ai suivi tu fais pas mal d'erreurs de syntaxe (balises non fermées, problèmes d'attributs et de valeurs, etc.). Juste en lisant ton dernier message, je décèle un problème avec ta balise img et la photo de cygne. Faut vraiment apprendre à être plus vigilant, donc trouver le bon outil qui te permettra de l'être. Un peu d'entrainement avec le coloration syntaxique de Notepad++ peut suffire je suppose. ;)

Message cité 1 fois
Message édité par MaybeEijOrNot le 15-02-2022 à 18:41:42

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2409813
yann39
⛅⏰♫♪☹☕
Posté le 15-02-2022 à 19:41:30  profilanswer
 

Il est très difficile de trouver de bon livres sur la programmation en général, les technologies évoluent trop vite et les livres deviennent obsolètes très rapidement.
Les livres c'est bien pour la théorie, et pour pouvoir lire dans les transports ou tranquille dans son lit  [:lune]  
 
Mais pour travailler le mieux reste de loin les ressources sur le web, mais là aussi il faut faire attention car beaucoup ne sont pas mises à jour, et la plupart des bonnes ressources sont en anglais, comme les bons outils.
 
Il faut même faire attention avec les cours payants (coursera, Linkedin learning, etc.), certains formateurs sont loin d'être des pros et vendent des formations hors de prix.
 
En français, openclassroom, qui t'avait été cité précédemment, est assez bien et plutôt fiable, par exemple ce cours https://openclassrooms.com/fr/cours [...] l5-et-css3
La documentation de Mozilla est bien aussi pour une formation débutant : https://developer.mozilla.org/fr/docs/Learn
 
Si tu arrivais déjà à faire ces formations complètement tu aurais une bonne petite base ;)


---------------
Topic achats/ventes | Feed-back | Worklog
n°2409821
Harmo88
Il n\\
Posté le 15-02-2022 à 20:11:02  profilanswer
 

MaybeEijOrNot a écrit :

Si j'ai bien suivi, tu es retourné sur Notepad++ ?
Il y a la coloration syntaxique qui permet de mettre en avant les erreurs de syntaxe, Notepad++ doit connaitre la plupart des balises et des attributs, si ces derniers ne sont pas écrits de la bonne couleur, interroge-toi.
Mais sinon, une fois que tu affiches ta page sur un navigateur, tu dois pouvoir faire Ctrl+U pour afficher le code source de la page. Sur Firefox, les erreurs de syntaxe apparaissent alors en rouge vif.
 
De ce que j'ai suivi tu fais pas mal d'erreurs de syntaxe (balises non fermées, problèmes d'attributs et de valeurs, etc.). Juste en lisant ton dernier message, je décèle un problème avec ta balise img et la photo de cygne. Faut vraiment apprendre à être plus vigilant, donc trouver le bon outil qui te permettra de l'être. Un peu d'entrainement avec le coloration syntaxique de Notepad++ peut suffire je suppose. ;)


 
Oui, je reprends Notepad++, je ne maîtrise pas suffisamment l'anglais pour bien gérer Visual Studio Code. Dommage; pour l'instant Notepad me convient.
Il a la coloration syntaxique, qui aide, mais qui ne donne pas les réponses à un débutant ...  :ange:  
Je pioche sur le web, il y a des sites où c'est un peu n'importe quoi ... d'autres plus sérieux, mais il faut déjà posséder un bon niveau pour suivre.
En une dizaine de jours, j'ai tout de même progressé, à mon rythme, qui n'est plus celui d'un tout jeune; tant que je ne recule pas, je suis content.  
Merci pour toutes tes indications, que je vais suivre.
 
Par contre, pour la balise img, et la photo du cygne, je ne vois pas où est le problème, la photo s'affiche bien(elle est locale), elle est bien centrée, comme je le voulais ...
Il y a des erreurs de syntaxe qui sont imputables au livre que j'ai acheté, c'est pour cette raison que je fais appel à vous; ensuite je corrige les erreurs du livre, pour ne pas les retrouver plus tard, si j'ai besoin d'un petit rappel.
 :hello:

n°2409824
Harmo88
Il n\\
Posté le 15-02-2022 à 20:28:44  profilanswer
 

yann39 a écrit :

Il est très difficile de trouver de bon livres sur la programmation en général, les technologies évoluent trop vite et les livres deviennent obsolètes très rapidement.
Les livres c'est bien pour la théorie, et pour pouvoir lire dans les transports ou tranquille dans son lit  [:lune]  
 
Mais pour travailler le mieux reste de loin les ressources sur le web, mais là aussi il faut faire attention car beaucoup ne sont pas mises à jour, et la plupart des bonnes ressources sont en anglais, comme les bons outils.
 
Il faut même faire attention avec les cours payants (coursera, Linkedin learning, etc.), certains formateurs sont loin d'être des pros et vendent des formations hors de prix.
 
En français, openclassroom, qui t'avait été cité précédemment, est assez bien et plutôt fiable, par exemple ce cours https://openclassrooms.com/fr/cours [...] l5-et-css3
La documentation de Mozilla est bien aussi pour une formation débutant : https://developer.mozilla.org/fr/docs/Learn
 
Si tu arrivais déjà à faire ces formations complètement tu aurais une bonne petite base ;)


Il est certain que la méconnaissance de l'anglais ne m'aide pas. Lorsque j'étais jeune, il n'était pas au programme, le français était encore une langue de poids.
Je te rassure, je n'ai pas l'intention de suivre une formation payante ... à quoi me servirait-elle ? Je ne suis plus en recherche d'emploi, à mon âge  :lol: Je suis recyclé d'office.
Le livre, pour nous, les anciens, reste aussi un moyen d'apprentissage; il ne faut pas oublier que nous n'avions pas de PC à notre disposition. Nous dépendions des livres, et il reste un vieux réflexe.
Je vais examiner les sites que tu m'indiques. Il faut faire le tri, et bien choisir, ça prend un peu de temps mais ça permet de progresser gentiment.
 :hello:

n°2409826
MaybeEijOr​Not
but someone at least
Posté le 15-02-2022 à 20:37:48  profilanswer
 

Oui je suis sadique, je n'ai volontairement pas indiqué où était l'erreur pour que justement tu puisses essayer de la repérer soit avec la coloration syntaxique de Notepad++ soit avec la technique de l'affichage du code source via le navigateur internet. :D  
Chez moi (je n'ai que ton extrait de code), les deux méthodes font ressortir l'erreur. Tu as 6 lignes sur lesquelles tu peux concentrer tes recherches. ;)  
Et en faisant le test, j'en ai vu une autre. xD


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2409880
Harmo88
Il n\\
Posté le 16-02-2022 à 10:06:33  profilanswer
 

MaybeEijOrNot a écrit :

Oui je suis sadique, je n'ai volontairement pas indiqué où était l'erreur pour que justement tu puisses essayer de la repérer soit avec la coloration syntaxique de Notepad++ soit avec la technique de l'affichage du code source via le navigateur internet. :D  
Chez moi (je n'ai que ton extrait de code), les deux méthodes font ressortir l'erreur. Tu as 6 lignes sur lesquelles tu peux concentrer tes recherches. ;)  
Et en faisant le test, j'en ai vu une autre. xD


 
https://jsfiddle.net/Lbwf3cv5/
 
J'ai corrigé un header qui n'avait pas <header, si je ferme la balise entrante <header>, la suite de l'instruction ne fonctionne pas ...  
Il faut que j'approfondisse ces balises orphelines, ou non; <header> n'est pas une balise orpheline(sauf erreur de ma part ? ), et pourtant, elle se comporte comme telle ...

n°2409946
rufo
Pas me confondre avec Lycos!
Posté le 16-02-2022 à 19:12:14  profilanswer
 

<input />, <br />, <hr /> sont des balises non container contrairement à <hearder>, <footer>, <div> <span>, <body>, <p>... qui sont des containers (donc une balise ouvrante et une balise fermante).
 
Et ensuite, tu as des balises inline (<input />, <span>, <img /> ) et des balises block (<div>, <p>, <table>...).


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2409950
yann39
⛅⏰♫♪☹☕
Posté le 16-02-2022 à 20:01:00  profilanswer
 

Attention a bien faire la différence entre ce qui est correct, et ce qui fonctionne.
Ce qui fonctionne n'est pas forcément correct.
 
1. Par exemple <img ...>, <img .../> ou <img ...></img> fonctionneront pareil sur la plupart des navigateurs, mais conceptuellement c'est le premier qui doit être utilisé en HTML(5).
 
2. Autre exemple, tu n'es pas obligé de fermer une balise <p>, par exemple si le contenu de ta page est le suivant :
 

Code :
  1. <p>
  2. blablabla
  3. <p>
  4. blabla
  5. </p>


 
Est-ce que la balise </p> ferme le 1er ou le 2ème paragraphe ?
Et bien c'est valide et la plupart des navigateurs génèreront bien le code suivant avec 2 paragraphe :
 

Code :
  1. <p>blablabla</p>
  2. <p>blabla</p>


 
Car les balaises <p> peuvent être automatiquement fermées suivant le contenu qui vient après (si c'est un contenu de "phrasing" ou non).
Pour autant je te conseil de les fermer explicitement...
 
3. Il y a aussi des contenus tout à fait valides techniquement, par exemple :

Code :
  1. <p>
  2.   <h2>Mon titre</h2>
  3.   <span>Mon contenu</span>
  4. </p>


 
Mais sémantiquement c'est faux, tu ne dois pas mettre le header dans le paragraphe, tu devrais sortir le header au dessus du paragraphe.
Tout comme ne pas utiliser de tableaux (<table> ) pour la mise en forme, etc.
 
Bref même si les navigateurs font ce qu'ils veulent depuis la nuit des temps (des organismes comme le W3C n'ont jamais vraiment réussi à imposer des standards, on a eu Internet Explorer qui a gaché la vie de pas mal de développeurs, puis maintenant Safari, etc.), je te conseil quand même, si tu veux que ton site reste compatible le plus longtemps possible avec la plupart des navigateurs, de respecter les standards et les bonnes pratiques :)


---------------
Topic achats/ventes | Feed-back | Worklog
n°2409951
Harmo88
Il n\\
Posté le 16-02-2022 à 20:19:26  profilanswer
 

yann39 a écrit :

Attention a bien faire la différence entre ce qui est correct, et ce qui fonctionne.
Ce qui fonctionne n'est pas forcément correct.
 
1. Par exemple <img ...>, <img .../> ou <img ...></img> fonctionneront pareil sur la plupart des navigateurs, mais conceptuellement c'est le premier qui doit être utilisé en HTML(5).
 
2. Autre exemple, tu n'es pas obligé de fermer une balise <p>, par exemple si le contenu de ta page est le suivant :
 

Code :
  1. <p>
  2. blablabla
  3. <p>
  4. blabla
  5. </p>


 
Est-ce que la balise </p> ferme le 1er ou le 2ème paragraphe ?
Et bien c'est valide et la plupart des navigateurs génèreront bien le code suivant avec 2 paragraphe :
 

Code :
  1. <p>blablabla</p>
  2. <p>blabla</p>


 
Car les balaises <p> peuvent être automatiquement fermées suivant le contenu qui vient après (si c'est un contenu de "phrasing" ou non).
Pour autant je te conseil de les fermer explicitement...
 
3. Il y a aussi des contenus tout à fait valides techniquement, par exemple :

Code :
  1. <p>
  2.   <h2>Mon titre</h2>
  3.   <span>Mon contenu</span>
  4. </p>


 
Mais sémantiquement c'est faux, tu ne dois pas mettre le header dans le paragraphe, tu devrais sortir le header au dessus du paragraphe.
Tout comme ne pas utiliser de tableaux (<table> ) pour la mise en forme, etc.
 
Bref même si les navigateurs font ce qu'ils veulent depuis la nuit des temps (des organismes comme le W3C n'ont jamais vraiment réussi à imposer des standards, on a eu Internet Explorer qui a gaché la vie de pas mal de développeurs, puis maintenant Safari, etc.), je te conseil quand même, si tu veux que ton site reste compatible le plus longtemps possible avec la plupart des navigateurs, de respecter les standards et les bonnes pratiques :)


 
Compliqué le HTML ... je vais finir par regretter l'assembleur, qui ne l'était pas moins  :lol:  
Consulter différents sites ne m'apparait plus comme une bonne solution, justement parce qu'on y trouve des exemples datant des précédentes version du HTML. Un peu difficile de s'y retrouver.
Je vais sur openclass, que tu m'as conseillé; c'est plus concis, et plus progressif; je pense que ça va mieux me convenir.
Ça me fait repartir à zéro, je revois ce que j'ai déjà fait, toutefois, je considère que ce n'est pas une perte de temps(en retraite, on a du temps de libre) parce que les balises sont mieux expliquées.
Quand tu me dis : tout ce qui fonctionne n'est pas forcément correct, je le constate ...
Certains programmeurs conseillent de fermer les balises, même celles qui ne doivent pas l'être, pour la bonne interprétation du navigateur concernée par la page, qu'en penses-tu ?
Est-ce ça pourrait éviter justement certaines incorrections ?
 :hello:  

n°2409952
MaybeEijOr​Not
but someone at least
Posté le 16-02-2022 à 20:26:36  profilanswer
 

Harmo88 a écrit :

 

https://jsfiddle.net/Lbwf3cv5/

 

J'ai corrigé un header qui n'avait pas <header, si je ferme la balise entrante <header>, la suite de l'instruction ne fonctionne pas ...
Il faut que j'approfondisse ces balises orphelines, ou non; <header> n'est pas une balise orpheline(sauf erreur de ma part ? ), et pourtant, elle se comporte comme telle ...


Version corrigée : https://jsfiddle.net/8orpsxnt/2/

 

#1 : Le HTML c'est surtout de la rigueur et pour être plus facilement rigoureux il faut être cohérent. Par exemple tu décides d'écrire le nom de tes balises en minuscules, alors tu écries TOUTES tes balises en minuscules. C'est juste un exemple pour illustrer car j'ai trouvé cette "incohérence" qu'une seule fois, mais on peut aussi prendre l'exemple du CSS dans les balises où parfois tu termines les instructions par un point-virgule et d'autres fois non. Toujours dans le CSS, parfois ton sélecteur est séparé de l'accolade d'ouverture par un espace, d'autres fois non. Même si c'est sans conséquence pour que le code soit interprété, cela enlève de la lisibilité à ce que tu as écrit et rend les erreurs de syntaxe plus difficiles à repérer.

 

#2 : Toujours dans un soucis de clarté pour mieux repérer les erreurs, il faut respecter des règles d'indentation, à chaque fois que tu imbriques des balises de type "block" il est conseillé de retourner à la ligne et d'indenté la nouvelle ligne par rapport à la précédente, de même pour la fermeture du block. Ainsi tu peux repérer plus facilement quel block commence où et termine où.

 

#3 : Ne pas confondre la balise "head" et "header", malheureusement je suppose que dans ton livre on te demande de mettre le CSS dans le header et à ce moment là il ne parlent pas du nom de la balise mais de la partie du code délimitée par les balises "head". Oui ce qui est contenu entre les balises "head" est souvent appelé le header...
Juste après avoir ouvert la balise "html" on ouvre généralement la balise "head" dans laquelle on retrouve principalement les balises "meta", la balise "title", les balises "style" et les balises "javascript".
Voilà le modèle de base d'une page HTML :

Code :
  1. <html>
  2.    <head>
  3.       <meta charset="UTF-8">
  4.       <title>Titre de la page</title>
  5.       <style type="text/css">
  6.          /* les règles CSS */
  7.       </style>
  8.       <script type="text/javascript">
  9.          /* les scripts javascript */
  10.       </script>
  11.    </head>
  12.    <body>
  13.          Le contenu de ma page.
  14.    </body>
  15. </html>
 

#4 : ne pas oublier les point-virgules à la fin des instructions CSS (ou javascript le cas échéant).

 

#5 : Faire attention aux balises non fermées, à ne pas oublier le "=" entre le nom de l'attribut et sa valeur, et ne pas oublier de mettre les guillemets autour de la valeur.

 

#6 : Pour les balises non "container", si je ne me trompe pas, en HTML5 il n'y a pas besoin de les refermer avec un slash (même si pas d'incidence pour l'interprétation du code) :
<img src="mon_lien.jpg" alt="nom de l'image" /> NOK
<img src="mon_lien.jpg" alt="nom de l'image"> OK

 

#7 : Lorsque tu introduis une erreur exprès dans le code pour voir son incidence, pense à la retirer après avoir constaté.

 

#8 : Les règles CSS ont une priorité définit comme suit :
1- Les règles définies dans une balise via l'attribut "style".
2- Les règles définies dans la balise "style" se trouvant entre les balises "head".
3- Les règles définies dans un fichier externe appelé via une balise "style" se trouvant entre les balises "head".

Message cité 1 fois
Message édité par MaybeEijOrNot le 16-02-2022 à 20:28:46

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2409953
yann39
⛅⏰♫♪☹☕
Posté le 16-02-2022 à 20:53:58  profilanswer
 

Harmo88 a écrit :


 
Compliqué le HTML ... je vais finir par regretter l'assembleur, qui ne l'était pas moins  :lol:  
Consulter différents sites ne m'apparait plus comme une bonne solution, justement parce qu'on y trouve des exemples datant des précédentes version du HTML. Un peu difficile de s'y retrouver.
Je vais sur openclass, que tu m'as conseillé; c'est plus concis, et plus progressif; je pense que ça va mieux me convenir.
Ça me fait repartir à zéro, je revois ce que j'ai déjà fait, toutefois, je considère que ce n'est pas une perte de temps(en retraite, on a du temps de libre) parce que les balises sont mieux expliquées.
Quand tu me dis : tout ce qui fonctionne n'est pas forcément correct, je le constate ...
Certains programmeurs conseillent de fermer les balises, même celles qui ne doivent pas l'être, pour la bonne interprétation du navigateur concernée par la page, qu'en penses-tu ?
Est-ce ça pourrait éviter justement certaines incorrections ?
 :hello:  


 
C'est compliqué c'est vrai, il faut normalement se baser sur les spécifications, mais tu n’es pas obligé d'aller aussi loin dans les détails, la plupart des développeurs ne le font pas eux-même...
 
Généralement pour faire simple on considère que :
- <br> c'est du HTML
- <br /> c'est du XHTML
- <br></br> c'est du XML
 
Mais en vrai les spécifications autorisent plusieurs notations :
- Pour XML <br/> et <br></br> sont autorisés : https://www.w3.org/TR/2006/REC-xml1 [...] -starttags
- Pour HTML <br>, <br/> et <br /> sont autorisés (le / est interprété différemment selon le type de l'élément) : https://html.spec.whatwg.org/#syntax-start-tag
- pour XHTML <br /> (bien mettre l'espace) et <br></br> sont autorisés : https://www.w3.org/TR/xhtml1/#C_2
 
Donc en effet pour du HTML/XHTML, les gens conseillent souvent d'utiliser <br /> qui sera compatible dans les 2 cas.


Message édité par yann39 le 16-02-2022 à 20:55:03

---------------
Topic achats/ventes | Feed-back | Worklog
n°2409954
Harmo88
Il n\\
Posté le 16-02-2022 à 21:11:22  profilanswer
 

MaybeEijOrNot a écrit :


Version corrigée : https://jsfiddle.net/8orpsxnt/2/
 
#1 : Le HTML c'est surtout de la rigueur et pour être plus facilement rigoureux il faut être cohérent. Par exemple tu décides d'écrire le nom de tes balises en minuscules, alors tu écries TOUTES tes balises en minuscules. C'est juste un exemple pour illustrer car j'ai trouvé cette "incohérence" qu'une seule fois, mais on peut aussi prendre l'exemple du CSS dans les balises où parfois tu termines les instructions par un point-virgule et d'autres fois non. Toujours dans le CSS, parfois ton sélecteur est séparé de l'accolade d'ouverture par un espace, d'autres fois non. Même si c'est sans conséquence pour que le code soit interprété, cela enlève de la lisibilité à ce que tu as écrit et rend les erreurs de syntaxe plus difficiles à repérer.
 
#2 : Toujours dans un soucis de clarté pour mieux repérer les erreurs, il faut respecter des règles d'indentation, à chaque fois que tu imbriques des balises de type "block" il est conseillé de retourner à la ligne et d'indenté la nouvelle ligne par rapport à la précédente, de même pour la fermeture du block. Ainsi tu peux repérer plus facilement quel block commence où et termine où.
 
#3 : Ne pas confondre la balise "head" et "header", malheureusement je suppose que dans ton livre on te demande de mettre le CSS dans le header et à ce moment là il ne parlent pas du nom de la balise mais de la partie du code délimitée par les balises "head". Oui ce qui est contenu entre les balises "head" est souvent appelé le header...
Juste après avoir ouvert la balise "html" on ouvre généralement la balise "head" dans laquelle on retrouve principalement les balises "meta", la balise "title", les balises "style" et les balises "javascript".
Voilà le modèle de base d'une page HTML :

Code :
  1. <html>
  2.    <head>
  3.       <meta charset="UTF-8">
  4.       <title>Titre de la page</title>
  5.       <style type="text/css">
  6.          /* les règles CSS */
  7.       </style>
  8.       <script type="text/javascript">
  9.          /* les scripts javascript */
  10.       </script>
  11.    </head>
  12.    <body>
  13.          Le contenu de ma page.
  14.    </body>
  15. </html>


 
#4 : ne pas oublier les point-virgules à la fin des instructions CSS (ou javascript le cas échéant).
 
#5 : Faire attention aux balises non fermées, à ne pas oublier le "=" entre le nom de l'attribut et sa valeur, et ne pas oublier de mettre les guillemets autour de la valeur.
 
#6 : Pour les balises non "container", si je ne me trompe pas, en HTML5 il n'y a pas besoin de les refermer avec un slash (même si pas d'incidence pour l'interprétation du code) :
<img src="mon_lien.jpg" alt="nom de l'image" /> NOK
<img src="mon_lien.jpg" alt="nom de l'image"> OK
 
#7 : Lorsque tu introduis une erreur exprès dans le code pour voir son incidence, pense à la retirer après avoir constaté.
 
#8 : Les règles CSS ont une priorité définit comme suit :
1- Les règles définies dans une balise via l'attribut "style".
2- Les règles définies dans la balise "style" se trouvant entre les balises "head".
3- Les règles définies dans un fichier externe appelé via une balise "style" se trouvant entre les balises "head".


 
Je pense en te lisant que j'ai "attaqué" le CSS un peu trop rapidement; je ne le comprends pas encore vraiment, par manque de pratique(je ne fais que recopier ce que je vois).
Idem pour le javascript ...
D'où mon retour en arrière, pour mieux maîtriser les balises, les attributs, la syntaxe ...
Le livre est bien, sans doute, pour un confirmé en HTML; pour un débutant, il saute "du coq à l'âne"; c'est trop déroutant.
J'ai besoin d'une méthode plus progressive, plus explicative.
Je ne désespère pas; je dois ré habituer mes neurones à l'effort; il y a longtemps qu'ils ne sont plus habitués à être autant sollicités  :lol:  
 :hello:  

n°2409956
MaybeEijOr​Not
but someone at least
Posté le 16-02-2022 à 21:43:54  profilanswer
 

Le javascript, tu oublies pour l'instant.
Bien maitriser HTML+CSS avant d'attaquer le JS (javascript) car ça demande des notions de comment sont interprétées les pages HTML.

 

Le CSS peut être vu assez rapidement après avoir commencé le HTML mais il est quand même nécessaire de comprendre les bases du HTML pour ne pas faire n'importe quoi en CSS.
Le mieux reste de commencer que par du HTML avec le fait de savoir que ce que l'on va commencer à faire sera moche et pas exactement comme on le souhaite. Juste garder en tête que ça se corrigera avec le CSS.
Le HTML détermine la structure, la hiérarchisation des données à afficher en indiquant quel type de données tu vas afficher : un paragraphe, une image, une liste, un article, un titre, un cadre, un bouton, etc.

 

Avec le HTML tu imbriques des boîtes les une dans les autres, les unes par rapport aux autres, et tu y insères ton contenu.
Avec le CSS tu vas mettre en forme ses boîtes : leur couleur, leur taille, leur position, etc.

Message cité 1 fois
Message édité par MaybeEijOrNot le 16-02-2022 à 21:44:51

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2409963
Harmo88
Il n\\
Posté le 17-02-2022 à 00:29:52  profilanswer
 

MaybeEijOrNot a écrit :

Le javascript, tu oublies pour l'instant.
Bien maitriser HTML+CSS avant d'attaquer le JS (javascript) car ça demande des notions de comment sont interprétées les pages HTML.
 
Le CSS peut être vu assez rapidement après avoir commencé le HTML mais il est quand même nécessaire de comprendre les bases du HTML pour ne pas faire n'importe quoi en CSS.
Le mieux reste de commencer que par du HTML avec le fait de savoir que ce que l'on va commencer à faire sera moche et pas exactement comme on le souhaite. Juste garder en tête que ça se corrigera avec le CSS.
Le HTML détermine la structure, la hiérarchisation des données à afficher en indiquant quel type de données tu vas afficher : un paragraphe, une image, une liste, un article, un titre, un cadre, un bouton, etc.
 
Avec le HTML tu imbriques des boîtes les une dans les autres, les unes par rapport aux autres, et tu y insères ton contenu.
Avec le CSS tu vas mettre en forme ses boîtes : leur couleur, leur taille, leur position, etc.


 
Oui, je reprends uniquement le HTML, sans CSS. Je comprends leur fonction, c'est déjà ça; il est un peu tôt pour moi, de les associer sans commettre d'erreurs.  
Merci pour ton aide.  

n°2409987
Harmo88
Il n\\
Posté le 17-02-2022 à 13:34:29  profilanswer
 

:hello:  
Dans la suite de l'apprentissage avec openclass, j'attaque les liens, internes, externes, en relatif, en absolu.
 
Depuis ma page je souhaite ouvrir une autre page, en relatif.
 
<p>Bonjour. Souhaitez-vous consulter <a href="page1.html">la page 1</a> ?</p>
La page 1 s'ouvre bien.
 
Sur la page, il y a ceci
 
     Une icône, et à côté [répertoire parent]
                                  Nom                                  Taille                           Date de modification
    Icône du fichier,     Vol-hélico.html                      24.68 kB                       16/02/2022 14:09
 
Il faut que je clic sur l'icône du fichier, pour qu'il s'affiche. Comment faire pour qu'il s'ouvre en cliquant sur le lien "la page1"
 
Je remarque que le lien "page1.html" n'est pas souligné, comme le lien vers un site ... normal, ou manque-t'il un attribut ?

n°2409992
yann39
⛅⏰♫♪☹☕
Posté le 17-02-2022 à 14:25:27  profilanswer
 

Pas sûr de comprendre ta question.
Le <a href="page1.html"></a> tu peux le placer autour de n'importe quel contenu sur lequel tu veux placer ton lien.
Et tu adaptes "page1.html" par le chemin (relatif ou absolu) du fichier vers lequel tu veux pointer (par exemple "Vol-hélico.html" ).
 
Pour le soulignement, j'imagine que l'éditeur interprète seulement les valeurs commençant par http://, https://, ftp://, etc. comme des liens, donc il ne détecte pas ton "page1.html" comme un lien, mais rien de grave c'est juste pour indication.


---------------
Topic achats/ventes | Feed-back | Worklog
n°2409999
Harmo88
Il n\\
Posté le 17-02-2022 à 15:06:56  profilanswer
 

yann39 a écrit :

Pas sûr de comprendre ta question.
Le <a href="page1.html"></a> tu peux le placer autour de n'importe quel contenu sur lequel tu veux placer ton lien.
Et tu adaptes "page1.html" par le chemin (relatif ou absolu) du fichier vers lequel tu veux pointer (par exemple "Vol-hélico.html" ).

 

Pour le soulignement, j'imagine que l'éditeur interprète seulement les valeurs commençant par http://, https://, ftp://, etc. comme des liens, donc il ne détecte pas ton "page1.html" comme un lien, mais rien de grave c'est juste pour indication.

 

:hello:
Il y a des jours, où l'on devrait se mettre une gifle, avant de poster une question  :D
En revenant de ma balade, dans le grand vent, les neurones ont du s'ouvrir.
Dans le lien, j'ai indiqué le chemin du fichier "page1.html", mais pas de ce qu'il contient "Vol-hélico.html" ... celui-ci ne pouvait donc pas s'ouvrir avec la page.
J'ai rectifié le lien, et ça fonctionne. J'ai bien la page avec le contenu de "Vol-hélico.html" qui s'affiche.

 

<p>Bonjour. Souhaitez-vous consulter <a href="page1.html\Vol-hélico.html">la page 1</a> ?</p>

 

Au lieu de <p>Bonjour. Souhaitez-vous consulter <a href="page1.html">la page 1</a> ?</p> qui ouvre seulement"page1.htmml"  :pfff:

 

Désolé pour le dérangement ...

 

Et pour charger un fichier word.docx, de la même façon, il faut convertir le fichier docx en html pour qu'il s'ouvre en même temps que le page...


Message édité par Harmo88 le 17-02-2022 à 15:56:23
n°2410121
Harmo88
Il n\\
Posté le 19-02-2022 à 09:44:13  profilanswer
 

:hello:
Concernant les liens hypertexte, je rencontre un souci dans une page.
Dans cet exemple(openclass), ça fonctionne.

 

<p>UN LIEN VERS UNE ANCRE</p>
 <h1>Ma grande page</h1>

 

<p>
    Aller directement à la partie traitant de :<br />
    <a href="#cuisine">La cuisine</a><br />
    <a href="#rollers">Les rollers</a><br />
    <a href="#arc">Le tir à l'arc</a><br />
</p>
<h2 id="cuisine">La cuisine</h2>

 

<p>... (beaucoup de texte) ...</p>

 

<h2 id="rollers">Les rollers</h2>

 

<p>... (beaucoup de texte) ...</p>

 

<h2 id="arc">Le tir à l'arc</h2>

 

<p>... (beaucoup de texte) ...</p>

 

Dans ma page: ça ne fonctionne pas ...

 

<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 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></br>
   </ul>
  </blockquote>
 </p>

 

La liste s'affiche bien. Lorsque je clique sur une ligne, elle ne me mène pas au titre du paragraphe souhaité(le titre s'affiche bien dans la barre d'adresse).
Apparemment, c'est "blockquote" et "style" qui perturbent l'exécution, mais j'en ai besoin, pour la marge, et pour la couleur du titre.
Pourquoi faut-il répéter deux fois le titre du paragraphe dans une ligne ???
J'aurais juste besoin de la première ligne de la liste; pour les suivantes, je ferai.
Après moultes et moultes  tentatives, je :pt1cable:

 


La "cible à atteindre" :
<h3>
  <blockquote
   style="color:yellow">IMPORTANT
  </blockquote>
</h3>
  <FONT size="4pt"><!--Augmente la taille de la police-->
   <blockquote><!--Crée une marge pour le texte-->
    <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.</p>
   </blockquote>
  </FONT>

 

En espérant que mes explications soient assez claires.


Message édité par Harmo88 le 19-02-2022 à 09:58:05
n°2410123
rufo
Pas me confondre avec Lycos!
Posté le 19-02-2022 à 10:15:38  profilanswer
 

<a href=#"IMPORTANT">IMPORTANT</a>
Le # n'est pas mis dans le "...". Ca doit être
<a href="#IMPORTANT">IMPORTANT</a>
Après, je te recommande de mettre tes ancres en minuscules :  
<a href="#important">IMPORTANT</a>
 
A noter que tu peux faire des ancres dans d'autres pages :
<a href="url-de-mon-autre-page.html#important">IMPORTANT</a>


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2410124
MaybeEijOr​Not
but someone at least
Posté le 19-02-2022 à 10:25:35  profilanswer
 

Salut,

 

Toujours un problème de rigueur conduisant à des erreurs de syntaxe, c'est chiant au début, le temps d'acquérir les réflexes de vérification. Mais tu vas te rendre compte que mieux vaut vérifier 3 fois chaque ligne après l'avoir écrite que perdre 1 heure à tout reprendre ligne par ligne. :D

 


Pour commencer, on va reprendre ce que je disais plus tôt.

 
  • Cohérence : harmoniser la syntaxe

<br> <br /> </br> ?
La dernière balise est fausse.
La deuxième balise est "tolérée".
La première est correcte.

 
  • Structure des balises : elle est presque toujours la même

<nom_de_la_balise nom_de_l'attribut="valeur_de_l'attribut">
Tu dois bien vérifier d'avoir à chaque fois ces éléments : les crochets entourant les paramètres de la balise, le nom de la balise, au besoin les attributs avec le nom suivi d'un signe "égale" et la valeur entre guillemets.

 
  • Une liste se définit avec cette structure :

<ul> (début de la liste)
   <li>ligne 1</li> (premier élément de la liste)
   <li>ligne 2</li> (deuxième élément de la liste)
   <li>ligne ...</li> (élément suivant de la liste)
</ul> (fin de la liste)

  

Vérifie déjà SCRUPULEUSEMENT ligne par ligne ces 3 points et tu auras corrigé pas mal d'erreurs dans ton bout de code. On verra si le problème était lié à ces erreurs.

 

Pas compris ton histoire de répétition du titre de paragraphe dans une ligne, un exemple ?

Message cité 1 fois
Message édité par MaybeEijOrNot le 19-02-2022 à 10:27:52

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2410137
Harmo88
Il n\\
Posté le 19-02-2022 à 18:46:56  profilanswer
 

rufo a écrit :

<a href=#"IMPORTANT">IMPORTANT</a>
Le # n'est pas mis dans le "...". Ca doit être
<a href="#IMPORTANT">IMPORTANT</a>
Après, je te recommande de mettre tes ancres en minuscules :  
<a href="#important">IMPORTANT</a>
 
A noter que tu peux faire des ancres dans d'autres pages :
<a href="url-de-mon-autre-page.html#important">IMPORTANT</a>


 
Tu as raison pour le #, mais ça n'est pas la cause ... OK pour les minuscules de l'ancre, ça évite de la confondre avec le titre du paragraphe à chercher.
Si je comprends bien <a href="#important" attribue l'ancre, et >IMPORTANT</a> le titre à chercher ?
 
Ben ... si je transcris sur une page vierge, ça fonctionne; mais pas dans la mienne  :D je ne vois pas encore ce qui l'en empêche ...
 :hello:  

n°2410138
Harmo88
Il n\\
Posté le 19-02-2022 à 19:09:31  profilanswer
 

MaybeEijOrNot a écrit :

Salut,
 
Toujours un problème de rigueur conduisant à des erreurs de syntaxe, c'est chiant au début, le temps d'acquérir les réflexes de vérification. Mais tu vas te rendre compte que mieux vaut vérifier 3 fois chaque ligne après l'avoir écrite que perdre 1 heure à tout reprendre ligne par ligne. :D  
 
 
Pour commencer, on va reprendre ce que je disais plus tôt.
 

  • Cohérence : harmoniser la syntaxe

<br> <br /> </br> ?
La dernière balise est fausse.
La deuxième balise est "tolérée".
La première est correcte.
 

  • Structure des balises : elle est presque toujours la même

<nom_de_la_balise nom_de_l'attribut="valeur_de_l'attribut">
Tu dois bien vérifier d'avoir à chaque fois ces éléments : les crochets entourant les paramètres de la balise, le nom de la balise, au besoin les attributs avec le nom suivi d'un signe "égale" et la valeur entre guillemets.
 

  • Une liste se définit avec cette structure :

<ul> (début de la liste)
   <li>ligne 1</li> (premier élément de la liste)
   <li>ligne 2</li> (deuxième élément de la liste)
   <li>ligne ...</li> (élément suivant de la liste)
</ul> (fin de la liste)
 
 
 
Vérifie déjà SCRUPULEUSEMENT ligne par ligne ces 3 points et tu auras corrigé pas mal d'erreurs dans ton bout de code. On verra si le problème était lié à ces erreurs.
 
Pas compris ton histoire de répétition du titre de paragraphe dans une ligne, un exemple ?


Ouais ... à force de modifier, j'ai beau vérifier, il y des lignes qui restent en commentaires, ou qui ont été supprimées involontairement ??? et ça fonctionne mal ...
J'ai remis de l'ordre, et je travaille sur une copie, ça m'évitera d'altérer l'original, si tant est qu'il soit correct  :ange:  
Pour la balise <br>, c'est celle-ci que je vais adopter définitivement; certains travaillent encore avec des anciennes balises ... c'est chiant  :lol:  
 
Dans les listes, même dans le bouquin, il n'y a pas de crochets [], mais <li> donc, je n'en mettais pas ... et ça fonctionne; je ne me posais pas de question ...
Je vais potasser la question ...
 
Quant à la répétition des "titres" de paragraphe, je m'étonnais de voir dans l'ancre, la même chose que le titre ...... c'est foireux, ça.
<a href=#"IMPORTANT">IMPORTANT</a>       en fait, comme je mettais l'ancre en majuscules, par manque de savoir, j'avais l'impression d'avoir une répétition.
Rufo  a corrigé. J'avais mal expliqué  :jap:  
Je posterai les lignes concernant les ancrages que je veux réaliser; un seul exemple suffira, normalement. Il y en a 10 dans la page ... donc même procédé pour les 10.
Merci encore.  :hello:  

n°2410139
MaybeEijOr​Not
but someone at least
Posté le 19-02-2022 à 19:28:25  profilanswer
 

Pour les ancres et titres, c'est différent, ce qu'il y a dans la balise "a" c'est l'attribut "href" qui va dire où doit diriger le lien, mais ce qu'il y a entre la balise "a" est le texte que l'utilisateur va voir pour cliquer. Souvent ce ne sont pas les mêmes, pour la bonne raison que les liens doivent respecter une convention (pas d'accents par exemple) et donc dans l'attribut "href" tu te retrouver avec la valeur "lien_accentue" alors que pour l'affichage de l'utilisateur tu vas mettre "lien accentué". Il existe plein d'autres raisons, comme le fameux "cliquez ici" qui indique à l'utilisateur de cliquer mais évidemment le but n'est pas de diriger vers une page ou une section appelée "cliquez ici".

Message cité 1 fois
Message édité par MaybeEijOrNot le 19-02-2022 à 19:29:03

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2410141
rufo
Pas me confondre avec Lycos!
Posté le 19-02-2022 à 20:36:59  profilanswer
 

Harmo88 a écrit :


 
Tu as raison pour le #, mais ça n'est pas la cause ... OK pour les minuscules de l'ancre, ça évite de la confondre avec le titre du paragraphe à chercher.
Si je comprends bien <a href="#important" attribue l'ancre, et >IMPORTANT</a> le titre à chercher ?
 
Ben ... si je transcris sur une page vierge, ça fonctionne; mais pas dans la mienne  :D je ne vois pas encore ce qui l'en empêche ...
 :hello:  


Rien à voir, le #important renvoie un un ID de balise qui s'appelle "important". Donc aucun lien avec le texte que tu mets entre <a...> et </a>.
 
Ex :
<body>
<p>Mon petit paragraphe qui comporte <a href="#autre-paragraphe" title="Cliquer sur ce lien pour aller à l'autre paragraphe.">un lien</a> qui permet d'aller à un autre paragraphe dans la même page html.</p>
<p>Ca, c'est un 2ème paragraphe...</p>
<p id="autre-paragraphe">Ca, c'est mon 3ème paragraphe sur lequel on arrive si on clique sur le lien du premier paragraphe...</p>
</body>


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2410142
Harmo88
Il n\\
Posté le 19-02-2022 à 20:42:40  profilanswer
 

MaybeEijOrNot a écrit :

Pour les ancres et titres, c'est différent, ce qu'il y a dans la balise "a" c'est l'attribut "href" qui va dire où doit diriger le lien, mais ce qu'il y a entre la balise "a" est le texte que l'utilisateur va voir pour cliquer. Souvent ce ne sont pas les mêmes, pour la bonne raison que les liens doivent respecter une convention (pas d'accents par exemple) et donc dans l'attribut "href" tu te retrouver avec la valeur "lien_accentue" alors que pour l'affichage de l'utilisateur tu vas mettre "lien accentué". Il existe plein d'autres raisons, comme le fameux "cliquez ici" qui indique à l'utilisateur de cliquer mais évidemment le but n'est pas de diriger vers une page ou une section appelée "cliquez ici".


 
Aaahhh! La syntaxe ...... que du bonheur !
J'ai réussi à activer mes ancres; une me pose encore problème, à revoir.
Je continue les autres; pour l'instant 6 sur 10 de bonnes. Ouf de soulagement, quelle suée  :lol:  
 
Après, j'attaquerai le retour en haut de la page, utile lorsque les pages sont grandes; j'espère que c'est aussi amusant ... J'aime la difficulté  :ange:

n°2410143
Harmo88
Il n\\
Posté le 20-02-2022 à 08:52:26  profilanswer
 

Après l'insertion des ancres dans la page, et à la suite de texte placé à droite d'une image, tous les titres des paragraphes suivants, sont décalés sur la droite; même  si il n'y a plus d'image. Le texte des paragraphes, lui, ne bouge pas.
Les autres titres avant l'insertion d'image sont bien alignés avec le texte du paragraphe.
 
En résumé, j’insère une image, avec une petite marge(pour la présentation personnelle), et je place du texte à droite de cette image, qui revient en bas, à gauche, si le texte dépasse l'image.
Ensuite, j'insère un nouveau titre, pour un nouveau paragraphe; ce titre et les suivants, est décalé d'une marge supplémentaire, par rapport aux précédents.
 
Marge   Titres et texte avant image
Marge   Insertion image + texte à droite
Marge   ........... Nouveaux titres, décalage supplémentaire
Marge   Nouveau texte, pas de décalage supplémentaire
 
Il me reste à trouver pourquoi; je n'ai pas provoqué ce décalage supplémentaire.
 
 
 

n°2410144
rufo
Pas me confondre avec Lycos!
Posté le 20-02-2022 à 10:08:14  profilanswer
 

Ca sent la balise mal fermée et du coup, tes autres paragraphes sont à l'intérieur de la balise pas fermée. SI t'as mis une marge sur <p>, alors, elle va s'ajouter.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2410182
Harmo88
Il n\\
Posté le 20-02-2022 à 22:25:31  profilanswer
 

rufo a écrit :

Ca sent la balise mal fermée et du coup, tes autres paragraphes sont à l'intérieur de la balise pas fermée. SI t'as mis une marge sur <p>, alors, elle va s'ajouter.

 

:hello:
Après vérification des balises, et des modifs(une modif en entraînant une autre, par effet domino ....), tout est rentré dans l'ordre. Content; la page est terminée.
Un souci avec la police(non, je n'ai rien fait  :D ), elle est en gras alors que je n'ai rien modifié.
Si trop compliqué, je la laisse ainsi.

 

<h3 Font size="4pt"></h3> ....... si je choisis un chiffre plus bas de 4 à 0, ça ne change pas la taille de la police ... On ne peut pas aller plus que 4 pt ?
J'ai testé <FONT face="arial"></FONT> elle reste en gras.

 

Maintenant, j'aimerais publier cette page, avec des retours de commentaires, ou voir sur Google analytic ....
Ça n'est pas, je suppose, un hébergeur ? Il donne juste des statistiques de la page ?

 

En gros, comment procéder pour publier cette page sur le Web, sans trop engager de frais d'abonnement ?
C'est un sujet que je ne maîtrise pas, ne l'ayant jamais creusé.

 

Comment autoriser les commentaires sur cette page, et éventuellement y répondre ?


Message édité par Harmo88 le 20-02-2022 à 22:30:43
n°2410183
rufo
Pas me confondre avec Lycos!
Posté le 20-02-2022 à 22:50:35  profilanswer
 

On te l'a déjà dit, la balise <font> est dépréciée. Faut utiliser du css :o
Le HTML étant là pour structurer l'info et pas faire du rendu visuel, il faut utiliser les balises pour leur côté sémantique. Donc, il faut bannir les balises qui font du rendu visuel comme <b>, <i>, <u>, <font>, <strike>...
 
Et <h3 Font size="4pt"> n'est pas valide.
C'est <h3 style="font-size: 4pt;">...</h3> qui est correct. ;)
 
Pour l'hébergement, ton FAI te propose probablement un espace perso. Free le fait en tout cas. Tu peux aussi simplement te créer un compte mail chez eux et tu auras un espace d'hébergement.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2410184
Harmo88
Il n\\
Posté le 20-02-2022 à 23:31:00  profilanswer
 

rufo a écrit :

On te l'a déjà dit, la balise <font> est dépréciée. Faut utiliser du css :o
Le HTML étant là pour structurer l'info et pas faire du rendu visuel, il faut utiliser les balises pour leur côté sémantique. Donc, il faut bannir les balises qui font du rendu visuel comme <b>, <i>, <u>, <font>, <strike>...
 
Et <h3 Font size="4pt"> n'est pas valide.
C'est <h3 style="font-size: 4pt;">...</h3> qui est correct. ;)
 
Pour l'hébergement, ton FAI te propose probablement un espace perso. Free le fait en tout cas. Tu peux aussi simplement te créer un compte mail chez eux et tu auras un espace d'hébergement.


 
Désolé pour la balise Font ...  :jap: Ce qui me fait ..... c'est d'acheter un bouquin qui te parle de HTML5, et qui te colle des balises d'avant-guerre  :pfff:  :pfff:  
Je vais devoir lister tout ce qui n'est plus valide .... :D  :D  
Dommage, j'ai écrit des annotations sur ce bouquin, sans quoi je l'aurais renvoyé  :fou:  
 
Question : comment vais-je me former au CSS, si il y a autant de c........ dedans, que pour le HTML 1905  :lol:  :lol:  
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  :bounce: à 102 ans, je n'aurai pas terminé le HTML 2040  :lol:  
Désolé je me lâche  :pfff:  
Merci pour tes indications toujours les bienvenues.

mood
Publicité
Posté le   profilanswer
 

 Page :   1  2  3  4  5  ..  16  17  18  19  20  21

Aller à :
Ajouter une réponse
 

Sujets relatifs
Signature e-mail en HTML adaptative mode clair/sombre ?Exercice html, php, mysql, javascript
hébergement de page htmlresponsive scroll pas quand je glisse l'image
Probleme d'edition d'image dans DjangoEnvoi image sur blog impossible
Aligner le background au milieu de l'imageun problème de lien php dans le html
Affichage d'une image en infobulle au survol d'un lien (hover)HTML Select et OnClick() ne fonctionne pas sur Safari
Plus de sujets relatifs à : Insertion image en html depuis mon ordi


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR