HTML Basics Part 2

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 my own webpage

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...

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 :)

New year, new skill

I've been toying with the idea of taking up coding for a while, but keep putting it off. I'm hoping that a New Year's resolution to do it (and blog about it) might help it happen for real, so here goes.

I came across Code Academy some time ago, and tried a few lessons but didn't stick with it. I've come back and they've made quite a few additions to the languages that they offer, including HTML, which is where I'm going to get started. The lessons are quite straightforward, introducing simple concepts with practice, but I know I won't remember it properly unless I actively capture and make sense of things as I go.

Web Fundamentals - Introduction to HTML

Lesson 1 - Why learn HTML?

HTML, like all coding languages, has its own syntax, or language rules - hopefully I'll pick up on these as I go! The first one seems to be a simple instruction that the code is actually HTML <!DOCTYPE HTML> After that you can add text as you like, and use <strong> either side to make things bold.

Lesson 2 - HTML and CSS

What does HTML mean? HyperText Markup Language.
HyperText - literally 'text with links in it', so you can embed links to other web pages in the text.
Markup Language - can turn text into images, tables, etc

CSS = Cascading Style Sheets. This is the 'skin' to HTML's 'bones', and allows you to make web pages look visually appealing. More of this later apparently.

Whenever you're writing in HTML, you need to add <html> before the first line of code, and </html> after the last line of code. Simple!

Lesson 3 - Basic terminology

The last point in Lesson 2 was introducing the concept of tags, a little like parentheses in normal language. These need to be used in pairs, to open up and close something, and if you're using multiple tags (this is is referred to as nesting) then the most recently opened one has to be closed first. This is like something I've come across a little bit in a forum editor already for making text bold, italic, adding hyperlinks and images, so I've already found some familiar ground with my existing experience.

Lesson 4 - Make the head

So I'm now creating a head using the <head> tag, and then specifying a title using the <title> tag - this creates a heading that appears at the top of the browser window rather than on the page itself. One thing that I've noticed about editing is that you have to be careful where you click on the page before you edit, as you're often automatically highlighting words or sections and can easily over-write portions by accident!

Lesson 5 - Paragraphs in the body

Now that I've learned to create a header for the web page, it's time to put some body text in. By adding in the <body> tag you can specify text that is to appear in the body of the webpage, and add the <p> tag to separate out into paragraphs.

I notice something familiar about the way the base code has been added in - they have put deliberate indents in to separate out elements. This was something that a colleague pointed out to me when he was writing some SQL code to link up two databases. Although the code would work without this, it makes it a lot easier to come back and check your coding for errors later.


I think I'll stop there for now, little and often is probably better. Part way through the lessons I stopped to follow the Code Academy team on Twitter, and found that Linda Liukas' advice on learning was especially helpful - just getting stuck in and asking questions later is the key. I know I could drive myself crazy if I ask too many questions right now...