An HTML file is nothing more than plain ASCII text, but all HTML files must have a special file extension for web browsers to recognize them. Saving your work in text editor. This extension is either .htm OR .html. The reason why there are two possible extensions goes back to the early days of the web. People were still using Windows 3.1 and DOS then, and Windows 3.1 and DOS file extensions could only be 3 letters long, hence .htm. Now .html is the more commonly accepted extension. For this course, we will be using the .html extension.
As you create web pages, it is important to keep them all together. This makes them easier to find on your computer, and makes it easier when you are ready to make your website go “live” on the Internet. Saving your work in sublime text. So before we start saving files, let’s create a folder where they will go.
Saving your work in text editor
- Open Windows Explorer (you can usually find Windows Explorer by right-clicking the Start button and selecting Explore). Saving your work.
- Left-click once on the C: drive (or whatever drive you will save your files to), then go to the File menu of Windows Explorer and select New/Folder. In the File Name box, type a name for this new directory. I am calling my folder HTML-site.
Now you are ready to save the file:
- Be sure you are in your Notepad window and that the skeleton web page you created is visible.
- Go to the File menu in Notepad and select Save.
- In the dialog box that pops up, make sure the Look in: box is pointing to the folder you created in the previous step.
- Type the file name in the File Name box. The first page of a website should always be called index.html, so that is what we will call this first file. Saving your work.
- After you check to see that the location for saving is correct and you have typed index.html in as the file name, click the Save button to complete the process.
You should always check your web page in a browser to make sure it looks okay.
To Preview Your File in Internet Explorer:
- Click the File menu, choose Open.
- Click the Browse button in the Open dialog box that pops up and navigate to the directory where you saved your index.html file.
- Double-click on the index.html file, then click the OK button in the Open dialog box. Saving your work.
- Your index.html file is now displayed in Internet Explorer.
(Most browsers use similar commands to open a file – start with the File menu and look for “Open Page” or “Open File”.)
Note: As you work on your web page, you should keep your web browser and Notepad open. If you keep your index.html file open in your web browser, all you need to do after saving any changes you make to the file in Notepad is click the Reload or Refresh button in your browser window to see the changed index.html file. Saving your work in visual studio code. This means that you should have two windows open:
- One web browser for previewing your web page.
- One Notepad window, for editing your HTML code.
Just One Last Step!
Before we finish this lesson, let us add a bit more code that will help all web browsers better understand our code. Insert the following line of code directly below the <head> start tag:
This marks the first time you’ve seen an equal sign or quotation marks inside an HTML element. You will learn about this new syntax in the next lesson (HTML Attributes and Values) but for now just be content with copying and pasting this code and knowing that it makes your page complete! You just wrote a 100% valid web page from scratch! By hand! That is more than some professional web developers can say.
Remember, no one ever promised that your first web page would be beautiful! What’s important is that you now know how to write your own HTML code and create basic web pages. You may think “Yes, but I don’t know all of the element codes.
Saving your work in text editor. Without someone telling me which element to use to describe a piece of content I’ll be lost!” Let me offer you some words of comfort: you already know more than you realize. I would estimate that 95% of websites use the same basic collection of HTML elements that a beginner can master quickly and easily. Follow the rest of my lessons and you will be completely proficient in writing HTML in no time!
For your reference, here is the code we just put together, in its entirety:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My First Page</title> </head> <body> <h1>This is a big bold heading</h1> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> </ul> </body> </html>