Insertion image en html depuis mon ordi

Recherche :

Mot : Pseudo : Filtrer Aller à la page :
Page : 1 2 3 4 5 .. 7 8 9 .. 16 17 18 19 20 21 Page Suivante Page Précédente Bas de page
Auteur	Sujet : Insertion image en html depuis mon ordi

Harmo88

Il n\\

Reprise du message précédent :

Harmo88 a écrit :

My english is very limited(???) en français : ma connaissance de la langue de Shakespeare est au ras des pâquerettes
Ma logique est un peu en berne ... l'imagination déborde encore(tellement que je ne sais plus où la mettre).
J'essaierai avec un traducteur ... ça pourra m'aider.
Oui, ça a l'air très puissant, il faut déjà maîtriser les plus simples. J'ai l'impression que ça va être un moment ardu ...

Un exemple du livre, qui me laisse pantois .... quoi faire avec ça ??? Je mets juste le code. Les exemples suivants sont du même style, dans l'immédiat pas exploitable pour moi, vu mon niveau.

Code :

li: nth-child (2) {
background-color: gold;
}

Code :

<ul>
<li>ROUGE</li>
<li>VERT</li>
<li>BLEU</li>
<li>CYAN</li>
<li>MAGENTA</li>
<li>JAUNE</li>
<li>NOIR</li>
</ul>

La liste s'affiche, le conteneur ... y'a pas .... Quant à la sélection du 2e enfant ..... un jour peut être.

[url]https://lea.verou.me/demos/nth.html[url]
Signalé dans le bouquin, qui donne accès à un sélecteur de pseudo classe; pour l'instant, je n'y comprends rien ...
Sur un site j'ai trouvé cet exemple, je crois que c'est autre chose, qui va surement m'aider à comprendre. J'ai utilisé un traducteur, pour ne pas être perturbé par la langue.

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>page vierge</title>
<link rel="stylesheet" type="text/css" href="" />
<style>
/* Sélectionne le deuxième élément des frères et sœurs div */
div:nth-child(2) {
background: red;
}
/* Sélectionne le deuxième élément li dans une liste*/
li:nth-child(2) {
background: lightgreen;
}
/* Sélectionne un élément sur trois parmi n’importe quel groupe de frères et sœurs */
:nth-child(3) {
background: yellow;
}
</style>
</head>
<body>
<div>
<p>C'est un texte.</p>
</div>
<div>
<p>Voici un texte.</p>
</div>
<div>
<p>Voici un texte.</p>
</div>
<ul>
<li>Premier élément de liste</li>
<li>Second élément de liste</li>
<li>Troisième élément de liste</li>
<li>Quatrième élément de liste</li>
<li>Cinquième élément de liste</li>
</ul>
</body>
</html>

Il fera jour demain :lol: assez pour aujourd'hui.

Publicité

MaybeEijOrNot

but someone at least

Exemple : https://codepen.io/Perrier_ChouFleur/pen/yLvyWyp

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Exemple : https://codepen.io/Perrier_ChouFleur/pen/yLvyWyp

Cet éditeur est génial, dommage pour la langue ... Je vais essayer de le décortiquer, pour l'utiliser. On a le résultat immédiatement, ce qui est un réel avantage. Plus rapide que Notepad++ qui m'est utile.
Pour sauvegarder le fichier, on utilise Export ?
Merci pour l'indication.

Message cité 2 fois

gatsu35

Blablaté par Harko

Harmo88 a écrit :

Ah l'anglais c'est presque une obligation quand on fait du code, et même pour aller sur internet, c'est même extrêmement utile.

---------------
Blablaté par Harko

MaybeEijOrNot

but someone at least

Harmo88 a écrit :

En même temps tu n'as pas vraiment besoin de l'anglais pour l'utiliser en mode "basique", tu remplies les champs HTML et CSS et zou c'est parti, pas grand chose à comprendre. Après tu as quelques réglages possibles où en effet il faudra comprendre un peu l'anglais.
Pour sauvegarder tu as un bouton "save" en haut à droite, tu peux nommer ton projet en haut à gauche (je viens de le renommer "Mon Titre" ). Tu as un troisième bouton intéressant, en bas à droite "fork" (fourchette en français) qui permet de créer des codes alternatifs : tu as ton code de base et à partir de celui là tu crées une autre branche qui modifie ce code. Mais il te faut créer un compte pour sauvegarder et partager tes pages.
Je ne connais pas le bouton "export", je pense que pour faire un bel export, comme bien souvent il faut le paramétrer et donc s'attaquer à une partie en anglais.

Sans compte, tu as jsfiddle : https://jsfiddle.net/1qxmfLz7/

Message cité 1 fois
Message édité par MaybeEijOrNot le 04-05-2022 à 10:13:27

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Merci pour les renseignements; je peux toujours ouvrir un compte. Il me semble qu'en cliquant sur export, un e-mail est demandé, je ne suis pas allé plus loin.
jsfiddle, il me semble que toi, ou un autre membre du forum l'avez utilisé; facile à retrouver, il me suffit de remonter les post.

