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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head></head> <body> <div><span>Blah</span></div> <div><span>Blah</span> Blah</div> <div> <form method="POST" action="blah"> <input name="SomeName" id="SomeId" value="GET ME"/> <input type="hidden" name="csrfToken" value="ajax:3575644127378754050" id="csrfToken-login"> </form> </div> </body> </html> |
And he is using this code to achieve this
1 2 3 4 5 6 7 8 9 |
$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.
1 2 3 4 5 6 7 |
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
1 2 3 4 5 6 7 8 9 |
$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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title> <link rel="stylesheet" href="HIcss3.css" /> <script src="HIjs.js"></script> </head> <body> <div class="title"> <div id="search"> <form id="searcher" onclick="startSearch('sbox')"> <input type="text" id="sbox" size="15" value="Search This Site"> <input type="button" id="sbutt" value="Find"> </form> </div> </div> <div class="navigation"> <div id="about"> <a href="about.htm"> About </a> </div> <div id="blog"> <a href="blog.htm"> Blog </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> <div class="download"> <a href="http://www.mozilla.com/firefox/" target="_blank"> 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <title>Test Game</title> </head> <body> <script type="text/javascript"> 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> <script type="text/javascript"> 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <title>Test Game</title> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <script type="text/javascript"> 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!doctype html> <html lang="en"> <head> <title>test</title> <script src = "modernizr-1.6.min.js"></script> <script type="text/javascript"> 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> <div style="position:absolut;top:50px;left:50px;"> <canvas id="canone" width ="500" height ="300"> 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <title> Home </title> </head> <body> <img src="Andora ski trip.JPG" alt="View from flat in Andora" height="400" width="100%"> <h1> Home </h1> <nav> <ul> <li><a href="Home.html">Home</a></li> <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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 } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!doctype html> <html> <head> <title> Curriculum vitae </title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <img src="Andora ski trip.JPG" alt="View from flat in Andora" height="400" width="100%"> <h1> Curriculum vitae </h1> <nav> <ul> <li><a href="Home.html">Home</a></li> <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $('.btn').click(function(){ $('.btn').removeClass('active'); $(this).addClass('active'); }); </script> <script type="text/javascript"> 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class=links> <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> <a href="#" onclick="MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >WHO WE ARE</a> </li> </ul> </div> |
Answer:
Please wrap all into document.ready()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class=links> <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> <a href="#" onclick="MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >WHO WE ARE</a> </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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <title></title> <meta charset = "utf 8"> <style> table{ border-collapse : collapse; border-spacing : 0; border:0; } tr,td{ border-collapse:collapse; padding : 0; border : 0;} </style> </head> <body> <table> <tr> <td><img src="tableImages\ul.gif" alt ="1,1"></td> <td colspan = "2"><img src ="tableImages\top.gif" alt = "1,2"></td> <td><img src="tableImages\ur.gif"alt="2,2"></td> </tr> <tr> <td rowspan = "2"><img src="tableImages\left.gif"alt="2,1"></td> <td><img src="tableImages\1.gif"alt="2,1"></td> <td><img src="tableImages\2.gif"alt="2,1"></td> <td rowspan = "2"><img src="tableImages\right.gif"alt="2,1"></td> </tr> <tr> <td><img src="tableImages\3.gif"alt="2,1"></td> <td><img src="tableImages\4.gif"alt="2,1"></td> </tr> <tr> <td><img src="tableImages\ll.gif" alt ="1,1"></td> <td colspan = "2"><img src ="tableImages\bottom.gif" alt = "1,2"></td> <td><img src="tableImages\lr.gif"alt="2,2"></td> </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.
1 2 3 |
img { display: block; } |
b) Explicitly note
Change the font-size to 0 and use this code to do this.
1 2 3 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<table style="width:100%" \> <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
1 2 3 4 5 6 7 |
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.
1 2 3 4 5 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!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: |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <table border="1"> <tr bgcolor="#9acd32"> <th style="text-align:left">Title</th> <th style="text-align:left"="left">Artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title" /></td> <td><xsl:value-of select="artist" /></td> </tr> </xsl:for-each> </table> </xsl:for-each> </xsl:template> </xsl:stylesheet> XML code <?xml version="1.0" encoding="UTF-8"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year> </cd> ... </catalog> |
Answer:
Please use this code at the top level in XSLT style sheet.
<xsl:output omit-xml-declaration=”yes”/>
Or this
1 |
<xsl:output method="html"/> |
- April 24, 2017
- No Comments
- 0
- html5, html5 coding, learn html5