Tag Archives: google docs

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!

New! HTML Coding for Chromebook Users

teach STEM skills

Teach HTML coding using Chromebooks

TechnoHTML5 has always been a favorite top seller for educators. With the current focus on STEM education, teaching HTML coding is more relevant than ever. Now that Chromebooks are prevalent in the classroom, TechnoKids has modified this popular project specifically for Chromebook users. Using a web-based text editor that integrates with Google Drive makes HTML coding a breeze. Now when you order TechnoHTML5 you will receive two versions: one for desktop HTML text editors such as Notepad or Code Writer and a version for Chromebook users that uses a free app such as HTML Editey.

STEM Activities to Learn Life Skills

I wrote in a previous blog about the reasons to teach programming. Of course, not many students will choose careers as computer scientists or program developers, but that’s not the main rationale for coding lessons. Strong communication skills and personality traits that lead to success in life and the workplace are critical goals for students. Learning to code does just that. As they learn to plan, organize, write, edit, and troubleshoot, students build invaluable life skills. Perseverance, problem solving, analytical thinking, creativity, and collaboration are enhanced by learning programming. These crucial personal habits will benefit students for life.

Everything Educators Need to Teach HTML

TechnoHTML5 for Chromebooks is an introductory HTML project for middle and high school grades. Students build a web page using HTML and CSS. They style text, graphics, and hyperlinks. Optional challenges have them format lists, add a background image, create a class, add animated gifs, and more! Step-by-step instructions with checklists in the Student Workbook build organizational skills. The Teacher Guide includes assessment tools such as a summary of skills and customizable marking sheet to evaluate the completed web page projects. Digital resources include sample files, reference sheets, review questions, and skill reviews for practice.

Coding for Chromebook

Students design a web page on the topic of their choice using TechnoHTML5.

Chromebooks Make HTML Coding Easy

HTML Coding is fun and easy using a Chromebook and Google Drive. coding for ChromebookOn a desktop, I found it cumbersome to always save my work in the text editor then toggle to a browser and refresh to see a preview. But using a free text editor for Chromebooks such as HTML Editey provides instant feedback. Two panes allow the user to write code and see immediate results.

There are many other great features to HTML Editey that we’ll write about in an upcoming post.

Google Docs Keyboard Shortcuts

In a previous post I listed some keyboard shortcuts for Google Slides. Here’s a list of some Google Docs keyboard shortcuts for a PC that may help to speed up your work.

keyboard shortcuts google docs

