HTML & CSS tutorials
5. Notes in running text
Note: While reading this page, bear in mind that although I have some experience of writing HTML and CSS I'm no expert. If you find errors or have proposals for improvements, please send me a message and help make this a better page for the benefit of future visitors. If you're new to or not that experienced in HTML and CSS, I suggest you go to the Introduction page and follow the instructions. To the left, there are links to more HTML and CSS tutorials.
Want to put notes in the running text of your web pages? Notes that are hidden at first? Notes that become visible when a link is clicked upon? Notes that appear right after those parts of the running text the notes are amendments to? Notes that require very little coding but still works as they should?
I know I wanted to do these things from the moment I started writing web pages a few years ago.
After many fruitless google searches and more or less flawed attempts of my own, I finally came up with a solution I think works well enough to use for real.
First, a working example, that you can try if you like before you copy and paste the code below and start experimenting on you own:
Click on  to see the note and to hide the note.  This is just a sample note. Real notes can be found on several pages on this site, for example on the pages Start and Links.
To complete this tutorial, follow these instructions:
1. Open a new empty document with Notepad++ or some other text editor.
2. Write or copy this code to the document:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add title here</title>
if (document.getElementById(id).style.display == 'inline')
document.getElementById(id).style.display = 'none';
document.getElementById(id).style.display = 'inline';
background:rgb(224,240,255); display:none; padding:0.2em;
<p>Click on  to see the note and to hide the note. <a onclick="noteInline('note1')"></a> <span id="note1" class="noteInline"> This is just a sample note.</span></p>
3. Save the document as notes.html (or whatever as long as the extension is html).
4. Open the file in a browser and check that the note works as the notes on this page.
More important comments
First, two rules you MUST follow:
- The name after each onclick="noteInline(' MUST be the same as the name after the corresponding id="
- NEVER give two notes on the same page the same name
If you don't follow these two rules, the notes won't show, and you will get error messages.
Less important comments
I added css rules for the properties a and body just to make the page look and behave somewhat nicer. You can change or remove these rules if you like. As long as you more or less know what you're doing, the showing and hiding of notes will still work.
For the note, I used the same background color and padding as I use on this site. Naturally, there are many other possibilities.
Would you like to comment on this page or some other page? Use the contact form. Write the title of the page you want to comment on and your comment in the field Message.