Freeola Home Get Dotted Domains Win Free Games Freeola Blog Freeola Guides Freeola Customer Forum

Freeola Guides


Adding HTML Code Using Snippets

By Freeola Support on 11th December, 2017 | 0 Comment(s)

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:

 

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


Did you find this article helpful?

Yes | No


Article Comments (0)
There are currently no comments on this article.
Add your comment:

Comments are limited to 750 characters, you have 750 remaining.

Freeola & GetDotted are rated

Check out some of our customer testimonials below:

YOU'RE ALL SUPER ACE!
Seriously guys, I've been having a load of rubbish with my other provider for ages now, resulting with barely any webspace (50megs), no pop3 anymore and no site admin, as i...

View More Testimonials

Thank you for making the whole thing work so well...
So easy to use and the features included in it are very user-friendly. I have recommended your service to a lot of my friends... I'm now getting good business from my site ...
Chris

View More Testimonials

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
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.

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.