How does HTML help solve the problem of telling a computer what goes on a web page?

Monday/Tuesday - October 25/26, 2021

OBJECTIVE:  Inhaltsverzeichnis Show Monday/Tuesday - October 25/26, 2021 Wednesday - October 27, 2021 Thursday/ Friday - October 28/29, 2021 Friday - October 15th, 2021 How can we tell the computer what to put on a web page? What does HTML stand for how is it helpful? Why we use HTML in website? How does the browser know what information to present when it loads a web page? Identify the reasons someone might visit a given website Identify the reasons someone might create a given website HOMEWORK: ANY MISSING ACTIVITY GUIDES  PART 1: DO NOW: On your journal, please answer the following question:  If you could say something important to the whole world, what would it be? Why is it important to you? ​Share

Part 2:  REIVEW THE QUESTION OF THE DAY

Question of the Day: Why do people create web pages?

PART 3:  OPEN UP YOUR ACTIVITY GUIDE ON GOOGLE CLASSROOM: 
​

PART 4:  Go to the “Example Web Pages” level on Code Studio:

PART 5: 
BREAKUP INTO PAIRS

PART 6:  DIRECTIONS ON

1. Select three different pages from the list
2. For each website
   1. What did this person want to share with the world?
   2. Why do you think it was important to them?

​NOTE: IF YOU ARE HAVING DIFFICULTY IDENTIFYING WHAT THE PAGES ARE ABOUT THINK OF THE FOLLOWING: 

• Does the website creator want the user to do something?
• Does the website try to convince the user of something in particular?
• Does the website serve as a form of personal expression for the creator?

NOTE: WE WILL BE CREATING OUR VERY OWN WEBSITES:
PLEASE HAVE THESE QUESTIONS IN THE BACK OF YOUR HEAD: 
​

• What is this person sharing with the world?
• Why is it important to them?

PART 7:
Once everyone has had a chance to brainstorm about their sites, WE ARE GOING TO  SHARE OUR  THOUGHTS.

REMEMBER: YOU WILL BE CREATING YOUR OWN WEBSITE!

PART 8: EXIT TICKET: ANSWER THE FOLLOWING QUESTION ON A PIECE OF PAPER: 
3 - What are three topics you might be interested in creating a website about?
2 - What are two reasons you think someone might visit a website that you create?
1 - What's one thing you're most interested in learning about creating websites?

​

Wednesday - October 27, 2021

​ Objective:  Catch up on missing assignments  Stay focused Part 1 Make up day... I need everyone to open up their Schoology and figure out what you have missing. For those of you that have a 75% or lower we need a plan. Note: This period will remain silent and you can only ask questions to the teacher. If anyone else is done you will be assign to help somebody out. Exit ticket: One finished missing activity guide

Thursday/ Friday - October 28/29, 2021

OBJECTIVE: Introduced to HTML, the Web Lab tool, and how to navigate lesson resources  UNDERSTAND  HTML as a way to communicate the structure of a web page HOMEWORK:  ANY ACTIVITY GUIDE YOU HAVE MISSING​

PART 1: DO NOW:
​
ON A PIECE OF PAPER PLEASE ANSWER THE FOLLOWING:
​Imagine you wanted to explain to a person over the phone how to draw this web page. Write down clear instructions so that what they draw would perfectly match this image.

PART 2:
​Share with your neighbor 
​
PART 3: 
One student will share their website with me. Pretend I am on the phone and give me instructions on how to create your website.

Note: At the end of our drawing please list the things we needed in order to create the website:

PART 3.5:
Question of the day: Please think about this question as we move along today's lesson. DO NOT ANSWER IT YET..

How can we tell the computer both what to put on the web page, and how to organize it?

PART 4

• website content - the text and images on a website
• website structure - how the content of a website is organized

PART 5: 
Head to code.org Intro to HTML and explore the page! Type and click buttons people! 

In order to display a web page a computer needs to know a lot more than just what words or images should be on the screen. It needs to know where to place the content, what size to make it, what fonts and colors to use, and lots of other information that turns ordinary text and images into a full web page.
To solve this problem computer scientists have created languages that communicate this extra information. HTML, short for Hypertext Markup Language, is one language that helps solve this problem. 

PART 6: As a class share what you have discovered:

• What are the different parts of Web Lab, and what are they used for?​

Part 7: Please watch the video and have this question in mind: 

