Part I: The Basics

Take note as our in-house coding expert, Geoff Dusome, shares the building blocks of web development.

Welcome to the first in a three-part series, where together, we will eventually create a simple webpage. Feel free to open your favorite code or text editor and follow along. If you are following along at home, be sure to save the file as a .html file and open it in your browser of choice.

To start, know the basis of everything you see on the web is made up of markup, specifically the Hypertext Markup Language (HTML). HTML defines the structure of what you see, as well as the hierarchy of content on a webpage.

Declare Your Version

At TBX, we use the newest iteration of HTML, HTML5. Every HTML page or file starts with a DOCTYPE declaration, where we tell browsers which version of HTML we want to use. In our case, this will simply be HTML. This is the standard for working with HTML5.

HTML<!DOCTYPE html>

Create a Structure

Next, let’s begin by surrounding everything with an HTML element and creating the structure of our document. Think of the structure of an HTML document as a person. Every person has a head and a body (just so we’re clear, the body contains everything below the head), and every HTML document has a head element and a body element.

HTML<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Give It A Title

Now, we need to give our page a title. The title acts like a person’s name (this is stored in the brain, which is located in the head!)

HTML<!DOCTYPE html>

<html>

<head>

<title>Hello World!</title>

</head>

<body>

</body>

</html>

Finally, you should have something that resembles the image below. Our title of ‘Hello World’ should be displayed to everyone in the browser tab.

Stay tuned! In the next lesson, I’ll go through the structure of the body element and how to write semantic code.