J'ai essayé d'inclure des pseudo classe dans une page existante, (notamment dans une liste), ça n'est pas aussi évident que ça, par manque d'habitude, mais c'est un bon exercice.

Message cité 1 fois

Harmo88

Il n\\

Harmo88 a écrit :

Dans la liste que tu as du mettre dans Untitled, j'ai sélectionné les lignes impaires, pour les colorer avec :

Code :

li:nth-child(odd){color:green;}

J'ai bien une ligne sur deux colorée, à partir de la 1ére. C'était facile, le travail était fait en partie ... ça va m'aider à comprendre.
Maintenant je vais "jouer" avec :

Code :

li:nth-child(4n-7) { /* or 4n+1 */ color: green; }

Je ne sais pas si ce site est à jour, ça date de 2007 https://www.marevueweb.com/css-html [...] propriete/
Le code cité ci-dessus fonctionne.

Message édité par Harmo88 le 04-05-2022 à 18:15:18

MaybeEijOrNot

but someone at least

Si si c'est à jour.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Si si c'est à jour.

OK merci.
[code
li:nth-last-child(-n+2) { color: green; }
[/code]
Une question (n) représente le début de la liste ?
Dans ce code -n représente le bas de la liste, et je sélectionne les 2 dernières lignes, ou la ligne 2 située au dessus ?
Le raisonnement est bon ?

Message édité par Harmo88 le 04-05-2022 à 19:46:46

MaybeEijOrNot

but someone at least

L'entier représente le numéro de l'élément et n le motif de répétition : "tous les n éléments".

Quand tu écris "n+2", cela veut dire que tu sélectionnes le 2ème élément et les n suivants. Ainsi "-n+2" veut dire que tu sélectionne le 2ème élément et les n précédents.
Et donc "2n+3", veut dire que tu sélectionnes le 3ème éléments ainsi que les 1 élément sur 2 suivants.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Publicité

Harmo88

Il n\\

MaybeEijOrNot a écrit :

OK, merci pour l'explication.

Un autre exercice :

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>fenetre-style</title>
<link rel="stylesheet" type="text/css" href="" />
<style>
#ma-fenetre {background-color:#eee;
padding: 5px;
border: 1px solid #333;
width: 400px;
}
#ma-fenetre p {margin: 0px;}
</style>
<dialog id="ma-fenetre">
<p>Contenu de ma fenêtre. Ouf ! Ca fonctionne.</p>
<button id="fermer">Fermer</button>
</dialog>
<button id="affiche">Afficher les informations</button>
<script>
var fenetre= document.getElementById("ma-fenetre" );
var btn_affiche= document.getElementById("affiche" );
var btn_ferme= document.getElementById("fermer" );
btn_affiche.onclick= function(){fenetre.showModal();}
btn_ferme.onclick= function(){
fenetre.close();
}
</script>
</head>
<body>
<p> Pour essai. Le paragraphe reste visible, avec l'ouverture de la fenêtre.</p>
</body>
</html>

MaybeEijOrNot

but someone at least

Oui donc tu attaques le Javascript, comme tout le web c'est des technos en perpétuelle évolution donc tu vas trouver plein de ressources plus ou moins dépassées.

Ici tu as un problème, tu as mis :

Code :

<dialog id="ma-fenetre">
<p>Contenu de ma fenêtre. Ouf ! Ca fonctionne.</p>
<button id="fermer">Fermer</button>
</dialog>
<button id="affiche">Afficher les informations</button>

à l'intérieur des balises <head>, ce n'est donc sémantiquement pas bon, il faut que tu places cette partie du code à l'intérieur de la balise body.

Problème, quand tu vas faire ça tu vas te rendre compte que ton script ne fonctionne plus parce qu'il faut le placer à la suite de tes éléments HTML précités. En effet, dans ton script tu vas demander de récupérer des éléments HTML, simplement la page est chargée dans l'ordre des lignes de code, donc si ton script est avant les éléments HTML, il ne va pas pouvoir les trouver.
De nos jours, on ne fait plus comme ça, on place bien les scripts dans la balise head (donc avant que les éléments HTML incriminés soient chargés. Mais on va retarder l’exécution du script à après le chargement complet de la page, ainsi il pourra trouver les éléments HTML dont il a besoin.

Je te proposerai cette version un peu plus tard, je suis pressé.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Code :

<dialog id="ma-fenetre">
<p>Contenu de ma fenêtre. Ouf ! Ca fonctionne.</p>
<button id="fermer">Fermer</button>
</dialog>
<button id="affiche">Afficher les informations</button>

Oui, il faut placer le script, juste avant la balise de fermeture du body(vu sur je ne sais plus quel site).
J'ai attaqué cet exercice parce qu'il fait partie de la suite du bouquin. Je n'avais pas réussi une première fois, j'ai recommencé;
Tu réponds quand tu peux, tu as aussi tes impératifs. :hello:

MaybeEijOrNot

but someone at least

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>fenetre-style</title>
<link rel="stylesheet" type="text/css" href="" />
<style>
#ma-fenetre {
background-color: #eee;
padding: 5px;
border: 1px solid #333;
width: 400px;
}
#ma-fenetre p {
margin: 0px;
}
</style>
<script type="text/javascript">
function monJavascript() {
var fenetre = document.getElementById("ma-fenetre" );
var btn_affiche = document.getElementById("affiche" );
var btn_ferme = document.getElementById("fermer" );
btn_affiche.onclick = function() {
fenetre.showModal();
}
btn_ferme.onclick = function() {
fenetre.close();
}
}
window.addEventListener("load", monJavascript); //retarde l'exécution du Javascript après le chargement complet de la fenêtre.
</script>
</head>
<body>
<dialog id="ma-fenetre">
<p>Contenu de ma fenêtre. Ouf ! Ca fonctionne.</p>
<button id="fermer">Fermer</button>
</dialog>
<button id="affiche">Afficher les informations</button>
<p> Pour essai. Le paragraphe reste visible, avec l'ouverture de la fenêtre.</p>
</body>
</html>

