Meta tags

Status
Niet open voor verdere reacties.
G

gebruiker78

Gebruiker
Lid geworden
29 jun 2010
Berichten
428
Hallo,
ik wil zeker weten dat mijn site op utf-8 staat maar ik heb het er 3x staan kan 1 weg? of moetten ze er voor de zekerheid staan?
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>dabosn.com</title>
<link rel="stylesheet" type="text/css" href="../css/basic.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="charset" content="utf-8">
<?xml version="1.0" encoding="UTF-8"?>
<meta name="author" content="David Bonting">
</head>
<body>
 
Over utf-8: charset en andere wetenswaardigheden

Hoi David,
Alleen de eerste in regel 6 is goed:
HTML: 
...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
De tweede in regel 7 is een verkeerde notering.
De derde in regel 8 is een xml-declaratie die alleen nodig is als het géén utf-8 is.
Wat nog nodig is: de <meta> met de charset moet als eerste element na de <head> geplaatst worden; dus bv. niet eerst de <title>. Immers de charset bepaalt hoe alles wat volgt geïnterpreteerd moet worden!

Als het een php-pagina is, kan je er (ten overvloede, maar aanbevolen door de Webrichtlijnen) nog een php-header aan toevoegen, voorafgaand aan de Doctype-declaratie:
HTML: 
<?php header("Content-type: text/html; charset=utf-8"); ?>
<!DOCTYPE ... enz.
Verder gebruik je in bovenstaand voorbeeld een Transitional Doctype. Ik zou het Strict Doctype nemen, dat volgt de actuele standaarden het best (ook sterk aanbevolen door de Webrichtlijnen):
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Bij een xhtml-pagina hoort ook in de <html>tag een xmlns-waarde, plus (twee keer) de aanduiding van de taal van de inhoud (o.a. om voorleesbrowsers meteen op het goede spoor te zetten):
HTML: 
...
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
Zie w3c: "Recommended list of Doctype declarations".

Het mooiste complete begin van een xhtml-pagina in php wordt daarmee:
HTML: 
<?php header("Content-type: text/html; charset=utf-8"); ?>
<!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" lang="nl" xml:lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
En tenslotte is het voor de goede werking van utf-8 ook nodig dat je webeditor (of Kladblok) de pagina eveneens als utf-8 opslaat. Dit kan meestal in de settings/properties/preferences van de webeditor aangegeven worden; in Kladblok moet bij het opslaan het uitrolvakje "Codering" (staat standaard op "ANSI") dan ook op "UTF-8" gezet worden.

Check
Welke codering een opgeslagen pagina heeft, kan je altijd controleren met Notepad++, via menu: Codering.
Zo nodig kan je de pagina via hetzelfde menu ook omzetten naar de goede codering: "Naar UTF-8 (zonder BOM) converteren".

Ziezo, heb je weer wat te lezen. ;)
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Haha en weer BEDANKT! =)
maar als ik in localhost test en ik heb het op ansi staan dan zie je
(klein regel)
pagina
maar als hij op utf-8 staat is het opeens:
grote witruimte
grotewitruimte
pagina
check: http://imageshack.us/photo/my-images/98/rarrar.png/

hoe kan dat? is dat op te lossen met css? bijf margin-top: -25px; maar werkt dat dan voor elke browser/scherm grote?
*lees helemaal onderaan aangezien en grote script bij zitten

*UPDATE
kom ik nu achter maar stel je voor dit:
HTML: 
<div id='eddit'>
<h1 id="edditb" align='center'>Eddit your account</h1>
<div id="footerl"><img src="../images/footerl.png" height="1px" width="485"></img></div>
<h3 align='center'>Profile picture</h3>
<form action='?e=profilepic' method='POST' enctype='multipart/form-data'>
<table>
<tr>
<td>
Name:
</td>
<td>
<input type='text' name='picturename' maxlength='60'>
</td>
</tr>
<tr>
<td>
File:
</td>
<td>
<input type='file' name='picturefile' maxlength='230'>
</td>
</tr>
</table>
<input type='submit' name='submitp' value='Upload picture' class="button">
</form>
test
<p id="edditw">In this block everything need to be filled in!</p>
</div>
hoe krijg ik Name: File: blauw? want test is wel blauw want de color van eddit is blauw maar alles wat in een form staat of in een table werkt niet is daar een speciale css?


