Simplification de code htlm
Fermé
chamotte
-
28 mars 2011 à 23:22
fxtaa Messages postés 1050 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 2 avril 2015 - 30 mars 2011 à 16:49
fxtaa Messages postés 1050 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 2 avril 2015 - 30 mars 2011 à 16:49
A voir également:
- Codage htlm
- Codage ascii - Guide
- Codage binaire - Guide
- Fichier word illisible codage - Guide
- Application codage - Guide
- Pour enregistrer ce texte au format txt sans perdre d’informations, quel codage utiliser ? - Forum Webmastering
9 réponses
Euh apprends le html puis le CSS, ce sont deux langages de balisage(et non de programmation).
Tes questions viennent du fait que tu ne comprends pas ce que tu fait. Tu parles de copié /collé? quel interêt avec du html, en css à la limite quabd on débutes et encore.
Voici le principe du html:
On indique des éléments avec des balises, ces éléments peuvent contenir d'autres éléments comme un tiroir dans lequel on peut mettre d'autre tiroir:
Ex.:
<element1>
AAA
</element1>
"element1" est le nom de la balise, elle s'ouvre (<element1> et se ferme</element1> donc entre ces deux balises(ouvrantes et fermantes) il y a du contenu: "AAA".
Voilà bien sûr en html la balise "element1" n'existe pas elle ont des noms plus court(une lettre à un mot) et il faut regarder comment s'organise les balises et à quoi elle servent.
Le CSS (cascading style sheet, feuilles de styles en cascade) est la méthode utilisée actuellement pour la mise en page des pages web. On peut construire des propriétés (et non des fonctions, les fonctions sont des éléments de programmation , le html et le css servent à faire une nomenclature à l'aide de balises et ne permet aucune programmation).
Les propritéés on,t des régles d'écriture qui comme dans tous les langages s'appellent syntaxe. Sans connaître la syntaxe d'une langue pas la peine d'essayer de l'écrire...donc commencez par le commencement: apprendre ces règles d'écriture. Je suit sûr qu'avec le temps que vous avez mis à chercher des codes tout fait et les copier_coller, ce qui ne vous sert à rien, vous maîtriserez déjà cette syntaxe et pourrez faire tout ce dont vous avez besoin en connaissance de cause. Après tout c'est très simple et pas comme apprendre à parler une nouvelle langue.
ps: "famille" ne veut rien dire, on parles de classes(class) et d'id(pour identifiant), encore une fois le problème vient du fait que vous ne voulez pas apprendre et pensez avoir du tout cuit alors qu'il suffit de relever les manches et d'appuyer sur le bouton du four pour le mettre en marche.
Bon apprentissage.
@ txiki citation:
>
>Dreamweaver a un outil génial pour corriger d'un seul coup une portion de >code. Par ex: (je ne l'ai pas sous les yeux) :
Euh certainement pas, n'importe quel webmaster vous dira que le code de Dreamweaver est épouvantable mal fait et loin du respect des normes...
Dreamweaver est un outil pratique pour faire des trucs en visuel(sans code) qui ne seront pas professionnel et souvent utilisé en apprentissage pour cette opportunité d'approcher la création de page sans faire de html(le wysiwyg) et parce qu'il est possible d'obtenir facilement une licence éducation gratuite auprès de l'éditeur du logiciel.
ps2:
<center id="CITY">
lol surtout quand on voit la propriété css, ça prouve bien que vous avez pas envie d'en toucher une, raah ces marseillais(je suit dans le 13 aussi)
Tes questions viennent du fait que tu ne comprends pas ce que tu fait. Tu parles de copié /collé? quel interêt avec du html, en css à la limite quabd on débutes et encore.
Voici le principe du html:
On indique des éléments avec des balises, ces éléments peuvent contenir d'autres éléments comme un tiroir dans lequel on peut mettre d'autre tiroir:
Ex.:
<element1>
AAA
</element1>
"element1" est le nom de la balise, elle s'ouvre (<element1> et se ferme</element1> donc entre ces deux balises(ouvrantes et fermantes) il y a du contenu: "AAA".
Voilà bien sûr en html la balise "element1" n'existe pas elle ont des noms plus court(une lettre à un mot) et il faut regarder comment s'organise les balises et à quoi elle servent.
Le CSS (cascading style sheet, feuilles de styles en cascade) est la méthode utilisée actuellement pour la mise en page des pages web. On peut construire des propriétés (et non des fonctions, les fonctions sont des éléments de programmation , le html et le css servent à faire une nomenclature à l'aide de balises et ne permet aucune programmation).
Les propritéés on,t des régles d'écriture qui comme dans tous les langages s'appellent syntaxe. Sans connaître la syntaxe d'une langue pas la peine d'essayer de l'écrire...donc commencez par le commencement: apprendre ces règles d'écriture. Je suit sûr qu'avec le temps que vous avez mis à chercher des codes tout fait et les copier_coller, ce qui ne vous sert à rien, vous maîtriserez déjà cette syntaxe et pourrez faire tout ce dont vous avez besoin en connaissance de cause. Après tout c'est très simple et pas comme apprendre à parler une nouvelle langue.
ps: "famille" ne veut rien dire, on parles de classes(class) et d'id(pour identifiant), encore une fois le problème vient du fait que vous ne voulez pas apprendre et pensez avoir du tout cuit alors qu'il suffit de relever les manches et d'appuyer sur le bouton du four pour le mettre en marche.
Bon apprentissage.
@ txiki citation:
>
>Dreamweaver a un outil génial pour corriger d'un seul coup une portion de >code. Par ex: (je ne l'ai pas sous les yeux) :
Euh certainement pas, n'importe quel webmaster vous dira que le code de Dreamweaver est épouvantable mal fait et loin du respect des normes...
Dreamweaver est un outil pratique pour faire des trucs en visuel(sans code) qui ne seront pas professionnel et souvent utilisé en apprentissage pour cette opportunité d'approcher la création de page sans faire de html(le wysiwyg) et parce qu'il est possible d'obtenir facilement une licence éducation gratuite auprès de l'éditeur du logiciel.
ps2:
<center id="CITY">
lol surtout quand on voit la propriété css, ça prouve bien que vous avez pas envie d'en toucher une, raah ces marseillais(je suit dans le 13 aussi)
siniko44
Messages postés
172
Date d'inscription
vendredi 30 juillet 2010
Statut
Membre
Dernière intervention
29 novembre 2013
17
29 mars 2011 à 11:52
29 mars 2011 à 11:52
-Enlèves les retours à la ligne a chaque balise <br>, ou autre.
-Supprime les espace blanc occupé par 2 saut de ligne.
-Et pour finir, la structure du CSS peut être aussi présenter autrement, tel que par exemple :
Peut devenir :
Ce qui je pense te feras gagner un bon nombre de lignes ;)
-Supprime les espace blanc occupé par 2 saut de ligne.
-Et pour finir, la structure du CSS peut être aussi présenter autrement, tel que par exemple :
.colonne {
float : right;
width : 230px;
margin : 10px;
background-color : #fff;
font-family: "Century Gothic";
font-size: 12px;
}
Peut devenir :
.colonne { float:right; width:230px; margin:10px; background-color:#fff; font-family:"Century Gothic"; font-size:12px; } // Ou carrément sans espaces, après c'est une préférence.
Ce qui je pense te feras gagner un bon nombre de lignes ;)
telliak
Messages postés
3667
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
4 novembre 2024
876
29 mars 2011 à 14:00
29 mars 2011 à 14:00
Dans le code CSS, regrouper les paramètres en un minimum de lignes n'est pas un bon plan : la lisibilité est considérablement amoindrie.
bg62
Messages postés
23664
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
17 décembre 2024
2 392
Modifié par bg62 le 29/03/2011 à 11:55
Modifié par bg62 le 29/03/2011 à 11:55
que veux-tu que l'on fasse d'un tel fouilli ????
ce n'est pas tant le nombre de lignes qui compte en premier, c'est le codage !!!
exemple :
balise qui n'est même pas fermée ^^
donc code correctement, passe par le w3c , corriges au maximum et non seulement ce sera meilleur, mais ça va s'alléger :)
.... un chameau ça ne boit pas souvent mais quand ça s'y met !!! ... :)
ps : anonyme ? pourquoi ? ici l'inscription est gratuite ...
le 'www' est fait aussi pour communiquer, partager et échanger, non ?
merci d'avoir la politesse de répondre à ceux qui essaient de vous aider
ce n'est pas tant le nombre de lignes qui compte en premier, c'est le codage !!!
exemple :
<meta name="description" content="MARSEILLECITY
balise qui n'est même pas fermée ^^
donc code correctement, passe par le w3c , corriges au maximum et non seulement ce sera meilleur, mais ça va s'alléger :)
.... un chameau ça ne boit pas souvent mais quand ça s'y met !!! ... :)
ps : anonyme ? pourquoi ? ici l'inscription est gratuite ...
le 'www' est fait aussi pour communiquer, partager et échanger, non ?
merci d'avoir la politesse de répondre à ceux qui essaient de vous aider
j'avais prévenu !
c'était un peu l'objet de ma venue de coder correctement,
de tout ce que j'ai lu sur le code au final j'ai réussi à faire ce que je voulais.
deuxième étape je cherchais quelqu'un pour m'aider à corriger ce code et pas juste le rendre moins long (mais un grand merci siniko pour ta réponse). par exemple j'imagine que ce n'est pas la peine de répéter des balise font pour chaque information de couleur, de taille, etc) mais je ne sais pas comment on hiérarchise en fait je ne sais pas structurer mon code.
mais attention je suis très bosseuse et volontaire je ne viens pas vous demander de faire mon site à ma place.
c'est quoi le W3C ?
et n'y a t'il pas une option dans dreamwever qui corrige le code ?
merci en tout cas d'avoir regardé ça a du vous arracher l'oeil
nb : je vais m'inscrire de ce pas
c'était un peu l'objet de ma venue de coder correctement,
de tout ce que j'ai lu sur le code au final j'ai réussi à faire ce que je voulais.
deuxième étape je cherchais quelqu'un pour m'aider à corriger ce code et pas juste le rendre moins long (mais un grand merci siniko pour ta réponse). par exemple j'imagine que ce n'est pas la peine de répéter des balise font pour chaque information de couleur, de taille, etc) mais je ne sais pas comment on hiérarchise en fait je ne sais pas structurer mon code.
mais attention je suis très bosseuse et volontaire je ne viens pas vous demander de faire mon site à ma place.
c'est quoi le W3C ?
et n'y a t'il pas une option dans dreamwever qui corrige le code ?
merci en tout cas d'avoir regardé ça a du vous arracher l'oeil
nb : je vais m'inscrire de ce pas
CHAMOTTE
Messages postés
13
Date d'inscription
mardi 29 mars 2011
Statut
Membre
Dernière intervention
25 mai 2011
29 mars 2011 à 12:14
29 mars 2011 à 12:14
voilà
txiki
Messages postés
6596
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
518
29 mars 2011 à 12:53
29 mars 2011 à 12:53
Le w3c est le consortium qui défini les règles de codages html, css etc...
txiki
Messages postés
6596
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
518
29 mars 2011 à 12:51
29 mars 2011 à 12:51
Salut Chamelle euhhhhh Chamotte.... ;-)
Dreamweaver a un outil génial pour corriger d'un seul coup une portion de code. Par ex: (je ne l'ai pas sous les yeux) :
Pour <B><FONT COLOR="#E52163">LE CAFE DE L'ABBAYE</FONT></B>
<br/> <br/>
tu vas dans Edition puis Rechercher et Remplacer...
Dans la première liste déroulante tu choisi document actif (si tu n'a que cette page a corriger) et dans la seconde tu choisi Code (puisqu'il s'agit de modifier ton code).
Dans le champ Rechercher, tu écrit <b><FONT COLOR="#E52163">Et dans le champ Remplacer, tu écrit <li class="toto"> (il est préférable de faire des listes à puces dans ton cas). Bien sur la classe toto n'existe pas mais tu la créera plus tard.
Tu recommence l'opération mais cette fois-ci tu écrit </FONT></B>
<br/> <br/> que tu remplace par </li>.
Ainsi, la ligne <B><FONT COLOR="#E52163">LE CAFE DE L'ABBAYE</FONT></B>
<br/> <br/> deviendra
<li class="toto"> LE CAFE DE L'ABBAYE </li>
Note: pour avoir l'espace, tu pourra l'ajouter dans le champ Remplacer après >.
Pour terminer, lorsque tu regardera le nouveau code il faudra ajouter la balise <ol> (pour une liste ordonnée) <ul> (pour une liste non ordonnée) avant le premier <li>.
A la fin du dernier </li>, tu fermera ta balise </ol> ou </ul>.
PS: perso, je met le noms de balises en minuscule mais c'est MON choix.
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
Dreamweaver a un outil génial pour corriger d'un seul coup une portion de code. Par ex: (je ne l'ai pas sous les yeux) :
Pour <B><FONT COLOR="#E52163">LE CAFE DE L'ABBAYE</FONT></B>
<br/> <br/>
tu vas dans Edition puis Rechercher et Remplacer...
Dans la première liste déroulante tu choisi document actif (si tu n'a que cette page a corriger) et dans la seconde tu choisi Code (puisqu'il s'agit de modifier ton code).
Dans le champ Rechercher, tu écrit <b><FONT COLOR="#E52163">Et dans le champ Remplacer, tu écrit <li class="toto"> (il est préférable de faire des listes à puces dans ton cas). Bien sur la classe toto n'existe pas mais tu la créera plus tard.
Tu recommence l'opération mais cette fois-ci tu écrit </FONT></B>
<br/> <br/> que tu remplace par </li>.
Ainsi, la ligne <B><FONT COLOR="#E52163">LE CAFE DE L'ABBAYE</FONT></B>
<br/> <br/> deviendra
<li class="toto"> LE CAFE DE L'ABBAYE </li>
Note: pour avoir l'espace, tu pourra l'ajouter dans le champ Remplacer après >.
Pour terminer, lorsque tu regardera le nouveau code il faudra ajouter la balise <ol> (pour une liste ordonnée) <ul> (pour une liste non ordonnée) avant le premier <li>.
A la fin du dernier </li>, tu fermera ta balise </ol> ou </ul>.
PS: perso, je met le noms de balises en minuscule mais c'est MON choix.
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
telliak
Messages postés
3667
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
4 novembre 2024
876
Modifié par telliak le 29/03/2011 à 14:14
Modifié par telliak le 29/03/2011 à 14:14
Dreamweaver a un outil génial pour corriger d'un seul coup une portion de code
Utiliser DreamWeaver pour faire du code «propre» est un non-sens absolu, dans la mesure où il décide lui-même du formatage du code.
N'importe quel éditeur lambda (Notepad, Notepad++, ...) est meilleur et suffit pour avoir le résultat demandé.
perso, je met le noms de balises en minuscule mais c'est MON choix.
Tout à fait d'accord, le code est plus agréable à lire.
Utiliser DreamWeaver pour faire du code «propre» est un non-sens absolu, dans la mesure où il décide lui-même du formatage du code.
N'importe quel éditeur lambda (Notepad, Notepad++, ...) est meilleur et suffit pour avoir le résultat demandé.
perso, je met le noms de balises en minuscule mais c'est MON choix.
Tout à fait d'accord, le code est plus agréable à lire.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bg62
Messages postés
23664
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
17 décembre 2024
2 392
29 mars 2011 à 14:23
29 mars 2011 à 14:23
voilà les liens :
http://validator.w3.org/
pour le "codage"
http://jigsaw.w3.org/css-validator/
pour la css qu'il vaut mieux mettre à part et appeler à partir de chaque page
:)
http://validator.w3.org/
pour le "codage"
http://jigsaw.w3.org/css-validator/
pour la css qu'il vaut mieux mettre à part et appeler à partir de chaque page
:)
telliak
Messages postés
3667
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
4 novembre 2024
876
29 mars 2011 à 14:32
29 mars 2011 à 14:32
Salut,
Tu dis avoir appris à coder, mais je ne comprends pas l'origine de ton code : il y a mélange d'un minimum de code CSS et d'une palanquée de code HTML pour la mise en forme (<b>, <center>, ... ). Ce code HTML laisse penser qu'un générateur a été utilisé.
Il y a un choix à faire : coder «à la main», et tu peux espérer un code propre, ou utiliser un générateur, et, alors, il faut le laisser faire.
Peut-être as-tu choisi un autre chemin : un générateur pour créer un modèle et ensuite le reproduire ?
Quoi qu'il en soit, pour obtenir le résultat que tu demandes, il faut tout recoder et cela nécessite d'avoir un minimum de connaissances de l'utilisation de CSS. Evidemment il y aura des accidents et il faudra conserver le code d'origine pendant le recodage.
Tu dis avoir appris à coder, mais je ne comprends pas l'origine de ton code : il y a mélange d'un minimum de code CSS et d'une palanquée de code HTML pour la mise en forme (<b>, <center>, ... ). Ce code HTML laisse penser qu'un générateur a été utilisé.
Il y a un choix à faire : coder «à la main», et tu peux espérer un code propre, ou utiliser un générateur, et, alors, il faut le laisser faire.
Peut-être as-tu choisi un autre chemin : un générateur pour créer un modèle et ensuite le reproduire ?
Quoi qu'il en soit, pour obtenir le résultat que tu demandes, il faut tout recoder et cela nécessite d'avoir un minimum de connaissances de l'utilisation de CSS. Evidemment il y aura des accidents et il faudra conserver le code d'origine pendant le recodage.
txiki
Messages postés
6596
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
518
29 mars 2011 à 16:39
29 mars 2011 à 16:39
nedles: j'utilise Dreamweaver mais avec deux écrans. Un pour le visuel et l'autre pour le code (que je modifie allégrement à la volée).
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
telliak
Messages postés
3667
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
4 novembre 2024
876
29 mars 2011 à 21:00
29 mars 2011 à 21:00
C'est pas ça qui va améliorer la qualité du codage !!!
mimigenie
Messages postés
1180
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
4 août 2018
313
29 mars 2011 à 21:12
29 mars 2011 à 21:12
La meilleure chose,
apprendre à codez : le site du zéro est la pour ca
recommence tout à zéro ( ou presque ) car un mélange de bout trouvé un peu partout, c'est pas l'idéal
apprendre à codez : le site du zéro est la pour ca
recommence tout à zéro ( ou presque ) car un mélange de bout trouvé un peu partout, c'est pas l'idéal
fxtaa
Messages postés
1050
Date d'inscription
mardi 20 octobre 2009
Statut
Membre
Dernière intervention
2 avril 2015
74
30 mars 2011 à 09:44
30 mars 2011 à 09:44
Peut on m'expliquer pourquoi un modo a supprimé la réponse à la question ?
ie: refaire son code de manière propre
ie: refaire son code de manière propre
CHAMOTTE
Messages postés
13
Date d'inscription
mardi 29 mars 2011
Statut
Membre
Dernière intervention
25 mai 2011
30 mars 2011 à 16:42
30 mars 2011 à 16:42
merci énormément d'avoir pris le temps, je n'en reviens pas !
vous pourriez faire parti de notre collectif vous savez !
je ne sais pas pourquoi "on" a supprimé votre réponse mais elle m'a permis d comprendre mes erreurs.
Par ailleurs j'ai copié la parie du code style.css dans un fichier que j'ai nommé style.css, à l'ouverture de dreamwever j'ai lancé une nouvelle page htlm en liant le fichier style.css, mais je n'ai pas l'impression que ça marche
ni lorsque le colle entier (avec style.css) dans la page htlm ou sur le site
http://www.lechameaurose.com/test_a135.html
merci encore
vous pourriez faire parti de notre collectif vous savez !
je ne sais pas pourquoi "on" a supprimé votre réponse mais elle m'a permis d comprendre mes erreurs.
Par ailleurs j'ai copié la parie du code style.css dans un fichier que j'ai nommé style.css, à l'ouverture de dreamwever j'ai lancé une nouvelle page htlm en liant le fichier style.css, mais je n'ai pas l'impression que ça marche
ni lorsque le colle entier (avec style.css) dans la page htlm ou sur le site
http://www.lechameaurose.com/test_a135.html
merci encore
fxtaa
Messages postés
1050
Date d'inscription
mardi 20 octobre 2009
Statut
Membre
Dernière intervention
2 avril 2015
74
30 mars 2011 à 16:49
30 mars 2011 à 16:49
Je ne sais pas comment faire intégrer le code à dreamweaver mais si vous créez un fichier index.html et que vous copiez/collez le code html qui était joint dedans,
puis si vous créez, au même endroit, un fichier style.css et que vous copiez/collez le code css dedans, cela devrai fonctionner.
Bref la méthodologie employée est la suivante : hiérarchiser sa page avec des titres de différents niveaux, des paragraphes etc...
puis si vous créez, au même endroit, un fichier style.css et que vous copiez/collez le code css dedans, cela devrai fonctionner.
Bref la méthodologie employée est la suivante : hiérarchiser sa page avec des titres de différents niveaux, des paragraphes etc...
