Computer Science Week: Let's Learn HTML Code!

December 4-10 is Computer Science Education Week!

Computer Science Education Week coincides with the birthdays of two computer science pioneers. A pioneer is a person who is one of the first to enter a field of study or explore a new area of thought. 

Who were these two computer science pioneers?

1. Ada Lovelace, born in England on December 10, 1815, is considered the world's first computer programmer.

2.  Grace Hopper, whose birthday is December 9, 1906, was an American computer programmer and Navy rear admiral. She contributed to the development of the COBOL language and is credited with popularizing the term "computer bug" in the programming community. 


Grace Hopper said, "To me programming is more than an important practical art. It is also a gigantic undertaking in the foundations of knowledge."

💻          💻          💻

What is HTML coding and is it difficult to learn? 

HTML (Hypertext Markup Language) is a computer language. One important trait when writing any type of code is to persevere, or never give up.  Sometimes you try an algorithm, or list of steps used to solve a problem, and it fails. Don't give up. Instead, adjust your algorithm. Try again! This strategy is called trial and error.

*     *     *     *     *

What keystrokes or symbols are needed to write HTML code? 

To write HTML code, use the following symbols:

Important: Do NOT add a space between the HTML tag and the word or sentence.

 

                                                                                                   

1.  To put text in italics, place this HTML code around the text:

 

 

The sentence will look like this when published:

 

Bloggers should always proofread a comment before publishing.

                                                                                                   


2.  To make text bold, place this HTML code around the text:

The sentence will look like this when published: 


Bloggers should always proofread a comment before publishing.

                                                                                                   


 
3.  To make a hyperlink, it gets a little tricky.

Use the following HTML code around the URL and add your own link word/words:

  [The URL is the address of the web page. It starts with http://www…]

The HTML code below:

Will become this hyperlink when published:

Mrs. Yollis’ Website

                                                                                                   

 Great Tip!

I leave a document on my desktop called HTML Code. All the code I regularly use is there. The hyperlink code is very tricky for me to remember. So, I leave several blank code links in the HTML Code document like this:

 

All I have to do is copy/paste the URL where it goes and change the word link into what I want the link to be. I then copy the customized code into my comment. It really saves time for people like me who cannot remember the hyperlink code!

 Here is a video demonstrating how easy it is to a create a hyperlink if you have the code set up in a Word doc.

If you like to add fun shapes...here are those codes!

Here are the codes for some animals!

&#x______; are needed to complete the code. 

Challenge: Leave us a comment with at least two HTML codes!

 Happy coding, everyone!

Hour of Code Started Today!

REMINDER: Edublog Award voting is open until December 15. We are nominated in THREE categories. Please consider voting!  Click here to give us your thumbs up/like. 

Computer Science Education Week

December 8 - 14, 2014

To celebrate, Mrs. Yollis and her students will participate in the Hour of Code!

Here are some screenshots from the Hour of Code website. 

Computer Science week coincides with the birthdays of two computer science pioneers. A pioneer is a person who is one of the first to enter a field of study or explore a new area of thought.  Ada Lovelace, born in England on December 10, 1815, is considered the world's first computer programmer. Grace Hopper, whose birthday is December 9, 1906, was an American computer programmer and Navy rear admiral. She contributed to the development of the COBOL language and is credited with popularizing the term "computer bug" in the programming community. Grace Hopper said:  

To me programming is more than an important practical art. It is also a gigantic undertaking in the foundations of knowledge.

For students: 
We will be accessing these Hour of Code Tutorials. However, you are free to go to these tutorials at home with your parents. Share what you've learned with the class in the comment section!


On Monday, we will start our Hour of Code using the Angry Birds tutorial. This tutorial will help us learn the "drag and drop" method of programming as we solve fun puzzles. After solving the puzzles, we can create our own puzzle!

 Here is a screenshot of puzzle 1. 

Here is a screenshot of the opening puzzle. Together we will drag and drop blocks. The blocks will snap together, and then we will run the program. Through trial and error we will persevere and become computer programmers! 

For those who are ready, there is a tutorial using Anna and Elsa! Here are some screenshot I took as I explored the tutorial. 

Notice verbs like move and turn. 

What does the term 90 degrees mean? Can Elsa turn more than 90˚? Less than 90˚? 

What are pixels? 

For parents and teachers: 
Learn about the Hour of Code organization
Hour of Code Q & A Hangout with Hadi Partovi, the creator of Hour of Code
Hour of Code Tutorials

Here are some shots from our first day of coding:

We used a paper bird to help us figure out right from left! 

Follow the beak!

After we did a few tutorials together, students worked in groups.

Follow the beak! 

What did you enjoy about being a computer programmer?

Share any tips or definitions that will help us all become better programmers.

Let the coding begin!

Scratch•ing the Surface of Visual Programming

Mrs. Yollis and her students love learning about computer programming. During the Hour of Code project, Heather's mom came in and taught about JavaScript using the Khan Academy. 

On Friday, Nick's mom came in to teach the class about an online educational programming language called Scratch. First, the good doctor shared a presentation about her work as a computer scientist. 

Photo by Mrs. Yollis 

Next, she shared some information about the computer program called  Scratch.

Here is the sprite that is first introduced when you open the program. By clicking and dragging events, you can make the sprite move, slide, rotate, or talk. The event options are limitless! 

When using Scratch, you may create using this orange sprite. However, the Scratch program allows creators to choose a new sprite or create a unique character from scratch. :-) 