Comme tu peux le voir, j'ai placé tout ton Javascript dans une fonction nommée "monJavascript", cette fonction lors de l'interprétation de la page est initialisée mais pas exécutée, elle sera exécutée uniquement quand on appellera la dite fonction.
Et en-dessous j'ai rajouté une ligne :

Code :

window.addEventListener("load", monJavascript);

Elle ajoute la surveillance de l'évènement "load" à l'objet "window" (la fenêtre de ton navigateur, plus généralement l'onglet maintenant que les onglets existent). Cet évènement se déclenche lorsque le contenu de l'objet a terminé d'être chargé. Ainsi la page va se charger, la fonction sera initialisée mais pas exécutée, une fois que la page aura terminée d'être chargée, l'évènement va déclencher l'exécution de la fonction qui pourra alors trouver les éléments HTML puisqu'ils auront déjà été chargés.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>fenetre-style</title>
<link rel="stylesheet" type="text/css" href="" />
<style>
#ma-fenetre {
background-color: #eee;
padding: 5px;
border: 1px solid #333;
width: 400px;
}
#ma-fenetre p {
margin: 0px;
}
</style>
<script type="text/javascript">
function monJavascript() {
var fenetre = document.getElementById("ma-fenetre" );
var btn_affiche = document.getElementById("affiche" );
var btn_ferme = document.getElementById("fermer" );
btn_affiche.onclick = function() {
fenetre.showModal();
}
btn_ferme.onclick = function() {
fenetre.close();
}
}
window.addEventListener("load", monJavascript); //retarde l'exécution du Javascript après le chargement complet de la fenêtre.
</script>
</head>
<body>
<dialog id="ma-fenetre">
<p>Contenu de ma fenêtre. Ouf ! Ca fonctionne.</p>
<button id="fermer">Fermer</button>
</dialog>
<button id="affiche">Afficher les informations</button>
<p> Pour essai. Le paragraphe reste visible, avec l'ouverture de la fenêtre.</p>
</body>
</html>

Code :

window.addEventListener("load", monJavascript);

J'avais lu ça sur un site, sans donner la solution pour autant; je pense qu'il n'est pas à jour, car il était dit que cette manière d'opérer est reconnu par très peu d'opérateur ...
Merci en tout cas pour l'info; je vais recopier ton code, en l'étudiant.

MaybeEijOrNot

but someone at least

Sachant que je t'ai montré une technique tenant compte du fait que tu es débutant. Quand tu maitriseras vraiment le Javascript tu verras qu'attendre le chargement complet de toute la page n'est pas forcément le moyen le plus approprié, en effet si un élément de la page galère à se charger ça va bloquer l'exécution de tes scripts.
Mais là ça va te demander un peu plus de culture sur le fonctionnement du web, ça viendra petit à petit.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Oui, je ne m'en rends pas bien compte, dans ces exercices les pages ne sont pas "encombrées" par des fonctions multiples, de ce fait elles se chargent très rapidement.
Mais dans des pages plus complexes, la "lenteur de l'affichage" peut se produire.
Peut être qu'un jour je serai capable de coder des pages plus complexes.
On voit que tu maîtrises le sujet, et tes explications sont nettes, concises, ça m'aide beaucoup. :jap:
Il est certain que je ne maîtrise pas le javascript, le bouquin m'oblige à m'y intéresser, c'est son bon côté(il en a heureusement); et comme je suis curieux de nature, je me lance.

MaybeEijOrNot

but someone at least

Là ce qu'il faut retenir dans ce que j'ai dit, c'est qu'il vaut mieux placer les scripts dans les balises <head>, mais comme la plupart du HTML vient après il faut penser à retarder l'exécution des scripts qui seront initialisés avant. Et plus tard tu verras peut-être qu'il y a plusieurs moyens de retarder leur exécution.

Message cité 1 fois
Message édité par MaybeEijOrNot le 07-05-2022 à 10:12:31

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Le bouquin me parle d'un peudo classe "root" ... à quoi sert-il ? A remplacer le HTML?
Je ne vois pas beaucoup d'applications avec ... tu peux éclairer ma lanterne ?
Il semble qu'au moment de la sortie du livre, "root" était expérimental ... cela a peut être évolué depuis.

