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.
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.
Step 3: Choose a name for your snippet, and write or paste your code here, then click Save.
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.
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
You can see below the translation of the introduction into HTML code, the code represents the same thing as the introduction above.
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)
The font-family: command denotes the font type, in this case Arial is the value.
text-decoration: is being used here with the underline; value in order to underline the text.
The font-size: command sets any text contained to the weight (pt) value specified.
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?