Simplification de code htlm
chamotte
-
fxtaa Messages postés 1050 Date d'inscription Statut Membre Dernière intervention -
fxtaa Messages postés 1050 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je vais certainement en faire sauter plus d'un (et une) au plafond avec mon code de 12000 lignes mais c'est l'objet de ma venue sur le forum.
J'ai du coder une page htlm de façon très rapide (et au passage apprendre à coder) résultat des course j'ai choisis la méthode qui semblait être la plus simple ( en tout cas j'arrive au résultat souhaité) celle du copier coller.
Sauf que je me doute qu'il y a un moyen de recoupler sous une même fonction des paramètres récurant et d'appeler cette fonction sans tout retaper à chaque fois et c'est peu être cela que vous appelez des feuilles de style ?
bref j'ai ce code très long que j'aimerais que vous m'aidiez a simplifier en m'aidant à comprendre comment on fait des "familles"
merci au courageux ou à la courageuse qui me viendra en aide
voici l'adresse de la page http://www.lechameaurose.com/TEST_a129.html
et attention , le code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>MARSEILLECITY</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
<br>
}
#conteneur {
position: relative;A
margin: 0 auto;
width: 1090px;
}
.colonne {
float : right;
width : 230px;
margin : 10px;
background-color : #fff;
font-family: "Century Gothic";
font-size: 12px;
}
.colonne p {
margin : .5em;
color : #000;
text-align: center;
font-weight: bold;
font-size: 16px;
}
.colonne p center {
font-weight: bold;
font-size: 14px;
}
.colonne p center p {
text-align: center;
}
.tete {
CLEAR : left;
width : 300px;
text-align: left;
font-family: "Century Gothic";
font-size: 12px;
margin-top: 25px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.tete p {
margin : .5em;
color : #000;
text-align: left;
}
#CITY {
font-size: 36px;
}
#VILLE {
font-weight: bold;
font-size: 36px;
color: #000;
font-family: "Century Gothic";
}
#CITY {
color: #E52163;
font-weight: lighter;
}
</style>
</head>
<BODY LINK="#000000">
<div id="conteneur">
<div class="colonne">
<b><p><center>
<p>CULTURE / EVENEMENTS</p>
</center>
</b>
<hr>
<center><b>Théâtres </b> </center>
<br/>
<B><FONT COLOR="#E52163">LA CRIEE</FONT></B> -
<br/><br/>
<B><FONT COLOR="#E52163">LE GYMNASE</FONT></B> -
<br/><br/>
<B><FONT COLOR="#E52163">LE TOURSKY</FONT></B> -
<br/><br/>
<hr>
<center><b>lieux </b> </center>
<br/>
<B><FONT COLOR="#E52163">LA CITE RADIEUSE</FONT></B> -
Vue imprenable depuis le toit, qui devient parfois la scène de balets de danse ou de représentations théâtrales. Tous les deux ans, deux habitants ouvrent les portes de leur duplex et vous racontent toute l'histoire de cette construction phénoménale.<br/> <A HREF="http://www.marseille-citeradieuse.org/"target="_blank"><I>le site</I></A>
<br/> <br/>
<B><FONT COLOR="#E52163">LE MAC</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">LA FRICHE DE LA BELLE DE MAI</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">LE PALAIS LONGTCHAMP</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">LA VIELLE CHARITE</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">LE QUARTIER DU PANIER</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">LE VALLON DES AUFFES</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">MALMOUSQUE</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">MALMOUSQUE</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">lE PHONOGRAPHE</FONT></B> - Point 0 de référence mondiale
<br/> <br/>
<B><FONT COLOR="#E52163">LE CHATEAU D'IF</FONT></B> - lieu historique et légendaire grâce à Dumas et à l'histoire captivante de Monte-Cristo<br/>
<br/>
<hr><center><b> agenda </b></center><br/>
<B><FONT COLOR="#E52163">LE FID</FONT></B> - Festival international du documentaire<br/>
<br/>
<B><FONT COLOR="#E52163">MARSATACK</FONT></B> - <br/>
<br/>
</p>
</div>
<div class="colonne">
<p>
<center>
<p>MANGER / DORMIR / FLANER</p>
</center>
<hr>
<center>
<b>Restaurants</b>
</center>
<br/>
<b><font color="#E52163">LE BOBOLIVO</font></b> - Quelle ambiance ! Une cuisine de Bistrot à la fois moderne et authentique. Fermé le dimanche soir et le lundi. <br/> <A HREF="http://maps.google.fr/..."target="_blank"><I>l'adresse</I></A>
<br/> <br/>
<b><font color="#E52163">LA TASCA</font></b> - tapas <br/>
<br/>
<b><font color="#E52163">LAS DOS HERMANAS</font></b> - tapas <br/>
<br/>
<b><font color="#E52163">CHEZ ZE</font></b> - ambiance marseillaise pizzeria <br/>
<br/>
alentours de marseille: <br/>
<br/>
a niolon <br/>
<br/>
<b><font color="#E52163">LA PERGOLA</font></b> - resto au bord d'un petit port <br/>
<br/>
<hr>
<center>
<b>Food </b>
</center>
<br/>
<b><font color="#E52163">LA ROTISSERIE</font></b> - 54 bd Vauban, allez y avec votre tee shirt ! <br/>
<br/>
l'estaque pour ses baraques de panisse et chichi(100% marseillais)
<br/><br/>
<hr>
<center>
<b>Parc </b>
</center>
<br/>
<B><FONT COLOR="#E52163">LE PARC BORELY</FONT></B> - Si vous êtes sportif vous y ferez certainement quelques amis, surtout le dimanche matin
<br/> <br/>
<B><FONT COLOR="#E52163">PASTRE</FONT></B> - il y a un centre équestre dans ce parc qui propose des tours de poney
<br/>
<br/>
<B><FONT COLOR="#E52163">LE PHARO</FONT></B> -
<br/> <br/>
<hr>
<center>
<b>calanques </b>
</center>
<br/><br/>
<B><FONT COLOR="#E52163">SUGITON</FONT></B> - C'est la moins fréquentée parce que le chemin pour y accéder est long (surtout au retour) et le dénivelé impressionnant, mais quelle merveille. Un énorme rocher ressemble au vaisseau du capitaine de Némo, le Nautilus.
<br/> <br/>
<B><FONT COLOR="#E52163">EN-VAU</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">SORMIOU</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">MORGIOU</FONT></B> -
<br/> <br/>
</div>
<div class="colonne">
<p><center>
<p>LIFE STYLE / SORTIE
</p>
</center>
<hr><center><b> beauté </b></center><br/>
<B><FONT COLOR="#E52163">CHEZ JOCE</FONT></B> - coiffeur
<br/> <br/>
<B><FONT COLOR="#E52163">LE BEAUTY BAR</FONT></B> - coiffeur
<br/> <br/>
<B><FONT COLOR="#E52163">CASA CAPPELLI</FONT></B> - coiffeur
<br/> <br/>
<hr><center>
<b> boutiques</b>
</center><br/>
<B><FONT COLOR="#E52163">POMPONETTE</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE VENDEUR D'AFFICHES</FONT></B>
<br/> <br/>
<hr><center><b>cafés</b></center><br/>
<B><FONT COLOR="#E52163">LE MIRAMAR</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE SHAMBALA</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">AMPM</FONT></B>
<br/> <br/>
<hr><center><b>bars</b></center><br/>
<B><FONT COLOR="#E52163">LE CAFE DE L'ABBAYE</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LES DANAIDES</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE POLYKARPOV</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE BAR DU MARCHE</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">OGGIES</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LA CARAVELLE</FONT></B>
<br/> <br/>
<A HREF="http://www.lechameaurose.com/Le-Duke-Bistro-moderne_a55.html"><B><FONT COLOR="#E52163">LE DUKE</FONT></B></A>
- Bistro moderne avec ambiance fifties revisitée. Déco chinée et très graphique. Ouvert du mardi au samedi de 18h à Minuit.
<br/> <br/>
<B><FONT COLOR="#E52163">LA DAME NOIRE</FONT></B><br/> <br/>
<B><FONT COLOR="#E52163">LE CUBAILA CAFE</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE PETIT NICE</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE PELE-MELE</FONT></B>
<br/> <br/>
<hr><center><b>clubs</b></center><br/>
<B><FONT COLOR="#E52163">LE PASSE TEMPS</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE BUNNY'Z</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">THE LAST ROOM</FONT></B></div>
<div class="tete">
<p><center id="CITY">
<b> <span id="VILLE">MARSEILLE</span><span id="CITY">CITY </span></b>
</center>
</p>
<br>
<br />
<img src="docs/marseille.jpg" alt=""width="300"height="199" />
<BR> <BR>
<justify>
Marseille est une ville surprenante, on y sent parfois la langueur que provoque un hiver trop long mais aussi les joies du printemps qui arrive, puis qui laisse peu à peu place aux apéros bateau, aux verres de rosés en terrasse, aux cafés qui trainent jusqu'à 22h, aux virées en deux roues avec pour seule apparat un petit short et une paire de lunette. La décontraction à l'état pur ! Qu'il est bon cet air salé qui pousse un tantinet à la nonchalance au soleil,aux parties de cartes et aux éclats de rires. Si vous n'avez pas aimé c'est que vous avez mal regardé !
</justify>
</div>
</body>
</html>
Je vais certainement en faire sauter plus d'un (et une) au plafond avec mon code de 12000 lignes mais c'est l'objet de ma venue sur le forum.
J'ai du coder une page htlm de façon très rapide (et au passage apprendre à coder) résultat des course j'ai choisis la méthode qui semblait être la plus simple ( en tout cas j'arrive au résultat souhaité) celle du copier coller.
Sauf que je me doute qu'il y a un moyen de recoupler sous une même fonction des paramètres récurant et d'appeler cette fonction sans tout retaper à chaque fois et c'est peu être cela que vous appelez des feuilles de style ?
bref j'ai ce code très long que j'aimerais que vous m'aidiez a simplifier en m'aidant à comprendre comment on fait des "familles"
merci au courageux ou à la courageuse qui me viendra en aide
voici l'adresse de la page http://www.lechameaurose.com/TEST_a129.html
et attention , le code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>MARSEILLECITY</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
<br>
}
#conteneur {
position: relative;A
margin: 0 auto;
width: 1090px;
}
.colonne {
float : right;
width : 230px;
margin : 10px;
background-color : #fff;
font-family: "Century Gothic";
font-size: 12px;
}
.colonne p {
margin : .5em;
color : #000;
text-align: center;
font-weight: bold;
font-size: 16px;
}
.colonne p center {
font-weight: bold;
font-size: 14px;
}
.colonne p center p {
text-align: center;
}
.tete {
CLEAR : left;
width : 300px;
text-align: left;
font-family: "Century Gothic";
font-size: 12px;
margin-top: 25px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.tete p {
margin : .5em;
color : #000;
text-align: left;
}
#CITY {
font-size: 36px;
}
#VILLE {
font-weight: bold;
font-size: 36px;
color: #000;
font-family: "Century Gothic";
}
#CITY {
color: #E52163;
font-weight: lighter;
}
</style>
</head>
<BODY LINK="#000000">
<div id="conteneur">
<div class="colonne">
<b><p><center>
<p>CULTURE / EVENEMENTS</p>
</center>
</b>
<hr>
<center><b>Théâtres </b> </center>
<br/>
<B><FONT COLOR="#E52163">LA CRIEE</FONT></B> -
<br/><br/>
<B><FONT COLOR="#E52163">LE GYMNASE</FONT></B> -
<br/><br/>
<B><FONT COLOR="#E52163">LE TOURSKY</FONT></B> -
<br/><br/>
<hr>
<center><b>lieux </b> </center>
<br/>
<B><FONT COLOR="#E52163">LA CITE RADIEUSE</FONT></B> -
Vue imprenable depuis le toit, qui devient parfois la scène de balets de danse ou de représentations théâtrales. Tous les deux ans, deux habitants ouvrent les portes de leur duplex et vous racontent toute l'histoire de cette construction phénoménale.<br/> <A HREF="http://www.marseille-citeradieuse.org/"target="_blank"><I>le site</I></A>
<br/> <br/>
<B><FONT COLOR="#E52163">LE MAC</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">LA FRICHE DE LA BELLE DE MAI</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">LE PALAIS LONGTCHAMP</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">LA VIELLE CHARITE</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">LE QUARTIER DU PANIER</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">LE VALLON DES AUFFES</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">MALMOUSQUE</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">MALMOUSQUE</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">lE PHONOGRAPHE</FONT></B> - Point 0 de référence mondiale
<br/> <br/>
<B><FONT COLOR="#E52163">LE CHATEAU D'IF</FONT></B> - lieu historique et légendaire grâce à Dumas et à l'histoire captivante de Monte-Cristo<br/>
<br/>
<hr><center><b> agenda </b></center><br/>
<B><FONT COLOR="#E52163">LE FID</FONT></B> - Festival international du documentaire<br/>
<br/>
<B><FONT COLOR="#E52163">MARSATACK</FONT></B> - <br/>
<br/>
</p>
</div>
<div class="colonne">
<p>
<center>
<p>MANGER / DORMIR / FLANER</p>
</center>
<hr>
<center>
<b>Restaurants</b>
</center>
<br/>
<b><font color="#E52163">LE BOBOLIVO</font></b> - Quelle ambiance ! Une cuisine de Bistrot à la fois moderne et authentique. Fermé le dimanche soir et le lundi. <br/> <A HREF="http://maps.google.fr/..."target="_blank"><I>l'adresse</I></A>
<br/> <br/>
<b><font color="#E52163">LA TASCA</font></b> - tapas <br/>
<br/>
<b><font color="#E52163">LAS DOS HERMANAS</font></b> - tapas <br/>
<br/>
<b><font color="#E52163">CHEZ ZE</font></b> - ambiance marseillaise pizzeria <br/>
<br/>
alentours de marseille: <br/>
<br/>
a niolon <br/>
<br/>
<b><font color="#E52163">LA PERGOLA</font></b> - resto au bord d'un petit port <br/>
<br/>
<hr>
<center>
<b>Food </b>
</center>
<br/>
<b><font color="#E52163">LA ROTISSERIE</font></b> - 54 bd Vauban, allez y avec votre tee shirt ! <br/>
<br/>
l'estaque pour ses baraques de panisse et chichi(100% marseillais)
<br/><br/>
<hr>
<center>
<b>Parc </b>
</center>
<br/>
<B><FONT COLOR="#E52163">LE PARC BORELY</FONT></B> - Si vous êtes sportif vous y ferez certainement quelques amis, surtout le dimanche matin
<br/> <br/>
<B><FONT COLOR="#E52163">PASTRE</FONT></B> - il y a un centre équestre dans ce parc qui propose des tours de poney
<br/>
<br/>
<B><FONT COLOR="#E52163">LE PHARO</FONT></B> -
<br/> <br/>
<hr>
<center>
<b>calanques </b>
</center>
<br/><br/>
<B><FONT COLOR="#E52163">SUGITON</FONT></B> - C'est la moins fréquentée parce que le chemin pour y accéder est long (surtout au retour) et le dénivelé impressionnant, mais quelle merveille. Un énorme rocher ressemble au vaisseau du capitaine de Némo, le Nautilus.
<br/> <br/>
<B><FONT COLOR="#E52163">EN-VAU</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">SORMIOU</FONT></B> -
<br/> <br/>
<B><FONT COLOR="#E52163">MORGIOU</FONT></B> -
<br/> <br/>
</div>
<div class="colonne">
<p><center>
<p>LIFE STYLE / SORTIE
</p>
</center>
<hr><center><b> beauté </b></center><br/>
<B><FONT COLOR="#E52163">CHEZ JOCE</FONT></B> - coiffeur
<br/> <br/>
<B><FONT COLOR="#E52163">LE BEAUTY BAR</FONT></B> - coiffeur
<br/> <br/>
<B><FONT COLOR="#E52163">CASA CAPPELLI</FONT></B> - coiffeur
<br/> <br/>
<hr><center>
<b> boutiques</b>
</center><br/>
<B><FONT COLOR="#E52163">POMPONETTE</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE VENDEUR D'AFFICHES</FONT></B>
<br/> <br/>
<hr><center><b>cafés</b></center><br/>
<B><FONT COLOR="#E52163">LE MIRAMAR</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE SHAMBALA</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">AMPM</FONT></B>
<br/> <br/>
<hr><center><b>bars</b></center><br/>
<B><FONT COLOR="#E52163">LE CAFE DE L'ABBAYE</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LES DANAIDES</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE POLYKARPOV</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE BAR DU MARCHE</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">OGGIES</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LA CARAVELLE</FONT></B>
<br/> <br/>
<A HREF="http://www.lechameaurose.com/Le-Duke-Bistro-moderne_a55.html"><B><FONT COLOR="#E52163">LE DUKE</FONT></B></A>
- Bistro moderne avec ambiance fifties revisitée. Déco chinée et très graphique. Ouvert du mardi au samedi de 18h à Minuit.
<br/> <br/>
<B><FONT COLOR="#E52163">LA DAME NOIRE</FONT></B><br/> <br/>
<B><FONT COLOR="#E52163">LE CUBAILA CAFE</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE PETIT NICE</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE PELE-MELE</FONT></B>
<br/> <br/>
<hr><center><b>clubs</b></center><br/>
<B><FONT COLOR="#E52163">LE PASSE TEMPS</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">LE BUNNY'Z</FONT></B>
<br/> <br/>
<B><FONT COLOR="#E52163">THE LAST ROOM</FONT></B></div>
<div class="tete">
<p><center id="CITY">
<b> <span id="VILLE">MARSEILLE</span><span id="CITY">CITY </span></b>
</center>
</p>
<br>
<br />
<img src="docs/marseille.jpg" alt=""width="300"height="199" />
<BR> <BR>
<justify>
Marseille est une ville surprenante, on y sent parfois la langueur que provoque un hiver trop long mais aussi les joies du printemps qui arrive, puis qui laisse peu à peu place aux apéros bateau, aux verres de rosés en terrasse, aux cafés qui trainent jusqu'à 22h, aux virées en deux roues avec pour seule apparat un petit short et une paire de lunette. La décontraction à l'état pur ! Qu'il est bon cet air salé qui pousse un tantinet à la nonchalance au soleil,aux parties de cartes et aux éclats de rires. Si vous n'avez pas aimé c'est que vous avez mal regardé !
</justify>
</div>
</body>
</html>
A voir également:
- Codage htlm
- Codage ascii - Guide
- Codage binaire - Guide
- Application codage - Guide
- Fichier word illisible codage - Guide
- Controleur de codage/decodage pci ✓ - Forum Pilotes (drivers)
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)
-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 ;)
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
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.
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
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
:)
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.
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.
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
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
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
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...