Create and view a web page on your computer
Requirements:
- Text editor
- An internet browser
- Completed Unit 1 of Codecademy’s Learn HTML & CSS course
Introduction
When you navigate to any web page on the Internet the browser does a lot of work. The browser reads all the required files (HTML, CSS, and JavaScript) and interprets these raw resources to draw the complex page you see.
In this article, you’ll learn how to create a web page using a text editor on your own computer, and then view the webpage in your browser. If you are interested in publishing your website on the World Wide Web (the Internet) for all to see, read this article after understanding the steps below.
Reading: How to create a website on a laptop
Step 1: Open Your Text Editor
The first step is to open your text editor. It is important to use a “raw” text editor and not a formatted word processor.
Word processors insert characters that make the page look good but are not valid HTML. They’re great tools for creating stylish documents like academic papers and flyers, but they also insert characters that aren’t valid HTML. Because a web page file must contain valid HTML code, a text editor is a better tool for creating web pages than a word processor.
Step 2: Write your HTML skeleton
See also: How To Build a Website: A Beginner&39s Guide (Video 2023)
Now that your text editor is open, you can start writing your HTML code. As you learned in the first lesson of the HTML & CSS course, there are some things that are inherent in a well-formatted HTML file. Here they are all together again:
You can use this exact skeleton if you want. Just copy and paste it into your text editor. Make sure you include everything!
Step 3: Save your file
Your website is now complete, but for now it only exists in yours text editor . The next step is to save the file on your computer. If you now close the text editor without saving, your new website would be lost! When saving the file, keep a few important things in mind:
- Use the HTML file extension .html, e.g. B. about_me.html
- Do not use any spaces or special characters in the file name. Use underscores (_) or hyphens (-) instead.
- Decide where on your computer you want to save the file and remember the location!
Use HTML file extension .html
A file extension is the suffix of a filename and describes the type of file. The file extension is always the last 3 or 4 characters in a file name, preceded by a period. For example, the HTML file extension is .html, which tells the browser (and other applications) to interpret the file’s contents as a web page. Note that you may see .htm on older websites, but this is archaic and no longer used.
Do not use spaces or special characters in the file name
See also: How to Set up a Custom Email Address with Your .ORG Domain
If you select a filename, keep it simple. Stick to numbers and letters. Use underscores (_) or hyphens (-) instead of spaces. Leave out percent signs, slashes, question marks, exclamation points, commas, and other “special” characters. The browser needs to find the file by its name, and special characters in the filename can break this process. File names should be kept simple and follow conventions to make navigating your website more reliable.
Decide where on your computer you want to save the file
Once you have chosen a file name, select an appropriate location on your file system to save your web page. It’s a good idea to create a new folder for this website. When creating a new folder, use the same naming conventions outlined above to minimize future problems. The most important thing when choosing where to save it is to remember where you saved it. If you already saved it but don’t remember where, just click File > Save As…, choose a new location and remember this time.
Step 4 : Open your web page in your browser
Now you can view your new page in your browser! First, open your browser. From the top menu, click File > Open File. Navigate to the location where you saved your webpage. Click your webpage file, and then click Open. You should see your web page!
Review
In this short time you have learned how to apply what you learn at Codecademy to yourself own personal computer. You also learned about file extensions, text editors, and saving and viewing local files. Now you’re ready to test and practice everything you learn in Codecademy yourself!
See also: How to create a YouTube channel for your brand in 5 steps
.
