Saltar navegación

Elimina os anuncios subscribíndote a Kanka ou potenciando a campaña.

  1. Notas

How to make a Table of Contents

Tutorial

Entrada principal

Table of Contents

Table of Contents

HTML Basics

Actual Implementation

Advanced Techniques

HTML Basics

Web pages are coded through a language called HTML - Hypertext Markup Language. A table of contents is a set of "internal links" - they redirect your browser within the current page, rather than taking you to another page. Every piece of a webpage, such as a heading, link, or paragraph is an "element" on a page and can have an "id" attribute. On a given webpage, each element's ID must be unique. Internal links know where to take you by directing your browser to jump to the element with a given ID.  

Actual Implementation

The first step is building out all the headers you want to use in your table of contents - in this page's case, the headers are "Table of Contents", "HTML Basics", "Actual Implementation", and "Advanced Techniques". The exact setup of the headers (such as h1 vs h2) doesn't particularly matter. 

Next, go to the source code editor - it looks like a pair of angle brackets <>. It will look a little like the below.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Table of Contents</h1>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h1>Header 1</h1>
</body>
</html>

Inside each header tag (such as <h1>), assign an ID - you can't use spaces, but you can use hyphens (-) and underscores (_). 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="TOC">Table of Contents</h1>
<h1 id="topic-one">Header 1</h1>
<h2 id="subtopic">Header 2</h2>
<h1 id="topic-two">Header 1</h1>
</body>
</html>

Once you've assigned an ID to any element you want to link to in the table of contents, go back to the main display and find where you want to put your table of contents. Using the link tool, you can either put in #id as the URL or type in the name of the header (such as Header 1) to let the link tool fill the id in for you. Press save, and you now have an internal link in your table of contents!

Advanced Techniques

Creada por Joseph Meehan hai 2 anos. Modificada por última vez por Joseph Meehan hai 9 meses

Selecciona a túa lingua

Funcionalidade potenciada

Fai clic na imaxe da entidade para establecer o seu punto de foco en lugar de usar o estimado automaticamente.

Potenciar "Kanka Documentation"