HTML Guide

HTML provides a wealth of design and layout possibilities! We've assembled a few tips to get you started on your HTML journey. There are great free and paid resources for those looking to further their HTML training, but we hope this guide can be a launchpad to get you started! Have some cool ideas and need help with advanced HTML stuff? Be sure to connect with your on-campus resources and professionals, like a web designer, who will be most familiar with HTML coding!


Basics And WYSIWYG

The great thing about HTML basics are that we have built them directly into our WYSIWYG (What You See Is What You Get). The WYSIWYG is what we call, in tech terms, our Rich-Text Editor. The WYSIWYG allows us to use our Involve code to quickly allow you to make changes to your Involve site!


Most of the basics for HTML are already provided to you and your students through the rich-text editor.

User-uploaded Image

Our WYSIWYG allows you to quickly create headers, bold, underline, bullet point, and so much more. This article will show you how to expand upon the code that gets built for you through the WYSIWYG.


For example, have you ever thought about changing the color of your header? With the information below, you can do that and so much more!



Tags are hidden keywords within a web page that define how your web browser must format and display the content. Tags can be seen at the beginning of a HTML code and at the end. To see a full list of some suggested tags, check the Quick Reference Guide at the bottom of the article. Some examples of tags are:

  • <a>

  • <img>

  • <h3>

  • <p>

  • <table>

When using a tag, most will require you to both open and close the tag. For example, when using the header 1 tag, the text lives in the middle of the opening tag and the closing tab. <h1>This is the Header Text</h1>. You'll notice that the words "This is the Header Text" are sandwiched the opening and closing tag.


Styles & Classes

Below you will see some code that says style="" and class="". These are ways that we indicate the changes we want to make to the code. Both styles and classes live inside of tags that are listed above.

  • Styles - typically relate to colors or how something looks physically on the page

  • Class - this piece of code points directly to Involve and the code we use throughout our system

Inside of the quotes ("") of a style or class, you will be able to add elements like:

  • color

  • background-color

  • display

  • font-size

  • btn

  • and more!

An example of a completed style could look like this: style="color:purple;". The same thing applies to class, which could look like this: class="btn".


Combining Styles & Classes

Inside of the style or class code, you can combine multiple different types of styles and classes. In order to do this, you must include all of the code inside of the quotes for the class or style. For example, if you wanted to change the color of the font and the background color, the code would look like this: style="background-color:purple; color:white;"


Text Formatting Options

Font Size

You can change the size of font quickly by adding style="font-size:160%;" into the <p> area. This will allow you to quickly scale to the size of the font that you are looking for.

User-uploaded Image
<p style="font-size:100%;">This is 100%.</p> <p style="font-size:200%;">This is 200%.</p>


Font Color

You can also quickly change the color of the font you are wanting to type by adding style="color:blue;" to the code. You can replace the color by typing in a name of a color or by typing in the HEX code for the color. Two examples can be shown below: one with names and the other with HEX codes.

User-uploaded Image

Using Color Names

<h1 style="color:blue;">This is a paragraph</h1> <p style="color:red;">This is a paragraph.</p>
User-uploaded Image

Using HEX Code for the Color

<h1 style="color:#3B00FF;">This is a paragraph</h1> <p style="color:#ED2D2F;">This is a paragraph.</p>


Background Color Blocking

<a href="" style="display:block;height:80px;line-height:80px;background-color:#e3b;color:#fff;text-align:center;">Progress</a>
User-uploaded Image

Links & Images

Making A Link

As we know with our students, links are super important to get students exactly where they need to be. To add a link to a page with HTML, you can insert <a href="url">link text</a>. This is what that code will look like:


User-uploaded Image

The URL can be replaced by the actual URL of the page you are directing the person to, and the "link text" is what you want to display so that students can see what they need to click on.


Don't forget, you can also add classes and styles into links to jazz up the links for students. A great example of this are buttons, which you can read more about below!



Images can be added in directly with the WYSIWYG in Involve, but it's great to know what the code is as well in case you want to make adjustments

<img src="LINK TO IMAGE"> will place an image directly onto your page when you add it to the HTML editor.


Image Shapes

You can use classes to add some spark to the photos on your pages.

User-uploaded Image

You can round the entire photo, round the edges, or make it a thumbnail with an outline around it.

  • Rounded Photos <img class="img-circle" src="LINK TO IMAGE">

  • Rounded Edge Photos <img class="img-rounded" src="LINK TO IMAGE">

  • Thumbnail Photos <img class="img-thumbnail" src="LINK TO IMAGE">

Images & Accessibility

It's important when we think about adding images to websites that we remember that an image, in and of itself, is not accessible to all students. You can add code to an image so that a screen reader can tell a student exactly what there is a picture of on the screen.


By adding alt="Girl in a jacket" into the image's code, the screen reader will tell the student there is an image, and describe exactly what the image displays.



Quick Colors

