Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Make Your First Web Page
→ Skip the details - skip down to the basic HTML skeleton.
Are you ready to make your first web page? You’ll need just two things:
- Notepad or another text editor
- Your favorite browser
A crash helmet is optional.
There are HTML editors that some people prefer, but for this tutorial we’ll assume you don’t have one. If you do and want to use it, that’s fine as long as it allows you to enter the code manually.
In my experience in teaching HTML, it is best to learn to code by hand—that’s what you’ll do in this exercise—even if you plan to use an HTML editor later on. Here’s why:
- Knowing how code is supposed to look will help you troubleshoot problems, and problems happen for everyone.
- You can do code techniques that aren’t built into an HTML editor.
- You’ll often end up with cleaner code, which can help with search engine placement.
- You’re not tied to expensive software upgrades.
I use Notepad, which comes with every Windows PC. It’s all you really need. You’ll find it in your Accessories folder in the All Apps menu in pre-Windows 10 systems. In Windows 10 it's listed under Windows Accessories, and in Windows 11 it's listed under the N's by itself. Mac users will probably want to use SimpleText.
Whatever you use, be sure it's a plain text editor rather than a word processor. Word processors add formatting characters that can break your web page and make it smell like foot odor.
If you’re using Notepad, first go to the Format menu and put a check mark by Word Wrap. This keeps your text from appearing as one long line that you’d have to scroll sideways to see.
If you haven’t read our Introduction to HTML you might want to read that before continuing.
Still here? OK, open Notepad or another plain text editor and let’s get going. An HTML document starts off with:
This tells the browser it’s an HTML 5 document. Clever, huh? Go ahead and type <!DOCTYPE html> into Notepad now, and be sure to capitalize DOCTYPE.
That’s followed by the HTML element, so go ahead and type <html lang="en"> on the next line. Your text should look like this now:
<html lang="en">
The lang="en" attribute and value added to the html tag is recommended but not required. The stated benefits of using it include things like:
- Language specific styling.
- Better spelling and grammar checker performance.
- Better text translations.
The "en" is short for English. For other languages use the appropriate code. The list is here: Language Subtag Registry.
WARNING: That's a text file with over 8,000 entries, so use your browser's search function.
To keep this tutorial simple, attributes and values are discussed in this tutorial.
Now then, next is the HEAD tag:
Now that you’re a an old hand at typing HTML commands, go ahead and type <head> on the next line below your <html> tag.
Technically speaking, you don’t have to place the head tag under the html tag, you could place it after html tag on the same line. However, I often start code on new lines or in logical places because it breaks up the source code with a little white space, making it easier to edit later. As your page complexity grows with your skill level, this practice can be a real time-saver. It also makes troubleshooting much easier. Some protest this slows down your page, but in my experience it's no more than a fraction of a second because it isn't noticeable. So is it really a concern? It isn’t for me.
There are several items that can go in between the opening head tag and closing head tag, but for a simple page like the one we’re creating, we’re only concerned with two. The first is:
That tells the browser which character set to use. There are other character sets available, but this one is the most widely recognized, thus ensuring your web page will be compatible with as many users as possible.
The next is the opening and closing title tag set, and, of course, the actual title of your web page that goes in between the opening and closing title tags:
The title shows up as the page tab text, or in the title bar at the top of the browser window in browsers that don't support tabs. It's also the bookmark text when someone bookmarks your page, and the link text of a search engine query.
If you look, you should see “Make Your First Web Page” in the tab or title bar of your browser right now because that’s the title I gave this page, clever rascal that I am.
Go ahead and add the title code now, and change the part that reads “Your Page Title Here” to something different so you can see how it works for real when you open the page you’re now making in a few minutes.
That’s all we’re placing in the HEAD section, so once you’ve added that, go ahead and close the head section of the page. Do that by placing:
…under the title tag set.
REMINDER:
A forward slash before an HTML element tells the browser that element is now closed. Forgetting a closing tag can really mess things up. It might even cause a nasty rash.
Next we add the body tag:
The area between the opening and closing body tags is where you put the content you want to display on the web page when it’s viewed with a browser. Other HTML elements are used within this area as well. This allows you to add images, create paragraph spaces, and to code other display instructions.
These other formatting tags do not show up on the web page, but merely tell the browser how to display the information you want to present. When you’ve completed this tutorial you can go to the individual tutorials and choose other elements to add to your practice page. Just "playing around" like that is a good way to learn.
As I said, after the BODY tag is where you put the content you want to show on a web page. Your pictures, jokes, links and all else goes here. So for now, just enter the <body> tag under the <head> tag and type a brief message for demonstration purposes. Anything will do, such as: "BoogieJack.com is so cool I think I'll send them a thousand bucks or so."
Yeah, that works for me.
Got the body tag and brief message added to your practice page? Great!
The last bit of code to write is to cancel the BODY and HTML elements. In HTML we always cancel tags in the reverse order they were opened, so type:
</html>
…under your message. Your test page’s source code should now look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
</head>
<body>
BoogieJack.com is so cool I think I'll send them a thousand bucks or so.
</body>
</html>
The last thing to do is save the test page you just made. You can name this file anything as long as it starts with a letter. When you build a web site for real, your home page should always be called index.html. You might as well save this one under that name.
It should be noted that some people name their documents with a .htm extension instead of .html. It's the same thing. The .htm was just Microsoft being Microsoft and trying to dictate the rules. Some servers didn't recognize the .htm extension so it was wise not to use it, but I think those days are past.
When saving your document enclose it in quotation marks to prevent your system from adding .txt to the end.
Click File on your text editor menu and chose Save or Save as in the dropdown menu. In the File name box in the save dialog, type:
"fileName.html"
...whereas fileName can be any name you choose as long as it starts with a letter and not a number or symbol. Be sure to include the quotation marks around the file name and file extension so your text editor doesn't append .txt to the end. Also, do not put any spaces in the file name as spaces are not allowed in file names in HTML. You can use a dash (-) or an underscore (_) in place of a space if you want to use two or more words. Personally, I use dashes.
Lastly, be sure to remember where you save it so you can open it with your browser.
Now that you’ve saved it, open it in your browser and see what you’ve made! To open the page, go to File/Open (or a similar wording depending on which browser you use) and navigate your computer system to the page you just made. In most browsers you can also press the Ctrl key and letter “O” at the same time to open the “open” dialog box.
You should only see the text of the message you entered into the code, but not any of the code itself. Did it work? If so, Bingo! How about that, you just made your first web page! Note that this page is only on your computer at this time, it’s not on the Internet where others can see it.
If it didn’t work, go back over your code and look for mistakes. Also be sure to check that a .txt extension didn’t get appended to the end of the file name.
Now you’re ready to move beyond the basics, but I recommend you read through the Website Planning tutorial first if you haven't already.
