Making a List, Checking it Twice

Jack Simpson

Head of Marketing and Communications

Lorem ipsum et cetera

For the next step of my Codecademy journey, I learnt a few more basics of HTML including lists and tables.

As ever, the course began with a quick recap of the basics learned in previous courses, including my old friend the <p> tag. Then I went on to learn how to create lists. There are two types of list – ordered and unordered. For unordered lists, you use the <ul> tag and, naturally, <ol> for organised lists. Neither tag does much on its own until you add <li> tags to specify each item of the list. Unordered lists make the items into bullet points, whereas ordered lists number the items.

To illustrate these tags in practice, I was shown how to view the source of HTML pages through my browser. From this I was also introduced to HTML comments which don’t appear on the webpage anywhere other than in the source. Using <!–I am a comment –>, you can use comments to explain your code, making it much easier to edit later.

Section two was all about the different uses of the style attribute. How to change the colour, size and alignment of text were all examined. To determine the colour of text, you can use style=”color:red;” but more commonly, colours are represented with a 6 digit code. The six digit code is hexadecimal, a positional numeral system with a base of 16. It seems quite complicated to me but it basically means that it is comprised of 16 symbols, 0-9 and A-F. The higher the number, the brighter the pixel on screen, 0 is the lowest (black) and F is the brightest. Of the six digit code, the first two digits represent red; the second two represent green and the last two represent blue. The # symbol always has to be used before the code as so; #RRGGBB.

Changing text size and alignment is quite straightforward compared to the colour. The size of text is determined with style=”font-size:12;” , changing the number to denote the font size. Alignment is controlled by style=”text-align:left;” to align the text to the left, this can also be changed to right or centre.

Other ways to change the appearance of text is with italics and bold. The <em> tag adds emphasis to words which most browsers read as italics. The <strong> tag conveys importance of the text which is usually read as bold.

   

With all my new found knowledge, it was time to create a table. As I’m finding with a log of tags, <table> doesn’t actually do anything on its own. To populate the table, rows are added with <tr> and cells are created with <td> by adding table data. Tables are separated into a head and body with <thead> and <tbody>, the reason for this is related to Cascading Style Sheets (CSS). Using the colspan attribute I was able to give the table a title across both columns. Codecademy altered the grid lines of the table for me so after adding some style to the text, my table was complete.

CSS has been mentioned often when learning about HTML as an easier or better way of doing things. I’m looking forward to learning about that soon but first I will put my HTML skills to the test with the Recipe Card project. There are four CSS courses to get through before the final web course which combines HTML, CSS and Javascript. Though I should probably learn some more Javascript before I get that far!