How to Create a Simple Web Page with HTML Basics
Learning Basic HTML
Before you learn how to create a simple web page with HTML basics, it’s crucial that you learn some things about HTML in general. In doing so, not only will you be able to create the web page faster, but you will actually understand what you are doing throughout the entire process. You will also be able to easily create other web pages in the future, if you so choose. Head on over to this page and see if you understand the basic concepts. It’s also a good idea to learn some CSS. HTML will lay the foundation for your web page, but CSS is really what makes it look like a web page. To get an overview of how CSS works, check out The Basics of CSS. After you have the basics down, you’re ready to get started.
Learning Structure - Start a HTML Document
One thing that you need before you can learn how to create a simple web page with HTML basics is an HTML editor. You can use Windows Notepad or Mac Text Editor to do the editing for now; but in the future, you may want to consider using an actual HTML editor.
Now that you have a good understanding for HTML and some basic CSS, it’s time to learn web page structure. All a web page is, is groups of HTML and CSS grouped within tags, placed in sections. All of these sections eventually come together to make a web page.
Every HTML web page starts with an HTML tag, very easy to remember. An HTML tag looks like this:
So, the first thing that will go in note pad is:
You must also close the page with an HTML tag. The closing tag looks like this:
Skip several lines and type in the close HTML tag:
Everything else, throughout the rest of this tutorial, will go in between these two HTML tags.
Learning Structure - Insert Head Section
The HTML in the above step lets web browsers, servers, and the Internet know that the code is an HTML document (a web page). Now, it’s time to start putting some information within that web page. The first section that you should add, is a head section. Head tags are also very easy to remember. Here is an example:
<------ this opens the head section <------ this closes the head sectionInsert both of the above head tags in between the HTML tags, within your document. It should look something like this:
You’re not quite done with the head section yet. Now you need to add some information into it. One thing to note about the head section - you will not see this on your web page. The head section contains meta info and other details about your web page that browsers and search engines will use. Anything contained within the head tags will not display on your web page itself. There is normally a lot of information that people add to the head section. But for this tutorial, we will just add a simple title:
Note the way everything is structured and note the use of the Title tags.
Learning Structure - Insert Body Section
Unlike the head section, the body section is the actual info contained on the web page itself. The body section should go below the head section, within the HTML tags. Here is what the structure should look like:
<--- Starts a HTML Page (web page) <--- Starts the head sectionInsert some information into the body section.
Bright Hub FTW
this is just a simple web page html tutorial...
The above code will give you a h1 title of Bright Hub and a paragraph.
Final Result
Here is the final result of our tutorial:
Bright Hub FTW
this is just a simple web page html tutorial...
If you are using Windows Notepad, click File > Save As. Under save as type: make sure that you select All files. Type in a filename for your web page, and make sure to end it with .html.
Open up your favorite web browser. Navigate the path File > Open. Find your HTML document and open it. Here is what you should get:
Learn more HTML
Want to learn more about HTML and CSS? Be sure to check out these other beginner tutorials:
