The text editor for our Giving Days, Summernote, allows for you to get a preview of what will appear on your page as you create it. But did you know that you can also use HTML to precisely edit your story?

HTML or HyperText Markup Language is a computer language that is primarily used in building websites, but it is also used to create the stories that all nonprofits have on their Giving Day profiles. It may seem intimidating to use at first, but HTML is very beginner friendly and can be easily utilized by everyone! Before we go in depth into talking about how to use it, I want to first explain the coding basics of HTML. There are many other parts to HTML than what will be explained here, but this support article will only cover what is immediately relevant for use on GiveGab.

HTML is created through a series of tags, denoted with "<" and ">". When ending a tag, you need to close it by including "/" immediately after the "<". This is best explained through an example. To create a very basic line of text to appear on your story, you would simply need to write:

<p>This is a basic line of text!</p>

There are a number of tags that can be used, like "p" as you see above. A lot of the tags are named in such a way to make them easier to remember, but others can bit a little bit trickier. Common tags that are used in stories include, but are not limited to:

  • <p></p> -- used to create lines of text or paragraphs
  • <h1></h1> through <h5></h5> -- used to create lines of text that stand out, like headers. The smaller the header number, the larger the text will be
  • <a href></a> -- used to create a hyperlink to another page
  • <img src> -- allows you to have an image in your story (this one doesn't need to be closed!)
  • <br> -- creates a space between content (does not need to be closed)
  • <hr> -- creates a horizontal line in your story, which can break up monotony (does not need to be closed)

Because <img>, <br>, and <hr> tags do not need to be closed, an example of what these would look like is below:

<img src="https://www.givegab.com/assets/gg-logo-vector-no-tagline-ad0acdab0c0e1c808f3050018ab69a6273ea3f18788e5a14dd491e0d2de4faed.svg">

If this doesn't seem right to you, or doesn't make sense yet, do not worry! By the time you're finished reading these series of articles, the goal is to have you understand and feel empowered to create your own story for your Giving Day in HTML!

In addition, if you are coming in with previous HTML knowledge, you should be good to go! There is one thing to know before continuing on, which would be the formatting of the page. In HTML, a page is broken into elements, or parts of the page. These elements are <!DOCTYPE html>, <html>, <head>, <title>, and <body>. For the purposes of creating and editing stories on GiveGab, we do not need to include these tags. The text editor is automatically in the <body> element.

Did this answer your question?