Browse All Articles > HTML for the Beginner – My First Web Page
The first time you look at a web page and its source code, you are probably a little intimidated by the use of symbols and jargon that really looks foreign to you. You might not even know where to start to begin learning what it all means.
That’s where this tutorial comes in. By the time you are done with this tutorial, you will have written your first web page. I will walk you through the very basic use of the code and explain what it is used for, which will help you better understand it. This will allow you the jump start that is needed to learn this programming language and how to apply the syntax for a web page.
Web pages are simply programming code with combinations of symbols that are organized in a specific way in order to transform the appearance and functionality of a page for the benefit of the user. HTML simply stands for HyperText Markup Language. Web pages use this language as well as others, such as VBScript and Javascript, for even more flexibility to give it either a greater visual appeal or allow interaction with the user. However, for the core of the web page, all you need is some basic HTML code.
The only tool required for you to create your own HTML code is notepad or any word editor. There are a lot of great editors out there that are much better for coding & editing, such as the Crimson Editor, but for this example we will only need to use notepad.
Open notepad, select “Save As” from the File drop down menu and name it MyFirstWebPage.html. Make sure you change the .txt extension to .html when naming the file and you place in a location that you will remember easily. (I recommend you save to the desktop for easy reference.) You could also name the extension .htm, but that is a discussion for another day. For now, let’s just stick to the game plan.
Now that we have our file set up and saved, we are ready to learn and use the code! The html file you just created will now open in your default web browser if you double click the file. One problem, we haven’t told it to do anything yet, so all we get is a blank white page. Let’s change that!
The web page should consist of at least 5 instructional elements called tags. These tags are as follows:
Copy and paste that code into your MyFirstWebPage.html file. The DOCTYPE tag can vary depending on what kind of site you are building, but this tag is necessary for proper documentation. It states the version being used and instructs the browsers of what version of HTML we are using. This will keep us in accordance with the World Wide Web Consortium(W3C) standards. For now, just know that you will need to include the proper doctype tag for web pages that you intend to post online, so you might as well get into the habit now.. We won’t get into the details here on this tutorial. Let’s just use the one below. Copy & paste the following line of code over the top line of code <!DOCTYPE…> that we pasted before into the MyFirstWebPage.html file:
Now we can start the web page design by using the <HTML> tag, followed by the <HEAD> tag. They are starting tags and the </HTML> and </HEAD> are ending tags. You must always have an ending tag for every starting tag that you have with the exception of the <!DOCTYPE>, since it is only used to instruct how strictly the HTML standards will be on the web page. The purpose of the <HTML> tags is to instruct the page where the beginning and ending of the code is for the web page. Next, we have the <HEAD> tag. This tag is used for many reasons from including the <TITLE> of the web page to handling functions from other languages such as VBScript and Javascript. It also contains a lot of other useful tags for the web page such as <META> and <STYLE>. Again, we won’t need to place anything else between these tags today except for the <TITLE> tag.
Whatever you type between the two tags <TITLE> and </TITLE>, will appear in the status bar of the browser, not to be confused with the address bar. In Windows Internet Explorer(IE), it is at the very top of the browser in the blue bar that runs across the top of the page. I will use IE for the rest of the tutorial when I refer to the browser. Let’s give our web page a title. Type
We now have some text on the web page that we can look at to see what is happening. Save the MyFirstWebPage.html file. You don’t have to close the file in notepad in order to open it in your browser, so just double click on the file to open it. Viola! We have a web page with a title on the top of the browser bar, a heading that is in a larger font than the body text and the text for the body of the web page.
The <H2> tag is a preformatted style tag for heading in HTML. There are six tags in all that range from <H1> to <H6>. You can now change them in notepad, save the file, then go to the browser and refresh the browser to view how the change appears on the web page. You also noticed that the heading was centered on the page, unlike the text placed in the <p> tag. That is because of the tag <CENTER> that we used along side the <H2> tag. The <p> tag simply means that it is a paragraph. If you place another set of <p> tags and write some text between them, you will see how they will create a new paragraph on the web page with a space between the two paragraphs.
The web page is still very plain and boring. Let’s add some color to the page. Replace the first <BODY> tag with the following code:
Also, replace the <p> tag with the following code:
If you save the file and refresh the browser again, you can see how the changes above affect the web page. Congratulations! You have just completed your first web page!! It’s very basic, but you can see how just a few lines of code in the right sequence can add life to any web page in a hurry. Now that you have a basic understanding of HTML and have a web page with some sample code, you can begin to play around with these tags on your own to help you further learn how it all works.
You can also use other tags to help with formatting. Among them are <font>, <b>, <i> and <u> just to name a few that are useful to get you started. Just remember that every tag has to have an ending tag, such as the <b> tag for bolding text. It needs to have a </b> tag after the end of the text you want to bold. If you forget to add you’re ending tags, HTML will assume you want that style or format for the rest of the web page.
Another rule is that if you start with <b><i>Example Text</i></b>, the ending tags should finish in reverse order, so the last tag you used will be closed first on down to the first tag used as in the example above. So misuse of the standard coding would look something like this: <b><i>Example Text</b></i> This does not follow W3C standards and it is more difficult for someone to follow your code for troubleshooting purposes as well.
The last thing I would like to leave you with is another example of how your code should look along with another couple of examples on style. Copy & paste this code in the MyFirstWebPage.html file:
I hope this will help you to get motivated to learn more about HTML and tags and the many things you can do with HTML once you know what you are trying to accomplish. After you master the HTML and tags to build web pages, you should then try your hand at adding in VBScript and Javascript, which will provide you with even more endless hours or fun when designing web pages!
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
If you found this article helpful, please click the Yes button near the:
Was this article helpful?
label that is just below and to the right of this text. Thanks!
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
That’s where this tutorial comes in. By the time you are done with this tutorial, you will have written your first web page. I will walk you through the very basic use of the code and explain what it is used for, which will help you better understand it. This will allow you the jump start that is needed to learn this programming language and how to apply the syntax for a web page.
Web pages are simply programming code with combinations of symbols that are organized in a specific way in order to transform the appearance and functionality of a page for the benefit of the user. HTML simply stands for HyperText Markup Language. Web pages use this language as well as others, such as VBScript and Javascript, for even more flexibility to give it either a greater visual appeal or allow interaction with the user. However, for the core of the web page, all you need is some basic HTML code.
The only tool required for you to create your own HTML code is notepad or any word editor. There are a lot of great editors out there that are much better for coding & editing, such as the Crimson Editor, but for this example we will only need to use notepad.
Open notepad, select “Save As” from the File drop down menu and name it MyFirstWebPage.html. Make sure you change the .txt extension to .html when naming the file and you place in a location that you will remember easily. (I recommend you save to the desktop for easy reference.) You could also name the extension .htm, but that is a discussion for another day. For now, let’s just stick to the game plan.
Now that we have our file set up and saved, we are ready to learn and use the code! The html file you just created will now open in your default web browser if you double click the file. One problem, we haven’t told it to do anything yet, so all we get is a blank white page. Let’s change that!
The web page should consist of at least 5 instructional elements called tags. These tags are as follows:
<!DOCTYPE…>
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY> </BODY>
</HTML>Copy and paste that code into your MyFirstWebPage.html file. The DOCTYPE tag can vary depending on what kind of site you are building, but this tag is necessary for proper documentation. It states the version being used and instructs the browsers of what version of HTML we are using. This will keep us in accordance with the World Wide Web Consortium(W3C) standards. For now, just know that you will need to include the proper doctype tag for web pages that you intend to post online, so you might as well get into the habit now.. We won’t get into the details here on this tutorial. Let’s just use the one below. Copy & paste the following line of code over the top line of code <!DOCTYPE…> that we pasted before into the MyFirstWebPage.html file:
<!DOCTYPE HTML PUBLIC “ -//W3C//DTD HTML 4.0//EN”
“http://www.w3.org/TR/REC-html40/strict.dtd”>Now we can start the web page design by using the <HTML> tag, followed by the <HEAD> tag. They are starting tags and the </HTML> and </HEAD> are ending tags. You must always have an ending tag for every starting tag that you have with the exception of the <!DOCTYPE>, since it is only used to instruct how strictly the HTML standards will be on the web page. The purpose of the <HTML> tags is to instruct the page where the beginning and ending of the code is for the web page. Next, we have the <HEAD> tag. This tag is used for many reasons from including the <TITLE> of the web page to handling functions from other languages such as VBScript and Javascript. It also contains a lot of other useful tags for the web page such as <META> and <STYLE>. Again, we won’t need to place anything else between these tags today except for the <TITLE> tag.
Whatever you type between the two tags <TITLE> and </TITLE>, will appear in the status bar of the browser, not to be confused with the address bar. In Windows Internet Explorer(IE), it is at the very top of the browser in the blue bar that runs across the top of the page. I will use IE for the rest of the tutorial when I refer to the browser. Let’s give our web page a title. Type
This is My First Web Page!between the title tags in your html file. Let’s also add a heading. To do this, copy & paste between the <BODY> and </BODY> tags the following:
<H2><CENTER>Heading on the web page!</CENTER></H2>
<p>This is the body of the web page!</p>We now have some text on the web page that we can look at to see what is happening. Save the MyFirstWebPage.html file. You don’t have to close the file in notepad in order to open it in your browser, so just double click on the file to open it. Viola! We have a web page with a title on the top of the browser bar, a heading that is in a larger font than the body text and the text for the body of the web page.
The <H2> tag is a preformatted style tag for heading in HTML. There are six tags in all that range from <H1> to <H6>. You can now change them in notepad, save the file, then go to the browser and refresh the browser to view how the change appears on the web page. You also noticed that the heading was centered on the page, unlike the text placed in the <p> tag. That is because of the tag <CENTER> that we used along side the <H2> tag. The <p> tag simply means that it is a paragraph. If you place another set of <p> tags and write some text between them, you will see how they will create a new paragraph on the web page with a space between the two paragraphs.
The web page is still very plain and boring. Let’s add some color to the page. Replace the first <BODY> tag with the following code:
<BODY BGCOLOR=”#00CCFF”>Also, replace the <p> tag with the following code:
<p style="color:navy;">If you save the file and refresh the browser again, you can see how the changes above affect the web page. Congratulations! You have just completed your first web page!! It’s very basic, but you can see how just a few lines of code in the right sequence can add life to any web page in a hurry. Now that you have a basic understanding of HTML and have a web page with some sample code, you can begin to play around with these tags on your own to help you further learn how it all works.
You can also use other tags to help with formatting. Among them are <font>, <b>, <i> and <u> just to name a few that are useful to get you started. Just remember that every tag has to have an ending tag, such as the <b> tag for bolding text. It needs to have a </b> tag after the end of the text you want to bold. If you forget to add you’re ending tags, HTML will assume you want that style or format for the rest of the web page.
Another rule is that if you start with <b><i>Example Text</i></b>, the ending tags should finish in reverse order, so the last tag you used will be closed first on down to the first tag used as in the example above. So misuse of the standard coding would look something like this: <b><i>Example Text</b></i> This does not follow W3C standards and it is more difficult for someone to follow your code for troubleshooting purposes as well.
The last thing I would like to leave you with is another example of how your code should look along with another couple of examples on style. Copy & paste this code in the MyFirstWebPage.html file:
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>This is My First Web Page!</TITLE>
</HEAD>
<BODY BGCOLOR="#00CCFF">
<H2><CENTER>Heading on the web page!</CENTER></H2>
<p style="color:navy;">
This is the body of the web page!
</p>
<p style="font-size:x-large;">
This is the second paragraph of the web page!
</p>
</BODY>
</HTML>I hope this will help you to get motivated to learn more about HTML and tags and the many things you can do with HTML once you know what you are trying to accomplish. After you master the HTML and tags to build web pages, you should then try your hand at adding in VBScript and Javascript, which will provide you with even more endless hours or fun when designing web pages!
=-=-=-=-=-=-=-=-=-=-=-=-=-
If you found this article helpful, please click the Yes button near the:
Was this article helpful?
label that is just below and to the right of this text. Thanks!
=-=-=-=-=-=-=-=-=-=-=-=-=-
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)