Working With Basic HTML
PRINT PAGE
Working With Basic HTML
INTRODUCTION
In some cases, our standard elements like bolding and italics don't work inside design elements like the accordion and the survey carousel.
For example, if you are to trying to bold text inside an accordion, you will find that the standard double asterix ** element placed before and after the text doesn't work.
The following information shows you how to work around this using some basic html code.
What is HTML?
HTML stands for "Hyper Text Markup Language". HTML is the world's standard language used to create web pages. HTML is written in the form of HTML elements (like our accordion for example) which consist of tags enclosed in angle brackets.
Here is an example:
<html>Text goes here</html>
Note: A tag almost always appears twice (with the odd exception), once at the start of the text and a second time at the end of the text. The second instance of the tag must always have "/" immediately before its tag name. This tells the internet browser to close off that tag (otherwise the rest of the page would be affected by that tag).
What are Tags?
Tags tell your internet browser (like Firefox, Chrome, Safari and Internet Explorer) to do something with the text that they encapsulate. For example, to make the text "Unimed Living" bold we would use the <b> tag as follows:
<b>Unimed Living</b>
Which will display as: Unimed Living
Remember: Wherever you place a tag on a page in almost all cases you must close off that tag - if you don't this will break your code and your page will look strange or even not load at all.
SOME COMMON TAGS
1. Break Tag
Creates a new line or "break" wherever it is placed (generally speaking). This is one of those odd exceptions where a closing tag is not required. It can stand alone as it is.
<br>
2. Bold Tag
Makes the encapsulated text bold.
<b>Text goes here</b>
Which will display as: Text goes here
3. Underline Tag
Underlines the encapsulated text.
<u>Text goes here</u>
Which will display as: Text goes here
4. Italic Tag
Makes the encapsulated text italic.
<i>Text goes here</i>
Which will display as: Text goes here
5. Paragraph Tag
Creates a separate paragraph based on the encapsulated text.
<p>Text goes here</p>
Which will display as: Text goes here
6. Hyperlink Tag
Creates a web link of the encapsulated text.
<a href="http://www.google.com.au" title="hover text">Google</a>
Which will display as a link: Google
TIP: By default this link will open in a new page.
7. Unordered (Bulleted) List Tag
This tag is used in combination with other tags to achieve a bulleted list. For example:
<ul></ul>
<b>Bullet Heading</b>
<p><ul>
<li><b>Bold text goes here</b><br>
<i>Sub-text goes here</i></li>
<li><b>Bold text goes here</b><br>
<i>Sub-text goes here</i></li>
<li><b>Bold text goes here</b><br>
<i>Sub-text goes here</i></li>
</ul></p>
Which will display as:
Bullet Heading
- Bold text goes here
Sub-text goes here - Bold text goes here
Sub-text goes here - Bold text goes here
Sub-text goes here
SOME COMMON CHARACTER ENTITIES
1. Non Breaking Space
A common character entity used in HTML is the non breaking space. It's code is as follows:
You can have as many of them as you like between words, for example:
Text with space
Which will display as: Text with space
Important Note: Remember that browsers will always truncate spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use this character entity.