I've got a little list
OK so now things are getting more serious. There's a definite guidance appearing to use indentations so that my code remains readable, I guess now it's going to get a lot more complicated.
Creating lists is a new thing, and you can order them (i.e. number) by specifying an ordered list with the <ol></ol> tags. Nice and straightforward, with a little repetition to bed it in. So making an unordered list just needs me to use ul instead of ol. I can then nest lists inside each other by adding in a new type of list between the tags for the parent list.
I've got a new style - comments, please
Now we're going back to some CSS for adding comments - apparently this will make learning things easier later on. Simply adding '<!--' in front and '-->' afterwards makes a comment that will only show in the code, so you can make notes for yourself or other programmers. You can also insert a <p style="___"> tag to change the style of a paragraph. This has to be added within the open paragraph tag, with a normal close paragraph tag after the content.
A splash of colour
Now we can use styles to add colour. While I'm familiar with using RGB and HEX codes to specify colours, I was surprised to find that there is a list of colour keywords on the World Wide Web Consortium site. You can combine colours with font sizes, separating with a semi-colon.
Oh, and make sure you use the American spellings... Now I also have the power of font.
And because you can never have too much style...
Time to go for every kind of styling there is, now we're adding background colour, alignment, strong words and emphasis. Whatever next? It's obviously easy to get carried away here, so a little sensibility will be called for. This is obviously why visual style gets such a big fuss in companies! Making text bold or emphasised is easy - just add the 'strong' or 'em' tags.
And just like that, I have completed the second part of HTML Basics!
Building a webpage actually seems pretty simple once you have some grasp of the HTML code. I never thought I'd say that!
So, going back to basics, I need to tell the computer that this will be an HTML document, specify where the HTML code starts and ends, give it a head, body and a title. Now I can add a few paragraphs, images and hyperlinks to get out of the page, and I'm done. I needed an occasional hint to remind myself of the rules, but that wasn't so bad!
That was a short post - either I'm getting good or over-confident...
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 :)
