Introduction: Learn How to Build Your Own Webpage Using HTML!
In this instruction set, I will outline how to create the basic skeleton of a webpage using HTML in a step-by-step fashion. The purpose of these instructions is to teach you the foundations of HTML coding, which you will later be able to use to create more advanced and complex programs. If you are looking to delve deeper into the world of coding, but have no prior knowledge in programming, then this guide was made for you! This guide aims to make sure you’ll achieve a good understanding of the basics, as they will be the foundation upon which you will build more advanced skills.
To be able to follow through this instruction set, there is no prerequisite in technical knowledge. All that is needed is a text editor, such as Notepad++ or Brackets. In these instructions, I will be using Brackets. You can get Brackets for free at http://brackets.io/.
This guide should take about 10 minutes to complete.
Step 1: Create a File
The first step will be to create a file. This is like a digital version of a document, and it will hold all of your code.
To do so, go to File at the top left of the window, and then select New (Picture 1).
Step 2: Save the File
Next, you will want to save your file. This is a VERY important step that you should always follow when creating new files: the last thing we want is for your webpage to get lost after you’ve worked so hard and long on it.
To do this go to File at the top left of the window again, but this time select Save as… (Picture 2a). A new window should pop up (Picture 2b), prompting you where you want to save your file. Choose a location you’ll easily be able to find later: for example, you could create a new folder on your desktop.
Once you’ve chosen the location, now it’s time to name your file: remember, you can only use:
- Lowercase or uppercase letters;
Do not use any other characters, such as spaces, punctuation or symbols, as it might mess up file locations later on.
Once you choose a name, do not forget to add .html at the end of it (Picture 2c). This specifies that your document is an HTML document, which will allow the browser to view it properly.
Now you can click on Save at the bottom right (Picture 2d), and you’re ready to code!
Step 3: Write the Document Type Declaration
The first line of code you will want to write is the document type declaration (Picture 3). This always goes at the top of the document, and it should always be the first thing you write:
This line of code tells the browser what language was used to write the document, so that it may then read it properly to display it on the page.
Note: You might have noticed that I put angle brackets “<>” at the beginning and end of the line of code. A line of code enclosed in angle brackets is considered an element, and all HTML code is made up of elements.
Step 4: Write the HTML Tags
After you’ve declared your document type, you will need to write the <html> tags (Picture 4).
You will write two, one at the beginning and one at the end of the document, as shown in the picture. In the second tag, you will add a slash “/” right before the “html” inside the angle brackets. This specifies that the html element ended.
All of our code will be written inside this tag.
Note: with only a few exceptions (such as the DOCTYPE tag we wrote in Step 3) almost all tags go in pairs, with the second having a slash right after the first open angle bracket, as shown below:
Step 5: Write the Head Tags
Inside the html tag we just wrote, write the beginning and ending tags for the head tag (Picture 5).
This tag contains “metadata,” or data about data: in other words, it tells what type of data there is in the document. Its contents are hidden behind the scenes of the webpage, but they are nonetheless very important.
Note: whenever you write a tag inside another tag, considering indenting it. This won’t change the effects of the code, but it will make it much easier to read and therefore edit. You can indent a line of code by pressing TAB.
Step 6: Write the Body Tags
After the </head> tag, but before the </html> tag, write the body tags (Picture 6). These tags contain all of the parts you can see for your webpage.
Congratulations, you are halfway done! You just finished building the basic shape of a webpage. Make sure you didn’t forget any “/”, close angle brackets, or closing tags along the way.
Step 7: Write the Meta Tag
Next, go back inside the head tags and write the meta tag. This tag gives additional information regarding your webpage, but in this case we will use it to determine the character set your page will use:
In other words, this specifies which character dictionary you are planning to use in your webpage to the browser.
In our webpage, we'll use the UTF-8 charset.
Note: this tag has no end tag. You won’t need to write </meta> after that.
Step 8: Write the Title Tag
Next, right below the meta tag, write the title tags (Picture 8a). Inside these tags, you’ll write the name of your webpage, which will appear in the name of the tab in your browser (Picture 8b).
You can see a preview of your page by clicking the live preview button (the lightning icon) at the top right of the window (Picture 8c).
Note: to see a proper live preview of your page, you will have to save your document first. You can save it by pressing CTRL + S or by clicking File > Save.
Step 9: Add a Heading
Now, let’s add something to the webpage, as it is currently nothing other than a white background.
Go back inside the body tags, and add the <h1> tags (Picture 9). If you’d rather, you could also write either h2, h3, h4, h5, or h6 instead of h1. Each will give you a different size for your heading font.
Inside your chosen heading tag, write a heading for your webpage.
Step 10: Add a Paragraph
You are almost there! Now, right below the heading tags, write the <p> tags (Picture 10). These are the paragraph tags, and they contain the text of the page, which usually end up containing the meat of your webpage.
Step 11: Congratulations!
Congratulations, you just finished coding your very own webpage using the HTML language!
Using the live preview tool, your page should look something like the one shown in Picture 11. If you don’t see any text on the page, try saving your file in the Brackets window. If you still don’t see any text, check your code for missing angle brackets, missing end tags (tags that have a “/”), and misspelled words.
By completing this guide, you have learned how to build the skeleton of an HTML webpage. These lines of code should always be how you start writing a webpage when coding in HTML. Using these steps, you should now be able to understand and properly use more complex guides, which will allow you to create more advanced webpages.
Participated in the
First Time Author Contest