Making a Website: Part 1

Basic Expectations

For this, we are expecting that you have installed a specific code editor or are using the pre-installed text editor on your device. Please create a text file called index.html and we are going to be using it for the following code. If you need help with this there is an article currently being written on recommended editors and how to use them. Make sure that your editor is NOT set to rich text. This won’t be an issue if you are using a specific code editor but the default text apps on your device may be automatically set to rich text. This is one of the advantages of using an editor like Visual Studio Code. (Read the article here for info about various editors)

Structure

This is the structure of the page and helps the browser to understand how it is supposed to interpret the page.

Formatting

To start with we are going to specify that this is an HTML5 document. You can simply do this by entering:

<!DOCTYPE html>

The <html> Tag

Add an <html> tag to specify the html and a closing tag to say when it finishes. You can make it into a closing tag by adding a / before the tag name like this:

<!DOCTYPE html>
	<html>
	</html>

Heads and Bodies

Just like humans, your code needs a head and a body. They are specified in more tags, <head> and <body>, which also need to be closed like the <html> tags. Add some of them to your code:

<!DOCTYPE html>
	<html>
		<head>
		</head>
		<body>
		</body>
	</html>

Content

Now, we have got a kind of structure for our page so far but now we want some content like titles and text. Everything in HTML is a tag. You can tell this because it will have < > around it. For instance, the <title> tag is clearly a tag as it has the < > symbols around it. But you need to close of all of your tags too so you copy that and add a / in front of the first < symbol. So the <title> tag’s closing tag is </title>.

Title

Now, we are going to want to use this tag in our next addition to the code to give our page, guess what, a title! This particular tag goes in the head section:

<!DOCTYPE html>
	<html>
		<head>
			<title></title>
		</head>
		<body>
		</body>
	</html>

Now between those we can add some text which will control what the title of the page is. Replace ‘Your Title’ with the title you want:

<!DOCTYPE html>
	<html>
		<head>
			<title>Your Title</title>	
		</head>
		<body>
		</body>
	</html>

Heading

Now we are going to add some bits that you can see on the actual page. For the moment we aren’t going to worry about fonts or colors but that will come in a different article later on. Let’s add a heading to our page, to tell viewers what this is about. This will be similar to the <title> tag and needs to have an opening and closing tag. Heading tags can come in different forms. These <h1>, <h2>, <h3>, <h4>, <h5> and <h6> tags are all heading tags but we are going to focus on the first one, <h1> today. Replace ‘Your Heading’ in the middle of the tags with the heading you want:

<!DOCTYPE html>
	<html>
		<head>
			<title>Your Title</title>	
		</head>
		<body>
			<h1>Your Heading</h1>
		</body>
	</html>

Paragraph

The paragraph tag works in the same way as the title and heading tags. You need to replace ‘Your Text’ with the main paragraph or text of your page.

<!DOCTYPE html>
	<html>
		<head>
			<title>Your Title</title>	
		</head>
		<body>
			<h1>Your Heading</h1>
			<p>Your Text</p>
		</body>
	</html>

Testing

Now we have written the code we need to see how it works! You need to save the file as index.html somewhere on your device. Then, load the place where it is saved and open the file. A .html file should use your default browser to open it automatically but if it wants to open it somewhere else then right-click, select open with and choose the browser you want it to open with. It should open up and if everything has gone well it should look something like this (but with the text you put and it should say the title you put at the top of the page or on the tabs menu for mobile):

basic formatting
basic formatting