Hey friends and visitors! It’s Millie… welcome back to my blog! Time for another Weekly Blog Challenge post! This week is week 9, which is all about coding. Luckily I have some experience with this! I am actually pretty excited for this week. 

As you can see, my focus method of coding for this blog post is HTML, but one of this week’s requirements was also to do an hour of code on a website called Hour of Code. I chose to do this one activity called Rookie Collage, which is a basic way of coding a small picture animation using different drawings and phrases. It was quite entertaining actually, and I’m glad that I found a coding activity where that involved designing with art! Definitely my preferred method of code! Check out the website if you’d like to try some yourself. Coding is a huge part of how we make our devices function, and being able to understand the code behind web browser, computer and app design is important and a good skill to at least be familiar with. These little fun games are just a taste of the coding world that is open to being explored!

As I mentioned, I’ve done some coding, specifically Hypertext Markup Language, or HTML coding. Last year at a different school, I took a Digital Literacy course which taught basic HTML. If you’re not too familiar with it, or coding itself, HTML is mainly used for making websites and other web-related things. I believe it is one of the easiest forms of code to learn and one of the most useful! Every website has HTML code behind it to create it. There are a series of tags and text sequences that you can learn to do different things in HTML. The computer, iPad, phone, or whatever device you are using reads these tags and sequences and translates them into what we see when we visit a website— it tells the device what colour things should be, the different text sizes, what images go where, if videos are embedded, and many other commands to create a visually pleasing site. 

There are hundreds of different HTML sequences to use, so every site is customized to its coder’s desire. If you look at the code for a website, it will appear extremely confusing and be quite hard to interpret, but it’s perfect for the computer to read. We can even see the HTML of our blog posts, if you click ‘text’ beside the top of the post when you’re editing it! This will show you all of the different tags used to make your post how it is; if you put on italics, check your text. The HTML code will have tags to make whatever section of writing you’ve selected in italics.

The ‘i’ between the < and > is the first part of the tag. Between the final part of the tag, which is quite similar to the beginning except with the ‘/‘ that tells the device that this is the end of the tag, I have the word that I want to be in italics. The parts of the tag before and after the word tell my iPad and blog that I want to have the word between the two parts of the tag in italics.

I’m going to be showing you the website that I made with HTML code!

The first part of my website is the front page! I chose to do it on art, so I have a bunch of little pictures of different paintings. If you click on one of the pictures it takes you to a different tab with information about each certain piece of art. This was probably one of the most tedious parts of the website, as I had to figure out the tag for correlating links with photos, and add it in with the link I wanted for each photo.

This is what my actual HTML code for that page looks like. I have the tags for the spacing and size of the font, and the links for each photo. You can also see in the other picture that I have my code set up to have a menu bar at the top of my main page. Unlike blogs, you can’t just choose a theme; everything has to be done in code! I specifically coded my menu bar to tailor its appearance to my liking. Don’t worry, it sounds much more complicated than it is, as you can find thousands of HTML tags on Google that can make tons of different menu bars just like mine. Let the interwebs do most of the work!

The next page of my website comes up if you click on the ‘artists’ bar on the top menu. This page has a couple famous artists who inspire me to do art. For this page I linked my favourite artists and their works. I have Jamie Hewlett, who is the artist for the popular animated band Gorillaz, and Frida Kahlo, who is a Mexican artist from the early 1900’s.

They’ve both influenced my art quite significantly. I linked a video of Jamie’s, which is a bit more difficult than just pasting a link into a blog post. Again, you have to find the right tags.

The HTML for this page is very similar to the HTML for the home page; here I included the tag for inserting the video. You can see that the tag for this particular action is long because it not only has to redirect the computer to a different tab, it also has to depict the size of the video within the page and other detailed features.

The third page of my website is about my favourite animated characters. I’ve included 2-D, Steven Universe, Totoro, Sailor Moon, and Noodle. Each character cut out is a link to a different page with information about them.

Now I’ll explain a bit about how the menu is coded. The ‘topnav’ tag represents the navigation bar, or menu, that appears on the page. The other classes within the ‘topnav’ section are the links to the other pages. At the beginning of the tag, you can see the ‘div’ to signify the start of a new section. The ‘div’ with the slash (‘/‘) in front at the end of the tag tells the device that the tag and everything within it is finished.

The final page on my website is the gallery. In this section I’ve included some of my art pieces, and some other artists’ pieces that I like. There are links to each art piece that isn’t mine embedded in the website. I got the Frida painting here, and I got the Picasso here.

As you can see, HTML allows you to fully customize your website, so you can change the colour of font and background. Certain colours you can simply type out, like white, but for others, you have to find specific numbers. These are easily found online! The numbers tell the computer what grade of colour you would like, down to the very specifics.

If you would like to learn more about HTML coding and how to use basic HTML code, this video is great! It explains the basics of HTML quite well.

I hope you enjoyed my blog post on coding, and maybe even learned a bit!