HTML Practise

A 60 Year Old Learns to Code

Learning to Code

I’m actually doing this in html because I’ve signed up to Codecademy to learn how to code, and this is me practising. It’s likely to be a very boring post, full of typos. So don’t feel obliged to read it. I should say the post title and header image were added in the usual, non coding, way.

This is using a div element to create a division, new paragraph? but I’m, not sure why it’s so far to the left. Or, rather, why the above paragraph is centred. But I’ll just keep going and see how things work out. Update: Apparently the div element divides bits/sections/elements of your code, but isn’t visible on the published page. You need to use the p (paragraph) element for that, or the br (line break) element. Next I have to add an attribute to a div element.

A Bit About Attributes

According to Codecademy, attributes are ‘content added to the opening tag of an element.’ In this instance I’ve put the attribute ‘Attributes’ inside the opening tag of the div element. At the moment I have little idea what it achieves, something to do with identifying content, but I’m sure I’ll find out soon enough. I’ve now come to line breaks and, as demonstrated, emphasis.
Not sure, yet, how line breaks differ from divs. Actually, I guess they are breaks in the same text block.

Useful for poetry.
Or to separate paragraphs.
But I’m pretty sure there’s an element for paragraphs.

Lists: Ordered, Unordered

Now I’ve learnt how to make two different sorts of list: unordered and ordered. Unordered lists look like this:

  • Pocket Bird Guide
  • Binoculars
  • Waterproofs

Ordered lists look like this:

  1. May Challenge
  2. Election
  3. Nature reserve
  4. And are created by placing the letters ul and ol, respectively, in angle brackets at either end of your list. Each list element also has to be enclosed in a list tag, which is the letters li in angle brackets. The end tag also takes a forward slash.

Now for an Image

A man standing on the rocks at Rockcliffe with a shopping bag

Yay, I did it!

And Now for a Video, eek!

That doesn’t seem to have quite worked. Maybe because it’s the wrong type of file. Who knows?

Creating Links

There are probably several types of links, but I’ve been shown how to do two: external links to other web pages, and internal, to other pages on this site. I created an external link, above, to Codecademy. This is as you’d expect: inside the opening attribute tag – rendered as an a inside angle brackets – you put the code for hyperlink reference followed by the url inside double quotation marks. If you want the link to open in a new window you add an underscore followed by the words ‘target = ‘blank’, with ‘blank’ inside double quotation marks. Then, outside the opening tag you put the text you want for the link. Above, I’ve used ‘Codecademy’.

For internal links you need to put a full stop and a forward slash before the name of the linked page.

Coding Practice: How to Make a Table

Title Author Date(s) Read Notes
Mexican Gothic Sylvia Moreno-Garcia 29.04.2021 Science, logic, and Magic Realism.
Birders Mark Cocker 18-23.04.2021 ‘To them it’s not funny!’
The Stone Sky N.K. Jemisin 03-14.05.2021 The Earth fights back

Shall I Continue