Computer Science
Grade 6
20 min
Setting Up Your HTML Playground: Text Editors and Browsers
Learn to use a text editor and web browser to create and view HTML files.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Identify the specific roles of a text editor and a web browser in web development.
Name at least two examples of text editors and two examples of web browsers.
Create a new file using a basic text editor.
Save a text file with the correct `.html` file extension.
Locate and open a local HTML file in a web browser.
Explain the 'Edit-Save-Refresh' cycle for viewing changes to a webpage.
Have you ever wanted to build your very own website? 💻 It's easier than you think, and it all starts with two simple tools you already have!
In this lesson, we will learn about the two most important tools for any web developer: a text editor and a web browser. We'll discover what each tool does and set up our own 'playground' so we're rea...
2
Key Concepts & Vocabulary
TermDefinitionExample
Text EditorA simple computer program that lets you write and edit plain text. For coding, we use it to write our HTML source code.Notepad (on Windows), TextEdit (on Mac), or more advanced ones like Visual Studio Code.
Web BrowserA program you use to look at websites on the internet. It reads HTML code and 'renders' it into the visual webpage you see.Google Chrome, Mozilla Firefox, Microsoft Edge, or Apple Safari.
HTML (HyperText Markup Language)The special language used to give a webpage its structure and content, like headings, paragraphs, and images.The code `<h1>My Awesome Website</h1>` tells the browser to show a big, important heading.
File ExtensionThe letters at the end of a file's name after the period (.). It tells the computer wha...
3
Core Syntax & Patterns
The .html Extension Rule
Always save your file as `filename.html`
You must save your files with the `.html` extension. This is how you tell the web browser that the file contains webpage code that it needs to read and display.
The Edit-Save-Refresh Cycle
1. Edit Code (Text Editor) âž” 2. Save File âž” 3. Refresh (Browser)
This is the most important workflow. You will always write your code in the text editor, save your changes, and then switch to the browser and hit the refresh button to see your new work.
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
You want to create and view a simple webpage on a brand new computer. Which two basic types of programs, that come with almost every computer, are the absolute minimum you need?
A.An image editor and a video player
B.word processor (like Word) and an email client
C.simple text editor (like Notepad or TextEdit) and a web browser
D.spreadsheet program (like Excel) and a calculator
Challenging
A classmate says, 'I don't need a text editor. I just right-click on a webpage, choose 'View Page Source', copy the code, and edit it there!' Why is this a flawed way to create a new webpage?
A.Viewing the page source can give your computer a virus.
B.The 'View Page Source' is a read-only view; you can't save any changes you make there.
C.This method only works if you are not connected to the internet.
D.The code you see in 'View Page Source' is always an image, not real text.
Challenging
Online coding playgrounds like CodePen show your code on the left and the resulting webpage on the right, updating instantly as you type. How do these tools combine the roles of a text editor and a browser?
A.They provide a text editing area and use a built-in rendering engine to act like a browser, all in one window.
B.They are just advanced text editors that can guess what a browser would do.
C.They are actually web browsers that have a secret, hidden text editor.
D.They take a screenshot of your code every second and display it as an image.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free