9 Common Questions Answered When Using HTML5

By admin

HTML 5

9 Common Questions Answered When Using HTML5

In this article you will read 9 top questions regarding HTML5 asked by programmers on various platforms. The answers provided in this article are given by community members and do not represent us. This article will help programmers to improve their coding skills and learn to resolve the issues while coding in HTML5.

These are the following questions.
Question No. 1
A user wants to scrap the value of input box from URL but facing issues to implement this.
Scrapped page appeared as

&lt;!DOCTYPE html&gt; 
&lt;html lang="en"&gt;
 &lt;head&gt;&lt;/head&gt;
 &lt;body&gt;
 &lt;div&gt;&lt;span&gt;Blah&lt;/span&gt;&lt;/div&gt;
 &lt;div&gt;&lt;span&gt;Blah&lt;/span&gt; Blah&lt;/div&gt;
 &lt;div&gt;
 &lt;form method="POST" action="blah"&gt;
 &lt;input name="SomeName" id="SomeId" value="GET ME"/&gt;
 &lt;input type="hidden" name="csrfToken" value="ajax:3575644127378754050" id="csrfToken-login"&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<body>

<div>

</form>

</div>

</body>

</html>

And he is using this code to achieve this

$Contents = file_get_contents("https://www.linkedin.com/uas/login");
$Selector = "//input[@id='csrfToken-login']/@value";
print_r($Selector);
$dom = new DOMDocument;
libxml_use_internal_errors(true);
$dom-&gt;loadHtml($Contents);
$xpath = new DOMXPath($dom);
libxml_use_internal_errors(false);
print_r($xpath-&gt;query($Selector));

$Contents = file_get_contents("https://www.linkedin.com/uas/login");

$Selector = "//input[@id='csrfToken-login']/@value";

print_r($Selector);

$dom = new DOMDocument;

libxml_use_internal_errors(true);

$dom->loadHtml($Contents);

$xpath = new DOMXPath($dom);

libxml_use_internal_errors(false);

print_r($xpath->query($Selector));

He got this output.

14:50:08 scraper.php 181: (Scraper-&gt;Test)
//input[@id='csrfToken-login']/@value

14:50:08 scraper.php 188: (Scraper-&gt;Test)
DOMNodeList Object
(
)

14:50:08 scraper.php 181: (Scraper->Test)

//input[@id='csrfToken-login']/@value

14:50:08 scraper.php 188: (Scraper->Test)

DOMNodeList Object

(

)

The code is unable to find to anything which match the selector in the document.
Answer:
The selector which begins with one slash means absolute path of root. Please use two slashes at the start of selector to select all matching elements and list the classes in PHP with property called length. Check that instead

$Contents = file_get_contents("https://www.linkedin.com/uas/login");
$Selector = "//input[@id='csrfToken-login']/@value";
$dom = new DOMDocument;
libxml_use_internal_errors(true);
$dom-&gt;loadHtml($Contents);
$xpath = new DOMXPath($dom);
libxml_use_internal_errors(false);
$b = $xpath-&gt;query($Selector);
echo $b-&gt;item(0)-&gt;value;

$Contents = file_get_contents("https://www.linkedin.com/uas/login");

$Selector = "//input[@id='csrfToken-login']/@value";

$dom = new DOMDocument;

libxml_use_internal_errors(true);

$dom->loadHtml($Contents);

$xpath = new DOMXPath($dom);

libxml_use_internal_errors(false);

$b = $xpath->query($Selector);

echo $b->item(0)->value;

Question No. 2
A user wants to rebuild his old website and working in HTML5, CS3. But unable to highlight the text or open links in pages. He has used this HTML code.

