What is wrong with this Xhtml code using ul - xhtml

I am trying to validate the following xhtml code on validator.w3.org
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Let us try the use of heading styles
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Headings</title>
</head>
<body>
<h1>Program Pool</h1>
<h2>
<ul>
<li> Basic Programming </li>
<li> Intermediate Programming </li>
<li> Advanced Programming </li>
<li> Modular Programming </li>
</ul>
<!-- <br /> <br /> <br /> -->
</h2>
</body>
</html>
I'm receiving an error on line 17 (The line where the first ul tag appears). The main problem is the ul tag although the same syntax was accepted in other code I wrote. So what is wrong here?

You can't use the h2 tag as a block-level element; it's a heading tag, and it functions the same as your h1 tag above. Move the </h2> closing tag up and add some text:
<h2>Some Random Title</h2>

The issue resolves if you just remove "<H2>" tag, used around the <UL> tag.
Use CSS for styling your UL if this need attention.
either remove tag around or Give appropriate heading and close right there:-
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Let us try the use of heading styles
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Headings</title>
</head>
<body>
<h1>Program Pool</h1>
<ul>
<li> Basic Programming </li>
<li> Intermediate Programming </li>
<li> Advanced Programming </li>
<li> Modular Programming </li>
</ul>
</body>
</html>
OR
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Let us try the use of heading styles
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Headings</title>
</head>
<body>
<h1>Program Pool</h1>
**<h2>heading</h2>**
<ul>
<li> Basic Programming </li>
<li> Intermediate Programming </li>
<li> Advanced Programming </li>
<li> Modular Programming </li>
</ul>
</body>
</html>

Related

How to Access inner span or anchor text if it doesn't contain class name

I want click on Desserts and other list items , by right clicking on it i am getting
x path : //*[#id="foodMenuPanels"]/div[2]/div/div[1]/ul/li[1]/a/text()
HTML
<!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>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<title></title>
</head>
<body>
<div id="foodMenuPanels" class="food-menu-wrapper">
<div class="food-menu-panel food-panel-results">
<div class="food-menu-content">
<ul class="food-menu-list"></ul>
</div>
</div>
<div class="food-menu-panel food-panel-categories">
<div class="food-menu-subpanel-wrapper">
<!-- food-menu-content food-panel-categories -->
<div class="food-menu-content food-panel-categories">
<ul data-id="14386" class="food-menu-list">
<li class="">
Desserts
<div class="ripples"></div>
</li>
<li class="">
<a href="/menu/small-plates-snacks-appetizers/" data-internal="17145"
class="ripple">Small Plates & Snacks & Appetizers</a>
<div class="ripples"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I gave couple of try but it is not working and i am new to the selenium tool.
I would say go for css instead of xpath
a[href='/menu/desserts/']
Translation: find the anchor tag whose href = "/menu/desserts/"
Second anchor
a[href$='small-plates-snacks-appetizers/']
Translation: find the anchor tag whose href ends with "small-plates-snacks-appetizers/"

Why isn't bootstrap linking to my HTML