(To start from scratch is an idiom that means to start at the beginning.)

Students worked in teams to create a program. 

Photo by Mrs. Yollis

As you can see, the events lock together to make a sequence of events. 

Photo by Mrs. Yollis

At the end of the session, teams came up to the front to share what they had created. It was interesting to see the different programs.

Photo by Mrs. Yollis

Photo by Mrs. Yollis





 Here is a link to learn about Scratch. 
Scratch must be downloaded by a parent. Parents, here is a direct link to the PARENT INFORMATION PAGE.



There is no iPad application for Scratch.

*     *     *     *     *



Do you see the word play in the title? 

Scratch•ing the Surface of Visual Programming
(Hint: Scratching the surface is an idiom.)


What did you think about the presentation?

What have you created? 

Hour of Code

Mrs. Yollis' class participated in the Hour of Code program! Heather's mom, who has a degree in computer science, came in and with Heather's help, taught the class how to write JavaScript. 

First, the class was introduced to some computer vocabulary.

Next we used the Khan Academy to learn JavaScript.

*     *     *    *     *

These are the steps we took to begin learning coding at the 

Khan Academy:

First, click on LEARN and select Computer programming.

Next, select Computer programming and click on  

+Create Program

Finally,  write code in the box on the left, and it will show you what you've created on the right. Tips for writing code can be found under the boxes.

Some people worked on the laptops. Notice the two yellow ellipses that have been coded.  

Others worked on the ipad. We did not use the ipad app. Instead, we went on Safari, located Khan Academy, and wrote code from there. Mrs. Wang made copies of the coding information from the Khan Academy site.

Mrs. Wang recommended making a background first. 

Here is the coding information for coloring:

Next, add some other shapes to create a picture. 

Thank you, Mrs. Wang, for making us into beginning coders! 

After school, Shayna went home and created this picture. She sent the class a screen shot and it became a post on our 365 photo blog. 

In the comment section of the Creative Code 365 post, Heather added a few lines of code that makes repeated shapes as you move the mouse. Everyone love it!

Here is that code:

background(0, 255, 17);

fill(255, 0, 0);

var draw = function() {

ellipse(mouseX, mouseY, 76, 70);

};

Thank you to Heather and her mom for a great first lesson on coding!

What did you like about coding?

What advice can you lend?