Starting to use HTML (class exercise)

In class recently our teacher went through a lot of stuff with html, introducing us to quite a bit of terminology and html information and how websites are made etc. Our teacher gave us a folder containing an 'index' html document, shown below. 

(Original 'index' document) - visual on browser

Above is the main html document 'index' which displays this content shown above, and this site sites on a 16 column grid and the html that displays this content is shown below. the '<div class="one-third">' allows the content to split up the 16 column grid into three sections and because there are three lots of text and most of the code is the same expect the actual text it allows the text to sit next to one another on the same row because they all contain the same class.

Later we were asked to edit the 'index' document so that this would display on screen:

• 4 columns 
• 1 column
• 2 columns
• 3 columns
• 1 column
• 1 column

I then went into the text wrangler to edit this and complete this task and what i had do was, copy the following:

I copied the html and then i changed the class to "four columns" for the 1st one and then added a <hr/> tag which gives an underline at the bottom of the text in order for the content to look need and structured.

I then did this process by copying the html and changing the class according to the task and adding a <hr/> at the end within the </div> tag and so on. This later led to the 'index' page looking like this below.

(Edited 'index' document) - visual on browser

As you can see all of the content fits within the designated columns and they all have an underline underneath the content, which makes the text look more structured and neater. This exercise in class was very useful and allowed me to work more with html and get refreshed on how to use it and work with tags etc. However i have not done any CSS yet but will come round to it soon in class and mess around with it outside of class as well to get used to all the coding.