Action Keyboard Shortcut
Working with a Document
Open a file CTRL + O
Insert a page break CTRL + ENTER
Find CTRL + F
Find again CTRL + G
Find and replace CTRL + H
Insert a footnote CTRL + ALT + F
Find the word count CTRL + SHIFT + C
Go to the beginning of the document SHIFT + HOME
Go to the end of the document SHIFT + END
Print a document CTRL + P
Editing Shortcuts Common to Many Apps
Undo CTRL + Z
Redo CTRL + Y
Copy CTRL + C
Cut CTRL + X
Paste CTRL + V
Paste without formatting CTRL + SHIFT + V
Duplicate CTRL + D
Select all CTRL + A
Text Shortcuts Common to Many Apps
Bold text CTRL + B
Italic text CTRL + I
Underline text CTRL + U
Insert a numbered list CTRL + SHIFT + 7
Insert a bulleted list CTRL + SHIFT + 8
Insert a link CTRL + K
Increase font size of selected text CTRL + SHIFT + >
Decrease font size of selected text CTRL + SHIFT + <
Working with Paragraphs
Left align CTRL + SHIFT + L
Right align CTRL + SHIFT + R
Center align CTRL + SHIFT + E
Justify CTRL + SHIFT + J
Increase paragraph indentation CTRL + ]
Decrease paragraph indentation CTRL + [
Apply normal text style CTRL + ALT + O
Working with Images and Drawings
Resize larger CTRL + ALT + K
Resize smaller CTRL + ALT + J

If I’ve missed any that you use and find handy, please let me know. To see a list of PC, Mac, and Chrome OS shortcuts for computer, android, Iphone and Ipad go to Keyboard Shortcuts for Google Docs.

Blend Microsoft Office and Google Docs into Curriculum

It can be a challenge to blend Microsoft Office and Google Docs into one program. Are you teaching in a school that requires your students to learn how to use both Microsoft Office and Google Docs? Or are you in a Bring Your Own Device (BYOD) setting where students have a variety of devices and software applications? There is a solution. TechnoKids computer curriculum is a collection of technology projects that use a project-based approach to learning. Lessons are available for Microsoft Office, Office Online, and Google Docs.

There are advantages to students knowing how to use both Microsoft Office and Google Docs applications. By becoming proficient in both, they will be better equipped to select the best technology tool to complete the task. Use the suggestions below to effectively blend Microsoft Office and Google Docs into curriculum using TechnoKids instructional materials.

Blend Microsoft Office and Google Docs

How to Blend Microsoft Office and Google Docs into One Program

Provide students with the project version that suits their device

Almost every TechnoKids technology project has a version available for Microsoft Office 2016, Microsoft Office 2013, Office Online, and Google Docs (there are a few exceptions). This allows schools with a BYOD policy to accommodate all students. The entire class can complete the same technology project. However, each person will use the project version that matches the software on their device. Since TechnoKids instructions are illustrated and step-by-step, students can work independently to complete assignments.

Select projects based on device availability

Many schools have a blend of devices that are available to students. For example, some may have a computer lab with Microsoft Office installed on the desktops, with classrooms that have access to mobile carts with Chromebooks. In this case, to provide a balanced program, you can divide the TechnoKids technology projects between use in the computer lab and classroom. A computer teacher could select a technology project that targets technology skills using Microsoft Office. At the same time, a classroom teacher could select a different technology project to integrate Google Docs into a curriculum unit during language arts or social studies class.

Divide the projects by grade

Some schools have assigned which grades will use Microsoft Office and which will use Google Docs. Often this decision is based upon when students are permitted access to email and online storage services. TechnoKids computer curriculum is designed to gradually build proficiency in using technology tools. Teachers in the elementary grades can use the Microsoft Office technology projects to build a solid foundation and promote digital citizenship. Later, as students enter Junior and Senior High they can use the Google technology projects to transition easily to web-based applications. Alternatively, a school may prepare older students for Microsoft Office Specialist certification or the workplace. In this case, the school program could use the Google technology projects in the elementary grades and then transition in middle school to TechnoKids’ advanced Microsoft Office technology projects.

Choose a project according to instructional goal

Study your curriculum and know the skills you must teach. Often, the learning objectives will dictate whether Microsoft Office or Google Docs is required. For example, if you are expected to introduce database skills then you will be selecting a Microsoft Access technology project from the TechnoKids computer curriculum collection. Or if you are required to teach Mail Merge then you will be selecting a Microsoft Word technology project as this function is not available in Google Docs.

TechnoKids Computer Curriculum

Pick a project version based on program features that boost creativity

Sometimes you can complete the same technology project in either Microsoft Office or Google Docs, but the final product will not look the same. This is because the software applications offer different features which can restrict or enhance creative expression. Certain TechnoKids technology projects have more razzle dazzle if they are completed using Microsoft Office. For example, TechnoMap uses the Zoom feature in Microsoft PowerPoint which gives the interactive map more “wow” than one made using Google Slides. Another example is the visual story produced in TechnoToon. This is more fun to make in Microsoft PowerPoint because there is advanced control over animation and effects. If you must blend Microsoft Office and Google Docs into curriculum, determine which product features will engage students the most and use that as a guide when selecting the application to use.

Pick a project version based on program features that offer a richer learning experience

In most cases, Microsoft Office and Google Docs are similar. However, there are times when the tools available in one application are superior to another. For example, TechnoKids technology projects that include a poll, survey, or questionnaire are best done in Google Forms because it has more options and better reporting. Although TechnoKids provides choice, you should select the project version that provides students with the most meaningful learning opportunity.

Decide on a project version based on file output

Consider the final product version and how it will be shared with others. For example, will it be printed, shown as a video, displayed on a screen, or posted to a school website? The answer to these questions can determine whether to use the Microsoft Office or Google Docs version of a TechnoKids technology project. For example, you may want to use the Microsoft PowerPoint version if the goal is to convert a presentation to a video to play at an Open House. However, if the goal is to post a presentation to a class blog then it would be better to use the Google Slides version of the technology project, as it can easily be linked or embedded.

Sequence projects to compare applications

TechnoKids computer curriculum provides an assortment of activities that target the same technology skill area while making an entirely different product. For example, there are multiple word processing projects that have students create books, journals, fact cards, newsletters, biographies, resumes, cover letters, advertisements, and more! When offering a blended program, you may want to teach a word processing project with Google Docs and then a different word processing project with Microsoft Office. This will introduce your students to both applications without them becoming bored by completing the same task. It is also an excellent reflective opportunity to compare application features.

Select one project, but complete it using different versions

There are several ways to blend one project version with another. Choose the option that best suits your situation:

  • Start the project in one project version but complete it using another. TechnoKids computer curriculum includes the same technology project for multiple versions of software. If time is a restriction, you can select the beginning assignments from one version of the technology project to start to create a product in one application. You can then select the ending assignments from another version of the same technology project to complete the task in an equivalent application. For example, students could begin to design a fact card in Google Docs by adding content but complete the formatting of the publication in Microsoft Word. This option provides an excellent way to compare program features and maximize instructional time.
  • Create the project in one project version but extend learning using another. TechnoKids technology projects include extension activities. These additional lessons can be used to combine the use of Microsoft Office with Google applications. For example, students could create a publication or presentation using the assignments in the Microsoft Office version of a technology project. Upon completion, they could then use Google Docs to complete an extension activity related to the theme.
  • Create the project in one project version but collaborate using another. TechnoKids technology projects include activities that include an opportunity to work with others. To blend the versions together, students could use the Microsoft Office instructions to create a product. Upon completion, the file could then be uploaded to Google Drive and shared with peers. Using the Google version of assignments, students could co-author, engage in a question & answer session, or peer review using commenting.

We are here to help! If you are expected to blend Microsoft Office and Google Docs applications into curriculum, it is important to be familiar with program features to provide students with the best learning opportunity. Contact TechnoKids to discuss project selection or program design.