Create a Web Page in Google Drive

Create web page in Google

TechnoKids creates a technology project for teachers interested in teaching an introduction to HTML and CSS. We encounter many frustrated Chromebook users that want to complete the activities but are not sure how to modify them to suit their learning environment. I have some great news! You can code a web page in Google Drive with the help of an HTML Editor app. I spent the morning testing several apps to find one suitable for Grade 7 and 8 students. Here are the steps you need to complete to make a web page with HTML code in Google Drive:

STEP ONE – Share a Folder Publicly

You don’t need to upload your files to a separate website domain. Instead, any folder that is shared publically in Google Drive is given a URL. This URL becomes the website domain. You will put the index and pictures files into this folder. Here is how:

  1. In the Chrome web browser view your Google Drive.
  2. Make sure you are in the old version of Google Drive. Click the Settings gear and select Leave the new Drive.
  3. Click CREATE. Select Folder.
  4. Name the folder website. Click Create.
  5. Select the folder. In the left pane, select DETAILS.
  6. Click Share in the SHARING area.
  7. share settings

    You need to change the share settings.

  8. Click Advanced. In the Who has access area, click Change.
  9. create a public folder

    You need to make the folder public.

  10. Select On – Public on the web. Click Save.
  11. public folder

    Any files in the folder will be viewable by anyone.

  12. Click Done.
  13. A link will appear on the Details pane in the HOSTING area. This is the URL of the website.
  14. folder url

    The folder has a URL.

Inside this folder you will create the index.html file and store all the pictures you are going to include on the web page.

2. Install an HTML Editor App

To install an app:

  1. In your Google Drive, click CREATE.
  2. Select Connect more apps.
  3. In the search box type in the name of the app. For example, Drive Notepad, ShiftEdit, or HTML Editey.
  4. Click CONNECT.
  5. You will be asked to make it the default app. I typically remove the checkmark so that I can pick the app I want instead.
  6. Click OK.
  7. Now you can create and edit files with the app!

3. Create an Index File

An index.html will contain the code to make the web page.

  1. Click on your website folder from step 1 to open it.
  2. With the folder open click CREATE. (This will cause the index.html you create to be stored in the shared folder)
  3. When asked to create the file in the shared folder, click CREATE AND SHARE.
  4. Since it is the first time using the app, you will be asked to grant permission. You must complete this step before the app will open. You only need to do this once.
  5. Select the HTML editor app you connected in the previous step. The app should open in a new Chrome browser tab. You should have two tabs open!
  6. tabs

    You should have two tabs open in the Chrome browser.

  7. Type your code. For example:
    <title>About Web Page </title>
    <h1>Web Page Title</h1>
    <p>Type the information for your page.</p>
  8. Save the file as index.html (Every app has different saving options)

4. How to Preview the Web Page

To see how the web page will look you need to open the shared folder you created in step 1.

  2. Click the Google Drive browser tab.
  3. Select the website folder you created in step 1.
  4. Click the link on the Details tab in the right pane to view the web page you just created in step 3.
  5. folder url

    The folder has a URL.

5. Write Code and Preview Web Page

You can now toggle back and forth between the coding app and the web page. TIPS:

  • Save your changes in the coding app. If you cannot save changes (HTML Editey), you will need to wait until the app automatically saves the file.
  • You will need to Reload the web page preview to see the updated code changes.

6. How to Edit the Code

At some point you will need to leave your computer and stop coding. When you come back to the device you will need to reopen the saved index.html file to continue to write code. To do this:

  1. Click on your index.html file.
  2. Click the Open arrow and select the HTML Editor app from the list.
  3. To preview the web page complete step 4.

Christa Love

Christa Love, Curriculum Developer & Teacher ~ I am passionate about blending technology into curriculum. Whether it is programming, video production, graphic design, or digital citizenship, I am interested in how apps and tools can be used to enhance learning. Throughout the years I have designed many TechnoKids technology projects. My favorite part of curriculum development is field-testing the ideas to determine the activities that work best in real classrooms. I write about what I have learned that can save teachers time in their own curriculum planning.

You may also like...