Basic introduction to HTML

HTML is a language used to define basic content and structure on a web page. You can use HTML to customise the abstract or advanced copy on your event. This article will run you through some basic HTML coding and sentence structure as well as provide examples of what you can create using HTML.

This article covers:

• Some basic HTML coding and sentence structure
• Examples of advanced copy created using HTML

Basic guide for using HTML in Advanced Copy

background-color:#048BCB;

- you can change the 048BCB (blue) to any colour you like and you can choose new ones at a site like https://www.w3schools.com/colors/colors_picker.asp

padding-bottom: 16px

- this gives you the blue space at the end of the text - you can change the number 

text-align: center;

- centres the heading

padding-top: 16px;

- this gives you space between the text and the border of the text box

color:#ffffff 

- this makes the text white

<p>

- start of a paragraph

</p>

- end of a paragraph

<p style="....">

- start of a paragraph with its own style

font-size:1.3em;

- makes the text a bit bigger than usual, you can adjust up and down

padding-left: 8px;

- adds space on the left hand side of the paragraph

padding-right: 8px;

- adds space on the right hand side of the paragraph

font-weight: 400 

- makes the text in the paragraph a bit bolder, you can use from 100 to 900 in multiples of 100

&amp;

- this is called a HTML escape and is used for putting special characters into HTML. In this case it's an ampersand.  There's a big list at https://mateam.net/html-escape-characters/

Some examples of Advanced Copy created using HTML - Header Only

<div style="background-color:#006400; color:#ffffff; margin-block-start: 0; margin-block-end: 0">

<h5 style="font-size:1.6em;text-align:center;padding:5px;width:100%">PLEASE CHOOSE YOUR EVENT FESTIVAL TICKETS</h5>

</div>

The heading text goes between <h5> and </h5>.

Some examples of Advanced Copy created using HTML - Header and Two Paragraphs

<div style="background-color:#006400; color:#ffffff; margin-block-start: 0; margin-block-end: 0">

<h5 style="font-size:1.6em;text-align:center;padding:5px;width:100%">NEED TO STAY? <br>CAMPING IS AVAILABLE FOR SEASON TICKET HOLDERS ONLY</h5>

<p style="max-width: 90vw; color:#ffffff; padding: 5px">Choose your site from the below options. Fees are per site not per person. You will be asked to add your campers on the following page.</p>

<p style="max-width: 90vw; color:#ffffff; padding: 5px"><i>If you do not require camping, scroll to the bottom of the page and click next</i>.</p>

</div>

Note the <br> in the heading which is a line break.

The paragraphs go inside the div but not inside the h5. You don't need line breaks inside <p> and </p>, just start another paragraph.

Note that paragraphs inside the ticket selector copy need the "max-width: 90vw" style as well, or they will be wider than the screen on a phone.

If you require any further assistance, please get in touch via support@iwannaticket.com.au for additional information.