Tag Archives: html

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.

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!

6 Reasons to Teach Programming to Your Students

HTML and CSS Lessons for Beginners

Teach your students how to build a web page using HTML and CSS code.

Should you teach programming skills to middle and high school students? Yes!

Top 6 Reasons to Teach Programming to Your Students

  1. Learn Computational Thinking Skills:
    Programming makes a student think logically by using algorithms – step-by-step instructions to perform a function. If any of the steps are incorrect or inaccurate, the result has an error. Learning to code requires students to build, practice, and reinforce this type of analytic thinking.
  2. Build Problem Solving Strategies:
    Making an error when coding results in immediate feedback: “Something is wrong!” The ability to review, diagnose, and edit code as well as the perseverance needed to solve problems are not only important for coding, but indispensable life skills as well.
  3. Practice Higher Level Thinking Skills:
    Language, Math, and Social Sciences teach comprehension, recall, and application learning processes. The analytic aspect of writing code is a valuable higher level thinking skill. Programmers often refer to the task of coding as ‘learning to think’. The designing, planning, and creating aspects of programming also build these advanced cognitive competencies.
  4. Prepare for Career Opportunities:
    Computer Science is the ‘new literacy’ for the next century. Computer programming is a valuable skill in the digital age. Jobs for computer scientists are growing with the demand exceeding the supply. Programming is not just a key skill in the information technology industry, but in many other areas, for example:

    • Manufacturing – designing ways to improve products and production techniques
    • Healthcare – managing research data, patient information, security
    • Retail – handling inventory management and projecting trends
    • Weather forecasting – developing models to predict severe weather
    • Arts – creating digital music
    • Financial services – managing trading and ensuring security
  5. Create Technologies, Don’t Just Learn to Use Them:
    Technology products used today will quickly become outdated. If we focus only on teaching students how to use devices such as computer apps, smartphones, and tablets, they become passive users. Students can develop a deeper understanding of how digital devices work, how they are created, and how they can be improved by studying the coding needed to run them.
  6. Empower Students:
    When students successfully complete a coding challenge, they feel a real sense of satisfaction and gratification. Students are motivated and engaged in coding tasks. Seeing programming come to life as a web page, app, or other result is exceptionally rewarding.

Consider adding computer programming to your technology curriculum. Your students will benefit right away and in the future.

If you are planning to teach programming refer to the TechnoHTML5 project. It has HTML and CSS lessons for middle school and high school students. The activities are perfect for beginners. Don’t worry if you are new to coding. The instructional materials include detailed assignments, assessment tools, sample files, templates, and enrichment activities. View HTML and CSS lessons from TechnoHTML5.