Code propre et texte format

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Code propre et texte format

Message par desatan »

Bonjour à tous,

Je vous copie mon code car je souhaiterais si possible que vous le rendiez plus propre, c'est à dire, supprimer éventuellement ce qui n'est pas utile.

J'ai crée un texte qui défile, comment puis je faire pour changer la taille des caractère et la couleur ?

J'aimerai aussi que mon menu horizontal soit centré, comment faire ?

Merci par avance.

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>index</title>
<style type="text/css">
#menu ul {
padding-left: 0;
}
#menu li {
border: 1px solid #cc0000;
text-align: center;
float: left;
margin-right: 5px;
margin-left: 5px;
list-style-type: none;
width: 120px;
}
#menu a:visited {
color: #99ff99;
font-weight: bold;
text-decoration: none;
}
#menu a {
color: white;
font-weight: bold;
text-decoration: none;
background-color: #663333;
display: block;
}
#menu a:hover {
color: #000099;
background-color: #ffcccc;
}
</style>
<meta content="ASCANE" name="description">
</head>
<body style="height: 272px; background-image: url(images/terrain.jpg);">
<h1
style="text-align: center; background-color: transparent; height: 219px;"><img
style="width: 269px; height: 272px;" alt="ascane"
src="images/signature.png"><br>
<big><font><big><big><font size="+3"><big><span
style="color: rgb(255, 102, 0);"><span
style="color: rgb(153, 255, 153);"></span><big><span
style="color: rgb(255, 39, 214);"></span><span
style="color: rgb(103, 100, 255);"></span><span
style="color: rgb(0, 0, 153);"><span style="color: rgb(255, 255, 51);"></span></span></big></span></big></font></big></big></font></big></h1>
<br>
<br>
<ul id="menu">
<li><a href="Accueil.html">Accueil</a> </li>
<li><a href="resultat.html">Résultat</a> </li>
<li><a href="Nous%20contacter.html">Nous
contacter</a> </li>
</ul>
<marquee>Prochain match Lundi 13 Juin à 20h00 au gymnase Paul fort
contre RAS1
<marquee></marquee>
</marquee>
<br>
<br>
<br>
<br>
<br>
<br>
<div style="text-align: left; margin-top: 0px; height: 93px;"><big
style="font-weight: bold;"><big><big><span
style="color: rgb(25, 16, 99);">&nbsp;<span style="color: red;">Par
Mail : ascane@free.fr</span></span></big></big></big>
</div>
</body>
</html>
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Code propre et texte format

Message par Ymai »

Bonjour
Chaque balise ouvrante <balise> suivie immédiatement de son homologue fermante </balise> peut être supprimée (en couple).
Exemple:
<span style="color: rgb(255, 39, 214);"></span>
Après, il faudrait sans doute créer un groupe Facebook pour la suppression de la barre d'outils de mise en forme dans Kompozer. :D
Cette barre d'outils qui incite à cliquer tout partout. C'est elle la responsable de nombreuses horreurs dans le code HTML.
Priorité à l'utilisation de CSS.

KompoZer ne devrait être utilisé que pour apprendre le code HTML et CSS, mais pas pour produire des sites web. Quand on a compris comment utiliser la petite dizaine de balises de base, passer à un éditeur de texte et coder à la main. Le résultat 'est bien plus propre. Juste mon opinion.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan »

Bonjour Ymai,

Je souhaite juste créer un petit site de 3 pages pour une association sportive, je pense que kompozer peut suffire avec un peu d'aide.

C'est dans ce sens que je demandais :

J'ai crée un texte qui défile, comment puis je faire pour changer la taille des caractère et la couleur ?

J'aimerai aussi que mon menu horizontal soit centré, comment faire ?

Voilà si tu peux m'aider ca serait top

Merci
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Code propre et texte format

Message par Ymai »

Bonjour
L'astuce et la magie vont pouvoir se trouver dans l'utilisation de CSS.
Voici ce que j'ai :

Code : Tout sélectionner

<style type="text/css">

	body {
		border: 0;
		background-image: url(images/terrain.jpg);
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		}

	#menu li {
		display: inline-block;
		}

	#menu li a {
		border: 1px solid red;
		padding: 0.5em 1em;
		display: block;
		color: white;
		font-weight: bold;
		text-decoration: none;
		background-color: #663333;
		width: 300px;
		}


	marquee {
		font-size: 24pt;
		color: #ff0000;
		}

	#menu li a:visited {
		color: #99ff99;
		font-weight: bold;
		// text-decoration: none;  
		}

	#menu li a:hover {
		color: #000099;
		background-color: #ffcccc;
		}
		