&lt;!DOCTYPE html&gt;
&lt;html&gt; 
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;title&gt;The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems&lt;/title&gt;
 &lt;link rel="stylesheet" href="HIcss3.css" /&gt;
 &lt;script src="HIjs.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div class="title"&gt;
 &lt;div id="search"&gt;
 &lt;form id="searcher" onclick="startSearch('sbox')"&gt;
 &lt;input type="text" id="sbox" size="15" value="Search This Site"&gt; 
 &lt;input type="button" id="sbutt" value="Find"&gt; 
 &lt;/form&gt; 
 &lt;/div&gt; 
 &lt;/div&gt;
 &lt;div class="navigation"&gt;
 &lt;div id="about"&gt; &lt;a href="about.htm"&gt; About &lt;/a&gt; &lt;/div&gt;
 &lt;div id="blog"&gt; &lt;a href="blog.htm"&gt; Blog &lt;/a&gt; &lt;/div&gt;
 &lt;div id="research"&gt; &lt;a href="research.htm"&gt; Research/ Academic Papers &lt;/a&gt; &lt;/div&gt;
 &lt;div id="hypercourse"&gt; &lt;a href="hypercourses"&gt; Hypercourses &lt;/a&gt; &lt;/div&gt;
 &lt;div id="links"&gt; &lt;a href="links"&gt; Links &lt;/a&gt; &lt;/div&gt;
 &lt;div id="contact"&gt; &lt;a href="about.htm#contact"&gt; Contact &lt;/a&gt; &lt;/div&gt;
 &lt;/div&gt;

&lt;div class="download"&gt;
 &lt;a href="http://www.mozilla.com/firefox/" target="_blank"&gt;
 Firefox is strongly recommended for viewing this page. Download the latest version free!&lt;img src="firefox.jpg" /&gt;
 &lt;/a&gt; 
 &lt;/div&gt;

&lt;p&gt;
 Welcome to HI Updates!
 &lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title>

</head>

<body>

</form>

</div>

<div id="about"> <a href="about.htm"> About </a> </div>

<div id="research"> <a href="research.htm"> Research/ Academic Papers </a> </div>

<div id="hypercourse"> <a href="hypercourses"> Hypercourses </a> </div>

<div id="links"> <a href="links"> Links </a> </div>

<div id="contact"> <a href="about.htm#contact"> Contact </a> </div>

</div>

Firefox is strongly recommended for viewing this page. Download the latest version free!<img src="firefox.jpg" />

</a>

</div>

<p>

Welcome to HI Updates!

</p>

</body>

</html>

And this CSS code.

body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}

h1 {font-size:3em; font-weight:700}
h2 {font-size:1.5em; font-weight:600}
h3 {font-size:1.25em; font-weight:500}
p {}