Je viens d'attaquer une table, les "border" n'étaient pas affichés, je les ai mis en place; je vais les modifier, pour enlever l'intervalle.
Je vais cibler d'autres cellules, pour m'amuser ... et en même temps apprendre.

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>page 103 livre HTML</title
<link rel="stylesheet" type="text/css" href="" />
<style>
td:first-of-type {
background-color: yellow;
font-size: 18px:
}
th,td{
border: 1px solid black;
padding: 10px;
}
th {
background-color: red;
}
</style>
<body>
<table>
<tr><th>Janvier</th><th>Février</th><th>Mars</th></tr>
<tr><td>12</td><td>15</td><td>19</td></tr>
<tr><td>13</td><td>11</td><td>14</td></tr>
<tr><td>11</td><td>18</td><td>12</td></tr>
</table>
</body>
</html>

J'ai ajouté :

Code :

table {
border-collapse:collapse;
}

Et c'est bon; je suis fier de moi :ange:

Message cité 1 fois
Message édité par Harmo88 le 09-05-2022 à 22:36:21

MaybeEijOrNot

but someone at least

Perso, je n'ai utilisé la pseudo-classe :root que pour définir des variables CSS, cela permet de leur donner une portée globale et donc accessibles à tous les autres éléments.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

gatsu35

Blablaté par Harko

Harmo88 a écrit :

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>page 103 livre HTML</title
<link rel="stylesheet" type="text/css" href="" />
<style>
td:first-of-type {
background-color: yellow;
font-size: 18px:
}
th,td{
border: 1px solid black;
padding: 10px;
}
th {
background-color: red;
}
</style>
<body>
<table>
<tr><th>Janvier</th><th>Février</th><th>Mars</th></tr>
<tr><td>12</td><td>15</td><td>19</td></tr>
<tr><td>13</td><td>11</td><td>14</td></tr>
<tr><td>11</td><td>18</td><td>12</td></tr>
</table>
</body>
</html>

J'ai ajouté :

Code :

table {
border-collapse:collapse;
}

Et c'est bon; je suis fier de moi :ange:

J'espère que ton livre t'indiquera plus tard qu'un bon tableau bien constitué c'est :

Code :

<table>
<thead>
<tr><th>Janvier</th><th>Février</th><th>Mars</th></tr>
</thead>
<tbody>
<tr><td>12</td><td>15</td><td>19</td></tr>
<tr><td>13</td><td>11</td><td>14</td></tr>
<tr><td>11</td><td>18</td><td>12</td></tr>
</tbody>
</table>

Le Thead est le header dans un tableau et automatiquement l'entête du tableau sera en gras. il est unique
Le Tbody regroupe le corps du tableau. il peut y avoir plusieurs Tbody dans un tableau lorsque tu as plusieurs sections.
Le Tfoot est le footer du tableau et il est unique je crois.

Message cité 1 fois

---------------
Blablaté par Harko

Harmo88

Il n\\

gatsu35 a écrit :

J'espère que ton livre t'indiquera plus tard qu'un bon tableau bien constitué c'est :

Code :

<table>
<thead>
<tr><th>Janvier</th><th>Février</th><th>Mars</th></tr>
</thead>
<tbody>
<tr><td>12</td><td>15</td><td>19</td></tr>
<tr><td>13</td><td>11</td><td>14</td></tr>
<tr><td>11</td><td>18</td><td>12</td></tr>
</tbody>
</table>

Pour l'instant, il ne me parle pas de "Thead", "Tbody", ni de "Tfoot"; avec tes indications, je vais faire des recherches.
Dans ce tableau, j'ai ajouté une colonne; l'affichage était bizarre. En réfléchissant, j'ai compris qu'il faut déplacer les "</tr>", en fonction du nombre de colonnes, pour que l'affichage soit correct.
Voilà ce que ça donne :

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>page 103 livre HTML</title
<link rel="stylesheet" type="text/css" href="" />
<style>
table {
border-collapse:collapse;
}
td:first-of-type {
background-color: yellow;
font-size: 18px:
}
th,td{
border: 1px solid black;
padding: 10px;
}
th {
background-color: red;
font-size: 25px;
}
td {
background-color: antiquewhite;
font-size: 25px;
}
</style>
<body>
<table>
<tr><th>JANVIER</th><th>FEVRIER</th><th>MARS</th><th>AVRIL</th></tr>
<tr><td>11<p>Bonjour, ai-je assez de place ?</p></td><td>12<p>Passage à la ligne avec "br".<br> C'est merveilleux !</p></td>
<td>13<p>La sémantique est-elle respectée ?<br>Avec l'emploi de "br" ?</p></td><td>14<p>Mais oui, il y a de la place !</p></td></tr>
<tr><td>15</td><td>16</td><td>17</td><td>18</td></tr>
<tr><td>19</td><td>20</td><td>21</td><td>22<p>Lorsqu'on ajoute une colonne<br>il faut déplacer "tr" "/tr", en fonction<br>du nombre de colonnes</p></td></tr>
</table>
</body>
</html>

Sur le sujet, j'ai trouvé ce site:
https://developer.mozilla.org/fr/do [...] ment/tbody

Message édité par Harmo88 le 10-05-2022 à 11:36:01

gatsu35

Blablaté par Harko