Very beginner code here. But my bootstrap isn't linking to my html. I am trying to create a nav bar where the four list elements are pulled so that they are on the same row.
<! DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>ONE</li>
<li>TWO</li>
</ul>
<ul class="pull-right">
<li>LOG IN</li>
<li>HELP</li>
</ul>
</div> <!--End nav container-->
</div> <!--End nav-->
</body>
</html>
As of right now the list is displaying at the default way HTML displays lists. the second link to a main.css is just a blank file I am not doing anything in it. These files are structured as such:
Documents/Web
There are both in my web folder.
Leaving out the protocol tells the browser to fetch the link over the same protocol the webpage is currently being viewed in (http://www.paulirish.com/2010/the-protocol-relative-url/).
You're viewing your HTML locally (over file://), so your browser is interpreting:
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
As:
href="file://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
Which I'm pretty sure doesn't exist on your computer.
Just add the http: protocol for local development, or download bootstrap.min.css to your Documents/Web and change the href to a relative path.

-Cannot Link CSS page to HTML

I am creating a html template for a webpage in a free HTML-kit text editing program. Both my xhtml and css files are in the same directory. I can link pictures to xhtml template but my css page is not affecting any change.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmln="http-"http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="teggxt/html; charset=utf-8" http-equiv="Content- Type"/>
<title>Spaghetti & Cruft: Geek Pizzeria</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="branding">
<h1><img src="images/logo.gif" alt="Spaghetti and Cruft: Geek Pizzeria">
<p id="address">
Spagetti & Cruft<br />
742 Cederholm Ave.<br />
Gotham, CA 00234<br />
510-555-0987
</p>
</div>
<div id="main-content">
<h2>The page title will go here.</h2>
<p>The page content will go here.</p>
</div>
<ul id="navigation">
<li>Our Menu</li>
<li>About Us</li>
<li>Raves and Reviews</li>
<li>News and Events</li>
<li>Contact Us</li>
</ul>
<div id="tagline">
<p>Pizza, pasta, and WiFi.</p>
<p>Enjoy a bite with your bytes.</p>
</div>
<p id="copyright">© 2007 Spaghetti & Cruft: Geek Pizzeria</p>
</body>
</html>
and the CSS code.
html {
background-color: #ffffff;
background-image: url(images/background.gif) repeat-x;);
}
body {
width: 80%;
}
Is the HTML-kit having difficulty processing XHTML 1.0 Strict? I'm not sure.
You are missing the closing " after styles.css.
If you are using html strict, you need to close all of your tags always. html, body, div and h1 tags is not closed right now. You miss some closing in the end of css description in meta tag also.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmln="http-"http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Spaghetti & Cruft: Geek Pizzeria</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="branding">
<h1><img src="images/logo.gif" alt="Spaghetti and Cruft: Geek Pizzeria" /></h1>
</div>
</body>
</html>
And your css is also quite clumzy. No need to put background elements in html if you can all put in body description. And also width is probably for that div, not for all body.
body { background: #FFFFFF url(images/background.gif) repeat-x; }
div#branding { width: 80%; }

Primefaces css missing

I'm completely new to PrimeFaces, so sorry if this is a stupid question.
According to the primefaces.org website, there's no configuration needed. You just put the primefaces jar in your classpath and add the namespace to the page, and that's it. This is exactly what I did, and I can access and create the primefaces components, but no style is applied to them.
This is what the page source looks like
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<head><title>...</title></head>
<body>
<p:accordionPanel>
<p:tab title="First Tab Title">
<h:outputText value= "Lorem"/>
</p:tab>
<p:tab title="Second Tab Title">
<h:outputText value="Ipsum" />
</p:tab>
</p:accordionPanel>
</body>
</html>
And this is what's rendered
<!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></head>
<body><div id="j_id_3" class="ui-accordion ui-widget ui-helper-reset ui-hidden-container" role="tablist"><h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true"><span class="ui-icon ui-icon-triangle-1-s"></span>First Tab Title</h3><div id="j_id_3:j_id_4" class="ui-accordion-content ui-helper-reset ui-widget-content" role="tabpanel" aria-hidden="false">Lorem</div><h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false"><span class="ui-icon ui-icon-triangle-1-e"></span>Second Tab Title</h3><div id="j_id_3:j_id_6" class="ui-accordion-content ui-helper-reset ui-widget-content ui-helper-hidden" role="tabpanel" aria-hidden="true">Ipsum</div><input type="hidden" id="j_id_3_active" name="j_id_3_active" value="0" /></div><script id="j_id_3_s" type="text/javascript"><!--
PrimeFaces.cw('AccordionPanel','widget_j_id_3',{id:'j_id_3',active:0});
//--></script>
</body>
</html>
As you can see, the primefaces component is rendered, with all css styles attached, but there's no reference to any style sheet rendered. Should this be rendered automatically, or is this something I should add to the page?
I'm using myFaces 2.1.5, PrimeFaces 3.5 and I'm running it on Tomcat 7.0.26
The <head> incompatibility with Primefaces, the <h:head> will include automatically all necessary JavaScript files for Css files for layout, so when you don't use it,Css will not be included automatically.
If you want to include automatically CSS, you should use <h:head>, not <head>:
<h:head>
// ...
</h:head>
<h:body>
// ...
</h:body>
Other reference question: unable-to-understand-hhead-behaviour

This simple XHTML will not validate. What is the problem?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="myStyle.css"/>
</head>
<body>
<div>
<h1>Heading One</h1>
<p class="para1">Paragraph One</p>
<h3>Heading Two</h3>
<p>Paragraph Two</p>
<h3>Heading Three</h3>
<p>Paragraph Three</p>
<br />
Link One
<br />
Link Two
</div>
</body>
</html>
<p>Paragraph Three<p>
That is the problem.
Edit: the other <p> should obviously be </p>
Edit 2: Noticed a larger problem: The XML definition or whatever-it's-called should always be on the first line. If I recall correctly.
Edit 3: Yup, I checked. W3 validator tells this:
XML declaration allowed only at the start of the document
Run it through the W3C validator, and it will point you right at the problems: http://validator.w3.org/
Specifically:
This:
<?xml version="1.0" encoding="UTF-8"?>
Must go at the very top of the document, not below the DOCTYPE.
And you've forgotten a '/' on the closing p tag here:
<p>Paragraph Three<p>
Once those problems are corrected, it validates just fine.
You can run it through the W3C checker here (click on the "direct input" tab and copy/paste) and it will give you very specific feedback as to what doesn't validate
Try this:
<?xml version="1.0" encoding="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" xml:lang="en" lang="en">
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="myStyle.css"/>
</head> <body>
<div>
<h1>Heading One</h1> <p class="para1">Paragraph One</p>
<h3>Heading Two</h3> <p>Paragraph Two</p>
<h3>Heading Three</h3> <p>Paragraph Three</p>
<br /> Link One <br /> Link Two
</div>
</body> </html>
The <?xml version="1.0" encoding="UTF-8"?> must be the first line in the XML document.
See the XML Specifications: http://www.w3.org/TR/2006/REC-xml11-20060816/
To pass XHTML validator http://validator.w3.org you need to change
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
to
<!DOCTYPE html>
See this answer

Resources