There are many ways to create a website online. You can either use content management systems like WordPress or use framework like Bootstrap. However, it is a good idea to learn the basics before you started using online website builder tools. Well, creating a webpage is no more a difficult task and we will explain how to create a HTML webpage in this article.
Creating HTML Webpage – What Do You Need?
In order to create a webpage on your computer, you just need the followings:
- A computer – probably you are reading this content using one
- A text editor – we will use Notepad in this example, you can use TextEdit on Mac.
- A web browser – like Microsoft Edge in Windows and Safari in macOS. However, we recommend to use Google Chrome for cross platform compatibility.
If you really want to publish your site to the web then you need few more additional things:
- An internet connection
- A web hosting provider – to upload and store your pages
- Your own domain name or a free domain from hosting company
Here we explain about creating and viewing a website with few pages on your local computer. Learn more about owning your website in the real web.
Basic Structure of a HTML Webpage
The webpage contains marked up HTML content which is then interpreted by browsers to display it in appropriate format. Below is the skeleton of a simple webpage which normally starts with <HTML> tag. Any text entered between <!– and –> is considered as a comment and will not display on the browser.
<HTML> <!-- Starting of HTML document --> <HEAD><!-- Header section of your document contains title, other things like META tags and script--> <TITLE><!-- This is the title shown in the browser title bar --> </TITLE> </HEAD> <BODY> <!-- Here is where all your content goes! --> </BODY> </HTML>
HTML tags are not case sensitive, both uppercase and lowercase letters will result in same output. Most of the HTML tags have three parts, the opening tag, the content and the closing tag.
Adding More Content and Formatting
How about adding some heading, horizontal rule and paragraph to the basic skeleton?
<HTML> <HEAD> <TITLE> This is my first webpage </TITLE> </HEAD> <BODY> <H1>Days in a Week are</H1><!-- This is the Heading of Your Page --> <P ALIGN=CENTER> <!-- This is a paragraph opening--> Monday<BR> <!-- <BR> is for line break --> Tuesday<BR> Wednesday<BR> Thursday<BR> Friday<BR> Saturday<BR> Sunday<BR> </P> <!-- Paragraph closing --> <HR SIZE=4 WIDTH="100%"> <!-- <HR> is for horizontal rule --> </BODY> </HTML>
Though most of the HTML tags have open and closing, not all tags should have closing. In the above example the following tags don’t have closing tags:
- <BR> – Line Break and
- <HR> – Horizontal Rule
Similarly, an image tag <IMG> also does not have a closing portion.
Saving Your HTML Webpage
Follow the below instructions in order to create your first HTML webpage.
- First copy the above sample HTML code.
- Open Notepad in Windows or TextEdit on macOS. We will further explain with Notepad, you can follow the similar process in macOS.
- Paste the copied code in a Notepad.
- Save the file as “myfirstwebpage.html” (or give any name you want but don’t forget to save the file with .html extension).
- Now, the file icon will show the symbol of your default browser.
- Open the file with any of the web browser to see the formatted display as below.
That’s all!!! Now, you have successfully created your first HTML webpage.
Developing a Site by Linking More Pages
A website is a collection of individual webpages linked together. Now you know how to create a single HTML page. Let us add two more pages to the first page to make it like a website.
- Create two more text files and name them as “mysecondpage.html” and “mythirdpage.html” respectively.
- Create a new folder and keep all the three files inside that folder as shown below:
The anchor tag <a> in HTML is used to link webpages together as shown below:
<HTML> <HEAD> <TITLE> This is my first webpage </TITLE> </HEAD> <BODY> <H1>Days in a Week are</H1><!-- This is the Heading of Your Page --> <P ALIGN=CENTER> <!-- This is a Paragraph --> Monday<BR> <!-- <BR> is for line break --> Tuesday<BR> Wednesday<BR> Thursday<BR> Friday<BR> Saturday<BR> Sunday<BR> <HR SIZE=4 WIDTH="100%"> <!-- <HR> is for horizontal rule --> <a href="contact.html">This is My Second Page</a> <!-- Linking Second Page --> <a href="sitemap.html">This is My Third Page</a> <!-- Linking Third Page --> <HR SIZE=4 WIDTH="100%"> <!-- <HR> is for horizontal rule! --> </BODY> </HTML>
How it Will Look?
The result on a browser will be shown like below with the links to your second and third page. You can click on the links to go to the corresponding page.
You can add as many as pages and link them to create a complete website.
Using Proper Text Editor
If you want to learn HTML, we recommend using a proper text editor like Brackets. It will help you to create closing tags automatically, highlight missing tags and allow instant live preview with Google Chrome.
In addition, Brackets will add correct straight quotes on your code. This will help you to avoid unexpected results on your learning experience. At any case, make sure to avoid rich text editors like Microsoft Word and Apple Pages for learning HTML.