Freeola Internet Get Dotted Domains Blog Guides Forums
Edit HTML code using InstantPro Website Builder
Menu

Adding HTML Code Using Snippets

HTML (Hypertext Markup Language) is a coding language, which is used to design Web Pages. InstantPro is designed so that users do not need a knowledge of how HTML coding works, the software adds it to your pages for you.

HTML works by opening a tag with < > and closing it with < / > with the relevant content contained in between. No matter what the tag is, whether it defines a new paragraph, or a hyperlink, it will start and finish in this way.

There is a very comprehensive guide list including HTML and other programming language available on the w3schools website.


Step 1: Using the Page Elements Sidebar, select the Add Snippet box and drag it on to the page.

Add Snippet

Step 2: Double Click the block - here you can select an Existing Snippet from the drop-down menu, Edit an Existing Snippet, or create a new one. To add a new piece of HTML code, click Create New Snippet.

Select Snippet

Step 3: Choose a name for your snippet, and write or paste your code here, then click Save.

Write/Paste Code

Step 4: The snippet should look similar to the image below in the Drag & Drop Editor. While it appears like this in the Editor, it should appear as a text on your live site. Once you are happy press Finish.

Snippet Example

If you would like to check that the text is displaying correctly on your site, Click Save in the bottom of the page and then click the View Website link in the InstantPro header and navigate to the page.


Example of Using HTML Code

We're going to give an example of how to create the below introduction using HTML code

Intro Text

You can see below the translation of the introduction into HTML code, the code represents the same thing as the introduction above.

HTML Intro Text

The Information Below outlines and explains the different HTML tags and that are used in the code to create the introduction. Read this carefully if you're not already familiar with HTML.

< p > & < / p >

The < p > tag signifies a new paragraph on the page. The < / p > codes the end of the paragraph.

& nbsp ;

This tag denotes a line spacing. This is why the heading in the first line displays slightly below the top of the page.

< p style="text-align: center;" >

The p style tag lets you denote a style for the paragraph, in this case we have aligned the text by using the "text-align: center" text align can be set in a few different ways, but we've chosen to use center; to display the text in the middle of the page.

< span style="xxxx: xxxx;" >

The span style tag allows you to input a number of different styles that change how the text inside span tags appears on your page.

The layout is very important here. First you use the style tag, followed by an equals sign followed by a command (such as colour) that must be in quotation marks.

Secondly, the command is followed by a value (such as colour number), the command will be followed by a : to separate it from the value. The value is followed by a ; to finish. Look at line 2 in the example to see this.

Secondly, if the command is followed by a value, then a ':' is used afterwards to separate the command from the value. The value is followed by a ';' to finish. All come together to make '< span style="command: value;" >'

Below the commands and values are explained:

color: #ea4e01;

The color: command simply changes the colour of your text. The value is the colour tag (in this case it's InstantPro Orange).

font-family: Arial;

The font-family: command denotes the font type, in this case Arial is the value.

text-decoration: underline;

text-decoration: is being used here with the underline; value in order to underline the text.

font-size: 15pt;

The font-size: command sets any text contained to the weight (pt) value specified.

< strong >

The < strong > & < / strong > tags will display any text contained inside them in bold type.

Remember: If you open a new tag, remember to close it. Otherwise you may find strange things happening to your pages. Also make sure that you follow the syntax of the code, making sure that speech marks and semi colons are included when necessary.

Most of the time you won't need to edit your pages with the HTML Editor, as InstantPro is designed so that all the design work can be done in the Drag & Drop Editor. However features such as Maps & YouTube videos are items that you will only be able to add by manipulating the HTML code on your pages.

Using HTML to add Extra Features

You can follow the guides below to add specific items to your pages:

Adding a Google Calendar

Adding Google Custom Search

Adding Google Maps

Adding Web Fonts

Adding Youtube Videos


Freeola is a UK internet service provider offering the best value and extensive free services. Please compare our domain name registration prices or check out our UK high speed internet access. If you are in business please see examples of our free hosting at Freeola.com/customer-sites.

Safe and Secure Payment

Tell us what you think!

Live Chat is offline

Live Chat is available:
9am to 6:30pm Monday to Friday (excluding bank holidays).

01376 55 60 60

Send us a ticket.