btw dit kwam door transitional ofzo op strict te zetten

BEDANKT! en laat maar voor dat ene
btw:
form td heb ik niet gedaan want soms heb ik ook een table alleen dus is het table td { color: blue; } geworden
 
Laatst bewerkt:
Code: 
form td {
   color: blue;
   }
Werkt dat?

Edit:
Zie dat er intussen nog extra's aan de vraag zijn toegevoegd: wordt vervolgd!
 
Laatst bewerkt:
na toch even je hulp
gebruik dit eens in je editor op ansi:
header:
HTML: 
<?php header("Content-type: text/html; charset=utf-8"); ?>
<!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" lang="EN" xml:lang="EN">
<head>
<title>dabosn.com</title>
<link rel="stylesheet" type="text/css" href="../css/basic.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="David Bonting">
</head>
<body>
<!-- site width -->
<div id="wrapper">
<!-- logo -->
<div id="header">
<form action="../user/login.php" method="post">
<table background="../images/dabosn.png" height="80px" width="950px" alt="Inlog header">
 <tr>
 <td width="600">&nbsp;</td>
 <td><span style="color:white;">Email:</span></td>
 <td colspan="2"><span style="color:white;">Password:</span></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td><input type="text" name="email" maxlength='50'/></td>
 <td><input type="password" name="password" maxlength='30'/></td>
 <td><input type="hidden" name="emailcheck" maxlength='30'/><input type="submit" value="Log in" class="button"/></td>
 </tr>
 <tr>
 <td colspan="3">&nbsp;</td>
 <td><b><a style="font-size:1.2em; color: white;" href='../homepage/register.php'>register</a></b></td>
 </tr>
 </table>
 </form>
 </div>
<div id="content">
footer:
HTML: 
<br />
<img src="../images/footerl.png" width="950" height="1" alt="Footer"></img>
<div id="footer">
&copy;2011, dabosn.com <a href='../homepage/index.php'>home</a> <a href='../homepage/about.php'>about</a> <a href='../homepage/contact.php'>contact</a>
</div>
</div>
<?php
if(isset($connection)){
mysql_close($connection);
}
?>
</body>
</html>
index.php
HTML: 
<?php include"../basic/header.php" ?>
Welcome to dabosn.com!<br />
beta 1!
<?php include"../basic/footer.php" ?>
css
HTML: 
/* choose font */
body {font-family:Verdana,sans-serif,Helvetica,arial;}
a:link { color: rgb(20,70,250);}
a:visited { color: rgb(20,70,250);}
a:hover { color: rgb(20,70,250);}
a:active { color: rgb(20,70,250));}
#header {
color: black;
font-size: 0.9em;
}
/* site width */
#wrapper {
margin-left:auto;
margin-right:auto;
width:950px;
}
/* Add */
#add{
margin-left: 111px;
margin-bottom: 2px;
margin-top: 2px;
}
#content {
color: rgb(29,100,250);
font-size: 0.85em;
}
#footer {
color: rgb(2,40,210);
float:right;
font-size: 0.9em;
}
/* if password is wrong*/
#indexf{
border-color: rgb(2,40,210);
border: solid;
border-width: 1px;
width: 500px;
margin-left: auto;
margin-right: auto;
font-size: 1em;
}
/* Register */
#register{
border-color: rgb(2,40,210);
border: solid;
border-width: 1px;
width: 325px;
margin-left: auto;
margin-right: auto;
font-size: 1em;
}
#eddit{
border-color: rgb(2,40,210);
border: solid;
border-width: 1px;
width: 485px;
margin-left: auto;
margin-right: auto;
font-size: 1em;
}
#edditb{
margin: 2px;
}
#edditw{
color: grey;
font-size: 0.8em;
margin: 2px;
}
#profilei{
border-right: solid;
border-right-color: rgb(29,100,250);
border-width: 1px;
width: 250px;
float: left;
word-wrap: break-word;
overflow-x: auto;
}
#ppm{
border-right: solid;
border-right-color: rgb(29,100,250);
border-left: solid;
border-left-color: rgb(29,100,250);
border-width: 1px;
margin-left: -1px;
width: 697px;
float: left;
word-wrap: break-word;
overflow-x: auto;
}
#ppmm{
min-height: 90px;
margin-bottom: 5px;
}
#postown{
display: none;
font-size: 12px;
}
#askmod{
display: none;
width: 100%;
font-size: 12px;
}
#profilepicture{
width: 700px;
margin-left: auto;
margin-right: auto;
}
#pmv{
width: 890px;
}
#pminbox{
border-right: solid;
border-right-color: rgb(29,100,250);
border-width: 1px;
width: 400px;
float: left;
word-wrap: break-word;
overflow-x: auto;
}
#pmom{
border-right: solid;
border-right-color: rgb(29,100,250);
border-left: solid;
border-left-color: rgb(29,100,250);
border-width: 1px;
margin-left: -1px;
width: 540px;
float: left;
word-wrap: break-word;
overflow-x: auto;
}
#ni{
margin-left: auto;
margin-right: auto;
width: 400px;
}
#nii{
float: left;
width: 100px;
height: 120px;
margin: 10px;
}
#calculator{
margin-left: auto;
margin-right: auto;
width: 480px;
}
#text{
margin-left: auto;
margin-right: auto;
width: 480px;
}
/* button */
.button {
 background-color:rgb(29,100,250);
 color: white;
 border-style: none;
 }
 .button:hover {
 background-color:rgb(29,125,250);
 }


