post-20130220I'm so ridiculously excited to be introducing a whole new aspect of programming. Over the next few months I will be posting new articles on the topics of HTML, Javascript and jQuery. These are all technologies that you can use to create your very own interactive website. The really cool thing about building websites, is that you can leverage your existing knowledge of Java to create ever MORE powerful websites. But let's not get ahead of ourselves, for now we'll focus first on HTML, then we'll move into Javascript/jQuery. But enough big picture talk, let's get into our introduction to html shall we?

An Introduction to HTML…

HTML stands for HyperText Markup Language, and all this really means is that HTML is not a programming language, but rather just a set of rules for structuring your text. This means that if you type out certain words in a particular way, you can create a website! Piece of cake right? For the most part, YES, it is a piece of cake :)

A Basic HTML Example

So to start you off with your introduction to html, let's look at an HTML 101 sort of example. How about we create a webpage that has text on it that just says “Hello World!”. In order to do this, you need to understand the concept of an HTML tag.

HTML tags are the syntax that you use to build your website. All individual webpages are broken up into two main sections:

  • The header
  • The body

The HTML Header

The header section of a webpage is where you specify things like the Title of the webpage. If you look at the title of this webpage, you'll see that it says “Introduction to HTML”. This isn't an accident, I used HTML tags to accomplish this.

The HTML Body

The body of a webpage is the real “meat” of the page. This is where all of the useful content goes and where people will actually be interacting with or reading the material. Creating the body is also based on HTML tags.

HTML Tags

So let's see what these HTML tags are all about! Here's an example of a webpage that has the words “Hello World!” on it:

<html>
  <head>
    <title>
      Introduction to HTML
    </title>
  </head>
  <body>
    Hello World!
  </body>
</html>

So what you see here is the use of lots of HTML tags. These tags are the base, mandatory set of tags that need to be present in order for you to create a webpage. Here's the list of them that are used:

  • <html> – Every webpage needs to be wrapped in an ‘html' tag, this is the root element
  • <head> – Every webpage also needs a ‘head' tag, this is where you define your title (among other things)
  • <title> – You should include the ‘title' tag in order to set the title for the webpage
  • <body> – Every webpage needs a ‘body' tag, which outlines all of the actual content that will be displayed

Do you notice how each element has an opening and a closing tag? This is basically the same concept as the scope of a variable in Java (defined by the curly braces {}). In HTML we define the scope of a particular “section” or “element” with these tags. For example, what's the scope of the <html> tag? Well, the first tag in our code is <html> and the LAST tag in our code is </html>. So this means that the html tag encompasses the entire scope of this webpage!

It's important to note that wherever you have an “opening tag” you will also need to include the corresponding “closing tag”. So when you place a <head> tag, you need to remember to insert the corresponding </head> tag as well.

Also, notice how each of the tags are properly nested within each other. What I mean by this is if you inspect any of the tags in our example code (lets pick <head>), if any new tags are ‘opened', they are subsequently ‘closed' before the </head> tag appears. Like I mentioned before, this is very similar to scoping in Java. So to relate this to Java, you wouldn't create a new method inside of an existing method… you would CLOSE your first method (with a closing curly brace) before you OPENED another method (declared/created a whole new method).

Let's See the Results

If you would like to actually SEE the results of this webpage, all you need to do is create a file on your computer with a “.html” extension and copy/paste our code into it!

Here's how I usually do it:

  1. Create a file on your desktop (perhaps a regular text file)
  2. Change the extension to be “.html”, I usually just right-click the file and choose to rename it with “.html” at the end
  3. Edit the file in your favorite editor (like Notepad++ or STS)
  4. Copy/Paste in the HTML code from our example above
  5. Save and open the file!

If all goes well, when you open the file it should open in your default internet browser (I use Google Chrome), and what you'll see is a website with a title and the words “Hello World” like so:

Capture

Painless Right?

So there you have it, you've just successfully created a webpage! This is step 1 in your journey to make a fully functional and interactive website. In the next tutorial, I will talk about two things:

  1. What a ‘doctype' is and why it's important
  2. How to nicely format your webpage's contents

Because having a webpage with useful information is just half the battle, you will also need to present that information in a way that will keep your audience interested!

Free Java Beginners Course

Start learning how to code today with our free beginners course. Learn more.