How to run a html file

How to run a html file

Even though HTML pages appear on the Web, you do not have to connect to the Web to view them. If you are developing Web pages for your business site, you will perform that task faster by previewing them pages locally in your browser before uploading them to your Web server. You may also need to view HTML files that you download from the Internet or receive through the email. Because all browsers allow you to run HTML files from your hard drive, you can launch them instantly, right from your desktop.

Press “Windows-E” to launch Windows Explorer.

Navigate to the folder that contains your HTML file.

Double-click the file. Your default browser displays the HTML document. If the browser is not open, Windows launches it.

  • New Perspectives on HTML, XHTML, and Dynamic HTML; Partrick Carey
  • Adobe: Adobe Dreamweaver * Previewing Pages
  • If you make a change to an HTML file after viewing it in a browser, press “Ctrl-F5” in your browser to refresh the browser’s view of the document. Otherwise, the document might not show the changes you just made.
  • You can also press “Ctrl-O” in your browser to open a file selection window. Navigate to the HTML file you wish to open and double-click it to you that file in your browser.
  • Internet Explorer becomes your default browser when you install Windows. It will launch when you double-click an HTML file. However, you may prefer to run an HTML file in a specific browser — for example, Firefox may contain debugging or design tools that you use during development. You can make an HTML file open in a different browser by right-clicking the file in Windows Explorer and selecting “Open With.” Select the browser you would like to use from the list that appears in the drop-down menu.
  • If you use a full-featured HTML editor to develop Web pages, your editor may have a button or menu that allows you to preview an HTML page in the editor or in your browser.

After majoring in physics, Kevin Lee began writing professionally in 1989 when, as a software developer, he also created technical articles for the Johnson Space Center. Today this urban Texas cowboy continues to crank out high-quality software as well as non-technical articles covering a multitude of diverse topics ranging from gaming to current affairs.

Understanding HTML code and how to work with it can go a long way. You can use it in your everyday work, like creating HTML signatures to make your email communication more professional. Another unusual but handy way to use HTML is for saving web pages to Word documents.

However, it can all be a little confusing if you’ve never worked with an HTML file before. Let’s start at the beginning by learning what those files are, as well as how to open and view an HTML file in Chrome.

How to run a html file

What’s An HTML File?

HTML stands for Hypertext Markup Language and is a web-based scripting language. Its main purpose is to create and structure web pages. Files with the HTML (or HTM) extension only contain text and references to other files, like images or video.

There are many different programs that you can use to make and edit an HTML file. However, you can use any simple text editor to open and read it as text. When you want to see what the web page looks like, you need to run this HTML file using a web browser.

Google Chrome recognizes HTML, and you can use it to open any file with an “.html” extension.

How To Open An HTML File In Chrome

There’s more than one way to open an HTML file in Chrome.

Use The Open With Command

How to run a html file

  1. Find the HTML file you want to view, right-click on it, and choose Open with from the menu. You will see a full list of apps that you can use to run your file. Your default browser will be at the top of the list.
  2. Select Google Chrome from the list, and view your file in the browser.
  1. If Google Chrome is set as your default browser, all you need to do is double-click the HTML file and it will automatically open in Chrome. If you tried this, and found that your computer doesn’t recognize your file, the system will ask you to use one of the already installed apps to open the file or search the internet for the extension. Choose Open using already installed applications. Then try choosing Google Chrome from the list again.
  1. In order to make sure you opened the right HTML file, check the address bar in Chrome when it brings up the page. It should match the location of your file on your computer.

Open HTML File From Within Chrome

How to run a html file

If you’re already running your browser, you can open an HTML file in Chrome without having to locate it on your computer first.

  1. Choose File from the Chrome ribbon menu. Then select Open File.
  2. Navigate to your HTML file location, highlight the document and click Open.
  3. You will see your file open in a new tab.

How to run a html file

You can also use a keyboard shortcut to open a file in Chrome. Open a new tab in Chrome, then press Ctrl (Windows) or Cmd (Mac) + O. It will bring up the same Open File menu. Find your HTML file and open it.

If the shortcut didn’t work, it might be that your browser has a different set of hotkeys for this command. You can always check it in your browser settings. There are a lot of different features that you can use with the help keyboard shortcuts in Google Chrome. You can learn to switch between tabs, create Google Calendar events, and even switch Incognito Mode on and off quicker with the right shortcuts.

Drag & Drop Your File In Chrome

How to run a html file

You can also just drag and drop the HTML file right into a new tab. Chrome will then automatically open the page.

How To View Source HTML

In case you need to do a little more than just view the page but also view the HTML source code, Chrome allows you to do that as well.

How to run a html file

There are a few different ways to do it. The most basic one is to open your HTML file in a new tab in Chrome. Then right click on it, and choose View Page Source from the menu.

How to run a html file

If you’re looking to use a more interactive tool and want to see how the changes you make affect the web page straight away, you can use the developer tool in Chrome.

To do that, open the HTML file in a new tab. Then click on the three vertical dots icon in the upper right corner of the window. In the drop-down menu, choose More Tools > Developer Tools.

How to run a html file

On the right side of your screen, go to the Elements tab to see the detailed source code of your web page.

How To Open An HTML File From Your Smartphone

If you’re using your smartphone, you can also use different methods to open an HTML file in Chrome.

Use The Open With Menu

How to run a html file

Locate the HTML file you want to open on your phone and click on it. It will bring up the Open with menu, where you can choose from the list of apps that you can use to view the web page. Select Chrome to open the file.

Open An HTML File From SD Storage

How to run a html file

Launch the Chrome browser on your phone and open a new tab. Type file:///sdcard/ into the address bar, which will open your SD storage. From there, navigate to the file you want to open and tap to view it.

Learn To Understand HTML

Learning little tricks and understanding HTML better can give you more freedom when working with both code and text. One good example is learning how to embed HTML into a Google document, among other things.

Do you ever work with HTML files? Do you find it difficult? Share your experiences with us in the comments below.

Anya is a freelance technology writer. Originally from Russia, she is currently a full-time Remote Worker and Digital Nomad. With a background in Journalism, Language Studies, and Technical Translation, Anya couldn’t imagine her life and work without using modern technology on a daily basis. Always looking out for new ways to make her life and location-independent lifestyle easier, she hopes to share her experiences as a tech- and internet-addict through her writing. Read Anya’s Full Bio

How to run a html file

Normally when I want to view a HTML file, I just right-click it and choose to open it with a web browser. However, I wanted to run a html page using localhost. I went online, researched and found 3 methods that works.

Outline

Sometimes, you want to see how the HTML page would work as if it were on a server. And that’s where localhost and local server comes in. Let me explain.

What is localhost and where can I access it?

Localhost is the url on a computer that points to itself. The computer does not need the internet for the address to work since it only checks on itself.

To access localhost, you write localhost or 127.0.0.1 on the browser.

When you try to access localhost now, you will find nothing there. or see default apache page(if apache is installed).You need to host a html file on a server(on your computer) that serves a page on localhost.

Local server. What is that?

A local server is a server running on the computer you are working on. It works like any other server. You need to start the server for it. when the server is ready, it can be accessed on a specific url.

Once the server is ready, accessing the localhost on a browser will display the page or folder served by the server.

There are three ways I have tried that worked for me and I will show you how in the next few section. These are:

method 1: Use python to run a HTML page on localhost

Python has a in-built server that you can run with a single command.

Check if python is installed

For this method to work, you need to have python installed on your computer. You can check if you have python installed on Windows computer by checking if it is in your programs list.

For Ubuntu, Mac OS X and Debian, Python comes preinstalled. You can easily check if you have python in your system by typing python –version on the terminal.

Running a html page on localhost UNIX(Linux and Mac OS X)

  1. Open the terminal on your system.
  2. Navigate to the folder containing the HTML file.
  3. Run the command: python -m SimpleHTTPServer

You will see a log with where you can access the page

  1. Go to your browser and type 0.0.0.0:8000 or localhost:8000.

How to run a html file

You can set a specific port number by adding the port numuber to the command. The command on the terminal becomes : python -m SimpleHTTPServer 6734