zet eens notepad++ eerst op ansi dan is alles goed maar als je hem convert naar utf-8 gaat het mis.
ik zie wel waarom maar kan het niet oplossen.
als hij op ansi staat is het gewoon netjes
HTML: 
<html>
<head>
alle info die er hoor
</head>

maar als ik hem convert naar utf-8
HTML: 
<html>
<head></head>
<body>
en dan pas de include en staat er dus:
<head>
etc.
</head>

maarja dan pakt hij natuurlijk de meta tags niet en het css bestand dus wat kan ik doen?
 
*edit
BEDANKT HET WERKT! aahah, ik steeds maar denken waarom werkt het niet waarom werkt het niet en toen las ik je bericht nog eens
utf-8 zonder bom
dus ik denken deze 2 optie's:
utf-8 BOM
utf-8
dus ik dacht zonder die bom dus utf-8 maar nou zijn dit de 2 optie's:
utf-8 without bom
utf-8

dom dom dom bedankt!, kan haast neerzetten This site is build by David Bonting and Csshunter =)


Harstikke bedankt voor je hulp,
maar helaas werkt het nog steeds niet bij de link die ik van je krijgt heb ik hetzelfde bij google chrome en internet explore.
Ik heb mijn instellingen bekeken maar daar ligt het echt niet aan.
ik heb een filmpje gemaakt over het probleem.
eerst laat ik zien dat als al die 4 bestanden op ansi staan dat er dan niks aan de hand is maar als ik hem op utf-8 zet gaat bij google chrome de pagina een stuk omlaag en bij internetexplore gaat hij helemaal gek doen terwijl als ik naar de broncode kijk het toch goed staat.
hier is het filmpje:
http://www.youtube.com/watch?v=jCWxu46moaA
ik hoop dat je er wat van kan maken want ik snap er niks van waarom hij zo gek doet.
 
Laatst bewerkt:
ik snap er niks van waarom hij zo gek doet
Klik om te vergroten...
Ik ook niet!
video-verwijderd.png

Heb je online test-pagina's, waarin we het verschil kunnen zien?

O, nu zie ik dankzij de html-validator, dat ik de bestanden per abuis wel heb opgeslagen als "UTF-8", maar niet als "UTF-8 (zonder BOM)".
Dat moet wel, en dan zijn ook de browser-verschillen bij de basic-page.php de wereld uit. :)
  • NB: hersteld in de bestanden van reactie nr. #6.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan