Making web pages with HTML and a little JavaScript is a great way to introduce middle schoolers to text coding. Over the years I've introduced 6th graders to web coding using syntax coloring programs like Notepad++ and Text Wrangler, plaintext editors like Text Edit, and visual editor Dreamweaver. But this past year our school moved to Chromebooks and I had to find a cloud-based solution for HTML editing.
After trying several Chrome apps I settled on HTML Editey. Chrome Dev Editor seemed like the
ticket for a while but when I tried it in class there were too many glitches, one being a few students couldn't access their Drive through the app as you're supposed to, and another that inexplicably some of their HTML turn into ellipses and unlike a Google Doc there are no past revisions to recover lost content. I also tried Text and similarly some students couldn't access their drive files to edit them. HTML Editey is different in that you find your html file in your drive and "Open in" Editey instead of opening the app first and hoping it can connect to your drive files. The only problem I had with Editey is there was often quite a lag between making edits and expecting them to show up on the drive version. What appears to be happening is when you open a file in Editey it is creating a copy on their servers and those edits are periodically saved back to the copy in your drive. But there can be up to a minute lag for that save to happen, so students just need to be patient, which is hard...
ticket for a while but when I tried it in class there were too many glitches, one being a few students couldn't access their Drive through the app as you're supposed to, and another that inexplicably some of their HTML turn into ellipses and unlike a Google Doc there are no past revisions to recover lost content. I also tried Text and similarly some students couldn't access their drive files to edit them. HTML Editey is different in that you find your html file in your drive and "Open in" Editey instead of opening the app first and hoping it can connect to your drive files. The only problem I had with Editey is there was often quite a lag between making edits and expecting them to show up on the drive version. What appears to be happening is when you open a file in Editey it is creating a copy on their servers and those edits are periodically saved back to the copy in your drive. But there can be up to a minute lag for that save to happen, so students just need to be patient, which is hard...
So what did we do with Editey?
For an overview, I used Doctopus to share out a basic head/body template with all students, taught basic HTML block level tags, then a few JavaScript functions, then a little CSS formatting to make it look nice. I will also show how you can access the live Google hosted version of all of the students' html pages.
HTML Template
Here's what I gave them to get started. I could make them type this but I find it's a discouraging way to start, having to type syntax they don't understand and have no context for. Head, body, what? It's only 9 lines but making them type it is a good way to lose the students who aren't very interested and intimidated by code. Of course we talk about the structural significance of each block as we fill them in. Editey has a very nice interface, by the way. The live preview on the right gives students immediate feedback. JavaScript and the body tag bgcolor attribute do not work in the live preview, however.
Accessing the Google Hosted Pages
Amazingly, Google will host everything for you! The trick is finding out how. For each of the students' pages, do the following:
- Click the 'share' link in Drive. Click the 'Link sharing' drop down and turn on to Public.
- Copy the provided link.
- Find the page ID buried in the link. For example, in this link, https://drive.google.com/file/d/0B8woEoNKOLbYdEtqUG9XRjZXTzA/view?usp=sharing, the page ID is "0B8woEoNKOLbYdEtqUG9XRjZXTzA".
- Insert the ID in the following link format: http://googledrive.com/host/ID/.
- Using the above example ID the full link would look like this: http://googledrive.com/host/0B8woEoNKOLbYdEtqUG9XRjZXTzA/
What I did with these is make a web page table of links to each student's page, got the public link to that index of pages, and posted it in our class portal so they could see their pages as they update them. Students can also go back to the html file in their Drive, download it to the Chromebook, and double click it. It will open in the browser, though they do have to remember the lag I mentioned above.
HTML Tags
We first practiced the following HTML block tags:
<!DOCTYPE html>
<html>
<head>
<title>My HTML</title>
</head>
<body bgcolor="red">
<h1>Hi, my name is Anna.</h1>
<p>My favorite food is sushi. I have two dogs names Mitsy and Spark. My favorite show is Grey's Anatomy.</p>
<p>
<img src="http://netflixlife.com/files/2015/03/Greys-Anatomy.jpeg" width="400">
</p>
<p>What is my favorite country to visit?</p>
<p><a href="http://www.newzealand.com/us/">Click to find out!</a>
</p>
</body>
</html>
- Displaying local image files would actually be possible but overly complicated, so having students link to image files is best.
- The background color doesn't show up in the live preview but they love being able to bring color to the page so easily.
JavaScript Functions
I've taught students inline JavaScript and how to write and call functions. I will say I taught the latter this year and it was harder for them to catch on to, so I plan to try some other teaching strategies to get it across. Here are examples of what we did with JavaScript functions, the function calls color matched to the functions:<!DOCTYPE html>
<html>
<head>
<title>My HTML</title>
<script>
function guessFood() {
alert("It's pasta!");
}
function guessFavColor() {
document.bgColor = "yellow";
alert("It's yellow!");
}
function guessFavAnimal() {
var myGuess = prompt("Can you guess?");
if (myGuess == "camel") {
alert("Yes, you are right!");
} else {
alert("Sorry, it's a camel.");
}
}
</script>
</head>
<body bgcolor="red">
<h1>Hi, my name is Anna.</h1>
<p>My favorite food is sushi. I have two dogs names Mitsy and Spark. My favorite show is Grey's Anatomy.</p>
<p>
<img src="http://netflixlife.com/files/2015/03/Greys-Anatomy.jpeg" width="400">
</p>
<p>What is my favorite country to visit?</p>
<p><a href="http://www.newzealand.com/us/">Click to find out!</a>
</p>
<p>Guess my favorite food!</p>
<p>
<button onclick="guessFood();">Click me</button>
</p>
<p>Guess my favorite color!</p>
<p>
<button onclick="guessFavColor();">Click me</button>
</p>
<p>Guess my favorite animal!</p>
<p>
<button onclick="guessFavAnimal();">Click me</button>
</p>
</body>
</html>
Style and Position With CSS
Finally, we add some formatting and position styles with CSS. This section goes under the title tag, above the script section, and parts of the body text are positioned by surrounding them by div class="left"
or div class="right"
block tags.
<style>
body {
color:blue;
font-family:Verdana;
}
.left {
position:absolute;
top:150px;
margin-left:5%;
width:40%;
}
.right {
position:absolute;
top:150px;
margin-left:50%;
}
</style>
Thoughts
Introducing web coding with Chromebooks and Drive obscures from the students any awareness of relative file links and paths. With Drive hosting the web pages in the obfuscated way it does (probably because Google doesn't want to advertise free hosting), you can't link to another Drive file by its file name even if it's in the same folder. The unique identifier of a Drive file is not its file name, but its long (randomly generated?) ID. I find relative file paths a hard concept for students, especially middle schoolers, and this environment is not conducive to learning it.
3 comments :
Hi I tried your tutorial, I was unable to open the website with the ID, google kept showing the 405 error page. DId Google change something. Otherwise, it looks pretty easy to do with kids. THANKS
@Ysabel Oh no! It looks like the Google Drive web hosting doesn't work any more. That's too bad, I'll have to see if there's any other way to do it with Chromebooks.
Thanks Erik, I am going to use your code above to start the CS impact project. I have couple of girls who would love to start coding with an editor, and follow your structure to help them out. Awesome post!
Post a Comment