Gitbook header add id and internal links - html

I am new to the programming community and new to Gitbook. I have searched gitbook doc but still having some syntax problems.
I have been trying to add internal links so that, on a long web page, I can click links on the top of the page and it will directs me to content blocks contained in the bottom of the page. I also have a few long pages.
[Clickable Link1](redirects to headerId1 in the same page)
[Clickable Link2](redirects to headerId2 in the same page)
...
Real Content
Header 1 with id = headerId1
Content1
Header 2 with id = headerId2
Content2
...
The resources I had looked for involves:
https://gitbookio.gitbooks.io/markdown/content/syntax/links.html
The problems I am having is:
add id to headings.
I tried to type ### Header1 {#id=myheader1} After typing ### and followed by a space, the Header1 {#id=myheader1} became big and shows as heading3 size texts. How do I escape and make sure it only shows Header 1 with heading 1 font and assigned with id of header1?
Refer to internal headings
I tried to follow the doc, but still, it only shows the original text with [] and does not turn into clickable links.
Please share some tips and help. Thank you very much.

I strongly advise against manually building a table of contents. It's a pain to make them, and even more of a pain to maintain them.
Instead, let software take care of this for you. Here are two GitBook plugins that I just found for making tables of contents:
https://www.npmjs.com/package/gitbook-plugin-page-toc
https://www.npmjs.com/package/gitbook-plugin-simple-page-toc
Plugins can be enabled within the editor or by editing the book.json file.

I know this question was asked a long time ago. Just in case anyone come across this because there is no official docs for this:
You could define your custom anchor to a header using the syntax ## My heading {#my-anchor} and reference it normally with [my text](#my-anchor). This will show the heading correctly as My heading and navigation will work properly.

Related

Can we auto-expand an HTML 'details' when a hyperlink points to it?