Then on the browser type localhost:6734 as the URL.

Method 2: Use PHP to run an inbuilt localhost server

Php also has an i built web server that can run your files on local host.

Check if PHP is installed

PHP is usually installed when installing a local LAMP, WAMP or LAMP server setup. You can easily check if you have python in your system by typing: php –version

If PHP is installed, the output will be:

Othewise, if you can not get something like this on windows, read you can read how to check if PHP is installed and troubleshooting. You can Read on how to install php on Ubuntu or Windows or Mac OS X.

  1. Open the terminal on your system.
  2. Navigate to the folder containing the HTML file.
  3. Run the command: php -S 0.0.0.0:8000 or php -S localhost:8000 on the terminal. You get the following output:
  1. Go online to the: http://localhost:8000. Your server should be able to see your page on the browser.

How to run a html file

Method 3: Use Node js to run html file on local host

If you have nodejs and npm installed,then you can install a http server by running this command in the terminal:

Navigate to folder where you have html file in terminal and type:

To run a specific html file, type:

When to use localhost to run a html page

When you are building and testing a web project that is in your laptop that must run on a server. Some projects require that you have a local server running in your laptop. Localhost is just a way of accessing the server that you are currently working on.

I still can’t get the server to work. What should I look for?

Make sure your are using a colon ‘ : ‘ after localhost and not a forward slash ‘ / ‘.

Most times you will see localhost url written as localhost:8000 or any other 4 digit number. This number is called a port number. The port number allows you to run many pages on localhost with different port numbers at the same time.

When you try to access localhost now, you will find nothing there. You need to host a html file on a server(on your computer) that serves a page on localhost. Once the server is ready, accessing the localhost on a browser will display the page or folder served by the server.

If you are new to HTML, you can learn and practice HTML on this website.

Share or support on:

Receive new content in your inbox

I send out an email when I create something new. Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

html by Grumpy Gannet on Mar 12 2022 Comment
html by Grumpy Gannet on Mar 12 2022 Comment
html by Grumpy Gannet on Mar 12 2022 Comment
html by Grumpy Gannet on Mar 12 2022 Comment
html by Grumpy Gannet on Mar 12 2022 Comment
html by Grumpy Gannet on Mar 12 2022 Comment
shell by Grumpy Gannet on Mar 12 2022 Comment
html by Grumpy Gannet on Mar 12 2022 Comment
html by Grumpy Gannet on Mar 12 2022 Comment
html by Grumpy Gannet on Mar 12 2022 Comment

With WebStorm, you can run entire applications, single scripts, or tests right from the editor, using the context menu or gutter icons. If you need to pass some parameters to your application or launch a tool, for example, an npm script, before running, create a language- or framework-specific Run/Debug Configuration and invoke it.

All the run configurations that are currently available in a project, are shown in the Select Run/Debug Configuration list.

If you want to see the list of all currently running applications, select Run | Show Running List from the main menu. Refer to the Show running processes section for details.

After a run session starts, the icon in the Run tool window and in the Run/Debug Configuration Selector toggles to .

You can configure some tools (for example, npm scripts) to be launched before running. In this case, WebStorm runs the tools, and after success will run the application. Otherwise, the application starts immediately.

Quick way

If you are not going to pass any parameters to your program, and your program does not require any specific actions to be performed before start, you can run it right from the editor.

To run client-side JavaScript code in the browser, open the HTML page that references it.

WebStorm has a built-in web server that can be used to preview and debug your application. This server is always running and does not require any manual configuration. All the project files are served on the built-in server with the root URL http://localhost:/ , with respect to the project structure.

In the editor, open the HTML file with the JavaScript reference, hover your mouse pointer over the code to show the browser icons bar: , and then click the icon that indicates the desired browser. See Preview output of HTML files.

Open the HTML file with the JavaScript reference in the editor or select it in the Project tool window, and then select Run from the context menu.

How to run a html file

WebStorm creates a temporary run/debug configuration of the type JavaScript Debug which you can later save, see Saving a temporary configuration as permanent.

To run a script, open it in the editor or select it in the Project tool window, and then select Run