Can XHTML nest more XHTML? - xhtml

It's legal to nest SVG documents inside XHTML documents; but is it legal to nest XHTML documents inside other XHTML documents in the same fashion?
<!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">
<head>
<title>Sup</title>
</head>
<body>
<h1>Hello World!</h1>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nested document</title>
</head>
<body>
<p>This is a sample</p>
</body>
</html>
</body>
</html>

No, the html element is only allowed as root element of the document.

You can, using <iframe> (though not recommended and should be avoided).

Related

XHTML element not allowed as child of XHTML element body in this context

Although this page seems to load file, I get an error from NU HTML checker. Not sure how to clear the error, because it seems everything in the body would of course be a child of the XHTML body element.
<?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>How About Them Apples?</title>
<meta charset="utf-8" />
<link href="apples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<apples xmlns:apls="https://www.dole.com/en/products/apples">
<apls:apple>
<apls:name>Red Delicious</apls:name>
<apls:color>Red</apls:color>
</apls:apple>
<apls:apple>
<apls:name>Golden Delicious</apls:name>
<apls:color>Yellow</apls:color>
</apls:apple>
</apples>
</body>
</html>

Webpage source code displaying instead of content

I have written a website using HTML and CSS and, basically, I'm trying to get it to display now. The code is just a page of text and a few images. Currently when I go to the domain, the source code from start to finish is displayed instead of the actual content.
I just got cPanel hosting with godaddy (who naturally weren't of any help). I downloaded cyberduck. Uploaded the file containing the HTML text and called it index.html.
A CSS file was uploaded, and saved as index.css This might be the issue if something was incorrect.
On cyberduck it says there is a file called layout-style.css, perhaps I should edit that and add my CSS code to it?
Possibly the top few lines of the HTML code are missing some important command? [updated]:
<!DOCTYPE html>
<html lang="en">
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class = enterprise> <br>
<p>text<p>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Also, does Bootstrap have to be installed anywhere?
I appreciate your responses.
The content must be in the body tag
The structure of an HTML document is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Article</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!-- CONTENT HERE -->
<div >
<h1>Site name</h1>
</div>
</body>
</html>
You should not have in the part.
This is a html5 structure :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Then you should put inside the part like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class= top>
</div>
<div class = enterprise>
<p> text goes here </p>
</div>
</body>
</html>

Converting ASP.NET Web Form to HTML5

I'm in the process of converting our existing ASP.NET web form pages to support HTML5.
According to several sources, all I need to do is change my aspx page so that it has the following layout:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>/title>
</head>
<body>
</body>
</html>
Here is the top part of the ASPX page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="MyForm.aspx.cs" EnableEventValidation="false"
Inherits="MyForm" ValidateRequest="false" %>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div> BLA BLA BLA </div>
</body>
</html>
My problem is, when the page is rendered in a browser, and I view the source of the page, I still see the old DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML>
<html lang="en">
<head>
.....
Any idea how I can get rid of this?

How to set css font-size for text input from style sheet

I can't set the font-size of a text input from the style sheet. However, it works fine by setting the style attribute.
This works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text-htmlcharset=utf-; 8" />
<title>Test</title>
<style type="text/css">
#about {
}
</style>
</head>
<body>
<input id="about" type="input" value="anything" style="font-size:21pt;" />
</body>
</html>
This does not work (font-size is ignored):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text-htmlcharset=utf-; 8" />
<title>Test</title>
<style type="text/css">
#about {
font-size:21pt;
}
</style>
</head>
<body>
<input id="about" type="input" value="anything" />
</body>
</html>
What am I missing? Surely, you're not expected to use inline style for all text inputs? That seems pretty tacky and redundant in some cases. Thanks a bunch!
Change <style type="text/javascript"> to <style type="text/css">
You are confusing the browser because it is looking for JavaScript code, but you are feeding it CSS. <script> tags should be used for javascript, and <style> tags for CSS.
Your style block has a type of text/javascript. Remove that and it'll work fine.

Is css_parser parsing inline CSS incorrectly?

I have a HTML file with inline CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Page 1</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<DIV style="position:relative;width:612;height:792;">
<STYLE type="text/css">
.ft0{font-size:108px;font-family:Helvetica;color:#000000;}
.ft1{font-size:16px;font-family:Times;color:#000000; }
</STYLE>
</HEAD>
<BODY bgcolor="#A0A0A0" vlink="blue" link="blue">
<DIV style="position:absolute;top:457;left:225"><nobr><span class="ft0">Sample</span> </nobr></DIV>
<DIV style="position:absolute;top:62;left:241"><nobr><span class="ft1"><b>HTML</b></span></nobr></DIV>
</BODY>
</HTML>
I am trying to parse the inline CSS using Ruby's css_parser library. Note that the inline CSS has 2 classes .ft0 and .ft1.
My code is:
require 'css_parser'
parser = CssParser::Parser.new
parser.load_file!('filename.html')
puts parser.to_s
Which outputs:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n<HTML>\n<HEAD> \n<TITLE>Page 1</TITLE>\n<META http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n<DIV style=\"position:relative;width:612;height:792;\">\n<STYLE type=\"text/css\">\n.ft0 {\nfont-size: 108px; font-family: Helvetica; color: #000000;\n}\n.ft1 {\nfont-size: 16px; font-family: Times; color: #000000;\n}\n"
when I do:
parser.find_by_selector(".ft0")
it returns an empty array.
It appears as though css_parser is seeing the entire string
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n<HTML>\n<HEAD>\n<TITLE>Page 1</TITLE>\n<META http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n<DIV style=\"position:relative;width:612;height:792;\">\n<STYLE type=\"text/css\">\n.ft0
as the selector instead of just the class .ft0
Is there a way that I can fix this, so that it just finds the class .ft0?
CssParser doesn't find the target in HTML, it only wants a style-sheet definition. You need to parse the CSS from the HTML then pass it to CssParser.
This might get you started:
require 'nokogiri'
require 'css_parser'
html = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Page 1</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<DIV style="position:relative;width:612;height:792;">
<STYLE type="text/css">
.ft0{font-size:108px;font-family:Helvetica;color:#000000;}
.ft1{font-size:16px;font-family:Times;color:#000000; }
</STYLE>
</HEAD>
<BODY bgcolor="#A0A0A0" vlink="blue" link="blue">
<DIV style="position:absolute;top:457;left:225"><nobr><span class="ft0">Sample</span> </nobr></DIV>
<DIV style="position:absolute;top:62;left:241"><nobr><span class="ft1"><b>HTML</b></span></nobr></DIV>
</BODY>
</HTML>
'
doc = Nokogiri::HTML(html)
stylesheet = doc.at('style').content
parser = CssParser::Parser.new
parser.add_block!(stylesheet)
puts parser.find_by_selector(".ft0")
Which outputs:
font-size: 108px; font-family: Helvetica; color: #000000;

Resources