Lesson4.9 a u4l2 html

L.O: STUDENTS WILL WRITE IN HTML

TEACHER’S CHOICE 15-30 minutes (<1 class period)

DO NOW:READ

Unit 4 Lab 2: Reliable Communication, Page 5

HTML is a special purpose programming language used only for designing web pages.

HTML controls the layout and style of text and images on a webpage, but it doesn't

allow for real programming like Snap! does.

People use other languages like JavaScript to program algorithms into websites.

The fundamental skeleton of every HTML webpage looks like the code below.

<!DOCTYPE html><html>

<head> <title>The Page Title Goes Here</title></head><body>The page content goes here.</body>

</html>

Browsers use HTTP to turn the HTML into the site you see.

Notice that most of the HTML tags (like <head>) have a closing tag (like </head>) designating the end, and the

relevant content goes between the two tags. (The color and indentation improve readability but are not necessary.)

For you to do…1.Experiment with this HTML example from w3schools.com.

Write some HTML code inside the <body> and </body> tags. You might add a second heading and more paragraphs.• You can create various sized headings for your

content using <h3></h3> tags. (Try numbers 1-6.)• You can add paragraphs with <p></p>.• You can link to another webpage:

<a href="http://bjc.edc.org">BJC Website</a>

You can create lists:

you can put comments in the HTML that will not show in the browser window using  tags:

• 2. Find the "View Page Source" feature of your browser (try right-clicking or control-clicking a page, or look around in menus like "View" or "Developer").• 3. Look at the source code for a few

different web pages and compare them to the pages. Make a list of the HTML formatting commands you can figure out. For example, what code makes text appear in bold or italics?

As you learn other programming languages, you will begin to see similarities. Here's an example from

JavaScript, a language that website developers use to add behavior and interactivity to websites:

• function myfunction() { defines a new procedure called myFunction.

• It's like in Snap!.

var x = is like the code below; var creates the new variable,

and = is like set in Snap!.

If there is time….• Visit the home of the first website ever built. It was

created using a very old style of HTML. • What code do you see that you recognize?• CSS allows website designers to control the style of

their web pages more easily. Experiment with the w3schools CSS example. Change the color of the heading or the background. Change the size of the text. Try some other changes too.

• Briefly explore the w3schools.com JavaScript example.

Take it further (Extension Activities)A. Teach yourself more HTML with the

w3schools HTML tutorial.B. After learning more HTML, you could:• Learn about CSS styles with the

w3schools CSS tutorial.• Learn more with the w3schools

JavaScript tutorial.

Snap! itself is written in JavaScript, and the block lets you

extend Snap! by writing new blocks using JavaScript. Some of the Snap! libraries are

written that way. You can experiment with this block by choosing "Libraries..." from the File menu, choosing "Set RGB or HSV pen color",

and looking in the "Pen" palette.

Check out p5.js, a web-based, JavaScript library of the visual

graphics language Processing. Learn more with these examples and

tutorials.

You may also enjoy these “Algorithmic Designs” done with

Processing.

Enduring Understandings:

• EU 6.1 The Internet is a network of autonomous systems.• EU 6.2 Characteristics of the

Internet influence the systems built on it.

Learning Objectives:• LO 6.1.1 Explain the abstractions in the

Internet and how the Internet functions. [P3]• LO 6.2.1 Explain characteristics of the

Internet and the systems built on it. [P5]• LO 6.2.2 Explain how the characteristics

of the Internet influence the systems built on it. [P4]

Essential Knowledge:

1. EK 6.1.1A The Internet connects devices and networks all over the world.

2. EK 6.1.1C Devices and networks that make up the Internet are connected and communicate using addresses and protocols.

3. EK 6.1.1D The Internet and the systems built on it facilitate collaboration.

4. EK 6.1.1G The domain name system (DNS) translates names to IP addresses

Essential Knowledge:• 5. EK 6.2.1A The Internet and the systems

built on it are hierarchical and redundant.• 6. EK 6.2.1B The domain name syntax is

hierarchical.• 7. EK 6.2.1C IP addresses are hierarchical.• 8. EK 6.2.2A Hierarchy and redundancy help

systems scale.

Essential Knowledge:

• 9. EK 6.2.2B The redundancy of routing (i.e., more than one way to route data) between two points on the Internet increases the reliability of the Internet and helps it scale to more devices and more people.

• 10. EK 6.2.2C Hierarchy in the DNS helps system scale.

• 11. EK 6.2.2I The size and speed of systems affect their use.

Education

Lesson4.9 a u4l2 html