IL EN FAUT pas déplacer <tr> mais rajouter une colonne dans chaque TR.

Message cité 1 fois

---------------
Blablaté par Harko

Harmo88

Il n\\

gatsu35 a écrit :

IL EN FAUT pas déplacer <tr> mais rajouter une colonne dans chaque TR.

En rajoutant une colonne, on va dire au bout de la dernière, l'affichage était complétement désordonné.
En déplaçant le </tr> en fonction du nouveau nombre de colonnes, l'affichage est devenu correct.
Comme c'est mon premier tableau, il se peut que ma "méthode" ne soit pas correcte; il m' a fallu un bon moment pour tout remettre en ordre ... certainement pas normal.
Je prends en compte ta remarque, en ajoutant une autre colonne, je pourrai appliquer.
Merci de ton passage. :hello:

Message cité 1 fois

MaybeEijOrNot

but someone at least

Le <tr> c'est pour faire des lignes.
Les <td> c'est pour faire des colonnes, n'oublie pas qu'un tableau c'est rectangulaire, donc sur chaque ligne tu dois avoir autant de colonnes, sinon il faut spécifier les cellules qui font plusieurs colonnes de largeur (avec l'attribut colspan).

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

MaybeEijOrNot

but someone at least

Exemple tu veux faire un tableau :

Code :

5 colonnes
5 colonnes
4 colonnes
5 colonnes

La ligne de 4 colonnes doit alors comporter une colonne qui a pour largeur de 2 colonnes.

Maintenant tu veux faire un tableau :

Code :

4 colonnes
4 colonnes
5 colonnes
4 colonnes

Les deux premières lignes et la dernière ligne doivent posséder une colonne qui a pour largeur 2 colonnes.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

mechkurt

<tr> => table row => ligne de table, il faut en ouvrir et en fermer un pour chaque ligne du tableau, y compris la première colonne
<th> => table head => cellule d'un tableau définissant le contenu (souvent placé en début de ligne pour définir celle-ci ou dans la première ligne pour définir la colonne)
<td> => table data => cellule du tableau avec les données.

Je t'ai fait un fiddle pour que tu vois a quoi ça peut ressembler avec quelque style basique : https://jsfiddle.net/db2uw6vh/

Et il y'a aussi la possibilité d'avoir des éléments <col> https://developer.mozilla.org/fr/do [...] lement/col et <caption> https://developer.mozilla.org/fr/do [...] nt/caption

---------------
D3

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Exemple tu veux faire un tableau :

Code :

5 colonnes
5 colonnes
4 colonnes
5 colonnes

La ligne de 4 colonnes doit alors comporter une colonne qui a pour largeur de 2 colonnes.

Maintenant tu veux faire un tableau :

Code :

4 colonnes
4 colonnes
5 colonnes
4 colonnes

Les deux premières lignes et la dernière ligne doivent posséder une colonne qui a pour largeur 2 colonnes.

L'exemple du livre est vraiment basique ... il ne donne pas assez d'explications sur le sujet, et on saute un peu du coq à l'âne ...
Il y a tellement de possibilités concernant ces tableaux, que c'en est un peu embrouillant, avec la quantité d'éléments et d'attributs à digérer.

Message cité 1 fois

Harmo88

Il n\\

Harmo88 a écrit :

Avec tes explications, j'obtiens le même résultat, c'est OK.
Je ne vais pas entrer dans les détails, c'est un peu ch.... à expliquer. L'important est que j'obtienne le résultat voulu.

Harmo88

Il n\\

Harmo88 a écrit :

Plusieurs tableaux dans la page, avec des caractéristiques différents:

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>page 103 livre HTML</title
<link rel="stylesheet" type="text/css" href="" />
<style>
table {
border-collapse:collapse;
}
td:first-of-type {
background-color: yellow;
font-size: 18px:
}
th,td{
border: 1px solid black;
padding: 10px;
}
th {
background-color: red;
font-size: 25px;
}
td {
background-color: antiquewhite;
font-size: 25px;
}
#table1 td{
font-size:18px
background-color: antiquewhite;
}
#table1 th{
font-size: 30px;
background-color: #b2a8f6;;
}
</style>
<body>
<table>
<h3>PREMIER TABLEAU
<tr>
<th>JANVIER</th>
<th>FEVRIER</th>
<th>MARS</th>
<th>AVRIL</th>
<th>MAI</th>
</tr>
<tr>
<td>11<p>Bonjour, ai-je assez de place ?</p></td>
<td>12<p>Passage à la ligne avec "br".<br> C'est merveilleux !</p></td>
<td>13<p>La sémantique est-elle respectée ?<br>Avec l'emploi de "br" ?</p></td>
<td>14<p>Mais oui, il y a de la place !</p></td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24<p>Pour ajouter une colonne<br>il faut ajouter un "th" dans "table".<br>
et un "td".</p></td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>
<table id="table1">
<h3>DEUXIEME TABLEAU</H3>
<tr>
<th>JUIN</th>
<th>JUILLET</th>
<th>AOUT</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>

Message cité 1 fois

MaybeEijOrNot

but someone at least

Petite correction du devoir, comme à l'école. :whistle:

