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!

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.

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:

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.

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.

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

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".

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;"

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.

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.

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:

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.

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

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

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.

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.

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

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

Example of the code below:

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.

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.

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

Example of how the table can look.

The code below is for the example table pictured above: