Pagina contrôle via W3C

aloë vera · 17 nov 2010, 16:48

Goedemiddag bollebozen websitebouwers.
Ondertussen ben ik al een eind op weg met het herschrijven van mijn site naar Xhtml. Goed te doen als je tijd hebt en kom ook steeds nieuwe weetjes tegen. Heb bijvoorbeeld nu een ook volgende <meta geplaatst:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />In plaats van mijn vorige
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />.
Dit alleen omdat ik ook over de grens wordt bekeken zag ik met de Webstats teller.
Het volgende probleem kom ik nu tegen, als ik via W3C mijn pagina op fouten controleer krijg ik de volgende foutenlijst voor mijn neus
http://validator.w3.org/check?uri=http% ... ne&group=0
Maar ik begrijp echt niet wat hier bedoelt wordt, ook aangezien mijn Front Page Designer geen fouten meer aangeeft zoals deze wel deed in het begin van het herschrijven.
Het is m.n. deze die ik niet snappen wil </head_>_
streepje eronder natuurlijk. Zou 1 van u (of meerdere misschien?) deze link willen bekijken en mij vertellen wat er mis is met deze specifieke pagina.
Alvast mijn dank en spreek u later

ultddave · 17 nov 2010, 16:57

"unterminated comment: found end of entity inside comment"

Dat wilt indirect zeggen dat je commentaar tags van (X)HTML hebt toegevoegd, maar deze niet hebt gesloten.

Commentaar tags zijn deze:
 voor te sluiten.

Degene voor te openen stond er al (zie hieronder in het rood). Maar voor te sluiten nog niet (zie groen).

<style type="text/css">

</style>

Mvg,
Dave

ultddave · 17 nov 2010, 17:03

Misschien even toevoegen, die commentaar tags worden geplaatst rond uw CSS code om te voorkomen dat de CSS code zelf op de webpagina getoond wordt als tekst, indien de browser geen CSS ondersteunt.

Want indien dat het geval zou zijn, en er zijn dus geen  tags rond de CSS code zou staan, dan wordt deze letterlijk als tekst aanzien.

Vandaar dat ze daar die tags rond plaatsen.

Mvg,
Dave

aloë vera · 17 nov 2010, 17:12

Heb het zojuist ingevoerd zoals

Code: Selecteer alles

 <style type="text/css">
