While creating Table of Contents in jupyter-notebook using <html>
I created hyperlinks linking to internal notebook cells, But clicking them does not take me to the desired cells.
Example:
The markup in the table of content is like:
<ol>
<li>Understanding the Data</li>
<li>Reading the file</li>
<li>Adding Columns</li>
<li>General Analysis</li>
</ol>
Whereas the code in the Cells linked by above hyperlinks are as follows:
<h2> Understanding the Data </h2>
<h2> Reading the file </h2>
... and so on
Like to share the solution to my problem as follows:
a. The hyperlink's href attribute should be preceded by hash'#' and exactly match the name of the linking cell( case insensitive)
with dash( no underscore ) replacing the spaces.
e.g.
<ol>
<li>Understanding the Data</li>
<li>Reading the file</li>
<li>Adding Columns</li>
<li>General Analysis</li>
</ol>
b. Whereas on the cells I am linking to, there should not be any space between opening and closing tags that are encompassing the name.
e.g.
<h2>Understanding the Data</h2>
<h2>Reading the file</h2>
<h2>Adding Columns</h2
<h2>General Analysis</h2>
Note that now there is no space between html tags and the name defined within.
Related
Try to change list type of text block in word press. I change the text block using text mode not visual mode
add type="A" in <ol> tag . But after save changes, it doesn't work. How to implement it correctly?
In the image below i want to change 1.Informasi Pribadi to A.Informasi Pribadi
https://ibb.co/DKCHtDB
https://ibb.co/NLPSxgY
This might point you in the right direction. Usually you will be changing list styles with either HTML or CSS.
With HTML there are <ul> (un ordered) and <ol> (ordered) lists.
Then you can change their bullet points with some CSS like in this tutorial:
https://www.w3schools.com/css/css_list.asp
Overview
I am trying to add footnotes to an HTML page. According to the W3C recommendation for Common idioms without dedicated elements ยง4.12 Footnotes, the appearance of a footnote links to the footnote section and vice-versa. They provide an example of linking to a section with paragraph <p> elements with values inside.
Instead of a paragraph, I am using the <footer> element within the section to contain an ordered list <ol> element. For example:
<section id="section-2">
<h2>Section 2 Title</h2>
<p>Many paragraphs of information. But at least one sentence has a footnote reference, like this one.<sup><a id="r1" href="#fn1">1</a></sup>
<footer id="section-2-footnote">
<ol>
<a id="fn1" href="#r1"><li>Although it's not a very informative footnote. But more information can be seen in the appendix.</li></a>
<ol>
</footer>
</section>
Problem
In the example, the entire <li> element (except the number itself) is a part of the anchor. This becomes confusing if the footnote itself links to some other part of the document (e.g. an appendix, caption, table, etc.) as it is indistinguishable from the rest of the anchor.
Desired outcome
What I would like to do is get the numbered value rendered by the <li> element to serve as a link back to the reference. For now, I only want to handle single instance references. Something similar to:
1. First
2. Second
3. And so on..
Is there a way to anchor the number value of a <li> element?
I'm trying to map a XML to import to Wordpress using the WP All Import plugin, but I got stuck after tried several ways to get the "scr" of this image:
<content type="html">
<div align="center" class="post-cover">
<img src="IMG.jpg"/>
<ul>
<li></li>
<li></li>
</ul>
</div>
</content>
I Tried {content[1]/div[1]/img/#src} and {content[1]/div/img/#src}, but no success.
The only path that indeed worked somehow was {content[#type = "html"]} and {content[1]} that showed all the html inside <content>.
If necessary, I can mass edit some things with notepad, like removing type="html", to force it recognize inner divs as childs, but it is also something that I already tried. Unfortunately the content is treated like a simple text.
Are you sure that the stuff that looks like HTML inside <content> isn't actually just text? The tree view image you linked to suggests that it is just text: E.g. the < in <div is actually an escaped, literal <, not the beginning of a <div tag.
If you view the XML/HTML in a plain text editor, you will probably see <content> <div align=...
In that case, <content> has no element children, just plain text. You can't select nodes like img/#src from it using XPath because it doesn't have any such nodes. You would have to find a way to parse it into XML or HTML, if you want to apply XPath to it.
The following do work using R and XML library. Just used '//img/#src'
library(XML)
html = '<content type="html">
<div align="center" class="post-cover">
<img src="IMG.jpg"/>
<ul>
<li></li>
<li></li>
</ul>
</div>
</content>'
doc = htmlParse(html, asText=TRUE)
src = xpathSApply(doc, '//img/#src')
The output:
src
"IMG.jpg"
I need to do some styling to a bunch of webforms, containing articles formatted in a rather uniform way. I can change any source code I want.
What I need is a quick way to dynamically create a navigation menu (on the server side) for an ASP.NET webform, based on contents of a specified div.
For example, given the following HTML:
<div id="article">
<h2 id="first">Chapter 1</h2>
<p>Some text...</p>
<h2 id="second">Chapter 2</h2>
<p>Some other text</p>
</div>
I would like to insert something like this at the end (and render it at the server side, not in a script):
<div id="navigation">
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
</ul>
</div>
NOTE: I know I could iterate through parent div's child controls in codebehind (although I would need to make them all "run at server", or even parse the InnerHtml property of the parent div), but if feels pretty weird.
Also, I am aware that if the article was being created from a data source, I would have the content already organized, but I would like to make as little changes needed in the existing pages.
You could search for the headings with a RegEx and render the navigation from the results. Something like "<h2 id=\"([^\"]+)\">([^<]+)</h2>" would get you the id in the first and the caption in the second group.
If you have access to the data source that is creating the article, definitely use that.
However, if all you have is the HTML, I would use XSLT.
Guys, I'm trying to write xpath or css to find/click on list element "All" based on known span(in this case SNG NAME below). On page, there are different lists Which can contain same list item called as "All". So we have to identify "All" based on span(in this case SNG NAME below)
can someone shed some light on my issue
<html>
<head>
<body>
<div class="grc_selected">
<div class ="lbl_selected">
<span> SNG NAME </span>
</div>
<div id="id1" class="cl1">
<ul id="id_ul">
<li class="tclass" title="[1] All">
<img class="treeIcon" src="1/2/3.gif"/>
<span class="inA">All</span>
</li>
</ul>
</div>
</body>
</head>
</html>
You could use an XPath query like:
//div[span=" SNG NAME "]/following-sibling::div//span[.="All"]
That targets the div which contains the span whose text value is SNG NAME, then moves to the following div (id1) and finally targets the span inside it containing the text All. This makes the assumption that the HTML is fixed (there's currently mismatching div tags) in such a way that the above query structure makes sense (by placing the missing closing div tag between the </ul> and final </div>).