Today’s Goals:

• Discuss how to make up missed assignments
• Learn how the internet works and what a website is
• Use a simple code editor to code a webpage, preview it in a browser, and save it correctly
• Begin learning HTML

 Today’s featured website:

• https://boniver.withspotify.com/ – Spotify has created a unique website in honor of Bon Iver’s new album, I, I.
  “ViiSUALiiZER, as it’s officially called, is an immersive online experience that augments the listening experience with a mixture of animated ASCII art that is made up of the album title’s characters and facts revolving around how people across the globe are listening to the album.”

 Missed Assignments

• You will have until the end of a quarter to hand in late work without any penalties. No work will be accepted after the next quarter begins. For example, if you missed something in first quarter, you must hand it in before first quarter ends and can’t hand it in second quarter. At that point you will receive a 0 for that assignment.
• You are responsible, either by talking to me or by looking at the class website, to find out what you missed when you’re absent.
• Exception: if you’re absent on a day we do Harvest of the Month you do not have to make that up.
• I am available before school, after school, all day A and D days, and any period besides 5 and 6 if you want to meet with me to make up work.

 About the Internet and Websites

• FYI- how to get your website online 
• Let’s watch this video 
• Let’s check out this informative infographic  about how to build a website
• In your tables of 2, you will find answers to the following questions. Google is your friend, but you could also try to find some information on this site  in the web section at the top of the page.
  1. What is the internet What is the world wide web? How are they different? What is bigger?
  2. What is an IP address and how does it relate to a domain name?
  3. What is a website?
  4. What is a browser and can you provide examples of some?
  5. How do you create and register a domain name?
  6. What is a web host and why do you need one?
  7. What tool do you have to use to write HTML code?

 Set up for Successful Coding!

1. Launch the class website in Firefox or Chrome, click on Class Work, and then click on that day’s post.
2. Create a new folder on your computer if you’re beginning a new project. This is where you will save all of the project files.
3. Open Notepad++
4. Follow the instructions written on the class page
5. SAVE your file in Notepad++ every time you make a change (use save icon in top menu, go to File, Save, or simply hit ctrl s on your keyboard).
6. SAVE your webpage and any related files in the folder you created for the project on your computer.
7. LAUNCH or OPEN your webpage in Chrome or Firefox to preview your work. Go to RUN in the top menu of Notepad++ or find your webpage on your computer and double-click on it to open in a browser. Leave your page open; do not close it.
8. REFRESH the browser every time you make a change (hit the refresh button at the top of the browser or simply hit ctrl r on your keyboard).

 HTML basics

 What is it? What do you use it for?

• HTML is the language used to create webpages. Every piece of content on your webpage has to be wrapped in HTML tags (images, text, links, spaces, CSS, JavaScript, etc.). The browser reads HTML documents (a browser is just a document view for HTML documents) and displays the content based upon the HTML tags.
• Create a folder on your computer right now and call it HTML basics. You’re going to save all of your practice webpages and images in this folder.

 Peek inside the browser

• Let’s enable X-Ray Goggles (click on it in Bookmarks bar) again and view the HTML tags used to create the class website
• Let’s see what types of content browsers have to download for a webpage. We’ll do each of the following sites:
  All or Muffin (student site)
  Class site
  YouTube
  Hit ctrl shift j on your keyboard or go to the top right corner of your browser and click on the 3 dots to get Chrome’s menu, select More Tools, then Developer Tools
  Click Network, and then reload the page to see the content the browser has to download for the page

 Create and edit HTML

• Open Notepad++ on your computer
• Look at your computer’s keyboard and find the pointy brackets (or greater than/less than symbols) < >. You must use the shift key to type these. Also look for the forward slash /, which we’ll be using in our closing tags. You DO NOT need the shift key to type the forward slash.
• Let’s begin adding some HTML tags!
• We’re going to use the basic tags to add text, images, links, and nested tags such as a bold link or a bold paragraph.

 Important!

• HTML tags are never capitalized
• HTML tags usually come in pairs with an opening and closing tag. There are some exceptions, such as the line break tag and the image tag.
• All webpages must be saved as filename.html