Tag Archives: html coding

Design a Coding Unit for the Classroom

STEM learning objectives are being included in many school, district, and national curriculum standards. As a result, educators are challenged with creating engaging and challenging instructional materials to teach computer science skills. But most teachers don’t have a technology background, much less knowledge of programming. Here’s some help. Whether you’re using ScratchJr, Scratch, HTML and CSS, or Python and the Turtle Library, the activities will be similar. Following are some basic strategies to consider when you start to design a coding unit for the classroom.

Practice Sequencing Algorithms Offline

Design a coding unit to include offline exercises. This will develop computational thinking. A starting point for instruction is to build algorithms. An algortithm is a description of the program. It uses words and symbols to sequence the instructions.

The logical order of coded instructions is critical. To build this skill, instruct students to physically act out and order a list of directions in simple, everyday language first. For example, if a programmer had to write a program for the task of putting a piece of paper into the trash, it may have the steps:

design a coding unit

Have students act out the steps they listed to check them. Or, have a list of mixed up steps that students must unscramble to place them in the correct order.

Start Simple

When you design a coding unit, move from simple to more complex code slowly.

Don’t offer a complete set of instructions in code and have the students copy it and run it to see the result. This may intimidate young programmers and even make them think that coding is too difficult. Moreover, they won’t learn what each part of the code does.

Instead, write a few lines. Then test the result. The instant response will create a connection between the coding and its function.

coding for kids

In TechnoWhiz, primary students are introduced to ScratchJr by using one block at a time to move the character on the stage. They observe the resulting motion. Then they combine a series of blocks to create a script and see the effect. Next, they add more characters and move them, and learn to loop their actions. By the end of the project, they are able to make an interactive, one-of-a-kind racing game with a background, formatted text, and characters moving at different speeds, dancing, and talking!

Use Trial and Error

Invite students to experiment with values to figure out what works. Try a number or value. Does it need to be higher or lower? Test often to see what works.

Encourage exploration. For example, when using Python and the Turtle Library, circle(50) draws a circle with a specific size. Students can explore by changing the number to a higher value and a lower one. Or code left(90) to turn the turtle symbol. Then change the value to see what angles the turtle turns. The repeated experimentation will result in learning that can be applied in subsequent activities.

Teach Debugging

Don’t wait until mistakes are made. Early in the project, create errors with intention. Have students ‘break‘ the script, then fix it. As a result, they will recognize mistakes that may be made later in their own programming and be more likely to correct them independently.

design a coding unit

Apply Skills

Introduce a skill, repeat or review it, and then transfer it to another application using the program. Avoid teaching a concept in isolation. When students re-use skills in different contexts, they will accumulate their knowledge and be able to apply it in their own creative projects.

teaching coding to kids

For example, in TechnoTurtle students learn to use Python to control the movement of a turtle symbol. Then they apply their skills to write scripts to draw pictures and to move the turtle through a maze. In other parts of the project, they learn about variables. Then they use this concept to create Mad Libs and to produce an interactive carnival game.

Show Samples

Demonstrate how a completed project might look at the beginning of a lesson. This will serve multiple purposes: students will have a clear idea of what they’re making, they will be inspired to create their own unique version, and the sample can be a coding reference guide to use if trouble shooting is needed.

In TechnoHTML, a sample web page about skateboarding sparks student interest and demonstrates the skills they will learn using HTML and CSS:

design a coding unit

  • Formatting text
  • Adding images
  • Making lists
  • Linking to sites

Provide an Opportunity to Share

At the completion of the project, ensure that students have an authentic audience. This helps students to connect their work in the classroom to the real world and see a purpose for their efforts. Their peers are a perfect audience. Celebrate the finished projects and encourage interaction and feedback. The digital nature of programming projects makes it easier than ever to share work with classmates, family, and friends.

design a coding unit

For example, in TechnoCode, middle school students place their collection of completed animated scenes, stories, mazes, and games into an Activity Studio to share with others.

Then they invite feedback and recommendations for improvements.

Reflect on Learning

Finally, give students an opportunity to reflect on their experiences in learning to code. In either written form in a journal or as a class discussion, ask:

  1. What did you like about learning to program?
  2. Is there anything in your project that you would like to change?
  3. What do you wish you knew how to do?
  4. Have you learned anything about yourself?
  5. What advice would you give to a beginner programmer?

design a coding unit

In TechnoTales, students in grades 2 to 5 use five simple reflection responses to gain some insight into their learning.

The young programmers used Scratch to design a story with four scenes, multiple animated characters, a plot with a dilemma to solve, and a happy ending!

Design a Coding Unit

TechnoKids has elementary and middle school programming projects for Scratch Jr, Scratch, Python and the Turtle Library, and HTML. Before starting to design a coding unit of your own, try one! Visit the TechnoKids online store.

design a coding unit

TechnoKids has programming projects to teach ScratchJr, Scratch, Python, and HTML and CSS

Chromebook Users, HTML Coding, and Pictures

Chromebooks and HTML

TechnoKids has recently released a programming project written especially for Chromebook users. TechnoHTML5 has long been a fan favorite among teachers. It’s now been edited specifically for use with Chromebooks and Google Drive. Students create a web page using HTML and CSS, style text, add images, and insert links.

Using a web-based text editor to write HTML has some unique features. One of the things we really liked about using a Chromebook was the free text editor HTML Editey. On one screen that is divided into two side-by-side panes, the user can write code and simultaneously see a preview. The ability to see successful results and troubleshoot problems on the same screen is great! See our previous post that lists all the ways that this app can make Chromebook users into skilled web page developers.

Adding pictures to an HTML project on a Chromebook is unique, as you are using a web-based app. Instead of collecting images and saving them in a folder to upload with the HTML file, you have to link to existing images on the Internet. Here are some tips to make that job easier for your students.

chromebook users

First, Consider Copyright

As responsible digital citizens, students should be familiar with usage rights. Ensure that they know that they cannot simply link to any image they want.

Some pictures need to be purchased to use them. Those will often have a watermark, or a company name, printed on them covering part of the picture. Other pictures may have a note describing how they can be used while others are free with no limitations on use. These are often called royalty-free.

Copyrighted pictures posted online may have a copyright © symbol on the image with the date or name of the owner. This is a way of identifying who took the picture. If students want to use a copyrighted picture to complete school work, in most cases they can. However, the copyright symbol must not be removed.

Most search engines can filter images to quickly find those that you can use by license or usage rights. Before copying an image web address, have students check to make sure the picture may be used in school work.

Search for an Image

Narrow the search: When searching for pictures to use on a web page with a Chromebook, you may want to filter the search. In Google Images, click Tools. Change the size to Medium to avoid large file sizes. From Usage Rights, pick a choice that allows you to use the picture.

Look at the source: When previewing the image thumbnail, look at the source of the picture. If it is from Pixabay, you cannot link to the image.

Check the picture size: A typical web page is about 960 pixels wide. Use this as a guide when selecting images. Rest the cursor over an image thumbnail. The pixel size will show. Is it too large?

Test the Image

  1. Copy the image address:Chromebook and HTML

    • When you find a picture you want, click the thumbnail to see it in a preview window.
    • Right click on the image.
    • From the menu, choose Copy image address. TIP: To right click on a Chromebook, press the ALT key at the same time you click the mouse button or track pad.

  2. Test the image web address to make sure that it will work:

    • Open a new tab in the web browser.
    • Click inside the address bar.
    • Right click and select Paste or press CTRL + V. Press ENTER. Can you see the picture? If yes, you should be able to link to it. If not, find another image.

TIPS:
You may need to find a different picture if the web address…
• is very long.
• does not include the picture file type such as .jpg or .gif .
• has many symbols.

How to Add an Image Using a Web-Based Text Editor

  1. Place the cursor where you want to add the picture. Type:

    <img src=”” alt=”description”>
  2. Place the cursor between the pair of quotation marks and press CTRL + V or right click and pick Paste to add the image web address copied earlier:

    <img src=”http://www.website.com/picture.gif” alt=”description”>
  3. View the picture in the web page preview pane.

More Tips for Adding Images for Chromebook Users

Picture Dimensions:

It’s good practice to include the width and height of the picture in the img tag. The picture will display without this information. However, it is helpful to the web browser.
For example:

<img src=”http://www.website.com/picture.gif” alt=”description” width=”600″ height=”400″>

To discover the picture dimensions, insert the image into the web page, right click on the image and select Inspect.

chromebook users

Check picture dimensions.

If you want to resize the picture, change the figures in the code by a proportional amount, for example, divide both width and height by 2 to make the image smaller on the web page:

<img src=”http://www.website.com/picture.gif” alt=”description” width=”300″ height=”200″>

Add Breaks to Adjust Text:

One easy solution to change the placing of a picture and text is to add a number of breaks <br> before or after text. Or, divide a large paragraph into two smaller ones.

Wrap Text:

By default, pictures are inline and aligned to the left. You can change the float of an image to wrap text.

For example, make the image float to the left and the text wrap around it by adding the code:

<img style=”float: left;” src=”http://www.website.com/picture.gif” alt=”description”>

Create a Picture Class:

To apply different style options to pictures, you can create classes. If you add a style to the img element in the head of the web page document, all the pictures will look the same.

For example, you can create a class called .pictureright that can be applied to all the pictures that you would like to align to the right. You can apply settings to make a unique style. The code may look something like this:

.pictureright { float: right;
margin-right: 50px;
border-style: solid;
border-width: 5px;
border-color: orangered; }

Then, in the body of the document, add the .pictureright class to the code an existing image:

<img class=”pictureright” src=”http://www.website.com/picture.gif” alt=”chromebook users”>

Exclusively for Chromebook Users