Harmo88 a écrit :

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>page 103 livre HTML</title
<link rel="stylesheet" type="text/css" href="" />
<style>
table {
border-collapse: collapse;
}
td:first-of-type {
background-color: yellow;
font-size: 18px:
}
th,td {
border: 1px solid black;
padding: 10px;
}
th {
background-color: red;
font-size: 25px;
}
td {
background-color: antiquewhite;
font-size: 25px;
}
#table1 td {
font-size:18px
background-color: antiquewhite;
}
#table1 th {
font-size: 30px;
background-color: #b2a8f6;;
</style>
<body>
<table>
<h3>PREMIER TABLEAU
<tr>
<th>JANVIER</th>
<th>FEVRIER</th>
<th>MARS</th>
<th>AVRIL</th>
<th>MAI</th>
</tr>
<tr>
<td>11<p>Bonjour, ai-je assez de place ?</p></td>
<td>12<p>Passage à la ligne avec "br".<br> C'est merveilleux !</p></td>
<td>13<p>La sémantique est-elle respectée ?<br>Avec l'emploi de "br" ?</p></td>
<td>14<p>Mais oui, il y a de la place !</p></td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24<p>Pour ajouter une colonne<br>il faut ajouter un "th" dans "table".<br>
et un "td".</p></td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>
<table id="table1">
<h3>DEUXIEME TABLEAU</H3>
<tr>
<th>JUIN</th>
<th>JUILLET</th>
<th>AOUT</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>

Les <h3> c'est en dehors du tableau, regarde le contenu autorisé : https://developer.mozilla.org/fr/do [...] _technique
De plus l'un n'a pas de balise fermante, l'autre en a une écrite en majuscules alors que tu écris toutes tes balises en minuscules.
Ligne 17, un double-point au lieu d'un point-virgule c'est une faute qui peut avoir beaucoup de conséquences.
Ligne 42, un second point-virgule, faute sans conséquence je pense.

Tu devrais essayer de jouer avec l'attribut "colspan" pour pousser plus loin dans l'utilisation les tableaux.

Alors maintenant ta note, tu as obtenu, non je rigole.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Petite correction du devoir, comme à l'école. :whistle:

MaybeEijOrNot a écrit :

J'ai obtenu 8/20 :lol: bon, allez, 10/20 parce que j'ai fourni un gros effort(on va quand même pas trop saquer :lol: .
Quand je fais des copier/coller, je ne remarque pas toujours que je copie un signe trop loin ... manque d'attention.
J'ai remplacé les <h3> par des <th> ce qui crée une cellule en haut à gauche du tableau, avec le titre.
J'ai placé un <caption> pour la légende des 2 tableaux.
Par contre, dans le premier tableau les premières cellules ont une police plus petite que les autres cellules .... encore un signe mal placé ? Je vais chercher.
Vu les erreurs que je fais en ce moment, je dois saturer un peu ... les neurones flanchent(je ne leurs en veux pas, ils ne sont plus tous neufs :lol: )
OK pour "colspan", je vais regarder ça.
Mais ça va s’arrêter où, et quand ? :lol:

Message cité 1 fois

MaybeEijOrNot

but someone at least

Harmo88 a écrit :

J'ai remplacé les <h3> par des <th> ce qui crée une cellule en haut à gauche du tableau, avec le titre.

Euh... ?! :heink:
Décrit comme ça, ça n'a pas l'air très bon. Tu as fait quoi exactement ?
Si tu fais ça, il faut mettre ton <th> dans une nouvelle ligne et lui mettre un colspan de 5 pour le premier tableau et de 3 pour le second tableau, un petit exercice de base en somme. Ou alors je n'ai pas compris et tu as remplacé le contenu d'un de tes <th> par le contenu du titre.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Le nouveau code:

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>page 103 livre HTML</title
<link rel="stylesheet" type="text/css" href="" />
<style>
table {
border-collapse:collapse;
}
td:first-of-type {
background-color: yellow;
font-size: 18px;
}
th,td {
border: 1px solid black;
padding: 10px;
}
th {
background-color: red;
font-size: 25px;
}
td {
background-color: antiquewhite;
font-size: 25px;
}
#table1 td{
font-size: 20px;
background-color: antiquewhite;
}
#table1 th {
font-size: 30px;
background-color: #b2a8f6;
}
</style>
<body>
<table>
<caption>BILAN DE QUELQUES MOIS</caption>
<th>PREMIER TABLEAU</th>
<tr>
<th>JANVIER</th>
<th>FEVRIER</th>
<th>MARS</th>
<th>AVRIL</th>
<th>MAI</th>
</tr>
<tr>
<td>11<p>Bonjour, ai-je assez de place ?</p></td>
<td>12<p>Passage à la ligne avec "br".<br> C'est merveilleux !</p></td>
<td>13<p>La sémantique est-elle respectée ?<br>Avec l'emploi de "br" ?</p></td>
<td>14<p>Mais oui, il y a de la place !</p></td>
<td>15</td>
</tr>
<tr>
<td>16<p>Utilisation de paragraphes "p" / "/p"</p></td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24<p>Pour ajouter une colonne<br>il faut ajouter un "th" dans "table".<br>
et un "td".</p></td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>
<table id="table1">
<caption>BILAN DES MOIS SUIVANTS</caption>
<th>DEUXIEME TABLEAU</th>
<tr>
<th>JUIN</th>
<th>JUILLET</th>
<th>AOUT</th>
</tr>
<tr>
<td>1. Texte depuis "td". C'est l'été.</td>
<td>2. Il fait toujours aussi chaud.</td>
<td>3. La canicule s'est installée<br>
le pastis est au frais.</td>
</tr>
</table>
</body>
</html>

