See Also

Creating an HTML file

On the main menu, choose File | New, and then choose HTML File in the pop-up list. IntelliJ IDEA creates a stub file and opens it in the editor.

The stub is generated using the HTML file template.

Editing an HTML file

IntelliJ IDEA can generate <script>, <link>, or <img> tags inside <head>. To generate a tag, drag the

  • To generate a script tag

When a file is opened for editing, you can drag a JavaScript or CSS file into the opened HTML file. IntelliJ IDEA will automatically create a script or a link tag inside the <head> tag.

Same way, you can drag an image to add an img tag with the width and height attributes anywhere inside the <body> tag.

images/drag_to_html.png

No preliminary steps are required to view HTML code. However, to preview PHP pages in the browser, you need to configure synchronization with a server first.

Previewing pages with web content in a browser

You can preview a file with Web contents in a browser. This can be the IntelliJ IDEA default browser specified in the Web Browsers section of the IDE settings or the one of your choice.

To preview an opened file in a Web browser, do one of the following:
  • On the main menu, choose View | Open in Browser. The current file opens in the default browser.
  • With the editor tab having the focus, choose View | Preview file in on the main menu or press Alt+F2. Then select the desired browser from the pop-up menu:

    images/previewInBrowser1.png

  • Hover your mouse pointer over the code to show the browser icons bar, and click the icon that indicates the desired browser:

    images/browserIcons.png

If you don't want to see the icons toolbar, or would like to see the icons of just those browsers you are interested in, clear the Active check boxes for the unnecessary browsers in the Web Browsers section of the IDE settings.

To open the html source code of a web page in the editor
  1. Choose File | Open URL.
  2. In the Open URL dialog box that opens, type the URL address of the web page or choose a previously opened URL from the list.

Viewing embedded images

IntelliJ IDEA suggests several ways to view images, embedded in the HTML files. You can use navigation to source, open an image in an external graphical editor, or preview images on-the-fly. The viewing modes are configurable in the Images dialog.

To view an image in IntelliJ IDEA
  1. In the Project tool window, select the desired image file.
  2. On the context menu of the file, choose Jump to Source, or press F4.

Configure the path to the desired external editor in the External Editor section of the Images dialog.

To view an image in an external editor
  1. In the Project tool window, select an image file.
  2. On the context menu of the file, choose Open in external editor, or press Ctrl+Alt+F4.
To preview an image, place the caret at a reference to an image in the editor, and do one of the following