Super Simple HTML

HTML is a simple coding language and one you can use on JetPunk to enhance your quiz formats, and much more if you get into the complicated stuff. Using HTML, you can link, italicize, underline, bold words, use ^superscript and _subscript , change text size and color, create dropdown menus, and much more. Here's simple HTML scripts and what they can do:

 Italics

------------------------------

<i>insertTextHere</i>

------------------------------

<i> starts and ends the code to italicize the text. A slash (/) indicates the code to stop italicizing the text (if you don't have a slash, all the text succeeding the initial string will be in italics).

Bold

------------------------------

<b>insertTextHere</b>

------------------------------

The bold tag is similar to the italics tag, except with a 'b' instead of the 'i'. Insert you text in the 'insertTextHere' section and you text will magically become very thick.

Underline

------------------------------

<u>insertTextHere</u>

------------------------------

Like the bold and italics tags, just with a 'u'.

Strikethrough

------------------------------

<s>insertTextHere</s>

------------------------------

Like the bold and italics tags, just with a 's' tag (note that the <del> tag works for this as well, but not on JetPunk comments).

Highlight Text

------------------------------

<mark>insertTextHere<mark>

------------------------------

You guessed it - just like the previous four.

Changing Text Color

------------------------------

<font color="#colorhex">insertTextHere</font>

------------------------------

Type the hex of the color you want in the 'colorhex' section, then add your text in the 'insertTextHere' section.

Hyperlink Text

------------------------------

<a href="link">insertTextHere</a>

------------------------------

To link you text, insert your URL you want in the 'link' section, then the text you want to display in the 'insertTextHere' section.

Changing Font Size

There are several ways to change your font size. The absolute simplest is using the tags <big> and <small>, like this:

------------------------------

<big>insertTextHere</big>

<small>insertTextHere</small>

------------------------------

However, you may want a more specific size. For this, you can use the tags <h1> through <h6>:

------------------------------

<h1>insertTextHere</h1>

<h6>insertTextHere</h6>

------------------------------

However, you may want your text even more specific. You can change the pixel size as shown here:

------------------------------

<style>

  }

  .randomClass {

    font-size: #px;

  }

</style>

<p class="randomClass">insertTextHere</p>

------------------------------

This may be a lot, but it's relatively simple. To get the size you want, replace the hashtags (#) before 'px' with any value you want (value must be a natural number, so decimals will not work). Then, to change the text, change the 'insertTextHere' section. For this to work, the two sections with the words 'randomClass' must be the same, as it's the 'class', or category, that will tell the code what text it needs to alter.

You can add more classes to add more text if needed, or you can just use the same string again.

Making a border

You can add a border around text by using this code:

------------------------------

<p style="border:#px #colorhex bordertype">insertTextHere</p>

-----------------------------

To customize the border of your text, you can change the thickness, the color hex, and the type of border (solid, double, a ridge).

In case you didn't know, I'm completely new to coding, meaning I don't have much knowledge on merging strings or tags to create new ones. Combining the most simple tags (like the first 7 listed above) is extremely easy to do. Instead of using one tag like this:

<i>insertTextHere</i>

You simply add a new tag, like this:

<b><i>insertTextHere</i></b>

For the rest of them, generally adding the tags next to the actual text works, such as:

<a href="jetpunk.com"><i>insertTextHere</i></a>

Here are a few extra HTML strings that you can play around with. Most of them are not very useful (by themselves of course) but, come on, who doesn't like fun?

Dropdown Menu

Dropdown menus are fun (wow, really?) to use and pair with other tags:

------------------------------

<label for="label">dropdownTitle:</label>

<select>

<option value="value1">option1</option>

<option value="value2">option2</option>

<option value="value3">option3</option>

<option value="value4">option4</option>

</select>

------------------------------

Ok, to be honest, I don't know how to use other tags with the dropdown menu. I'm lazy. Try for yourself :)

Here is the code in action for the first section.

They you go! My little guide on HTML. If you know any other useful/interesting HTML tricks, I would love to know!

This is my first actual blog, so if you have any suggestions or feedback I would gladly take some :)