Message édité par Harmo88 le 11-05-2022 à 15:21:34

MaybeEijOrNot

but someone at least

C'est bien ce dont j'avais peur...
Les <th> ou <td> doivent obligatoirement être à l'intérieur d'un <tr>.

Comme dit par Gatsu, la structure d'un tableau c'est la définition du tableau avec <table> :

Code :

<table>
</table>

Puis la construction des sections du tableau :

Code :

<table>
<thead>
</thead>
<tbody>
</tbody>
<tfooter>
</tfooter>
</table>

On ajoute des lignes :

Code :

<table>
<thead>
<tr>
</tr>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
<tfooter>
<tr>
</tr>
</tfooter>
</table>

Et enfin on crée des cellules :

Code :

<table>
<thead>
<tr>
<th colspan="5">Mon tableau</th>
</tr>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
<th>Colonne 4</th>
<th>Colonne 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
</tr>
</tbody>
<tfooter>
<tr>
<th colspan="5">Pied de tableau</th>
</tr>
</tfooter>
</table>

Message cité 1 fois
Message édité par MaybeEijOrNot le 11-05-2022 à 17:20:10

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

C'est bien ce dont j'avais peur...
Les <th> ou <td> doivent obligatoirement être à l'intérieur d'un <tr>.

Comme dit par Gatsu, la structure d'un tableau c'est la définition du tableau avec <table> :

Code :

<table>
</table>

Puis la construction des sections du tableau :

Code :

<table>
<thead>
</thead>
<tbody>
</tbody>
<tfooter>
</tfooter>
</table>

On ajoute des lignes :

Code :

<table>
<thead>
<tr>
</tr>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
<tfooter>
<tr>
</tr>
</tfooter>
</table>

Et enfin on crée des cellules :

Code :

<table>
<thead>
<tr>
<th colspan="5">Mon tableau</th>
</tr>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
<th>Colonne 4</th>
<th>Colonne 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
</tr>
</tbody>
<tfooter>
<tr>
<th colspan="5">Pied de tableau</th>
</tr>
</tfooter>
</table>

Je pense que c'est bon ... ?

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>page 103 livre HTML</title
<link rel="stylesheet" type="text/css" href="" />
<style>
table {
border-collapse:collapse;
}
td:first-of-type {
background-color: yellow;
font-size: 25px;
}
th, td {
border: 1px solid black;
padding: 10px;
}
th {
background-color: red;
font-size: 25px;
}
td {
background-color: antiquewhite;
font-size: 25px;
}
#table1 td{
font-size: 20px;
background-color: antiquewhite;
}
#table1 th {
font-size: 30px;
background-color: #b2a8f6;
}
</style>
<body>
<table>
<tr>
<th>JANVIER</th>
<th>FEVRIER</th>
<th>MARS</th>
<th>AVRIL</th>
<th>MAI</th>
</tr>
</thead>
<tbody>
<tr>
<td>11<p>Bonjour, ai-je assez de place ?</p></td>
<td>12<p>Passage à la ligne avec "br".<br> C'est merveilleux !</p></td>
<td>13<p>La sémantique est-elle respectée ?<br>Avec l'emploi de "br" ?</p></td>
<td>14<p>Mais oui, il y a de la place !</p></td>
<td>15</td>
</tr>
<tr>
<td>16<p>Utilisation de paragraphes "p" / "/p"</p></td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24<p>Pour ajouter une colonne<br>il faut ajouter un "th" dans "table".<br>
et un "td".</p></td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</tbody>
<tfooter>
<tr>
<th colspan="5">1er tableau Bilan de quelques mois</th>
</tr>
</tfooter>
</table>
<table id="table1">
<thead>
<tr>
<th colspan="3"></th>
</tr>
<th>JUIN</th>
<th>JUILLET</th>
<th>AOUT</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. Texte depuis "td". C'est l'été.</td>
<td>2. Il fait toujours aussi chaud.</td>
<td>3. La canicule s'est installée<br>
le pastis est au frais.</td>
</tr>
</tbody>
<tfooter>
<tr>
<th colspan="3">2e tableau Bilan des mois suivants</th>
</tr>
</tfooter>
</table>
</body>
</html>

C'est quoi cette balise [cpp] ?

Message cité 1 fois

MaybeEijOrNot

but someone at least

Harmo88 a écrit :

