Pages html invalide sur w3-validator.org - HTML/CSS - Programmation
Marsh Posté le 24-10-2004 à 14:55:17
si on avait la page ca serait plus simple
Mais là, de base, si t'es en HTML t'as oublié le <meta> du charset, et si t'es en xhtml t'as oublié de définir l'encoding xml
Marsh Posté le 24-10-2004 à 14:55:48
de declarer l'encoding tient
<meta http-equiv="Content-Type" content="text/html; charset="ISO-8859-1">
Marsh Posté le 24-10-2004 à 14:56:04
dans ton head, tu peux ajouter le character encoding:
<meta content="text/html;charset=iso-8859-1" http-equiv="content-type" />
Marsh Posté le 24-10-2004 à 14:56:35
uriel a écrit : dans ton head, tu peux ajouter le character encoding: |
Marsh Posté le 24-10-2004 à 14:58:33
elle est ptet codée en UTF-8 sa page hein
Marsh Posté le 24-10-2004 à 15:09:38
Masklinn a écrit : elle est ptet codée en UTF-8 sa page hein |
ui je crois que le problème vient de là.. je vous envoies la page...dites moi ce qu'il manque.. je débute...et je trouve ca pas mal
Voila la page:
<html>
<head>
<title> SLASHDOT </title>
</head>
<body>
<font face="verdana" size="12">
<table width="500" height="100%" border="1" cellpadding="0" cellspacing="1">
<tr><td bgcolor="E5B14B" height="30"><b><center>Qu'est ce que Slashdot & l'effet Slashdot ?</tr></center></b>
<tr><td bgcolor="F9DEAB" height="100"><p align="left"> Créé en septembre 1997 par Rob Malda, <u>Slashdot</u> est un un site web populaire de nouvelles et de discussions proposant un journal en ligne, tenu par une ou plusieurs personnes, traitant principalement de sujets liés aux nouvelles technologies. <u>L'effet Slashdot</u> désigne le fait qu'un site internet soit submergé de requêtes provenant d'utilisateurs de Slashdot au moment de la publication d'une nouvelle le référençant, le rendant ainsi momentanément indisponible.</p></td></tr>
<tr><td bgcolor="E5B14B" height="30"><b><center>Quel est le lien avec le fonctionnement d'Internet ?</td></tr></center></b>
<tr><td bgcolor="F9DEAB" height="100"><p align="left"> Le lien avec internet se définit du fait que lorsqu'un site subit trop de requêtes pour être consultés, on dit qu'il est "<u>slashdotted</u>", c'est-à-dire <u>déni de service</u>. Une application déni de service est <u>incapable de répondre</u> aux requêtes d'un utilisateur normal. Il en est de même pour des pages Web.</p><td></tr>
<tr><td bgcolor="E5B14B" height="30"><b><center>Quelles sont les enjeux de Slashdot dans la communication ?</td></tr></center></b>
<tr><td bgcolor="F9DEAB" height="110"><p align="left">Slashdot utilise un système élaboré <u>d'autorégulation</u>, qui donne lieu à une sorte de <u>démocratie</u> électronique. Sachant que l'ouverture de compte est libre et gratuite, le système Slashdot est facilement accessible. Ainsi, le fait de laisser des commentaires, de les étudier, de les regrouper et de les trier selon leur pertinence et leur degré de vérité peut donner lieu à un <u>système d'échanges d'informations mondial</u> qui peut être intriguant.
En outre, chaque <u>lecteur</u> du système Slashdot peut se faire <u>attribuer un rôle</u> au coeur de ce sytème d'échange s'il est perçu comme un usager pertinent.</p>
</td></tr>
</font>
</body>
</html>
Marsh Posté le 24-10-2004 à 15:15:40
là il manque des balises
Code :
|
et ajoutes le meta indiqué par chacal au dessus de ton <title> (entre <head> et <title> )
ensuite il manque le doctype, ajoutes
Code :
|
au dessus de <html>
remplace ton "&" par "&" (dans Qu'est ce que Slashdot & l'effet Slashdot ?)
accessoirement vu tes fonts c'est illisible sous firefox
Marsh Posté le 24-10-2004 à 15:53:24
la font verdana m'a été imposée par le prof et j'utilise firefox pr tester ma page.. c lisible pourtant
Marsh Posté le 24-10-2004 à 15:54:40
je n'ai pas compris ton 1. [code]..c quoi ca?
Sinon merci beaucoup... Et je suis d'accord la font n'est pas top
NB: j'ai retesté, il me dit que c'est toujours pas valide..grr à cause de caractères en utf-8 apparament
Marsh Posté le 24-10-2004 à 16:32:13
je parle pas de la tête de la font, je parle de la taille, ca prend la moitié de la page pour chaque ligne
[code] > c'est une balise qui permet de rendre le code propre sur le forum, et qui n'enlève pas les espaces (histoire d'avoir un code lisible)
Marsh Posté le 24-10-2004 à 17:07:54
alors je suis tout à fait d'accord avec toi pour la taille mais elle m'a été imposé aussi
Sinon cette balise [code] je la place ou? au dessus de html?
Marsh Posté le 24-10-2004 à 17:25:39
le balise [code] c'est pour le forum...
Marsh Posté le 24-10-2004 à 17:29:00
ca donnera ca avec les balises
Code :
|
Marsh Posté le 24-10-2004 à 18:43:38
la balise 'font' est révolue et ne doit plus être utilisée...
Fais une petite feuille de style à la place, ça allège le code et c'est bien plus simple et évolutif...
Sinon utilise des <div> à la place du tableau, et définie les couleurs dans la feuille de style...
Marsh Posté le 24-10-2004 à 19:46:34
BlindMan a écrit : la balise 'font' est révolue et ne doit plus être utilisée... |
ouh la...on a pas encore vu ca nous les div et les feuilles de style...erf connais pas... Y a pas un autre moyen? car à la base faut juste faire 3 paragraphes sur un theme imposé avec qqes conditions (genre verdana 12, 500 pixels de large) et donc j'ai voulu faire ca dans un tableau ca fait plus propre mais please ne me demolissez pas tout...
Marsh Posté le 24-10-2004 à 20:55:01
paragraphe -> balise <p>
Marsh Posté le 24-10-2004 à 21:06:38
Vu le thème, tu fais un div principal auquel tu imposes 500px de large via CSS, le contenu des paragraphes via <p></p> et tes titres de paragraphes avec <h1></h1> ou <h2></h2>, là encore stylés via CSS
tiens, ca peut donner qqchose du style ca
(le <div id='main'> kaka c'est pour avoir une page blanche autour, comme sur ce que t'avais fait )
si tu regardes la source, tu as le html qui contient uniquement de l'information structurée logiquement (et encore, j'aurais du mettre les <h1></h1> dans les paragraphes, et le <div> est là pour le style, il n'apporte rien à la structure logique ) et le css qui contient toutes les informations relatives au style et à la mise en page (ce qui permet de bidouiller le CSS pour modifier facilement et rapidement le style de la page, ou créer des "skins" alternatives)
Marsh Posté le 24-10-2004 à 21:40:44
j'ai vu que tu m'avais maché le travail je te remercie
ok pour les paragraphes, ok pour les tailles de titres... mais j'ai pas trop compris ton histoire de div principal ou j'impose 500 pixel de large.
Par contre le <div id='main'> c'est pour avoir la page blanche autour de mon truc, c ca? Ca fait caca...peut etre oui mais tu veux que je mette quoi?
Marsh Posté le 24-10-2004 à 21:41:09
ReplyMarsh Posté le 24-10-2004 à 21:45:38
non je soulignait juste que si le prof parle de paragraphe c'est qu'il veut des balise <p>
Marsh Posté le 24-10-2004 à 21:46:39
mmm je cherche ou indiquer la taille en largeur du div...car j'y comprend pas grand chose:
apparament quand je fais <div size="500" id="main" > ça marche pas.
Si je fais <div id="main" size="500" > ça marche pas non plus... En fait (vous me dites si je me trompe, le div c'est pour faire un bloc de texte et dans ce bloc on peut mettre des paragraphes, c'est ca?
Marsh Posté le 24-10-2004 à 21:47:55
ce que je ne comprend pas du tout, c'est comment tu as fait pour conserver les couleurs.. Ou c'est indiquer dans le code? O.O ?
Marsh Posté le 24-10-2004 à 21:49:15
pour la taille, faut passer par les feuilles de styles...
Marsh Posté le 24-10-2004 à 21:50:19
erf mais je connais pas tout ça moi...mais j'ai l'impression que ce que tu m'as fait ca correspond déjà a 500 pixels de large..je me trompe?
Marsh Posté le 24-10-2004 à 21:50:57
ah sinon je peux mettre tout ca dans un tableau qui fait 500 pixel de large non?
Marsh Posté le 24-10-2004 à 21:52:13
Pour les indications de style tout ca, regarde dans le head il y a une ligne
Code :
|
Elle sert à "lier" une feuille de style au document,pour dire au navigateur comment il doit afficher la page
lien vers la feuille de style
sasounian a écrit : j'ai vu que tu m'avais maché le travail je te remercie |
A la base c'est pas pour ca, c'est plus comme example
Citation : mais j'ai pas trop compris ton histoire de div principal ou j'impose 500 pixel de large. |
ben les 500px de large, ici, ils sont donnés par la propriété 'width' du div
à la base, le style était
Code :
|
Ca appliquait tout le style nickel sur le 'corps' du document, mais le background devenant background du document toute la page était ocre.
Code :
|
Ca donne un body ayant comme background-color le défaut (blanc) et la couleur ocre uniquement dans la partie délimitée par la taille du div.
Tiens, exercice: je veux la page sur un fond cyan, un document de 400px de large sur un fond bleu ciel et une écriture bleu foncée, les titres en bleu foncé sur fond blanc (qui devient cyan quand on survolle les titres, si tu peux), le texte en 10px et les titres en 14px soulignés centrés
le document ne doit pas avoir de bordure, le texte non plus, les titres si
écris moi le CSS
liens pour aider: les CSS sur openweb, AlsaCréation, la doc officielle des CSS1 (un peu obscur, mais très utile)
Marsh Posté le 24-10-2004 à 21:53:27
ok je vais me servir de ton exemple: je l'écris tu me dis si c'est bon... patience
Marsh Posté le 24-10-2004 à 21:54:53
sasounian a écrit : ok je vais me servir de ton exemple: je l'écris tu me dis si c'est bon... patience |
j'ai modifié mon post, relis le
Marsh Posté le 24-10-2004 à 22:04:30
erf...j'ai vraiment du mal.... après avoir écrit ca, je suis bloque:
div#main {
width: 400px;
background-color: 1DECFF;
border: 0px solid grey;
font-family: sans-serif;
font color: 0448E2;
Marsh Posté le 24-10-2004 à 22:05:11
j'arrive pas a cerner la technique pour faire des feuilles de style de texte....
Marsh Posté le 24-10-2004 à 22:09:45
tu peux pas me donner un exemple plus simple? car je veux bien essayer de comprendre le principe des feuilles de styles d'ici apres demain (car c pr mardi mon truc) mais faudrait y aller pas à pas... si cela ne t'ennuies pas...
Bon je vais relire attentivement le css que tu as mis en lien la haut...
Marsh Posté le 24-10-2004 à 22:12:07
un petit lien qui m'a permis de comprendre mieux les css : http://www.htmlhelp.com/reference/css/
Marsh Posté le 24-10-2004 à 22:19:00
bon j'ai lu une partie de ton site et ton exemple.. Je commence à comprendre l'intérêt et la manière de fonctionner des feuilles de style pour la forme..
Y a juste les marges qui me turlupinnent encore... tu peux pas me donner ton exos sans les marges?
Marsh Posté le 24-10-2004 à 22:28:49
lis les liens que j'ai donné, et le lien de KangOl.
Le principe des CSS, c'est d'associer aux éléments (balises html) des propriétés.
C'est tout, c'est pas plus compliqué que ca, ensuite il faut simplement trouver quelles propriétés associer à quel élément.
Pour faire le lien entre un élément et ses propriétés, il y a principalement 3 méthodes:
1- la méthode la plus générique, c'est d'associer une propriété à tous les éléments identique. par exemple
Code :
|
va donner les propriétés "blabla" à TOUS les paragraphes
2- une méthode un peu plus précise mais au sens plus large, par classe
Code :
|
va donner les propriétés "blabla" à tous les éléments pour lesquels tu auras défini 'class="machin"'.
le truc ici, c'est que ca marchera même avec des éléments de types différents, par exemple <p class="machin"></p> aura les propriétés "blabla", mais aussi <div class="machin"></div> ou <h1 class="machin"></h1>.
Si tu veux restreindre tes propriétés à un seul type d'élément de classe machin, tu utilises un truc du genre
Code :
|
avec ca, tous les paragraphes de classe "machin" auront les propriétés "blabla".
les autres paragraphes ne l'auront pas
les éléments de classe machin n'étant pas des paragraphes non plus.
3- la méthode la plus précise: les IDs
Code :
|
Normalement, un ID est unique dans un document, donc t'es pas obligé de préciser quel élément correspond (c'est plus clair je trouve, donc je le fais)
Ca permet de donner des propriétés spécifiques à un élément unique du document.
tu le définis avec <p id='foo'>.
Après, tu peux combiner les éléments, par exemple <p class="blabla" id="foo"> aura à la fois les propriétés définies pour les paragraphes, celles pour la classe "blabla" et celles pour l'élément d'id "foo".
Si des règles entrent en conflit, c'est la dernière écrite dans le fichier qui s'applique
(par exemple si dans .blabla {} je définis une couleur rouge et que dans #foo {} 5 lignes plus bas je la met bleue, elle sera bleue)
ce que tu as écris, c'est que le <div> ayant pour id 'main' (div#main) a pour propriétés:
*une largeur de 400px
*une couleur de fond bleu clair (btw tu as oublié "#" devant 1DECFF)
*une bordure de 0 pixels solide grise (donc les 2 dernières parties de la bordure sont inutiles. tu peux aussi remplacer le tout par "border: none;" )
*une police "sans-serif"
*un texte de couleur bleue foncée (font-color et non font color, et #0448E2)
Marsh Posté le 24-10-2004 à 22:30:08
sasounian a écrit : bon j'ai lu une partie de ton site et ton exemple.. Je commence à comprendre l'intérêt et la manière de fonctionner des feuilles de style pour la forme.. |
Je t'ai jamais imposé de mettre des marges
Marsh Posté le 24-10-2004 à 22:39:35
bon il est tard c pr ca que je suis un peu paumé... bon j'ai bien lu vos explications et je vous remercie beaucoup.
Pour l'instant je vais aborder les feuilles de style progressivement mais je pense qu'à l'avenir ça va me servir .. Et comme notre prof ne veut pas qu'on utilise dreamweaver, et bien..je vais apprendre au fur & à mesure le langage html...
Masklin, je vais essayer de faire ton exo demain à la pause et je garde les liens dans mes favoris..
Encore merci beaucoup de votre aide, ça fait plaisir de voir des gens comme vous sur le forum,c'est comme si...j'avais 2 autres profs en lignes (ne le prenez pas mal si je vous compare à des profs )
on reste en contacts
Marsh Posté le 24-10-2004 à 14:51:27
Voilà j'ai fait une page html perso. Elle marche niquelos à travers mes navigateurs mais comment faire pour la rendre valide sur le site w3-validator.org?
Sur le site apres avoir rentré le chemin de ma page il me met cela:
No Character Encoding Found! Falling back to UTF-8.
I was not able to extract a character encoding labeling from any of the valid sources for such information. Without encoding information it is impossible to reliably validate the document. I'm falling back to the "UTF-8" encoding and will attempt to perform the validation, but this is likely to fail for all non-trivial documents.
Alors qu'est que j'ai pu oublier comme ligne?
Merci