• What are the different parts of Web Lab, and what are they used for?

Note:

• Understand that the instructions for Web Lab levels appear in the wide panel at the top,
• The bottom three panels, from left to right, include:
  • the list of files that you will be working on, the area where they type in your code, and the area where you will see the results of your code
• The inspector tool
  • helps you to link parts of the web page with code that created them,
• The refresh and save button
  • allows you to update their webpage if it does not automatically update when you change the code
• The instructions panel
  • will also often include drop down questions and answers that students can use when they are completing an activity
• "Help and Tips" - remember this is on the top as well

​
PART 8:
Go back to Intro to HTML: READ FIRST BEFORE CLICKING LINK:

• NOTE: HOW TO READ THIS PLATFORM:
  • READ SECTION 1,  FOLLOWED BY SECTION 2, THEN SECTION 3: (SEE PICTURE BELOW) 
• Then, read the instructions on top
  • Click the Tip "How do I use the Inspector Tool?" on the right to learn how to use the Inspector Tool.
  • Follow the instructions in the web page to explore the web page and discuss with a partner how it is working.

NOTE: PRESS COMMAND + F
A SMALL BOX WILL DROP DOWN, HERE YOU CAN TYPE ANY WORD AND IT WILL HIGHLIGHT THAT WORD IN YOUR WEB PAGE

NOTE: HOW TO READ THIS PLATFORM:
READ SECTION 1,  FOLLOWED BY SECTION 2, THEN SECTION THREE: 

PART 9:
​With a friend discuss the following questions:

• What text is appearing in both the code and the web page?
• How is this language communicating extra information about the way to represent text?

PART 10: 
With the class we will answer the following questions:

• What text is appearing in both the code and the web page?
• How is this language communicating extra information about the way to represent text?

PART 11: 
​Questions to consider with the video (1MIN):

• Why are HTML tags useful?
• What does the paragraph tag do?

PART 12:​
Key Vocabulary:

• HTML - Hypertext Markup Language, a language used to create web pages
• HTML Element - A piece of a website, marked by a start tag and often closed with an end tag
• HTML Tag - The special set of characters that indicates the start and end of an HTML element and that element's type

PART 13: 
KEY TAKE AWAYS

•  Understand that HTML tags are used to structure, or organize, content on the screen. 

What are tags again? Please look examples of tags: 

• NOTE:
  • ​The organization, structure, or role of the content in the page (heading, paragraph, list, etc.)
    • ​Consider size or spacing ​

PART 14: Class question: 
How do you think a web browser for the blind might deal with paragraphs. For example, while sighted people may use spacing and new lines to separate out paragraphs, what should a screen blind reader do?

Part 15:
​Do This

• CLICK ON THE HELP & TIPS TAB AND ONLY TAKE 2 MIN LOOKING AT IT. YOU CAN ALWAYS COME BACK TO THIS....
• Write three separate sentences about any topic you like inside of the body tags of your web page.
• Hit "Refresh and Save" if you don't see the changes in the preview area.
• Compare your work with a neighbor. Make sure you're placing code in the same place.

PART 16: FORMATIVE ASSESSMENT: (SEE PICTURE BELOW FOR MORE GUIDANCE ) 

1. READ SECTION 1
2. THEN READ SECTION 2
3. THEN WORK IN BETWEEN THE <BODY> _____________</BODY>

PART 17:
​Compare the results with a neighbor. What has changed about the way your text is displayed?

PART 18: CHALLENGER: ALL STARE STUDENTS PLEASE DO THE FOLLOWING:

Do This

• Fix the broken code so that the web page displays correctly
• Compare the problems you fixed with a neighbor

EXIT TICKET: 
​In your own words, how does HTML help solve the problem of telling a computer what a web page looks like, not just what content is on it?

PLEASE USE SOME OF THE VOCABULARY IN YOUR RESPONDS:

• website content - the text and images on a website
• website structure - how the content of a website is organized
• HTML - Hypertext Markup Language, a language used to create web pages
• HTML Element - A piece of a website, marked by a start tag and often closed with an end tag
• HTML Tag - The special set of characters that indicates the start and end of an HTML element and that element's type​

Friday - October 15th, 2021

How can we tell the computer what to put on a web page?

What does HTML stand for how is it helpful?

Why we use HTML in website?

How does the browser know what information to present when it loads a web page?