A web-based HTML Text Editor is required to teach HTML coding using Chromebooks. There are several free apps available that integrate with Google Drive. This allows your students to easily create or edit HTML files.
If you are using a Google Classroom you may need to gain permission from your system administrator to have students connect an HTML Text Editor to their Google Drive. Our favorite app is HTML Editey . If you are unsure if your students have access to this app, refer to the section Multiple Ways to Access HTML Editey at the bottom of this blog article for helpful suggestions.
Use HTML Editey to Teach HTML Coding using Chromebooks
When developing the TechnoHTML5 version for Chromebooks we tested many HTML Text Editors. This technology project has STEM activities that spark an interest in computer science. Although the instructions will work with most web-based HTML Text Editors the app we recommend to introduce programming to kids is HTML Editey. Here is why!
Preview Pane
Students can live preview their HTML coding as a web page. This provides instant feedback when coding. HTML Editey has two panes. On the left side is the source code. On the right side is the web page. As students type an HTML tag they can immediately see the text, image, or hyperlink. Students can quickly notice if an HTML tag is correct. If it is not, the content won’t display. This is a great way to develop coding skills.
Teach HTML coding using Chromebooks with HTML Editey. See a live preview of the web page as you code.
Line Numbers
HTML Editey has line numbers beside each line of code to label each HTML tag or CSS attribute. The number line is on the left side of the pane. This information provides an identifier when analyzing the code.
Temporarily Hide a Code Snippet
Most HTML tags have an opening and closing tag. The content between these tags can be temporarily hidden from view. This is helpful if you have a table or long list of items that is taking up space in the source code pane. Code snippets that can be collapsed or expanded are shown with an arrow beside the line number. When the arrow is clicked the code is no longer visible and a symbol shows in the code. When the symbol is clicked the code reappears.
Temporarily hide a group of code from view.
Wrap Text
Some HTML Text Editors keep each line of code as one continuous line that stretches across the screen. When there is lots of text it becomes difficult to read or edit. The great news is HTML Editey wraps long lines of code to fit inside the source code pane.
Color Code HTML Tags
HTML tags are used to add content to a web page. HTML Editey color codes the HTML tags. For example, HTML tags are red. Web addresses are green and equal signs are blue.
The color coding of HTML tags makes them easy to read.
Color Code CSS Tags
CSS is used to style the content of a web page. It sets how the background, headings, paragraphs, or images look. HTML Editey color codes the CSS attributes. To illustrate this point, CSS properties are yellow. CSS values are orange and the size of the CSS values such as px or % are purple. This makes it easy to code the appearance of the web page.
The color of CSS attributes helps to code the style of a web page.
Auto-pairing of Tags
Many HTML tags are written in pairs <body> </body> <h1> </h1> <table> </table>. Each pair has an opening and closing tag. For instance, a paragraph starts with the tag <p>. The text that will show on the web page comes next. The paragraph ends with the tag </p>. To speed up coding, HTML Editey automatically adds the closing tag.
Inspect Images
When using a web-based text editor to design a web page, images are added by linking to an existing picture on the Internet. File properties can be shown directly in the preview page of HTML Editey. Right click on an image and select Inspect or press CTRL + SHIFT + I on the keyboard. The dimensions will display.
The height and width information can be used to set the size of the image in your web page. To give you an idea, if the original image is 600 pixels wide by 400 pixels high but you want it smaller on your web page, you can divide each number by two to cut the size in half. This can be put into the img src tag to control the appearance
<img src=”https://www.site.com/picturename.gif” width=”300″ height=”200″>.
Display image information to set dimensions.
Identify and Explain Errors
HTML Editey does show coding errors. A red x will appear beside a line number. When clicked a message displays describing the error. If you are new to coding often the explanations are not very meaningful. However, they do help beginners know that there is a problem they need to solve.
Multiple Ways to Access HTML Editey
There are several ways to access HTML Editey.
- Option 1: Visit https://html.editey.com/ and login to Google Drive to create a new HTML document.
- Option 2: To create a new HTML document, you can access HTML Editey directly from Google Drive. To do this, sign into your Google Drive. Click the New button and then select More. From the list, select HTML Editey from the list. Afterwards you may need to sign into the app to use it. If the tab opens to a blank window, you may not be signed into the HTML Editey app. Close the blank window. You may see a message. If you do, click Sign back in. Now, try the steps again. If this doesn’t work, use Option 1.
- Option 3: To edit an existing HTML document in Google Drive, select the html file. Click More actions or right click the file in your Google Drive. Select Open with.
Pick HTML Editey from the list.
TIP: To right click on a Chromebook, press the ALT key at the same time you click the mouse button or track pad.
On a desktop, I found it cumbersome to always save my work in the text editor then toggle to a browser and refresh to see a preview. But using a free text editor for Chromebooks such as