Learn HTML: Part 1

HTML stands for HyperText Markup Language. It’s a type of text document, where text is ‘marked up’ by using special tags that inform a program that reads the text in how to render the text. Typically that program is a Web Browser such as Internet Explorer, FireFox, Opera or Chrome. With the growth of internet-connected devices such as cell phones, slates and embedded systems (such as TVs),  HTML is more important than ever, as it provides a near ubiquitous cross platform way of delivering content.

Despite that, because of HTML’s age, it’s pretty much taken for granted! It’s pretty hard to find basic ‘getting started’ tutorials that will teach you what it is, and how to use it, from the ground up. Well, that’s what we’re trying to fix here. Hope you enjoy it!

HTML Basics

Here’s an example of a very simple HTML document running within Internet Explorer 9 and FireFox.

image 001

image 002

Can you see what is similar between the two? First of all there’s a Title which reads ‘My First HTML Page’. In IE9 it’s just in the tab, in FireFox it’s both in the tab and in the title for the browser.

image 003

image 004

The other thing that is similar between the two is the content that appears in the main part of the browser. It reads ‘Hello World’ in both instances. This is called the body.

Now, let’s take a look at the HTML that generates this page.

<html>
    <head>
        <title>My First HTML Page</title>
    </head>
    <body>
         Hello, World!
    </body>
</html>

Remember earlier where we mentioned that HTML is a special way of marking up text so that the browser can render it. You can see this in the above listing.

Understanding the Markup

First is the Title, as you can see the text ‘My First HTML Page’ is surrounded by <title> and </title>. This is Markup, where you start a piece of content with <something> and end it with </something>, so the content that you want to be the Title is marked up using <title></title>.

Similarly the Body is marked up using <body></body>, so because the text ‘Hello, World!’ is within the <body> tags, the browser will render it within the ‘main’ area that the user reads.

You’ll see that there are a couple more tags. The first is the one that wraps the entire document with <html></html> which is just specifying that this document is an HTML document. Simple, right?

The other is a little more interesting and it’s the <head> component. This is used to contain content that is processed and rendered before the body, and is typically used for things that are independent of the body text, such as the title, and stuff you’ll learn later such as scripts and styles. As the <title> is independent of the body (it is rendered on the browser UI, not within the body of the browser), it’s held within the head.

You might also notice that the structure of HTML is nested. This means that tags can be contained within tags. You can see that the <head> is within the <html> and that the <title> is within the <head>. Tags are nested by opening them before the previous one is closed, so you can see the structure having

<html>          - Open HTML

  <head>        - Open Head

    <title>     - Open Title

   </title>     - Close Title

  </head>       - Close Head

  <body>        - Open Body

  </body>       - Close Body

</html>         - Close HTML

It’s important to understand this structure. Your HTML document will always have these tags and in this order. It’s also important to remember how tags are opened and closed. As you write more HTML, you’ll soon discover that one of the most common bugs you’ll find as to why your page doesn’t render correctly is that nesting is wrong, or tags aren’t closed etc. Documents can soon become pretty complex, so it’s good to get started on the right foot!

Creating your first page

HTML is just text, and as such you can create it with any text editor. However, there’s a great tool from Microsoft called WebMatrix that we’ll be using for the rest of this series. WebMatrix gives you a whole lot more than just creating HTML, including giving you the stack on which your web sites will run, including the web server, database and more. For now you’ll just create and run simple HTML sites, but it will ease you into the really cool stuff that comes with web site development and server side programming for web sites.

You can find WebMatrix at http://www.microsoft.com/web/webmatrix. From here you can download the ‘Web Platform Installer’, (aka WebPI) which is a one stop shop for all the tools and frameworks for professional web developers. To get started, just install WebMatrix from WebPI and when it’s installed, you can launch it. Full details on how to install WebMatrix using WebPI are available here.

When you open WebMatrix you’ll see this screen:

Select the ‘Site From Template’ link, and you’ll see the list of templates that WebMatrix supports. Templates are simple ‘web sites-in-a box’ that give you lots of useful things such as a simple (but fully functional) eCommerce site for a bakery store. It’s pretty easy to customize it for other things, but for now, let’s just focus on HTML, and you’ll use the ‘Empty’ template.

image 006

Give it a name and press ‘OK’. WebMatrix will create your empty site, and will launch the WebMatrix workbench.

On the left hand side of the screen, you’ll see a number of links for the different types of workspace that WebMatrix provides. Press the ‘Files’ link to open the Files workspace. This is where you create files such as HTML ones. Once you’ve done this, you’ll see an ‘Add file to your site’ link. This will open up a dialog that offers you lots of different file types.

image 007

Alternatively, at the top of the screen, there’s a ‘New’ button, that you can use to get the same dialog.

image 008

Either way, when you ask for a new file you’ll get this dialog:

image 009

Select the ‘HTML’ option and call it ‘FirstPage.html’. Press OK, and WebMatrix will create the HTML page for you and open it in the editor.

image 010

You’ll see that it has all the tags that we were talking about earlier, with a couple extra.

· <!DOCTYPE html> at the top of the page just tells the browser the document type, and it’s a plain, vanilla HTML file

· <meta> is used to contain information about the page. In this case it’s specifying that the character set the page is using is something called ‘utf-8’. It’s English-centric.

· Additionally you can see lang=’en’ within the <html> tag definition. This is called an attribute. Attributes are used to describe a tag. In this case the html document is being described as being an English page.

Using WebMatrix, put some text between the <title> tags, and between the <body> tags, like this:

image 011

Press the ‘Run’ button at the top of the page, and you’ll see the page running in your default browser. You’ll notice that the address of the page is http://localhost:<something>/FirstPage.html. This is because your page is actually running on a server on your machine, just like it would on the internet.

image 012

So now you have an editor that you can use to edit your HTML, as well as a server on which your HTML runs. It’s been pretty simple so far, right? In the next article, you’ll see some more markup that you can use within the body of your page to make the content more attractive!

Summary

In this article you got an introduction in HTML, what it is and how it’s used. You saw some of the common markup tags that are used, such as <html>, <title>, <head> and <body> and how a page is structured. You then downloaded Microsoft WebMatrix and saw how you can use it for creating html pages. In the next article you’ll take this to the next step, seeing how you can use more tags within the <body> that can be used to make your document more readable to your users.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!