Whether you’ve ever dreamed of being a computer programmer or have ever used a website, which let’s face it, is almost all of us, information technology has become the backbone of business. Though programming may seem a bit scary at first, my goal is to teach you the fundamental basics of web design so that after this tutorial, you’ll be able make your very own webpage. With that out of the way, let’s get to it!

Supplies

A Macintosh or Windows PC (though Linux distros can also be used, I am skipping them for now as this is a beginner’s introduction).
Your choice of text editor (Notepad on Windows, TextEdit on Mac) or your choice of IDE. In my experience, I’ve found Visual Studio Code to work best for myself so I’d also recommend checking it out here: https://code.visualstudio.com/ not to mention it works on all OS platforms.

Step 1: Tags and a Bit of History

Once you’ve decided on your choice of text editor or IDE, let’s begin with the basics.

Believe it or not, HTML or HyperText Markup Language has been around for nearly 30 years now and with every year has come more and more improvements to the language. Now, you might be asking, how does a browser interpret what to put on the screen? This is done in a few parts:

HTML document formatting is easy. You have two sections known as the head and the body. The head of a website contains code that isn’t visible to the user. This is used for linking stylesheets and declaring other necessary bits needed for the site to display properly. Following the head, the body is as it sounds, the body of the website. This is where you get to speak your voice and show the audience your fantastic HTML skills! Now it isn’t as easy as just typing text into the body and having it display exactly the way you want, but it is almost that easy in a sense with the use of things we call tags.

Here are some of the basic HTML tags:

title – which is used for telling the browser what the title of the page is. This is also what you see when you look at the tab of a webpage.
h1, h2, h3, h4 – which are used for different header sizes with h1 being the largest and h4 being the smallest. I will cover more on this in the next section.
p – paragraph, used for writing paragraphs of text. Like paragraphs on a paper.
br – break, which inserts a break in line with the text.
a – used for creating links to other pages, like a clickable link.
img – used for linking an image to the webpage.
ul, ol, li – unordered lists, ordered lists, and list items.
– used for making inline comments in the code that won’t be seen by the end user.

And here are some CSS tags (visual):

color – used to assign a specific color to a specific element or set on the webpage.
font-size – used to change the font size on the page.
background-color – used to change the background color of certain element or the entire page.

I have also attached a small cheat-sheet to help you if you feel a bit lost, but not to worry, you’ll get the hang of it in no time! In addition, www.w3schools.com is also a fantastic resource for any of your programming questions. They have definitely saved me a time or too.

Essentially how the browser reads the file is easy. It goes line by line and processes function by function. The < and > characters are used to declare a tag such as <p> and <,/, and > are used to close the tag such as </p>. This is important otherwise the browser doesn’t not where to stop. In between the <p> and </p> tags, is where you enter whatever you’d like!

Step 2: Editor Setup

Now that we’ve covered a bit about the basic elements of an HTML website, let's dive in and try it our for ourselves. For this next step I’ll be using Visual Studio Code to program the website, but the layout of the code will be the same if you’re more comfortable with just using Notepad or TextEdit.

Within Notepad:

With Notepad, the program launches with a blank file which makes it super easy to get started. This will also allow us to jump a few steps compared to using VS Code. Let’s get started by saving the file in the correct format.
Click File > Save
Enter in a name for your file followed by .html and under Save as type, select all files. Click save.

Within VS Code:

The best way for you to take advantage of all of the IDE’s features is to start by creating the file and telling the IDE what type of file it is. This can be done as follows:
Click File > New File
A blank file opens
Next, you’ll want to start by saving the file, though blank, as this will allow for the IDE to be able to understand what type of file the end product is going to be. When saving be sure to include the .html extension at the end of the file name. Click save.

Step 3: Blueprints

After you’ve successfully saved your filename.html file, let’s begin by creating the framework for our webpage. Remember from above what key parts of the file we need to declare before we can start with creating the rest of the HTML page. Pro-tip: when starting the framework for the site, the !DOCTYPE HTML tag tells the browser that the file it’s reading is an html file. This can come in handy if you have different types of code in the same file and want to switch between interpreters. For the scope of this instructable, we won’t be touching too much on this but if after this Instructable you are curious to check out more about HTML development, feel free to give it a shot. I will insert the !DOCTYPE HTML tag at the top of the file for best practice. Remember to open and close with < and >.

Here’s where saving the file before you start programming comes in handy, now that the IDE knows that it’s working with a HTML file, it’ll use intellisense to finish the expression and offer suggestions so that you don’t accidently forget to close a tag. Note that for those of you that are using Notepad, intellisense is not available as in the IDE. We begin by entering the head and body tags as follows: (see second image).

Now that the document setup has been completed, we’re able to get off to the races and have some fun!

Step 4: Code; Code; Code;

We can begin by inserting a title for our newly created file. Enter whatever you’d like. Remember that this is the name that appears in the browser tab. Let’s also begin by entering a heading for our site. Recall from before how we do this. Did I hear h1/2/3/4? That’s correct!

Before we continue, I find it helpful to open our file in a browser window so that we can see in real time how our changes are reflecting in the browser. You can do this by clicking File > Save to save the file, navigating to the folder in which the HTML file is saved, for me this is the desktop, and use the browser of your choice to open the file and would you look at that, there’s your webpage! Note: I personally use Safari as my browser of choice on my computer, however, in web development, Firefox is the gold standard browser for testing as it works with nearly every web scripting language.

As you can see, the title is showing on the tab, as well as seeing our h1 heading. I prefer having both the browser window of the file opened alongside the IDE as when you make a change in the IDE and save, the changes are instant in the browser.

Feel free to try adding tags and playing around with the different things you can do with HTML. As you can see below, I have added a few paragraphs, breaks, external hyperlink to Instructables.com, an image, (which can either be linked from an external source or within the same directory as where the .HTML file is stored), an example of an unordered list, an ordered list, and lastly a comment.

If you want to try adding some color, and arrangement options, you can enter a style tag in the head of the file. This is the point at which this shifts from HTML to CSS but for visual sake, I will enter a few lines so you can see how this works. Essentially how CSS works is it allows you to control HTML elements within functions by using brackets { } to enter your code into for a specific HTML element.

Step 5: Final Thoughts

And there you have it; you’ve successfully created your first webpage! Because this is a beginner’s guide, I want to make your first experience with HTML an enjoyable one. The best way to learn in my experience is to dive in and try things hands on, see what you can do with your code and also see how you can break your code. This builds integrity and helps you to better understand how and why the code works the way it does. Remember that www.W3Schools.com is a great resource for questions and they even offer a virtual sandbox within the browser to try your code. Hopefully you’ve learned something and happy coding!