</style>
Tout se passe donc dans la feuille de style.

body : je profite de l'occasion pour intégrer l'image de fond dans la feuille de styles.
L'ensemble est centré avec "margin-left et margin-right: auto" et je fixe la largeur (indispensable pour le centrage) à une valeur max arbitraire.

#menu: les éléments "li" sont définis en "inline-block" (toute la magie est là.
tout le reste de "#menu li" passe dans "#menu li a" (pas besoin d'un niveau supplémentaire)
Chaque élément de menu est mis dans un bloc (display: block) de dimension 300px (il y en a 3 => 900px qui est < 1200px du body)

Le texte défilant est dans une balise <marquee>
Il suffit de lui fixer une taille de police ("font-size: 24pt" et une couleur "color: #ff0000")
Pas bien sûr que KompoZer accepte cette balise-là. Dans ce cas, déplacer la feuille de styles dans un fichier .css séparé et introduire un lien dans le code html

Code : Tout sélectionner

<link rel="stylesheet" href="mesSTyles.css" type="text/css" media="screen">
Pour information: https://developer.mozilla.org/fr/docs/W ... nt/marquee

PS: bien qu'étant moi-même plutôt partisan de l'artisanat personnel bricolé mais maîtrisé que des solutions plus "professionnelles" mais sans contrôle, je me demande si des solutions du type Wordpress ou Jimdo ou Wix ou... ne conviendraient pas mieux pour ce type de site.
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan »

MErci.
Quand je mets ca, mon texte n'a pas changé ?
<marquee"font-size: 24pt="" color:="" #ff0000="">texte défilant</marquee>
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Code propre et texte format

Message par Ymai »

Re-Bonjour
C'est normal: cette notation ne correspond à rien ni en HTML, ni en CSS :evil:
Le navigateur se trouve donc bien en peine d'y comprendre quelque chose.

Dans ma proposition, tout se trouve dans la feuille de styles.

Code : Tout sélectionner

   marquee {
      font-size: 24pt;
      color: #ff0000;
      }
et je pense que c'est le meilleur endroit si l'on souhaite, comme c'est la norme, séparer le contenu de la mise en forme.
A priori, recopier ma proposition dans le document actuel et virer le contenu CSS devrait tour régler.

Au pire, on pourrait éventuellement admettre:

Code : Tout sélectionner

<marquee style="font-size: 24pt; color: #ff0000">Le texte défilant</marquee>
Mais ce ne serait pas une bonne pratique...
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Code propre et texte format

Message par Ymai »

Ouuupssss...
desatan a écrit : <marquee"font-size: 24pt="" color:="" #ff0000="">texte défilant</marquee>
C'est KompoZer qui produit ce code avec toutes sortes de guillemets tout partout??? :oops:
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan »

Merci Ymai pour ton aide ;-)

Je ne comprends plus rien, je veux insérer une image et quand je fais image, puis je lui donne le chemin, mon image n'apparaît pas :-(

Je remets mon code sans l'image :-(

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>resultat</title>
<style type="text/css">
#menu ul {
padding-left: 0;
}
#menu li {
border: 1px solid #cc0000;
text-align: center;
float: left;
margin-right: 5px;
margin-left: 5px;
list-style-type: none;
width: 120px;
}
#menu a:visited {
color: #99ff99;
font-weight: bold;
text-decoration: none;
}
#menu a {
color: white;
font-weight: bold;
text-decoration: none;
background-color: #663333;
display: block;
}
#menu a:hover {
color: #000099;
background-color: #ffcccc;
}
</style>
<meta content="ASCANE" name="description">
</head>
<body style="height: 272px; background-image: url(images/terrain.jpg);">
<h1
style="text-align: center; background-color: transparent; height: 219px;"><img
style="width: 269px; height: 272px;" alt="ascane"
src="images/signature.png"><br>
<big><font><big><big><font size="+3"><big><span
style="color: rgb(255, 102, 0);"><span
style="color: rgb(153, 255, 153);"></span><big><span
style="color: rgb(255, 39, 214);"></span><span
style="color: rgb(103, 100, 255);"></span><span
style="color: rgb(0, 0, 153);"><span style="color: rgb(255, 255, 51);"></span></span></big></span></big></font></big></big></font></big></h1>
<br>
<br>
<ul id="menu">
<li><a href="Accueil.html">Accueil</a> </li>
<li><a href="resultat.html">Résultat</a> </li>
<li><a href="Nous%20contacter.html">Nous
contacter</a> </li>
</ul>
<marquee style="font-size: 24pt; color: rgb(255, 0, 0);">Prochain match
Lundi 13 juin à 20h00 au gymnase </marquee>
<div style="text-align: left; margin-top: 0px; height: 93px;"><big
style="font-weight: bold;"><big><big><span
style="color: rgb(25, 16, 99);">&nbsp;<span style="color: red;">
</span></span></big></big></big></div>
</body>
</html>
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Code propre et texte format