a {color:#000066; font-weight:600; text-decoration:none}
a:hover {background-color:#FFFFDD}
a:visited {color:#440066}

div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }
div.download {text-align:left} 
div.download img {border:0; float:left; width:3em; height:3em}

div.navigation {}
#about {}
#blog {}

body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}

h1 {font-size:3em; font-weight:700}

h2 {font-size:1.5em; font-weight:600}

h3 {font-size:1.25em; font-weight:500}

p {}

a {color:#000066; font-weight:600; text-decoration:none}

a:hover {background-color:#FFFFDD}

a:visited {color:#440066}

div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }

div.download {text-align:left}

div.download img {border:0; float:left; width:3em; height:3em}

div.navigation {}

#about {}

#blog {}

Answer:
You are using in code div.title which is position: fixed that is why it is floating over your links and not receives click event or hover from mouse. Please remove it and try this

With: http://jsfiddle.net/LFTpB/
Without: http://jsfiddle.net/THyke/

Question No. 3
A user has made the Canvas and he has tried to write the text but its displaying. He applied this code

&lt;!doctype html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset='utf-8'&gt;
 &lt;title&gt;Test Game&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script type="text/javascript"&gt;
 var CANVAS_WIDTH=480;
 var CANVAS_HEIGHT=320;
 var canvasElement=$("&lt;canvas width='"+ CANVAS_WIDTH +"'height='"+CANVAS_HEIGHT+"'&gt;&lt;/canvas&gt;");
 var canvas = canvasElement.get(0).getContext("2d");
 canvasElement.appendTo('body');
 &lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 var FPS = 30;
 setInterval(function(){
 update();
 draw();
 },1000/FPS);
 function update(){
}
function draw(){

canvas.fillStyle = "#000";//Sets colour to black
 canvas.fillText("Sup Bro!",50,50);
 }
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

</head>

<body>

var CANVAS_WIDTH=480;

var CANVAS_HEIGHT=320;

var canvasElement=$("<canvas width='"+ CANVAS_WIDTH +"'height='"+CANVAS_HEIGHT+"'></canvas>");

var canvas = canvasElement.get(0).getContext("2d");

canvasElement.appendTo('body');

</script>

var FPS = 30;

setInterval(function(){

update();

draw();

},1000/FPS);

function update(){

}

function draw(){

canvas.fillStyle = "#000";//Sets colour to black

canvas.fillText("Sup Bro!",50,50);

}

</script>

</body>

</html>

Answer:
Please include jQuery core script before and use jQuery function to add the attribute rather than using string. See the code below

&lt;!doctype html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset='utf-8'&gt;
 &lt;title&gt;Test Game&lt;/title&gt;
 &lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script type="text/javascript"&gt;
 var CANVAS_WIDTH = 480;
 var CANVAS_HEIGHT = 320;
 var canvasElement = $("&lt;canvas&gt;")
 .attr('width', CANVAS_WIDTH)
 .attr('height', CANVAS_HEIGHT);

var canvas = canvasElement.get(0).getContext("2d");
 canvasElement.appendTo('body');

var FPS = 30;
 setInterval(function () {
 update();
 draw();
 }, 1000/FPS);
 function update () {
 }
 function draw () {
 canvas.fillStyle = "#000"; // Sets colour to black
 canvas.fillText("Sup Bro!", 50, 50);
 }
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

</head>

<body>

var CANVAS_WIDTH = 480;

var CANVAS_HEIGHT = 320;

var canvasElement = $("<canvas>")

.attr('width', CANVAS_WIDTH)

.attr('height', CANVAS_HEIGHT);

var canvas = canvasElement.get(0).getContext("2d");

canvasElement.appendTo('body');

var FPS = 30;

setInterval(function () {

update();

draw();

}, 1000/FPS);

function update () {

}

function draw () {

canvas.fillStyle = "#000"; // Sets colour to black

canvas.fillText("Sup Bro!", 50, 50);

}

</script>

</body>

</html>

Question No 4:
A user has used this HTML5 code with JavaScript but it’s not worked for him. He also used other various browsers but failed to achieve.

&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;title&gt;test&lt;/title&gt;
 &lt;script src = "modernizr-1.6.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 window.addEventListener("load", eventWindowLoaded, false);
 var Debugger = function() {};
 Debugger.log = function(message){
 try{
 console.log(message);
 } catch (exception){
 return;
 }
 }
 function eventWindowLoaded(){
 canvasApp();
 }
 function canvasSupport(){
 return Modernizr.canvas;
 }
 function canvasApp(){
 if (!convasSupport()){
 return;
 }
 var theCanvas = document.getElementById("canone");
 var context = theCanvas.getContext("2d")

Debugger.log("Nooooooooooooooooo");

function drawScreen(){

//background
 context.fillStyle="#ffffaa";
 context.fillRect=(0,0,500,500);

//text
 context.fillStyle="#000000";
 context.font="20px_sans";
 context.textBaseline="top";
 context.fillText("hello world", 250, 100);

//image
 var image = new Image();
 image.src = "lund.jpg";
 image.onload = function(){
 context.drawImage(image, 160, 130);
 }

//box
 context.strokeStyle = "#000000";
 context.strokeRect(20, 50, 490, 290);
 }
 drawScreen();
 }
 &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div style="position:absolut;top:50px;left:50px;"&gt;
 &lt;canvas id="canone" width ="500" height ="300"&gt;
 your browser does not support html5
 &lt;/canvas&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

window.addEventListener("load", eventWindowLoaded, false);

var Debugger = function() {};

Debugger.log = function(message){

try{

console.log(message);

} catch (exception){

return;

}

function eventWindowLoaded(){

canvasApp();

}

function canvasSupport(){

return Modernizr.canvas;

}

function canvasApp(){

if (!convasSupport()){

return;

}

var theCanvas = document.getElementById("canone");

var context = theCanvas.getContext("2d")

Debugger.log("Nooooooooooooooooo");

function drawScreen(){

//background

context.fillStyle="#ffffaa";

context.fillRect=(0,0,500,500);

//text

context.fillStyle="#000000";

context.font="20px_sans";

context.textBaseline="top";

context.fillText("hello world", 250, 100);

//image

var image = new Image();

image.src = "lund.jpg";

image.onload = function(){

context.drawImage(image, 160, 130);

}

//box

context.strokeStyle = "#000000";

context.strokeRect(20, 50, 490, 290);

}

drawScreen();

}

</script>

</head>

<body>

your browser does not support html5

</canvas>

</div>

</body>

</html>

Answer:
Misspelling canvassuppport is the problem in your code. Please load up JavaScript error console to check the errors and what is printing there.

Question No. 5
A user has used the following HTML5 code to show paragraph under navigation bar.

&lt;!DOCTYPE html&gt;
 &lt;html&gt;

&lt;head&gt;
 &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"&gt;
 &lt;title&gt; Home &lt;/title&gt; 
 &lt;/head&gt;

&lt;body&gt;

&lt;img src="Andora ski trip.JPG" alt="View from flat in Andora" height="400" width="100%"&gt;
 &lt;h1&gt; Home &lt;/h1&gt;

&lt;nav&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="Home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="Curriculum vitae.html"&gt;Curriculum vitae&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="literature review.html"&gt;Literature review&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="Video.html"&gt;Video&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/nav&gt;

&lt;p&gt;My name is Jack Hay and this is the first proper website that i have designed...&lt;/p&gt;

&lt;/body&gt;
 &lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<nav>

<ul>

<li><a href="Curriculum vitae.html">Curriculum vitae</a></li>

<li><a href="literature review.html">Literature review</a></li>

<li><a href="Video.html">Video</a></li>

</ul>

</nav>

<p>My name is Jack Hay and this is the first proper website that i have designed...</p>

</body>

</html>

In CSS he used this code

h1{
 font-family:"calibri", Times, Serif;
 colour: White;
 font-size:50px ;
 padding:0.1px;
 margin:5
 }

ul
 {
 list-style-type: none;
 }

ul li
 {
 display: block;
 width: 25%
 float: left
 }

h1{

font-family:"calibri", Times, Serif;

colour: White;

font-size:50px ;

padding:0.1px;

margin:5

}

{

list-style-type: none;

}

ul li

{

display: block;

width: 25%

float: left

}

Paragraph is displaying under navigation but the body tags at the top has messed up.
Answer:
Please use this code to avoid tags mess up.

&lt;!doctype html&gt;
&lt;html&gt;

&lt;head&gt;
&lt;title&gt; Curriculum vitae &lt;/title&gt; 
&lt;link rel="stylesheet" type="text/css" href="stylesheet.css"&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;img src="Andora ski trip.JPG" alt="View from flat in Andora" height="400" width="100%"&gt;

&lt;h1&gt; Curriculum vitae &lt;/h1&gt;

&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="Home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Curriculum vitae.html"&gt;Curriculum vitae&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="literature review.html"&gt;Literature review&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Video.html"&gt;Video&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;

&lt;p&gt;My name is Jack and this is the first proper website that i have designed...&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;

<!doctype html>

<html>

<head>

<title> Curriculum vitae </title>

</head>

<body>

<h1> Curriculum vitae </h1>

<nav>

<ul>

<li><a href="Curriculum vitae.html">Curriculum vitae</a></li>

<li><a href="literature review.html">Literature review</a></li>

<li><a href="Video.html">Video</a></li>

</ul>

</nav>

<p>My name is Jack and this is the first proper website that i have designed...</p>

</body>

</html>

Question No. 6
A user wants to change the active anchor to default anchor attribute when user clicks. But he is facing issue with his scripts if there are two similar scripts.
He has used this html code.

&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script&gt;
 $('.btn').click(function(){
 $('.btn').removeClass('active');
 $(this).addClass('active');
 });
 &lt;/script&gt;

&lt;script type="text/javascript"&gt;
 function MM_showHideLayers() { //v9.0
 var i,p,v,obj,args=MM_showHideLayers.arguments;
 for (i=0; i&lt;(args.length-2); i+=3) 
 with (document) if (getElementById &amp;&amp; ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
 if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
 obj.visibility=v; }
 }
 &lt;/script&gt;

&lt;/head&gt;

$('.btn').click(function(){

$('.btn').removeClass('active');

$(this).addClass('active');

});

</script>

function MM_showHideLayers() { //v9.0

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3)

with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];

if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

obj.visibility=v; }

}

</script>

</head>

And targeted HTML is

&lt;div class=links&gt;
 &lt;ul&gt;
 &lt;li&gt;
 &lt;a href="#" onclick="MM_showHideLayers('what_we_do','','show');MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','hide')" class="active btn" &gt;WHAT WE DO&lt;/a&gt; | 
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#" onclick="MM_showHideLayers('who_we_are','','hide');MM_showHideLayers('our_mission','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" &gt;OUR MISSION&lt;/a&gt; | 
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#" onclick="MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" &gt;WHO WE ARE&lt;/a&gt;

&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;

<ul>

<li>

<a href="#" onclick="MM_showHideLayers('what_we_do','','show');MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','hide')" class="active btn" >WHAT WE DO</a> |

</li>

<li>

<a href="#" onclick="MM_showHideLayers('who_we_are','','hide');MM_showHideLayers('our_mission','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >OUR MISSION</a> |

</li>

<li>

</li>

</ul>

</div>

Answer:
Please wrap all into document.ready()

&lt;div class=links&gt;
 &lt;ul&gt;
 &lt;li&gt;
 &lt;a href="#" onclick="MM_showHideLayers('what_we_do','','show');MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','hide')" class="active btn" &gt;WHAT WE DO&lt;/a&gt; | 
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#" onclick="MM_showHideLayers('who_we_are','','hide');MM_showHideLayers('our_mission','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" &gt;OUR MISSION&lt;/a&gt; | 
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#" onclick="MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" &gt;WHO WE ARE&lt;/a&gt;

&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;

<ul>

<li>

<a href="#" onclick="MM_showHideLayers('what_we_do','','show');MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','hide')" class="active btn" >WHAT WE DO</a> |

</li>

<li>

<a href="#" onclick="MM_showHideLayers('who_we_are','','hide');MM_showHideLayers('our_mission','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >OUR MISSION</a> |

</li>

<li>

</li>

</ul>

</div>

Question No. 7
A user wants to line up the images in a table but facing table spacing issues in HTML5. His code is generating extra space at the bottom of cells. He has used this HTML5 code

&lt;!DOCTYPE html&gt; &lt;html&gt;
&lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;meta charset = "utf 8"&gt;
 &lt;style&gt;
 table{
 border-collapse : collapse;
 border-spacing : 0;
 border:0;
 }
 tr,td{ 
 border-collapse:collapse; 
 padding : 0; 
 border : 0;}
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;table&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;img src="tableImages\ul.gif" alt ="1,1"&gt;&lt;/td&gt;
 &lt;td colspan = "2"&gt;&lt;img src ="tableImages\top.gif" alt = "1,2"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;img src="tableImages\ur.gif"alt="2,2"&gt;&lt;/td&gt;
 &lt;/tr&gt;

&lt;tr&gt;
 &lt;td rowspan = "2"&gt;&lt;img src="tableImages\left.gif"alt="2,1"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;img src="tableImages\1.gif"alt="2,1"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;img src="tableImages\2.gif"alt="2,1"&gt;&lt;/td&gt;
 &lt;td rowspan = "2"&gt;&lt;img src="tableImages\right.gif"alt="2,1"&gt;&lt;/td&gt;
 &lt;/tr&gt;

&lt;tr&gt;
 &lt;td&gt;&lt;img src="tableImages\3.gif"alt="2,1"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;img src="tableImages\4.gif"alt="2,1"&gt;&lt;/td&gt;
 &lt;/tr&gt;

&lt;tr&gt;
 &lt;td&gt;&lt;img src="tableImages\ll.gif" alt ="1,1"&gt;&lt;/td&gt;
 &lt;td colspan = "2"&gt;&lt;img src ="tableImages\bottom.gif" alt = "1,2"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;img src="tableImages\lr.gif"alt="2,2"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
&lt;/body&gt; &lt;/html&gt;

<!DOCTYPE html> <html>

<head>

<style>

table{

border-collapse : collapse;

border-spacing : 0;

border:0;

}

tr,td{

border-collapse:collapse;

padding : 0;

border : 0;}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body> </html>

Answer:
You image is displaying inline-block by default and height is calculated as per font size. You can fix it by two ways.
a) You can display image as a block element.
Change the property from display to block and use this code.

