A Clickable HTML Document | Video & Audio | GitHub Free Hosting

Creating your 1st clickable webpage, which is capable of playing video and audio, is easier than you might think! As I demonstrate to you in the video below… simply change the file type extension for a newly created text file to .html, then edit the document, download some free media, link to the media… and just like that, you have your 1st cool clickable website.

There are various websites that allow you to download a large variety of online media, but the one I like the most is Pixabay, where you can download the following:

The HTML (accompanied with a small amount of CSS) document as demonstrated in the following video, contains a few simple hyperlinks, each which links to a media file that you’ve placed inside the same folder as your HTML document, AKA your root directory.


HTML & CSS Code Used To Create Clickable Links

The screenshot below is taken from the above video. For the sake of getting started you can pretty much ignore the metadata tags at the top, because they're typically generated for you automatically whenever you create a new document in your chosen editor, such as Visual Studio Code (VS Code) which is the one I've just recently started to use... and it's seriously awesome!

Page Title & Header Tags Explained

The title, H1 and H2 header tags, each simply contain what you can think of as a kind of advertising message, which let the reader know what the page is about, but importantly, they also tell search engines such as Google, what the main theme of the page is via its title, and how to digest the page structure via the header tags.

A simple clickable html video and audio media document

Paragraph & Link Tags Explained

You write your text within each of the < p > tags, and the style = ”” attribute contains various values such as the text colour, font size and alignment. The magic happens inside the < a > link tags... target = “_blank” causes the browser to open the link in a new tab, but it's the href = "" attribute that contains the URL's address, which in this case is simply the name of the file, because each file resides inside the root directory.