I am creating a page with language information. Since it is extremely long, I collapse each language with details/summary tags and have them in alphabetic sections with each initial letter also a collapsed details. Currently, each language is coded like
<details>
<summary id="am"><b>am — Amharic</b></summary>
<p><img src="/wp-content/uploads/2018/05/GBV-Amharic-150.jpg"/>About 22 million native speakers, … [more info]</p><br clear="all"/>
</details>
If I put a link elsewhere like http://domain.TLD/path/#am, I'd like to take the user to that page, scroll to that section, and expand the details. If that's possible, do I have the wrong syntax for one or both sides? It is not working now—nothing expands and it goes to the top of the page as if the # were not there. But the address field shows the full URI of the link, #id included.
"path/" is interpreted by Wordpress and/or a Wordpress-generated .htaccess, so perhaps that somehow prevents it working correctly.
You have the correct syntax for directing a user to an element with the id "am."
You can check the URL the browser used to display the page with jQuery. For your example if a link sent a user to http://domain.TLD/path/#am the following code would trigger if the browser contained "path/#am" as part of the URL.
jQuery(document).ready(function($) {
if(window.location.href.indexOf("path/#am")){
/* do something to the element in jQuery -- likely apply a class.
*/
}
There are many animation and scrolling libraries related to jQuery as well.

HTML5 footnote coding with "NAME"

I have hundreds of footnotes in scores of documents.
All are in HTML4 format. I have needed to update all the pages to HTML5.
When using a code checker for HTML5, I am informed that "NAME" as be deprecated and it I am getting warnings in to change the code.
I can't find a code example to resolve this. I am not looking to do anything fancy. I don't want to display the footnote by hovering the mouse over the call to the footnote. I just want to be able to click on a footnote number and get to it at the bottom of the page and then return! I don't see how that is done without "NAME."
Currently as an example, this is what a my code looks like. (I make have ten or more footnotes on any given page.
<P>This is in the regular text
<A NAME="sdfootnote1anc" HREF="#sdfootnote1sym"><SUP>1</SUP></A>></P>
AND it calls this at the bottom of the page.
<p><DIV ID="sdfootnote1">
<A NAME="sdfootnote1sym" HREF="#sdfootnote1anc">1</A> - Here I am explaining it before I go on after the break to the next footnote.</DIV><BR>
Change name to id
<A CLASS="sdfootnoteanc" id="sdfootnote1anc" HREF="#sdfootnote1sym">
<A CLASS="sdfootnotesym" id="sdfootnote1sym" HREF="#sdfootnote1anc">1</A>

How to properly use same text sections across multiple html pages?

I am making help content documentation for an already made software (the kind of which opens in every software when you press F1 or navigate to the Help section in the menu bar). I am using simple html/CSS/js pages to do so.
There is a ton of the same text descriptions of various software properties that appear in more than one page. The idea is to make a single text source file, where all the text descriptions are located and then use some sort of referencing to that specific text section wherever necessary.
Kind of a similar to using a CSS stylesheet to apply styles over all of the pages, only this handles text instead of styles. This way I would be able to change text in only one file and it would apply everywhere it is used.
I ran across the html SSI method, but this only includes the entire html page and not just a specific text section the way I would like to. I would strongly avoid using different file for each text section.
Can anyone please point me into the right direction here?
I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.
For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:
http://www.w3schools.com/js/js_htmldom_html.asp
UPDATE: I did a little test, i created the following JavaScript:
function helloTitle(){
var text = "Hello World!";
document.getElementById("title").innerHTML = text;
}
And referenced it in some HTML pages like this:
<script src="commonText.js" type="text/javascript"></script>
After that i only need to call the function in the element i want it to modify:
<p id="title"><script>helloTitle();</script></p>
This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.
Hope this information could help you!
I figured out how to do it a little more comforatbly on a large scale using the html command https://www.w3schools.com/tags/tag_iframe.asp
in your main html file you do:
<p> <iframe src="Text.html" width="100%" height="300" style="border:1px solid black;"> </p>
and then with some basic html formating insert whatever text u want
<html>
<body>
hmm idk what i should put here. Test
</body>
</html>
there will also be some css formatting needing to be done before it look perfect, but if you want to make multi line blocks I think this is the easiest way to.

HTML - Auto navigation with Named Anchors #

well we can have name anchors in our page like the following code
<!---Some HTML Code-->
Mark 1
Mark 2
<!---After some HTML Code-->
<a name="Mark_1">
<!---After some HTML Code-->
<a name="Mark_2">
by doing so we provide links that to scroll up and down a page and all but
I have seen several times on the net that when you click a link and a new page is opened and it contains many subjects but page is scrolled to the desired position.
HOW THAT IS DONE
for example, in stackoverflow's recent activity when we click some activity the relevant page is opened and page is scrolled to that activity out of many... this is just an example.. i don't want how stackoverflow does it... what i want how is this done or is there any name for this technique
You can append a hash with following the the value of the id attribute of any HTML element. See this example: http://en.wikipedia.org/wiki/Html#Attributes
It links directly to the section about "Attributes". In this section it also discribes the technique :)
you need
Mark 1
note the hash
It's doing exactly what you're talking about, a named anchor. So the link looks something like this:
Notice the '#' in the href (... 3550910#3550910), that's the named part. Takes you right where you want to go.
Btw in your example above your link to the named anchor should be
Mark 1
Notice the hash
I think you have it right, but you just need to add the target attribute.
Mark 1
This will open the link in a new page and should position it down the the anchor. I normally use the full URL in the href section though.

What data should I care when retrieving only the contents of a HTML webpage?

We all know that the contents of an HTML page aren't just the data between open and closed tags, for example, <p></p>.
Beyond image "alt" and any "title" attributes, what HTML offer to me that I should consider as a content?
Any suggestions?
Getting Your Text...
Titles (<h1> - <h6>), images (<img />), paragraphs (<p>) and links (<a>). Not much more than that. Unless you want to count tables too.
If you want to pull all of the text from the Body, you can do so easily with a scraper-tool like phpQuery (requires PHP):
phpQuery::newDocument(file_get_contents("http://www.somesite.com"));
$body = pq("body")->text();
print $body;
In that example, $text would be the total content of your entire page. You could then search for keywords in there to help you determine the content.
Scanning Your Text for Keywords...
As you stated in your comment, you're wanting to guard against porn-url's being submitted. Using this method, you can get the text. Once you have the text, you could scan it and build a list of keywords/instances. That list should give you a good idea about the content/subject of the page (unless the page is just a video of some sort).
To learn how you can build these keywords/instances list, view the following Question:
Quickly Build List of Keywords from Text, Including # of Instances