img {
 display: block;
}

img {

display: block;

}

b) Explicitly note
Change the font-size to 0 and use this code to do this.

td {
 font-size: 0;
}

td {

font-size: 0;

}

Question No 8
A user is new to python and facing formatting issue while coding. He write a code that confluence and posts content but confluence is only reading HTML5 code. He outlined the HTML5 code and he want to prepend these tags header1 header 2 header3 header4 header 5 10 15 20 27 to/path/foo.c 7 67 10 22 to/path/boo.c …etc without using external module/library.
He has used below HTML5 code.

&lt;table style="width:100%" \&gt;
 &lt;tr \&gt;
 &lt;th \&gt;Header1
 &lt;th \&gt;Header2 
 &lt;th \&gt;Header3
 &lt;th \&gt;Header4
 &lt;th \&gt;Header5
 &lt;tr \&gt;
 &lt;td \&gt;10
 &lt;td \&gt;15
 &lt;td \&gt;20
 &lt;td \&gt;27
 &lt;td \&gt;to/path/foo.c
 &lt;tr \&gt;
 &lt;td \&gt;7
 &lt;td \&gt;67 
 &lt;td \&gt;10
 &lt;td \&gt;22
 &lt;td \&gt;to/path/boo.c
 &lt;tr \&gt;
 &lt;td \&gt;1
 &lt;td \&gt;2 
 &lt;td \&gt;3
 &lt;td \&gt;4 
 &lt;td \&gt;to/path/moo.c
 &lt;tr \&gt;
 &lt;th \&gt; Sum:
 &lt;tr \&gt;
 &lt;td \&gt;18
 &lt;td \&gt;84
 &lt;td \&gt;33
 &lt;td \&gt;53

