How to Build the Basics with HTML! Part 2!

Written By: Isha Jani

HTML or HyperText Markup Language is the standard coding language for creating web pages. Essentially, it designs the basic layout of the web page and tells the browser how to display each element. It defines each component such as headings, paragraphs, lists, and images which we will go into further, down below. But, before we go into the specific syntax I will teach you how to design your website using a wireframe. 

A wireframe is the ‘rough sketch’ of the website you will create. It helps you visualize where each element will be placed when it comes time to code. When creating a wireframe you will want to list everything that you will add such as headers and images, filler text can come later. Look below at a wireframe example using figma.

Common Wireframe Tools:

-Figma: Quick and easy

-Moqups: Great tool for beginners

-UXPin: Great for creating interactive prototypes 

-Mockflow: Simple and Good end to end product management

Digital tools are often used in more professional settings as they can be cleanly drafted and easily shared but you don’t have to use digital tools such as these. You can also use a simple paper and pencil to sketch out your draft as shown below. 

Once you create a wireframe you will be ready to code! When choosing an IDE or Integrated Development Environment you will want to consider which ones are compatible with your device (in this article I am using Replit).

Common IDE’s:

-Visual Studio Code

-IntelliJ IDEA

-Atom by GitHub

-NetBeans

-Eclipse

Some common syntax you will need to know are listed below. When coding in HTML you will be using tags. You will always need an opening and closing tag with the code in between. 

As you look at the following images notice: 

-Header Tag: <h1>

-Link Tag: <href>

-List Tag: <ul> <li>

-Paragraph Tag: <p>

Here is the complete code for my simple website:

Here is the preview of the website:

Additionally, you will want to download your image if you choose to include one in your website. (this will vary depending on your IDE) By uploading it as a separate file it will be allowed to display. You will also want to create a file for the second page of your website. Otherwise you will be unable to open it and it will be an unclickable link. You will want to have a file for each page so that you can navigate between the two. Write code on both of your sites!

HTML is a great tool and you’ve learned the basics. But you can go much deeper with this. Here are some additional resources to keep expanding your knowledge:

Khan Academy Intro to HTML + CSS

Code Academy HTML

In the next article, we’ll build on these HTML fundamentals by introducing CSS, the language that brings structure to life by controlling layout, colors, and overall visual design.