More HTML Basics

HTML Basics - continued

Lesson 6 - Paragraphs and headings

Nice and straightforward addition of another from of tag  <h1> to create a heading above your text. I've taken a moment to look at the HTML version of my blog as I do this, and adding in a heading on here adds a similar tag. There are also other tags such as <br />, and one for adding a text style: <span style="font-family: Arial, Helvetica, sans-serif;">text</span>

I note that when I write a tag in my blog, the HTML converter turns it into something else, presumably this is set so that it doesn't get confused with an HTML instruction. I remember seeing some forum posts on my Masters course appear like gibberish - perhaps there was some confusion with people adding things in as HTML?

Lesson 7 - More about headings!

Time to add different styles of headings - simply changing between <h1>, <h2>, etc lets you use different styles of headings. Seems simple but I'm wondering where these styles are defined and if you can change them? A question for later perhaps...

I'm finding it particularly useful to stick by the rule of laying my code out for easy analysis, especially as I made a slip of the finger and cut some of one of my tags out, and suddenly things didn't display correctly.

Lesson 8 - Using every heading

Apparently there are six levels of headings - easy enough to expand to using all of them...

Lesson 9 - Mid-lesson breather

Just a quick bit of expansion work to consolidate adding extra paragraphs into a block of text. It's almost feeling simple...

Lesson 10 - Adding images

I've added images to my own blogs before using the standard editing software - time to look under the hood. Come to think of it, this is also looking like some of the very basic coding that I've used for pasting images into forums in the past! Like with the break tag, this one doesn't work in pairs - you type in <img src="url" /> instead. That works differently to the forum code I've used before. Note to self - make sure you type the web address carefully, or better yet copy and paste, then check it!

The coding for Blogger works the same way, although I note that there the software has automatically added in additional information such as borders, and specifying the size of the image.

Lesson 11 - Click that image!

I've added hyperlinks into blog posts before, but not linked them to images, nor looked at the coding for it. This is where the 'hypertext' part comes in. Seems it's as simple as using the tags <a> and <a/>, although in a similar fashion to the tag for images, you need an instruction of where to go. Instead of src="url" we use <a href="url" > - inside the first of the tags.

Lesson 12 - Images and links

Using these tags either side of an image enables the image itself as a hypertext link. Of course you can just add some plain old text in place of the image, and it will still act as hypertext link.

And just like that, I'm ready to tackle building a web page all of my own! Possibly save that for another day...

Big thanks to Leng Lee who programmed that course :)