<tr \>

<th \>Header1

<th \>Header2

<th \>Header3

<th \>Header4

<th \>Header5

<tr \>

<td \>10

<td \>15

<td \>20

<td \>27

<td \>to/path/foo.c

<tr \>

<td \>7

<td \>67

<td \>10

<td \>22

<td \>to/path/boo.c

<tr \>

<td \>1

<td \>2

<td \>3

<td \>4

<td \>to/path/moo.c

<tr \>

<th \> Sum:

<tr \>

<td \>18

<td \>84

<td \>33

<td \>53

His desired table format

Header1 Header2 Header3 Header4 Header5
 10 15 20 27 to/path/foo.c
 7 67 10 22 to/path/boo.c
 1 2 3 4 to/path/moo.c

Sum: 
 18 84 33 53

Header1 Header2 Header3 Header4 Header5

10 15 20 27 to/path/foo.c

7 67 10 22 to/path/boo.c

1 2 3 4 to/path/moo.c

Sum:

18 84 33 53

Answer:
Please use this code.

string = "header1 header2 header3 header4 header5 &lt;br \&gt; 10 15 20 27 to/path/foo.c &lt;br \&gt; 7 67 10 22 to/path/boo.c"
rows = string.split("&lt;br \&gt;")
data = map(lambda r: r.split(" "), rows)
html_rows = map(lambda r: "&lt;td&gt;" + "&lt;/td&gt;&lt;td&gt;".join(r) + "&lt;/td&gt;", data)
html_table = "&lt;table&gt;&lt;tr&gt;" + "&lt;/tr&gt;&lt;tr&gt;".join(html_rows) + "&lt;/tr&gt;&lt;/table&gt;"

