Cyderize.org

Cyderize.org is my personal website, started in 2011 which I use to write about computers, the Internet, electronics, music, and whatever else I feel like. I'm a computer nerd and musician, residing in Melbourne, Australia.

Read the About page to find out more.

Web Development Tutorial Part 2 – HTML

Posted September 14th, 2014 by

So having completed Part 1 of this series of web development tutorials, we can now begin to get some actual coding done, remembering of course that since we’re just using HTML and not CSS, we won’t be able to create a particularly attractive webpage, but we’ll at least have a foundation upon which we can further our knowledge.

We’ll start by examining the most basic HTML document usable practically. It looks like this:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML document</title>
    </head>
    <body>
        <p>This is a paragraph.</p>
    </body>
</html>

Paste that into a file with the extension ‘.html’, and open it up in your favourite web browser – you can use a program like Notepad++ to do this (just switch the language to HTML). Note that when you do this, your browser is directly interpreting the file itself – there’s no request to a server or anything, so this is purely client-side.

The first thing you’ll notice is the complete and utter absence of content aside from a single line of rather mundane text. And yet, we have a whole bunch of junk in the HTML. Well in fact, this isn’t actually the absolute minimum HTML document, but the absolute minimum happens to be even less useful than this almost blank page, so we’ll consider this one bare essentials page.

Now, let’s examine what this document contains.

The document type

<!DOCTYPE html>

This ‘doctype’ declaration tells the browser that this is an HTML5 document. You should always include this line, because otherwise some browser may interpret your code using ‘quirks mode’, which is at best extremely annoying and unpleasant. Other doctypes are possible, but you’ll never need any other than this one if you’re working with modern HTML.

Elements

The rest of the document is a series of elements which form up the structure of our page. An element is represented by a ‘tag’ in HTML. An element in HTML is represented as follows:

<element>content</element>

<element> is the opening tag for ‘element’, and </element> is the closing tag for ‘element’. Contained between these tags, is ‘content’, which can be text, or other elements.

Looking at our document again:


<html>
...
</html>

The first element (after the doctype) in our document is the ‘html’ element. It is the root element of the document, as it’s the first one to open and the last one to close. It contains all of the other tags in the document. We need it here because it tells the browser that we have HTML between these tags – it’ll probably be fine without it, but ‘probably’ isn’t good enough for us, so we’ll keep it in.

Next up:


<head>
    <meta charset="utf-8">
    <title>HTML Document</title>
</head>

Inside the ‘html’ element, we find two child elements, the first of which is the ‘head’ element. The ‘head’ element tells the browser various things about our document, like its character-set and title. It’s also the place to link in CSS and JavaScript. The first tag in here in our case is the ‘meta’ tag, which has a charset attribute that tells the browser to use UTF-8 text decoding for the document. You should write your documents in UTF-8 encoding to ensure you don’t run into unsupported characters. If you have no idea what this is, you can ignore it for now – it’s not going to explode.

Void tags

Notice that the ‘meta’ tag opens, but never closes. This is because it cannot contain content, much like line breaks or horizontal line tags. These are known as void or singleton tags, and they don’t need closing tags. For example:

<br>

This is the line-break element – it can never contain content, so we don’t need to close it.

Attributes

You can also see an attribute which is applied to the ‘meta’ element – the bit that says char=”utf-8″. Attributes can be applied to elements, and are placed within the opening tags of the element. They consist of attribute-value pairs as in the following:

<element someattribute="somevalue" otherattribute="othervalue"></element>

The second tag in the ‘head’ element is the ‘title’ tag, which in this case, is ‘HTML Document’. You can change this to whatever you please, and bask in the glory of seeing the text on your web browser’s tab change accordingly.

And now:


<body>
...
</body>

Wwe close the ‘head’ tag, and open the ‘body’ element. This element represents the body of our document – the part of the document that actually gets rendered to the screen. Inside here, we see a ‘p’ (meaning paragraph) element, containing the text we saw on our page. We can change what’s in the body tag to make things more interesting:


<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph that comes under that heading.</p>
    <h2>This is a sub-heading</h2>
    <p>This is a paragraph that comes under that heading.</p>
</body>

This introduces the heading elements ‘h1’ and ‘h2’. There are heading elements all the way up to ‘h6’, which represent the headings and subheading in a document. ‘h1’ is the top level heading, ‘h2’ is the heading for a subsection, ‘h3’ is the heading of a subsection within that subsection, etc.

So now, you’re somewhat familiar with the concept of elements and attributes. Look at the first code example again. Notice that whenever an element has contained other elements, we indented the child tags. This is good practice, since it allows us to visually match up tags and not have to fumble through a hard-to-read document. Remember that it makes no sense to close a parent tag without first closing the child tags. When coding, it is often a good idea to type both the starting and the ending tags, then place the desired elements inside – this avoids accidentally leaving tags off, which can lead to some strange (and undesirable) results.

You can see that the nesting of elements creates a tree-like structure. This is the basis of the Document Object Model (DOM), which we’ll discuss in more detail when using JavaScript.

We’ve learned the key concepts regarding HTML elements, but we still don’t know many of the tags. I’m approaching the 1000 word count mark, however, so we’ll rectify that issue in Part 3.

Comments: none yet | Filed under: tutorials | Tagged: , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *