1. IN THIS LESSON WE WILL REVIEW THE STRUCTURE OF THE INTERNET AND HOW BROWSERS ASSEMBLE WEBSITES BASED ON INSTRUCTIONS THEY RECEIVE FROM SERVERS. Internet structure

2. Lesson 1 In this lesson we will review the structure of the Internet and how browsers assemble Websites based on instructions they receive from servers. We will also learn about Object Oriented Programming, a concept that organizes data into “objects.” Methods and functions may change the data in objects. Objects contain data in the form of properties, values and methods.

3. What is the Internet? A global communication network that allows computers worldwide to connect and exchange information. There are three main types of computers on the Internet: Client: Your computer. Server: A computer that holds information and shares it with visitors (“clients”). Thousands of servers may be in large buildings, storing billions of photos, videos, pages of text and programs. Router: A computer that connects clients with servers.

4. Simple diagram

5. How a Website comes to you People use browsers to go places on the Internet. A browser is a special program, like Firefox or Chrome or Explorer, that shows Websites. A domain name, like www.newamericanscode.com, is kind of like a street address and it tells your browser exactly where to go.www.newamericanscode.com Your browser makes an http request to the server and asks to see the Website at the address you want.

6. What does the server give you? The server sends your browser instructions for how to put the website together and gives your browser copies of photos, music and videos. Have you ever followed a cooking recipe? Is the recipe really the food? No, the recipe is just instructions on how to make the food. It’s up to you to put everything together. The server gives your browser the “recipe” and your browser has to do all the “cooking.”

7. Browser languages The instructions are files that have names like index.html, styles.css, and script.js. HTML defines the basic words on the page. CSS is used for styling, coloring, creating boxes and placing elements on a page. JavaScript is used to animate the pages – make things move, get bigger or smaller, etc. JavaScript also accepts information from forms you fill out.

8. The very first Website - HTML only

9. Static pages The first Websites, and many simple Websites today, are static. The information doesn’t change, unless someone goes in and changes the file and publishes it again. These pages pretty much use HTML, CSS, and maybe JavaScript to animate the page. More sophisticated Websites are dynamic – part of the information in them changes, sometimes every second.

10. Server side vs. client side HTML, CSS and JavaScript are client side languages. They run in your browser, reducing demands on the server. PHP is a server side language. It accepts information from your browser and sends it to the server, like when you register for a new account, or post a Facebook update. PHP also sends new information from the server to your browser.

11. More server languages ASP and JSP are also server-side languages to create dynamic Web pages. Many dynamic pages use server-side code to access database information. The information in the database - friends’ updates, your past purchases, the address in Google maps – creates what is on the page. Sites that generate Web pages from database information are often called database-driven websites.

12. Creating web pages The instructions for computers are written in a computer language or code. In this class, we’re going to learn how to write the software instructions for a browser to put a website together – develop a website. We will create websites first in your computer. Later, you will learn to publish the website to the Internet, where it will sit on a server and anyone with a browser can see it.

13. See some code Open a browser and go to newamericanscode.com. Right-click and go to “View Page Source.” Do you see all the code? These are the instructions the browser uses to put the website together. Press F12. These are the developer tools. Click on sources. You can see all the different files your browser uses to assembles the website. Let’s spend some time with the developer tools. You will use them a lot to see how websites are put together, how they work, how to find problems and how to run experiments on them.

14. See the instructions your browser uses Click on the little highlighting arrow in the developer tools. Notice how when you put it over an element, all the code for that element is highlighted in the HTML page in developer tools. Notice also how there’s a window just with CSS instructions and those are highlighted as well. In the developer tools, let’s look at the tab called “sources.” Notice how you can see the different files your browser uses.

15. This is the highlighting tool If you use the tool to highlight this element You will see where this element appears in the HTML document And how it is styled in the CSS stylesheet