Create a Web Page in Google Drive

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 Publically

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:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>About Web Page </title>
    </head>
    <body>
    <h1>Web Page Title</h1>
    <p>Type the information for your page.</p>
    </body>
    </html>
    
  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.

  1. LEAVE THE APP WINDOW OPEN!
  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.
TechnoKids Computer Curriculum

Fun Computer Activities for Kids

Christa Love

About Christa Love

Christa Love, Vice President - Christa Love has a passion for education and technology. A graduate from Brock University she has an Honors Bachelor of Arts in Child Development, Bachelor of Education in Primary and Junior divisions, and Masters of Education in the area of Curriculum Studies. Her work at TechnoKids Inc. began more than ten years ago as an instructor at a local learning center. Since that time she has operated the summer camp program, taught at the research and development center at John Knox Christian School, trained educators throughout the province on issues related to technology integration, and overseen the curriculum development of hundreds of technology projects. In recent years, Christa has become the vice president of TechnoKids Inc.