Find these ideas and lots more in TechnHTML5 for Chromebooks. See samples and investigate the source code that constructed them. Create a unique web page using the Student Workbook in digital or printed format. Integrate programming into curriculum. Enhance STEM skills to make your students future-proof!

Teach HTML Coding using Chromebooks

A web-based HTML Text Editor is required to teach HTML coding using Chromebooks. There are several free apps available that integrate with Google Drive. This allows your students to easily create or edit HTML files.

If you are using a Google Classroom you may need to gain permission from your system administrator to have students connect an HTML Text Editor to their Google Drive. Our favorite app is HTML Editey . If you are unsure if your students have access to this app, refer to the section Multiple Ways to Access HTML Editey at the bottom of this blog article for helpful suggestions.

Use HTML Editey to Teach HTML Coding using Chromebooks

When developing the TechnoHTML5 version for Chromebooks we tested many HTML Text Editors. This technology project has STEM activities that spark an interest in computer science. Although the instructions will work with most web-based HTML Text Editors the app we recommend to introduce programming to kids is HTML Editey. Here is why!

Preview Pane

Students can live preview their HTML coding as a web page. This provides instant feedback when coding. HTML Editey has two panes. On the left side is the source code. On the right side is the web page. As students type an HTML tag they can immediately see the text, image, or hyperlink. Students can quickly notice if an HTML tag is correct. If it is not, the content won’t display. This is a great way to develop coding skills.

HTML Editey

Teach HTML coding using Chromebooks with HTML Editey. See a live preview of the web page as you code.

Line Numbers

HTML Editey has line numbers beside each line of code to label each HTML tag or CSS attribute. The number line is on the left side of the pane. This information provides an identifier when analyzing the code.

Temporarily Hide a Code Snippet

Most HTML tags have an opening and closing tag. The content between these tags can be temporarily hidden from view. This is helpful if you have a table or long list of items that is taking up space in the source code pane. Code snippets that can be collapsed or expanded are shown with an arrow beside the line number. When the arrow is clicked the code is no longer visible and a symbol shows in the code. When the symbol is clicked the code reappears.

Collapse HTML Code

Temporarily hide a group of code from view.

Wrap Text

Some HTML Text Editors keep each line of code as one continuous line that stretches across the screen. When there is lots of text it becomes difficult to read or edit. The great news is HTML Editey wraps long lines of code to fit inside the source code pane.

Color Code HTML Tags

HTML tags are used to add content to a web page. HTML Editey color codes the HTML tags. For example, HTML tags are red. Web addresses are green and equal signs are blue.

Color Code HTML tags

The color coding of HTML tags makes them easy to read.

Color Code CSS Tags

CSS is used to style the content of a web page. It sets how the background, headings, paragraphs, or images look. HTML Editey color codes the CSS attributes. To illustrate this point, CSS properties are yellow. CSS values are orange and the size of the CSS values such as px or % are purple. This makes it easy to code the appearance of the web page.

Color Code CSS

The color of CSS attributes helps to code the style of a web page.

Auto-pairing of Tags

Many HTML tags are written in pairs <body> </body> <h1> </h1> <table> </table>. Each pair has an opening and closing tag. For instance, a paragraph starts with the tag <p>. The text that will show on the web page comes next. The paragraph ends with the tag </p>. To speed up coding, HTML Editey automatically adds the closing tag.

Inspect Images

When using a web-based text editor to design a web page, images are added by linking to an existing picture on the Internet. File properties can be shown directly in the preview page of HTML Editey. Right click on an image and select Inspect or press CTRL + SHIFT + I on the keyboard. The dimensions will display.

The height and width information can be used to set the size of the image in your web page. To give you an idea, if the original image is 600 pixels wide by 400 pixels high but you want it smaller on your web page, you can divide each number by two to cut the size in half. This can be put into the img src tag to control the appearance
<img src=”https://www.site.com/picturename.gif” width=”300″ height=”200″>.

Inspect Image

Display image information to set dimensions.

Identify and Explain Errors

HTML Editey does show coding errors. A red x will appear beside a line number. When clicked a message displays describing the error. If you are new to coding often the explanations are not very meaningful. However, they do help beginners know that there is a problem they need to solve.

Multiple Ways to Access HTML Editey

There are several ways to access HTML Editey.

  • Option 1: Visit https://html.editey.com/ and login to Google Drive to create a new HTML document.
  • Option 2: To create a new HTML document, you can access HTML Editey directly from Google Drive. To do this, sign into your Google Drive. Click the New button and then select More. From the list, select HTML Editey from the list. Afterwards you may need to sign into the app to use it. If the tab opens to a blank window, you may not be signed into the HTML Editey app. Close the blank window. You may see a message. If you do, click Sign back in. Now, try the steps again. If this doesn’t work, use Option 1.
  • Option 3: To edit an existing HTML document in Google Drive, select the html file. Click More actions or right click the file in your Google Drive. Select Open with.
    Pick HTML Editey from the list.
    • TIP: To right click on a Chromebook, press the ALT key at the same time you click the mouse button or track pad.