Simple Website Using HTML

Welcome future website creator! In this instruction set, I will show you how to build a simple website using only a pc/laptop and notepad application. As long as you follow the code I supply you, you can build a website in under 20 minutes with no prior experience. Let’s begin!

Open Notepad

*Step One will vary depending on the Operating System*

Step 1: Open Notepad (Windows)

Click on the windows button on your computer, from there type ‘Notepad’. Click on the first result.

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Change some preferences to ensure the application saves files correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".

Then open a new document to place the code.

Building the Main Structure

To create a website, you need to include specific elements called 'tags' for it to function properly. Type these tags into your notepad:

<!DOCTYPE html>. This tag essentially declares what language you are writing in.
<html>. This tag declares you are writing in HTML.

(Note: It's important to note that with almost every tag you write, you must write another tag exactly the same but with a / symbol. This is called a ‘closing’ tag. This is essential because it tells HTML when to stop using one tag and start another.)

Titling Your Website

Now that you’ve created the main structure of a website, title your page using the <head> tag. This tag is where the very important information of a website is stored. From there, write the <title> tag to name your page.

Adding Content

Now that you have the fundamental tags of a website, add the body and h1 tags to your code to put content within the website.

<body>. This tag is where you will input all the contents of the website.
<h1>. One of the many heading tags. For now just use h1.

Adding Text

Within the body tags, write the p tag. This is the tag that puts text into your website. You may also put other key elements with your p paragraph to add things like bold and italic words.

Adding Links

This part can be tricky, so pay close attention.

Within the body tag, type <a href=””>. Within the quotations of this opening tag, add the link to the website you want to use. Once you have that, type the link text (this could be anything). Finally close off the tag using </a>.

(Note: The opening tag has something called an attribute, where additional information is needed for more complex tasks)

Adding Images

Type the following text below:

Within the quotation marks of img src, enter the name of an image stored on your computer. It's important to put the right property of the image. This could be .png, .jpg, or .gif. In the height and width attributes, specify numerical values to determine the image's size on the webpage.This does NOT need a closing tag.

(Optional: If you want to use an image off the internet instead of one in your computer, right click an image and select, copy image address and paste it in img src.)

Saving the Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file anything you want as long as you add .html at the end of it. Set the encoding to UTF-8 and save as type to all All Files. When you've figured out where you want to save the file, press save.

Viewing the Website

Double press the file that you’ve saved on your computer and it will open all the code you typed on your browser.

(Optional: If you don’t want to go through the hassle of saving and viewing the file each time you change your code or maybe just want to troubleshoot try https://html.onlineviewer.net/. It’ll show how your website looks like as you put the code in)

Pat Yourself on the Back

Congratulations! You just built your very first website. Now that you have a basic understanding of HTML, you can continue to learn more intricate tasks, like coding programs or using advanced coding softwares. Remember this day as the birth of your web development journey!