Learn How to Edit Your Content Using HTML Within the Note Editor
There are a number of basic formatting options within the note editor. Here is a list of some of the things you can do simply by using the options in the note editor:
- Change whether your text is a heading or a paragraph
- Make text bold, italic or underlined
- Change the colour of the text
- Highlight text
- Align text
- Create lists
Editing Your Note as HTML
There may be times when you want to edit your note beyond this. This is where HTML steps in. To edit your note in HTML format, go to view > source code. This will show you your note in HTML format. If your note is currently empty, the source code should look like this...
This is a basic HTML document set up. We only really need to worry about what's in between
</body>, as the visible part of the HTML document is between these two tags.
To create a heading, use a <h#> tag with the # representing any number from 1 to 6. Level 1 is the highest or main level of heading, Level 2 is a subheading of Level 1, Level 3 is a subheading of Level 2, and so on through Levels 4 and 5.
To create new paragraphs for new ideas or points, use the
<p> element to define a new paragraph. You always need a closing
</p> tag at the end of your paragraph.
<p>For example, this is paragraph 1.</p>
<p>Paragraph 2 is defined by a new set of p tags.</p>
<strong> element defines text with strong importance. The content inside is displayed in bold:
<strong>This text is very important!</strong>
<i> element defines a part of the text in an emphasised manner. The content inside is typically displayed in italic:
<i>This text is italic</i>
<mark> element defines text that should be marked or highlighted:
<p>Remember to <mark>water the plants</mark> today.</p>
<sub> element defines subscript text. Subscript text appears half a character below the normal line and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:
<p>This is <sub>subscripted</sub> text.</p>
<sup> element defines superscript text. Superscript text appears half a character above the normal line and is sometimes rendered in a smaller font. Superscript text can be used in mathematical equations:
Embedding an Image
To insert an image into a note, you will need to have a URL for the image you would like to use.
If the image is on your website, you can use Chrome inspect by right-clicking on your web page while browsing in Chrome then selecting 'Inspect'. Find the image you would like to use and copy the source URL. Then head to the note editor and select the image icon. Once you paste in your image URL it should appear in the editor available for resizing.
If the image is not on your website and saved on your laptop, you will need to create a public URL using a site such as Dropbox or Google Drive. This will then allow you to embed your images into a note using the same method as above.
Embedding A Video
To embed a video in an HTML page, use the
<iframe width="560" height="315" src="https://www.youtube.com/embed/H1KQVVo-hC8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
To embed a video from Youtube, find the video you want to upload to your note. Then, click share > embed and highlight the iframe element to copy it. Once in the note editor, go to view > source code and paste the iframe element into your HTML code, between the
You can change the size of your video by changing pixels of the width and height in the iframe element.
<iframe width="560" height="315"
There are endless possibilities for the things you can do with HTML. If you want to delve further into HTML formatting, try one of the following websites:
- Everything HTML - https://www.w3schools.com/html/default.asp
- Using colours - https://www.w3docs.com/learn-html/html-colors.html
- Checking your source code - https://www.freeformatter.com/html-validator.html