Web Development 101 – Learn HTML, Right Now

The other day I got an email from a reader that made a whole lot of sense. He said,

“You keep saying that you don’t do any programming any more and that you hire developers, but doesn’t that mean that you know how to program and know how to hire people that actually know what they’re doing? You’re a great teacher, you should share some of your development knowledge even if you’re not actively doing it yourself.”

Good point. On my blog I tend to focus only on high-level strategy when I’m sure many of you would like to get a bit geeky and talk tactics. While I don’t write any code for Linton Investments I have hired (and fired) plenty of developers over the last five years and I’m still hiring more. I used to code like a maniac when I was in school as I have a degree in Computer Engineering and Computer Science from Carnegie Mellon. In fact, I’m such a geek I stayed on to get a Masters in Computer Engineering where I focused on embedded systems development, you know things like putting a realtime OS on a chip and optimizing the heck out of it so it could run on your cellphone.

On the web side of things I started writing HTML in the mid-90’s before Netscape came out, at that time NCSA Mosaic was my best friend. This is what the future looked like to me back then:

ncsa-mosaic

I started a web development company in High School and convinced companies like Coldwell Banker that they should embrace the web and built some of their first sites. At that time I was charging $1,000/hour for web development and I was one of the few web developers in my area, suffice it to say the whole thing was really new and people were just warming up to it.

So I learned HTML before Netscape, then learned CSS while they were still testing it out and started playing around with Javascript before it really worked. In University I coded around 14 hours a day, worked for IBM and coded 16 hours a day and then coded on night’s and weekends when I started Linton Investments. As my business grew I stepped away from the development-side of the business and focused on hiring great developers but this of course means evaluating their code and separating the talkers from the do-ers.

However this reader was absolutely right, why not share this with those of you who want to learn how to code yourself. It costs me thousands of dollars a month to employ developers, not everyone wants to do that and there’s nothing wrong with getting your hands dirty and coding. So I’ll be putting together a Web Development 101 series for those of you who read my blog and want to get geeky, because trust me, there’s a geek in all of us.

With that, let’s get started with the basics, HTML.

HTML - Hyper Text Markup Language

What is HTML?

HTML stands for Hyper Text Markup Language. The first thing to understand about HTML is that it is ridiculously easy to learn. If you think that you can’t pick it up you’re just plain wrong. It isn’t anything like a complicated programming language, it is simply a markup language and that means with a few tags you’ll be off to the races. With that let’s dive in and I’ll get you started building your first site in literally under five minutes.

First create a document in any free program you have. If you use a Mac (which you should because they’re awesome!) then I highly recommend TextWrangler, it is 100% free and is one of the slickest programs for writing any code HTML and beyond.

The first tag you’re going to learn is:

<!DOCTYPE html>

This essentially says to the browser, “Hey browser, what’s coming up is HTML” – easy enough right? Oh and by doing this you’re also following HTML 5 syntax so you can feel good about staying on top of the latest and greatest when you type this.

After this you can go into as much detail as you’d like but I keep it simple and just use the tag:

<html>

Next comes the head of the document, this is where eventually you’ll put things like Javascript code, links to your stylesheets, etc. but let’s not get ahead of ourselves. To keep things simple we’ll just put the title tag in here. The title tag is what shows up on the tiny tab at the top of your visitor’s browser screen and much more importantly, what shows up as the main link in search. This is still a very important element in SEO and having your target keywords in it is definitely important. Try to keep your title tag under 70 characters as this is the max that Google will display in search results. Your title tag should look something like this:

<title>This is the title of my first site – cool</title>

Holy moly, stop the train! What is that weird tag at the end with the “/” in front of the word title? Don’t panic, it’s just telling the browser where the title tag ends. Get used to this because you’ll be doing the same thing with the head tag right now. After the title tag you can let the browser know that you’re done with the head of the document by entering:

</head>

Now we’ll get to the main part of your site which is aptly called the body. You can signal this to the browser by putting in the body tag:

<body>

This is where the good stuff goes, the things that your user will see on the screen. Since this is a bare bones tutorial and I’m old school, let’s just put our friend “hello world” in there and finish this up. Like I said, I just want you to learn the basics in this tutorial and not overwhelm you. So type this under body:

Hello World!

Now tell the browser you are done with the body of the document by typing, you guessed it:

</body>

Last, but not least let the browser know you’re done writing HTML code:

</html>

The full code snipped you should have written now is:

<!DOCTYPE html>

<html>

<title>This is the title of my first site – cool</title>

</head>

<body>

Hello World!

</body>

</html>

Save this files as something like “MyFirstWebpage.html” and open it in a browser, viola! You’ve just written your first webpage, and heck you even used HTML 5. Pat yourself on the back and realize the world of web programming wasn’t as scary as you thought. In my next tutorial I’ll go deeper and talk about CSS and add in some more HTML so you can really get grooving.

Of course if you have any questions feel free to ask them in the comment section below!

(Photo Credit)

 

 

{ 0 comments… add one }

Leave a Comment