Where would this code be applied?

This code will be applied in Accounts > Layout > Banner HTML.  Also, be sure to check the "HTML banner" checkbox. 

What are my options if I don't know HTML?

If you are not familiar with HTML but would like to use the HTML banner, we recommend using a WYSIWYG tool.  This type of tool allows you to design HTML code visually and grab the code.  We recommend using http://bestonlinehtmleditor.com/, a free online tool that does just this.  This tool allows you to edit one of the Sample codes below or create a new one from scratch. 

Clickable Scrolling Banner

HTML Banner Code (note the example below uses the same image src for each slide, after copying / pasting you need to change the image URLs accordingly)

<div class="w3-content">
 <img class="mySlides" src="https://i.imgur.com/ZtdhrUA.jpg" alt="custom_html_banner1" style="width:100%">
 <img class="mySlides" src="https://i.imgur.com/ZtdhrUA.jpg" alt="custom_html_banner2" style="width:100%">
 <img class="mySlides" src="https://i.imgur.com/ZtdhrUA.jpg" alt="custom_html_banner3" style="width:100%">
 <img class="mySlides" src="https://i.imgur.com/ZtdhrUA.jpg" alt="custom_html_banner4" style="width:100%">
 <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
 <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

HTML Footer Code

<script>
 var slideIndex = 1;
 showDivs(slideIndex);
 function plusDivs(n) {
 showDivs(slideIndex += n);
  }
 function showDivs(n) {
 var i;
 var x = document.getElementsByClassName("mySlides");
 if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length}for
 (i = 0; i < x.length; i++) {x[i].style.display = "none";}
 x[slideIndex-1].style.display = "block"; }
</script>

CSS Code

.w3-content{position:relative;margin-top:0em;}
.w3-btn,.w3-button{border:none;display:inline-block;outline:0;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} 
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-button:hover{color:#000!important;background-color:#ccc!important}

.w3-content button {
position: absolute;
top: 32%;
}

.w3-display-right {right:0}
.w3-display-left {left:0}

Scrolling Marquee Banner / Moving Text

<div align="center">
 <marquee behavior="alternate" bgcolor="#bb3434" direction="left" height:="" 
 loop="7" scrollamount="1" scrolldelay="2" width="100%">
 <span style="font-size: 20px;color:#FFFFFF">
 Latest news! Latest news! Latest news! Latest news!</span></marquee>
</div>

Image with Text and Text Links

<div class="vc_row element-row row vc_custom_1478727859541">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="fw-section hb-fw-599b22a654ae9 without-border no-overlay light-style"
style="background-color:#000000;
 background-image:url(https://www.litmos.com/wp-content/uploads/2017/04/learning-automation-lms-training.jpg);
 background-size:cover;
 padding-top:40px;
 padding-bottom:100px;">
<div class="row fw-content-wrap">
<div class="col-12 nbm">
<div id="learning-automated-div" style="text-align: center; font-size: 48px;
 line-height: 52px; padding: 100px 5px 10px 5px;">
<span style="color:#FFFFFF;">WELCOME!</span></div>
<div style="text-align: center; font-size: 18px; line-height: 22px; padding: 0 5px 40px 5px;">
<span style="color:#FFFFFF;">Click below to navigate to:</span></div>
<div style="text-align: center;">
<table border="0" cellpadding="1" cellspacing="1" style="width:100%;">
 <tbody>
 <tr>
 <td><a href="https://yourcompany.litmos.com/courses/library">
 <span style="color:#FFFF00;">
 <span style="font-size:28px;">Course Library</span></span></a></td>
 <td><a href="https://yourcompany.litmos.com/achievements">
 <span style="color:#FFFF00;">
 <span style="font-size:28px;">Achievements</span></span></a></td>
 </tr>
 </tbody>
</table>
</div>
</div>
</div>
<div class="video-overlay no-overlay">$nbsp;</div></div>
</div></div></div>

Static Banner with Link

<div class="banner" style="padding:15px; text-align:center;">
<div class="banner-content">
<h1>Hello</h1>
<p>Admodum deserunt intellegam in duo, novum nonumy populo est at, qui an reque ignota constituto. Utinam aperiri equidem te vis. Cu ius velit populo impetus. Et qui ullum nusquam contentiones</p>
<a href="https://facebook.com" class="btn btn-primary">CLICK</a>
</div>
</div>

We built out a series of courses all about customizing your Litmos instance. Check out the Instance Customization Pro Learning Path in Litmos Dojo.