string = "header1 header2 header3 header4 header5 <br \> 10 15 20 27 to/path/foo.c <br \> 7 67 10 22 to/path/boo.c"

rows = string.split("<br \>")

data = map(lambda r: r.split(" "), rows)

html_rows = map(lambda r: "<td>" + "</td><td>".join(r) + "</td>", data)

html_table = "<table><tr>" + "</tr><tr>".join(html_rows) + "</tr></table>"

Code for header and rows

string = "header1 header2 header3 header4 header5 &lt;br \&gt; 10 15 20 27 to/path/foo.c &lt;br \&gt; 7 67 10 22 to/path/boo.c"
// Make array of rows
rows = string.split("&lt;br \&gt;")
rows = map(lambda r: r.strip(" "), rows)
// Make array of arrays of column data
data = map(lambda r: r.split(" "), rows)
// The first row is header data; remove it
header_data = data.pop(0)
// HTML-ize each row
header_rows = "&lt;th&gt;" + "&lt;/th&gt;&lt;th&gt;".join(header_data) + "&lt;/th&gt;"
html_rows = map(lambda r: "&lt;td&gt;" + "&lt;/td&gt;&lt;td&gt;".join(r) + "&lt;/td&gt;", data)
// Concatenate everything into one table, but do not close it yet
html_table = "&lt;table&gt;&lt;tr&gt;" + header_rows + "&lt;/tr&gt;&lt;tr&gt;" + "&lt;/tr&gt;&lt;tr&gt;".join(html_rows) + "&lt;/tr&gt;"
// Total data and put it in Sum row
html_table += "&lt;tr&gt;&lt;th&gt;Sum&lt;/th&gt;&lt;/tr&gt;"
sums = [0, 0, 0, 0]
for row in data:
 sums[0] += int(row[0])
 sums[1] += int(row[1])
 sums[2] += int(row[2])
 sums[3] += int(row[3])

sums = map(str, sums)
// Add summation data and close the table
html_table += "&lt;tr&gt;" + "&lt;/tr&gt;&lt;tr&gt;".join(sums) + "&lt;/tr&gt;&lt;/table&gt;"

string = "header1 header2 header3 header4 header5 <br \> 10 15 20 27 to/path/foo.c <br \> 7 67 10 22 to/path/boo.c"

// Make array of rows

rows = string.split("<br \>")

rows = map(lambda r: r.strip(" "), rows)

// Make array of arrays of column data

data = map(lambda r: r.split(" "), rows)

// The first row is header data; remove it

header_data = data.pop(0)

// HTML-ize each row

header_rows = "<th>" + "</th><th>".join(header_data) + "</th>"

html_rows = map(lambda r: "<td>" + "</td><td>".join(r) + "</td>", data)

// Concatenate everything into one table, but do not close it yet

html_table = "<table><tr>" + header_rows + "</tr><tr>" + "</tr><tr>".join(html_rows) + "</tr>"

// Total data and put it in Sum row

html_table += "<tr><th>Sum</th></tr>"

sums = [0, 0, 0, 0]

for row in data:

sums[0] += int(row[0])

sums[1] += int(row[1])

sums[2] += int(row[2])

sums[3] += int(row[3])

sums = map(str, sums)

// Add summation data and close the table

html_table += "<tr>" + "</tr><tr>".join(sums) + "</tr></table>"

Remember this code depends on separator being very consistent. Use string <br \> between each row and exact space between columns.
Question No. 9
A user is using PHP to read .xsl and .xml file on his server. He gets following error when he runs HTML 5 code with the help of W3C Markup Validation Service.

Saw &lt;?. Probable cause: Attempt to use an XML processing instruction in HTML. 
(XML processing instructions are not supported in HTML.) &lt;?xml version="1.0"?&gt;

