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:
- In the Chrome web browser view your Google Drive.
- Make sure you are in the old version of Google Drive. Click the Settings gear and select Leave the new Drive.
- Click CREATE. Select Folder.
- Name the folder website. Click Create.
- Select the folder. In the left pane, select DETAILS.
- Click Share in the SHARING area.
- Click Advanced. In the Who has access area, click Change.
- Select On – Public on the web. Click Save.
- Click Done.
- A link will appear on the Details pane in the HOSTING area. This is the URL of the website.
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:
- In your Google Drive, click CREATE.
- Select Connect more apps.
- In the search box type in the name of the app. For example, Drive Notepad, ShiftEdit, or HTML Editey.
- Click CONNECT.
- 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.
- Click OK.
- 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.
- Click on your website folder from step 1 to open it.
- With the folder open click CREATE. (This will cause the index.html you create to be stored in the shared folder)
- When asked to create the file in the shared folder, click CREATE AND SHARE.
- 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.
- 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!
- 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>
- 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.
- LEAVE THE APP WINDOW OPEN!
- Click the Google Drive browser tab.
- Select the website folder you created in step 1.
- Click the link on the Details tab in the right pane to view the web page you just created in step 3.
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:
- Click on your index.html file.
- Click the Open arrow and select the HTML Editor app from the list.
- To preview the web page complete step 4.