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.
What you'll learn
- Identify at least two different types of text editors used for coding, like Notepad and VS Code.
- Explain the difference between a text editor and a web browser to a classmate in your own words.
- Create a simple HTML file with at least one heading () and one paragraph () using a text editor and save it with the correct file extension (.html).
- Open the HTML file you created in a web browser (like Chrome or Safari) and show that the heading and paragraph are displayed correctly.
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 FreeMore from Web Development Basics
Computer Science for other grades
Frequently asked questions
What grade level is "Setting Up Your HTML Playground: Text Editors and Browsers"?
Setting Up Your HTML Playground: Text Editors and Browsers is a Grade 6 Computer Science lesson on ExcelOS.
What will I learn in Setting Up Your HTML Playground: Text Editors and Browsers?
You'll be able to: Identify at least two different types of text editors used for coding, like Notepad and VS Code; Explain the difference between a text editor and a web browser to a classmate in your own words; Create a simple HTML file with at….
Is "Setting Up Your HTML Playground: Text Editors and Browsers" free to practice?
Yes. You can read the tutorial preview for free, and signing up for a free ExcelOS account unlocks the full tutorial and all practice questions with instant feedback.
How many practice questions are included with Setting Up Your HTML Playground: Text Editors and Browsers?
This lesson includes 27 practice questions across multiple difficulty levels, each with instant feedback and explanations.