Beginner guides › Save and open an HTML file

How to save and open an HTML file

The AI has given you a block of code. Here's how to turn it into a file you can double-click, on Windows, Mac or Chromebook. It takes about two minutes, and you only need to learn it once.

Starter 2 minutes Free · nothing to install Windows, Mac & Chromebook
The idea

An HTML file is just text with a special ending

A web page is plain text saved with .html at the end of its name. When you double-click a file ending in .html, your computer opens it in your web browser and runs it. That's all that's happening.

The only thing that trips people up is the editor quietly saving it as the wrong kind of file. The steps below avoid that.

Windows

On Windows, with Notepad

  1. Copy the code

    In the AI chat, click the Copy button on the code block. Check it ends with </html>. If it doesn't, the reply was cut off: ask the AI to send the complete file again.

  2. Open Notepad and paste

    Press the Windows key, type Notepad and press Enter. Paste with Ctrl+V.

  3. Save as .html

    1. Choose File › Save as.
    2. Pick a folder you'll find again, such as Documents or Desktop.
    3. Set Save as type to All files (*.*).
    4. Type a name ending in .html, for example snake.html.
    5. Leave Encoding as UTF-8 and click Save.
    Why "All files"? Without it, Notepad adds .txt and you get snake.html.txt, which opens as text instead of a page.

  4. Double-click to open it

    Find the file in File Explorer and double-click it. It opens in your default browser (Edge, Chrome or Firefox).

Mac

On a Mac, with TextEdit

  1. Switch TextEdit to plain text

    Open TextEdit (press Cmd+Space and type TextEdit). Start a new document, then choose Format › Make Plain Text (or press Shift+Cmd+T). Do this before pasting.

  2. Paste the code

    Copy the code from the AI chat and paste it with Cmd+V.

  3. Save as .html

    Choose File › Save, type a name like snake.html and click Save. If TextEdit asks whether to use .html or .txt, choose Use .html.

  4. Double-click to open it

    Find the file in Finder and double-click it. It opens in Safari, or whichever browser you use.

    One-time setting for later edits. In TextEdit go to TextEdit › Settings › Open and Save and tick Display HTML files as HTML code instead of formatted text. Then TextEdit shows you the code when you reopen the file.
Chromebook

On a Chromebook, with the Text app

  1. Open the Text app

    Open the Launcher and search for Text. If you don't have it, install the free Text app from the Chrome Web Store or Google Play.

  2. Paste and save

    Paste the code with Ctrl+V, then choose Save as. Save it in My files › Downloads with a name like snake.html.

  3. Open it in Chrome

    Open the Files app, find your file and double-click it. It opens in Chrome.

ADVERTISEMENT · IN-ARTICLE
When the AI sends a new version

Updating your file

  1. Open your file in the editor. On Windows, right-click it and choose Open with › Notepad. On a Mac, right-click and choose Open With › TextEdit.
  2. Select everything (Ctrl+A, or Cmd+A on a Mac) and paste the new code over it.
  3. Save (Ctrl+S or Cmd+S).
  4. Go back to the browser tab and refresh (F5, or Cmd+R on a Mac).
Keep the last good version. Before a big change, use Save as to make a copy like snake-v2.html. If the new version breaks, you still have the old one.
If it goes wrong

Quick fixes

It opens as a page of code instead of the game or tool

The file was saved as .txt or as rich text. On Windows, check Save as type was All files. On a Mac, make sure you chose Format › Make Plain Text before saving. Then save it again with .html at the end.

I can't see whether the name ends in .html or .txt

Windows hides file endings by default. In File Explorer, choose View › Show › File name extensions (on Windows 10, tick File name extensions on the View tab). On a Mac, select the file and press Cmd+I to see its full name.

The page is blank

The code was probably cut off. It should finish with </html>. Ask the AI: "Your code was cut off. Please send the complete file again."

Strange symbols like ’ appear in the text

The file wasn't saved as UTF-8. Save it again and pick UTF-8 as the encoding, or ask the AI to add <meta charset="utf-8"> to the file.

It opens in the wrong program

Right-click the file and choose Open with, then pick your web browser. You can tick the option to always open .html files that way.

Can I do this on a phone or iPad?

Saving and editing is much easier on a computer. To use a finished project on your phone, put it online with free hosting and open the link.

Keep going

Now make something