How to Make a Basic Website

This guide will show you how to create a simple HTML5 local website, meaning that the website will only be accessible from your machine (not online), as that would require a domain name (www.example.com), and website hosting. For this guide all you will need is a working computer with a text-editor and at least 1MB of disk space (depending on content, images, pages, etc).

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. Using this language, you will be creating HTML files (different pages), and saving them in the format of [name].html (excluding the brackets). The editor, or the application used to create these files is entirely up to you, there are several HTML editors out there that will assist you with the HTML language, otherwise you can use a non-HTML editor, just a simple text editor, such as Notepad in Windows. Some third party editors include: Notepad++, Brackets, and Sublime Text.

I would recommend creating a folder for this project, which can be located anywhere (as long as you remember where it is), in my example, I have named the folder website. Next, you will want to create and save (File > Save) the first page commonly known as the homepage with the name of index.html. This is simply following the HTML standard of naming your homepage index, with all other future pages being named what they are about (i.e. about.html, contact.html, etc).

Caution! - Avoid overwriting any existing files on your computer as they will then be lost and unrecoverable.

Every HTML page/file starts with the same layout (pictured above), which simply tells the browser that it is a HTML/website file. So begin by copying this layout into your index.html file and then we can begin by adding content.

Now that you have created the first file, you will need to know how to access this file within a web browser, so you can consistently check the results. To do this, simply double click the file that you have made (index.html) and choose to open it with your favorite web browser if asked. Otherwise you can copy the complete path into the address bar located on the top of the browser (the same place you would type www.google.com). For example, in my case:

C:/Users/Chad/Documents/website/index.html

Once you would like to view the current status of the website (can be done anytime), simply save the file (File > Save) and then you can refresh the page in the browser to see the updated results.

An HTML tag is simply anything inside the carrots (< >) for example, in the starter code, you will notice (which is the beginning tag) followed by a (which is the end tag), so everything inside of those two tags is considered the body. Most tags have a beginning and end tag, formatted the same ( and It is important to note that all future code will be put within the tag.

Now let's add a big, easy to read, bold header to our homepage by using the h1 tag, known as the header tag with the 1 being the largest size, you can experiment by changing the 1 to any number within 1-6. Add the following code immediately after the open tag, placing this above all content (at the top of the page):

<h1>Welcome to my Site!</h1>

Next, let's add some content into paragraphs underneath our header by using the p tag, known as the paragraph tag, feel free to create as many paragraphs as you'd like and include anything you'd like within them. The format is as follows:

<p>Paragraph content goes here</p>

If at any point your spacing is off or would simply like an extra line feed (blank line), you can use br, or break tag to insert one, this tag does not require an end tag:

<br>

We will now cover some additional HTML tags that you can use, however, this is not a complete list as there are hundreds to use, all providing different functionality.

To add images, simply place the image in the same directory as your index.html file and take note of the complete name (filename + file extension) and implement it within the body portion of your page using the img (image) tag, noting that this is an exception to the beginning and end tag rule:

<img src="image.png">

To add either an ordered list (ordered by numbers) or an un-ordered list, you will use either the ol tag (for ordered) or the ul (for un-ordered) along with the li tag for each item you include within either list. For example:

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

To create the second page, we are going to create a second file within the same folder as the index.html, this time naming it true to it's content. In my example, I am going to make a contact page which will display my contact information. For this, I will create another file called contact.html and save it (File > Save). Then I am going to add the basic HTML layout located in step 2, changing the title of the page to Contact Me.

Using what was discussed in steps 5 & 6, we can add content to this second page, in my case a contact page.

<h1>Contact Me</h1>
<h3>Name: John Smith
<h4>Email: <a href="mailto:johns@example.com">johns@example.com</a>
<h4>Address: 123 Apple St. New York, NY 10118

To link the two pages together (create clickable links on each page), we will introduce the a tag (anchor) along with an attribute to that tag. For example is the anchor tag, but we need to tell it more information, so we will use , making href the attribute, and is where we will type the relative location of the second page. If you followed my example and created a contact.html page, then on your index.html page we will add the hyperlink that will direct users to the contact page.

<a href="">a href="contact.html"Contact Me/a</a>

I will then go to the contact.html page and create a back link, so users would be able to return to the homepage after being on the contact page.

<a href=""><a href="index.html>Home</a></a>

Lastly, I will add a footer to my website, centered (using the center tag), and at the bottom of the page, located after all content within the body tags, right before the end body tag ():

<center><h5>Copyright 2017 - My Name</h5></center>

Now you have create a two-page website! While this is just a guide to get you started there is much more that can be added to your website to add functionality and change it's appearance. You can also create additional pages and continue to link them across all of your pages. The possibilities are endless, play around with it, and see what you can create!