teaching html coding

Easy for Kids – Simplify Teaching HTML with Trinket.io

HTML / By / / TechnoHTML5, text editor, trinket

Teaching HTML to children is easy with Trinket.io. This free service allows students to write, edit, preview, and publish a web page in the Chrome web browser. This is ideal for teachers who want to standardize instruction amongst devices. Instead, of having students using different HTML text editors, everyone can use the same one. Of course, this is also perfect for schools using Chromebooks.

Trinket.io works with TechnoHTML.

In this technology project by TechnoKids Inc. students learn how to write HTML code to add text, images, and hyperlinks to a document. They also explore CSS formatting options to make their page look great. Whether using the step-by-step coding instructions in TechnoHTML or not, Trinket.io is a reliable service that simplifies teaching HTML to kids.

html sample
Teach HTML and CSS using Trinket.io. Design a web page with text, images, hyperlinks, and more!

How to Use Trinket.io to Build a Web Page

  1. Visit Trinket.io.
  2. Sign up for a free account.
trinket account
Sign up for a free Trinket.io account.
  1. To build a web page using HTML coding, click New Trinket. Select HTML.
trinket and html
Pick HTML from the New Trinket menu options.
  1. You need to give the web page a unique name. Click untitled. Type in a name such as the topic.
rename file
Replace Untitled with the topic of the web page.
  1. You will notice that the file is automatically named index.html.
  2. Type the HTML code in the left pane. Preview the web page in the right pane.
type HTML coding into pane
Type the HTML code into the left pane. Preview the web page in the right pane.
  1. When you are done working, click Save.
  1. When your web page is complete click Share. Select Publish.
publish web page
There are many ways to share your web page.
  1. Notice the Site URL. This is your website address. Click Publish.
publish web page
A published web page has a website address. TIP: You may want to copy the Site URL and share it with your teacher.
  1. Click the Site URL link to view your web page in the web browser.
web page
Click the Site URL to view the web page posted to the Internet.
  1. Close the web browser tab to return to Trinket.io. Close the dialog box.
web page

Tips for Using Trinket.io with TechnoHTML

Upload Text File: Several assignments and skill reviews in TechnoHTML use HTML templates to explore HTML and CSS code. To use Trinket.io create a new HTML trinket. Then use the Upload Text File button to place the template into Trinket.io.

Use the Chromebook Version: TechnoHTML has duplicate versions – one is for Windows users. The other is for Chromebook users. This set of instructions has students link to existing images on the Internet – which is ideal for Trinket.io.

Save a Copy of the HTML Code: At the time this blog post was written Trinket.io allowed students to create web pages for free. The file or trinket is stored online in student’s account. However, if this changes you can have students download the HTML file which can be uploaded later. Alternatively, students can copy their code into a Google doc and then paste it back into Trinket.io to keep working.

Scroll to Top