Using HTML (or HyperText Markup Language) is a very fun and easy way to integrate customized or interactive elements into any webpage. For anyone who is old enough to remember, HTML was an introduction to coding for many teenagers trying to spice up their MySpace page, granted I was only in middle school when MySpace was popular. Nevertheless, I learned how to use HTML to embed a music player to share all of my favorite songs on my homepage.
Anyway, the purpose of this post is to show how HTML can be used on websites to integrate interactives, custom-sized images, music players, and an endless amount of things into your personal websites.
For this demonstration, I am using the JuxtaposeJS mapping software that I explored in my previous post, Mapping in the Digital Age.
To start, go to the JuxtaposeJS website and upload two images under the “Interactive” tab, these images can either be uploaded as a URL to an online image, a standard JPEG/JPG, or linked from a Dropbox account. I personally linked my images from Dropbox.
Next, you will add any labels, such as the date of the images and credit from where you took the image. Once all of this information is added, you will press “Publish”, located below your image.
Once you press publish, the website will give you two options, a “Share Link” and an “Embed” option. For the purpose of this project, copy the string of code from the “Embed” option.
Next, go to your personal website, or wherever you want to share your newly created interactive. I am using a WordPress site with a Blocks-based theme, which makes integrating things much easier.
After starting a new blog post and giving it a title, you can either select the “+” button and select “Custom HTML” or type /HTML to give you the option to embed code. Both of which are shown below.
Next, paste your copied html code into the provided box. **Notice: the HTML box also gives you the option to change the width and height of your interactive. Many of these options are auto-generated when they are created and can be changed. Play around with it if you find that the interactive is too big or too small. I changed the height of mine to “650” and left the width as “100%”.
And then you are done! Congratulations! You have successfully integrated an HTML interactive into your website!
Overall HTML is a fun way to customize your websites and can used for an endless amount of things! For a more in-depth description of HTML or a deep dive into making your own HTML projects, check out CodeAcademy!
If this tutorial was helpful or if you think I could improve in any areas, please let me know down below! Thanks!
Here is a code that I added that is based in HTML, CSS, and JavaScript that plays a Tic-Tac-Toe game, enjoy!
-Dakota
This is such a succinct and easy-to-read how-to, while still being in-depth enough to help greatly! For real, I needed this a few weeks ago! I am sure there are countless other uses for digital history. Have you run into any other than JuxstaposeJS?
Also, just a note, when I play the tic-tac-toe game, every time I choose a square it brings me to the top of the page. Perhpas this is just on my end, but I just thought I should update you.
Thank you again, this is awesome!
Hey Tucker!
Thank you so much for the response and the kind words! I have used some other products in the past that allow for users to embed them into their own personal websites, like heat maps and other data through ARCGis and other big companies. Super useful stuff for research or publications.
I appreciate the note about the Tic-Tac-Toe game. Unfortunately, the code forces the webpage to reload to allow for the update of the game board. I’m still trying to work out the bugs, but still wanted to include it in the site. If I find a way to fix that, I plan to update the page.
-Dakota