<!--
a:link { color: #cd6889; }
a:visited {color: #9370db; }
a:active { color: #54ff9f; }
a:hover { color: #ee00ee; }
.style1 type { background-color: #ffffe0; }
.style1 {
	font-family: "Berlin Sans FB";
	font-size: medium;
	color: #FF0000;
	background-image: url('viooltjeshorizontaal.jpg');
}
.style2 {
	background-color: #FFFFE0;
	font-family: "Berlin Sans FB";
	font-size: medium;
	color: #FF0000;
}
.style3 {
	font-weight: normal;
	font-family: Algerian;
	font-size: xx-large;
	color: #008000;
}
.style4 {
    font-weight: normal;
	font-family: "Comic Sans MS";
    font-size: x-large;
	color: #008000;
}
.style5 {
    font-weight: normal;
	font-family: "Comic Sans MS";
	color: #808080;
	font-size: large;
}
.style6 {
	font-weight: normal;
	font-family: "Comic Sans MS";
	color: #008000;
	font-size: large;
}
-->
</style><script type="text/javascript">

en nu krijg ik helemaal een fouten festival terug van W3C zie deze maar
http://validator.w3.org/check?uri=http% ... ne&group=0
Hellup!!

aloë vera · 17 nov 2010, 17:34

Ik haal het sluitings pijltje er weer uit. Heb liever 5 fouten op de pagina , kan ik wel mee leven als het moet.
Verder laat de pagina zich goed zien in de verschillende browsers.
Liever toch nul fouten hoor, ik blijf zoeken.

ultddave · 17 nov 2010, 20:05

Het niet plaatsen van die sluitingstag zorgt ervoor dat andere fouten niet gezien worden. Met andere woorden, er staan ook effectief meer als 5 fouten in, maar die worden niet getoond doordat de validator niet goed weet wat hij moet doen, doordat die commentaar tag niet gesloten werd.

Ik zal de code deze avond eens bekijken. Zal de verbeterde versie dan hier straks posten.

Mvg,
Dave

ultddave · 17 nov 2010, 22:32

De homepage;

Code: Selecteer alles

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" >
	<head>
		<link rel="shortcut icon" href="/favicon.ico" />

		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

		<meta http-equiv="Content-Language" content="nl" />

		<meta name="description" content="Plantenparade bied hulp bij plantenkeuze voor tuinplanten balkonplanten en dakterrasplanten. nieuwsgierigheid gewekt? vraag en krijg antwoord" />
		<meta name="keywords" content=" Plantenparade, waar beginnen, voorjaarskriebels, zomer, herfstkleuren, winterklaar maken, hulp, tuinplanten, balkonplanten, dakterrasplanten, nieuwsgierigheid gewekt, meer weten" />
		<meta name="author" content="metatags generator" />
		<meta name="robots" content="index, follow" />
		<meta name="revisit-after" content="30 days" />
		<title>Plantenparade voor tuinplanten, balkonplanten, dakterrasplanten</title>

		<style type="text/css">
		<!--
		
			body { background-color: #ffffe0; }
			a:link { color: #cd6889; }
			a:visited {color: #9370db; }
			a:active { color: #54ff9f; }
			a:hover { color: #ee00ee; }
			
			#contentwrapper
			{  
				width: 1280px;
				margin:0 auto; 
			} 
			
			#container
			{
				height: auto !important;
				position: relative;
				text-align: center;
			}
			
			#header
			{
				background-image: url('viooltjeshorizontaal.jpg');
				font-family: "Berlin Sans FB";
				font-size: medium;
				color: #FF0000;
				width: 1280px;
				margin:0 auto;
			}
			
			#headerleft
			{
				float: left;
				text-align: left;
				width: 150px;
				padding-left: 30px;
			}
			
			#headerright
			{
				float: right;
				text-align: left;
				width: 150px;
				padding-right: 30px;
			}
			
			#headermiddle
			{
				text-align: left;
				margin: 0 auto;
				padding-top: 1px;
				width: 160px;
			}
			
			p.menublock
			{
				padding-left: 10px;
				background-color: #ffffe0;
				width: 100px;
			}
			
			div.colleft
			{
				float: left;
				text-align: left;
				width: 200px;
			}
			
			div.colright
			{
				float: right;
				text-align: left;
				width: 200px;
			}
			
			div.colmiddle
			{
				width: 720px;
				margin: 0 auto;
				text-align: left;
			}
			
			div.clearfloat
			{
				clear: both;
			}
			
			p.content 
			{
				font-weight: normal;
				font-family: "Comic Sans MS";
				color: #808080;
				font-size: large;
			}
			
			.center
			{
				text-align: center;
			}
			
			.style3 {
				font-weight: normal;
				font-family: "ALGERIAN";
				font-size: xx-large;
				color: #008000;
			}
			.style4 {
				font-weight: normal;
				font-family: "Comic Sans MS";
				font-size: x-large;
				color: #008000;
			}
			
		-->
		</style>
		<script type="text/javascript">

		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-19587198-1']);
		  _gaq.push(['_setDomainName', '.deplantenparade.nl']);
		  _gaq.push(['_trackPageview']);

		  (function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();

		</script>
	</head>
    <body>
		<div id="container">
			<!-- Hier begint de header -->
			<div id="header">
				<div id="headerleft">
					<p class="menublock">
						<a href="index.htm">Home</a>
					</p>
					<p class="menublock">
						<a href="mylinks.htm">Links</a>
					</p>
				</div>
				<div id="headerright">
					<p class="menublock">
						<a href="photo.htm">Foto album</a>
					</p>
					<p class="menublock">
						<a href="newtrends.htm">De Trends</a>
					</p>
				</div>
				<div id="headermiddle">
					<p class="menublock">
						<a href="myself.htm">Wie</a>
					</p>
					<p class="menublock">
						<a href="myadress.htm">Waar</a>
					</p>
				</div>
				<br/>
			</div>
			<div class="clearfloat">
				<br/>
			</div>
			<div id="contentwrapper">
				<!-- Hier begint de inhoud -->			
				<div class="colleft">
					<!-- De kolom links -->
					<img alt="lavendula" src="lavendel3.jpg" width="175" height="160" />
					<br />
					<a href="index.htm">Home</a>
					<br />
					<a href="myself.htm">wie ik ben, wat ik doe</a>
					<br />
					<a href="myadress.htm">waar ik ben</a>
					<br />
					<a href="personal.htm">persoonlijke noot</a>
					<br />
					<a href="photo.htm">Foto album</a>
					<br />
					<a href="verzorgingstips.htm">Verzorging van A-Z</a>
					<br />
					<a href="tipsentrucs.htm">Tips en Trucs</a>
					<br />
					<a href="newtrends.htm">De Trends</a>
					<br />
					<a href="apart.htm">Even Apart</a>
					<br />
					<a href="eetbare tuin.htm">Apart,de eetbare tuin</a>
					<br />
					<a href="plantenmarkt.htm">De Plantenmarkt</a>
					<br />
					<a href="products.htm">Product per seizoen</a>
					<br />
					<a href="favorits.htm">Mijn Favorieten</a>
					<br />
					<a href="myspecials.htm">Speciale aandacht</a>
					<br />
					<a href="mywish.htm">Wereldse Wensen</a>
					<br />
					<a href="mylinks.htm">Links</a>
					<br />
					<br />
					<br />
					<br />
					<br />
					<img alt="waterkraan" longdesc="hier kan je een mail sturen" src="afbeeldingen/water.gif" width="175" height="215" />
					<br />
					<br />
					<a href="mailto:ellebelle@deplantenparade.nl ">
					mail mij</a> 
					<br />en laat de kraan door druppelen, figuurlijk gesproken natuurlijk.
					<br />
					<br />
					<br />
					<br />
					<img alt="2 voeten in het zand" src="afbeeldingen/foot.jpg" width="175" height="160" />
					<br />
					<br />
					<br />
					<br />
					<a href="http://www.deplantenparade.nl/index.htm">
						<img alt="naar boven" longdesc="met deze ga je naar de top" src="afbeeldingen/top.jpg" width="65" height="65" />
						top
					</a>
					<br />
					<a href="http://www.deplantenparade.nl/">
						<img alt="home page" longdesc="hier ga je terug naar de index" src="afbeeldingen/favicon1.jpg" width="65" height="65" />
						home
					</a>
					<br />
				</div>
				<div class="colright">
					<!-- De kolom rechts -->
					<img alt="my home" src="../../afbeeldingen/goldletters/my%20home.jpg" width="175" height="100" />
					<br />
					<img alt="hermestuin" src="geveltuin.jpg" width="175" height="130" />
					<br />
					Zijgevel
					<br />
					<img alt="hermesterras" src="terras.jpg" width="175" height="130" />
					<br />
					Terras
					<br />
					<img alt="tuin gesnoeid" src="tuin2.JPG" width="175" height="130" />
					<br />
					Tuintje
					<br />
					<img alt="rododendron" src="rodopot2.jpg" width="175" height="128" />
					<br /> 
					Voorgevel
					<br />
					<img alt="dakterras" src="mooi overzicht.jpg" width="175" height="131" />
					<br />
					Dakterras
					<br />
				</div>
				<div class="colmiddle">
					<!-- De kolom in het midden -->
					<h1 class="style3 center">Welkom bij<br />de plantenparade</h1>
					<h2 class="style4">Waarom deze website?</h2>
					<p class="content">
						<br />
						Ben je op zoek naar tuinplanten, balkonplanten, of dakterrasplanten?
						<br /><br />Weet je niet hoe en waar te beginnen maar...............
						<br /><br />Heb je wel van die voorjaarskriebels of zit
						de zomer in je bol?
						<br />Wat gedacht van die vele prachtige herfstkleuren buiten
						of is het nu echt alweer tijd om de tuin winterklaar te maken?
						<br /><br />Dan heeft u wellicht hulp nodig in de tuin , het balkon of
						op het dakterras?
						<br />Bij de Plantenparade ben je aan het goede adres voor een antwoord op deze vragen.
						<br /><br />
						Heb ik je nieuwsgierigheid gewekt en wil je meer weten......................<br /> 
						neem dan even een kijkje in  <a href="myself.htm">&quot;wie ik ben en wat ik
						doe&quot;.</a> <br />
						of als je zelf groenten wilt verbouwen zie dan&nbsp; <a href="eetbare tuin.htm">&quot;apart,de eetbare
						tuin&quot;.</a> 
						<br /> Kan je nog even tijd vrij maken............<br />
						lees ook mijn  <a href="personal.htm">&quot;persoonlijke noot&quot;</a>
						<br />
						<br/>
					</p>
					<p class="content center">
						Vriendelijke groeten en wellicht tot ziens <br />Ellen
					</p>
				</div>
			</div>
		</div>
		<div class="clearfloat">
		</div>
	</body>
</html>

Voldoet aan XHTML 1.1. En werkt in Firefox, Safari, Internet Explorer 9, Google Chrome en Opera.

Het enige probleem dat je misschien gaat hebben is de achtergrond van de viooltjes, als dat het geval is, laat me dan iets weten, dan pas ik het even aan. Idem voor eventuele andere problemen.

Heb ook even de vrijheid genomen om de website te centreren in de browser en gebruik te maken van <div> tags ipv tabellen (<table>). Want men probeert het af te leren om tabellen voor de layout te gebruiken.

Indien je uitleg zou willen over bepaalde stukken code, dan vraag je het maar.

PS: Ik gebruik ook inspringingen in de code zodat je makkelijk kan zien welke tags gesloten zijn, en welke niet. Dan krijg je geen problemen met "niet gesloten tags".

PS: Heb ook de taal van de pagina op "nederlands" gezet, zodat google weet dat het een NL pagina is.

PS: Die mailto code moet je terug zelf terug even aanpassen naar entities:
Want het forum zet die code automatisch om naar tekst.

Mvg,
Dave

aloë vera · 18 nov 2010, 11:04

Hallo Ultdave,
wat een aandacht voor mijn site, in één woord geweldig. Ga het vanmiddag verder bekijken en uitproberen. Dat van de table had ik al wel eerder gemerkt, maar niet wetend hoe het anders in te vullen. mijn dank voor al je inzet en ik ga er dan ook gretig gebruik van maken.
Als ik dit zo zie heb ik het idee dat jij 1 van de happy few onder ons bent die van zijn hobby ook z'n werk kan gaan maken.(net als ik gelukkig)
Heel veel succes hiermee en tot later
A.Vera

aloë vera · 18 nov 2010, 13:43

Daar ben ik weer. Heb de code gekopiet en geplakt en het volgende gebeurde

Code: Selecteer alles

code 1
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" > 
   <head> 
      <link rel="shortcut icon" href="/favicon.ico" /> 

      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

      <meta http-equiv="Content-Language" content="nl" />

bovenstaande code geeft in Sharepoint problemen aan. In zoverre althans dat er wordt
gereageerd met "dit elememt mag zichzelf niet sluiten in het huidige schema,
verwijder de slash.

Ik heb de volgende code geprobeerd en daarin geeft het geen 'probleem' meer aan.

Code: Selecteer alles

 code 2  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

      <link rel="shortcut icon" href="/favicon.ico" /> 

      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  
      
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <meta http-equiv="Content-Language" content="nl" /> 

      <meta name="GENERATOR" content="Microsoft FrontPage 12.0" />
      <meta name="ProgId" content="FrontPage.Editor.Document" />
      <meta name="Microsoft Theme" content="none, default" />
      <meta name="Microsoft Border" content="none, default" />

Dit is de code zoals ik het nu in de nieuwe versie gebruik.

Zal ik de 2e code er maar inhouden nu?

2 vragen over de de volgende 2 codes;

Code: Selecteer alles

         #contentwrapper 
         {  
            width: 1280px; 
            margin:0 auto; 
         } 
en deze 
         div.clearfloat 
         { 
            clear: both; 
         }

Wat doen deze codes en wat betekenen ze behalve "inhouds wikkel"en
"duidelijke zwever".? Dat zegt mij n.l. niet echt veel .

Met vrolijke groete A.Vera

ultddave · 18 nov 2010, 14:26

Beste,

Ja ik gebruik gewoon kladblok

. Vandaar dat ik die problemen niet heb. In principe kan je dat weglaten als dat problemen geeft ja.

2 vragen over de de volgende 2 codes;
Code: Selecteer alles
#contentwrapper 
{ 
width: 1280px; 
margin:0 auto; 
} 

div.clearfloat 
{ 
clear: both; 
} 
Wat doen deze codes en wat betekenen ze behalve "inhouds wikkel"en
"duidelijke zwever".? Dat zegt mij n.l. niet echt veel .

contentwrapper is de "hoofdblok" waarin alle inhoud geplaatst wordt. Dus de header bovenaan en de 3 kolommen in het midden van de pagina met de effectieve inhoud.

De width: 1280px geeft dus aan dat je website 1280px breed is.
margin: 0 auto; is een techniek die gebruikt wordt om een tag zoals <div> of <p> of een andere tag, te laten centreren.

Zoals je weet kan je tekst centreren met text-align: center;. Maar je kan een "blok" centreren op die manier. Daarvoor dient die margin: 0 auto; dus.

Code: Selecteer alles

div.clearfloat 
{ 
clear: both; 
}

Clear float is letterlijk vertaalt "duidelijke zwever" zoals je zegt, maar "clear" in het engels betekent ook "wissen".

Op je rekenmachine heb je soms de knop Clear, "CE" (Clear everything = wis alles) of "C" (Clear = Wis) staan. En dat wist ook hetgeen je getypt hebt.

In dit geval willen we zorgen dat er niets links en rechts mag zweven vanaf het punt dat clearfloat gebruikt wordt.

In principe wordt dat gebruikt om problemen met float: left en float: right van kolommen te vermijden.

Dus op de plaats waardat de kolommen gedaan zijn, zet men meestal een "clear: both;". Dit geeft in principe aan van "Vanaf hier zweeft er niets meer links en rechts".

Je kan ook bijvoorbeeld: "clear: left;" doen, dan zeg je "Vanaf hier zweeft er niets meer aan de linkerkant." maar dan kan je rechts nogaltijd een kolom hebben in principe.

************

Indien je Internet Explorer 8 of 9 gebruikt, kan je dit doen om te zien hoe groot elke blok is: Open de website, en klik op F12.

Je ziet dan de broncode staan. Als je dan links klikt op die <div id="contentwrapper"> of op andere div's, dan zie je dat er een blauwe rand wordt getrokken op je webpagina. Dit toont de grootte van die blokken aan.

Je kan ook bijvoorbeeld kijken op je huidige homepage die nog met tabellen werkt, hoe groot elke tabel is bijvoorbeeld. Even een screenshot van gemaakt:
http://img405.imageshack.us/img405/1138/f12ie9.png

Die blauwe rand duidt de grootte van de tabel aan van de rechterkolom bijvoorbeeld.

Mvg,
Dave

aloë vera · 18 nov 2010, 14:46

Aaaahhh, geweldenaar ben ook jij. Chapeau.
Dank voor je geduld en je duidelijke antwoorden. Ga dit toepassen in mijn gehele site.
Het is een soort snelcursus geworden voor mij ter verbetering van mijn site. Mijn dank is groot.
Kom eens langs in A'dam en we kunnen een 'Pintje' pakken.
Vrolijke groet en waarschijnlijk tot later u allen
Aloë Vera

P.s. voor mij is het afgerond voor nu.

aloë vera · 18 nov 2010, 16:09

Nog even dit voor u allen:

http://validator.w3.org/check?uri=http% ... ne&group=0

Fantastisch is dat toch.
Toppers hier op dit forum.

ultddave · 18 nov 2010, 20:08

Hehe

. Geen probleem hoor.

Mvg,
Dave

aloë vera · 19 nov 2010, 12:06

Hey ultdave, als ik die randen niet om mijn foto's wil hebben als deze in de link staan, welke code hoort hierbij i.p.v. border="0" in deze code

Code: Selecteer alles

<a href="http://www.deplantenparade.nl/"> 
                  <img alt="home page" longdesc="hier ga je terug naar de index" src="afbeeldingen/favicon1.jpg" border="0" width="65" height="65" /> 
                  home 
               </a> 
               <br />

de term border is niet toegestaan in Strict.
groetens A.Vera

coderunner · 19 nov 2010, 14:40

Beste aloë vera,

Als het ook goed is voor jou dat iemand anders dan ultddave antwoordt ...

Vervang in de img tag het border="0" attribuut door het style="border:0;" attribuut

<a href="http://www.deplantenparade.nl/">
<img alt="home page" longdesc="hier ga je terug naar de index" src="afbeeldingen/favicon1.jpg" style="border:0;" width="65" height="65" />home
</a>

Opgelet: hier is style een attribuut en hoeft dus NIET afgesloten te worden!

Wil je rond alle foto's, afbeeldingen op eenzelfde pagina geen rand (border), dan verwijder je in alle img tags het attribuut border="0" en vul je de <style type="text/css">...</style> tag aan met

<style type="text/css">
... hier staan de andere codes voor de styling
img {
border:0;
}
</style>

mvg,
Coderunner