Message par Ymai »

Bonjour
Et que voit-on lorsque l'on tente de visiter
http://l'adressedusite/images ?
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan »

je n'ai pas compris ?

Je veux insérer une image sur la feuille résultat mais pas moyen :-( bizarre
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Code propre et texte format

Message par Ymai »

Ma question était: l'image à insérer se trouve-t-elle bien dans le répertoire "images"? Le cas échéant, on peut en avoir la preuve en visitant ce répertoire.

Je viens alors avec une nouvelle question: que signifie "mais pas moyen"? Quels sont les symptômes précis?
Hypothèses:
- l'image est introuvable
- l'ordinateur se bloque et fume
- une armée de trolls apparaissent à chaque tentative :o)
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan »

Bonjour,

Oui l'image se trouve bien dans le répertoire image.

Justement il ne se passe rien. Je me mets dans ma feuille résultat, je fais insérer image, je donne le chemin dans le répertoire image, je mets un texte alternatif et je fais ok. Et là, rien ne se passe. Pas d'image ?
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Code propre et texte format

Message par Ymai »

Peut-on voir:
- le nom exact de l'image (en respectant les majuscules et les minuscules)
- le code source de la page
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan »

Voici le code source :

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>resultat</title>
<style type="text/css">
#menu ul {
padding-left: 0;
}
#menu li {
border: 1px solid #cc0000;
text-align: center;
float: left;
margin-right: 5px;
margin-left: 5px;
list-style-type: none;
width: 120px;
}
#menu a:visited {
color: #99ff99;
font-weight: bold;
text-decoration: none;
}
#menu a {
color: white;
font-weight: bold;
text-decoration: none;
background-color: #663333;
display: block;
}
#menu a:hover {
color: #000099;
background-color: #ffcccc;
}
</style>
<meta content="ASCANE" name="description">
</head>
<body style="height: 272px; background-image: url(images/terrain.jpg);">
<h1
style="text-align: center; background-color: transparent; height: 219px;"><img
style="width: 269px; height: 272px;" alt="ascane"
src="images/signature.png"><br>
<big><font><big><big><font size="+3"><big><span
style="color: rgb(255, 102, 0);"><span
style="color: rgb(153, 255, 153);"></span><big><span
style="color: rgb(255, 39, 214);"></span><span
style="color: rgb(103, 100, 255);"></span><span
style="color: rgb(0, 0, 153);"><span style="color: rgb(255, 255, 51);"></span></span></big></span></big></font></big></big></font></big></h1>
<br>
<br>
<ul id="menu">
<li><a href="Accueil.html">Accueil</a> </li>
<li><a href="resultat.html">Résultat</a> </li>
<li><a href="Nous%20contacter.html">Nous
contacter</a> </li>
</ul>
<marquee style="font-size: 24pt; color: rgb(255, 0, 0);">Prochain match
Lundi 13 juin à 20h00 </marquee>
<div style="text-align: left; margin-top: 0px; height: 93px;"><big
style="font-weight: bold;"><big><big><span
style="color: rgb(25, 16, 99);">&nbsp;<span style="color: red;">
</span></span></big></big></big></div>
</body>
</html>
Et voici le nom de l'image : resultat.jpg

Mon insertion image n'apparaît même pas dans le code :-(
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Code propre et texte format

Message par Ymai »

Bonsoir
Un truc m'intrigue d'emblée. Le nom de l'image ("resultat.jpg") n'apparaît nulle part dans le code source.
Il y a donc peu de chances que cette image apparaisse dans la page html vue par le navigateur.

À moins que j'aie mal compris la question. Serait-ce qu'il est devenu impossible de modifier le code source?
Où devrait intervenir cette image?
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invités