Introduction to HTML

Today we began looking into HTML code and the basics of writing it. I have slight experience with it from writing blog posts as well as editing the source code from websites during my free time, so I’m very excited to start this chapter in my education.

We began with looking into the very basics of web structure, to learn what a domain name was as well as a TLD (Top Level Domain.) and the importance of using lowercase lettering in both domain names as well as the HTML code.

As previously mentioned we began with looking into the foundations of HTML tags as well as The Hierarchy of information; eg. how to structure the code, and what is wrong and right in terms of the structure of the code.

We were taught about the anatomy of a tag as well as the element of the code to change a text and section it, using HTML code. Another thing we were taught that was in the Hierarchy of information is the correct usage of what to put in the head content as well as the body. The head content of HTML consists of information that isn’t content for the viewers of the webpage, rather the information that will show up in search results searching for a website or its contents, like keywords of the contents of the website. Whilst the body consists of elements that we want to show the viewers. We mainly worked with the body in today’s class as well as its content to structure a text on a webpage. Which is what we did in our first task.

Our first task was to use the Baskerville text, that we’ve used in previous classes, make a website with it, and change its contents using HTML in either Atom.io or Visual studio code to make it look visually more appealing and more structured.

Here is my submission of the Baskerville text that I made using HTML in class. I had a lot of fun making it since it’s something I’ve been very excited to work with.

Homework

From there on we were taught CSS and HTML combined in class. From adding a navigation bar to implementing a content table, images as well as SVF’s into the document and editing them.

I didn’t write my progress during our classes but I did remember to save the different documents we were working on, seeing my progress between each class to learn.

In each class, I was taught something new, and during my free time, I chose to research more about how to edit a document using HTML adding new features, such as a button to take me back to the top of the page, using different selectors to identify the code to a certain point of the document, such as ID and class to navigate better.

There isn’t much more to add to this blog post without involving CSS, but I’ll post my progress here between the classes to show my progress and what I was taught as well taught myself.

Here are my files for the Baskerville exercise on Github

First edition of the website

Not the final, but how it was left.

The code is accessible in the link previously provided. I tried to check if it was accessible but it seems like something changed in the progress. The CSS doesn’t want to connect properly to the HTML file through GitHub on the online website but it works fine running it from visual studio code.

That was my Baskerville exercise, at the time I’m updating this blog post since I felt like this doesn’t justify the beauty of HTML. I gave up on the Baskerville exercise we were given since I felt like it was limiting me with the code that we received and what we did during class.

When we were given our two Other projects that included coding with HTML I jumped headfirst into that since it was a fresh start with a blank canvas. With these projects, I could carefully plan out how I wanted my website to look and how to build it without limitations.

When making the website from crocodile and my website for the designer Wolfgang Weingart I studied HTML in my free time to be able to reach the expectations of my own limited ability to create a website.

It gave me a deeper understanding of how I can build using HTML, including adding CSS to HTML.

A snippet of code that was taken from one of the websites I made. 

I also with the help of the internet and other creators figured out how to make a collapsible button where I could put my sources for a web essay as well as a button that would take me back to the top. See the image below.

Feel free to look at my other projects to see how I used what we were taught during class and in my free time what I made, seeing my progress.

Crocodile project

Thank you for reading.