1 2	Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) <?xml version="1.0"?>

He has used this PHP code.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 ....
&lt;/head&gt;
&lt;body&gt;
 ... some hard-coded HTML here ...

&lt;?php
 // Load XML file
 $xml = new DOMDocument;
 $xml-&gt;load('cdcatalog.xml');

// Load XSL file
 $xsl = new DOMDocument;
 $xsl-&gt;load('cdcatalog.xsl');

// Configure the transformer
 $proc = new XSLTProcessor;

// Attach the xsl rules
 $proc-&gt;importStyleSheet($xsl);

echo $proc-&gt;transformToXML($xml);
 ?&gt;

... more hard-coded HTML here ...
&lt;/body&gt;
&lt;/html&gt;

XSL code:

<!DOCTYPE html>

<html>

<head>

....

</head>

<body>

... some hard-coded HTML here ...

<?php

// Load XML file

$xml = new DOMDocument;

$xml->load('cdcatalog.xml');

// Load XSL file

$xsl = new DOMDocument;

$xsl->load('cdcatalog.xsl');

// Configure the transformer

$proc = new XSLTProcessor;

// Attach the xsl rules

$proc->importStyleSheet($xsl);

echo $proc->transformToXML($xml);

... more hard-coded HTML here ...

</body>

</html>

XSL code:

&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
&lt;xsl:template match="/"&gt;
 &lt;table border="1"&gt;
 &lt;tr bgcolor="#9acd32"&gt;
 &lt;th style="text-align:left"&gt;Title&lt;/th&gt;
 &lt;th style="text-align:left"="left"&gt;Artist&lt;/th&gt;
 &lt;/tr&gt;
 &lt;xsl:for-each select="catalog/cd"&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;xsl:value-of select="title" /&gt;&lt;/td&gt;
 &lt;td&gt;&lt;xsl:value-of select="artist" /&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/xsl:for-each&gt;
 &lt;/table&gt;
 &lt;/xsl:for-each&gt;
&lt;/xsl:template&gt;
&lt;/xsl:stylesheet&gt;

XML code
&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;catalog&gt;
 &lt;cd&gt;
 &lt;title&gt;Empire Burlesque&lt;/title&gt;
 &lt;artist&gt;Bob Dylan&lt;/artist&gt;
 &lt;country&gt;USA&lt;/country&gt;
 &lt;company&gt;Columbia&lt;/company&gt;
 &lt;price&gt;10.90&lt;/price&gt;
 &lt;year&gt;1985&lt;/year&gt;
 &lt;/cd&gt;
 ...
&lt;/catalog&gt;

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<th style="text-align:left">Title</th>

<th style="text-align:left"="left">Artist</th>

</tr>

<xsl:for-each select="catalog/cd">

<tr>

</tr>

</xsl:for-each>

</table>

</xsl:for-each>

</xsl:template>

</xsl:stylesheet>

XML code

<?xml version="1.0" encoding="UTF-8"?>

<cd>

<title>Empire Burlesque</title>

<artist>Bob Dylan</artist>

<company>Columbia</company>

</cd>

...

</catalog>

Answer:

Please use this code at the top level in XSLT style sheet.
<xsl:output omit-xml-declaration=”yes”/>

Or this

&lt;xsl:output method="html"/&gt;

1	<xsl:output method="html"/>

April 24, 2017
0
html5, html5 coding, learn html5

Categories

Recent Posts

CCNA - Online Course Training

Online SEO Training

PHP - HTML Online Course

Learn PrestaShop

Web Design & Development

SEO & Social Media Management

Click Image to View Services & Pricing

Content

Graphics & Video

9 Common Questions Answered When Using HTML5

admin

About me

Categories

Recent Posts

CCNA - Online Course Training

Online SEO Training

PHP - HTML Online Course

Learn PrestaShop

Web Design & Development

SEO & Social Media Management

Click Image to View Services & Pricing

Content

Graphics & Video

Do you want search ?

Follow Me

9 Common Questions Answered When Using HTML5

admin

About me