Tag Archives: HTML Editey

Teach HTML Coding using Chromebooks

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.

HTML Editey

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.

Collapse HTML Code

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.

Color Code HTML tags

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.

Color Code CSS

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″>.

Inspect Image

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.

New! HTML Coding for Chromebook Users

teach STEM skills

Teach HTML coding using Chromebooks

TechnoHTML5 has always been a favorite top seller for educators. With the current focus on STEM education, teaching HTML coding is more relevant than ever. Now that Chromebooks are prevalent in the classroom, TechnoKids has modified this popular project specifically for Chromebook users. Using a web-based text editor that integrates with Google Drive makes HTML coding a breeze. Now when you order TechnoHTML5 you will receive two versions: one for desktop HTML text editors such as Notepad or Code Writer and a version for Chromebook users that uses a free app such as HTML Editey.

STEM Activities to Learn Life Skills

I wrote in a previous blog about the reasons to teach programming. Of course, not many students will choose careers as computer scientists or program developers, but that’s not the main rationale for coding lessons. Strong communication skills and personality traits that lead to success in life and the workplace are critical goals for students. Learning to code does just that. As they learn to plan, organize, write, edit, and troubleshoot, students build invaluable life skills. Perseverance, problem solving, analytical thinking, creativity, and collaboration are enhanced by learning programming. These crucial personal habits will benefit students for life.

Everything Educators Need to Teach HTML

TechnoHTML5 for Chromebooks is an introductory HTML project for middle and high school grades. Students build a web page using HTML and CSS. They style text, graphics, and hyperlinks. Optional challenges have them format lists, add a background image, create a class, add animated gifs, and more! Step-by-step instructions with checklists in the Student Workbook build organizational skills. The Teacher Guide includes assessment tools such as a summary of skills and customizable marking sheet to evaluate the completed web page projects. Digital resources include sample files, reference sheets, review questions, and skill reviews for practice.

Coding for Chromebook

Students design a web page on the topic of their choice using TechnoHTML5.

Chromebooks Make HTML Coding Easy

HTML Coding is fun and easy using a Chromebook and Google Drive. coding for ChromebookOn 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 HTML Editey provides instant feedback. Two panes allow the user to write code and see immediate results.

There are many other great features to HTML Editey that we’ll write about in an upcoming post.