User-uploaded Image
<a href="LINK" class="btn btn-default">Default</a> <a href="LINK" class="btn btn-primary">Primary</a> <a href="LINK" class="btn btn-success">Success</a> <a href="LINK" class="btn btn-info">Info</a> <a href="LINK" class="btn btn-warning">Warning</a> <a href="LINK" class="btn btn-danger">Danger</a> <a href="LINK" class="btn btn-link">Link</a>


Customizing Colors

You can customize colors in a button by adding style="" into the code. Inside of the quotes, you can add what you are looking to customize.

  • background-color:purple; changes the background of the button

  • color:white; changes the color of the font

User-uploaded Image

Here's an example of the code that created the button displayed above:

<a href="LINK" class="btn" style="background-color:purple; color:white;">Button name</a>


Customizing Size

You can change the size of a button by adjusting the "class" of the button.

  • class="btn btn-lg" makes a large button

  • class="btn" is the default button size

  • class="btn btn-sm" makes a small button

  • class="btn btn-xs" makes an extra-small button

User-uploaded Image

Example of the code below:

<a href="LINK" class="btn btn-lg" style="background-color:purple; color:white;">Large Button</a> <a href="LINK" class="btn" style="background-color:purple; color:white;">Default Button</a> <a href="LINK" class="btn btn-sm" style="background-color:purple; color:white;">Small Button</a> <a href="LINK" class="btn btn-xs" style="background-color:purple; color:white;">X-Small Button</a>



Basic Table

Building a Table via HTML happens in a couple of different stages. The first stage is to build the shell of the code where the columns and rows will live. <table style="width: 100%;" class="table"> The tag <table> will begin to generate the table, style with a width of 100% means that it will expand across the width of the page, and finally, the class of pulls in our Involve table coding to help make sure that it fits aesthetically with the site. Inside of the table, <tbody> groups the content of the table together.


<table style="width: 100%;" class="table"> <tbody> </tbody> </table>


Each row inside of a table is indicated by <tr> and each column inside of the row is indicated by <td>. Putting the rows and columns together look like the following code.


<table style="width: 100%;" class="table"> <tbody> <tr> <td>Happiness Expert</td> <td>Favorite Animal</td> <td>Favorite Color</td> </tr> <tr> <td>Cody</td> <td>Penguin</td> <td>Blue</td> </tr> <tr> <td>Travis</td> <td>Dogs</td> <td>Green</td> </tr> <tr> <td>Alex</td> <td>Starfish</td> <td>Orange</td> </tr> </tbody> </table>
User-uploaded Image


Example Table

Below is a sample table with 4 columns and 4 rows that contains both text and buttons.


User-uploaded Image

Example of how the table can look.


User-uploaded Image

The code below is for the example table pictured above:

<table style="width: 100%;" class="table"> <tbody> <tr> <td style="font-size: 19px;">Name</td> <td><a href="LINK" class="btn" style="color: #fff;">🔗</a></td> <td style="font-size: 19px;">TIME</td> <td><a href="LINK" class="btn" style="background-color: #aabb3f;color: #fff;">Button</a></td> </tr> <tr> <td style="font-size: 19px;">Name</td> <td><a href="LINK" class="btn" style="color: #fff;">🔗</a></td> <td style="font-size: 19px;">TIME</td> <td><a href="LINK" class="btn" style="background-color: #aabb3f;color: #fff;">Button</a></td> </tr> <tr> <td style="font-size: 19px;">Name</td> <td><a href="LINK" class="btn" style="color: #fff;">🔗</a></td> <td style="font-size: 19px;">TIME</td> <td><a href="LINK" class="btn" style="background-color: #aabb3f;color: #fff;">Button</a></td> </tr> <tr> <td style="font-size: 19px;">Name</td> <td><a href="LINK" class="btn" style="color: #fff;">🔗</a></td> <td style="font-size: 19px;">TIME</td> <td><a href="LINK" class="btn" style="background-color: #aabb3f;color: #fff;">Button</a></td> </tr> </tbody> </table>


Quick Reference Guide


Definition of What It Means


Creates a hyperlink


Creates alternative text on an image that screen readers read aloud


Place a background color on Text or Button


Allows you to quickly create something using CSS (ex. a clickable button)


Creates a button

=class"btn btn-default"

Creates a white button with black font with a black border and shadow

=class"btn btn-primary"

Creates a blue button with white font

=class"btn btn-success"

Creates a green button with white font

=class"btn btn-info"

Creates a blue button with white font

=class"btn btn-warning"

Creates an orange button with white font

=class"btn btn-danger"

Creates a red button with white font

=class"btn btn-link"

Creates a white button with blank font and no border

=class"btn lg"

Creates a large button

=class"btn sm"

Creates a small button

=class"btn xs"

Creates an extra-small button


Rounds the border on an image to create a circle


Rounds the corners on an image


Places a border and drop shadow on the image


Change the color of Text


Changes the size of the Text - This can be a percentage or a specific pixel height (ex. 19 px)


Creates a link on text


Creates a paragraph


Allows you to add an image to your page using an existing image on the internet via the URL direct link


Allows you to change the style of something (ex. the color of font)


Creates a table


Creates a columns inside of a row


Creates a row inside of the table

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request



Please sign in to leave a comment.