HTML Codes – Angelica's Site

HTML Quickie

The codes you find here are to use as-is and will tell you where to place them! I am assuming that you have a basic understanding of the structure of an HTML web page. If you need help, you can reference this site!

I am using JSFiddle to display codes so you can see them in working condition. You can click on Edit in JSFiddle in order to play around with the code if you’d like!

Background Changer

This makes it so you can display a gallery of background images into a div. Example below:

To do this you need to put this CSS into the HEAD of your document:

<style type="text/css">
/* you can edit virtually ALL of the values to suit your needs */
div#example {
  width: 90%;
  height: 150px;
  margin: 0 auto;
  border-radius: 20px;
  border: 3px solid #ededed;
  padding-top: 20px;
  text-align: center;
  background: #eeeeee;
  text-shadow: 0px 0px 8px #802e8e;
  text-align: center;
  font-family: 'Tahoma', sans-serif;
  font-size: 14px;
  letter-spacing: -.5px;
  word-spacing: 2px;
  text-transform: uppercase;
  font-weight: bold;
  color: #000000;
}

p {
  text-align: center;
}
</style>

Then add this to your BODY where you want it to show:

<div id="example">This is a little example of how the background will look!</div>

<p>
  <a href="#" onclick="bgChange1()"><img src="https://angelicas.site/files/graphics/bgs/cupcakes.gif" width="50px;"></a> 
  <a href="#" onclick="bgChange2()"><img src="https://angelicas.site/files/graphics/bgs/space.jpg" width="50px;"></a>
</p>

Notice that the links have the function onclick=”bgChange#” you have to change those numbers for each new background you want to display, but then they also correlate with this javascript code:

<script>
function bgChange1() {
  document.getElementById("example").style.backgroundImage = "url('https://angelicas.site/files/graphics/bgs/cupcakes.gif')";
}

function bgChange2() {
  document.getElementById("example").style.backgroundImage = "url('https://angelicas.site/files/graphics/bgs/space.jpg')";
}
</script>

Then, again, you will notice that you create a new chunk of code for each background image that correlates to your function onclick=bgChange#

BTW, you can place the javascript in the HEAD or BODY of your document. I would recommend keeping it close to your HTML code so you can easily reference eachother.

One more time, as a reminder, change each number to match the thumbnail-type links in the HTML!

Background Changer Alternative

In this example, the background changer script changes the WHOLE BODY background versus just a div (in the previous example.) Check it out here:

To create your own switcher, you add this to the HEAD of your document:

<style type="text/css">
div.empty{
border: 0px;
width: 100%;
text-align:center;
}

div.changer{
width: 80%;
margin: 0 auto;
}

div.sample{
width: 70px;
height: 70px;
border-radius: 10px;
text-align:center;
background-size: contain !important;
float: left;
margin: 5px;
}

div.sample:hover, div.sample2:hover{
box-shadow: 0px 0px 20px LightGray;
}

div.sample2{
width: 70px;
height: 70px;
border-radius: 10px;
text-align:center;
background-size: contain !important;
margin: 0 auto;
}

.changer::after{
  clear:left !important;
}
</style>

Then, place this at the bottom of the HEAD of your document:

<script>
function bgChange(bg) {
  document.body.style.background = bg;
}
</script>

That’s all you have to do regarding the javascript! You don’t have to go back and forth because the magic basically happens in the HTML:

<div class="changer">

<div onClick="bgChange(this.style.background)" class="sample" style="background:purple;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:pink;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:yellow;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:green;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:tomato;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:gainsboro;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:sandybrown;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:DarkTurquoise;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:Chartreuse;"></div>

<div onClick="bgChange(this.style.background)" class="sample" style="background:Magenta;"></div>

</div>

The important thing to change in the HTML is style=”background: COLOR OR URL(‘LINKTOFILE’);”

Also, another cool feature, if you’d prefer the thumbnails to change when a use scrolls over the thumbnail square, you could change onClick to onMouseover

Browser Directional Buttons

These are just links you add if you want to add some little special effects to your site:

Back Link

<a onclick="history.go(-1); return false;">Backwards</a>

Forward Link

<a onclick="history.go(1); return false;">Forwards</a>

Refresh Link

<a href="javascript:window.location.reload(true)">Reload</a>

HTML Includes

This trick is really neat for calling in content from an external source and placing it into your page. So, it comes in handy for menus and information or stuff you want to consistently display! I use this code trick on some of my free layouts like this one. The menu at the top “Your Site Name” “Link Name” is actually called in from a plain text html document that you can see here. For a really long time you could only get this effect by using PHP includes (and some other coding tools).

In order to use this, you must first add this Javascript code to the head of your document

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /* Loop through a collection of all HTML elements: */
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /* Make an HTTP request using the attribute value as the file name: */
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /* Remove the attribute, and call this function once more: */
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /* Exit the function: */
      return;
    }
  }
}
</script>

then at the VERY BOTTOM of your page, where you find </body> you will add this just before the closing body tag

<script>
includeHTML();
</script>

Those two codes are what tell the browser what to do so it will call the plain text html page you create wherever you place this tag

<div w3-include-html="content.html"></div>

Notice the “w3-include-html” attribute. That is the portion of the code that tells your browser to connect with the javascript and document it calls in (content.html). You can save your plain text html page as .htm or .html — I tend to use .htm for my stuff. I’m apparently too lazy to type that last letter L (lol).

I really hope you give this trick a try! You can find a better, more detailed explanation from the actual source: here.

Random Image Script

To add a really neat random image link (like for button rotations):

You can add this javascript code to the BODY of your document where you would like the rotations to show up.

<script type="text/javascript">
var total_images = 4;
var random_number = Math.floor((Math.random()*total_images));
var random_img = new Array();
random_img[0] = '<a href="page1.html"><img alt="" src="https://angelicas.site/images/88x31-static2.png"></a>';
random_img[1] = '<a href="page2.html"><img alt="" src="https://angelicas.site/images/88x31-static.png"></a>';
random_img[2] = '<a href="page3.html"><img alt="" src="https://angelicas.site/images/88x31-anim2.gif"></a>';
random_img[3] = '<a href="page3.html"><img alt="" src="https://angelicas.site/images/88x31-static3.png"></a>';
document.write(random_img[random_number]);
</script>

Pay special attention to var total_images = #; and this line (which you can use to create each new image button) random_img[#]

random_img[#] = '<a href="page3.html"><img alt="" src="https://angelicas.site/images/88x31-static3.png"></a>'; document.write(random_img[random_number]);

These numbers must be the same with the first one, being ZERO, so in the example above there are FOUR image links altogether (0, 1, 2, 3). Adjust the numbers accordingly!

Smooth Scroll Script

This one creates a smooth scroll transition on your page like this:

You simply add this to the HEAD of your document

<style type="text/css">
html {
  scroll-behavior: smooth;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>