Je pense que c'est bon ... ?

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>page 103 livre HTML</title
<link rel="stylesheet" type="text/css" href="" />
<style>
table {
border-collapse:collapse;
}
td:first-of-type {
background-color: yellow;
font-size: 25px;
}
th, td {
border: 1px solid black;
padding: 10px;
}
th {
background-color: red;
font-size: 25px;
}
td {
background-color: antiquewhite;
font-size: 25px;
}
#table1 td{
font-size: 20px;
background-color: antiquewhite;
}
#table1 th {
font-size: 30px;
background-color: #b2a8f6;
}
</style>
<body>
<table>
<tr>
<th>JANVIER</th>
<th>FEVRIER</th>
<th>MARS</th>
<th>AVRIL</th>
<th>MAI</th>
</tr>
</thead>
<tbody>
<tr>
<td>11<p>Bonjour, ai-je assez de place ?</p></td>
<td>12<p>Passage à la ligne avec "br".<br> C'est merveilleux !</p></td>
<td>13<p>La sémantique est-elle respectée ?<br>Avec l'emploi de "br" ?</p></td>
<td>14<p>Mais oui, il y a de la place !</p></td>
<td>15</td>
</tr>
<tr>
<td>16<p>Utilisation de paragraphes "p" / "/p"</p></td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24<p>Pour ajouter une colonne<br>il faut ajouter un "th" dans "table".<br>
et un "td".</p></td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</tbody>
<tfooter>
<tr>
<th colspan="5">1er tableau Bilan de quelques mois</th>
</tr>
</tfooter>
</table>
<table id="table1">
<thead>
<tr>
<th colspan="3"></th>
</tr>
<th>JUIN</th>
<th>JUILLET</th>
<th>AOUT</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. Texte depuis "td". C'est l'été.</td>
<td>2. Il fait toujours aussi chaud.</td>
<td>3. La canicule s'est installée<br>
le pastis est au frais.</td>
</tr>
</tbody>
<tfooter>
<tr>
<th colspan="3">2e tableau Bilan des mois suivants</th>
</tr>
</tfooter>
</table>
</body>
</html>

C'est quoi cette balise [cpp] ?

Mise à part le fait qu'il manque une balise fermante </head> avant la balise <body> (c'était peut-être déjà la cas avant mais je n'ai pas fait attention) et qu'il manque la balise ouvrante <thead> dans le premier tableau mais sinon oui tu as compris le principe.

La balise cpp c'est pareil que la balise code mais avec une mise en couleur syntaxique pour le C++. En fait dans l'encart de réponse, la bouton pour la balise code (balise par défaut) n'existe pas, il est remplacé par la bouton pour la balise C++.
Je ne connais malheureusement pas les différentes balises spécifiques pour le code qui existent sur le forum, je sais qu'il existe d'autres balises spécifiques pour avoir de la mise en forme syntaxique, mais alors lesquelles ?

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

Lorsque je modifie le code d'une page existante, j'oublie souvent des balises ... moins lorsque je crée une nouvelle page. Il faut que je prenne plus de temps à vérifier mon code.

Message cité 1 fois

gatsu35

Blablaté par Harko

Harmo88 a écrit :

Lorsque je modifie le code d'une page existante, j'oublie souvent des balises ... moins lorsque je crée une nouvelle page. Il faut que je prenne plus de temps à vérifier mon code.

Tu utilises quoi pour écrire ton code ?
Quel éditeur ?

Message cité 1 fois

---------------
Blablaté par Harko

Harmo88

Il n\\

gatsu35 a écrit :

Tu utilises quoi pour écrire ton code ?
Quel éditeur ?

Notepad ++, mais je l'utilise mal, puisque lorsque j'oublie une balise ouvrante ou fermante, je devrais m'en apercevoir ...
Je dois plus utiliser cette fonction, avant de poster ... d'autant plus que certaines balises non fermées(mais qui devraient l'être de part leur syntaxe) n’interfèrent
pas obligatoirement dans l'affichage de la page. Je dois être un peu trop pressé de voir les résultats.
J'utilise aussi Untitled, ce qui ne m’empêche pas de faire les mêmes conn.... donc, c'est bien un "défaut" chez moi.
Y'a pu qu'à ...rectifier le tir.

gatsu35

Blablaté par Harko

Laisse moi (ou nous) te proposer d'utiliser Visual Studio Code :
https://code.visualstudio.com/

70% des développers l'utilisent (ont migré en tout cas)

Citation :

In the Stack Overflow 2021 Developer Survey, Visual Studio Code was ranked the most popular developer environment tool, with 70% of 82,000 respondents reporting that they use it.[11]

Son avantage c'est qu'il est très rapide, très simple d'utilisation,
rempli de fonctionnalités, et surtout il te montreras si tu oublies une balise ou non.
Autre avantage c'est qu'il peut être étendu grâce à des extensions, et il possède une market place pour pouvoir installer les extensions dont on a besoin.

Et il est open source et gratuit.

Message cité 1 fois

---------------
Blablaté par Harko

Publicité

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

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

Insertion image en html depuis mon ordi

Sujets relatifs
Signature e-mail en HTML adaptative mode clair/sombre ?	Exercice html, php, mysql, javascript
hébergement de page html	responsive scroll pas quand je glisse l'image
Probleme d'edition d'image dans Django	Envoi image sur blog impossible
Aligner le background au milieu de l'image	un 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

Page générée en 0.313 secondes