i've checked my XHTML Strict 1.0 code and i faced a lot of errors the validator : validator.w3.org please can you help me fixing errors
code :
<!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> my trip around the US on my very own Segway </title>
</head>
<body>
<h1> Segway'n USA </h1>
<p>
Documenting my trip around the US on my
very own Segway
</p>
<h2> August 20, 2005 </h2>
<img src="images/segway2.jpg"/ alt="segway"/>
<p>
Well I made it 1200 miles already, and I passed
through some interesting places on the way:
</p>
<ol> <!-- ordered list -->
<li>Walla Walla, WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Why, AZ</li>
<li>Truth or Consequences, NM</li>
</ol>
<h2> July 14, 2005 </h2>
<p>
I saw some Burma Shave style signs on the side of the
road today :
</p>
<blockquote>
Passing cars,
When you can't see, May get you,
A glimpse,
Of eternity.
</blockquote>
<p>
I definitely won't be passing any cars.
</p>
<h2> June 2, 2005 </h2>
<img src="images/segway1.jpg"/ alt="segway">
<p>
My frst day of the trip! I can't believe I fnally got
everything packed and ready to go. Because I'm on a Segway,
I wasn't able to bring a whole lot with me: cellphone, iPod,
digital camera, and a protein bar. Just the essentials. As
Lao Tzu would have said, <q>A journey of a thousand miles begins
with one Segway</q>
</p>
</body>
</html>
full code link : http://pastebin.com/L95bt2Yu
thanks guys
Don't use the validator first (use the XML parser first) and don't use old versions of XHTML. You should use HTML5 for HTML and XHTML for the XML parser which will catch about 80% of rendering errors right off the bat and streamline your development. So that means use XHTML5 for the best of both worlds. To use HTML5 you need to use the HTML5 elements. To use the XML parser you need to serve the page as application/xhtml+xml. Locally you need to save a file with a .xhtml extension. Do not let the overwhelming negative attitude towards XHTML undermine the usefulness of the XML parser, the best use the best tools and ignore the masses when they're wrong. As long as you use it in conjunction with HTML5 then you're doing the most you can do and that puts you far ahead of most people.
For servers you need to do content negotiation. When you get to PHP use the following before you send non-header data (e.g. any HTML/echo):
if (stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
header('Content-Type: application/xhtml+xml');
}
Until you get to that point use the a program like WinMerge to determine how code is different if for full pages until you're able to narrow it down.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML5 Example</title>
<meta name="description" content="Manage domain accounts." />
<meta name="keywords" content="example" />
<meta name="language" content="en" />
<meta name="robots" content="noarchive, noindex, nofollow" />
<base href="https://localhost/" />
<link href="blog/rss/" rel="alternate" title="Blog RSS Feed" type="application/rss+xml" />
<link href="favicon.ico" rel="icon" />
<script defer="defer" src="scripts/index.js" type="application/javascript"></script>
</head>
<body>
<h1><span>Example Header, use h1 element only once per page</span></h1>
<main>
<p>Example paragraph.</p>
<ol>
<li><span>Bullet One</span></li>
<li><span>Bullet Two</span></li>
<li><span>Bullet Three</span></li>
</ol>
<ul>
<li><span>Bullet</span></li>
<li><span>Bullet</span></li>
<li><span>Bullet</span></li>
</ul>
<blockquote>
<p>The <code>blockquote</code> element may contain block-level elements.
The <code>q</code> element may only contain inline elements.</p>
</blockquote>
</main>
<aside>
<img alt="Alternative text displayed only if image does not load" src="example.png" />
</aside>
</body>
</html>
Related
I am trying to validate my document as XHTML 1.0 Transitional (W3C).
I have the following error:
"document type does not allow element "noscript" here; assuming missing "object" start-tag"
which corresponds to this code:
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1096/?
value=1.00&label=Y-skCMY_QM&guid=ON&script=0"/>
</div>
</noscript>
</head>
But I get this validation failing. What is the problem? Please help me to solve this.
One of your solutions could be to place it in the body instead of the head of your document as following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1096/?
value=1.00&label=Y-skCMY_QM&guid=ON&script=0"/>
</div>
</noscript>
</body>
</html>
This results in:
This document was successfully checked as XHTML 1.0 Transitional!
Additionally, according to this answer, it seams that it doesn’t really make difference (I'm talking about head vs body here):
Have done the move with the Google Ad section outside of HEAD and just
in the BODY part itself. Really doesn't make a difference since when
it was moved, it was just right after the parameters used for the ads
to display.
Solution #2
In case You will need to get rid of the <noscript> at all, You can try to make the following:
<div id='noscript' style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1096/?
value=1.00&label=Y-skCMY_QM&guid=ON&script=0"/>
</div>
<script>document.getElementById('noscript').style.display='none'</script>
This makes things work absolutely the same as in the first solution. If JavaScript is disabled, <script>...</script> won't be executed, thus <div>...</div> would be shown.
I'm about to generate a pdf report (roughly 20 slides long) in java using Spring MVC, Thymeleaf and Flying-saucer. I would like to be able to structure the code according to the different slides so that I can easily add and remove slides and not have all code for all slides in one chunk. In the end, after Spring MVC and Thymeleaf are done, I guess I will have a lot of XHTML and CSS ready to be sent to Flying-saucer for PDF generation.
I haven't worked that much with Spring MVC but my feeling is that you first do the controller stuff, e.g. get data, work with the data and then put necessary data on the Model so Thymeleaf can continue and render the view based on a template and the data on the Model.
How can I divide the code parts in java and Thymeleaf in a good modular way? Anyone have a good design to be inspired by or can point me somewhere on the web where I can find good information about this?
In your case I suggest to fragment Thymeleaf templates into three parts - master, slide and content templates. You can fill report content dynamically from Spring MVC controller or build it in static way just in Thymeleaf.
I providing skeleton templates structure as I think it's the best (all templates supposed to be on root template path). If you want to add slide you just create new template with content and insert new line to master template. If you want to remove slide you just delete appropriate line.
Master template - index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<th:block th:include="slide :: slide" th:with="content=${'content1'}"></th:block>
<th:block th:include="slide :: slide" th:with="content=${'content2'}"></th:block>
<th:block th:remove="tag" th:include="slide :: slide" th:with="content=${'content3'}"></th:block>
</body>
</html>
Slide template - slide.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body th:fragment="slide">
<div class="slide">
<div th:replace="${content} :: content"></div>
</div>
</body>
</html>
Content template 1 - content1.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<ul th:fragment="content">
<li>Content 1</li>
</ul>
</body>
</html>
Content template 2 - content2.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<span th:fragment="content">Content 2</span>
</body>
</html>
Content template 3 - content3.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<p th:fragment="content">
Content 3
</p>
</body>
</html>
though I have visited this site many times, this is my first question.
After hours of google-foo to no avail, I cannot get my stylesheet to link.
<!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>Newb Development</title>
<link type=“text/css” rel="stylesheet" href=”\master.css” />
</head>
<body>
<img src="banner.gif" alt="NewbDev Logo" title="Newb Development" />
<h1>Welcome To NewbDev.com</h1>
<h2>Under Construction</h2>
<p>
As you can see, we are currently under construction. Upon completion
of the website you will be able to follow a fellow newb developer
on his journey to <em>programming masterification!</em>
</p>
</body>
The file "master.css" is in the same directory. I have tried it on the computer and via the server and my styles are not applying. I know I do not have to style sheet posted here but it's nothing fancy and I'm positive the contents of stylesheet are not the issue.
The file "master.css" is in the same directory.
So you should have href="master.css" not href="/master.css" or href="\master.css".
Also note the quotes, you need " or ' not ”. (You might need to zoom in to see the difference):
" ' ”
A validator would pick up that last problem.
You don't use backslash in URL's.
Try this instead, if your CSS-file is available at the root:
<link type="text/css" rel="stylesheet" href="/master.css" />
Since your master.css is in the same directory just use:
<link type=“text/css” rel="stylesheet" href=”master.css” />
If that doesn't work make sure it is saved as a css file.
I've been doing a lot of looking around into this issue. I have a project I'm working on which basically represents a tour of different locations, each of which are generated dynamically, in a Google Earth web player. The problem is that the client requires that the content of each placemark representing a location be more stylish. Of course, I quickly discovered that Google Earth maliciously scrubs all CSS that you put in the KMZ file, which is very annoying. Many online discussion talked about putting the !important keyword in the CSS declaration or to use balloon style in some funny ways to prevent this. So far, I have not found a concrete solution.
I simply want to know if there is a hack or a method for Google Earth to not simply remove all of your CSS. That can include importing or inserting CSS from an external source after the page load and/or putting in a litle jQuery if nescessary.I will provide a code template for what a typical balloon should look like. Note that this actually works in the Google Earth program, but not online.
</Placemark>
<Placemark id="placemark1">
<name>City</name>
<description>
<![CDATA[<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<link href="http://localhost/Kmz_Files/player.css>
<div class="container" >
<span class = "title">My location</span>
<hr>
<div>
<a href="http://www.google.com" target="_blank">
<img src="http://www.google.ca/images/srpr/logo3w.png" width="250" />
</a>
</div>
<hr>
<p> My description</p>
</div>
</body>
</html>]]>
</description>
<Point>
<coordinates>-45, 45</coordinates>
</Point>
</Placemark>
Looks like you're talking about the Google Earth Plugin, not the Google Earth desktop application, which does not scrub JavaScript or CSS.
Looks like you want to use getBalloonHtmlUnsafe().
Why the select tag need to have at least on child to be valid xhtml 1.0 ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Why select tag need at least one child to be xhtml valid ?</title>
</head>
<body>
Allowed users :<br/>
<select size="5" style="width: 200px">
</select>
<br />
Alls users :<br/>
<select size="5" style="width: 200px">
<option>root</option>
<option>John Doe</option>
<option>Jane Doe</option>
</select>
</body>
</html>
To be valid, I need to write :
<select><option/></select>
I think it's useless and it's cumbersome to add the empty option tag programmatically (especially in ASP.NET WebForms, I use a DropDownList or ListBox control with a dataBind) :
if count == 0 then add <option/>...
There is no explanation in the DTD : http://www.w3.org/TR/xhtml1/dtds.html
Do you know why W3C validation require that ?
(And how can I make this page valid using a DropDownList or ListBox control in ASP.NET WebForms 4.0 ?)
Assuming that the reason this is an issue is because you are adding the options dynamically, I would suggest that also add the select dynamically, too.
In fact, you could add a node on page load...
<a name="whatever" id="whatever-id" />
and replace it with a select and options when necessary.
What would be the semantic meaning of a select without any options? You might as well not have a select...
Why? Most likely because its a standard defined approximately 10 years ago.
You should consider moving on...
Example below.
HTML5
Switch your doctype line to:
<!DOCTYPE html>
And your meta charset line to:
<meta charset="UTF-8" />
Resulting HTML Markup:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Why select tag need at least one child to be xhtml valid ?</title>
</head>
<body>
Hello World : <select></select>
</body>
</html>
Feel free to validate in http://validator.w3.org/#validate_by_input